[POC]: test removing highcontrast overrides

components/accordion/index.css

@@ -363,9 +363,3 @@
 		border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius));
 	}
 }
-
-@media (forced-colors: active) {
-	.spectrum-Accordion {
-		--spectrum-accordion-item-focus-indicator-color: Highlight;
-	}
-}

components/actionbar/dist/metadata.json

@@ -82,5 +82,5 @@
     "--mod-fieldlabel-font-size",
     "--mod-fieldlabel-line-height"
   ],
-  "high-contrast": ["--highcontrast-actionbar-popover-border-color"]
+  "high-contrast": []
 }

components/actionbar/index.css

@@ -88,7 +88,7 @@
 		position: relative;
 
 		border-radius: var(--mod-actionbar-corner-radius, var(--spectrum-actionbar-corner-radius));
-		border-color: var(--highcontrast-actionbar-popover-border-color, var(--mod-actionbar-popover-border-color, var(--spectrum-actionbar-popover-border-color)));
+		border-color: var(--mod-actionbar-popover-border-color, var(--spectrum-actionbar-popover-border-color));
 		background-color: var(--mod-actionbar-popover-background-color, var(--spectrum-actionbar-popover-background-color));
 
 		filter: drop-shadow(var(--mod-actionbar-shadow-horizontal, var(--spectrum-actionbar-shadow-horizontal)) var(--mod-actionbar-shadow-vertical, var(--spectrum-actionbar-shadow-vertical)) var(--mod-actionbar-shadow-blur, var(--spectrum-actionbar-shadow-blur)) var(--mod-actionbar-shadow-color, var(--spectrum-actionbar-shadow-color)));
@@ -139,10 +139,3 @@
 .spectrum-ActionBar--flexible .spectrum-ActionBar-popover {
 	inline-size: auto;
 }
-
-/* windows high contrast mode */
-@media (forced-colors: active) {
-	.spectrum-ActionBar {
-		--highcontrast-actionbar-popover-border-color: CanvasText;
-	}
-}

components/actionbutton/dist/metadata.json

@@ -2,9 +2,6 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-ActionButton",
-    ".spectrum-ActionButton .spectrum-ActionButton-hold",
-    ".spectrum-ActionButton .spectrum-ActionButton-icon",
-    ".spectrum-ActionButton .spectrum-ActionButton-label",
     ".spectrum-ActionButton--sizeL",
     ".spectrum-ActionButton--sizeS",
     ".spectrum-ActionButton--sizeXL",
@@ -20,7 +17,6 @@
     ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite",
     ".spectrum-ActionButton.spectrum-ActionButton--quiet",
     ".spectrum-ActionButton.spectrum-ActionButton--quiet.is-selected",
-    ".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
     ".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
@@ -220,13 +216,5 @@
     "--mod-button-font-family",
     "--mod-button-line-height"
   ],
-  "high-contrast": [
-    "--highcontrast-actionbutton-animation-duration",
-    "--highcontrast-actionbutton-background-color-default",
-    "--highcontrast-actionbutton-background-color-disabled",
-    "--highcontrast-actionbutton-border-color",
-    "--highcontrast-actionbutton-content-color-default",
-    "--highcontrast-actionbutton-content-color-disabled",
-    "--highcontrast-actionbutton-focus-indicator-color"
-  ]
+  "high-contrast": []
 }

components/actionbutton/index.css

@@ -243,35 +243,35 @@ governing permissions and limitations under the License.
 
 	border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius));
 	border-width: var(--spectrum-actionbutton-border-width);
-	border-color: var(--highcontrast-actionbutton-border-color, var(--spectrum-actionbutton-border-color));
+	border-color: var(--spectrum-actionbutton-border-color);
 	border-style: solid;
 
 	gap: var(--mod-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual));
 	padding-inline: calc(var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--spectrum-actionbutton-border-width));
 
-	background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default)));
-	color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default)));
+	background-color: var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default));
+	color: var(--mod-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default));
 
 	&:hover {
-		background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover)));
-		color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover)));
+		background-color: var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover));
+		color: var(--mod-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover));
 	}
 
 	&:focus-visible {
-		background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus)));
-		color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus)));
+		background-color: var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus));
+		color: var(--mod-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus));
 	}
 
 	&:active {
-		background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down)));
-		color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down)));
+		background-color: var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down));
+		color: var(--mod-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down));
 		transform: perspective(var(--spectrum-actionbutton-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down));
 	}
 
 	&:disabled,
 	&.is-disabled {
-		background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled)));
-		color: var(--highcontrast-actionbutton-content-color-disabled, var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled)));
+		background-color: var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled));
+		color: var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled));
 	}
 }
 
@@ -321,14 +321,14 @@ a.spectrum-ActionButton {
 
 /* Focus indicator */
 .spectrum-ActionButton {
-	transition: border-color var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out;
+	transition: border-color var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
 
 	&::after {
 		position: absolute;
 		inset: 0;
 		margin: calc((var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-actionbutton-focus-indicator-gap)) + var(--spectrum-actionbutton-border-width)) * -1);
 		border-radius: var(--mod-actionbutton-focus-indicator-border-radius, var(--spectrum-actionbutton-focus-indicator-border-radius));
-		transition: box-shadow var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out;
+		transition: box-shadow var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
 		pointer-events: none;
 		content: "";
 	}
@@ -338,78 +338,7 @@ a.spectrum-ActionButton {
 		outline: none;
 
 		&::after {
-			box-shadow: 0 0 0 var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-actionbutton-focus-indicator-thickness)) var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color)));
-		}
-	}
-}
-
-@media (forced-colors: active) {
-	.spectrum-ActionButton {
-		/**
-		 * Default
-		 * - Uses "Button*" system color pairings.
-		 * - Focus indicator is outside the element and should contrast with its background (default of Canvas).
-		 */
-		--highcontrast-actionbutton-border-color: ButtonBorder;
-		--highcontrast-actionbutton-background-color-default: ButtonFace;
-		--highcontrast-actionbutton-content-color-default: ButtonText;
-
-		--highcontrast-actionbutton-background-color-disabled: ButtonFace;
-		--highcontrast-actionbutton-content-color-disabled: GrayText;
-
-		--highcontrast-actionbutton-focus-indicator-color: CanvasText;
-
-		/**
-		 * Avoid performance and rendering issues with transitions between system colors.
-		 * Fixes bug in Windows High Contrast where border flashes the wrong color after hover (quiet).
-		 */
-		--highcontrast-actionbutton-animation-duration: 0;
-
-		&::after {
-			/* Make sure the box-shadow for the focus indicator renders. */
-			forced-color-adjust: none;
-		}
-
-		.spectrum-ActionButton-icon,
-		.spectrum-ActionButton-hold,
-		.spectrum-ActionButton-label {
-			/* Removes the extra unwanted background on label ("readability backplate") that can cause text to be unreadable. */
-			forced-color-adjust: none;
-		}
-
-		/**
-		 * Quiet
-		 * - Default blends in with background and has no border.
-		 * - Quiet + disabled does not show border unless selected.
-		 */
-		&.spectrum-ActionButton--quiet {
-			--highcontrast-actionbutton-border-color: Canvas;
-			--highcontrast-actionbutton-background-color-default: Canvas;
-			--highcontrast-actionbutton-background-color-disabled: Canvas;
-			--highcontrast-actionbutton-content-color-default: CanvasText;
-
-			&:disabled:not(.is-selected) {
-				--highcontrast-actionbutton-border-color: Canvas;
-			}
-		}
-
-		/* Interaction shows a change in border color. */
-		&:hover,
-		&:active,
-		&:focus-visible {
-			--highcontrast-actionbutton-border-color: Highlight;
-		}
-
-		/* Selected always shows as a solid highlighted color. */
-		&.is-selected {
-			--highcontrast-actionbutton-border-color: Highlight;
-			--highcontrast-actionbutton-background-color-default: Highlight;
-			--highcontrast-actionbutton-content-color-default: HighlightText;
-		}
-
-		/* Disabled has a GrayText border and content color. */
-		&:disabled {
-			--highcontrast-actionbutton-border-color: GrayText;
+			box-shadow: 0 0 0 var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-actionbutton-focus-indicator-thickness)) var(--mod-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color));
 		}
 	}
 }

components/alertbanner/dist/metadata.json

@@ -70,7 +70,6 @@
     "--spectrum-alert-banner-width"
   ],
   "global": [
-    "--spectrum-border-width-100",
     "--spectrum-cjk-line-height-100",
     "--spectrum-font-size-100",
     "--spectrum-informative-background-color-default",
@@ -90,8 +89,5 @@
     "--mod-closebutton-margin-top",
     "--mod-icon-size"
   ],
-  "high-contrast": [
-    "--highcontrast-alert-banner-border-color",
-    "--highcontrast-alert-banner-border-width"
-  ]
+  "high-contrast": []
 }

components/alertbanner/index.css

@@ -70,7 +70,6 @@
 	line-height: var(--mod-alert-banner-line-height, var(--spectrum-alert-banner-line-height));
 	color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color));
 	background: var(--mod-alert-banner-background, var(--spectrum-alert-banner-background));
-	border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent);
 
 	&.is-open {
 		display: flex;
@@ -119,10 +118,3 @@
 	margin-block-start: var(--mod-alert-banner-text-margin-block-start, var(--spectrum-alert-banner-text-margin-block-start));
 	margin-block-end: var(--mod-alert-banner-text-margin-block-end, var(--spectrum-alert-banner-text-margin-block-end));
 }
-
-@media (forced-colors: active) {
-	.spectrum-AlertBanner {
-		--highcontrast-alert-banner-border-color: CanvasText;
-		--highcontrast-alert-banner-border-width: var(--spectrum-border-width-100);
-	}
-}

components/alertdialog/index.css

@@ -115,9 +115,3 @@
 	display: flex;
 	justify-content: end;
 }
-
-@media (forced-colors: active) {
-	.spectrum-AlertDialog {
-		border: solid;
-	}
-}

components/asset/dist/metadata.json

@@ -31,5 +31,5 @@
     "--spectrum-gray-500"
   ],
   "passthroughs": [],
-  "high-contrast": ["--highcontrast-asset-icon-background-color"]
+  "high-contrast": []
 }

components/asset/index.css

@@ -12,8 +12,8 @@
  */
 
 .spectrum-Asset {
-	--spectrum-asset-folder-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-folder-background-color, var(--spectrum-gray-200)));
-	--spectrum-asset-file-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-file-background-color, var(--spectrum-gray-25)));
+	--spectrum-asset-folder-background: var(--mod-asset-folder-background-color, var(--spectrum-gray-200));
+	--spectrum-asset-file-background: var(--mod-asset-file-background-color, var(--spectrum-gray-25));
 	--spectrum-asset-folder-outline: var(--mod-asset-icon-outline-color, var(--spectrum-gray-500));
 	--spectrum-asset-file-outline: var(--mod-asset-icon-outline-color, var(--spectrum-gray-500));
 
@@ -54,9 +54,3 @@
 .spectrum-Asset-fileOutline {
 	fill: var(--spectrum-asset-file-outline);
 }
-
-@media (forced-colors: active) {
-	.spectrum-Asset {
-		--highcontrast-asset-icon-background-color: currentColor;
-	}
-}

components/assetcard/dist/metadata.json

@@ -2,7 +2,6 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-AssetCard",
-    ".spectrum-AssetCard .spectrum-AssetCard-selectionOrder",
     ".spectrum-AssetCard--checkboxSelection .spectrum-AssetCard-selectionIndicator",
     ".spectrum-AssetCard--checkboxSelection .spectrum-AssetCard-selectionIndicator .spectrum-AssetCard-selectionOrder",
     ".spectrum-AssetCard--checkboxSelection.is-selected .spectrum-AssetCard-selectionIndicator",
@@ -177,12 +176,5 @@
     "--spectrum-white"
   ],
   "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-assectcard-border-color-selected-down",
-    "--highcontrast-assetcard-border-color-hover",
-    "--highcontrast-assetcard-border-color-selected",
-    "--highcontrast-assetcard-border-color-selected-hover",
-    "--highcontrast-assetcard-selectionindicator-background-color-ordered",
-    "--highcontrast-assetcard-selectionindicator-color"
-  ]
+  "high-contrast": []
 }

components/assetcard/index.css

@@ -104,12 +104,12 @@
 	&:hover,
 	&:focus-visible {
 		.spectrum-AssetCard-assetContainer::after {
-			border-color: var(--highcontrast-assetcard-border-color-hover, var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover)));
+			border-color: var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover));
 		}
 
 		/* adds hover to checkbox when spectrum-AssetCard card receives hover */
 		.spectrum-Checkbox-box::before {
-			border-color: var(--highcontrast-assetcard-border-color-hover, var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover)));
+			border-color: var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover));
 		}
 	}
 
@@ -273,7 +273,7 @@
 
 	box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) var(--spectrum-assetcard-selectionindicator-box-shadow-color);
 
-	color: var(--highcontrast-assetcard-selectionindicator-color, var(--mod-assetcard-selectionindicator-color, var(--spectrum-assetcard-selectionindicator-color)));
+	color: var(--mod-assetcard-selectionindicator-color, var(--spectrum-assetcard-selectionindicator-color));
 	font-weight: var(--mod-assetcard-selectionindicator-font-weight, var(--spectrum-assetcard-selectionindicator-font-weight));
 	font-size: var(--mod-assetcard-selectionindicator-font-size, var(--spectrum-assetcard-selectionindicator-font-size));
 
@@ -290,7 +290,7 @@
 .spectrum-AssetCard.is-drop-target,
 .spectrum-AssetCard.is-selected {
 	.spectrum-AssetCard-assetContainer::after {
-		border-color: var(--highcontrast-assetcard-border-color-selected, var(--mod-assetcard-border-color-selected, var(--spectrum-assetcard-border-color-selected)));
+		border-color: var(--mod-assetcard-border-color-selected, var(--spectrum-assetcard-border-color-selected));
 	}
 
 	.spectrum-AssetCard-selectionOverlay {
@@ -299,13 +299,13 @@
 
 	&:hover {
 		.spectrum-AssetCard-assetContainer::after {
-			border-color: var(--highcontrast-assetcard-border-color-selected-hover, var(--mod-assetcard-border-color-selected-hover, var(--spectrum-assetcard-border-color-selected-hover)));
+			border-color: var(--mod-assetcard-border-color-selected-hover, var(--spectrum-assetcard-border-color-selected-hover));
 		}
 	}
 
 	&:active {
 		.spectrum-AssetCard-assetContainer::after {
-			border-color: var(--highcontrast-assectcard-border-color-selected-down, var(--mod-assectcard-border-color-selected-down, var(--spectrum-assetcard-border-color-selected-down)));
+			border-color: var(--mod-assectcard-border-color-selected-down, var(--spectrum-assetcard-border-color-selected-down));
 		}
 	}
 }
@@ -346,7 +346,7 @@
 /* with the little order flag that shows the selection order */
 .spectrum-AssetCard--orderedSelection {
 	.spectrum-AssetCard-selectionIndicator {
-		background-color: var(--highcontrast-assetcard-selectionindicator-background-color-ordered, var(--mod-assetcard-selectionindicator-background-color-ordered, var(--spectrum-assetcard-selectionindicator-background-color-ordered)));
+		background-color: var(--mod-assetcard-selectionindicator-background-color-ordered, var(--spectrum-assetcard-selectionindicator-background-color-ordered));
 
 		.spectrum-AssetCard-checkbox {
 			display: none;
@@ -360,19 +360,3 @@
 		}
 	}
 }
-
-@media (forced-colors: active) {
-	.spectrum-AssetCard {
-		--highcontrast-assetcard-border-color-hover: Highlight;
-		--highcontrast-assetcard-border-color-selected: Highlight;
-		--highcontrast-assetcard-border-color-selected-hover: Highlight;
-		--highcontrast-assectcard-border-color-selected-down: Highlight;
-		--highcontrast-assetcard-selectionindicator-background-color-ordered: Highlight;
-		--highcontrast-assetcard-selectionindicator-color: SelectedItemText;
-
-		.spectrum-AssetCard-selectionOrder {
-			/* prevents text backplate on displayed order number */
-			forced-color-adjust: none;
-		}
-	}
-}