From ed07266003fc329cb407cabd2f7010785411f823 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Wed, 17 Sep 2025 08:50:08 -0400 Subject: [PATCH] feat: scale back highcontrast in favor of defaults --- components/accordion/index.css | 6 - components/actionbar/dist/metadata.json | 2 +- components/actionbar/index.css | 9 +- components/actionbutton/dist/metadata.json | 14 +- components/actionbutton/index.css | 99 ++------- components/alertbanner/dist/metadata.json | 6 +- components/alertbanner/index.css | 8 - components/alertdialog/index.css | 6 - components/asset/dist/metadata.json | 2 +- components/asset/index.css | 10 +- components/assetcard/dist/metadata.json | 10 +- components/assetcard/index.css | 30 +-- components/assetlist/dist/metadata.json | 8 +- components/assetlist/index.css | 30 +-- components/avatar/dist/metadata.json | 2 +- components/avatar/index.css | 8 +- components/badge/dist/metadata.json | 2 +- components/badge/index.css | 9 - components/breadcrumb/dist/metadata.json | 10 +- components/breadcrumb/index.css | 26 +-- components/button/dist/metadata.json | 30 +-- components/button/index.css | 79 ++----- components/calendar/dist/metadata.json | 18 +- components/calendar/index.css | 79 ++----- components/checkbox/dist/metadata.json | 19 +- components/checkbox/index.css | 87 +++----- components/clearbutton/dist/metadata.json | 2 +- components/clearbutton/index.css | 10 +- components/closebutton/dist/metadata.json | 10 +- components/closebutton/index.css | 38 +--- components/colorarea/dist/metadata.json | 11 +- components/colorarea/index.css | 24 +- components/colorhandle/dist/metadata.json | 7 +- components/colorhandle/index.css | 15 +- components/colorloupe/dist/metadata.json | 3 +- components/colorloupe/index.css | 8 +- components/colorslider/dist/metadata.json | 9 +- components/colorslider/index.css | 15 +- components/colorwheel/dist/metadata.json | 6 +- components/colorwheel/index.css | 14 +- components/combobox/dist/metadata.json | 9 +- components/combobox/index.css | 46 ++-- components/contextualhelp/dist/metadata.json | 6 +- components/contextualhelp/index.css | 11 +- components/datepicker/dist/metadata.json | 10 +- components/datepicker/index.css | 25 +-- components/dial/dist/metadata.json | 19 +- components/dial/index.css | 39 ++-- components/dialog/dist/metadata.json | 2 - components/dialog/index.css | 6 - components/divider/dist/metadata.json | 3 +- components/divider/index.css | 9 +- components/dropindicator/dist/metadata.json | 4 +- components/dropindicator/index.css | 10 +- components/dropzone/dist/metadata.json | 9 +- components/dropzone/index.css | 29 +-- components/fieldlabel/dist/metadata.json | 2 +- components/fieldlabel/index.css | 9 +- .../floatingactionbutton/dist/metadata.json | 20 +- components/floatingactionbutton/index.css | 35 +-- components/form/dist/metadata.json | 3 +- components/form/index.css | 11 +- components/helptext/dist/metadata.json | 9 +- components/helptext/index.css | 23 +- components/icon/dist/metadata.json | 1 - components/icon/icons.css | 6 +- .../illustratedmessage/dist/metadata.json | 3 +- components/illustratedmessage/index.css | 8 +- components/infieldbutton/dist/metadata.json | 15 +- components/infieldbutton/index.css | 39 +--- components/inlinealert/dist/metadata.json | 13 +- components/inlinealert/index.css | 27 +-- components/link/dist/metadata.json | 5 +- components/link/index.css | 12 +- components/logicbutton/dist/metadata.json | 15 +- components/logicbutton/index.css | 55 +---- components/menu/dist/metadata.json | 65 +----- components/menu/index.css | 202 ++++++----------- components/opacitycheckerboard/index.css | 7 - components/picker/dist/metadata.json | 48 +--- components/picker/index.css | 113 ++++------ components/pickerbutton/dist/metadata.json | 15 +- components/pickerbutton/index.css | 39 +--- components/popover/dist/metadata.json | 3 +- components/popover/index.css | 11 +- components/progressbar/dist/metadata.json | 14 +- components/progressbar/index.css | 20 +- components/progresscircle/dist/metadata.json | 13 +- components/progresscircle/index.css | 25 +-- components/radio/dist/metadata.json | 44 +--- components/radio/index.css | 97 ++------ components/rating/dist/metadata.json | 12 +- components/rating/index.css | 26 +-- components/search/dist/metadata.json | 10 +- components/search/index.css | 30 +-- components/sidenav/dist/metadata.json | 31 +-- components/sidenav/index.css | 60 ++--- components/slider/dist/metadata.json | 54 +---- components/slider/index.css | 122 +++-------- components/splitview/dist/metadata.json | 11 +- components/splitview/index.css | 35 ++- components/statuslight/dist/metadata.json | 10 +- components/statuslight/index.css | 18 +- components/steplist/dist/metadata.json | 9 +- components/steplist/index.css | 36 +-- components/stepper/dist/metadata.json | 16 +- components/stepper/index.css | 84 +------ components/swatch/dist/metadata.json | 19 +- components/swatch/index.css | 57 +---- components/switch/dist/metadata.json | 60 +---- components/switch/index.css | 106 +++------ components/table/dist/metadata.json | 60 +---- components/table/index.css | 207 +++++------------- components/tabs/dist/metadata.json | 28 +-- components/tabs/index.css | 57 +---- components/tag/dist/metadata.json | 61 +----- components/tag/index.css | 131 ++++------- components/textfield/dist/metadata.json | 50 +---- components/textfield/index.css | 119 ++++------ components/thumbnail/dist/metadata.json | 13 +- components/thumbnail/index.css | 24 +- components/tooltip/dist/metadata.json | 8 +- components/tooltip/index.css | 40 ++-- components/tray/dist/metadata.json | 4 +- components/tray/index.css | 14 +- components/treeview/dist/metadata.json | 33 +-- components/treeview/index.css | 109 +++------ components/typography/dist/metadata.json | 11 +- components/typography/index.css | 27 +-- tools/generator/templates/index.css.hbs | 8 - 130 files changed, 749 insertions(+), 3106 deletions(-) diff --git a/components/accordion/index.css b/components/accordion/index.css index e9372ab6543..44ec9176632 100644 --- a/components/accordion/index.css +++ b/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; - } -} diff --git a/components/actionbar/dist/metadata.json b/components/actionbar/dist/metadata.json index 2073a6be7d6..b443d887112 100644 --- a/components/actionbar/dist/metadata.json +++ b/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": [] } diff --git a/components/actionbar/index.css b/components/actionbar/index.css index 737af9a4382..83c9fb5f2da 100644 --- a/components/actionbar/index.css +++ b/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; - } -} diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json index 7a3a4bb0a35..74049ad188e 100644 --- a/components/actionbutton/dist/metadata.json +++ b/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", @@ -218,13 +214,5 @@ "--mod-button-animation-duration", "--mod-button-font-family" ], - "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": [] } diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index 8205eb370cb..e71be355e99 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -278,14 +278,14 @@ 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)); /* Fix Firefox */ &::-moz-focus-inner { @@ -308,25 +308,25 @@ governing permissions and limitations under the License. } &: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)); } } @@ -390,14 +390,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: ""; } @@ -407,78 +407,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)); } } } diff --git a/components/alertbanner/dist/metadata.json b/components/alertbanner/dist/metadata.json index deed56dd2c9..7085e5b521c 100644 --- a/components/alertbanner/dist/metadata.json +++ b/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": [] } diff --git a/components/alertbanner/index.css b/components/alertbanner/index.css index d3000e6d243..02b3fbaccf1 100644 --- a/components/alertbanner/index.css +++ b/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); - } -} diff --git a/components/alertdialog/index.css b/components/alertdialog/index.css index 0bc24598937..365df510c88 100644 --- a/components/alertdialog/index.css +++ b/components/alertdialog/index.css @@ -115,9 +115,3 @@ display: flex; justify-content: end; } - -@media (forced-colors: active) { - .spectrum-AlertDialog { - border: solid; - } -} diff --git a/components/asset/dist/metadata.json b/components/asset/dist/metadata.json index 6389e295f47..9ae7243f16b 100644 --- a/components/asset/dist/metadata.json +++ b/components/asset/dist/metadata.json @@ -31,5 +31,5 @@ "--spectrum-gray-500" ], "passthroughs": [], - "high-contrast": ["--highcontrast-asset-icon-background-color"] + "high-contrast": [] } diff --git a/components/asset/index.css b/components/asset/index.css index e31f6aea3a7..857f1dde13b 100644 --- a/components/asset/index.css +++ b/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; - } -} diff --git a/components/assetcard/dist/metadata.json b/components/assetcard/dist/metadata.json index 94bf07de0af..d2dbde23dfd 100644 --- a/components/assetcard/dist/metadata.json +++ b/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": [] } diff --git a/components/assetcard/index.css b/components/assetcard/index.css index 56c40cc58c1..7389fc5d081 100644 --- a/components/assetcard/index.css +++ b/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; - } - } -} diff --git a/components/assetlist/dist/metadata.json b/components/assetlist/dist/metadata.json index 0da89f4ae57..a75c782de92 100644 --- a/components/assetlist/dist/metadata.json +++ b/components/assetlist/dist/metadata.json @@ -85,11 +85,5 @@ "--spectrum-spacing-75" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-assetlist-border-color-key-focus", - "--highcontrast-assetlist-item-background-color-hover", - "--highcontrast-assetlist-item-background-color-selected", - "--highcontrast-assetlist-item-background-color-selected-hover", - "--highcontrast-assetlist-label-color" - ] + "high-contrast": [] } diff --git a/components/assetlist/index.css b/components/assetlist/index.css index 28801db0d89..b8df67ba1f3 100644 --- a/components/assetlist/index.css +++ b/components/assetlist/index.css @@ -48,7 +48,7 @@ .spectrum-AssetList-item { position: relative; - color: var(--highcontrast-assetlist-label-color, var(--mod-assetlist-label-color, var(--spectrum-assetlist-label-color))); + color: var(--mod-assetlist-label-color, var(--spectrum-assetlist-label-color)); display: flex; box-sizing: border-box; @@ -116,17 +116,17 @@ } &:hover { - background-color: var(--highcontrast-assetlist-item-background-color-hover, var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover))); + background-color: var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover)); } &:focus-within { &:focus-visible, &.is-focused { - background-color: var(--highcontrast-assetlist-item-background-color-hover, var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover))); + background-color: var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover)); &::before { /* we cannot achieve rounded corners with outline so we use box-shadow instead */ - box-shadow: 0 0 0 2px var(--highcontrast-assetlist-border-color-key-focus, var(--mod-assetlist-border-color-key-focus, var(--spectrum-assetlist-border-color-key-focus))) inset; + box-shadow: 0 0 0 2px var(--mod-assetlist-border-color-key-focus, var(--spectrum-assetlist-border-color-key-focus)) inset; } } } @@ -142,11 +142,11 @@ } &.is-selected { - background-color: var(--highcontrast-assetlist-item-background-color-selected, var(--mod-assetlist-item-background-color-selected, var(--spectrum-assetlist-item-background-color-selected))); + background-color: var(--mod-assetlist-item-background-color-selected, var(--spectrum-assetlist-item-background-color-selected)); &:hover, &:focus { - background-color: var(--highcontrast-assetlist-item-background-color-selected-hover, var(--mod-assetlist-item-background-color-selected-hover, var(--spectrum-assetlist-item-background-color-selected-hover))); + background-color: var(--mod-assetlist-item-background-color-selected-hover, var(--spectrum-assetlist-item-background-color-selected-hover)); } } } @@ -169,21 +169,3 @@ overflow: hidden; white-space: nowrap; } - -@media (forced-colors: active) { - .spectrum-AssetList-item { - --highcontrast-assetlist-border-color-key-focus: Highlight; - --highcontrast-assetlist-item-background-color-hover: Highlight; - --highcontrast-assetlist-item-background-color-selected-hover: Highlight; - --highcontrast-assetlist-label-color: ButtonText; - --highcontrast-assetlist-item-background-color-selected: SelectedItem; - - forced-color-adjust: none; - - &:hover, - &.is-selected, - &.is-navigated { - --highcontrast-assetlist-label-color: HighlightText; - } - } -} diff --git a/components/avatar/dist/metadata.json b/components/avatar/dist/metadata.json index 6b5fb54aac2..c1fa9be6c73 100644 --- a/components/avatar/dist/metadata.json +++ b/components/avatar/dist/metadata.json @@ -73,5 +73,5 @@ "--spectrum-focus-indicator-thickness" ], "passthroughs": [], - "high-contrast": ["--highcontrast-avatar-focus-indicator-color"] + "high-contrast": [] } diff --git a/components/avatar/index.css b/components/avatar/index.css index e6203f003d8..d5280938f10 100644 --- a/components/avatar/index.css +++ b/components/avatar/index.css @@ -113,12 +113,6 @@ --spectrum-avatar-block-size: var(--spectrum-avatar-size-1500); } -@media (forced-colors: active) { - .spectrum-Avatar { - --highcontrast-avatar-focus-indicator-color: CanvasText; - } -} - .spectrum-Avatar { display: inline-block; position: relative; @@ -158,7 +152,7 @@ border-style: solid; border-width: var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness)); - border-color: var(--highcontrast-avatar-focus-indicator-color, var(--mod-avatar-focus-indicator-color, var(--spectrum-avatar-focus-indicator-color))); + border-color: var(--mod-avatar-focus-indicator-color, var(--spectrum-avatar-focus-indicator-color)); border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius)); } } diff --git a/components/badge/dist/metadata.json b/components/badge/dist/metadata.json index 29aa729974a..ff3557fed82 100644 --- a/components/badge/dist/metadata.json +++ b/components/badge/dist/metadata.json @@ -339,5 +339,5 @@ "--spectrum-yellow-subtle-background-color-default" ], "passthroughs": [], - "high-contrast": ["--highcontrast-badge-border-color"] + "high-contrast": [] } diff --git a/components/badge/index.css b/components/badge/index.css index 3498a25777f..f521bc5d3b4 100644 --- a/components/badge/index.css +++ b/components/badge/index.css @@ -118,8 +118,6 @@ --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-100); --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100); --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-100); - - --highcontrast-badge-border-color: CanvasText; } /* text and icon color is black for these background colors */ @@ -185,13 +183,6 @@ --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-300); } -/* windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Badge { - border-color: var(--highcontrast-badge-border-color); - } -} - .spectrum-Badge { min-block-size: var(--mod-badge-height, var(--spectrum-badge-height)); inline-size: auto; diff --git a/components/breadcrumb/dist/metadata.json b/components/breadcrumb/dist/metadata.json index 01ed6639e32..d3e00f5c77b 100644 --- a/components/breadcrumb/dist/metadata.json +++ b/components/breadcrumb/dist/metadata.json @@ -152,13 +152,5 @@ "--spectrum-text-underline-thickness" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-breadcrumbs-action-button-color", - "--highcontrast-breadcrumbs-action-button-color-disabled", - "--highcontrast-breadcrumbs-focus-indicator-color", - "--highcontrast-breadcrumbs-separator-color", - "--highcontrast-breadcrumbs-text-color", - "--highcontrast-breadcrumbs-text-color-current", - "--highcontrast-breadcrumbs-text-color-disabled" - ] + "high-contrast": [] } diff --git a/components/breadcrumb/index.css b/components/breadcrumb/index.css index bc62aafbc57..33667ef2e19 100644 --- a/components/breadcrumb/index.css +++ b/components/breadcrumb/index.css @@ -112,7 +112,7 @@ position: relative; margin-block: var(--mod-breadcrumbs-icon-spacing-block, var(--spectrum-breadcrumbs-icon-spacing-block)); opacity: 1; - color: var(--highcontrast-breadcrumbs-separator-color, var(--mod-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color))); + color: var(--mod-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color)); &:dir(rtl) { transform: scaleX(-1); @@ -147,10 +147,10 @@ > .spectrum-ActionButton { margin-inline: var(--mod-breadcrumbs-action-button-spacing-inline, var(--spectrum-breadcrumbs-action-button-spacing-inline)); margin-block: var(--mod-breadcrumbs-action-button-spacing-block, var(--spectrum-breadcrumbs-action-button-spacing-block)); - color: var(--highcontrast-breadcrumbs-action-button-color, var(--mod-breadcrumbs-action-button-color, var(--spectrum-breadcrumbs-action-button-color))); + color: var(--mod-breadcrumbs-action-button-color, var(--spectrum-breadcrumbs-action-button-color)); &:disabled { - color: var(--highcontrast-breadcrumbs-action-button-color-disabled, var(--mod-breadcrumbs-action-button-color-disabled, var(--spectrum-breadcrumbs-action-button-color-disabled))); + color: var(--mod-breadcrumbs-action-button-color-disabled, var(--spectrum-breadcrumbs-action-button-color-disabled)); } } @@ -174,7 +174,7 @@ border-radius: var(--mod-breadcrumbs-item-link-border-radius, var(--spectrum-breadcrumbs-item-link-border-radius)); /* placeholder for token */ outline: none; text-decoration: none; - color: var(--highcontrast-breadcrumbs-text-color, var(--mod-breadcrumbs-text-color, var(--spectrum-breadcrumbs-text-color))); + color: var(--mod-breadcrumbs-text-color, var(--spectrum-breadcrumbs-text-color)); /* Create new stacking context for negative z-index dragged pseudo element. */ isolation: isolate; @@ -185,12 +185,12 @@ &.is-disabled, &[aria-disabled="true"] { - color: var(--highcontrast-breadcrumbs-text-color-disabled, var(--mod-breadcrumbs-text-color-disabled, var(--spectrum-breadcrumbs-text-color-disabled))); + color: var(--mod-breadcrumbs-text-color-disabled, var(--spectrum-breadcrumbs-text-color-disabled)); } /* Breadcrumbs title (current item) */ .spectrum-Breadcrumbs-item:last-of-type & { - color: var(--highcontrast-breadcrumbs-text-color-current, var(--mod-breadcrumbs-text-color-current, var(--spectrum-breadcrumbs-text-color-current))); + color: var(--mod-breadcrumbs-text-color-current, var(--spectrum-breadcrumbs-text-color-current)); margin-block-start: var(--mod-breadcrumbs-title-spacing-block-start, var(--spectrum-breadcrumbs-title-spacing-block-start)); margin-block-end: var(--mod-breadcrumbs-title-spacing-block-end, var(--spectrum-breadcrumbs-title-spacing-block-end)); } @@ -232,7 +232,7 @@ border-width: var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness)); border-style: solid; border-radius: var(--mod-breadcrumbs-item-link-border-radius, var(--spectrum-breadcrumbs-item-link-border-radius)); - border-color: var(--highcontrast-breadcrumbs-focus-indicator-color, var(--mod-breadcrumbs-focus-indicator-color, var(--spectrum-breadcrumbs-focus-indicator-color))); + border-color: var(--mod-breadcrumbs-focus-indicator-color, var(--spectrum-breadcrumbs-focus-indicator-color)); } .spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink::before { @@ -257,15 +257,3 @@ } } } - -@media (forced-colors: active) { - .spectrum-Breadcrumbs { - --highcontrast-breadcrumbs-text-color: LinkText; - --highcontrast-breadcrumbs-text-color-current: CanvasText; - --highcontrast-breadcrumbs-text-color-disabled: GrayText; - --highcontrast-breadcrumbs-separator-color: CanvasText; - --highcontrast-breadcrumbs-action-button-color: LinkText; - --highcontrast-breadcrumbs-action-button-color-disabled: GrayText; - --highcontrast-breadcrumbs-focus-indicator-color: CanvasText; - } -} diff --git a/components/button/dist/metadata.json b/components/button/dist/metadata.json index 67e48aa9bd3..2164e0c0d35 100644 --- a/components/button/dist/metadata.json +++ b/components/button/dist/metadata.json @@ -21,7 +21,6 @@ ".spectrum-Button.is-pending .spectrum-Icon", ".spectrum-Button.is-pending .spectrum-ProgressCircle", ".spectrum-Button.spectrum-Button--accent", - ".spectrum-Button.spectrum-Button--accent .spectrum-Button-label", ".spectrum-Button.spectrum-Button--iconOnly", ".spectrum-Button.spectrum-Button--iconOnly .spectrum-Icon", ".spectrum-Button.spectrum-Button--negative", @@ -46,8 +45,6 @@ ".spectrum-Button:focus-visible", ".spectrum-Button:focus-visible:after", ".spectrum-Button:hover", - ".spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)", - ".spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite) .spectrum-Button-label", ".spectrum-Button[pending]", ".spectrum-Button[pending] .spectrum-Button-label", ".spectrum-Button[pending] .spectrum-Icon", @@ -214,7 +211,6 @@ "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", - "--spectrum-progress-circle-thickness-medium", "--spectrum-sans-font-family-stack", "--spectrum-static-black-focus-indicator-color", "--spectrum-static-white-focus-indicator-color", @@ -242,28 +238,6 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "passthroughs": [ - "--mod-progress-circle-position", - "--mod-progress-circle-thickness", - "--mod-progress-circle-track-border-color", - "--mod-progress-circle-track-border-color-over-background" - ], - "high-contrast": [ - "--highcontrast-button-background-color-default", - "--highcontrast-button-background-color-disabled", - "--highcontrast-button-background-color-down", - "--highcontrast-button-background-color-focus", - "--highcontrast-button-background-color-hover", - "--highcontrast-button-border-color-default", - "--highcontrast-button-border-color-disabled", - "--highcontrast-button-border-color-down", - "--highcontrast-button-border-color-focus", - "--highcontrast-button-border-color-hover", - "--highcontrast-button-content-color-default", - "--highcontrast-button-content-color-disabled", - "--highcontrast-button-content-color-down", - "--highcontrast-button-content-color-focus", - "--highcontrast-button-content-color-hover", - "--highcontrast-button-focus-ring-color" - ] + "passthroughs": ["--mod-progress-circle-position"], + "high-contrast": [] } diff --git a/components/button/index.css b/components/button/index.css index cc40ddb5227..0fea46e939f 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -372,9 +372,9 @@ padding-block: 0; padding-inline: var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text)); - background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default))); - border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default))); - color: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-button-content-color-default))); + background-color: var(--mod-button-background-color-default, var(--spectrum-button-background-color-default)); + border-color: var(--mod-button-border-color-default, var(--spectrum-button-border-color-default)); + color: var(--mod-button-content-color-default, var(--spectrum-button-content-color-default)); transition: border-color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear, color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear, @@ -434,7 +434,7 @@ outline: none; &::after { - box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) var(--highcontrast-button-focus-ring-color, var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color))); + box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color)); } } @@ -445,21 +445,21 @@ } &:hover { - background-color: var(--highcontrast-button-background-color-hover, var(--mod-button-background-color-hover, var(--spectrum-button-background-color-hover))); - border-color: var(--highcontrast-button-border-color-hover, var(--mod-button-border-color-hover, var(--spectrum-button-border-color-hover))); - color: var(--highcontrast-button-content-color-hover, var(--mod-button-content-color-hover, var(--spectrum-button-content-color-hover))); + background-color: var(--mod-button-background-color-hover, var(--spectrum-button-background-color-hover)); + border-color: var(--mod-button-border-color-hover, var(--spectrum-button-border-color-hover)); + color: var(--mod-button-content-color-hover, var(--spectrum-button-content-color-hover)); } &:focus-visible { - background-color: var(--highcontrast-button-background-color-focus, var(--mod-button-background-color-focus, var(--spectrum-button-background-color-focus))); - border-color: var(--highcontrast-button-border-color-focus, var(--mod-button-border-color-focus, var(--spectrum-button-border-color-focus))); - color: var(--highcontrast-button-content-color-focus, var(--mod-button-content-color-focus, var(--spectrum-button-content-color-focus))); + background-color: var(--mod-button-background-color-focus, var(--spectrum-button-background-color-focus)); + border-color: var(--mod-button-border-color-focus, var(--spectrum-button-border-color-focus)); + color: var(--mod-button-content-color-focus, var(--spectrum-button-content-color-focus)); } &:active { - background-color: var(--highcontrast-button-background-color-down, var(--mod-button-background-color-down, var(--spectrum-button-background-color-down))); - border-color: var(--highcontrast-button-border-color-down, var(--mod-button-border-color-down, var(--spectrum-button-border-color-down))); - color: var(--highcontrast-button-content-color-down, var(--mod-button-content-color-down, var(--spectrum-button-content-color-down))); + background-color: var(--mod-button-background-color-down, var(--spectrum-button-background-color-down)); + border-color: var(--mod-button-border-color-down, var(--spectrum-button-border-color-down)); + color: var(--mod-button-content-color-down, var(--spectrum-button-content-color-down)); transform: perspective(var(--spectrum-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); } @@ -467,9 +467,9 @@ &.is-disabled, &[pending], &.is-pending { - background-color: var(--highcontrast-button-background-color-disabled, var(--mod-button-background-color-disabled, var(--spectrum-button-background-color-disabled))); - border-color: var(--highcontrast-button-border-color-disabled, var(--mod-button-border-color-disabled, var(--spectrum-button-border-color-disabled))); - color: var(--highcontrast-button-content-color-disabled, var(--mod-button-content-color-disabled, var(--spectrum-button-content-color-disabled))); + background-color: var(--mod-button-background-color-disabled, var(--spectrum-button-background-color-disabled)); + border-color: var(--mod-button-border-color-disabled, var(--spectrum-button-border-color-disabled)); + color: var(--mod-button-content-color-disabled, var(--spectrum-button-content-color-disabled)); } .spectrum-Icon, @@ -554,50 +554,3 @@ a.spectrum-Button { margin-block-start: 0; } } - -/* Forced colors / high contrast mode */ -@media (forced-colors: active) { - .spectrum-Button { - --highcontrast-button-border-color-default: ButtonBorder; - --highcontrast-button-border-color-hover: ButtonBorder; - --highcontrast-button-border-color-focus: ButtonBorder; - --highcontrast-button-border-color-down: ButtonBorder; - --highcontrast-button-content-color-disabled: GrayText; - --highcontrast-button-border-color-disabled: GrayText; - --highcontrast-button-background-color-disabled: ButtonFace; - - /* @passthrough start -- progress circle highcontrast overrides */ - --mod-progress-circle-track-border-color: ButtonText; - --mod-progress-circle-track-border-color-over-background: ButtonText; - --mod-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); - - --highcontrast-button-focus-ring-color: ButtonText; - - &:focus-visible { - &::after { - /* Make sure the box-shadow used for the focus indicator is displayed. */ - forced-color-adjust: none; - } - } - - &.spectrum-Button--accent, - &:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite) { - /* The accent fill variant looks different than the other buttons. - It inverts the background and content colors. */ - --highcontrast-button-background-color-default: ButtonText; - --highcontrast-button-content-color-default: ButtonFace; - - --highcontrast-button-background-color-hover: Highlight; - --highcontrast-button-background-color-down: Highlight; - --highcontrast-button-background-color-focus: Highlight; - - --highcontrast-button-content-color-hover: HighlightText; - --highcontrast-button-content-color-down: HighlightText; - --highcontrast-button-content-color-focus: HighlightText; - - .spectrum-Button-label { - forced-color-adjust: none; - } - } - } -} diff --git a/components/calendar/dist/metadata.json b/components/calendar/dist/metadata.json index cc1fb80035c..b173de1e5cd 100644 --- a/components/calendar/dist/metadata.json +++ b/components/calendar/dist/metadata.json @@ -180,21 +180,5 @@ "--mod-actionbutton-edge-to-text", "--mod-actionbutton-min-width" ], - "high-contrast": [ - "--highcontrast-calendar-day-background-cap-selected", - "--highcontrast-calendar-day-background-down", - "--highcontrast-calendar-day-background-focus", - "--highcontrast-calendar-day-background-hover", - "--highcontrast-calendar-day-background-selected", - "--highcontrast-calendar-day-background-selected-hover", - "--highcontrast-calendar-day-border-color-focus", - "--highcontrast-calendar-day-text-color-cap-selected", - "--highcontrast-calendar-day-text-color-hover", - "--highcontrast-calendar-day-text-color-key-focus", - "--highcontrast-calendar-day-text-color-selected", - "--highcontrast-calendar-day-title-text-color", - "--highcontrast-calendar-day-today-background-selected-hover", - "--highcontrast-calendar-day-today-border-color", - "--highcontrast-calendar-day-today-text-color" - ] + "high-contrast": [] } diff --git a/components/calendar/index.css b/components/calendar/index.css index 352a388d74f..d445b22401f 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -33,7 +33,7 @@ --spectrum-calendar-title-text-size: var(--mod-calendar-title-text-size, var(--spectrum-font-size-300)); --spectrum-calendar-title-text-font-weight: var(--mod-calendar-day-title-text-font-weight, var(--spectrum-bold-font-weight)); - --spectrum-calendar-title-text-color: var(--highcontrast-calendar-day-title-text-color, var(--mod-calendar-day-title-text-color, var(--spectrum-neutral-subdued-content-color-default))); + --spectrum-calendar-title-text-color: var(--mod-calendar-day-title-text-color, var(--spectrum-neutral-subdued-content-color-default)); --spectrum-calendar-heading-text-size: var(--mod-calendar-day-title-text-size, var(--spectrum-font-size-50)); @@ -46,18 +46,18 @@ .spectrum-Calendar-date { --spectrum-calendar-day-background: var(--mod-calendar-day-background-color, transparent); - --spectrum-calendar-day-background-selected: var(--highcontrast-calendar-day-background-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected))); - --spectrum-calendar-day-background-selected-hover: var(--highcontrast-calendar-day-background-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover))); + --spectrum-calendar-day-background-selected: var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected)); + --spectrum-calendar-day-background-selected-hover: var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover)); --spectrum-calendar-day-background-color-selected-disabled: rgb(var(--spectrum-gray-100-rgb), 0.4); - --spectrum-calendar-day-background-cap-selected: var(--highcontrast-calendar-day-background-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected))); - --spectrum-calendar-day-background-hover: var(--highcontrast-calendar-day-background-hover, var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover))); - --spectrum-calendar-day-background-focus: var(--highcontrast-calendar-day-background-focus, var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus))); - --spectrum-calendar-day-background-down: var(--highcontrast-calendar-day-background-down, var(--mod-calendar-day-background-color-down, var(--spectrum-calendar-day-background-color-down))); + --spectrum-calendar-day-background-cap-selected: var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected)); + --spectrum-calendar-day-background-hover: var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover)); + --spectrum-calendar-day-background-focus: var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus)); + --spectrum-calendar-day-background-down: var(--mod-calendar-day-background-color-down, var(--spectrum-calendar-day-background-color-down)); --spectrum-calendar-day-background-layer-color: var(--mod-calendar-day-background-layer-color, transparent); --spectrum-calendar-day-border-color: var(--mod-calendar-day-border-color, transparent); - --spectrum-calendar-day-border-color-focus: var(--highcontrast-calendar-day-border-color-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus))); + --spectrum-calendar-day-border-color-focus: var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus)); --spectrum-calendar-day-text-size: var(--mod-calendar-day-text-size, var(--spectrum-font-size-100)); --spectrum-calendar-day-text-font-weight: var(--mod-calendar-day-text-font-weight, var(--spectrum-regular-font-weight)); @@ -65,18 +65,18 @@ --spectrum-calendar-day-text-font-weight-cap-selected: var(--mod-calendar-day-text-font-weight-cap-selected, var(--spectrum-bold-font-weight)); /* Styles specific to the today identifier */ - --spectrum-calendar-day-today-background-selected-hover: var(--highcontrast-calendar-day-today-background-selected-hover, var(--mod-calendar-day-today-background-color-selected-hover, var(--spectrum-calendar-day-today-background-color-selected-hover))); + --spectrum-calendar-day-today-background-selected-hover: var(--mod-calendar-day-today-background-color-selected-hover, var(--spectrum-calendar-day-today-background-color-selected-hover)); --spectrum-calendar-day-today-text-font-weight: var(--mod-calendar-day-today-text-font-weight, var(--spectrum-bold-font-weight)); - --spectrum-calendar-day-today-text-color: var(--highcontrast-calendar-day-today-text-color, var(--mod-calendar-day-today-text-color, var(--spectrum-neutral-content-color-default))); + --spectrum-calendar-day-today-text-color: var(--mod-calendar-day-today-text-color, var(--spectrum-neutral-content-color-default)); /* @todo There's not a good semantic alias to map this to */ - --spectrum-calendar-day-today-border-color: var(--highcontrast-calendar-day-today-border-color, var(--mod-calendar-day-today-border-color, var(--spectrum-gray-800))); + --spectrum-calendar-day-today-border-color: var(--mod-calendar-day-today-border-color, var(--spectrum-gray-800)); /* Applied to both title-text-color and today-text-color */ --spectrum-calendar-day-text-color: var(--mod-calendar-day-text-color, var(--spectrum-neutral-subdued-content-color-default)); - --spectrum-calendar-day-text-color-selected: var(--highcontrast-calendar-day-text-color-selected, var(--mod-calendar-day-text-color-selected, var(--spectrum-neutral-content-color-down))); - --spectrum-calendar-day-text-color-cap-selected: var(--highcontrast-calendar-day-text-color-cap-selected, var(--mod-calendar-day-text-color-cap-selected, var(--spectrum-neutral-content-color-down))); - --spectrum-calendar-day-text-color-hover: var(--highcontrast-calendar-day-text-color-hover, var(--mod-calendar-day-text-color-hover, var(--spectrum-neutral-content-color-hover))); - --spectrum-calendar-day-text-color-key-focus: var(--highcontrast-calendar-day-text-color-key-focus, var(--mod-calendar-day-text-color-key-focus, var(--spectrum-neutral-content-color-key-focus))); + --spectrum-calendar-day-text-color-selected: var(--mod-calendar-day-text-color-selected, var(--spectrum-neutral-content-color-down)); + --spectrum-calendar-day-text-color-cap-selected: var(--mod-calendar-day-text-color-cap-selected, var(--spectrum-neutral-content-color-down)); + --spectrum-calendar-day-text-color-hover: var(--mod-calendar-day-text-color-hover, var(--spectrum-neutral-content-color-hover)); + --spectrum-calendar-day-text-color-key-focus: var(--mod-calendar-day-text-color-key-focus, var(--spectrum-neutral-content-color-key-focus)); /* Disabled state */ --spectrum-calendar-day-text-color-disabled: var(--mod-calendar-day-text-color-disabled, var(--spectrum-disabled-content-color)); @@ -89,55 +89,6 @@ } } -@media (forced-colors: active) { - .spectrum-Calendar-date { - --highcontrast-calendar-day-title-text-color: CanvasText; - - --highcontrast-calendar-day-text-color-selected: HighlightText; - --highcontrast-calendar-day-text-color-cap-selected: HighlightText; - --highcontrast-calendar-day-text-color-hover: HighlightText; - --highcontrast-calendar-day-text-color-key-focus: ButtonText; - - --highcontrast-calendar-day-background-selected: Highlight; - --highcontrast-calendar-day-background-selected-hover: Highlight; - --highcontrast-calendar-day-background-cap-selected: Highlight; - --highcontrast-calendar-day-background-hover: Highlight; - --highcontrast-calendar-day-background-focus: ButtonFace; - --highcontrast-calendar-day-background-down: ButtonFace; - - --highcontrast-calendar-day-today-border-color: ButtonText; - --highcontrast-calendar-day-border-color-focus: ButtonText; - - --highcontrast-calendar-day-today-text-color: ButtonText; - --highcontrast-calendar-day-today-background-selected-hover: Highlight; - - forced-color-adjust: none; - - &::before { - background: Transparent !important; - } - - &.is-selected { - background: Highlight; - } - - &.is-disabled { - --highcontrast-calendar-day-title-text-color: GrayText; - - --highcontrast-calendar-day-text-color-hover: GrayText; - --highcontrast-calendar-day-text-color-key-focus: GrayText; - - --highcontrast-calendar-day-today-text-color: HighlightText; - --highcontrast-calendar-day-today-border-color: HighlightText; - } - - &.is-range-selection.is-selection-start, - &.is-range-selection.is-selection-end { - --mod-calendar-day-fill-content: none; - } - } -} - .spectrum-Calendar { display: inline-block; inline-size: var(--spectrum-calendar-width); diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json index daf35c48fa3..fa0f3710430 100644 --- a/components/checkbox/dist/metadata.json +++ b/components/checkbox/dist/metadata.json @@ -27,7 +27,6 @@ ".spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized.is-indeterminate:not(.is-invalid) .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized:not(.is-invalid) .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-checkmark", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before", @@ -86,8 +85,7 @@ "--mod-checkbox-margin-block", "--mod-checkbox-selected-border-width", "--mod-checkbox-text-to-control", - "--mod-checkbox-top-to-text", - "--mod-focus-indicator-thickness" + "--mod-checkbox-top-to-text" ], "component": [ "--spectrum-checkbox-animation-duration", @@ -189,18 +187,5 @@ "--spectrum-text-to-control-75" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-checkbox-background-color-default", - "--highcontrast-checkbox-color-default", - "--highcontrast-checkbox-color-focus", - "--highcontrast-checkbox-content-color-default", - "--highcontrast-checkbox-content-color-down", - "--highcontrast-checkbox-content-color-focus", - "--highcontrast-checkbox-content-color-hover", - "--highcontrast-checkbox-disabled-color-default", - "--highcontrast-checkbox-focus-indicator-color", - "--highcontrast-checkbox-highlight-color-default", - "--highcontrast-checkbox-highlight-color-down", - "--highcontrast-checkbox-highlight-color-hover" - ] + "high-contrast": [] } diff --git a/components/checkbox/index.css b/components/checkbox/index.css index 140581616e8..1155feaed7c 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -131,7 +131,7 @@ } .spectrum-Checkbox { - color: var(--highcontrast-checkbox-content-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default))); + color: var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default)); display: inline-flex; align-items: flex-start; position: relative; @@ -141,29 +141,29 @@ &:hover { .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-color-hover, var(--spectrum-checkbox-control-color-hover))); + border-color: var(--mod-checkbox-control-color-hover, var(--spectrum-checkbox-control-color-hover)); } .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-selected-color-hover, var(--spectrum-checkbox-control-selected-color-hover))); + border-color: var(--mod-checkbox-control-selected-color-hover, var(--spectrum-checkbox-control-selected-color-hover)); } .spectrum-Checkbox-label { - color: var(--highcontrast-checkbox-content-color-hover, var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover))); + color: var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover)); } } &:active { .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-checkbox-highlight-color-down, var(--mod-checkbox-control-color-down, var(--spectrum-checkbox-control-color-down))); + border-color: var(--mod-checkbox-control-color-down, var(--spectrum-checkbox-control-color-down)); } .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-checkbox-highlight-color-down, var(--mod-checkbox-control-selected-color-down, var(--spectrum-checkbox-control-selected-color-down))); + border-color: var(--mod-checkbox-control-selected-color-down, var(--spectrum-checkbox-control-selected-color-down)); } .spectrum-Checkbox-label { - color: var(--highcontrast-checkbox-content-color-down, var(--mod-checkbox-content-color-down, var(--spectrum-checkbox-content-color-down))); + color: var(--mod-checkbox-content-color-down, var(--spectrum-checkbox-content-color-down)); } } @@ -176,7 +176,7 @@ .spectrum-Checkbox-checkmark, .spectrum-Checkbox-partialCheckmark { - color: var(--highcontrast-checkbox-background-color-default, var(--spectrum-checkbox-checkmark-color)); + color: var(--spectrum-checkbox-checkmark-color); opacity: 0; transform: scale(0); @@ -239,8 +239,8 @@ /* Selected */ &:checked + .spectrum-Checkbox-box { &::before { - border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); - background-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))); + border-color: var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default)); + background-color: var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color)); border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width)); } @@ -253,17 +253,17 @@ /* Focus */ &:focus-visible + .spectrum-Checkbox-box { &::before { - border-color: var(--highcontrast-checkbox-color-focus, var(--mod-checkbox-control-color-focus, var(--spectrum-checkbox-control-color-focus))); + border-color: var(--mod-checkbox-control-color-focus, var(--spectrum-checkbox-control-color-focus)); } &::after { - box-shadow: 0 0 0 var(--mod-checkbox-focus-indicator-thickness, var(--spectrum-checkbox-focus-indicator-thickness)) var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))); + box-shadow: 0 0 0 var(--mod-checkbox-focus-indicator-thickness, var(--spectrum-checkbox-focus-indicator-thickness)) var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color)); margin: calc(var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)) * -1); } } &:focus-visible + .spectrum-Checkbox-label { - color: var(--highcontrast-checkbox-content-color-focus, var(--mod-checkbox-content-color-focus, var(--spectrum-checkbox-content-color-focus))); + color: var(--mod-checkbox-content-color-focus, var(--spectrum-checkbox-content-color-focus)); } } @@ -283,8 +283,8 @@ flex-shrink: 0; &::before { - border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default))); - background-color: var(--highcontrast-checkbox-background-color-default, var(--spectrum-checkbox-background-color)); + border-color: var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default)); + background-color: var(--spectrum-checkbox-background-color); display: block; z-index: 0; content: ""; @@ -328,7 +328,7 @@ .spectrum-Checkbox-box, .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { &::before { - border-color: var(--highcontrast-checkbox-highlight-color-default); + border-color: var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default)); border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width)); } @@ -350,13 +350,13 @@ .spectrum-Checkbox-box, .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box { &::before { - border-color: var(--highcontrast-checkbox-highlight-color-default, var(--spectrum-checkbox-control-selected-color-default)); + border-color: var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default)); } } .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box { &::before { - border-color: var(--highcontrast-checkbox-color-focus, var(--spectrum-checkbox-control-color-focus)); + border-color: var(--spectrum-checkbox-control-color-focus); } } @@ -364,7 +364,7 @@ .spectrum-Checkbox-box, .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box { &::before { - border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--spectrum-checkbox-control-selected-color-hover)); + border-color: var(--mod-checkbox-control-selected-color-hover, var(--spectrum-checkbox-control-selected-color-hover)); } } } @@ -375,13 +375,13 @@ .spectrum-Checkbox-box, .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { &::before { - border-color: var(--highcontrast-checkbox-highlight-color-default, var(--spectrum-checkbox-control-selected-color-default)); + border-color: var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default)); } } &:not(.is-invalid) .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box { &::before { - border-color: var(--highcontrast-checkbox-color-focus, var(--spectrum-checkbox-emphasized-color-focus)); + border-color: var(--spectrum-checkbox-emphasized-color-focus); } } @@ -389,7 +389,7 @@ .spectrum-Checkbox-box, .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { &::before { - border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--spectrum-checkbox-control-selected-color-hover)); + border-color: var(--spectrum-checkbox-control-selected-color-hover); } } } @@ -398,7 +398,7 @@ .spectrum-Checkbox--emphasized { &:not(.is-invalid) .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box { &::before { - --mod-checkbox-control-color-focus: var(--highcontrast-checkbox-color-focus, var(--spectrum-checkbox-emphasized-color-focus)); + --mod-checkbox-control-color-focus: var(--spectrum-checkbox-emphasized-color-focus); } } } @@ -408,51 +408,18 @@ .spectrum-Checkbox .spectrum-Checkbox-input:checked { &:disabled + .spectrum-Checkbox-box { &::before { - border-color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-control-color-disabled, var(--spectrum-checkbox-control-color-disabled))); - background-color: var(--highcontrast-checkbox-background-color-default, var(--spectrum-checkbox-background-color)); + border-color: var(--mod-checkbox-control-color-disabled, var(--spectrum-checkbox-control-color-disabled)); + background-color: var(--spectrum-checkbox-background-color); } } &:hover:disabled + .spectrum-Checkbox-box { &::before { - border-color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-control-color-disabled, var(--spectrum-checkbox-control-color-disabled))); + border-color: var(--mod-checkbox-control-color-disabled, var(--spectrum-checkbox-control-color-disabled)); } } &:disabled ~ .spectrum-Checkbox-label { - color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-content-color-disabled, var(--spectrum-checkbox-control-color-disabled))); - } -} - -/* Windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Checkbox-input { - &:focus-visible + .spectrum-Checkbox-box { - forced-color-adjust: none; - outline-color: var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))); - outline-offset: var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)); - outline-width: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); - } - } - - .spectrum-Checkbox { - /* Label Text */ - --highcontrast-checkbox-content-color-default: CanvasText; - --highcontrast-checkbox-content-color-hover: CanvasText; - --highcontrast-checkbox-content-color-down: CanvasText; - --highcontrast-checkbox-content-color-focus: CanvasText; - - /* Checkbox box */ - --highcontrast-checkbox-background-color-default: Canvas; - - --highcontrast-checkbox-color-default: ButtonText; - --highcontrast-checkbox-color-focus: Highlight; - - --highcontrast-checkbox-highlight-color-default: Highlight; - --highcontrast-checkbox-highlight-color-hover: Highlight; - --highcontrast-checkbox-highlight-color-down: Highlight; - - --highcontrast-checkbox-disabled-color-default: GrayText; - --highcontrast-checkbox-focus-indicator-color: CanvasText; + color: var(--mod-checkbox-content-color-disabled, var(--spectrum-checkbox-control-color-disabled)); } } diff --git a/components/clearbutton/dist/metadata.json b/components/clearbutton/dist/metadata.json index dd50b142662..dee05bf5d55 100644 --- a/components/clearbutton/dist/metadata.json +++ b/components/clearbutton/dist/metadata.json @@ -67,5 +67,5 @@ "--spectrum-neutral-content-color-key-focus" ], "passthroughs": [], - "high-contrast": ["--highcontrast-clear-button-icon-color-hover"] + "high-contrast": [] } diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css index 8289c77e0de..c52c8d504cd 100644 --- a/components/clearbutton/index.css +++ b/components/clearbutton/index.css @@ -82,7 +82,7 @@ } &:not(:disabled):hover { - color: var(--highcontrast-clear-button-icon-color-hover, var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover))); + color: var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover)); .spectrum-ClearButton-fill { background-color: var(--mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover)); @@ -122,11 +122,3 @@ align-items: center; justify-content: center; } - -@media (forced-colors: active) { - .spectrum-ClearButton { - &:not(:disabled) { - --highcontrast-clear-button-icon-color-hover: Highlight; - } - } -} diff --git a/components/closebutton/dist/metadata.json b/components/closebutton/dist/metadata.json index 28efda498a3..1382c80a127 100644 --- a/components/closebutton/dist/metadata.json +++ b/components/closebutton/dist/metadata.json @@ -31,7 +31,6 @@ ], "modifiers": [ "--mod-closebutton-align-self", - "--mod-closebutton-animation-duraction", "--mod-closebutton-animation-duration", "--mod-closebutton-background-color-default", "--mod-closebutton-background-color-down", @@ -97,12 +96,5 @@ "--spectrum-transparent-white-900" ], "passthroughs": ["--mod-button-font-family", "--mod-button-line-height"], - "high-contrast": [ - "--highcontrast-closebutton-background-color-default", - "--highcontrast-closebutton-focus-indicator-color", - "--highcontrast-closebutton-icon-color-disabled", - "--highcontrast-closebutton-icon-color-down", - "--highcontrast-closebutton-icon-color-focus", - "--highcontrast-closebutton-icon-color-hover" - ] + "high-contrast": [] } diff --git a/components/closebutton/index.css b/components/closebutton/index.css index 5bc33779eb1..cd85705dfc3 100644 --- a/components/closebutton/index.css +++ b/components/closebutton/index.css @@ -86,30 +86,6 @@ --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); } -/* Windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-CloseButton { - --highcontrast-closebutton-icon-color-disabled: GrayText; - --highcontrast-closebutton-icon-color-down: Highlight; - --highcontrast-closebutton-icon-color-hover: Highlight; - --highcontrast-closebutton-icon-color-focus: Highlight; - --highcontrast-closebutton-background-color-default: ButtonFace; - --highcontrast-closebutton-focus-indicator-color: ButtonText; - - &:focus-visible::after { - forced-color-adjust: none; - margin: var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)); - transition: - opacity var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-out, - margin var(--mod-closebutton-animation-duraction, var(--spectrum-closebutton-animation-duration)) ease-out; - } - } - - .spectrum-CloseButton--staticWhite { - --highcontrast-closebutton-icon-color-disabled: Highlight; - } -} - a.spectrum-CloseButton { /* Make link text not selectable */ user-select: none; @@ -205,19 +181,19 @@ a.spectrum-CloseButton { outline: none; &::after { - box-shadow: 0 0 0 var(--mod-closebutton-focus-indicator-thickness, var(--spectrum-closebutton-focus-indicator-thickness)) var(--highcontrast-closebutton-focus-indicator-color, var(--mod-closebutton-focus-indicator-color, var(--spectrum-closebutton-focus-indicator-color))); + box-shadow: 0 0 0 var(--mod-closebutton-focus-indicator-thickness, var(--spectrum-closebutton-focus-indicator-thickness)) var(--mod-closebutton-focus-indicator-color, var(--spectrum-closebutton-focus-indicator-color)); } } /* COLORS */ &:not(:disabled) { - background-color: var(--highcontrast-closebutton-background-color-default, var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default))); + background-color: var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default)); &:hover { background-color: var(--mod-closebutton-background-color-hover, var(--spectrum-closebutton-background-color-hover)); .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-hover, var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover))); + color: var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover)); } } @@ -225,7 +201,7 @@ a.spectrum-CloseButton { background-color: var(--mod-closebutton-background-color-down, var(--spectrum-closebutton-background-color-down)); .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-down, var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down))); + color: var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down)); } } @@ -234,7 +210,7 @@ a.spectrum-CloseButton { background-color: var(--mod-closebutton-background-color-focus, var(--spectrum-closebutton-background-color-focus)); .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))); + color: var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus)); } } @@ -245,7 +221,7 @@ a.spectrum-CloseButton { &:focus, &.is-focused { .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))); + color: var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus)); } } } @@ -255,7 +231,7 @@ a.spectrum-CloseButton { background-color: var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default)); .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled))); + color: var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled)); } } } diff --git a/components/colorarea/dist/metadata.json b/components/colorarea/dist/metadata.json index 2580a3d0eab..4a573ad45fd 100644 --- a/components/colorarea/dist/metadata.json +++ b/components/colorarea/dist/metadata.json @@ -8,14 +8,11 @@ ".spectrum-ColorArea-slider", ".spectrum-ColorArea.is-disabled", ".spectrum-ColorArea.is-disabled .spectrum-ColorArea-gradient", - ".spectrum-ColorArea.is-focused", - ".spectrum-ColorHandle-color" + ".spectrum-ColorArea.is-focused" ], "modifiers": [ - "--mod-colorarea-border-color", "--mod-colorarea-border-radius", "--mod-colorarea-border-width", - "--mod-colorarea-disabled-background-color", "--mod-colorarea-height", "--mod-colorarea-min-height", "--mod-colorarea-min-width", @@ -44,9 +41,5 @@ "--spectrum-gray-1000-rgb" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-colorarea-border-color", - "--highcontrast-colorarea-border-color-disabled", - "--highcontrast-colorarea-fill-color-disabled" - ] + "high-contrast": [] } diff --git a/components/colorarea/index.css b/components/colorarea/index.css index e9f1b1091f5..13aced56dcd 100644 --- a/components/colorarea/index.css +++ b/components/colorarea/index.css @@ -33,7 +33,7 @@ block-size: var(--mod-colorarea-height, var(--spectrum-colorarea-height)); box-sizing: border-box; border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius)); - border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color))); + border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--spectrum-colorarea-border-color); touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */ user-select: none; @@ -44,8 +44,8 @@ &.is-disabled { pointer-events: none; - background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-colorarea-disabled-background-color))); - border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color-disabled); + background: var(--spectrum-colorarea-disabled-background-color); + border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid; .spectrum-ColorArea-gradient { display: none; @@ -81,21 +81,3 @@ margin: 0; pointer-events: none; } - -/* Windows High Contrast Mode */ -@media (forced-colors: active) { - .spectrum-ColorArea { - --highcontrast-colorarea-border-color-disabled: GrayText; - --highcontrast-colorarea-border-color: Canvas; - --highcontrast-colorarea-fill-color-disabled: Canvas; - - &.is-disabled { - forced-color-adjust: none; - } - } - - .spectrum-ColorArea-gradient, - .spectrum-ColorHandle-color { - forced-color-adjust: none; - } -} diff --git a/components/colorhandle/dist/metadata.json b/components/colorhandle/dist/metadata.json index cbd2b5d599f..f7a022490b0 100644 --- a/components/colorhandle/dist/metadata.json +++ b/components/colorhandle/dist/metadata.json @@ -13,9 +13,7 @@ "--mod-colorhandle-animation-duration", "--mod-colorhandle-animation-easing", "--mod-colorhandle-border-color", - "--mod-colorhandle-border-color-disabled", "--mod-colorhandle-border-width", - "--mod-colorhandle-fill-color-disabled", "--mod-colorhandle-focused-size", "--mod-colorhandle-hitarea-border-radius", "--mod-colorhandle-hitarea-size", @@ -47,8 +45,5 @@ "--spectrum-white" ], "passthroughs": ["--mod-opacity-checkerboard-position"], - "high-contrast": [ - "--highcontrast-colorhandle-border-color-disabled", - "--highcontrast-colorhandle-fill-color-disabled" - ] + "high-contrast": [] } diff --git a/components/colorhandle/index.css b/components/colorhandle/index.css index 4a44307da48..d9e7f1a9e28 100644 --- a/components/colorhandle/index.css +++ b/components/colorhandle/index.css @@ -11,17 +11,6 @@ * governing permissions and limitations under the License. */ -@media (forced-colors: active) { - .spectrum-ColorHandle { - forced-color-adjust: none; - - &.is-disabled { - --highcontrast-colorhandle-border-color-disabled: GrayText; - --highcontrast-colorhandle-fill-color-disabled: Canvas; - } - } -} - .spectrum-ColorHandle { /* outer border as box shadow on the colorhandle */ /* TODO replace --spectrum-black-rgb with color-handle-outer-border-color when supported by RGBA */ @@ -82,8 +71,8 @@ &.is-disabled { pointer-events: none; - border-color: var(--highcontrast-colorhandle-border-color-disabled, var(--mod-colorhandle-border-color-disabled, var(--spectrum-disabled-content-color))); - background: var(--highcontrast-colorhandle-fill-color-disabled, var(--mod-colorhandle-fill-color-disabled, var(--spectrum-disabled-background-color))); + border-color: var(--spectrum-disabled-content-color); + background: var(--spectrum-disabled-background-color); box-shadow: none; .spectrum-ColorHandle-inner { diff --git a/components/colorloupe/dist/metadata.json b/components/colorloupe/dist/metadata.json index 8ec7836e2ed..6ff8abef2fc 100644 --- a/components/colorloupe/dist/metadata.json +++ b/components/colorloupe/dist/metadata.json @@ -20,7 +20,6 @@ "--mod-colorloupe-inner-border-color", "--mod-colorloupe-inner-border-width", "--mod-colorloupe-offset", - "--mod-colorloupe-outer-border-color", "--mod-colorloupe-outer-border-width" ], "component": [ @@ -59,5 +58,5 @@ "--spectrum-picked-color" ], "passthroughs": [], - "high-contrast": ["--highcontrast-colorloupe-outer-border-color"] + "high-contrast": [] } diff --git a/components/colorloupe/index.css b/components/colorloupe/index.css index adcd988e569..e694ed6f453 100644 --- a/components/colorloupe/index.css +++ b/components/colorloupe/index.css @@ -71,7 +71,7 @@ .spectrum-ColorLoupe-outer-border { fill: none; - stroke: var(--highcontrast-colorloupe-outer-border-color, var(--mod-colorloupe-outer-border-color, var(--spectrum-colorloupe-outer-border-color))); + stroke: var(--spectrum-colorloupe-outer-border-color); stroke-width: calc(var(--mod-colorloupe-outer-border-width, var(--spectrum-colorloupe-outer-border-width)) + 2px); } @@ -89,9 +89,3 @@ .spectrum-ColorLoupe-checkerboard-fill { fill: var(--spectrum-colorloupe-checkerboard-fill); } - -@media (forced-colors: active) { - .spectrum-ColorLoupe { - --highcontrast-colorloupe-outer-border-color: CanvasText; - } -} diff --git a/components/colorslider/dist/metadata.json b/components/colorslider/dist/metadata.json index aad9494baf6..6e243dbef90 100644 --- a/components/colorslider/dist/metadata.json +++ b/components/colorslider/dist/metadata.json @@ -16,9 +16,6 @@ ".spectrum-ColorSlider.is-focused" ], "modifiers": [ - "--mod-color-slider-background-color-disabled", - "--mod-color-slider-border-color", - "--mod-color-slider-border-color-disabled", "--mod-color-slider-border-rounding", "--mod-color-slider-border-width", "--mod-color-slider-control-track-height", @@ -47,9 +44,5 @@ "--spectrum-gray-1000-rgb" ], "passthroughs": ["--mod-colorhandle-hitarea-border-radius"], - "high-contrast": [ - "--highcontrast-color-slider-background-color-disabled", - "--highcontrast-color-slider-border-color", - "--highcontrast-color-slider-border-color-disabled" - ] + "high-contrast": [] } diff --git a/components/colorslider/index.css b/components/colorslider/index.css index 8c34d8aa396..0664063a188 100644 --- a/components/colorslider/index.css +++ b/components/colorslider/index.css @@ -70,7 +70,7 @@ } .spectrum-ColorSlider-checkerboard { - --spectrum-color-slider-border-color-local: var(--highcontrast-color-slider-border-color, var(--mod-color-slider-border-color, var(--spectrum-color-slider-border-color-default))); + --spectrum-color-slider-border-color-local: var(--spectrum-color-slider-border-color-default); /* Inset border on top of background, created with box-shadow. */ &::before { @@ -83,8 +83,8 @@ } .spectrum-ColorSlider.is-disabled & { - --spectrum-color-slider-border-color-local: var(--highcontrast-color-slider-border-color-disabled, var(--mod-color-slider-border-color-disabled, var(--spectrum-color-slider-fill-color-disabled))); - background: var(--highcontrast-color-slider-background-color-disabled, var(--mod-color-slider-background-color-disabled, var(--spectrum-color-slider-fill-color-disabled))); + --spectrum-color-slider-border-color-local: var(--spectrum-color-slider-fill-color-disabled); + background: var(--spectrum-color-slider-fill-color-disabled); } } @@ -112,12 +112,3 @@ margin: 0; pointer-events: none; } - -@media (forced-colors: active) { - .spectrum-ColorSlider { - --highcontrast-color-slider-border-color: CanvasText; - --highcontrast-color-slider-border-color-disabled: GrayText; - --highcontrast-color-slider-background-color-disabled: Canvas; - forced-color-adjust: none; - } -} diff --git a/components/colorwheel/dist/metadata.json b/components/colorwheel/dist/metadata.json index 1c087a7f50f..63dad4cf0ee 100644 --- a/components/colorwheel/dist/metadata.json +++ b/components/colorwheel/dist/metadata.json @@ -23,7 +23,6 @@ "--mod-colorwheel-block-size", "--mod-colorwheel-border-color", "--mod-colorwheel-colorarea-container-size", - "--mod-colorwheel-fill-color-disabled", "--mod-colorwheel-inline-size", "--mod-colorwheel-min-inline-size", "--mod-colorwheel-path", @@ -52,8 +51,5 @@ "--spectrum-gray-1000-rgb" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-colorwheel-border-color-disabled", - "--highcontrast-colorwheel-fill-color-disabled" - ] + "high-contrast": [] } diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css index d910165d5ac..cd7f99f7c8c 100644 --- a/components/colorwheel/index.css +++ b/components/colorwheel/index.css @@ -85,7 +85,7 @@ &::before, &::after, .spectrum-ColorWheel-inner::before { - border-color: var(--highcontrast-colorwheel-border-color-disabled, transparent); + border-color: transparent; } } @@ -151,16 +151,6 @@ &.is-disabled { pointer-events: none; - background: var(--highcontrast-colorwheel-fill-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled))); - } -} - -/* Windows High Contrast Mode */ -@media (forced-colors: active) { - .spectrum-ColorWheel { - --highcontrast-colorwheel-border-color-disabled: GrayText; - --highcontrast-colorwheel-fill-color-disabled: Canvas; - - forced-color-adjust: none; + background: var(--spectrum-colorwheel-fill-color-disabled); } } diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index ee4f97630eb..b3eedf549fd 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -2,8 +2,6 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Combobox", - ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-fill", - ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-icon", ".spectrum-Combobox .spectrum-Combobox-content", ".spectrum-Combobox .spectrum-Combobox-label", ".spectrum-Combobox .spectrum-Combobox-popover", @@ -311,10 +309,5 @@ "--mod-textfield-text-color-hover", "--mod-textfield-text-color-keyboard-focus" ], - "high-contrast": [ - "--highcontrast-combobox-background-color-default", - "--highcontrast-combobox-border-color-highlight", - "--highcontrast-combobox-border-color-invalid", - "--highcontrast-combobox-readonly-border-color" - ] + "high-contrast": [] } diff --git a/components/combobox/index.css b/components/combobox/index.css index eab2bd4feb8..cd0fbd1d9e1 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -199,8 +199,8 @@ } .spectrum-Combobox-input:read-only { - background-color: var(--highcontrast-combobox-background-color-default, var(--spectrum-combobox-readonly-input-background-color)); - border-color: var(--highcontrast-combobox-readonly-border-color, var(--spectrum-combobox-readonly-input-border-color)); + background-color: var(--spectrum-combobox-readonly-input-background-color); + border-color: var(--spectrum-combobox-readonly-input-border-color); &:hover { background-color: revert; @@ -208,7 +208,7 @@ } &.is-invalid .spectrum-Combobox-input:read-only { - border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default))); + border-color: var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default)); } &.is-disabled .spectrum-Combobox-input:read-only { @@ -256,7 +256,7 @@ &:focus, .spectrum-Combobox.is-focused &, .spectrum-Combobox:has(:focus) & { - --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-highlight, var(--mod-combobox-border-color-focus, var(--spectrum-combobox-border-color-focus))); + --mod-picker-button-border-color: var(--mod-combobox-border-color-focus, var(--spectrum-combobox-border-color-focus)); } &.is-keyboardFocused, @@ -269,46 +269,46 @@ &:active, .spectrum-Combobox:hover &, .spectrum-Combobox:has(:active) & { - --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-highlight, var(--mod-combobox-border-color-hover, var(--spectrum-combobox-border-color-hover))); + --mod-picker-button-border-color: var(--mod-combobox-border-color-hover, var(--spectrum-combobox-border-color-hover)); } &:focus:hover, &.is-focused:hover, .spectrum-Combobox:hover:has(:focus) &, .spectrum-Combobox.is-focused:hover & { - --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-highlight, var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover))); + --mod-picker-button-border-color: var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover)); } } /* Invalid */ &.is-invalid:not(:disabled, .spectrum-PickerButton--quiet) { - --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-default, var(--spectrum-combobox-border-color-invalid-default))); + --mod-picker-button-border-color: var(--mod-combobox-border-color-invalid-default, var(--spectrum-combobox-border-color-invalid-default)); &.is-focused, &:focus, .spectrum-Combobox.is-focused &, .spectrum-Combobox:has(:focus) & { - --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-focus, var(--spectrum-combobox-border-color-invalid-focus))); + --mod-picker-button-border-color: var(--mod-combobox-border-color-invalid-focus, var(--spectrum-combobox-border-color-invalid-focus)); } &.is-keyboardFocused, &:focus-visible, .spectrum-Combobox.is-keyboardFocused & { - --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-key-focus, var(--spectrum-combobox-border-color-invalid-key-focus))); + --mod-picker-button-border-color: var(--mod-combobox-border-color-invalid-key-focus, var(--spectrum-combobox-border-color-invalid-key-focus)); } &:hover, &:active, .spectrum-Combobox:hover &, .spectrum-Combobox:has(:active) & { - --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-hover, var(--spectrum-combobox-border-color-invalid-hover))); + --mod-picker-button-border-color: var(--mod-combobox-border-color-invalid-hover, var(--spectrum-combobox-border-color-invalid-hover)); } &:focus:hover, &.is-focused:hover, .spectrum-Combobox:hover:has(:focus) &, .spectrum-Combobox.is-focused:hover & { - --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-focus-hover, var(--spectrum-combobox-border-color-invalid-focus-hover))); + --mod-picker-button-border-color: var(--mod-combobox-border-color-invalid-focus-hover, var(--spectrum-combobox-border-color-invalid-focus-hover)); } } } @@ -321,7 +321,7 @@ /* TEXT INPUT */ .spectrum-Combobox-input { - background-color: var(--highcontrast-combobox-background-color-default, var(--mod-combobox-textfield-background-color, var(--spectrum-combobox-background-color-default))); + background-color: var(--mod-combobox-textfield-background-color, var(--spectrum-combobox-background-color-default)); padding-inline-start: calc(var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-text, var(--spectrum-combobox-spacing-inline-icon-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); backface-visibility: hidden; @@ -376,7 +376,7 @@ &:-internal-autofill-selected, &.spectrum-Combobox-autocomplete { border-color: var(--spectrum-combobox-border-color-default); - box-shadow: 0 0 0 30px var(--highcontrast-combobox-background-color-default, var(--spectrum-combobox-background-color-default)) inset !important; + box-shadow: 0 0 0 30px var(--spectrum-combobox-background-color-default) inset !important; transition: background-color 200ms ease-in-out 0s; -webkit-text-fill-color: var(--spectrum-neutral-content-color-default) !important; line-height: var(--spectrum-combobox-line-height); @@ -438,23 +438,3 @@ display: none; } } - -@media (forced-colors: active) { - .spectrum-Combobox { - --highcontrast-combobox-border-color-highlight: Highlight; - --highcontrast-combobox-border-color-invalid: Highlight; - --highcontrast-combobox-background-color-default: Canvas; - --highcontrast-combobox-readonly-border-color: CanvasText; - - .spectrum-Combobox-button.spectrum-PickerButton--quiet { - .spectrum-PickerButton-fill { - forced-color-adjust: none; - } - - .spectrum-PickerButton-icon { - /* Should match foreground color of the Textfield. */ - color: CanvasText; - } - } - } -} diff --git a/components/contextualhelp/dist/metadata.json b/components/contextualhelp/dist/metadata.json index a64ded05750..1e5b354e3cc 100644 --- a/components/contextualhelp/dist/metadata.json +++ b/components/contextualhelp/dist/metadata.json @@ -21,7 +21,6 @@ "--mod-contextual-help-min-inline-size", "--mod-contextual-help-padding", "--mod-contextual-help-popover-maximum-width", - "--mod-contextual-help-title-color", "--mod-contextual-help-title-font-style", "--mod-contextual-help-title-font-weight", "--mod-contextual-help-title-line-height", @@ -65,8 +64,5 @@ "--mod-popover-animation-distance", "--mod-popover-corner-radius" ], - "high-contrast": [ - "--highcontrast-contextual-help-body-color", - "--highcontrast-contextual-help-title-color" - ] + "high-contrast": [] } diff --git a/components/contextualhelp/index.css b/components/contextualhelp/index.css index c416b8395c0..6c3c5a8b923 100644 --- a/components/contextualhelp/index.css +++ b/components/contextualhelp/index.css @@ -48,7 +48,7 @@ .spectrum-ContextualHelp-popover { padding: var(--mod-contextual-help-padding, var(--spectrum-contextual-help-padding)); font-size: var(--mod-contextual-help-body-size, var(--spectrum-contextual-help-body-size)); - color: var(--highcontrast-contextual-help-body-color, var(--mod-contextual-help-body-color, var(--spectrum-body-color))); + color: var(--spectrum-body-color); max-inline-size: var(--mod-contextual-help-popover-maximum-width); @@ -63,7 +63,7 @@ font-size: var(--mod-contextual-help-heading-size, var(--spectrum-contextual-help-title-size)); font-style: var(--mod-contextual-help-title-font-style, var(--spectrum-contextual-help-title-font-style)); line-height: var(--mod-contextual-help-title-line-height, var(--spectrum-contextual-help-title-line-height)); - color: var(--highcontrast-contextual-help-title-color, var(--mod-contextual-help-title-color, var(--spectrum-contextual-help-title-color))); + color: var(--spectrum-contextual-help-title-color); margin-block-end: var(--mod-contextual-help-content-spacing, var(--spectrum-contextual-help-content-spacing)); } @@ -80,10 +80,3 @@ .spectrum-ContextualHelp-link { margin-block-start: var(--mod-contextual-help-link-spacing, var(--spectrum-contextual-help-link-spacing)); } - -@media (forced-colors: active) { - .spectrum-ContextualHelp { - --highcontrast-contextual-help-title-color: CanvasText; - --highcontrast-contextual-help-body-color: CanvasText; - } -} diff --git a/components/datepicker/dist/metadata.json b/components/datepicker/dist/metadata.json index cf8fffe86db..5414dee07b5 100644 --- a/components/datepicker/dist/metadata.json +++ b/components/datepicker/dist/metadata.json @@ -33,7 +33,6 @@ ".spectrum-DatePicker.is-disabled", ".spectrum-DatePicker.is-invalid", ".spectrum-DatePicker.is-invalid:not(.spectrum-DatePicker--quiet, .is-disabled)", - ".spectrum-DatePicker.spectrum-DatePicker--quiet.is-invalid", ".spectrum-DatePicker:not(.spectrum-DatePicker--quiet, .is-disabled)" ], "modifiers": [ @@ -50,7 +49,6 @@ "--mod-datepicker-datetime-quiet-input-width-first", "--mod-datepicker-focus-animation", "--mod-datepicker-focus-line-gap", - "--mod-datepicker-focus-ring-color", "--mod-datepicker-focus-ring-gap", "--mod-datepicker-focus-ring-width", "--mod-datepicker-focus-thickness", @@ -62,8 +60,6 @@ "--mod-datepicker-padding-inline", "--mod-datepicker-padding-inline-end-invalid-quiet", "--mod-datepicker-padding-inline-quiet", - "--mod-datepicker-pickerbutton-border-color", - "--mod-datepicker-pickerbutton-border-color-invalid", "--mod-datepicker-quiet-border-color-hover", "--mod-datepicker-quiet-button-offset", "--mod-datepicker-range-dash-margin-left", @@ -149,9 +145,5 @@ "--mod-textfield-icon-spacing-inline-end-invalid", "--mod-textfield-icon-spacing-inline-end-quiet-invalid" ], - "high-contrast": [ - "--highcontrast-datepicker-dash-color", - "--highcontrast-datepicker-focus-ring-color", - "--highcontrast-datepicker-pickerbutton-border-color" - ] + "high-contrast": [] } diff --git a/components/datepicker/index.css b/components/datepicker/index.css index 2890b5f54d1..219c877bce8 100644 --- a/components/datepicker/index.css +++ b/components/datepicker/index.css @@ -20,8 +20,8 @@ --spectrum-datepicker-icon-size: var(--spectrum-workflow-icon-size-100); /* button */ - --spectrum-datepicker-pickerbutton-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color, var(--spectrum-gray-500))); - --spectrum-datepicker-pickerbutton-border-color-invalid: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-negative-border-color-default))); + --spectrum-datepicker-pickerbutton-border-color: var(--spectrum-gray-500); + --spectrum-datepicker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default); --spectrum-datepicker-pickerbutton-width: calc(var(--spectrum-field-edge-to-disclosure-icon-100) * 2 + var(--spectrum-workflow-icon-size-100)); --spectrum-datepicker-quiet-button-offset: var(--mod-datepicker-quiet-button-offset, var(--spectrum-text-to-visual-100)); --spectrum-datepicker-icon-to-text: var(--spectrum-component-edge-to-text-100); @@ -34,7 +34,7 @@ --spectrum-datepicker-focus-thickness: var(--mod-datepicker-focus-thickness, var(--spectrum-focus-indicator-thickness)); --spectrum-datepicker-focus-animation: var(--mod-datepicker-focus-animation, var(--spectrum-animation-duration-100)); --spectrum-datepicker-focus-ring-width: var(--mod-datepicker-focus-ring-width, var(--spectrum-border-width-100)); - --spectrum-datepicker-focus-ring-color: var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-focus-indicator-color))); + --spectrum-datepicker-focus-ring-color: var(--spectrum-focus-indicator-color); --spectrum-datepicker-focus-line-gap: var(--mod-datepicker-focus-line-gap, var(--spectrum-spacing-75)); /* color */ @@ -44,7 +44,7 @@ /* dash */ --spectrum-datepicker-dash-font-size: var(--mod-datepicker-dash-font-size, var(--spectrum-font-size-100)); - --spectrum-datepicker-dash-color: var(--highcontrast-datepicker-dash-color, var(--mod-datepicker-dash-color, var(--spectrum-neutral-content-color-default))); + --spectrum-datepicker-dash-color: var(--spectrum-neutral-content-color-default); --spectrum-datepicker-range-dash-padding-top: var(--mod-datepicker-range-dash-padding-top, 0); /* Calculated as negative half of font-size */ @@ -279,20 +279,3 @@ } } } - -/********* WHCM *********/ -@media (forced-colors: active) { - .spectrum-DatePicker { - --highcontrast-datepicker-dash-color: CanvasText; - --highcontrast-datepicker-focus-ring-color: Highlight; - --highcontrast-datepicker-pickerbutton-border-color: Highlight; - - &.is-disabled { - --highcontrast-datepicker-dash-color: GrayText; - } - - &.spectrum-DatePicker--quiet.is-invalid { - --highcontrast-datepicker-pickerbutton-border-color: Highlight; - } - } -} diff --git a/components/dial/dist/metadata.json b/components/dial/dist/metadata.json index 1d91c2bb539..e81a590169c 100644 --- a/components/dial/dist/metadata.json +++ b/components/dial/dist/metadata.json @@ -37,20 +37,14 @@ ], "modifiers": [ "--mod-dial-background-color-default", - "--mod-dial-border-color", - "--mod-dial-border-color-hover", "--mod-dial-border-radius", "--mod-dial-container-width", "--mod-dial-controls-margin", "--mod-dial-controls-min-height", "--mod-dial-handle-block-margin", - "--mod-dial-handle-border-color-disabled", "--mod-dial-handle-border-size", "--mod-dial-handle-inline-margin", "--mod-dial-handle-marker-border-radius", - "--mod-dial-handle-marker-color", - "--mod-dial-handle-marker-color-hover", - "--mod-dial-handle-marker-color-key-focus", "--mod-dial-handle-marker-color-mouse-focus", "--mod-dial-handle-marker-height", "--mod-dial-handle-marker-width", @@ -61,11 +55,9 @@ "--mod-dial-label-gap-y", "--mod-dial-label-line-height", "--mod-dial-label-text-color", - "--mod-dial-label-text-color-disabled", "--mod-dial-label-text-size", "--mod-dial-min-height", "--mod-dial-min-max-tick-angles", - "--mod-dial-min-max-tick-color", "--mod-dial-width" ], "component": [ @@ -113,14 +105,5 @@ "--spectrum-line-height-200" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-dial-border-color", - "--highcontrast-dial-border-color-hover", - "--highcontrast-dial-handle-border-color-disabled", - "--highcontrast-dial-handle-marker-color", - "--highcontrast-dial-handle-marker-color-hover", - "--highcontrast-dial-handle-marker-color-key-focus", - "--highcontrast-dial-label-text-color-disabled", - "--highcontrast-dial-min-max-tick-color" - ] + "high-contrast": [] } diff --git a/components/dial/index.css b/components/dial/index.css index 1db955a115f..20b1623e43d 100644 --- a/components/dial/index.css +++ b/components/dial/index.css @@ -68,24 +68,24 @@ &.is-disabled { .spectrum-Dial-labelContainer { - color: var(--highcontrast-dial-label-text-color-disabled, var(--mod-dial-label-text-color-disabled, var(--spectrum-dial-label-text-color-disabled))); + color: var(--spectrum-dial-label-text-color-disabled); } .spectrum-Dial-controls { &::after, &::before { - background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled))); + background-color: var(--spectrum-dial-handle-border-color-disabled); } } .spectrum-Dial-handle { cursor: default; - border-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled))); + border-color: var(--spectrum-dial-handle-border-color-disabled); background: var(--mod-dial-background-color-default, var(--spectrum-dial-background-color-default)); &::after, &::before { - background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled))); + background-color: var(--spectrum-dial-handle-border-color-disabled); } } } @@ -139,7 +139,7 @@ &::before, &::after { - background-color: var(--highcontrast-dial-min-max-tick-color, var(--mod-dial-min-max-tick-color, var(--spectrum-dial-min-max-tick-color))); + background-color: var(--spectrum-dial-min-max-tick-color); content: ""; inline-size: calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * 2); block-size: var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)); @@ -162,7 +162,7 @@ .spectrum-Dial-handle { box-shadow: none; - border-color: var(--highcontrast-dial-border-color, var(--mod-dial-border-color, var(--spectrum-dial-border-color))); + border-color: var(--spectrum-dial-border-color); position: absolute; z-index: 2; display: inline-block; @@ -200,7 +200,7 @@ block-size: var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)); border-radius: var(--mod-dial-handle-marker-border-radius, var(--spectrum-dial-handle-marker-border-radius)); transform: translateY(-50%); - background-color: var(--highcontrast-dial-handle-marker-color, var(--mod-dial-handle-marker-color, var(--spectrum-dial-handle-marker-color))); + background-color: var(--spectrum-dial-handle-marker-color); } &:active, @@ -213,10 +213,10 @@ } &:hover { - border-color: var(--highcontrast-dial-border-color-hover, var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover))); + border-color: var(--spectrum-dial-border-color-hover); &::after { - background-color: var(--highcontrast-dial-handle-marker-color-hover, var(--mod-dial-handle-marker-color-hover, var(--spectrum-dial-handle-marker-color-hover))); + background-color: var(--spectrum-dial-handle-marker-color-hover); } } @@ -226,17 +226,17 @@ border-color: var(--mod-dial-handle-marker-color-mouse-focus, var(--spectrum-dial-handle-marker-color-mouse-focus)); &::after { - background-color: var(--highcontrast-dial-handle-marker-color-key-focus, var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus))); + background-color: var(--spectrum-dial-handle-marker-color-key-focus); } } &:active, &.is-dragged { - background-color: var(--highcontrast-dial-border-color-hover, var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover))); - border-color: var(--highcontrast-dial-border-color-hover, var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover))); + background-color: var(--spectrum-dial-border-color-hover); + border-color: var(--spectrum-dial-border-color-hover); &::after { - background-color: var(--highcontrast-dial-handle-marker-color-key-focus, var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus))); + background-color: var(--spectrum-dial-handle-marker-color-key-focus); } } } @@ -282,16 +282,3 @@ } } } - -@media (forced-colors: active) { - .spectrum-Dial { - --highcontrast-dial-min-max-tick-color: Highlight; - --highcontrast-dial-border-color: Highlight; - --highcontrast-dial-handle-marker-color: Highlight; - --highcontrast-dial-border-color-hover: Highlight; - --highcontrast-dial-handle-marker-color-hover: Highlight; - --highcontrast-dial-handle-marker-color-key-focus: HighlightText; - --highcontrast-dial-label-text-color-disabled: GrayText; - --highcontrast-dial-handle-border-color-disabled: GrayText; - } -} diff --git a/components/dialog/dist/metadata.json b/components/dialog/dist/metadata.json index 738156392db..b5bf3d0dde5 100644 --- a/components/dialog/dist/metadata.json +++ b/components/dialog/dist/metadata.json @@ -71,14 +71,12 @@ "component": [], "global": [ "--spectrum-background-layer-2-color", - "--spectrum-black-rgb", "--spectrum-body-color", "--spectrum-body-sans-serif-font-style", "--spectrum-body-sans-serif-font-weight", "--spectrum-corner-radius-extra-large-default", "--spectrum-heading-color", "--spectrum-line-height-200", - "--spectrum-overlay-opacity", "--spectrum-sans-font-family-stack", "--spectrum-spacing-200", "--spectrum-spacing-300", diff --git a/components/dialog/index.css b/components/dialog/index.css index 357dbd6c68f..4785f5e4b1d 100644 --- a/components/dialog/index.css +++ b/components/dialog/index.css @@ -441,9 +441,3 @@ } } } - -@media (forced-colors: active) { - .spectrum-Dialog { - border: 1px solid rgb(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)); - } -} diff --git a/components/divider/dist/metadata.json b/components/divider/dist/metadata.json index 94ce19f83fd..c5aeb0a61bd 100644 --- a/components/divider/dist/metadata.json +++ b/components/divider/dist/metadata.json @@ -12,7 +12,6 @@ ".spectrum-Divider:not(.spectrum-Divider.spectrum-Divider--vertical)" ], "modifiers": [ - "--mod-divider-background-color", "--mod-divider-block-minimum-size", "--mod-divider-inline-minimum-size", "--mod-divider-thickness", @@ -40,5 +39,5 @@ "--spectrum-transparent-white-800" ], "passthroughs": [], - "high-contrast": ["--highcontrast-divider-background-color"] + "high-contrast": [] } diff --git a/components/divider/index.css b/components/divider/index.css index b793b6c86a1..87f4db9e236 100644 --- a/components/divider/index.css +++ b/components/divider/index.css @@ -58,7 +58,7 @@ border-width: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); border-radius: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); - background-color: var(--highcontrast-divider-background-color, var(--mod-divider-background-color, var(--spectrum-divider-background-color))); + background-color: var(--spectrum-divider-background-color); &:not(&.spectrum-Divider--vertical) { min-inline-size: var(--mod-divider-inline-minimum-size, var(--spectrum-divider-inline-minimum-size)); @@ -73,10 +73,3 @@ block-size: var(--mod-divider-vertical-height, 100%); align-self: var(--mod-divider-vertical-align, flex-start); } - -/* windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Divider { - --highcontrast-divider-background-color: CanvasText; - } -} diff --git a/components/dropindicator/dist/metadata.json b/components/dropindicator/dist/metadata.json index 294d6ad70bb..a2e57ec9482 100644 --- a/components/dropindicator/dist/metadata.json +++ b/components/dropindicator/dist/metadata.json @@ -12,9 +12,7 @@ ".spectrum-DropIndicator:before" ], "modifiers": [ - "--mod-dropindicator-border-color", "--mod-dropindicator-border-size", - "--mod-dropindicator-circle-color", "--mod-dropindicator-circle-size" ], "component": [ @@ -24,5 +22,5 @@ ], "global": ["--spectrum-border-width-200"], "passthroughs": [], - "high-contrast": ["--highcontrast-dropindicator-color"] + "high-contrast": [] } diff --git a/components/dropindicator/index.css b/components/dropindicator/index.css index c603c785e02..c9d9bf533a3 100644 --- a/components/dropindicator/index.css +++ b/components/dropindicator/index.css @@ -11,18 +11,12 @@ * governing permissions and limitations under the License. */ -@media (forced-colors: active) { - .spectrum-DropIndicator { - --highcontrast-dropindicator-color: Highlight; - } -} - .spectrum-DropIndicator { --spectrum-dropindicator-border-size: var(--spectrum-border-width-200); --spectrum-dropindicator-circle-size: 12px; position: relative; - background: var(--highcontrast-dropindicator-color, var(--mod-dropindicator-border-color, var(--spectrum-dropindicator-color))); + background: var(--spectrum-dropindicator-color); &::before, &::after { @@ -33,7 +27,7 @@ border-radius: 50%; border: var(--mod-dropindicator-border-size, var(--spectrum-dropindicator-border-size)) solid; box-sizing: border-box; - border-color: var(--highcontrast-dropindicator-color, var(--mod-dropindicator-circle-color, var(--spectrum-dropindicator-color))); + border-color: var(--spectrum-dropindicator-color); } } diff --git a/components/dropzone/dist/metadata.json b/components/dropzone/dist/metadata.json index e91812f2d27..79db6056c65 100644 --- a/components/dropzone/dist/metadata.json +++ b/components/dropzone/dist/metadata.json @@ -26,14 +26,11 @@ "--mod-drop-zone-background-color-opacity-filled", "--mod-drop-zone-body-font-size", "--mod-drop-zone-body-to-action", - "--mod-drop-zone-border-color", - "--mod-drop-zone-border-color-hover", "--mod-drop-zone-border-dash-gap", "--mod-drop-zone-border-dash-length", "--mod-drop-zone-border-style", "--mod-drop-zone-border-style-dragged", "--mod-drop-zone-border-width", - "--mod-drop-zone-content-background-color", "--mod-drop-zone-content-bottom-to-text", "--mod-drop-zone-content-font-family", "--mod-drop-zone-content-font-size", @@ -109,9 +106,5 @@ "--mod-illustrated-message-illustration-color", "--mod-illustrated-message-vertical-maximum-width" ], - "high-contrast": [ - "--highcontrast-drop-zone-border-color", - "--highcontrast-drop-zone-border-color-hover", - "--highcontrast-drop-zone-button-color" - ] + "high-contrast": [] } diff --git a/components/dropzone/index.css b/components/dropzone/index.css index b495fc596e1..3dedce0970f 100644 --- a/components/dropzone/index.css +++ b/components/dropzone/index.css @@ -64,12 +64,12 @@ background-size: cover; background-color: var(--mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color)); position: relative; - border: var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)) dashed var(--highcontrast-drop-zone-border-color, var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color))); + border: var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)) dashed var(--spectrum-drop-zone-border-color); &.is-dragged { --mod-drop-zone-border-style: var(--mod-drop-zone-border-style-dragged, solid); --mod-drop-zone-background-color: rgb(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-dragged-background-color))); - --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); + --spectrum-drop-zone-border-color: var(--spectrum-drop-zone-border-color-hover); /* Updated values for a nested illustrated message when state changes */ --mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color-hover, var(--spectrum-drop-zone-illustration-color-hover)); @@ -107,7 +107,7 @@ } &:focus-visible { - --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); + --spectrum-drop-zone-border-color: var(--spectrum-drop-zone-border-color-hover); outline: 0; } } @@ -126,7 +126,7 @@ } .spectrum-DropZone-strokePath { - stroke: var(--highcontrast-drop-zone-border-color, var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color))); + stroke: var(--spectrum-drop-zone-border-color); stroke-dasharray: var(--mod-drop-zone-border-dash-length, var(--spectrum-drop-zone-stroke-dash-length)) var(--mod-drop-zone-border-dash-gap, var(--spectrum-drop-zone-stroke-dash-gap)); rx: var(--spectrum-drop-zone-corner-radius); ry: var(--spectrum-drop-zone-corner-radius); @@ -155,7 +155,7 @@ padding-block-start: var(--mod-drop-zone-content-top-to-text, var(--spectrum-drop-zone-content-top-to-text)); padding-block-end: var(--mod-drop-zone-content-bottom-to-text, var(--spectrum-drop-zone-content-bottom-to-text)); padding-inline: var(--mod-drop-zone-edge-to-text, var(--spectrum-drop-zone-edge-to-text)); - background-color: var(--highcontrast-drop-zone-button-color, var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color))); + background-color: var(--spectrum-drop-zone-content-background-color); max-block-size: var(--spectrum-drop-zone-component-height); font-family: var(--mod-drop-zone-content-font-family, var(--spectrum-drop-zone-content-font-family)); @@ -169,7 +169,7 @@ &:hover, &:focus { - background-color: var(--highcontrast-drop-zone-button-color, var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color))); + background-color: var(--spectrum-drop-zone-content-background-color); } } @@ -179,20 +179,3 @@ justify-content: center; } } - -/********* WHCM *********/ -@media (forced-colors: active) { - .spectrum-DropZone { - --highcontrast-drop-zone-border-color-hover: Highlight; - --highcontrast-drop-zone-button-color: ButtonText; - --highcontrast-drop-zone-border-color: ButtonText; - - &.is-dragged { - border-color: var(--highcontrast-drop-zone-border-color-hover); - - .spectrum-DropZone-strokePath { - stroke: var(--highcontrast-drop-zone-border-color-hover); - } - } - } -} diff --git a/components/fieldlabel/dist/metadata.json b/components/fieldlabel/dist/metadata.json index 2a55dbd82f4..a3783b4ed62 100644 --- a/components/fieldlabel/dist/metadata.json +++ b/components/fieldlabel/dist/metadata.json @@ -77,5 +77,5 @@ "--spectrum-white" ], "passthroughs": [], - "high-contrast": ["--highcontrast-fieldlabel-disabled-content-color"] + "high-contrast": [] } diff --git a/components/fieldlabel/index.css b/components/fieldlabel/index.css index ba6692619ff..2479ba4dc1c 100644 --- a/components/fieldlabel/index.css +++ b/components/fieldlabel/index.css @@ -35,7 +35,7 @@ /********* Disabled state *********/ &.is-disabled { - --spectrum-fieldlabel-color: var(--highcontrast-fieldlabel-disabled-content-color, var(--spectrum-disabled-content-color)); + --spectrum-fieldlabel-color: var(--spectrum-disabled-content-color); } } @@ -124,10 +124,3 @@ .spectrum-FieldLabel--right { text-align: end; } - -/********* WHCM *********/ -@media (forced-colors: active) { - .spectrum-FieldLabel { - --highcontrast-fieldlabel-disabled-content-color: GrayText; - } -} diff --git a/components/floatingactionbutton/dist/metadata.json b/components/floatingactionbutton/dist/metadata.json index 0ddd22d190a..6d138bd40c9 100644 --- a/components/floatingactionbutton/dist/metadata.json +++ b/components/floatingactionbutton/dist/metadata.json @@ -5,7 +5,6 @@ ".spectrum-FloatingActionButton--secondary", ".spectrum-FloatingActionButton:active", ".spectrum-FloatingActionButton:active .spectrum-FloatingActionButton-icon", - ".spectrum-FloatingActionButton:after", ".spectrum-FloatingActionButton:focus-visible", ".spectrum-FloatingActionButton:focus-visible .spectrum-FloatingActionButton-icon", ".spectrum-FloatingActionButton:focus-visible:after", @@ -15,10 +14,6 @@ ], "modifiers": [ "--mod-afloating-action-button-focus-ring-color", - "--mod-floating-action-button-background-color", - "--mod-floating-action-button-background-color-down", - "--mod-floating-action-button-background-color-hover", - "--mod-floating-action-button-background-color-key-focus", "--mod-floating-action-button-border-radius", "--mod-floating-action-button-drop-shadow-blur", "--mod-floating-action-button-drop-shadow-color", @@ -26,10 +21,6 @@ "--mod-floating-action-button-drop-shadow-y", "--mod-floating-action-button-focus-ring-gap", "--mod-floating-action-button-focus-ring-width", - "--mod-floating-action-button-icon-color", - "--mod-floating-action-button-icon-color-down", - "--mod-floating-action-button-icon-color-hover", - "--mod-floating-action-button-icon-color-key-focus", "--mod-floating-action-button-icon-size", "--mod-floating-action-button-margin", "--mod-floating-action-button-padding", @@ -73,14 +64,5 @@ "--spectrum-workflow-icon-size-200" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-floating-action-button-background-color", - "--highcontrast-floating-action-button-background-color-down", - "--highcontrast-floating-action-button-background-color-hover", - "--highcontrast-floating-action-button-background-color-key-focus", - "--highcontrast-floating-action-button-icon-color", - "--highcontrast-floating-action-button-icon-color-down", - "--highcontrast-floating-action-button-icon-color-hover", - "--highcontrast-floating-action-button-icon-color-key-focus" - ] + "high-contrast": [] } diff --git a/components/floatingactionbutton/index.css b/components/floatingactionbutton/index.css index bc695d6c109..542b9a6e00e 100644 --- a/components/floatingactionbutton/index.css +++ b/components/floatingactionbutton/index.css @@ -11,25 +11,6 @@ * governing permissions and limitations under the License. */ -@media (forced-colors: active) { - .spectrum-FloatingActionButton { - --highcontrast-floating-action-button-background-color: ButtonText; - --highcontrast-floating-action-button-background-color-hover: Highlight; - --highcontrast-floating-action-button-background-color-down: Highlight; - --highcontrast-floating-action-button-background-color-key-focus: Highlight; - - --highcontrast-floating-action-button-icon-color: ButtonFace; - --highcontrast-floating-action-button-icon-color-hover: ButtonFace; - --highcontrast-floating-action-button-icon-color-down: ButtonFace; - --highcontrast-floating-action-button-icon-color-key-focus: ButtonFace; - - &::after { - /* make sure focus-ring renders */ - forced-color-adjust: none; - } - } -} - .spectrum-FloatingActionButton { --spectrum-floating-action-button-size: var(--spectrum-component-height-200); --spectrum-floating-action-button-icon-size: var(--spectrum-workflow-icon-size-200); @@ -73,30 +54,30 @@ position: relative; /* default is primary */ - background-color: var(--highcontrast-floating-action-button-background-color, var(--mod-floating-action-button-background-color, var(--spectrum-floating-action-button-background-color))); + background-color: var(--spectrum-floating-action-button-background-color); &:hover { - background-color: var(--highcontrast-floating-action-button-background-color-hover, var(--mod-floating-action-button-background-color-hover, var(--spectrum-floating-action-button-background-color-hover))); + background-color: var(--spectrum-floating-action-button-background-color-hover); .spectrum-FloatingActionButton-icon { - color: var(--highcontrast-floating-action-button-icon-color-hover, var(--mod-floating-action-button-icon-color-hover, var(--spectrum-floating-action-button-icon-color-hover))); + color: var(--spectrum-floating-action-button-icon-color-hover); } } &:active { - background-color: var(--highcontrast-floating-action-button-background-color-down, var(--mod-floating-action-button-background-color-down, var(--spectrum-floating-action-button-background-color-down))); + background-color: var(--spectrum-floating-action-button-background-color-down); .spectrum-FloatingActionButton-icon { - color: var(--highcontrast-floating-action-button-icon-color-down, var(--mod-floating-action-button-icon-color-down, var(--spectrum-floating-action-button-icon-color-down))); + color: var(--spectrum-floating-action-button-icon-color-down); } } &:focus-visible { - background-color: var(--highcontrast-floating-action-button-background-color-key-focus, var(--mod-floating-action-button-background-color-key-focus, var(--spectrum-floating-action-button-background-color-key-focus))); + background-color: var(--spectrum-floating-action-button-background-color-key-focus); outline: 0; .spectrum-FloatingActionButton-icon { - color: var(--highcontrast-floating-action-button-icon-color-key-focus, var(--mod-floating-action-button-icon-color-key-focus, var(--spectrum-floating-action-button-icon-color-key-focus))); + color: var(--spectrum-floating-action-button-icon-color-key-focus); } &::after { @@ -114,5 +95,5 @@ .spectrum-Icon.spectrum-FloatingActionButton-icon { block-size: var(--mod-floating-action-button-icon-size, var(--spectrum-floating-action-button-icon-size)); inline-size: var(--mod-floating-action-button-icon-size, var(--spectrum-floating-action-button-icon-size)); - color: var(--highcontrast-floating-action-button-icon-color, var(--mod-floating-action-button-icon-color, var(--spectrum-floating-action-button-icon-color))); + color: var(--spectrum-floating-action-button-icon-color); } diff --git a/components/form/dist/metadata.json b/components/form/dist/metadata.json index c07dfdca8d9..4801478031e 100644 --- a/components/form/dist/metadata.json +++ b/components/form/dist/metadata.json @@ -12,7 +12,6 @@ ".spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon" ], "modifiers": [ - "--mod-disabled-content-color", "--mod-form-grid-template-columns", "--mod-form-grid-template-columns-labels-above", "--mod-form-inline-size", @@ -32,5 +31,5 @@ "--spectrum-spacing-300" ], "passthroughs": [], - "high-contrast": ["--highcontrast-form-item-disabled-content-color"] + "high-contrast": [] } diff --git a/components/form/index.css b/components/form/index.css index 905208b8256..5cb3a093876 100644 --- a/components/form/index.css +++ b/components/form/index.css @@ -64,17 +64,10 @@ /********* Disabled state *********/ .spectrum-Form-itemLabel { &.is-disabled { - color: var(--highcontrast-form-item-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-form-item-disabled-content-color))); + color: var(--spectrum-form-item-disabled-content-color); .spectrum-FieldLabel-requiredIcon { - color: var(--highcontrast-form-item-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-form-item-disabled-content-color))); + color: var(--spectrum-form-item-disabled-content-color); } } } - -/********* WHCM *********/ -@media (forced-colors: active) { - .spectrum-Form { - --highcontrast-form-item-disabled-content-color: GrayText; - } -} diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index 4ed0075bb8c..bfc7b5c81fc 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -23,12 +23,10 @@ "modifiers": [ "--mod-helptext-bottom-edge-to-workflow-icon", "--mod-helptext-bottom-to-text", - "--mod-helptext-content-color-default", "--mod-helptext-font-family", "--mod-helptext-font-size", "--mod-helptext-font-style", "--mod-helptext-font-weight", - "--mod-helptext-icon-color-default", "--mod-helptext-icon-size", "--mod-helptext-line-height", "--mod-helptext-line-height-cjk", @@ -91,10 +89,5 @@ "--spectrum-workflow-icon-size-75" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-helptext-content-color-default", - "--highcontrast-helptext-content-color-disabled", - "--highcontrast-helptext-icon-color-default", - "--highcontrast-helptext-icon-color-disabled" - ] + "high-contrast": [] } diff --git a/components/helptext/index.css b/components/helptext/index.css index 3ef91377442..5a121f795b7 100644 --- a/components/helptext/index.css +++ b/components/helptext/index.css @@ -81,7 +81,7 @@ } .spectrum-HelpText { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + color: var(--spectrum-helptext-content-color-default); display: flex; font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size)); min-block-size: var(--mod-helptext-min-height, var(--spectrum-helptext-min-height)); @@ -107,40 +107,31 @@ /* Variants -- Neutral, negative, disabled */ &.spectrum-HelpText--neutral { .spectrum-HelpText-text { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + color: var(--spectrum-helptext-content-color-default); } .spectrum-HelpText-validationIcon { - color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); + color: var(--spectrum-helptext-icon-color-default); } } &.spectrum-HelpText--negative { .spectrum-HelpText-text { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + color: var(--spectrum-helptext-content-color-default); } .spectrum-HelpText-validationIcon { - color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); + color: var(--spectrum-helptext-icon-color-default); } } &.is-disabled { .spectrum-HelpText-text { - color: var(--highcontrast-helptext-content-color-disabled, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + color: var(--spectrum-helptext-content-color-default); } .spectrum-HelpText-validationIcon { - color: var(--highcontrast-helptext-icon-color-disabled, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); + color: var(--spectrum-helptext-icon-color-default); } } } - -@media (forced-colors: active) { - .spectrum-HelpText { - --highcontrast-helptext-content-color-default: CanvasText; - --highcontrast-helptext-icon-color-default: CanvasText; - --highcontrast-helptext-icon-color-disabled: GrayText; - --highcontrast-helptext-content-color-disabled: GrayText; - } -} diff --git a/components/icon/dist/metadata.json b/components/icon/dist/metadata.json index 7fcad33c95b..54eaf1cf46b 100644 --- a/components/icon/dist/metadata.json +++ b/components/icon/dist/metadata.json @@ -10,7 +10,6 @@ ".spectrum-Icon--sizeXS", ".spectrum-Icon--sizeXXL", ".spectrum-Icon--sizeXXS", - ".spectrum-UIIcon", ".spectrum-UIIcon-Add100", ".spectrum-UIIcon-Add200", ".spectrum-UIIcon-Add300", diff --git a/components/icon/icons.css b/components/icon/icons.css index ff0a39b001d..9c7a77a1195 100644 --- a/components/icon/icons.css +++ b/components/icon/icons.css @@ -11,8 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum-Icon, -.spectrum-UIIcon { +.spectrum-Icon { /* stylelint-disable-next-line custom-property-pattern -- variable name defined by A4U output */ --iconPrimary: var(--mod-icon-color, currentColor); @@ -35,8 +34,7 @@ } @media (forced-colors: active) { - .spectrum-Icon, - .spectrum-UIIcon { + .spectrum-Icon { /* Automatically adjust the SVG to pick up the text color for High Contrast mode */ forced-color-adjust: auto; } diff --git a/components/illustratedmessage/dist/metadata.json b/components/illustratedmessage/dist/metadata.json index 12705f6822e..4f66b6ae78f 100644 --- a/components/illustratedmessage/dist/metadata.json +++ b/components/illustratedmessage/dist/metadata.json @@ -37,7 +37,6 @@ "--mod-illustrated-message-horizontal-maximum-width", "--mod-illustrated-message-illustrated-inline-size", "--mod-illustrated-message-illustration-block-size", - "--mod-illustrated-message-illustration-color", "--mod-illustrated-message-illustration-size", "--mod-illustrated-message-illustration-to-heading", "--mod-illustrated-message-pointer-events", @@ -97,5 +96,5 @@ "--spectrum-title-sans-serif-font-weight" ], "passthroughs": ["--mod-buttongroup-justify-content"], - "high-contrast": ["--highcontrast-illustrated-message-illustration-color"] + "high-contrast": [] } diff --git a/components/illustratedmessage/index.css b/components/illustratedmessage/index.css index 39894c695a1..c7338415b7c 100644 --- a/components/illustratedmessage/index.css +++ b/components/illustratedmessage/index.css @@ -85,7 +85,7 @@ governing permissions and limitations under the License. .spectrum-IllustratedMessage-illustration { margin-block-end: var(--mod-illustrated-message-illustration-to-heading, var(--spectrum-illustrated-message-illustration-to-heading)); - color: var(--highcontrast-illustrated-message-illustration-color, var(--mod-illustrated-message-illustration-color, var(--spectrum-illustrated-message-illustration-color))); + color: var(--spectrum-illustrated-message-illustration-color); fill: currentColor; stroke: currentColor; block-size: var(--mod-illustrated-message-illustration-block-size, var(--mod-illustrated-message-illustration-size, var(--spectrum-illustrated-message-illustration-size))); @@ -142,9 +142,3 @@ governing permissions and limitations under the License. .spectrum-IllustratedMessage-content { grid-area: body; } - -@media (forced-colors: active) { - .spectrum-IllustratedMessage { - --highcontrast-illustrated-message-illustration-color: CanvasText; - } -} diff --git a/components/infieldbutton/dist/metadata.json b/components/infieldbutton/dist/metadata.json index 98a823a73c7..5f6c84cff18 100644 --- a/components/infieldbutton/dist/metadata.json +++ b/components/infieldbutton/dist/metadata.json @@ -2,11 +2,6 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-InfieldButton", - ".spectrum-InfieldButton--quiet", - ".spectrum-InfieldButton--quiet:disabled", - ".spectrum-InfieldButton--quiet:not(:disabled):active", - ".spectrum-InfieldButton--quiet:not(:disabled):focus-visible", - ".spectrum-InfieldButton--quiet:not(:disabled):hover", ".spectrum-InfieldButton-fill", ".spectrum-InfieldButton-icon", ".spectrum-InfieldButton-inline", @@ -20,10 +15,7 @@ ".spectrum-InfieldButton:active", ".spectrum-InfieldButton:disabled", ".spectrum-InfieldButton:focus-visible", - ".spectrum-InfieldButton:hover", - ".spectrum-InfieldButton:not(:disabled):active", - ".spectrum-InfieldButton:not(:disabled):focus-visible", - ".spectrum-InfieldButton:not(:disabled):hover" + ".spectrum-InfieldButton:hover" ], "modifiers": [ "--mod-infield-button-background-color", @@ -109,8 +101,5 @@ "--spectrum-neutral-content-color-hover" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-infield-button-background-color", - "--highcontrast-infield-button-icon-color" - ] + "high-contrast": [] } diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css index a1e54ecb1de..9d40af95cd5 100644 --- a/components/infieldbutton/index.css +++ b/components/infieldbutton/index.css @@ -144,7 +144,7 @@ block-size: 100%; inline-size: 100%; - background-color: var(--highcontrast-infield-button-background-color, var(--mod-infield-button-background-color, var(--spectrum-infield-button-background-color))); + background-color: var(--spectrum-infield-button-background-color); border-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)); padding: var(--mod-infield-button-fill-padding, var(--spectrum-infield-button-fill-padding)); @@ -166,41 +166,6 @@ /* remove margin used for centering */ margin: 0 !important; - color: var(--highcontrast-infield-button-icon-color, var(--mod-infield-button-icon-color, var(--spectrum-infield-button-icon-color))); + color: var(--spectrum-infield-button-icon-color); padding: var(--mod-infield-button-field-edge-to-icon, var(--spectrum-infield-button-field-edge-to-disclosure-icon)); } - -@media (forced-colors: active) { - .spectrum-InfieldButton { - --highcontrast-infield-button-background-color: ButtonText; - --highcontrast-infield-button-icon-color: ButtonFace; - forced-color-adjust: none; /* keeps button from flashing when hovered */ - - &:disabled { - --highcontrast-infield-button-background-color: GrayText; - } - - &:not(:disabled):hover, - &:not(:disabled):active, - &:not(:disabled):focus-visible { - --highcontrast-infield-button-background-color: Highlight; - } - } - - .spectrum-InfieldButton--quiet { - --highcontrast-infield-button-background-color: Canvas; - --highcontrast-infield-button-icon-color: ButtonText; - - &:disabled { - --highcontrast-infield-button-background-color: Canvas; - --highcontrast-infield-button-icon-color: GrayText; - } - - &:not(:disabled):hover, - &:not(:disabled):active, - &:not(:disabled):focus-visible { - --highcontrast-infield-button-background-color: Canvas; - --highcontrast-infield-button-icon-color: Highlight; - } - } -} diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json index 81ebe4df638..6c62fc9819e 100644 --- a/components/inlinealert/dist/metadata.json +++ b/components/inlinealert/dist/metadata.json @@ -27,17 +27,12 @@ ".spectrum-InLineAlert.spectrum-InLineAlert--subtle" ], "modifiers": [ - "--mod-inlinealert-background-color", - "--mod-inlinealert-border-and-icon-color", "--mod-inlinealert-border-radius", - "--mod-inlinealert-border-width", - "--mod-inlinealert-content-color", "--mod-inlinealert-content-font-family", "--mod-inlinealert-content-font-size", "--mod-inlinealert-content-font-style", "--mod-inlinealert-content-font-weight", "--mod-inlinealert-content-line-height", - "--mod-inlinealert-header-color", "--mod-inlinealert-header-min-block-size", "--mod-inlinealert-heading-font-family", "--mod-inlinealert-heading-font-size", @@ -116,11 +111,5 @@ "--spectrum-workflow-icon-size-100" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-inlinealert-background-color", - "--highcontrast-inlinealert-border-and-icon-color", - "--highcontrast-inlinealert-border-width", - "--highcontrast-inlinealert-content-color", - "--highcontrast-inlinealert-header-color" - ] + "high-contrast": [] } diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css index 62cf0bf3b97..c75eb97e3b8 100644 --- a/components/inlinealert/index.css +++ b/components/inlinealert/index.css @@ -135,19 +135,19 @@ padding-block: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text)); padding-inline: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text)); - border-width: var(--highcontrast-inlinealert-border-width, var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width))); + border-width: var(--spectrum-inlinealert-border-width); border-style: solid; border-radius: var(--mod-inlinealert-border-radius, var(--spectrum-inlinealert-border-radius)); - background-color: var(--highcontrast-inlinealert-background-color, var(--mod-inlinealert-background-color, var(--spectrum-inlinealert-background-color))); - border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color))); + background-color: var(--spectrum-inlinealert-background-color); + border-color: var(--spectrum-inlinealert-border-and-icon-color); } .spectrum-InLineAlert-icon { inline-size: var(--mod-inlinealert-icon-size, var(--spectrum-inlinealert-icon-size)); block-size: var(--mod-inlinealert-icon-size, var(--spectrum-inlinealert-icon-size)); flex-shrink: 0; - color: var(--highcontrast-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color)); + color: var(--spectrum-inlinealert-border-and-icon-color); } .spectrum-InLineAlert-header { @@ -166,7 +166,7 @@ min-block-size: var(--mod-inlinealert-header-min-block-size, var(--spectrum-inlinealert-header-min-block-size)); - color: var(--highcontrast-inlinealert-header-color, var(--mod-inlinealert-header-color, var(--spectrum-inlinealert-header-color))); + color: var(--spectrum-inlinealert-header-color); } .spectrum-InLineAlert-content { @@ -187,7 +187,7 @@ font-size: var(--mod-inlinealert-content-font-size, var(--spectrum-inlinealert-content-font-size)); line-height: var(--mod-inlinealert-content-line-height, var(--spectrum-inlinealert-content-line-height)); - color: var(--highcontrast-inlinealert-content-color, var(--mod-inlinealert-content-color, var(--spectrum-inlinealert-content-color))); + color: var(--spectrum-inlinealert-content-color); } .spectrum-InLineAlert-footer { @@ -199,18 +199,3 @@ display: none; } } - -@media (forced-colors: active) { - .spectrum-InLineAlert { - --highcontrast-inlinealert-header-color: CanvasText; - --highcontrast-inlinealert-content-color: CanvasText; - --highcontrast-inlinealert-border-and-icon-color: CanvasText; - - --highcontrast-inlinealert-background-color: Canvas; - - &.spectrum-InLineAlert--subtle, - &.spectrum-InLineAlert--bold { - --highcontrast-inlinealert-border-width: var(--spectrum-border-width-200); - } - } -} diff --git a/components/link/dist/metadata.json b/components/link/dist/metadata.json index 9c83915a752..885a58f6405 100644 --- a/components/link/dist/metadata.json +++ b/components/link/dist/metadata.json @@ -74,8 +74,5 @@ "--spectrum-white" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-link-focus-indicator-color", - "--highcontrast-link-text-color" - ] + "high-contrast": [] } diff --git a/components/link/index.css b/components/link/index.css index 9c49d650727..dda92284d59 100644 --- a/components/link/index.css +++ b/components/link/index.css @@ -43,7 +43,7 @@ outline: none; cursor: pointer; - color: var(--highcontrast-link-text-color, var(--mod-link-text-color, var(--spectrum-accent-content-color-default))); + color: var(--spectrum-accent-content-color-default); font-family: var(--spectrum-link-default-font-family); font-weight: var(--spectrum-link-font-weight); font-size: var(--spectrum-link-font-size); @@ -63,7 +63,7 @@ &:focus-visible { --mod-link-text-color: var(--mod-link-text-color-focus, var(--spectrum-accent-content-color-key-focus)); - outline: var(--spectrum-link-focus-indicator-thickness) solid var(--highcontrast-link-focus-indicator-color, var(--spectrum-link-focus-indicator-color)); + outline: var(--spectrum-link-focus-indicator-thickness) solid var(--spectrum-link-focus-indicator-color); outline-offset: var(--spectrum-link-focus-indicator-gap); border-radius: var(--spectrum-link-corner-radius); } @@ -111,11 +111,3 @@ --spectrum-link-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); } - -/* Windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Link { - --highcontrast-link-text-color: LinkText; - --highcontrast-link-focus-indicator-color: LinkText; - } -} diff --git a/components/logicbutton/dist/metadata.json b/components/logicbutton/dist/metadata.json index b61731b416a..2a7c6ad1e5a 100644 --- a/components/logicbutton/dist/metadata.json +++ b/components/logicbutton/dist/metadata.json @@ -28,7 +28,6 @@ "--mod-logic-button-and-text-color-disabled", "--mod-logic-button-border-radius", "--mod-logic-button-border-width", - "--mod-logic-button-focus-indicator-color", "--mod-logic-button-focus-indicator-gap", "--mod-logic-button-focus-indicator-width", "--mod-logic-button-font-size", @@ -89,17 +88,5 @@ "--mod-button-focus-indicator-gap", "--mod-button-font-family" ], - "high-contrast": [ - "--highcontrast-logic-button-and-background-color", - "--highcontrast-logic-button-and-background-color-hover", - "--highcontrast-logic-button-and-border-color", - "--highcontrast-logic-button-and-border-color-hover", - "--highcontrast-logic-button-and-text-color", - "--highcontrast-logic-button-focus-indicator-color", - "--highcontrast-logic-button-or-background-color", - "--highcontrast-logic-button-or-background-color-hover", - "--highcontrast-logic-button-or-border-color", - "--highcontrast-logic-button-or-border-color-hover", - "--highcontrast-logic-button-or-text-color" - ] + "high-contrast": [] } diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css index e54943f5bd6..3ea714d4e7e 100644 --- a/components/logicbutton/index.css +++ b/components/logicbutton/index.css @@ -129,7 +129,7 @@ outline: none; &::after { - box-shadow: 0 0 0 var(--mod-logic-button-focus-indicator-width, var(--spectrum-focus-indicator-thickness)) var(--highcontrast-logic-button-focus-indicator-color, var(--mod-logic-button-focus-indicator-color, var(--spectrum-focus-indicator-color))); + box-shadow: 0 0 0 var(--mod-logic-button-focus-indicator-width, var(--spectrum-focus-indicator-thickness)) var(--spectrum-focus-indicator-color); } } @@ -150,56 +150,23 @@ } .spectrum-LogicButton--and { - background-color: var(--highcontrast-logic-button-and-background-color, var(--mod-logic-button-and-background-color, var(--spectrum-logic-button-and-background-color))); - border-color: var(--highcontrast-logic-button-and-border-color, var(--mod-logic-button-and-border-color, var(--spectrum-logic-button-and-border-color))); - color: var(--highcontrast-logic-button-and-text-color, var(--mod-logic-button-and-text-color, var(--spectrum-logic-button-and-text-color))); + background-color: var(--spectrum-logic-button-and-background-color); + border-color: var(--spectrum-logic-button-and-border-color); + color: var(--spectrum-logic-button-and-text-color); &:hover:not([disabled]) { - background-color: var(--highcontrast-logic-button-and-background-color-hover, var(--mod-logic-button-and-background-color-hover, var(--spectrum-logic-button-and-background-color-hover))); - border-color: var(--highcontrast-logic-button-and-border-color-hover, var(--mod-logic-button-and-border-color-hover, var(--spectrum-logic-button-and-border-color-hover))); + background-color: var(--spectrum-logic-button-and-background-color-hover); + border-color: var(--spectrum-logic-button-and-border-color-hover); } } .spectrum-LogicButton--or { - background-color: var(--highcontrast-logic-button-or-background-color, var(--mod-logic-button-or-background-color, var(--spectrum-logic-button-or-background-color))); - border-color: var(--highcontrast-logic-button-or-border-color, var(--mod-logic-button-or-border-color, var(--spectrum-logic-button-or-border-color))); - color: var(--highcontrast-logic-button-or-text-color, var(--mod-logic-button-or-text-color, var(--spectrum-logic-button-or-text-color))); + background-color: var(--spectrum-logic-button-or-background-color); + border-color: var(--spectrum-logic-button-or-border-color); + color: var(--spectrum-logic-button-or-text-color); &:hover:not([disabled]) { - background-color: var(--highcontrast-logic-button-or-background-color-hover, var(--mod-logic-button-or-background-color-hover, var(--spectrum-logic-button-or-background-color-hover))); - border-color: var(--highcontrast-logic-button-or-border-color-hover, var(--mod-logic-button-or-border-color-hover, var(--spectrum-logic-button-or-border-color-hover))); - } -} - -@media (forced-colors: active) { - .spectrum-LogicButton::after { - --highcontrast-logic-button-focus-indicator-color: Highlight; - - forced-color-adjust: none; - } - - .spectrum-LogicButton { - --highcontrast-logic-button-and-background-color: ButtonFace; - --highcontrast-logic-button-and-background-color-hover: ButtonFace; - --highcontrast-logic-button-and-border-color: ButtonText; - --highcontrast-logic-button-and-border-color-hover: Highlight; - --highcontrast-logic-button-and-text-color: ButtonText; - --highcontrast-logic-button-or-background-color: ButtonFace; - --highcontrast-logic-button-or-background-color-hover: ButtonFace; - --highcontrast-logic-button-or-border-color: ButtonText; - --highcontrast-logic-button-or-border-color-hover: Highlight; - --highcontrast-logic-button-or-text-color: ButtonText; - - forced-color-adjust: none; - - &:disabled, - &.is-disabled { - --highcontrast-logic-button-and-background-color: ButtonFace; - --highcontrast-logic-button-and-border-color: GrayText; - --highcontrast-logic-button-and-text-color: GrayText; - --highcontrast-logic-button-or-background-color: ButtonFace; - --highcontrast-logic-button-or-border-color: GrayText; - --highcontrast-logic-button-or-text-color: GrayText; - } + background-color: var(--spectrum-logic-button-or-background-color-hover); + border-color: var(--spectrum-logic-button-or-border-color-hover); } } diff --git a/components/menu/dist/metadata.json b/components/menu/dist/metadata.json index 3693f34c5dc..d20757d035a 100644 --- a/components/menu/dist/metadata.json +++ b/components/menu/dist/metadata.json @@ -8,16 +8,6 @@ ".spectrum-Menu .spectrum-Menu-chevron:dir(rtl)", ".spectrum-Menu .spectrum-Menu-divider", ".spectrum-Menu .spectrum-Menu-divider.spectrum-Divider--sizeS", - ".spectrum-Menu .spectrum-Menu-item", - ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open.is-focused", - ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:active", - ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus", - ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:hover", - ".spectrum-Menu .spectrum-Menu-item--drillIn.is-open", - ".spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemCheckbox", - ".spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch", - ".spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemCheckbox", - ".spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch", ".spectrum-Menu .spectrum-Menu-itemIcon", ".spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon", ".spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark, .spectrum-Menu-linkout)", @@ -150,8 +140,6 @@ ".spectrum-Menu:lang(zh)" ], "modifiers": [ - "--mod-menu-back-heading-color", - "--mod-menu-back-icon-color-default", "--mod-menu-back-icon-margin-block", "--mod-menu-back-icon-margin-inline", "--mod-menu-back-padding-block-end", @@ -159,48 +147,19 @@ "--mod-menu-back-padding-inline-end", "--mod-menu-back-padding-inline-start", "--mod-menu-checkmark-display", - "--mod-menu-checkmark-icon-color-default", - "--mod-menu-checkmark-icon-color-down", - "--mod-menu-checkmark-icon-color-focus", - "--mod-menu-checkmark-icon-color-hover", - "--mod-menu-collapsible-icon-color", - "--mod-menu-drillin-icon-color-default", - "--mod-menu-drillin-icon-color-down", - "--mod-menu-drillin-icon-color-focus", - "--mod-menu-drillin-icon-color-hover", "--mod-menu-inline-size", - "--mod-menu-item-background-color-default", - "--mod-menu-item-background-color-down", - "--mod-menu-item-background-color-hover", - "--mod-menu-item-background-color-key-focus", "--mod-menu-item-bottom-edge-to-text", "--mod-menu-item-checkmark-height", "--mod-menu-item-checkmark-width", "--mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start", "--mod-menu-item-corner-radius", - "--mod-menu-item-description-color-default", - "--mod-menu-item-description-color-disabled", - "--mod-menu-item-description-color-down", - "--mod-menu-item-description-color-focus", - "--mod-menu-item-description-color-hover", "--mod-menu-item-description-font-size", "--mod-menu-item-description-line-height", "--mod-menu-item-description-line-height-cjk", - "--mod-menu-item-focus-indicator-color", "--mod-menu-item-focus-indicator-width", "--mod-menu-item-icon-height", "--mod-menu-item-icon-width", - "--mod-menu-item-label-content-color-default", - "--mod-menu-item-label-content-color-disabled", - "--mod-menu-item-label-content-color-down", - "--mod-menu-item-label-content-color-focus", - "--mod-menu-item-label-content-color-hover", "--mod-menu-item-label-font-size", - "--mod-menu-item-label-icon-color-default", - "--mod-menu-item-label-icon-color-disabled", - "--mod-menu-item-label-icon-color-down", - "--mod-menu-item-label-icon-color-focus", - "--mod-menu-item-label-icon-color-hover", "--mod-menu-item-label-inline-edge-to-content", "--mod-menu-item-label-line-height", "--mod-menu-item-label-line-height-cjk", @@ -222,10 +181,6 @@ "--mod-menu-item-top-to-checkmark", "--mod-menu-item-top-to-thumbnail", "--mod-menu-item-top-to-workflow-icon", - "--mod-menu-item-value-color-default", - "--mod-menu-item-value-color-down", - "--mod-menu-item-value-color-focus", - "--mod-menu-item-value-color-hover", "--mod-menu-section-description-color", "--mod-menu-section-description-font-size", "--mod-menu-section-description-font-weight", @@ -233,7 +188,6 @@ "--mod-menu-section-description-line-height-cjk", "--mod-menu-section-divider-margin-block", "--mod-menu-section-header-bottom-edge-to-text", - "--mod-menu-section-header-color", "--mod-menu-section-header-font-size", "--mod-menu-section-header-font-weight", "--mod-menu-section-header-line-height", @@ -451,22 +405,5 @@ "--mod-switch-control-label-spacing", "--mod-switch-spacing-top-to-label" ], - "high-contrast": [ - "--highcontrast-checkbox-highlight-color-default", - "--highcontrast-checkbox-highlight-color-hover", - "--highcontrast-menu-checkmark-icon-color-default", - "--highcontrast-menu-item-background-color-default", - "--highcontrast-menu-item-background-color-focus", - "--highcontrast-menu-item-color-default", - "--highcontrast-menu-item-color-disabled", - "--highcontrast-menu-item-color-focus", - "--highcontrast-menu-item-focus-indicator-color", - "--highcontrast-menu-item-selected-background-color", - "--highcontrast-menu-item-selected-color", - "--highcontrast-switch-background-color-selected-default", - "--highcontrast-switch-background-color-selected-hover", - "--highcontrast-switch-handle-border-color-hover", - "--highcontrast-switch-handle-border-color-selected-default", - "--highcontrast-switch-handle-border-color-selected-hover" - ] + "high-contrast": [] } diff --git a/components/menu/index.css b/components/menu/index.css index b5dd79577a7..f8ec841b38d 100644 --- a/components/menu/index.css +++ b/components/menu/index.css @@ -13,7 +13,7 @@ .spectrum-Menu { /* Simplified - spec'd for 0% opacity */ - --spectrum-menu-item-background-color-default: var(--highcontrast-menu-item-background-color-default, transparent); + --spectrum-menu-item-background-color-default: transparent; --spectrum-menu-item-label-line-height: var(--spectrum-line-height-100); --spectrum-menu-item-label-line-height-cjk: var(--spectrum-cjk-line-height-100); @@ -123,7 +123,7 @@ --spectrum-menu-item-focus-indicator-color: var(--spectrum-focus-indicator-color); --spectrum-menu-item-focus-indicator-offset: var(--spectrum-focus-indicator-gap); --spectrum-menu-item-focus-indicator-outline-style: solid; - --spectrum-menu-item-focus-indicator-color-default: var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))); + --spectrum-menu-item-focus-indicator-color-default: var(--spectrum-menu-item-focus-indicator-color); --spectrum-menu-item-focus-margin: calc(var(--spectrum-menu-item-focus-indicator-offset) + var(--spectrum-menu-item-focus-indicator-width)); &.spectrum-Menu--sizeS { @@ -328,8 +328,8 @@ /* Icons */ .spectrum-Menu-itemIcon { - fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-icon-color-default, var(--spectrum-menu-item-label-icon-color-default))); - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-icon-color-default, var(--spectrum-menu-item-label-icon-color-default))); + fill: var(--spectrum-menu-item-label-icon-color-default); + color: var(--spectrum-menu-item-label-icon-color-default); grid-area: iconArea; } @@ -339,8 +339,8 @@ block-size: var(--mod-menu-item-checkmark-height, var(--spectrum-menu-item-checkmark-height)); inline-size: var(--mod-menu-item-checkmark-width, var(--spectrum-menu-item-checkmark-width)); - fill: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-default, var(--spectrum-menu-checkmark-icon-color-default))); - color: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-default, var(--spectrum-menu-checkmark-icon-color-default))); + fill: var(--spectrum-menu-checkmark-icon-color-default); + color: var(--spectrum-menu-checkmark-icon-color-default); opacity: 1; margin-block-start: calc(var(--mod-menu-item-top-to-checkmark, var(--spectrum-menu-item-top-to-checkmark)) - var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))); @@ -368,8 +368,8 @@ .spectrum-Menu-backIcon { margin-block: var(--mod-menu-back-icon-margin-block, var(--spectrum-menu-back-icon-margin)); margin-inline: var(--mod-menu-back-icon-margin-inline, var(--spectrum-menu-back-icon-margin)); - fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default, var(--spectrum-menu-section-header-color))); - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default, var(--spectrum-menu-section-header-color))); + fill: var(--spectrum-menu-section-header-color); + color: var(--spectrum-menu-section-header-color); } .spectrum-Menu-itemIcon--workflowIcon { @@ -407,7 +407,7 @@ box-sizing: border-box; - background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default))); + background-color: var(--spectrum-menu-item-background-color-default); line-height: var(--mod-menu-item-label-line-height, var(--spectrum-menu-item-label-line-height)); @@ -497,79 +497,79 @@ &:focus-visible, &.is-focus-visible { - background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-key-focus, var(--spectrum-menu-item-background-color-keyboard-focus))); + background-color: var(--spectrum-menu-item-background-color-keyboard-focus); > .spectrum-Menu-itemLabel { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-focus, var(--spectrum-menu-item-label-content-color-focus))); + color: var(--spectrum-menu-item-label-content-color-focus); } > .spectrum-Menu-sectionHeading { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color))); + color: var(--spectrum-menu-section-header-color); } > .spectrum-Menu-itemDescription { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-focus, var(--spectrum-menu-item-description-color-focus))); + color: var(--spectrum-menu-item-description-color-focus); } > .spectrum-Menu-itemValue { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-focus, var(--spectrum-menu-item-value-color-focus))); + color: var(--spectrum-menu-item-value-color-focus); } > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark), .spectrum-Menu-linkout { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus))); + fill: var(--spectrum-menu-item-label-icon-color-focus); + color: var(--spectrum-menu-item-label-icon-color-focus); } > .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); + fill: var(--spectrum-menu-collapsible-icon-color); + color: var(--spectrum-menu-collapsible-icon-color); } > .spectrum-Menu-checkmark { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus))); + fill: var(--spectrum-menu-checkmark-icon-color-focus); + color: var(--spectrum-menu-checkmark-icon-color-focus); } } &:hover { - background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))); + background-color: var(--spectrum-menu-item-background-color-hover); > .spectrum-Menu-itemLabel { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-hover, var(--spectrum-menu-item-label-content-color-hover))); + color: var(--spectrum-menu-item-label-content-color-hover); } > .spectrum-Menu-sectionHeading { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color))); + color: var(--spectrum-menu-section-header-color); } > .spectrum-Menu-itemDescription { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-hover, var(--spectrum-menu-item-description-color-hover))); + color: var(--spectrum-menu-item-description-color-hover); } > .spectrum-Menu-itemValue { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-hover, var(--spectrum-menu-item-value-color-hover))); + color: var(--spectrum-menu-item-value-color-hover); } > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark), .spectrum-Menu-linkout { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); + fill: var(--spectrum-menu-item-label-icon-color-hover); + color: var(--spectrum-menu-item-label-icon-color-hover); } > .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); + fill: var(--spectrum-menu-collapsible-icon-color); + color: var(--spectrum-menu-collapsible-icon-color); } > .spectrum-Menu-checkmark { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))); + fill: var(--spectrum-menu-checkmark-icon-color-hover); + color: var(--spectrum-menu-checkmark-icon-color-hover); } } &:active { - background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-down, var(--spectrum-menu-item-background-color-down))); + background-color: var(--spectrum-menu-item-background-color-down); /* The perceived motion can be a bit jarring given the size/complexity of a menu item */ @media (prefers-reduced-motion: no-preference) { @@ -577,35 +577,35 @@ } > .spectrum-Menu-itemLabel { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-down, var(--spectrum-menu-item-label-content-color-down))); + color: var(--spectrum-menu-item-label-content-color-down); } > .spectrum-Menu-sectionHeading { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color))); + color: var(--spectrum-menu-section-header-color); } > .spectrum-Menu-itemDescription { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-down, var(--spectrum-menu-item-description-color-down))); + color: var(--spectrum-menu-item-description-color-down); } > .spectrum-Menu-itemValue { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-down, var(--spectrum-menu-item-value-color-down))); + color: var(--spectrum-menu-item-value-color-down); } > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark), .spectrum-Menu-linkout { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down))); + fill: var(--spectrum-menu-item-label-icon-color-down); + color: var(--spectrum-menu-item-label-icon-color-down); } > .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); + fill: var(--spectrum-menu-collapsible-icon-color); + color: var(--spectrum-menu-collapsible-icon-color); } > .spectrum-Menu-checkmark { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down))); + fill: var(--spectrum-menu-checkmark-icon-color-down); + color: var(--spectrum-menu-checkmark-icon-color-down); } } @@ -615,16 +615,16 @@ .spectrum-Menu-itemLabel, .spectrum-Menu-sectionHeading, .spectrum-Menu-itemValue { - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled))); + color: var(--spectrum-menu-item-label-content-color-disabled); } .spectrum-Menu-itemDescription { - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled))); + color: var(--spectrum-menu-item-description-color-disabled); } .spectrum-Menu-itemIcon { - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); - fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); + color: var(--spectrum-menu-item-label-icon-color-disabled); + fill: var(--spectrum-menu-item-label-icon-color-disabled); } .spectrum-Menu-itemThumbnail { @@ -638,16 +638,16 @@ .spectrum-Menu-itemLabel, .spectrum-Menu-sectionHeading, .spectrum-Menu-itemValue { - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled))); + color: var(--spectrum-menu-item-label-content-color-disabled); } .spectrum-Menu-itemDescription { - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled))); + color: var(--spectrum-menu-item-description-color-disabled); } .spectrum-Menu-itemIcon { - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); - fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); + color: var(--spectrum-menu-item-label-icon-color-disabled); + fill: var(--spectrum-menu-item-label-icon-color-disabled); } } } @@ -671,7 +671,7 @@ grid-area: labelArea; font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size)); - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-content-color-default, var(--spectrum-menu-item-label-content-color-default))); + color: var(--spectrum-menu-item-label-content-color-default); hyphens: auto; overflow-wrap: break-word; @@ -679,7 +679,7 @@ .spectrum-Menu-itemValue { grid-area: valueArea; - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-value-color-default, var(--spectrum-menu-item-value-color-default))); + color: var(--spectrum-menu-item-value-color-default); font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size)); justify-self: end; margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing)); @@ -694,7 +694,7 @@ .spectrum-Menu-sectionHeading { grid-area: sectionHeadingArea; grid-column: 1 / -1; - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color))); + color: var(--spectrum-menu-section-header-color); display: block; font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size)); font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight)); @@ -719,7 +719,7 @@ .spectrum-Menu-itemDescription { grid-area: descriptionArea; - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-description-color-default, var(--spectrum-menu-item-description-color-default))); + color: var(--spectrum-menu-item-description-color-default); font-size: var(--mod-menu-item-description-font-size, var(--spectrum-menu-item-description-font-size)); hyphens: auto; overflow-wrap: break-word; @@ -821,45 +821,45 @@ .spectrum-Menu-item--drillIn { .spectrum-Menu-chevron { grid-area: chevronAreaDrillIn; - fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-drillin-icon-color-default, var(--spectrum-menu-drillin-icon-color-default))); - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-drillin-icon-color-default, var(--spectrum-menu-drillin-icon-color-default))); + fill: var(--spectrum-menu-drillin-icon-color-default); + color: var(--spectrum-menu-drillin-icon-color-default); margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing)); margin-inline-end: 0; } &.is-open { - --spectrum-menu-item-background-color-default: var(--highcontrast-menu-item-selected-background-color, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))); + --spectrum-menu-item-background-color-default: var(--spectrum-menu-item-background-color-hover); .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); + fill: var(--spectrum-menu-item-label-icon-color-hover); + color: var(--spectrum-menu-item-label-icon-color-hover); } .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover))); + fill: var(--spectrum-menu-drillin-icon-color-hover); + color: var(--spectrum-menu-drillin-icon-color-hover); } .spectrum-Menu-checkmark { - fill: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))); - color: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))); + fill: var(--spectrum-menu-checkmark-icon-color-hover); + color: var(--spectrum-menu-checkmark-icon-color-hover); } } &:hover .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover))); + fill: var(--spectrum-menu-drillin-icon-color-hover); + color: var(--spectrum-menu-drillin-icon-color-hover); } &:focus .spectrum-Menu-chevron, &.is-focused .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus))); + fill: var(--spectrum-menu-drillin-icon-color-focus); + color: var(--spectrum-menu-drillin-icon-color-focus); } &:active .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down))); + fill: var(--spectrum-menu-drillin-icon-color-down); + color: var(--spectrum-menu-drillin-icon-color-down); } } @@ -892,70 +892,8 @@ .spectrum-Menu-backHeading { display: block; - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color))); + color: var(--spectrum-menu-section-header-color); font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size)); font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight)); line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height)); } - -@media (forced-colors: active) { - .spectrum-Menu { - --highcontrast-menu-item-background-color-default: ButtonFace; - --highcontrast-menu-item-color-default: ButtonText; - - --highcontrast-menu-item-background-color-focus: Highlight; - --highcontrast-menu-item-color-focus: HighlightText; - - --highcontrast-menu-checkmark-icon-color-default: Highlight; - - --highcontrast-menu-item-color-disabled: GrayText; - --highcontrast-menu-item-focus-indicator-color: Highlight; - - --highcontrast-menu-item-selected-background-color: Highlight; - --highcontrast-menu-item-selected-color: HighlightText; - - @supports (color: SelectedItem) { - --highcontrast-menu-item-selected-background-color: SelectedItem; - --highcontrast-menu-item-selected-color: SelectedItemText; - } - - .spectrum-Menu-item { - /* Hide unstylable readability backplates. */ - forced-color-adjust: none; - } - - .spectrum-Menu-item:hover, - .spectrum-Menu-item:focus { - .spectrum-Menu-itemCheckbox { - /* @passthrough start */ - --highcontrast-checkbox-highlight-color-hover: ButtonText; - --highcontrast-checkbox-highlight-color-default: ButtonText; - /* @passthrough end */ - } - - .spectrum-Menu-itemSwitch { - /* @passthrough start */ - --highcontrast-switch-handle-border-color-hover: ButtonText; - --highcontrast-switch-handle-border-color-selected-default: ButtonText; - --highcontrast-switch-handle-border-color-selected-hover: ButtonText; - --highcontrast-switch-background-color-selected-default: ButtonText; - --highcontrast-switch-background-color-selected-hover: ButtonText; - /* @passthrough end */ - } - } - - .spectrum-Menu-item--drillIn.is-open { - --highcontrast-menu-item-background-color-default: var(--highcontrast-menu-item-selected-background-color); - --highcontrast-menu-item-color-default: var(--highcontrast-menu-item-selected-color); - } - - .spectrum-Menu-item--collapsible.is-open { - &:hover, - &:active, - &:focus, - &.is-focused { - --highcontrast-menu-item-color-focus: var(--highcontrast-menu-item-color-default); - } - } - } -} diff --git a/components/opacitycheckerboard/index.css b/components/opacitycheckerboard/index.css index 8f1700294f0..993ae017f61 100644 --- a/components/opacitycheckerboard/index.css +++ b/components/opacitycheckerboard/index.css @@ -26,10 +26,3 @@ .spectrum-OpacityCheckerboard { background: repeating-conic-gradient(var(--spectrum-opacity-checkerboard-light) 0% 25%, var(--spectrum-opacity-checkerboard-dark) 0% 50%) var(--spectrum-opacity-checkerboard-position) / calc(var(--spectrum-opacity-checkerboard-size) * 2) calc(var(--spectrum-opacity-checkerboard-size) * 2); } - -@media (forced-colors: active) { - .spectrum-OpacityCheckerboard { - /* Allow checkerboard pattern to be visible. */ - forced-color-adjust: none; - } -} diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index 09740dc9174..4340e491c0d 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -3,7 +3,6 @@ "selectors": [ ".spectrum-Picker", ".spectrum-Picker .spectrum-Picker-icon", - ".spectrum-Picker .spectrum-Picker-label", ".spectrum-Picker .spectrum-ProgressCircle", ".spectrum-Picker--sideLabel", ".spectrum-Picker--sizeL", @@ -54,58 +53,21 @@ ".spectrum-Picker-menuIcon", ".spectrum-Picker-menuIcon:active", ".spectrum-Picker-validationIcon", - ".spectrum-Picker.is-keyboardFocused", ".spectrum-Picker.is-loading", ".spectrum-Picker.is-loading .spectrum-Picker-menuIcon", - ".spectrum-Picker:after", - ".spectrum-Picker:focus-visible", ".spectrum-Picker:lang(ja) .spectrum-Picker-label", ".spectrum-Picker:lang(ko) .spectrum-Picker-label", ".spectrum-Picker:lang(zh) .spectrum-Picker-label" ], "modifiers": [ "--mod-picker-animation-duration", - "--mod-picker-background-color-active", - "--mod-picker-background-color-default", - "--mod-picker-background-color-default-open", - "--mod-picker-background-color-hover", - "--mod-picker-background-color-hover-open", - "--mod-picker-background-color-key-focus", "--mod-picker-block-size", - "--mod-picker-border-active", - "--mod-picker-border-color-default", - "--mod-picker-border-color-error-active", - "--mod-picker-border-color-error-default", - "--mod-picker-border-color-error-default-open", - "--mod-picker-border-color-error-hover", - "--mod-picker-border-color-error-hover-open", - "--mod-picker-border-color-error-key-focus", - "--mod-picker-border-color-hover", - "--mod-picker-border-color-hover-open", - "--mod-picker-border-color-key-focus", - "--mod-picker-border-default-open", "--mod-picker-border-radius", "--mod-picker-border-width", - "--mod-picker-focus-indicator-color", "--mod-picker-focus-indicator-gap", "--mod-picker-focus-indicator-thickness", - "--mod-picker-font-color-active", - "--mod-picker-font-color-default", - "--mod-picker-font-color-default-open", - "--mod-picker-font-color-disabled", - "--mod-picker-font-color-hover", - "--mod-picker-font-color-hover-open", - "--mod-picker-font-color-key-focus", "--mod-picker-font-size", "--mod-picker-font-weight", - "--mod-picker-icon-color-active", - "--mod-picker-icon-color-default", - "--mod-picker-icon-color-default-open", - "--mod-picker-icon-color-disabled", - "--mod-picker-icon-color-error", - "--mod-picker-icon-color-hover", - "--mod-picker-icon-color-hover-open", - "--mod-picker-icon-color-key-focus", "--mod-picker-inline-size", "--mod-picker-line-height", "--mod-picker-line-height-cjk", @@ -280,13 +242,5 @@ "--mod-button-line-height", "--mod-popover-animation-distance" ], - "high-contrast": [ - "--highcontrast-picker-background-color", - "--highcontrast-picker-border-color-default", - "--highcontrast-picker-border-color-disabled", - "--highcontrast-picker-border-color-hover", - "--highcontrast-picker-content-color-default", - "--highcontrast-picker-content-color-disabled", - "--highcontrast-picker-focus-indicator-color" - ] + "high-contrast": [] } diff --git a/components/picker/index.css b/components/picker/index.css index dddf46479fb..83f2024e77b 100644 --- a/components/picker/index.css +++ b/components/picker/index.css @@ -219,9 +219,9 @@ box-shadow var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)), border-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out; - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default, var(--spectrum-picker-background-color-default))); - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-default, var(--spectrum-picker-border-color-default))); + color: var(--spectrum-picker-font-color-default); + background-color: var(--spectrum-picker-background-color-default); + border-color: var(--spectrum-picker-border-color-default); /* Fix Firefox */ &::-moz-focus-inner { @@ -244,18 +244,18 @@ } &:hover { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover))); - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-hover, var(--spectrum-picker-background-color-hover))); - border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-hover, var(--spectrum-picker-border-color-hover))); + color: var(--spectrum-picker-font-color-hover); + background-color: var(--spectrum-picker-background-color-hover); + border-color: var(--spectrum-picker-border-color-hover); .spectrum-Picker-menuIcon { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-hover, var(--spectrum-picker-icon-color-hover))); + color: var(--spectrum-picker-icon-color-hover); } } &:active { - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-active, var(--spectrum-picker-background-color-active))); - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-active, var(--spectrum-picker-border-color-active))); + background-color: var(--spectrum-picker-background-color-active); + border-color: var(--spectrum-picker-border-color-active); transform: perspective(max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down))) translateZ(var(--spectrum-component-size-difference-down)); /* Focus indicator */ @@ -264,20 +264,20 @@ } .spectrum-Picker-label.is-placeholder { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-active, var(--spectrum-picker-font-color-active))); + color: var(--spectrum-picker-font-color-active); } } &:focus-visible, &.is-keyboardFocused { outline: none; - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-key-focus, var(--spectrum-picker-background-color-key-focus))); - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-key-focus, var(--spectrum-picker-border-color-key-focus))); - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-key-focus, var(--spectrum-picker-font-color-key-focus))); + background-color: var(--spectrum-picker-background-color-key-focus); + border-color: var(--spectrum-picker-border-color-key-focus); + color: var(--spectrum-picker-font-color-key-focus); /* Focus indicator */ &::after { - border-color: var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color))); + border-color: var(--spectrum-picker-focus-indicator-color); } /* Focus indicator */ @@ -302,60 +302,60 @@ } .spectrum-Picker-label.is-placeholder { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-key-focus, var(--spectrum-picker-font-color-key-focus))); + color: var(--spectrum-picker-font-color-key-focus); } .spectrum-Picker-menuIcon { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-key-focus, var(--spectrum-picker-icon-color-key-focus))); + color: var(--spectrum-picker-icon-color-key-focus); } } &.is-open:not(:disabled, .is-disabled, .is-loading) { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default-open, var(--spectrum-picker-font-color-default-open))); - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default-open, var(--spectrum-picker-background-color-default-open))); - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-default-open, var(--spectrum-picker-border-color-default-open))); + color: var(--spectrum-picker-font-color-default-open); + background-color: var(--spectrum-picker-background-color-default-open); + border-color: var(--spectrum-picker-border-color-default-open); &:hover { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover-open, var(--spectrum-picker-font-color-hover-open))); - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-hover-open, var(--spectrum-picker-background-color-hover-open))); - border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-hover-open, var(--spectrum-picker-border-color-hover-open))); + color: var(--spectrum-picker-font-color-hover-open); + background-color: var(--spectrum-picker-background-color-hover-open); + border-color: var(--spectrum-picker-border-color-hover-open); .spectrum-Picker-menuIcon { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-hover-open, var(--spectrum-picker-icon-color-hover-open))); + color: var(--spectrum-picker-icon-color-hover-open); } } .spectrum-Picker-menuIcon { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-default-open, var(--spectrum-picker-icon-color-default-open))); + color: var(--spectrum-picker-icon-color-default-open); } } &.is-invalid:not(:disabled, .is-disabled) { - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-default, var(--spectrum-picker-border-color-error-default))); + border-color: var(--spectrum-picker-border-color-error-default); .spectrum-Picker-validationIcon { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-error, var(--spectrum-picker-icon-color-error))); + color: var(--spectrum-picker-icon-color-error); } &:hover { - border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-error-hover, var(--spectrum-picker-border-color-error-hover))); + border-color: var(--spectrum-picker-border-color-error-hover); } &:active { - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-active, var(--spectrum-picker-border-color-error-active))); + border-color: var(--spectrum-picker-border-color-error-active); } &.is-open { - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-default-open, var(--spectrum-picker-border-color-error-default-open))); + border-color: var(--spectrum-picker-border-color-error-default-open); } &.is-open:hover { - border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-error-hover-open, var(--spectrum-picker-border-color-error-hover-open))); + border-color: var(--spectrum-picker-border-color-error-hover-open); } &:focus-visible, &.is-keyboardFocused { - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-key-focus, var(--spectrum-picker-border-color-error-key-focus))); + border-color: var(--spectrum-picker-border-color-error-key-focus); } } } @@ -387,14 +387,14 @@ font-weight: var(--mod-picker-placeholder-font-weight, var(--spectrum-picker-font-weight)); font-style: var(--mod-picker-placeholder-font-style, var(--spectrum-picker-placeholder-font-style)); transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out; - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); + color: var(--spectrum-picker-font-color-default); &:hover { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover))); + color: var(--spectrum-picker-font-color-hover); } &:active { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-active, var(--spectrum-picker-font-color-active))); + color: var(--spectrum-picker-font-color-active); } } @@ -414,10 +414,10 @@ flex-shrink: 0; margin-block: var(--mod-picker-spacing-top-to-disclosure-icon, var(--spectrum-picker-spacing-top-to-disclosure-icon)); transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-out; - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-default, var(--spectrum-picker-icon-color-default))); + color: var(--spectrum-picker-icon-color-default); &:active { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-active, var(--spectrum-picker-icon-color-active))); + color: var(--spectrum-picker-icon-color-active); } } @@ -447,17 +447,17 @@ .spectrum-Picker-button.is-disabled { cursor: default; transform: none; - border-color: var(--highcontrast-picker-border-color-disabled, transparent); - color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); + border-color: transparent; + color: var(--spectrum-picker-font-color-disabled); .spectrum-Picker-icon, .spectrum-Picker-menuIcon, .spectrum-Picker-validationIcon { - color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))); + color: var(--spectrum-picker-icon-color-disabled); } .spectrum-Picker-label.is-placeholder { - color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); + color: var(--spectrum-picker-font-color-disabled); } } @@ -465,37 +465,6 @@ transform: none; .spectrum-Picker-menuIcon { - color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))); - } -} - -/* Forced colors / high contrast mode */ -@media (forced-colors: active) { - .spectrum-Picker { - --highcontrast-picker-focus-indicator-color: Highlight; - - --highcontrast-picker-border-color-default: ButtonBorder; - --highcontrast-picker-border-color-hover: Highlight; - --highcontrast-picker-border-color-disabled: GrayText; - - --highcontrast-picker-content-color-default: ButtonText; - --highcontrast-picker-content-color-disabled: GrayText; - --highcontrast-picker-background-color: ButtonFace; - - &:focus-visible, - &.is-keyboardFocused { - --highcontrast-picker-border-color-hover: ButtonText; - } - - /* Focus indicator */ - &::after { - /* Make sure default transparent border stays transparent. */ - forced-color-adjust: none; - } - - .spectrum-Picker-label { - /* Remove additional text backplate added in WHCM (Edge). */ - forced-color-adjust: none; - } + color: var(--spectrum-picker-icon-color-disabled); } } diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json index 4b3d33be65e..6acfc936489 100644 --- a/components/pickerbutton/dist/metadata.json +++ b/components/pickerbutton/dist/metadata.json @@ -2,11 +2,6 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-PickerButton", - ".spectrum-PickerButton--quiet", - ".spectrum-PickerButton--quiet:disabled", - ".spectrum-PickerButton--quiet:not(:disabled):active", - ".spectrum-PickerButton--quiet:not(:disabled):focus-visible", - ".spectrum-PickerButton--quiet:not(:disabled):hover", ".spectrum-PickerButton--workflowicon .spectrum-PickerButton-fill", ".spectrum-PickerButton-fill", ".spectrum-PickerButton-icon", @@ -19,10 +14,7 @@ ".spectrum-PickerButton:active", ".spectrum-PickerButton:disabled", ".spectrum-PickerButton:focus-visible", - ".spectrum-PickerButton:hover", - ".spectrum-PickerButton:not(:disabled):active", - ".spectrum-PickerButton:not(:disabled):focus-visible", - ".spectrum-PickerButton:not(:disabled):hover" + ".spectrum-PickerButton:hover" ], "modifiers": [ "--mod-picker-button-background-animation-duration", @@ -94,8 +86,5 @@ "--spectrum-neutral-content-color-hover" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-picker-button-background-color", - "--highcontrast-picker-button-icon-color" - ] + "high-contrast": [] } diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css index fe472764fa2..2e406a0101e 100644 --- a/components/pickerbutton/index.css +++ b/components/pickerbutton/index.css @@ -118,7 +118,7 @@ block-size: 100%; inline-size: 100%; - background-color: var(--highcontrast-picker-button-background-color, var(--mod-picker-button-background-color, var(--spectrum-picker-button-background-color))); + background-color: var(--spectrum-picker-button-background-color); border-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius)); padding: calc(var(--mod-picker-button-fill-padding, var(--spectrum-picker-button-fill-padding)) - var(--mod-picker-button-padding, var(--spectrum-picker-button-padding))); @@ -140,40 +140,5 @@ .spectrum-PickerButton-icon { /* don't be small, ever */ flex-shrink: 0; - color: var(--highcontrast-picker-button-icon-color, var(--mod-picker-button-icon-color, var(--spectrum-picker-button-icon-color))); -} - -@media (forced-colors: active) { - .spectrum-PickerButton { - --highcontrast-picker-button-background-color: ButtonText; - --highcontrast-picker-button-icon-color: ButtonFace; - forced-color-adjust: none; /* keeps button from flashing when hovered */ - - &:disabled { - --highcontrast-picker-button-background-color: GrayText; - } - - &:not(:disabled):hover, - &:not(:disabled):active, - &:not(:disabled):focus-visible { - --highcontrast-picker-button-background-color: Highlight; - } - } - - .spectrum-PickerButton--quiet { - --highcontrast-picker-button-background-color: Canvas; - --highcontrast-picker-button-icon-color: ButtonText; - - &:disabled { - --highcontrast-picker-button-background-color: Canvas; - --highcontrast-picker-button-icon-color: GrayText; - } - - &:not(:disabled):hover, - &:not(:disabled):active, - &:not(:disabled):focus-visible { - --highcontrast-picker-button-background-color: Canvas; - --highcontrast-picker-button-icon-color: Highlight; - } - } + color: var(--spectrum-picker-button-icon-color); } diff --git a/components/popover/dist/metadata.json b/components/popover/dist/metadata.json index f78a1db58ae..0dd2e068462 100644 --- a/components/popover/dist/metadata.json +++ b/components/popover/dist/metadata.json @@ -90,7 +90,6 @@ "--mod-overlay-animation-duration-opened", "--mod-popover-animation-distance", "--mod-popover-background-color", - "--mod-popover-border-color", "--mod-popover-border-width", "--mod-popover-box-shadow", "--mod-popover-content-area-spacing", @@ -142,5 +141,5 @@ "--spectrum-spacing-100" ], "passthroughs": [], - "high-contrast": ["--highcontrast-popover-border-color"] + "high-contrast": [] } diff --git a/components/popover/index.css b/components/popover/index.css index 38556e2b628..425175a4f44 100644 --- a/components/popover/index.css +++ b/components/popover/index.css @@ -74,7 +74,7 @@ border-style: solid; border-radius: var(--mod-popover-corner-radius, var(--spectrum-popover-corner-radius)); - border-color: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color-with-transparency))); + border-color: var(--spectrum-popover-border-color-with-transparency); border-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width)); @@ -94,7 +94,7 @@ stroke-linecap: square; stroke-linejoin: miter; fill: var(--mod-popover-background-color, var(--spectrum-popover-background-color)); - stroke: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color-with-transparency))); + stroke: var(--spectrum-popover-border-color-with-transparency); stroke-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width)); } } @@ -438,10 +438,3 @@ } } } - -/* windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Popover { - --highcontrast-popover-border-color: CanvasText; - } -} diff --git a/components/progressbar/dist/metadata.json b/components/progressbar/dist/metadata.json index 3caa917a2a5..8a9179df7a2 100644 --- a/components/progressbar/dist/metadata.json +++ b/components/progressbar/dist/metadata.json @@ -28,15 +28,11 @@ ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill", ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-label", ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-percentage", - ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-track", - ".spectrum-ProgressBar-track" + ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-track" ], "modifiers": [ "--mod-progressbar-animation-duration-indeterminate", "--mod-progressbar-animation-ease-in-out-indeterminate", - "--mod-progressbar-fill-color", - "--mod-progressbar-fill-color-black", - "--mod-progressbar-fill-color-white", "--mod-progressbar-fill-size-indeterminate", "--mod-progressbar-font-size", "--mod-progressbar-inline-size", @@ -51,7 +47,6 @@ "--mod-progressbar-spacing-top-to-text", "--mod-progressbar-text-color", "--mod-progressbar-thickness", - "--mod-progressbar-track-color", "--mod-spacing-progressbar-label-to-text" ], "component": [ @@ -113,10 +108,5 @@ "--spectrum-track-color" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-progressbar-fill-color", - "--highcontrast-progressbar-fill-color-black", - "--highcontrast-progressbar-fill-color-white", - "--highcontrast-progressbar-track-color" - ] + "high-contrast": [] } diff --git a/components/progressbar/index.css b/components/progressbar/index.css index 637340f999a..3334c50a2b9 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -120,14 +120,14 @@ block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); border-radius: var(--spectrum-progressbar-corner-radius); - background: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))); + background: var(--spectrum-progressbar-track-color); } .spectrum-ProgressBar-fill { border: none; block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); transition: width 1s; - background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color))); + background: var(--spectrum-progressbar-fill-color); border-radius: var(--spectrum-progressbar-corner-radius); } } @@ -172,7 +172,7 @@ .spectrum-ProgressBar--staticWhite { .spectrum-ProgressBar-fill { color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white)); - background: var(--highcontrast-progressbar-fill-color-white, var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white))); + background: var(--spectrum-progressbar-fill-color-white); } .spectrum-ProgressBar-label, @@ -189,7 +189,7 @@ .spectrum-ProgressBar--staticBlack { .spectrum-ProgressBar-fill { color: var(--mod-progressbar-label-and-value-black, var(--spectrum-progressbar-label-and-value-black)); - background: var(--highcontrast-progressbar-fill-color-black, var(--mod-progressbar-fill-color-black, var(--spectrum-progressbar-fill-color-black))); + background: var(--spectrum-progressbar-fill-color-black); } .spectrum-ProgressBar-label, @@ -230,15 +230,3 @@ transform: translate(calc(var(--spectrum-progressbar-inline-size) * -1)); } } - -@media (forced-colors: active) { - .spectrum-ProgressBar-track { - --highcontrast-progressbar-fill-color: ButtonText; - --highcontrast-progressbar-track-color: ButtonFace; - --highcontrast-progressbar-fill-color-white: ButtonText; - --highcontrast-progressbar-fill-color-black: ButtonText; - - forced-color-adjust: none; - border: 1px solid ButtonText; - } -} diff --git a/components/progresscircle/dist/metadata.json b/components/progresscircle/dist/metadata.json index a252d2638db..1a2d316ccbb 100644 --- a/components/progresscircle/dist/metadata.json +++ b/components/progresscircle/dist/metadata.json @@ -8,16 +8,12 @@ ".spectrum-ProgressCircle-fill", ".spectrum-ProgressCircle-track", ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticBlack", - ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite", - ".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-innerCircle", - ".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-outerCircle" + ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite" ], "modifiers": [ - "--mod-progress-circle-fill-border-color", "--mod-progress-circle-position", "--mod-progress-circle-size", - "--mod-progress-circle-thickness", - "--mod-progress-circle-track-border-color" + "--mod-progress-circle-thickness" ], "component": [ "--spectrum-progress-circle-fill-border-color", @@ -40,8 +36,5 @@ "--spectrum-track-color" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-progress-circle-fill-border-color", - "--highcontrast-progress-circle-track-color" - ] + "high-contrast": [] } diff --git a/components/progresscircle/index.css b/components/progresscircle/index.css index d2adf1c18dd..0836a200d9b 100644 --- a/components/progresscircle/index.css +++ b/components/progresscircle/index.css @@ -65,13 +65,13 @@ governing permissions and limitations under the License. .spectrum-ProgressCircle-track { stroke-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness)); - stroke: var(--highcontrast-progress-circle-track-color, var(--mod-progress-circle-track-border-color, var(--spectrum-progress-circle-track-border-color))); + stroke: var(--spectrum-progress-circle-track-border-color); } /* circle progress filled */ .spectrum-ProgressCircle-fill { stroke-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness)); - stroke: var(--highcontrast-progress-circle-fill-border-color, var(--mod-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color))); + stroke: var(--spectrum-progress-circle-fill-border-color); transform: rotate(-90deg); transform-origin: center; } @@ -86,24 +86,3 @@ governing permissions and limitations under the License. transform-origin: center; } } - -/* windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-ProgressCircle { - /* fill is bright color */ - --highcontrast-progress-circle-fill-border-color: Highlight; - --highcontrast-progress-circle-track-color: Background; - } - - .spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) { - .spectrum-innerCircle { - stroke: CanvasText; - } - - .spectrum-outerCircle { - border: 1px solid; - border-color: CanvasText; - border-radius: 50%; - } - } -} diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json index 5671fe2386a..63a12aecaac 100644 --- a/components/radio/dist/metadata.json +++ b/components/radio/dist/metadata.json @@ -2,7 +2,6 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Radio", - ".spectrum-Radio .spectrum-Radio-button:after", ".spectrum-Radio .spectrum-Radio-input:checked:disabled + .spectrum-Radio-button:before", ".spectrum-Radio .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label", ".spectrum-Radio .spectrum-Radio-input:disabled + .spectrum-Radio-button:before", @@ -29,11 +28,9 @@ ".spectrum-Radio.is-active .spectrum-Radio-input:checked + .spectrum-Radio-button:before", ".spectrum-Radio.is-active .spectrum-Radio-label", ".spectrum-Radio.is-readOnly .spectrum-Radio-input", - ".spectrum-Radio.is-readOnly .spectrum-Radio-input + .spectrum-Radio-button:before", ".spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label", ".spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label", ".spectrum-Radio.is-readOnly .spectrum-Radio-label", - ".spectrum-Radio.is-readOnly:hover .spectrum-Radio-input + .spectrum-Radio-button:before", ".spectrum-Radio:active .spectrum-Radio-button:before", ".spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before", ".spectrum-Radio:active .spectrum-Radio-label", @@ -54,32 +51,13 @@ "--mod-radio-animation-duration", "--mod-radio-border-width", "--mod-radio-button-background-color", - "--mod-radio-button-border-color-default", - "--mod-radio-button-border-color-down", - "--mod-radio-button-border-color-focus", - "--mod-radio-button-border-color-hover", - "--mod-radio-button-checked-border-color-default", - "--mod-radio-button-checked-border-color-down", - "--mod-radio-button-checked-border-color-focus", - "--mod-radio-button-checked-border-color-hover", "--mod-radio-button-control-size", "--mod-radio-button-top-to-control", - "--mod-radio-disabled-border-color", - "--mod-radio-disabled-content-color", - "--mod-radio-emphasized-accent-color", - "--mod-radio-emphasized-accent-color-down", - "--mod-radio-emphasized-accent-color-focus", - "--mod-radio-emphasized-accent-color-hover", - "--mod-radio-focus-indicator-color", "--mod-radio-focus-indicator-thickness", "--mod-radio-font-size", "--mod-radio-height", "--mod-radio-line-height", "--mod-radio-line-height-cjk", - "--mod-radio-neutral-content-color", - "--mod-radio-neutral-content-color-down", - "--mod-radio-neutral-content-color-focus", - "--mod-radio-neutral-content-color-hover", "--mod-radio-text-to-control" ], "component": [ @@ -168,25 +146,5 @@ "--spectrum-text-to-control-75" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-radio-button-border-color-default", - "--highcontrast-radio-button-border-color-down", - "--highcontrast-radio-button-border-color-focus", - "--highcontrast-radio-button-border-color-hover", - "--highcontrast-radio-button-checked-border-color-default", - "--highcontrast-radio-button-checked-border-color-down", - "--highcontrast-radio-button-checked-border-color-focus", - "--highcontrast-radio-button-checked-border-color-hover", - "--highcontrast-radio-disabled-border-color", - "--highcontrast-radio-disabled-content-color", - "--highcontrast-radio-emphasized-accent-color", - "--highcontrast-radio-emphasized-accent-color-down", - "--highcontrast-radio-emphasized-accent-color-focus", - "--highcontrast-radio-emphasized-accent-color-hover", - "--highcontrast-radio-focus-indicator-color", - "--highcontrast-radio-neutral-content-color", - "--highcontrast-radio-neutral-content-color-down", - "--highcontrast-radio-neutral-content-color-focus", - "--highcontrast-radio-neutral-content-color-hover" - ] + "high-contrast": [] } diff --git a/components/radio/index.css b/components/radio/index.css index c3878f77634..0beadf03ac1 100644 --- a/components/radio/index.css +++ b/components/radio/index.css @@ -121,16 +121,16 @@ &:hover { /* selection indicator hover */ .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-border-color-hover, var(--mod-radio-button-border-color-hover, var(--spectrum-radio-button-border-color-hover))); + border-color: var(--spectrum-radio-button-border-color-hover); } /* checked selection indicator hover */ .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-checked-border-color-hover, var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-border-color-hover))); + border-color: var(--spectrum-radio-button-border-color-hover); } .spectrum-Radio-label { - color: var(--highcontrast-radio-neutral-content-color-hover, var(--mod-radio-neutral-content-color-hover, var(--spectrum-radio-neutral-content-color-hover))); + color: var(--spectrum-radio-neutral-content-color-hover); } } @@ -144,29 +144,29 @@ &.is-active { /* selection indicator active */ .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-border-color-down, var(--mod-radio-button-border-color-down, var(--spectrum-radio-button-border-color-down))); + border-color: var(--spectrum-radio-button-border-color-down); } /* checked selection indicator active */ .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-checked-border-color-down, var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-border-color-down))); + border-color: var(--spectrum-radio-button-border-color-down); } .spectrum-Radio-label { - color: var(--highcontrast-radio-neutral-content-color-down, var(--mod-radio-neutral-content-color-down, var(--spectrum-radio-neutral-content-color-down))); + color: var(--spectrum-radio-neutral-content-color-down); } } &:focus { /* selection indicator is focused state */ .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-border-color-focus, var(--mod-radio-button-border-color-focus, var(--spectrum-radio-button-border-color-focus))); + border-color: var(--spectrum-radio-button-border-color-focus); } /* focus ring is focused state */ .spectrum-Radio-button::after { border-style: solid; - border-color: var(--highcontrast-radio-focus-indicator-color, var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color))); + border-color: var(--spectrum-radio-focus-indicator-color); border-width: var(--mod-radio-focus-indicator-thickness, var(--spectrum-radio-focus-indicator-thickness)); inline-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2)); @@ -175,11 +175,11 @@ /* selected selection indicator is focused state */ .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-checked-border-color-focus, var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-border-color-focus))); + border-color: var(--spectrum-radio-button-border-color-focus); } .spectrum-Radio-label { - color: var(--highcontrast-radio-neutral-content-color-focus, var(--mod-radio-neutral-content-color-focus, var(--spectrum-radio-neutral-content-color-focus))); + color: var(--spectrum-radio-neutral-content-color-focus); } } @@ -192,7 +192,7 @@ /* ensure disabled readonly has normal text color */ & .spectrum-Radio-input:disabled ~ .spectrum-Radio-label, & .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label { - color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color))); + color: var(--spectrum-radio-neutral-content-color); } } } @@ -200,22 +200,22 @@ .spectrum-Radio--emphasized { /* selection indicator emphasized */ .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-emphasized-accent-color, var(--mod-radio-emphasized-accent-color, var(--spectrum-radio-emphasized-accent-color))); + border-color: var(--spectrum-radio-emphasized-accent-color); } /* selection indicator emphasized hover */ &:hover .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-emphasized-accent-color-hover, var(--mod-radio-emphasized-accent-color-hover, var(--spectrum-radio-emphasized-accent-color-hover))); + border-color: var(--spectrum-radio-emphasized-accent-color-hover); } /* selection indicator emphasized active */ &:active .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-emphasized-accent-color-down, var(--mod-radio-emphasized-accent-color-down, var(--spectrum-radio-emphasized-accent-color-down))); + border-color: var(--spectrum-radio-emphasized-accent-color-down); } /* selection indicator emphasized focus */ &:focus .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-emphasized-accent-color-focus, var(--mod-radio-emphasized-accent-color-focus, var(--spectrum-radio-emphasized-accent-color-focus))); + border-color: var(--spectrum-radio-emphasized-accent-color-focus); } } @@ -224,11 +224,11 @@ .spectrum-Radio .spectrum-Radio-input:checked:disabled { /* selection indicator */ & + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-disabled-border-color, var(--mod-radio-disabled-border-color, var(--spectrum-radio-disabled-border-color))); + border-color: var(--spectrum-radio-disabled-border-color); } & ~ .spectrum-Radio-label { - color: var(--highcontrast-radio-disabled-content-color, var(--mod-radio-disabled-content-color, var(--spectrum-radio-disabled-content-color))); + color: var(--spectrum-radio-disabled-content-color); } } @@ -268,7 +268,7 @@ &::before { /* half of element width minus half of indicator width is checked border width */ border-width: calc((var(--spectrum-radio-button-control-size) / 2) - (var(--spectrum-radio-button-selection-indicator) / 2)); - border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-border-color-default))); + border-color: var(--spectrum-radio-button-border-color-default); } } @@ -276,7 +276,7 @@ &:focus-visible { + .spectrum-Radio-button::after { border-width: var(--mod-radio-focus-indicator-thickness, var(--spectrum-radio-focus-indicator-thickness)); - border-color: var(--highcontrast-radio-focus-indicator-color, var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color))); + border-color: var(--spectrum-radio-focus-indicator-color); border-style: solid; inline-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2)); @@ -295,7 +295,7 @@ font-weight: var(--spectrum-radio-text-font-weight); font-style: var(--spectrum-radio-text-font-style); - color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color))); + color: var(--spectrum-radio-neutral-content-color); line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height)); transition: color var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out; @@ -333,7 +333,7 @@ border-radius: 50%; border-width: var(--mod-radio-border-width, var(--spectrum-radio-border-width)); - border-color: var(--highcontrast-radio-button-border-color-default, var(--mod-radio-button-border-color-default, var(--spectrum-radio-button-border-color-default))); + border-color: var(--spectrum-radio-button-border-color-default); border-style: solid; transition: @@ -361,58 +361,3 @@ } } } - -/* windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Radio { - /* high contrast text */ - --highcontrast-radio-neutral-content-color: CanvasText; - --highcontrast-radio-neutral-content-color-hover: CanvasText; - --highcontrast-radio-neutral-content-color-down: CanvasText; - --highcontrast-radio-neutral-content-color-focus: CanvasText; - - /* high contrast selector */ - --highcontrast-radio-button-border-color-default: ButtonText; - --highcontrast-radio-button-border-color-hover: Highlight; - --highcontrast-radio-button-border-color-down: ButtonText; - --highcontrast-radio-button-border-color-focus: Highlight; - - /* high contrast emphasized selector */ - --highcontrast-radio-emphasized-accent-color: Highlight; - --highcontrast-radio-emphasized-accent-color-hover: Highlight; - --highcontrast-radio-emphasized-accent-color-down: ButtonText; - --highcontrast-radio-emphasized-accent-color-focus: Highlight; - - /* high contrast checked selector */ - --highcontrast-radio-button-checked-border-color-default: Highlight; - --highcontrast-radio-button-checked-border-color-hover: Highlight; - --highcontrast-radio-button-checked-border-color-down: Highlight; - --highcontrast-radio-button-checked-border-color-focus: Highlight; - - /* high contrast disabled text */ - --highcontrast-radio-disabled-content-color: GrayText; - - /* high contrast disabled selector */ - --highcontrast-radio-disabled-border-color: GrayText; - - /* high contrast focus ring */ - --highcontrast-radio-focus-indicator-color: CanvasText; - - /* ensure focus ring is visible if user agent has non-accessible system overrides */ - .spectrum-Radio-button { - &::after { - forced-color-adjust: none; - } - } - - &.is-readOnly { - .spectrum-Radio-input + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-border-color-default); - } - - &:hover .spectrum-Radio-input + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-border-color-default); - } - } - } -} diff --git a/components/rating/dist/metadata.json b/components/rating/dist/metadata.json index 591d987a853..e23fe65dbbb 100644 --- a/components/rating/dist/metadata.json +++ b/components/rating/dist/metadata.json @@ -42,16 +42,12 @@ "--mod-rating-border-radius", "--mod-rating-bottom-to-content-area", "--mod-rating-edge-to-content-area", - "--mod-rating-emphasized-icon-color-default", - "--mod-rating-emphasized-icon-color-down", - "--mod-rating-emphasized-icon-color-hover", "--mod-rating-emphasized-icon-color-key-focus", "--mod-rating-focus-indicator-color", "--mod-rating-focus-indicator-gap", "--mod-rating-focus-indicator-thickness", "--mod-rating-height", "--mod-rating-icon-color-default", - "--mod-rating-icon-color-disabled", "--mod-rating-icon-color-down", "--mod-rating-icon-color-hover", "--mod-rating-icon-fill", @@ -114,11 +110,5 @@ "--spectrum-workflow-icon-size-75" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-rating-emphasized-icon-color-default", - "--highcontrast-rating-emphasized-icon-color-down", - "--highcontrast-rating-emphasized-icon-color-hover", - "--highcontrast-rating-focus-color-outline", - "--highcontrast-rating-icon-color-disabled" - ] + "high-contrast": [] } diff --git a/components/rating/index.css b/components/rating/index.css index 8e53c47d3e0..03c69378558 100644 --- a/components/rating/index.css +++ b/components/rating/index.css @@ -217,7 +217,7 @@ color: var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default)); &.is-selected { - color: var(--highcontrast-rating-emphasized-icon-color-default, var(--mod-rating-emphasized-icon-color-default, var(--spectrum-rating-emphasized-icon-color-default))); + color: var(--spectrum-rating-emphasized-icon-color-default); } /* All stars following the hovered star */ @@ -228,11 +228,11 @@ &:hover .spectrum-Rating-icon { /* Make all stars selected when the component is hovered */ - color: var(--highcontrast-rating-emphasized-icon-color-default, var(--mod-rating-emphasized-icon-color-default, var(--spectrum-rating-emphasized-icon-color-default))); + color: var(--spectrum-rating-emphasized-icon-color-default); &:hover { /* The icon that's actually hovered is darker */ - color: var(--highcontrast-rating-emphasized-icon-color-hover, var(--mod-rating-emphasized-icon-color-hover, var(--spectrum-rating-emphasized-icon-color-hover))); + color: var(--spectrum-rating-emphasized-icon-color-hover); } &:hover ~ .spectrum-Rating-icon { @@ -240,7 +240,7 @@ } &:active { - color: var(--highcontrast-rating-emphasized-icon-color-down, var(--mod-rating-emphasized-icon-color-down, var(--spectrum-rating-emphasized-icon-color-down))); + color: var(--spectrum-rating-emphasized-icon-color-down); } } } @@ -248,24 +248,10 @@ /* Disabled */ .spectrum-Rating.is-disabled { .spectrum-Rating-icon { - color: var(--highcontrast-rating-icon-color-disabled, var(--mod-rating-icon-color-disabled, var(--spectrum-rating-icon-color-disabled))); + color: var(--spectrum-rating-icon-color-disabled); &.is-selected { - color: var(--highcontrast-rating-icon-color-disabled, var(--mod-rating-icon-color-disabled, var(--spectrum-rating-icon-color-disabled))); - } - } -} - -@media (forced-colors: active) { - .spectrum-Rating { - --highcontrast-rating-icon-color-disabled: GrayText; - --highcontrast-rating-emphasized-icon-color-default: Highlight; - --highcontrast-rating-emphasized-icon-color-hover: Highlight; - --highcontrast-rating-emphasized-icon-color-down: Highlight; - --highcontrast-rating-focus-color-outline: CanvasText; - - &.is-focused { - outline: 1px solid var(--highcontrast-rating-focus-color-outline); + color: var(--spectrum-rating-icon-color-disabled); } } } diff --git a/components/search/dist/metadata.json b/components/search/dist/metadata.json index 0d4bd84abfe..4f30bf8db25 100644 --- a/components/search/dist/metadata.json +++ b/components/search/dist/metadata.json @@ -3,9 +3,6 @@ "selectors": [ ".spectrum-Search", ".spectrum-Search .spectrum-HelpText", - ".spectrum-Search .spectrum-Search-clearButton .spectrum-ClearButton-fill", - ".spectrum-Search .spectrum-Search-textfield", - ".spectrum-Search .spectrum-Search-textfield .spectrum-Search-input", ".spectrum-Search--sizeL", ".spectrum-Search--sizeS", ".spectrum-Search--sizeXL", @@ -188,10 +185,5 @@ "--mod-textfield-text-color-hover", "--mod-textfield-text-color-keyboard-focus" ], - "high-contrast": [ - "--highcontrast-search-color-default", - "--highcontrast-search-color-disabled", - "--highcontrast-search-color-focus", - "--highcontrast-search-color-hover" - ] + "high-contrast": [] } diff --git a/components/search/index.css b/components/search/index.css index 675279bb8f0..6759a414ef4 100644 --- a/components/search/index.css +++ b/components/search/index.css @@ -189,7 +189,7 @@ } .spectrum-Search-icon { - --spectrum-search-color: var(--highcontrast-search-color-default, var(--mod-search-color-default, var(--spectrum-search-color-default))); + --spectrum-search-color: var(--spectrum-search-color-default); display: block; position: absolute; @@ -199,24 +199,24 @@ color: var(--spectrum-search-color); .spectrum-Search-textfield:hover & { - --spectrum-search-color: var(--highcontrast-search-color-hover, var(--mod-search-color-hover, var(--spectrum-search-color-hover))); + --spectrum-search-color: var(--spectrum-search-color-hover); } .spectrum-Search-textfield.is-focused & { - --spectrum-search-color: var(--highcontrast-search-color-focus, var(--mod-search-color-focus, var(--spectrum-search-color-focus))); + --spectrum-search-color: var(--spectrum-search-color-focus); } .spectrum-Search-textfield.is-focused:hover & { - --spectrum-search-color: var(--highcontrast-search-color-focus, var(--mod-search-color-focus-hover, var(--spectrum-search-color-focus-hover))); + --spectrum-search-color: var(--spectrum-search-color-focus-hover); } .spectrum-Search-textfield.is-keyboardFocused & { - --spectrum-search-color: var(--highcontrast-search-color-focus, var(--mod-search-color-key-focus, var(--spectrum-search-color-key-focus))); + --spectrum-search-color: var(--spectrum-search-color-key-focus); } .spectrum-Search-textfield.is-disabled &, .spectrum-Search-textfield.is-disabled:hover & { - --spectrum-search-color: var(--highcontrast-search-color-disabled, var(--mod-search-color-disabled, var(--spectrum-search-color-disabled))); + --spectrum-search-color: var(--spectrum-search-color-disabled); } } @@ -240,21 +240,3 @@ appearance: none; } } - -@media (forced-colors: active) { - .spectrum-Search .spectrum-Search-textfield, - .spectrum-Search .spectrum-Search-textfield .spectrum-Search-input { - --highcontrast-search-color-default: CanvasText; - --highcontrast-search-color-hover: CanvasText; - --highcontrast-search-color-focus: CanvasText; - --highcontrast-search-color-disabled: GrayText; - } - - .spectrum-Search .spectrum-Search-clearButton { - .spectrum-ClearButton-fill { - /* Avoid button background color overlapping on border. */ - forced-color-adjust: none; - background-color: transparent; - } - } -} diff --git a/components/sidenav/dist/metadata.json b/components/sidenav/dist/metadata.json index 0215529e384..54957e7ef1a 100644 --- a/components/sidenav/dist/metadata.json +++ b/components/sidenav/dist/metadata.json @@ -2,7 +2,6 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-SideNav", - ".spectrum-SideNav .spectrum-Icon", ".spectrum-SideNav--hasIcon.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink", ".spectrum-SideNav--hasIcon.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink", ".spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink", @@ -30,22 +29,12 @@ "modifiers": [ "--mod-sidenav-background-default", "--mod-sidenav-background-disabled", - "--mod-sidenav-background-hover", - "--mod-sidenav-background-hover-selected", - "--mod-sidenav-background-key-focus", - "--mod-sidenav-background-key-focus-selected", "--mod-sidenav-border-radius", "--mod-sidenav-bottom-to-label", - "--mod-sidenav-content-color-default", - "--mod-sidenav-content-color-default-selected", - "--mod-sidenav-content-color-down", "--mod-sidenav-content-color-down-selected", - "--mod-sidenav-content-color-hover", "--mod-sidenav-content-color-hover-selected", "--mod-sidenav-content-color-key-focus", "--mod-sidenav-content-color-key-focus-selected", - "--mod-sidenav-content-disabled-color", - "--mod-sidenav-focus-ring-color", "--mod-sidenav-focus-ring-gap", "--mod-sidenav-focus-ring-size", "--mod-sidenav-gap", @@ -59,9 +48,6 @@ "--mod-sidenav-icon-size", "--mod-sidenav-icon-spacing", "--mod-sidenav-inline-padding", - "--mod-sidenav-item-background-default-selected", - "--mod-sidenav-item-background-down", - "--mod-sidenav-item-background-down-selected", "--mod-sidenav-max-width", "--mod-sidenav-min-height", "--mod-sidenav-min-width", @@ -181,20 +167,5 @@ "--spectrum-workflow-icon-size-100" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-sidenav-background-hover", - "--highcontrast-sidenav-background-hover-selected", - "--highcontrast-sidenav-background-key-focus", - "--highcontrast-sidenav-background-key-focus-selected", - "--highcontrast-sidenav-content-color-default", - "--highcontrast-sidenav-content-color-default-selected", - "--highcontrast-sidenav-content-color-down", - "--highcontrast-sidenav-content-color-hover", - "--highcontrast-sidenav-content-disabled-color", - "--highcontrast-sidenav-focus-ring-color", - "--highcontrast-sidenav-item-background-default-selected", - "--highcontrast-sidenav-item-background-down", - "--highcontrast-sidenav-item-background-down-selected", - "--highcontrast-sidenav-top-level-font-color" - ] + "high-contrast": [] } diff --git a/components/sidenav/index.css b/components/sidenav/index.css index c408228f7ca..61a7b204c7d 100644 --- a/components/sidenav/index.css +++ b/components/sidenav/index.css @@ -109,7 +109,7 @@ /* Disable all children */ .spectrum-SideNav-itemLink { background-color: var(--mod-sidenav-background-disabled, var(--spectrum-sidenav-background-disabled)); - color: var(--highcontrast-sidenav-content-disabled-color, var(--mod-sidenav-content-disabled-color, var(--spectrum-sidenav-content-disabled-color))); + color: var(--spectrum-sidenav-content-disabled-color); cursor: default; pointer-events: none; @@ -118,22 +118,22 @@ &.is-selected { .spectrum-SideNav-itemLink { - background-color: var(--highcontrast-sidenav-item-background-default-selected, var(--mod-sidenav-item-background-default-selected, var(--spectrum-sidenav-item-background-default-selected))); - color: var(--highcontrast-sidenav-content-color-default-selected, var(--mod-sidenav-content-color-default-selected, var(--spectrum-sidenav-content-color-default-selected))); + background-color: var(--spectrum-sidenav-item-background-default-selected); + color: var(--spectrum-sidenav-content-color-default-selected); &:hover { - background-color: var(--highcontrast-sidenav-background-hover-selected, var(--mod-sidenav-background-hover-selected, var(--spectrum-sidenav-background-hover-selected))); + background-color: var(--spectrum-sidenav-background-hover-selected); color: var(--mod-sidenav-content-color-hover-selected, var(--spectrum-sidenav-content-color-hover-selected)); } &:active { - background-color: var(--highcontrast-sidenav-item-background-down-selected, var(--mod-sidenav-item-background-down-selected, var(--spectrum-sidenav-item-background-down-selected))); + background-color: var(--spectrum-sidenav-item-background-down-selected); color: var(--mod-sidenav-content-color-down-selected, var(--spectrum-sidenav-content-color-down-selected)); } &.is-keyboardFocused, &:focus-visible { - background-color: var(--highcontrast-sidenav-background-key-focus-selected, var(--mod-sidenav-background-key-focus-selected, var(--spectrum-sidenav-background-key-focus-selected))); + background-color: var(--spectrum-sidenav-background-key-focus-selected); color: var(--mod-sidenav-content-color-key-focus-selected, var(--spectrum-sidenav-content-color-key-focus-selected)); } } @@ -157,7 +157,7 @@ border-radius: var(--mod-sidenav-border-radius, var(--spectrum-sidenav-border-radius)); background-color: var(--mod-sidenav-background-default, var(--spectrum-sidenav-background-default)); - color: var(--highcontrast-sidenav-content-color-default, var(--mod-sidenav-content-color-default, var(--spectrum-sidenav-content-color-default))); + color: var(--spectrum-sidenav-content-color-default); inline-size: var(--mod-sidenav-width, var(--spectrum-sidenav-width)); min-inline-size: var(--mod-sidenav-min-width, var(--spectrum-sidenav-min-width)); @@ -188,20 +188,20 @@ } &:hover { - background-color: var(--highcontrast-sidenav-background-hover, var(--mod-sidenav-background-hover, var(--spectrum-sidenav-background-hover))); - color: var(--highcontrast-sidenav-content-color-hover, var(--mod-sidenav-content-color-hover, var(--spectrum-sidenav-content-color-hover))); + background-color: var(--spectrum-sidenav-background-hover); + color: var(--spectrum-sidenav-content-color-hover); } &:active { - background-color: var(--highcontrast-sidenav-item-background-down, var(--mod-sidenav-item-background-down, var(--spectrum-sidenav-item-background-down))); - color: var(--highcontrast-sidenav-content-color-down, var(--mod-sidenav-content-color-down, var(--spectrum-sidenav-content-color-down))); + background-color: var(--spectrum-sidenav-item-background-down); + color: var(--spectrum-sidenav-content-color-down); } &.is-keyboardFocused, &:focus-visible { - outline: var(--highcontrast-sidenav-focus-ring-color, var(--mod-sidenav-focus-ring-color, var(--spectrum-sidenav-focus-ring-color))) solid var(--mod-sidenav-focus-ring-size, var(--spectrum-sidenav-focus-ring-size)); + outline: var(--spectrum-sidenav-focus-ring-color) solid var(--mod-sidenav-focus-ring-size, var(--spectrum-sidenav-focus-ring-size)); outline-offset: var(--mod-sidenav-focus-ring-gap, var(--spectrum-sidenav-focus-ring-gap)); - background-color: var(--highcontrast-sidenav-background-key-focus, var(--mod-sidenav-background-key-focus, var(--spectrum-sidenav-background-key-focus))); + background-color: var(--spectrum-sidenav-background-key-focus); color: var(--mod-sidenav-content-color-key-focus, var(--spectrum-sidenav-content-color-key-focus)); } } @@ -220,7 +220,6 @@ .spectrum-SideNav--multiLevel { .spectrum-SideNav-itemLink { - color: var(--highcontrast-sidenav-top-level-font-color); font-family: var(--mod-sidenav-top-level-font-family, var(--spectrum-sidenav-top-level-font-family)); font-weight: var(--mod-sidenav-top-level-font-weight, var(--spectrum-sidenav-top-level-font-weight)); font-style: var(--mod-sidenav-top-level-font-style, var(--spectrum-sidenav-top-level-font-style)); @@ -251,36 +250,3 @@ } } } - -@media (forced-colors: active) { - /* forced-color-adjust: preserve-parent-color addresses svg bug on icon hover */ - .spectrum-SideNav { - .spectrum-Icon { - forced-color-adjust: preserve-parent-color; - } - } - - .spectrum-SideNav-item { - --highcontrast-sidenav-content-disabled-color: GrayText; - - --highcontrast-sidenav-focus-ring-color: Highlight; - - --highcontrast-sidenav-content-color-default-selected: SelectedItemText; - --highcontrast-sidenav-item-background-default-selected: SelectedItem; - - --highcontrast-sidenav-background-key-focus-selected: Highlight; - --highcontrast-sidenav-background-hover-selected: Highlight; - --highcontrast-sidenav-item-background-down-selected: Highlight; - - --highcontrast-sidenav-item-background-down: Highlight; - --highcontrast-sidenav-background-hover: Highlight; - --highcontrast-sidenav-content-color-hover: HighlightText; - --highcontrast-sidenav-background-key-focus: Highlight; - - --highcontrast-sidenav-top-level-font-color: ButtonText; - --highcontrast-sidenav-content-color-default: ButtonText; - --highcontrast-sidenav-content-color-down: HighlightText; - - forced-color-adjust: none; - } -} diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 7eaea714d74..f20da11d14c 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -2,7 +2,6 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Slider", - ".spectrum-Slider .spectrum-Slider-handle.is-focused:before", ".spectrum-Slider--emphasized .spectrum-Slider-fill:before", ".spectrum-Slider--emphasized .spectrum-Slider-ramp .spectrum-Slider-ramp-track-fill", ".spectrum-Slider--emphasized .spectrum-Slider-tick:nth-child(-n + 4):after", @@ -92,7 +91,6 @@ ".spectrum-Slider.is-disabled .spectrum-Slider-handle:active", ".spectrum-Slider.is-disabled .spectrum-Slider-handle:hover", ".spectrum-Slider.is-disabled .spectrum-Slider-labelContainer", - ".spectrum-Slider.is-disabled .spectrum-Slider-ramp + .spectrum-Slider-handle", ".spectrum-Slider.is-disabled .spectrum-Slider-ramp path", ".spectrum-Slider.is-disabled .spectrum-Slider-tick:after", ".spectrum-Slider.is-disabled .spectrum-Slider-tickLabel", @@ -102,7 +100,6 @@ ".spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle.is-focused:before", ".spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before", ".spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus:before", - ".spectrum-Slider.spectrum-Slider--ramp .spectrum-Slider-handle", ".spectrum-Slider:dir(rtl)", ".spectrum-Slider:dir(rtl) .spectrum-Slider-handle:before", ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused", @@ -111,10 +108,6 @@ ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible", ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before", ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus:before", - ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused", - ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active", - ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within", - ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover", ".spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)" ], "modifiers": [ @@ -127,22 +120,10 @@ "--mod-slider-control-to-side-field-label", "--mod-slider-control-to-text-field", "--mod-slider-controls-margin", - "--mod-slider-disabled-border-color", "--mod-slider-editable-field-inline-size", - "--mod-slider-emphasized-tick-mark-color", - "--mod-slider-emphasized-track-fill-color", "--mod-slider-font-size", - "--mod-slider-handle-background-color", - "--mod-slider-handle-background-color-disabled", - "--mod-slider-handle-border-color", - "--mod-slider-handle-border-color-disabled", - "--mod-slider-handle-border-color-down", - "--mod-slider-handle-border-color-hover", - "--mod-slider-handle-border-color-key-focus", "--mod-slider-handle-border-radius", "--mod-slider-handle-border-width", - "--mod-slider-handle-disabled-background-color", - "--mod-slider-handle-focus-ring-color-key-focus", "--mod-slider-handle-size", "--mod-slider-inline-size", "--mod-slider-input-left", @@ -151,25 +132,13 @@ "--mod-slider-label-font-style", "--mod-slider-label-font-weight", "--mod-slider-label-margin-start", - "--mod-slider-label-text-color", - "--mod-slider-label-text-color-disabled", - "--mod-slider-ramp-track-color", - "--mod-slider-ramp-track-color-disabled", - "--mod-slider-ramp-track-fill-color", "--mod-slider-ramp-track-height", "--mod-slider-range-track-reset", - "--mod-slider-tick-label-color", "--mod-slider-tick-mark-border-radius", - "--mod-slider-tick-mark-color", - "--mod-slider-tick-mark-color-filled-track", "--mod-slider-tick-mark-height", "--mod-slider-tick-mark-width", "--mod-slider-ticks-handle-background-color", - "--mod-slider-track-color", - "--mod-slider-track-color-disabled", "--mod-slider-track-corner-radius", - "--mod-slider-track-fill-color", - "--mod-slider-track-fill-color-disabled", "--mod-slider-track-fill-thickness", "--mod-slider-track-height-medium", "--mod-slider-track-thickness", @@ -317,26 +286,5 @@ "--mod-fieldlabel-top-to-text", "--mod-textfield-width" ], - "high-contrast": [ - "--highcontrast-slider-filled-track-fill-color", - "--highcontrast-slider-handle-background-color", - "--highcontrast-slider-handle-border-color", - "--highcontrast-slider-handle-border-color-disabled", - "--highcontrast-slider-handle-border-color-down", - "--highcontrast-slider-handle-border-color-hover", - "--highcontrast-slider-handle-border-color-key-focus", - "--highcontrast-slider-handle-disabled-background-color", - "--highcontrast-slider-handle-focus-ring-color-key-focus", - "--highcontrast-slider-label-text-color", - "--highcontrast-slider-label-text-color-disabled", - "--highcontrast-slider-ramp-track-color", - "--highcontrast-slider-ramp-track-color-disabled", - "--highcontrast-slider-tick-mark-color", - "--highcontrast-slider-tick-mark-color-disabled", - "--highcontrast-slider-tick-mark-color-filled-track", - "--highcontrast-slider-track-color", - "--highcontrast-slider-track-color-disabled", - "--highcontrast-slider-track-color-static", - "--highcontrast-slider-track-fill-color-disabled" - ] + "high-contrast": [] } diff --git a/components/slider/index.css b/components/slider/index.css index ed933f03039..c1dc2fa3889 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -368,8 +368,8 @@ } .spectrum-Slider-handle { - border-color: var(--highcontrast-slider-handle-border-color, var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color))); - background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color))); + border-color: var(--spectrum-slider-handle-border-color); + background: var(--spectrum-slider-handle-background-color); position: absolute; inset-inline-start: 0; z-index: 2; @@ -392,12 +392,12 @@ outline: none; &:hover { - border-color: var(--highcontrast-slider-handle-border-color-hover, var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover))); + border-color: var(--spectrum-slider-handle-border-color-hover); } &:active, &.is-dragged { - border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))); + border-color: var(--spectrum-slider-handle-border-color-down); transform: perspective(var(--spectrum-slider-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); } @@ -436,11 +436,11 @@ .spectrum-Slider:not(.is-disabled) &.is-focused, .spectrum-Slider:not(.is-disabled) &:focus, .spectrum-Slider:not(.is-disabled) &:focus-visible { - border-color: var(--highcontrast-slider-handle-border-color-key-focus, var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus))); + border-color: var(--spectrum-slider-handle-border-color-key-focus); outline: 0; &::before { - box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--highcontrast-slider-handle-focus-ring-color-key-focus, var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus))); + box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--spectrum-slider-handle-focus-ring-color-key-focus); inline-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-slider-focus-indicator-gap)) * 2); block-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-slider-focus-indicator-gap)) * 2); } @@ -570,7 +570,7 @@ justify-content: center; font-size: var(--mod-font-size-75, var(--spectrum-font-size-75)); line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); - color: var(--highcontrast-slider-label-text-color, var(--mod-slider-tick-label-color, var(--spectrum-slider-tick-label-color))); + color: var(--spectrum-slider-tick-label-color); } &:first-of-type, @@ -627,7 +627,7 @@ /* Applies to the filled-offset variant to keep track the same color for highcontrast mode */ .spectrum-Slider-track { &::before { - background: var(--highcontrast-slider-track-color-static, var(--mod-slider-track-color, var(--spectrum-slider-track-color))); + background: var(--spectrum-slider-track-color); } /* Styles below are applied to the sibling spectrum-Slider-track when filled-offset variant is activated */ @@ -640,25 +640,25 @@ /* All variants other than filled-offset get a new track color for highcontrast mode */ .spectrum-Slider-track:not(:has(~ .spectrum-Slider-fill)) { &::before { - background: var(--highcontrast-slider-track-color, var(--mod-slider-track-color, var(--spectrum-slider-track-color))); + background: var(--spectrum-slider-track-color); } } .spectrum-Slider-labelContainer { - color: var(--highcontrast-slider-label-text-color, var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color))); + color: var(--spectrum-slider-label-text-color); } .spectrum-Slider--filled { .spectrum-Slider-track:first-child { &::before { - background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); + background: var(--spectrum-slider-track-fill-color); } } } .spectrum-Slider-fill { &::before { - background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); + background: var(--spectrum-slider-track-fill-color); border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); } @@ -669,7 +669,7 @@ &.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type), .spectrum-Slider-fill { &::before { - background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-emphasized-track-fill-color, var(--spectrum-slider-emphasized-track-fill-color))); + background: var(--spectrum-slider-emphasized-track-fill-color); } } @@ -680,11 +680,11 @@ .spectrum-Slider-ramp { .spectrum-Slider-ramp-track { - fill: var(--highcontrast-slider-ramp-track-color, var(--mod-slider-ramp-track-color, var(--spectrum-slider-track-color))); + fill: var(--spectrum-slider-track-color); } .spectrum-Slider-ramp-track-fill { - fill: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-ramp-track-fill-color, var(--spectrum-slider-track-fill-color))); + fill: var(--spectrum-slider-track-fill-color); } } @@ -695,7 +695,7 @@ .spectrum-Slider--emphasized { .spectrum-Slider-tick:nth-child(-n + 4) { &::after { - background-color: var(--highcontrast-slider-tick-mark-color-filled-track, var(--mod-slider-emphasized-tick-mark-color, var(--spectrum-slider-emphasized-tick-mark-color))); + background-color: var(--spectrum-slider-emphasized-tick-mark-color); } } } @@ -704,7 +704,7 @@ .spectrum-Slider--offset { &:not(.spectrum-Slider--range, .is-disabled, .spectrum-Slider--emphasized) .spectrum-Slider-tick:nth-child(-n + 4) { &::after { - background-color: var(--highcontrast-slider-tick-mark-color-filled-track, var(--mod-slider-tick-mark-color-filled-track, var(--spectrum-slider-tick-mark-color-filled-track))); + background-color: var(--spectrum-slider-tick-mark-color-filled-track); } } } @@ -714,7 +714,7 @@ .spectrum-Slider-tick:nth-child(4), .spectrum-Slider-tick:nth-child(5) { &::after { - background-color: var(--highcontrast-slider-tick-mark-color-filled-track, var(--mod-slider-tick-mark-color-filled-track, var(--spectrum-slider-tick-mark-color-filled-track))); + background-color: var(--spectrum-slider-tick-mark-color-filled-track); } } } @@ -722,13 +722,13 @@ .spectrum-Slider--range { .spectrum-Slider-track { &:not(:first-of-type, :last-of-type)::before { - background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); + background: var(--spectrum-slider-track-fill-color); border-start-end-radius: 0; border-end-end-radius: 0; } &:first-of-type::before { - background: var(--highcontrast-slider-track-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-color))); + background: var(--spectrum-slider-track-color); } } } @@ -736,7 +736,7 @@ .spectrum-Slider-tick, .spectrum-Slider.is-disabled .spectrum-Slider-tick { &::after { - background-color: var(--highcontrast-slider-tick-mark-color, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color))); + background-color: var(--spectrum-slider-tick-mark-color); } } @@ -748,59 +748,59 @@ } .spectrum-Slider-tickLabel { - color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled))); + color: var(--spectrum-slider-label-text-color-disabled); } .spectrum-Slider-labelContainer { - color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled))); + color: var(--spectrum-slider-label-text-color-disabled); } .spectrum-Slider-handle { - border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled))); - background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-background-color-disabled))); + border-color: var(--spectrum-slider-handle-border-color-disabled); + background: var(--spectrum-slider-handle-background-color-disabled); cursor: default; pointer-events: none; &:hover, &:active { - border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-disabled-border-color, var(--spectrum-slider-handle-border-color-disabled))); - background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled))); + border-color: var(--spectrum-slider-handle-border-color-disabled); + background: var(--spectrum-slider-handle-background-color-disabled); } } .spectrum-Slider-track { &::before { - background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled))); + background: var(--spectrum-slider-track-color-disabled); } } &.spectrum-Slider--filled { .spectrum-Slider-track:first-child::before { - background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled))); + background: var(--spectrum-slider-track-fill-color-disabled); } } .spectrum-Slider-fill { &::before { - background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled))); + background: var(--spectrum-slider-track-fill-color-disabled); } } .spectrum-Slider-ramp { path { - fill: var(--highcontrast-slider-ramp-track-color-disabled, var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled))); + fill: var(--spectrum-slider-ramp-track-color-disabled); } } .spectrum-Slider-tick { &::after { - background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color))); + background-color: var(--spectrum-slider-tick-mark-color); } } &.spectrum-Slider--range { .spectrum-Slider-track:not(:first-of-type, :last-of-type)::before { - background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled))); + background: var(--spectrum-slider-track-color-disabled); } } } @@ -814,59 +814,3 @@ inline-size: calc(var(--spectrum-slider-precision-handle-width) + var(--spectrum-slider-focus-indicator-gap) * 2); transition: none; } - -@media (forced-colors: active) { - .spectrum-Slider { - --highcontrast-slider-track-color: ButtonText; - --highcontrast-slider-track-color-disabled: GrayText; - --highcontrast-slider-track-color-static: ButtonText; - --highcontrast-slider-track-fill-color-disabled: GrayText; - --highcontrast-slider-filled-track-fill-color: Highlight; - - --highcontrast-slider-ramp-track-color: ButtonText; - --highcontrast-slider-ramp-track-color-disabled: GrayText; - --highcontrast-slider-tick-mark-color: ButtonText; - --highcontrast-slider-tick-mark-color-disabled: GrayText; - --highcontrast-slider-tick-mark-color-filled-track: Highlight; - - --highcontrast-slider-handle-border-color: ButtonText; - --highcontrast-slider-handle-border-color-hover: Highlight; - --highcontrast-slider-handle-border-color-down: Highlight; - --highcontrast-slider-handle-border-color-key-focus: Highlight; - --highcontrast-slider-handle-border-color-disabled: GrayText; - --highcontrast-slider-handle-focus-ring-color-key-focus: CanvasText; - --highcontrast-slider-handle-background-color: ButtonFace; - --highcontrast-slider-handle-disabled-background-color: Canvas; - --highcontrast-slider-label-text-color: CanvasText; - --highcontrast-slider-label-text-color-disabled: GrayText; - - .spectrum-Slider-handle.is-focused::before { - forced-color-adjust: none; - } - - &.spectrum-Slider--ramp .spectrum-Slider-handle { - /* forced-color-adjust is required to ensure the contrasting "circle" around the ramp handle (created by box-shadow) is visible. */ - forced-color-adjust: none; - } - - /* Slider control hover and focus colors for high contrast mode */ - /* Filled and range variants are excluded since the filled portion of the track uses Highlight */ - &:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) { - .spectrum-Slider-controls:hover, - .spectrum-Slider-controls:active, - .spectrum-Slider-controls:focus-within, - .spectrum-Slider-controls.is-focused { - --highcontrast-slider-track-color: Highlight; - --highcontrast-slider-handle-border-color: Highlight; - } - } - - /* Slider handle turns transparent in high contrast mode for ramp */ - &.is-disabled { - .spectrum-Slider-ramp + .spectrum-Slider-handle { - fill: ButtonFace; - background-color: ButtonFace; - } - } - } -} diff --git a/components/splitview/dist/metadata.json b/components/splitview/dist/metadata.json index c6925723f7c..38167fca214 100644 --- a/components/splitview/dist/metadata.json +++ b/components/splitview/dist/metadata.json @@ -43,10 +43,6 @@ "--mod-splitview-gripper-border-width-vertical", "--mod-splitview-gripper-height", "--mod-splitview-gripper-width", - "--mod-splitview-handle-background-color", - "--mod-splitview-handle-background-color-down", - "--mod-splitview-handle-background-color-focus", - "--mod-splitview-handle-background-color-hover", "--mod-splitview-handle-width", "--mod-splitview-vertical-gripper-outer-width", "--mod-splitview-vertical-gripper-reset", @@ -82,10 +78,5 @@ "--spectrum-gray-800" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-splitview-handle-background-color", - "--highcontrast-splitview-handle-background-color-down", - "--highcontrast-splitview-handle-background-color-focus", - "--highcontrast-splitview-handle-background-color-hover" - ] + "high-contrast": [] } diff --git a/components/splitview/index.css b/components/splitview/index.css index 990108806d3..bb1b89c7278 100644 --- a/components/splitview/index.css +++ b/components/splitview/index.css @@ -49,7 +49,7 @@ position: absolute; border-style: solid; border-radius: var(--mod-splitview-gripper-border-radius, var(--spectrum-splitview-gripper-border-radius)); - border-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color))); + border-color: var(--spectrum-splitview-handle-background-color); inset-block-start: 50%; transform: translate(0, -50%); @@ -65,7 +65,7 @@ border-inline-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal)); &::before { - background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color))); + background-color: var(--spectrum-splitview-handle-background-color); } } @@ -73,7 +73,7 @@ /* Contains the gripper */ position: relative; - background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color))); + background-color: var(--spectrum-splitview-handle-background-color); /* Prevent text selection while dragging */ user-select: none; @@ -112,28 +112,28 @@ &.is-draggable { &:hover, &.is-hovered { - background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))); + background-color: var(--spectrum-splitview-handle-background-color-hover); .spectrum-SplitView-gripper { - border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))); + border-color: var(--spectrum-splitview-handle-background-color-hover); } .spectrum-SplitView-gripper::before { - background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))); + background-color: var(--spectrum-splitview-handle-background-color-hover); } } &:active, &.is-active { - background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down))); + background-color: var(--spectrum-splitview-handle-background-color-down); .spectrum-SplitView-gripper { - border-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down))); + border-color: var(--spectrum-splitview-handle-background-color-down); } /* Center line of gripper */ .spectrum-SplitView-gripper::before { - background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down))); + background-color: var(--spectrum-splitview-handle-background-color-down); } } @@ -143,15 +143,15 @@ &:focus-visible { outline: none; - background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))); + background-color: var(--spectrum-splitview-handle-background-color-focus); .spectrum-SplitView-gripper { - border-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))); - box-shadow: 0 0 0 1px var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))); + border-color: var(--spectrum-splitview-handle-background-color-focus); + box-shadow: 0 0 0 1px var(--spectrum-splitview-handle-background-color-focus); } .spectrum-SplitView-gripper::before { - background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))); + background-color: var(--spectrum-splitview-handle-background-color-focus); } } } @@ -212,12 +212,3 @@ } } } - -@media (forced-colors: active) { - .spectrum-SplitView { - --highcontrast-splitview-handle-background-color: CanvasText; - --highcontrast-splitview-handle-background-color-hover: CanvasText; - --highcontrast-splitview-handle-background-color-down: CanvasText; - --highcontrast-splitview-handle-background-color-focus: Highlight; - } -} diff --git a/components/statuslight/dist/metadata.json b/components/statuslight/dist/metadata.json index 07f3510d851..0afc9c558e5 100644 --- a/components/statuslight/dist/metadata.json +++ b/components/statuslight/dist/metadata.json @@ -36,8 +36,6 @@ ".spectrum-StatusLight:lang(zh)" ], "modifiers": [ - "--mod-statuslight-border-width", - "--mod-statuslight-content-color-default", "--mod-statuslight-corner-radius", "--mod-statuslight-dot-size", "--mod-statuslight-font-family", @@ -74,8 +72,7 @@ "--mod-statuslight-spacing-bottom-to-label", "--mod-statuslight-spacing-dot-to-label", "--mod-statuslight-spacing-top-to-dot", - "--mod-statuslight-spacing-top-to-label", - "--mod-statuslight-subdued-content-color-default" + "--mod-statuslight-spacing-top-to-label" ], "component": [ "--spectrum-status-light-dot-size-extra-large", @@ -185,8 +182,5 @@ "--spectrum-yellow-visual-color" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-statuslight-content-color-default", - "--highcontrast-statuslight-subdued-content-color-default" - ] + "high-contrast": [] } diff --git a/components/statuslight/index.css b/components/statuslight/index.css index db810c053b9..8cf1bd60842 100644 --- a/components/statuslight/index.css +++ b/components/statuslight/index.css @@ -148,7 +148,7 @@ line-height: var(--mod-statuslight-line-height, var(--spectrum-statuslight-line-height)); - color: var(--highcontrast-statuslight-content-color-default, var(--mod-statuslight-content-color-default, var(--spectrum-statuslight-content-color-default))); + color: var(--spectrum-statuslight-content-color-default); &:lang(ja), &:lang(zh), @@ -173,7 +173,7 @@ /* Semantic Colors */ .spectrum-StatusLight--neutral { - color: var(--highcontrast-statuslight-subdued-content-color-default, var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default))); + color: var(--spectrum-statuslight-subdued-content-color-default); &::before { background-color: var(--mod-statuslight-semantic-neutral-color, var(--spectrum-statuslight-semantic-neutral-color)); @@ -272,17 +272,3 @@ .spectrum-StatusLight--silver::before { background-color: var(--mod-statuslight-nonsemantic-silver-color, var(--spectrum-statuslight-nonsemantic-silver-color)); } - -@media (forced-colors: active) { - .spectrum-StatusLight { - --highcontrast-statuslight-content-color-default: CanvasText; - --highcontrast-statuslight-subdued-content-color-default: CanvasText; - forced-color-adjust: none; - - /* Dot */ - &::before { - forced-color-adjust: none; - border: var(--mod-statuslight-border-width, var(--spectrum-statuslight-border-width)) solid ButtonText; - } - } -} diff --git a/components/steplist/dist/metadata.json b/components/steplist/dist/metadata.json index 27faf429c11..d4d12d10d06 100644 --- a/components/steplist/dist/metadata.json +++ b/components/steplist/dist/metadata.json @@ -44,11 +44,8 @@ ], "modifiers": [ "--mod-steplist-complete-label-text-color", - "--mod-steplist-complete-marker-background-color", "--mod-steplist-complete-segment-border-block-end-color", "--mod-steplist-current-label-text-color", - "--mod-steplist-current-marker-color", - "--mod-steplist-current-marker-color-key-focus", "--mod-steplist-incomplete-label-color", "--mod-steplist-incomplete-marker-border-color", "--mod-steplist-incomplete-segment-border-block-end-color", @@ -89,9 +86,5 @@ "--spectrum-gray-800" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-steplist-complete-marker-background-color", - "--highcontrast-steplist-current-marker-color", - "--highcontrast-steplist-current-marker-color-key-focus" - ] + "high-contrast": [] } diff --git a/components/steplist/index.css b/components/steplist/index.css index 62900591018..a59bf441b20 100644 --- a/components/steplist/index.css +++ b/components/steplist/index.css @@ -76,7 +76,7 @@ &.is-focused, *:focus { .spectrum-Steplist-marker { - background-color: var(--highcontrast-steplist-current-marker-color-key-focus, var(--mod-steplist-current-marker-color-key-focus, var(--spectrum-steplist-current-marker-color-key-focus))); + background-color: var(--spectrum-steplist-current-marker-color-key-focus); } } } @@ -138,7 +138,7 @@ } .spectrum-Steplist-marker { - background-color: var(--highcontrast-steplist-complete-marker-background-color, var(--mod-steplist-complete-marker-background-color, var(--spectrum-steplist-complete-marker-background-color))); + background-color: var(--spectrum-steplist-complete-marker-background-color); border: none; } @@ -163,7 +163,7 @@ .spectrum-Steplist-marker { border: none; - background-color: var(--highcontrast-steplist-current-marker-color, var(--mod-steplist-current-marker-color, var(--spectrum-steplist-current-marker-color))); + background-color: var(--spectrum-steplist-current-marker-color); } } @@ -217,8 +217,8 @@ position: absolute; inset-block-start: 50%; inset-inline-start: 50%; - margin-block-start: calc(-1 * calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) / 2)); - margin-inline-start: calc(-1 * calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) / 2)); + margin-block-start: calc(-1 * var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter) / 2)); + margin-inline-start: calc(-1 * var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter) / 2)); inline-size: var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)); block-size: var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)); @@ -235,11 +235,11 @@ display: block; z-index: 1; position: absolute; - inset-inline-end: calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) - calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) * 1.5)); + inset-inline-end: calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) - (var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) * 1.5)); box-sizing: content-box; - inline-size: calc(calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) * 1.5) - calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) * 2)); - inset-block-end: calc(-1 * calc(var(--mod-steplist-segment-height, var(--spectrum-steplist-segment-height)) / 2)); + inline-size: calc((var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) * 1.5) - (var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) * 2)); + inset-block-end: calc(-1 * (var(--mod-steplist-segment-height, var(--spectrum-steplist-segment-height)) / 2)); /* Default is dashed */ border-block-end-width: var(--mod-steplist-segment-height, var(--spectrum-steplist-segment-height)); @@ -282,7 +282,7 @@ inset-inline-end: 0; margin-inline-start: 0; - margin-inline-end: calc(-1 * calc(var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)) / 2)); + margin-inline-end: calc(-1 * (var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)) / 2)); } .spectrum-Steplist-segment { @@ -293,7 +293,7 @@ .spectrum-Steplist-item:first-child, .spectrum-Steplist-item:last-child { - inline-size: calc(calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) / 2) - calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) * 2.5)); + inline-size: calc((var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) / 2) - (var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) * 2.5)); } /* Single step */ @@ -316,20 +316,6 @@ /* Override last-child bits */ margin-inline-end: 0; - margin-inline-start: calc(-1 * calc(var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)) / 2)); - } -} - -@media (forced-colors: active) { - .spectrum-Steplist { - --highcontrast-steplist-complete-marker-background-color: CanvasText; - --highcontrast-steplist-current-marker-color: Highlight; - --highcontrast-steplist-current-marker-color-key-focus: Highlight; - } - - @supports (color: SelectedItem) { - .spectrum-Steplist { - --highcontrast-steplist-current-marker-color: SelectedItem; - } + margin-inline-start: calc(-1 * (var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)) / 2)); } } diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index a8b7ec49b01..d43aea7a8e2 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -20,17 +20,14 @@ ".spectrum-NumberField.is-focused:not(.is-disabled, .is-readOnly):hover", ".spectrum-NumberField.is-hover:not(.is-disabled)", ".spectrum-NumberField.is-hover:not(.is-disabled):focus", - ".spectrum-NumberField.is-hover:not(.is-disabled):focus-visible", ".spectrum-NumberField.is-hover:not(.is-disabled):focus-within", ".spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly)", ".spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly):focus", ".spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly):focus-visible", ".spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly):focus-within", ".spectrum-NumberField.is-invalid", - ".spectrum-NumberField.is-keyboardFocused.is-hover:not(.is-disabled)", ".spectrum-NumberField.is-keyboardFocused.is-hover:not(.is-disabled, .is-readOnly)", ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled)", - ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled):hover", ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly)", ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly) .spectrum-NumberField-inputs", ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly):hover", @@ -54,7 +51,6 @@ ".spectrum-NumberField:lang(zh)", ".spectrum-NumberField:not(.is-disabled):focus", ".spectrum-NumberField:not(.is-disabled):focus-visible", - ".spectrum-NumberField:not(.is-disabled):focus-visible:hover", ".spectrum-NumberField:not(.is-disabled):focus-within", ".spectrum-NumberField:not(.is-disabled):focus-within:hover", ".spectrum-NumberField:not(.is-disabled):focus:hover", @@ -90,7 +86,6 @@ "--mod-numberfield-border-radius", "--mod-numberfield-border-width", "--mod-numberfield-button-inline-offset", - "--mod-numberfield-focus-indicator-color", "--mod-numberfield-focus-indicator-gap", "--mod-numberfield-focus-indicator-width", "--mod-numberfield-font-family", @@ -268,14 +263,5 @@ "--mod-textfield-text-color-focus", "--mod-textfield-width" ], - "high-contrast": [ - "--highcontrast-numberfield-background-color", - "--highcontrast-numberfield-border-color", - "--highcontrast-numberfield-border-color-focus", - "--highcontrast-numberfield-border-color-focus-hover", - "--highcontrast-numberfield-border-color-hover", - "--highcontrast-numberfield-border-color-keyboard-focus", - "--highcontrast-numberfield-focus-indicator-color", - "--highcontrast-textfield-border-color" - ] + "high-contrast": [] } diff --git a/components/stepper/index.css b/components/stepper/index.css index 90dcf6864f9..c205e2aa9b6 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -16,11 +16,11 @@ /* Border */ --spectrum-numberfield-border-radius: var(--mod-numberfield-border-radius, var(--spectrum-corner-radius-medium-size-medium)); --spectrum-numberfield-border-width: var(--mod-numberfield-border-width, var(--spectrum-border-width-200)); - --spectrum-numberfield-border-color-default: var(--highcontrast-numberfield-border-color, var(--mod-numberfield-border-color, var(--spectrum-gray-300))); - --spectrum-numberfield-border-color-hover: var(--highcontrast-numberfield-border-color-hover, var(--mod-numberfield-border-color-hover, var(--spectrum-gray-400))); - --spectrum-numberfield-border-color-focus: var(--highcontrast-numberfield-border-color-focus, var(--mod-numberfield-border-color-focus, var(--spectrum-gray-800))); - --spectrum-numberfield-border-color-keyboard-focus: var(--highcontrast-numberfield-border-color-keyboard-focus, var(--mod-numberfield-border-color-keyboard-focus, var(--spectrum-gray-800))); - --spectrum-numberfield-border-color-focus-hover: var(--highcontrast-numberfield-border-color-focus-hover, var(--mod-numberfield-border-color-focus-hover, var(--spectrum-gray-900))); + --spectrum-numberfield-border-color-default: var(--spectrum-gray-300); + --spectrum-numberfield-border-color-hover: var(--spectrum-gray-400); + --spectrum-numberfield-border-color-focus: var(--spectrum-gray-800); + --spectrum-numberfield-border-color-keyboard-focus: var(--spectrum-gray-800); + --spectrum-numberfield-border-color-focus-hover: var(--spectrum-gray-900); --spectrum-numberfield-border-color-disabled: var(--mod-numberfield-border-color-disabled, var(--spectrum-disabled-border-color)); /* Invalid border */ @@ -41,7 +41,7 @@ --spectrum-numberfield-text-color-disabled: var(--mod-numberfield-text-color-disabled, var(--spectrum-disabled-content-color)); /* Background */ - --spectrum-numberfield-background-color: var(--highcontrast-numberfield-background-color, var(--mod-numberfield-background-color, var(--spectrum-gray-25))); + --spectrum-numberfield-background-color: var(--spectrum-gray-25); /* --spectrum-numberfield-background-color-disabled: var(--mod-numberfield-background-color-disabled, var(--spectrum-disabled-background-color)); */ --spectrum-numberfield-background-color-disabled: var(--mod-numberfield-background-color-disabled, var(--spectrum-gray-25)); @@ -56,7 +56,7 @@ /* Focus indicator */ --spectrum-numberfield-focus-indicator-width: var(--mod-numberfield-focus-indicator-width, var(--spectrum-focus-indicator-thickness)); --spectrum-numberfield-focus-indicator-gap: var(--mod-numberfield-focus-indicator-gap, var(--spectrum-focus-indicator-gap)); - --spectrum-numberfield-focus-indicator-color: var(--highcontrast-numberfield-focus-indicator-color, var(--mod-numberfield-focus-indicator-color, var(--spectrum-focus-indicator-color))); + --spectrum-numberfield-focus-indicator-color: var(--spectrum-focus-indicator-color); /* Dimensions */ --spectrum-numberfield-block-size: var(--mod-numberfield-block-size, var(--spectrum-component-height-100)); @@ -166,7 +166,7 @@ &:not(.is-disabled, .is-readOnly).is-hover, &:not(.is-disabled, .is-readOnly):hover { - --mod-numberfield-border-color: var(--highcontrast-numberfield-border-color-hover, var(--mod-numberfield-border-color-hover, var(--spectrum-numberfield-border-color-hover))); + --mod-numberfield-border-color: var(--spectrum-numberfield-border-color-hover); } &.is-invalid { @@ -180,22 +180,22 @@ &:not(.is-disabled, .is-readOnly).is-focused, &:not(.is-disabled, .is-readOnly):focus, &:not(.is-disabled, .is-readOnly):focus-within { - --mod-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus, var(--mod-numberfield-border-color-focus, var(--spectrum-numberfield-border-color-focus))); + --mod-numberfield-border-color: var(--spectrum-numberfield-border-color-focus); &.is-hover, &:hover { - --mod-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus-hover, var(--mod-numberfield-border-color-focus-hover, var(--spectrum-numberfield-border-color-focus-hover))); + --mod-numberfield-border-color: var(--spectrum-numberfield-border-color-focus-hover); } } &:not(.is-disabled, .is-readOnly).is-keyboardFocused, &:not(.is-disabled, .is-readOnly):focus-visible, &:not(.is-disabled, .is-readOnly):focus-within { - --mod-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus, var(--mod-numberfield-border-color-keyboard-focus, var(--spectrum-numberfield-border-color-keyboard-focus))); + --mod-numberfield-border-color: var(--spectrum-numberfield-border-color-keyboard-focus); &.is-hover, &:hover { - --mod-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus-hover, var(--mod-numberfield-border-color-focus-hover, var(--spectrum-numberfield-border-color-focus-hover))); + --mod-numberfield-border-color: var(--spectrum-numberfield-border-color-focus-hover); } } @@ -389,63 +389,3 @@ position: absolute; inset-inline-end: calc(var(--mod-numberfield-button-inline-offset, var(--spectrum-numberfield-button-inline-offset, 0px))); } - -/* --- High contrast settings --- */ -@media (forced-colors: active) { - .spectrum-NumberField { - --highcontrast-numberfield-border-color: CanvasText; - --highcontrast-numberfield-background-color: Canvas; - --highcontrast-numberfield-border-color-hover: Highlight; - --highcontrast-numberfield-border-color-focus: Highlight; - --highcontrast-numberfield-border-color-focus-hover: Highlight; - --highcontrast-numberfield-border-color-keyboard-focus: CanvasText; - --highcontrast-numberfield-focus-indicator-color: Highlight; - - &.is-invalid { - --highcontrast-numberfield-border-color: Highlight; - --highcontrast-numberfield-border-color-hover: Highlight; - --highcontrast-numberfield-border-color-focus: Highlight; - --highcontrast-numberfield-border-color-focus-hover: Highlight; - --highcontrast-numberfield-border-color-keyboard-focus: Highlight; - } - - &.is-disabled { - --highcontrast-numberfield-border-color: GrayText; - } - - &:not(.is-disabled) { - &.is-hover, - &:hover { - --highcontrast-numberfield-border-color: var(--highcontrast-numberfield-border-color-hover); - } - - &.is-focused, - &:focus, - &:focus-within { - --highcontrast-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus); - - &.is-hover, - &:hover { - --highcontrast-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus-hover); - } - } - - &.is-keyboardFocused, - &:focus-visible, - &:focus-within { - --highcontrast-numberfield-border-color: var(--highcontrast-numberfield-border-color-keyboard-focus); - - &.is-hover, - &:hover { - --highcontrast-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus-hover); - } - } - } - } - - /* @passthrough start */ - .spectrum-NumberField-textfield { - --highcontrast-textfield-border-color: var(--highcontrast-numberfield-border-color); - } - /* @passthrough end */ -} diff --git a/components/swatch/dist/metadata.json b/components/swatch/dist/metadata.json index 5b40e74c96e..0952c64d9dd 100644 --- a/components/swatch/dist/metadata.json +++ b/components/swatch/dist/metadata.json @@ -3,7 +3,6 @@ "selectors": [ ".spectrum-Swatch", ".spectrum-Swatch .spectrum-Swatch-disabledIcon", - ".spectrum-Swatch .spectrum-Swatch-fill", ".spectrum-Swatch--rectangle", ".spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill", ".spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before", @@ -36,7 +35,6 @@ ".spectrum-Swatch.is-addSwatch:active", ".spectrum-Swatch.is-addSwatch:focus-visible", ".spectrum-Swatch.is-addSwatch:hover", - ".spectrum-Swatch.is-disabled", ".spectrum-Swatch.is-disabled .spectrum-Swatch-disabledIcon", ".spectrum-Swatch.is-image .spectrum-Swatch-fill:before", ".spectrum-Swatch.is-keyboardFocused", @@ -52,7 +50,6 @@ ".spectrum-Swatch.is-selected:before", ".spectrum-Swatch:before", ".spectrum-Swatch:focus-visible", - ".spectrum-Swatch[disabled]", ".spectrum-Swatch[disabled] .spectrum-Swatch-disabledIcon" ], "modifiers": [ @@ -63,23 +60,17 @@ "--mod-animation-duration-100", "--mod-corner-radius-full", "--mod-mixed-button-background", - "--mod-swatch-border", "--mod-swatch-border-color", - "--mod-swatch-border-color-selected", "--mod-swatch-border-opacity", "--mod-swatch-border-radius", "--mod-swatch-border-thickness", "--mod-swatch-border-thickness-selected", - "--mod-swatch-disabled-icon-color", "--mod-swatch-disabled-icon-size", "--mod-swatch-focus-indicator-color", "--mod-swatch-focus-indicator-gap", "--mod-swatch-focus-indicator-thickness", "--mod-swatch-icon-border-color", - "--mod-swatch-icon-color", - "--mod-swatch-inner-border-color-selected", "--mod-swatch-size", - "--mod-swatch-slash-icon-color", "--mod-swatch-slash-thickness" ], "component": [ @@ -140,13 +131,5 @@ "--spectrum-workflow-icon-size-75" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-swatch-background-color-selected", - "--highcontrast-swatch-border-color", - "--highcontrast-swatch-border-color-selected", - "--highcontrast-swatch-disabled-icon-color", - "--highcontrast-swatch-fill-foreground-color", - "--highcontrast-swatch-focus-indicator-color", - "--highcontrast-swatch-icon-color" - ] + "high-contrast": [] } diff --git a/components/swatch/index.css b/components/swatch/index.css index f5f261a3fa0..4b7bc75e63f 100644 --- a/components/swatch/index.css +++ b/components/swatch/index.css @@ -24,11 +24,11 @@ --spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-medium)); /* Color */ - --spectrum-swatch-border-color-selected: var(--highcontrast-swatch-border-color-selected, var(--mod-swatch-border-color-selected, var(--spectrum-gray-1000))); - --spectrum-swatch-inner-border-color-selected: var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-gray-25))); - --spectrum-swatch-disabled-icon-color: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-white))); - --spectrum-swatch-icon-color: var(--highcontrast-swatch-icon-color, var(--mod-swatch-icon-color, var(--spectrum-neutral-content-color-default))); - --spectrum-swatch-slash-icon-color: var(--highcontrast-swatch-fill-foreground-color, var(--mod-swatch-slash-icon-color, var(--spectrum-negative-visual-color))); + --spectrum-swatch-border-color-selected: var(--spectrum-gray-1000); + --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25); + --spectrum-swatch-disabled-icon-color: var(--spectrum-white); + --spectrum-swatch-icon-color: var(--spectrum-neutral-content-color-default); + --spectrum-swatch-slash-icon-color: var(--spectrum-negative-visual-color); --spectrum-mixed-button-background: var(--spectrum-gray-25); --spectrum-add-button-background: var(--spectrum-gray-100); --spectrum-add-button-background-hover: var(--spectrum-gray-200); @@ -39,7 +39,7 @@ --spectrum-swatch-border: rgb(from var(--mod-swatch-border-color, var(--spectrum-swatch-border-color)) r g b / var(--mod-swatch-border-opacity, var(--spectrum-swatch-border-opacity))); /* Focus ring */ - --spectrum-swatch-focus-indicator-color: var(--highcontrast-swatch-focus-indicator-color, var(--mod-swatch-focus-indicator-color, var(--spectrum-focus-indicator-color))); + --spectrum-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); --spectrum-swatch-focus-indicator-thickness: var(--mod-swatch-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); --spectrum-swatch-focus-indicator-gap: var(--mod-swatch-focus-indicator-gap, var(--spectrum-focus-indicator-gap)); } @@ -261,7 +261,7 @@ background: var(--spectrum-picked-color, transparent); /* Swatch border */ - box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--highcontrast-swatch-border-color, var(--mod-swatch-border, var(--spectrum-swatch-border))); + box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--spectrum-swatch-border); border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius)); } } @@ -341,46 +341,3 @@ width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, height var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; } - -/* Windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Swatch { - --mod-mixed-button-background: ButtonFace; - - --mod-add-button-background: ButtonFace; - --mod-add-button-background-hover: ButtonText; - --mod-add-button-background-down: ButtonText; - - --highcontrast-swatch-disabled-icon-color: GrayText; - --highcontrast-swatch-focus-indicator-color: ButtonText; - --highcontrast-swatch-background-color-selected: ButtonFace; - --highcontrast-swatch-border-color-selected: Highlight; - --highcontrast-swatch-border-color: ButtonText; - --highcontrast-swatch-fill-foreground-color: ButtonText; - - .spectrum-Swatch-fill { - forced-color-adjust: none; - } - - &.is-mixedValue { - --highcontrast-swatch-icon-color: ButtonFace; - } - - &.is-addSwatch { - &:hover, - &:active { - --highcontrast-swatch-icon-color: ButtonFace; - } - - &.is-keyboardFocused, - &:focus-visible { - --highcontrast-swatch-icon-color: ButtonFace; - } - } - - &[disabled], - &.is-disabled { - --highcontrast-swatch-border-color: GrayText; - } - } -} diff --git a/components/switch/dist/metadata.json b/components/switch/dist/metadata.json index 03beda3b924..cc060bdef86 100644 --- a/components/switch/dist/metadata.json +++ b/components/switch/dist/metadata.json @@ -67,47 +67,19 @@ ], "modifiers": [ "--mod-switch-animation-duration-switch", - "--mod-switch-background-color", - "--mod-switch-background-color-disabled", - "--mod-switch-background-color-selected-default", - "--mod-switch-background-color-selected-disabled", - "--mod-switch-background-color-selected-down", - "--mod-switch-background-color-selected-focus", - "--mod-switch-background-color-selected-hover", - "--mod-switch-border-color-default", - "--mod-switch-border-color-disabled", - "--mod-switch-border-color-down", - "--mod-switch-border-color-focus", - "--mod-switch-border-color-hover", - "--mod-switch-border-color-selected-default", - "--mod-switch-border-color-selected-down", - "--mod-switch-border-color-selected-focus", - "--mod-switch-border-color-selected-hover", "--mod-switch-border-radius", "--mod-switch-border-width", "--mod-switch-cjk-line-height", "--mod-switch-control-height", "--mod-switch-control-label-spacing", "--mod-switch-control-width", - "--mod-switch-focus-indicator-color", "--mod-switch-focus-indicator-gap", "--mod-switch-focus-indicator-thickness", "--mod-switch-font-size", - "--mod-switch-handle-background-color-default", - "--mod-switch-handle-background-color-disabled", - "--mod-switch-handle-background-color-down", - "--mod-switch-handle-background-color-focus", - "--mod-switch-handle-background-color-hover", "--mod-switch-handle-background-color-selected", - "--mod-switch-handle-background-color-selected-disabled", "--mod-switch-handle-selected-size", "--mod-switch-handle-size", "--mod-switch-height", - "--mod-switch-label-color-default", - "--mod-switch-label-color-disabled", - "--mod-switch-label-color-down", - "--mod-switch-label-color-focus", - "--mod-switch-label-color-hover", "--mod-switch-line-height", "--mod-switch-spacing-bottom-to-label", "--mod-switch-spacing-top-to-control", @@ -230,35 +202,5 @@ "--spectrum-text-to-control-75" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-switch-background-color", - "--highcontrast-switch-background-color-disabled", - "--highcontrast-switch-background-color-selected-default", - "--highcontrast-switch-background-color-selected-disabled", - "--highcontrast-switch-background-color-selected-down", - "--highcontrast-switch-background-color-selected-focus", - "--highcontrast-switch-background-color-selected-hover", - "--highcontrast-switch-border-color-default", - "--highcontrast-switch-border-color-disabled", - "--highcontrast-switch-border-color-down", - "--highcontrast-switch-border-color-focus", - "--highcontrast-switch-border-color-hover", - "--highcontrast-switch-border-color-selected-default", - "--highcontrast-switch-border-color-selected-down", - "--highcontrast-switch-border-color-selected-focus", - "--highcontrast-switch-border-color-selected-hover", - "--highcontrast-switch-focus-indicator-color", - "--highcontrast-switch-handle-background-color-default", - "--highcontrast-switch-handle-background-color-disabled", - "--highcontrast-switch-handle-background-color-down", - "--highcontrast-switch-handle-background-color-focus", - "--highcontrast-switch-handle-background-color-hover", - "--highcontrast-switch-handle-background-color-selected", - "--highcontrast-switch-handle-background-color-selected-disabled", - "--highcontrast-switch-label-color-default", - "--highcontrast-switch-label-color-disabled", - "--highcontrast-switch-label-color-down", - "--highcontrast-switch-label-color-focus", - "--highcontrast-switch-label-color-hover" - ] + "high-contrast": [] } diff --git a/components/switch/index.css b/components/switch/index.css index f5d230cb767..38e6fea9f83 100644 --- a/components/switch/index.css +++ b/components/switch/index.css @@ -167,7 +167,7 @@ } .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-default, var(--mod-switch-label-color-default, var(--spectrum-switch-label-color-default))); + color: var(--spectrum-switch-label-color-default); margin-inline: var(--mod-switch-control-label-spacing, var(--spectrum-switch-control-label-spacing)); margin-block-start: var(--mod-switch-spacing-top-to-label, var(--spectrum-switch-spacing-top-to-label)); margin-block-end: var(--mod-switch-spacing-bottom-to-label, var(--spectrum-switch-spacing-bottom-to-label)); @@ -182,15 +182,15 @@ } .spectrum-Switch:hover ~ & { - color: var(--highcontrast-switch-label-color-hover, var(--mod-switch-label-color-hover, var(--spectrum-switch-label-color-hover))); + color: var(--spectrum-switch-label-color-hover); } .spectrum-Switch:active ~ & { - color: var(--highcontrast-switch-label-color-down, var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down))); + color: var(--spectrum-switch-label-color-down); } .spectrum-Switch-input:focus-visible ~ & { - color: var(--highcontrast-switch-label-color-focus, var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus))); + color: var(--spectrum-switch-label-color-focus); } } @@ -219,45 +219,45 @@ inset-inline-start: 0; inset-inline-end: 0; - background-color: var(--highcontrast-switch-background-color, var(--mod-switch-background-color, var(--spectrum-switch-background-color))); + background-color: var(--spectrum-switch-background-color); border-radius: var(--mod-switch-border-radius, var(--spectrum-switch-border-radius)); border-width: var(--mod-switch-border-width, var(--spectrum-switch-border-width)); - border-color: var(--highcontrast-switch-border-color-default, var(--mod-switch-border-color-default, var(--spectrum-switch-border-color-default))); + border-color: var(--spectrum-switch-border-color-default); border-style: solid; .spectrum-Switch:hover & { - border-color: var(--highcontrast-switch-border-color-hover, var(--mod-switch-border-color-hover, var(--spectrum-switch-border-color-hover))); + border-color: var(--spectrum-switch-border-color-hover); } .spectrum-Switch.spectrum-Switch:active &, .spectrum-Switch--active { - border-color: var(--highcontrast-switch-border-color-down, var(--mod-switch-border-color-down, var(--spectrum-switch-border-color-down))); + border-color: var(--spectrum-switch-border-color-down); } .spectrum-Switch-input:focus-visible + & { - border-color: var(--highcontrast-switch-border-color-focus, var(--mod-switch-border-color-focus, var(--spectrum-switch-border-color-focus))); + border-color: var(--spectrum-switch-border-color-focus); } .spectrum-Switch-input:checked + & { - background-color: var(--highcontrast-switch-background-color-selected-default, var(--mod-switch-background-color-selected-default, var(--spectrum-switch-background-color-selected-default))); - border-color: var(--highcontrast-switch-border-color-selected-default, var(--mod-switch-border-color-selected-default, var(--spectrum-switch-border-color-selected-default))); + background-color: var(--spectrum-switch-background-color-selected-default); + border-color: var(--spectrum-switch-border-color-selected-default); .spectrum-Switch:hover & { - background-color: var(--highcontrast-switch-background-color-selected-hover, var(--mod-switch-background-color-selected-hover, var(--spectrum-switch-background-color-selected-hover))); - border-color: var(--highcontrast-switch-border-color-selected-hover, var(--mod-switch-border-color-selected-hover, var(--spectrum-switch-border-color-selected-hover))); + background-color: var(--spectrum-switch-background-color-selected-hover); + border-color: var(--spectrum-switch-border-color-selected-hover); } /* Added specifity to ensure active state takes precedence over hover media queries */ .spectrum-Switch.spectrum-Switch:active &, .spectrum-Switch--active & { - background-color: var(--highcontrast-switch-background-color-selected-down, var(--mod-switch-background-color-selected-down, var(--spectrum-switch-background-color-selected-down))); - border-color: var(--highcontrast-switch-border-color-selected-down, var(--mod-switch-border-color-selected-down, var(--spectrum-switch-border-color-selected-down))); + background-color: var(--spectrum-switch-background-color-selected-down); + border-color: var(--spectrum-switch-border-color-selected-down); } } .spectrum-Switch-input:checked:focus-visible + & { - background-color: var(--highcontrast-switch-background-color-selected-focus, var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus))); - border-color: var(--highcontrast-switch-border-color-selected-focus, var(--mod-switch-border-color-selected-focus, var(--spectrum-switch-border-color-selected-focus))); + background-color: var(--spectrum-switch-background-color-selected-focus); + border-color: var(--spectrum-switch-border-color-selected-focus); } /* :before is used for the handle of the switch */ @@ -279,24 +279,24 @@ inset-block-start: calc((var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-handle-size, var(--spectrum-switch-handle-size))) * 0.25); inset-inline-start: calc((var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-handle-size, var(--spectrum-switch-handle-size))) * 0.25); - background-color: var(--highcontrast-switch-handle-background-color-default, var(--mod-switch-handle-background-color-default, var(--spectrum-switch-handle-background-color-default))); + background-color: var(--spectrum-switch-handle-background-color-default); border-radius: var(--mod-switch-border-radius, var(--spectrum-switch-border-radius)); .spectrum-Switch:hover & { - background-color: var(--highcontrast-switch-handle-background-color-hover, var(--mod-switch-handle-background-color-hover, var(--spectrum-switch-handle-background-color-hover))); + background-color: var(--spectrum-switch-handle-background-color-hover); } .spectrum-Switch.spectrum-Switch:active & { - background-color: var(--highcontrast-switch-handle-background-color-down, var(--mod-switch-handle-background-color-down, var(--spectrum-switch-handle-background-color-down))); + background-color: var(--spectrum-switch-handle-background-color-down); } .spectrum-Switch-input:focus-visible + & { - background-color: var(--highcontrast-switch-handle-background-color-focus, var(--mod-switch-handle-background-color-focus, var(--spectrum-switch-handle-background-color-focus))); + background-color: var(--spectrum-switch-handle-background-color-focus); } /* Handle size changes when selected/checked */ .spectrum-Switch-input:checked + & { - background-color: var(--highcontrast-switch-handle-background-color-selected, var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected))); + background-color: var(--spectrum-switch-handle-background-color-selected); inline-size: var(--mod-switch-handle-selected-size, var(--spectrum-switch-handle-selected-size)); block-size: var(--mod-switch-handle-selected-size, var(--spectrum-switch-handle-selected-size)); @@ -311,7 +311,7 @@ } .spectrum-Switch:hover & { - background-color: var(--highcontrast-switch-handle-background-color-selected, var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected))); + background-color: var(--spectrum-switch-handle-background-color-selected); } .spectrum-Switch.spectrum-Switch:active &, @@ -355,7 +355,7 @@ border var(--spectrum-switch-animation-duration-switch) ease-in-out; .spectrum-Switch-input:focus-visible + & { - outline: var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)) solid var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color))); + outline: var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)) solid var(--spectrum-switch-focus-indicator-color); outline-offset: calc(var(--mod-switch-focus-indicator-gap, var(--spectrum-switch-focus-indicator-gap)) + var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness))); } } @@ -367,71 +367,27 @@ .spectrum-Switch:hover .spectrum-Switch-input:disabled, .spectrum-Switch:hover .spectrum-Switch-input[disabled] { & + .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color-disabled, var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled))); - border-color: var(--highcontrast-switch-border-color-disabled, var(--mod-switch-border-color-disabled, var(--spectrum-switch-border-color-disabled))); + background-color: var(--spectrum-switch-background-color-disabled); + border-color: var(--spectrum-switch-border-color-disabled); &::before { - background-color: var(--highcontrast-switch-handle-background-color-disabled, var(--mod-switch-handle-background-color-disabled, var(--spectrum-switch-handle-background-color-disabled))); + background-color: var(--spectrum-switch-handle-background-color-disabled); } } & ~ .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); + color: var(--spectrum-switch-label-color-disabled); } &:checked + .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color-selected-disabled, var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled))); + background-color: var(--spectrum-switch-background-color-selected-disabled); &::before { - background-color: var(--highcontrast-switch-handle-background-color-selected-disabled, var(--mod-switch-handle-background-color-selected-disabled, var(--spectrum-switch-handle-background-color-selected-disabled))); + background-color: var(--spectrum-switch-handle-background-color-selected-disabled); } } & ~ .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); - } -} - -/* high contrast mode */ -@media (forced-colors: active) { - .spectrum-Switch { - --highcontrast-switch-label-color-default: ButtonText; - --highcontrast-switch-label-color-hover: ButtonText; - --highcontrast-switch-label-color-down: ButtonText; - --highcontrast-switch-label-color-focus: ButtonText; - --highcontrast-switch-label-color-disabled: GrayText; - - --highcontrast-switch-background-color: transparent; - - --highcontrast-switch-border-color-default: ButtonText; - --highcontrast-switch-border-color-hover: Highlight; - --highcontrast-switch-border-color-down: ButtonText; - --highcontrast-switch-border-color-focus: ButtonText; - --highcontrast-switch-border-color-disabled: GrayText; - - --highcontrast-switch-border-color-selected-default: Highlight; - --highcontrast-switch-border-color-selected-hover: Highlight; - --highcontrast-switch-border-color-selected-down: Highlight; - --highcontrast-switch-border-color-selected-focus: Highlight; - - --highcontrast-switch-handle-background-color-default: ButtonText; - --highcontrast-switch-handle-background-color-hover: Highlight; - --highcontrast-switch-handle-background-color-down: ButtonText; - --highcontrast-switch-handle-background-color-focus: ButtonText; - --highcontrast-switch-handle-background-color-disabled: GrayText; - - --highcontrast-switch-handle-background-color-selected: HighlightText; - --highcontrast-switch-handle-background-color-selected-disabled: ButtonFace; - - --highcontrast-switch-background-color-disabled: ButtonFace; - - --highcontrast-switch-background-color-selected-default: Highlight; - --highcontrast-switch-background-color-selected-hover: Highlight; - --highcontrast-switch-background-color-selected-down: Highlight; - --highcontrast-switch-background-color-selected-focus: Highlight; - --highcontrast-switch-background-color-selected-disabled: GrayText; - - --highcontrast-switch-focus-indicator-color: ButtonText; - forced-color-adjust: none; + color: var(--spectrum-switch-label-color-disabled); } } diff --git a/components/table/dist/metadata.json b/components/table/dist/metadata.json index cf66742117b..b08dc51befc 100644 --- a/components/table/dist/metadata.json +++ b/components/table/dist/metadata.json @@ -2,7 +2,6 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Table", - ".spectrum-Table .spectrum-Table-row--summary", ".spectrum-Table--compact", ".spectrum-Table--emphasized", ".spectrum-Table--quiet", @@ -16,7 +15,6 @@ ".spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell", ".spectrum-Table-body.is-drop-target", ".spectrum-Table-body.is-drop-target .spectrum-Table-row", - ".spectrum-Table-body.is-drop-target .spectrum-Table-row .spectrum-Table-checkbox .spectrum-Checkbox-box:before", ".spectrum-Table-body.is-drop-target:after", ".spectrum-Table-cell", ".spectrum-Table-cell--alignEnd", @@ -117,10 +115,8 @@ ".spectrum-Table-row--summary:hover", ".spectrum-Table-row.is-drop-target", ".spectrum-Table-row.is-drop-target .spectrum-Table-cell", - ".spectrum-Table-row.is-drop-target .spectrum-Table-checkbox .spectrum-Checkbox-box:before", ".spectrum-Table-row.is-selected", ".spectrum-Table-row.is-selected .spectrum-Table-cell", - ".spectrum-Table-row.is-selected .spectrum-Table-checkbox .spectrum-Checkbox-box:before", ".spectrum-Table-row.is-selected:active", ".spectrum-Table-row.is-selected:focus-visible", ".spectrum-Table-row.is-selected:hover", @@ -131,18 +127,14 @@ ".spectrum-Table-row:focus", ".spectrum-Table-row:focus .spectrum-Table-cell:first-child", ".spectrum-Table-row:focus .spectrum-Table-cell:first-child:before", - ".spectrum-Table-row:focus .spectrum-Table-checkbox .spectrum-Checkbox-box:before", ".spectrum-Table-row:focus-visible", ".spectrum-Table-row:focus-visible .spectrum-Table-cell:first-child", ".spectrum-Table-row:focus-visible .spectrum-Table-cell:first-child:before", - ".spectrum-Table-row:focus-visible .spectrum-Table-checkbox .spectrum-Checkbox-box:before", ".spectrum-Table-row:focus-visible:hover", ".spectrum-Table-row:focus-visible:last-child .spectrum-Table-cell:first-child:before", ".spectrum-Table-row:focus:hover", ".spectrum-Table-row:focus:last-child .spectrum-Table-cell:first-child:before", ".spectrum-Table-row:hover", - ".spectrum-Table-row:hover .spectrum-Table-cell:first-child:before", - ".spectrum-Table-row:hover .spectrum-Table-checkbox .spectrum-Checkbox-box:before", ".spectrum-Table-row:last-child", ".spectrum-Table-row:last-child .spectrum-Table-cell:first-child", ".spectrum-Table-row:last-child .spectrum-Table-cell:last-child", @@ -182,10 +174,6 @@ "--mod-table-cursor-section-header", "--mod-table-default-vertical-align", "--mod-table-disclosure-icon-size", - "--mod-table-divider-color", - "--mod-table-drop-zone-background-color", - "--mod-table-drop-zone-outline-color", - "--mod-table-focus-indicator-color", "--mod-table-focus-indicator-thickness", "--mod-table-header-background-color", "--mod-table-header-background-color-scrollable", @@ -193,10 +181,6 @@ "--mod-table-header-font-size", "--mod-table-header-font-style", "--mod-table-header-font-weight", - "--mod-table-header-icons-color-active", - "--mod-table-header-icons-color-default", - "--mod-table-header-icons-color-hover", - "--mod-table-header-icons-color-key-focus", "--mod-table-header-line-height", "--mod-table-header-row-bottom-to-text", "--mod-table-header-row-checkbox-block-spacing", @@ -204,21 +188,12 @@ "--mod-table-header-text-color", "--mod-table-header-text-transform", "--mod-table-header-vertical-align", - "--mod-table-icon-color-active", - "--mod-table-icon-color-default", - "--mod-table-icon-color-focus", - "--mod-table-icon-color-focus-hover", - "--mod-table-icon-color-hover", - "--mod-table-icon-color-key-focus", "--mod-table-min-header-height", "--mod-table-min-row-height", "--mod-table-min-row-height-compact", "--mod-table-min-row-height-spacious", "--mod-table-outer-border-inline-width", "--mod-table-outer-border-inline-width-quiet", - "--mod-table-row-background-color", - "--mod-table-row-background-color-active", - "--mod-table-row-background-color-hover", "--mod-table-row-bottom-to-text", "--mod-table-row-checkbox-block-spacing", "--mod-table-row-checkbox-block-spacing-compact", @@ -228,11 +203,7 @@ "--mod-table-row-font-style", "--mod-table-row-font-weight", "--mod-table-row-line-height", - "--mod-table-row-text-color", - "--mod-table-row-text-color-active", - "--mod-table-row-text-color-hover", "--mod-table-row-top-to-text", - "--mod-table-section-header-background-color", "--mod-table-section-header-block-end-spacing", "--mod-table-section-header-block-start-spacing", "--mod-table-section-header-font-family", @@ -242,12 +213,6 @@ "--mod-table-section-header-inline-start-spacing", "--mod-table-section-header-line-height", "--mod-table-section-header-min-height", - "--mod-table-section-header-text-color", - "--mod-table-selected-row-background-color", - "--mod-table-selected-row-background-color-focus", - "--mod-table-selected-row-background-color-non-emphasized", - "--mod-table-selected-row-background-color-non-emphasized-focus", - "--mod-table-summary-row-background-color", "--mod-table-summary-row-bottom-to-text", "--mod-table-summary-row-font-family", "--mod-table-summary-row-font-size", @@ -255,12 +220,10 @@ "--mod-table-summary-row-font-weight", "--mod-table-summary-row-line-height", "--mod-table-summary-row-min-height", - "--mod-table-summary-row-text-color", "--mod-table-summary-row-top-to-text", "--mod-table-thumbnail-size", "--mod-table-thumbnail-size-compact", "--mod-table-thumbnail-size-spacious", - "--mod-table-transition-duration", "--mod-table-visual-to-text" ], "component": [ @@ -430,26 +393,5 @@ "--mod-icon-color", "--mod-thumbnail-size" ], - "high-contrast": [ - "--highcontrast-table-border-color", - "--highcontrast-table-cell-focus-indicator-color", - "--highcontrast-table-divider-color", - "--highcontrast-table-focus-indicator-color", - "--highcontrast-table-header-text-color", - "--highcontrast-table-header-text-color-hover", - "--highcontrast-table-icon-color", - "--highcontrast-table-icon-color-focus", - "--highcontrast-table-row-background-color", - "--highcontrast-table-row-background-color-hover", - "--highcontrast-table-row-text-color", - "--highcontrast-table-row-text-color-focus", - "--highcontrast-table-row-text-color-hover", - "--highcontrast-table-section-header-background-color", - "--highcontrast-table-section-header-text-color", - "--highcontrast-table-selected-row-background-color", - "--highcontrast-table-selected-row-background-color-focus", - "--highcontrast-table-selected-row-text-color", - "--highcontrast-table-selected-row-text-color-focus", - "--highcontrast-table-transition-duration" - ] + "high-contrast": [] } diff --git a/components/table/index.css b/components/table/index.css index 9f358a08f3f..56936fe0eff 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -29,8 +29,8 @@ --spectrum-table-selected-row-background-color-active: rgb(var(--spectrum-table-selected-row-background-color-rgb), var(--spectrum-table-selected-row-background-opacity-hover)); --spectrum-table-selected-row-background-color-non-emphasized-focus: rgb(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover)); - --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-row-background-color, var(--spectrum-table-row-background-color))); - --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color-non-emphasized, var(--spectrum-table-selected-row-background-color-non-emphasized))); + --spectrum-table-cell-background-color: var(--spectrum-table-row-background-color); + --spectrum-table-selected-cell-background-color: var(--spectrum-table-selected-row-background-color-non-emphasized); --spectrum-table-drop-zone-background-color: rgb(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity)); --spectrum-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); @@ -57,7 +57,7 @@ /* Individual focused table cells still have a border-radius */ --spectrum-table-focused-cell-border-radius: var(--spectrum-corner-radius-small-default); - --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-non-emphasized-focus, var(--spectrum-table-selected-row-background-color-non-emphasized-focus))); + --spectrum-table-selected-cell-background-color-focus: var(--spectrum-table-selected-row-background-color-non-emphasized-focus); /* Visual (avatar, icons, thumbnails) */ --spectrum-table-icon-color-default: var(--spectrum-neutral-content-color-default); @@ -65,7 +65,7 @@ --spectrum-table-icon-color-active: var(--spectrum-neutral-content-color-down); --spectrum-table-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-100); - --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-default, var(--spectrum-table-icon-color-default))); + --spectrum-table-icon-color: var(--spectrum-table-icon-color-default); --spectrum-table-header-icons-color-default: var(--spectrum-neutral-subdued-content-color-default); --spectrum-table-header-icons-color-hover: var(--spectrum-neutral-subdued-content-color-hover); @@ -184,8 +184,8 @@ .spectrum-Table--emphasized, .spectrum-Table-row .is-emphasized { - --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color, var(--spectrum-table-selected-row-background-color))); - --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-focus, var(--spectrum-table-selected-row-background-color-hover))); + --spectrum-table-selected-cell-background-color: var(--spectrum-table-selected-row-background-color); + --spectrum-table-selected-cell-background-color-focus: var(--spectrum-table-selected-row-background-color-hover); } .spectrum-Table--quiet { @@ -200,7 +200,6 @@ .spectrum-Table-row { &:focus-visible, &:focus { - --highcontrast-table-icon-color: var(--highcontrast-table-row-text-color-focus); --spectrum-table-row-text-color: var(--spectrum-table-row-text-color-key-focus); &:hover { @@ -209,31 +208,23 @@ } &:hover { - --highcontrast-table-row-text-color: var(--highcontrast-table-row-text-color-hover); - --highcontrast-table-icon-color: var(--highcontrast-table-row-text-color-hover); - --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color-hover, var(--mod-table-row-background-color-hover, var(--spectrum-table-row-background-color-hover))); - --spectrum-table-row-text-color: var(--highcontrast-table-row-text-color-hover, var(--mod-table-row-text-color-hover, var(--spectrum-table-row-text-color-hover))); + --spectrum-table-cell-background-color: var(--spectrum-table-row-background-color-hover); + --spectrum-table-row-text-color: var(--spectrum-table-row-text-color-hover); } &:active { - --highcontrast-table-row-text-color: var(--highcontrast-table-row-text-color-hover); - --highcontrast-table-icon-color: var(--highcontrast-table-row-text-color-hover); - --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color-hover, var(--mod-table-row-background-color-active, var(--spectrum-table-row-background-color-active))); - --spectrum-table-row-text-color: var(--highcontrast-table-row-text-color-hover, var(--mod-table-row-text-color-active, var(--spectrum-table-row-text-color-active))); + --spectrum-table-cell-background-color: var(--spectrum-table-row-background-color-active); + --spectrum-table-row-text-color: var(--spectrum-table-row-text-color-active); } &.is-selected { - --highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color); - --highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color); - --spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--spectrum-table-selected-cell-background-color)); + --spectrum-table-cell-background-color: var(--spectrum-table-selected-cell-background-color); --spectrum-table-divider-color: var(--spectrum-table-focus-indicator-color); --spectrum-table-border-color: var(--spectrum-table-focus-indicator-color); &:hover, &:focus-visible { - --highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color-focus); - --highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color-focus); - --spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color-focus, var(--spectrum-table-selected-cell-background-color-focus)); + --spectrum-table-cell-background-color: var(--spectrum-table-selected-cell-background-color-focus); } &:active { @@ -243,9 +234,7 @@ &.is-drop-target, .spectrum-Table-body.is-drop-target & { - --highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color); - --highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color); - --spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-drop-zone-background-color, var(--spectrum-table-drop-zone-background-color))); + --spectrum-table-cell-background-color: var(--spectrum-table-drop-zone-background-color); } } @@ -253,20 +242,20 @@ &.is-sortable, &.spectrum-Table-hasMenuButton, .spectrum-Table-sortButton { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-header-icons-color-default, var(--spectrum-table-header-icons-color-default))); + --spectrum-table-icon-color: var(--spectrum-table-header-icons-color-default); &:hover { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-header-icons-color-hover, var(--spectrum-table-header-icons-color-hover))); + --spectrum-table-icon-color: var(--spectrum-table-header-icons-color-hover); } &:active { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-header-icons-color-active, var(--spectrum-table-header-icons-color-active))); + --spectrum-table-icon-color: var(--spectrum-table-header-icons-color-active); } &:focus, &:focus-visible, &.is-keyboardFocused { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-header-icons-color-key-focus, var(--spectrum-table-header-icons-color-key-focus))); + --spectrum-table-icon-color: var(--spectrum-table-header-icons-color-key-focus); } } @@ -298,19 +287,18 @@ } .spectrum-Table-row--summary { - --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-summary-row-background-color, var(--spectrum-table-summary-row-background-color))); + --spectrum-table-cell-background-color: var(--spectrum-table-summary-row-background-color); &:hover { - --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-summary-row-background-color, var(--spectrum-table-summary-row-background-color))); + --spectrum-table-cell-background-color: var(--spectrum-table-summary-row-background-color); } } .spectrum-Table-row--sectionHeader { - --spectrum-table-cell-background-color: var(--highcontrast-table-section-header-background-color, var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color))); + --spectrum-table-cell-background-color: var(--spectrum-table-section-header-background-color); &:hover { - --highcontrast-table-row-text-color: var(--highcontrast-table-section-header-text-color); - --spectrum-table-cell-background-color: var(--highcontrast-table-section-header-background-color, var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color))); + --spectrum-table-cell-background-color: var(--spectrum-table-section-header-background-color); } } @@ -344,7 +332,7 @@ color: var(--mod-table-header-text-color, var(--spectrum-table-header-text-color)); background-color: var(--mod-table-header-background-color, var(--spectrum-table-header-background-color)); - border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--spectrum-table-border-color); cursor: var(--mod-table-cursor-header-default, initial); outline: 0; @@ -361,12 +349,12 @@ &:first-child .spectrum-Table-headCell:first-child { border-start-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - border-inline-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + border-inline-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--spectrum-table-border-color); } &:last-child .spectrum-Table-headCell:last-child { border-start-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - border-inline-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + border-inline-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--spectrum-table-border-color); } /* Checkbox cell in header row */ @@ -410,7 +398,7 @@ /* Ensure the button text color is the same as the header text color, particularly in high contrast mode. */ .spectrum-Table-sortButton { - color: var(--highcontrast-table-header-text-color, var(--mod-table-header-text-color, var(--spectrum-table-header-text-color))); + color: var(--spectrum-table-header-text-color); /* Avoids flash of a different text color from the button in WHCM. */ forced-color-adjust: none; @@ -419,7 +407,7 @@ &:focus, &:focus-visible, &:active { - color: var(--highcontrast-table-header-text-color-hover, var(--mod-table-header-text-color, var(--spectrum-table-header-text-color))); + color: var(--spectrum-table-header-text-color); } } @@ -431,7 +419,7 @@ .spectrum-Table-sortButton .spectrum-Icon { color: var(--spectrum-table-icon-color); - transition: transform var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out; + transition: transform var(--spectrum-table-transition-duration) ease-in-out; } } @@ -440,13 +428,13 @@ .spectrum-Table-sortButton { min-inline-size: 100%; justify-content: flex-start; - color: var(--highcontrast-table-header-text-color, var(--mod-table-header-text-color, var(--spectrum-table-header-text-color))); + color: var(--spectrum-table-header-text-color); /* Avoids flash of a different text color from the button in WHCM. */ forced-color-adjust: none; &:hover { - color: var(--highcontrast-table-header-text-color-hover, var(--mod-table-header-text-color, var(--spectrum-table-header-text-color))); + color: var(--spectrum-table-header-text-color); } /* Focus indicator- brings the focus indicator above the cell borders and matches the table cell dimensions. */ @@ -458,7 +446,7 @@ box-shadow: none; /* Add focus indicator border to match the other table cell focus indicators. */ - border: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) solid var(--highcontrast-table-cell-focus-indicator-color, var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)))); + border: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) solid var(--spectrum-table-focus-indicator-color); } .spectrum-Button-label { @@ -483,7 +471,7 @@ } & .spectrum-Icon { - transition: transform var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out; + transition: transform var(--spectrum-table-transition-duration) ease-in-out; color: var(--spectrum-table-icon-color); } } @@ -522,7 +510,7 @@ inset: 0; border-end-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); border-end-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - border: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) solid var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color))); + border: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) solid var(--spectrum-table-drop-zone-outline-color); pointer-events: none; z-index: 1; } @@ -536,7 +524,7 @@ instead applied to the individual cells around the outside, while using border-collapse: separate. */ /* Row divider lines */ - border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color))); + border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--spectrum-table-divider-color); /* Cells within table body */ box-sizing: border-box; @@ -546,7 +534,7 @@ font-weight: var(--mod-table-row-font-weight, var(--spectrum-table-row-font-weight)); line-height: var(--mod-table-row-line-height, var(--spectrum-table-row-line-height)); vertical-align: var(--mod-table-default-vertical-align, var(--spectrum-table-default-vertical-align)); - color: var(--highcontrast-table-row-text-color, var(--mod-table-row-text-color, var(--spectrum-table-row-text-color))); + color: var(--spectrum-table-row-text-color); background-color: var(--spectrum-table-cell-background-color); /* block-size functions as min-block-size when using display table-cell. */ @@ -576,7 +564,7 @@ position: absolute; inset: calc(-1 * var(--mod-table-border-width, var(--spectrum-table-border-width))); border-radius: calc(var(--mod-table-border-radius, var(--spectrum-table-focused-cell-border-radius)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); - border: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) solid var(--highcontrast-table-cell-focus-indicator-color, var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)))); + border: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) solid var(--spectrum-table-focus-indicator-color); pointer-events: none; } } @@ -584,26 +572,26 @@ /* Cells that display a column divider (vertical border). */ .spectrum-Table-cell--divider { - border-inline-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color))); + border-inline-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--spectrum-table-divider-color); } /********* ROWS *********/ /* Outside border (the table's border) */ .spectrum-Table-body .spectrum-Table-row { &:first-child .spectrum-Table-cell { - border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color))); + border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--spectrum-table-divider-color); } &:last-child .spectrum-Table-cell { - border-block-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + border-block-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--spectrum-table-border-color); } .spectrum-Table-cell:first-child { - border-inline-start: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + border-inline-start: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) solid var(--spectrum-table-border-color); } .spectrum-Table-cell:last-child { - border-inline-end: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + border-inline-end: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) solid var(--spectrum-table-border-color); } } @@ -611,7 +599,7 @@ .spectrum-Table-row { /* Rows within table body */ position: relative; - transition: background-color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out; + transition: background-color var(--spectrum-table-transition-duration) ease-in-out; cursor: var(--mod-table-cursor-row-default, pointer); border-block-start: none; @@ -656,7 +644,7 @@ /* Adding the bottom border only to the last selected row in a sequence achieves 1px border between adjacent selected rows */ &.is-selected:not(:has(+ .is-selected)) .spectrum-Table-cell { - border-block-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color))); + border-block-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--spectrum-table-focus-indicator-color); } /* Row focus indicator */ @@ -693,17 +681,17 @@ &.is-drop-target { /* Make sure negative offset outline is not covered by borders. */ - --mod-table-border-color: var(--highcontrast-table-focus-indicator-color, transparent); + --mod-table-border-color: transparent; border-start-start-radius: 0; border-start-end-radius: 0; outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)); outline-style: solid; - outline-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color))); + outline-color: var(--spectrum-table-drop-zone-outline-color); outline-offset: calc(-1 * var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness))); .spectrum-Table-cell { - border-block-start-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color))); + border-block-start-color: var(--spectrum-table-drop-zone-outline-color); } } } @@ -721,7 +709,7 @@ font-family: var(--mod-table-summary-row-font-family, var(--spectrum-table-row-font-family)); font-style: var(--mod-table-summary-row-font-style, var(--spectrum-table-row-font-style)); line-height: var(--mod-table-summary-row-line-height, var(--spectrum-table-row-line-height)); - color: var(--highcontrast-table-row-text-color, var(--mod-table-summary-row-text-color, var(--spectrum-table-row-text-color))); + color: var(--spectrum-table-row-text-color); } } @@ -744,7 +732,7 @@ font-family: var(--mod-table-section-header-font-family, var(--spectrum-table-row-font-family)); font-style: var(--mod-table-section-header-font-style, var(--spectrum-table-row-font-style)); line-height: var(--mod-table-section-header-line-height, var(--spectrum-table-row-line-height)); - color: var(--highcontrast-table-section-header-text-color, var(--mod-table-section-header-text-color, var(--spectrum-table-row-text-color))); + color: var(--spectrum-table-row-text-color); } } @@ -787,8 +775,8 @@ overflow: auto; border-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - border-block: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); - border-inline: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + border-block: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--spectrum-table-border-color); + border-inline: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) solid var(--spectrum-table-border-color); /* Make sure shift-tab reverse keyboard navigation keeps the whole cell in focus. --mod-table-current-header-height should be dynamically updated with JS to match the table header height. */ @@ -802,7 +790,7 @@ /* Remove borders that have been replaced by borders on scroller wrapper or pseudo elements. */ .spectrum-Table-headRow:first-child .spectrum-Table-headCell { - border-block-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + border-block-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--spectrum-table-border-color); border-block-start: 0; border-inline: 0; border-radius: 0; @@ -895,7 +883,7 @@ } .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-default, var(--spectrum-table-icon-color-default))); + --spectrum-table-icon-color: var(--spectrum-table-icon-color-default); block-size: var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)); flex-basis: var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)); @@ -919,28 +907,28 @@ } &:hover { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-hover, var(--spectrum-table-icon-color-hover))); + --spectrum-table-icon-color: var(--spectrum-table-icon-color-hover); } &:active { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-active, var(--spectrum-table-icon-color-active))); + --spectrum-table-icon-color: var(--spectrum-table-icon-color-active); } &:focus { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-focus, var(--spectrum-table-icon-color-key-focus))); + --spectrum-table-icon-color: var(--spectrum-table-icon-color-key-focus); &:hover { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-focus-hover, var(--spectrum-table-icon-color-key-focus))); + --spectrum-table-icon-color: var(--spectrum-table-icon-color-key-focus); } } &:focus-visible, &.is-keyboardFocused { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus))); + --spectrum-table-icon-color: var(--spectrum-table-icon-color-key-focus); outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)); outline-style: solid; - outline-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color))); + outline-color: var(--spectrum-table-focus-indicator-color); outline-offset: calc((-1 * var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness))) - 2px); } } @@ -972,84 +960,3 @@ block-size: auto; } } - -/********* HIGH CONTRAST *********/ -@media (forced-colors: active) { - .spectrum-Table { - --highcontrast-table-row-background-color: Canvas; - --highcontrast-table-row-text-color: CanvasText; - --highcontrast-table-divider-color: CanvasText; - --highcontrast-table-border-color: CanvasText; - --highcontrast-table-icon-color: CanvasText; - --highcontrast-table-icon-color-focus: Highlight; - - --highcontrast-table-selected-row-background-color: Highlight; - --highcontrast-table-selected-row-text-color: HighlightText; - - /* Button text colors */ - --highcontrast-table-header-text-color: CanvasText; - --highcontrast-table-header-text-color-hover: Highlight; - - @supports (color: SelectedItem) { - --highcontrast-table-selected-row-background-color: SelectedItem; - --highcontrast-table-selected-row-text-color: SelectedItemText; - } - - --highcontrast-table-selected-row-background-color-focus: Highlight; - --highcontrast-table-selected-row-text-color-focus: HighlightText; - --highcontrast-table-row-background-color-hover: Highlight; - --highcontrast-table-row-text-color-hover: HighlightText; - --highcontrast-table-row-text-color-focus: HighlightText; - - --highcontrast-table-section-header-text-color: Canvas; - --highcontrast-table-section-header-background-color: CanvasText; - - --highcontrast-table-focus-indicator-color: Highlight; - --highcontrast-table-transition-duration: 0; - - & .spectrum-Table-row--summary { - --highcontrast-table-row-text-color: CanvasText; - } - } - - .spectrum-Table-cell { - /* Removes unstylable readability backplate. */ - forced-color-adjust: none; - - /* Make sure border colors are visible in high contrast mode */ - border: var(--spectrum-table-border-width) solid Highlight; - - &:focus-visible, - &:focus { - &::after { - border-color: Highlight; - } - } - } - - .spectrum-Table-row { - &:hover, - &:focus-visible, - &:focus { - .spectrum-Table-checkbox .spectrum-Checkbox-box::before { - outline: var(--highcontrast-table-row-text-color-hover) 1px solid; - } - - /* corresponds to the row focus indicator with a ::before pseudo element */ - .spectrum-Table-cell:first-child::before { - background-color: Highlight; - } - } - } - - .spectrum-Table-row.is-selected, - .spectrum-Table-row.is-drop-target, - .spectrum-Table-body.is-drop-target .spectrum-Table-row { - /* Ensure negative offset outline contrasts on top of SelectedItem background. */ - --highcontrast-table-cell-focus-indicator-color: var(--highcontrast-table-selected-row-text-color); - - .spectrum-Table-checkbox .spectrum-Checkbox-box::before { - outline: var(--highcontrast-table-selected-row-text-color) 1px solid; - } - } -} diff --git a/components/tabs/dist/metadata.json b/components/tabs/dist/metadata.json index 879d8bd7440..c221cd30a67 100644 --- a/components/tabs/dist/metadata.json +++ b/components/tabs/dist/metadata.json @@ -3,10 +3,6 @@ "selectors": [ ".spectrum-Tabs", ".spectrum-Tabs .spectrum-Picker-button", - ".spectrum-Tabs .spectrum-Tabs-item.is-selected", - ".spectrum-Tabs .spectrum-Tabs-item.is-selected .spectrum-Icon", - ".spectrum-Tabs .spectrum-Tabs-item.is-selected.is-disabled .spectrum-Icon", - ".spectrum-Tabs .spectrum-Tabs-item.is-selected.is-disabled .spectrum-Tabs-selectionIndicator", ".spectrum-Tabs--horizontal", ".spectrum-Tabs--horizontal .spectrum-Tabs-item", ".spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator", @@ -43,15 +39,7 @@ "--mod-tabs-animation-ease", "--mod-tabs-bottom-to-text", "--mod-tabs-bottom-to-text-compact", - "--mod-tabs-color", - "--mod-tabs-color-disabled", - "--mod-tabs-color-hover", - "--mod-tabs-color-key-focus", - "--mod-tabs-color-selected", - "--mod-tabs-color-selected-hover", - "--mod-tabs-color-selected-key-focus", "--mod-tabs-focus-indicator-border-radius", - "--mod-tabs-focus-indicator-color", "--mod-tabs-focus-indicator-gap", "--mod-tabs-focus-indicator-width", "--mod-tabs-font-family", @@ -69,8 +57,6 @@ "--mod-tabs-label-to-selection-indicator-compact", "--mod-tabs-line-height", "--mod-tabs-selection-indicator-border-radius", - "--mod-tabs-selection-indicator-color", - "--mod-tabs-selection-indicator-color-disabled", "--mod-tabs-selection-indicator-thickness", "--mod-tabs-side-to-icon", "--mod-tabs-side-to-icon-compact", @@ -158,17 +144,5 @@ "--spectrum-workflow-icon-size-100" ], "passthroughs": ["--mod-picker-block-size"], - "high-contrast": [ - "--highcontrast-tabs-background-color-selected", - "--highcontrast-tabs-color", - "--highcontrast-tabs-color-disabled", - "--highcontrast-tabs-color-hover", - "--highcontrast-tabs-color-key-focus", - "--highcontrast-tabs-color-selected", - "--highcontrast-tabs-color-selected-hover", - "--highcontrast-tabs-color-selected-key-focus", - "--highcontrast-tabs-focus-indicator-color", - "--highcontrast-tabs-selection-indicator-color", - "--highcontrast-tabs-selection-indicator-color-disabled" - ] + "high-contrast": [] } diff --git a/components/tabs/index.css b/components/tabs/index.css index 0b86ec831b5..8dadacde6a5 100644 --- a/components/tabs/index.css +++ b/components/tabs/index.css @@ -26,14 +26,14 @@ --spectrum-tabs-item-border-radius: var(--mod-tabs-item-border-radius, var(--spectrum-corner-radius-0)); - --spectrum-tabs-color: var(--highcontrast-tabs-color, var(--mod-tabs-color, var(--spectrum-neutral-subdued-content-color-default))); - --spectrum-tabs-color-hover: var(--highcontrast-tabs-color-hover, var(--mod-tabs-color-hover, var(--spectrum-neutral-subdued-content-color-hover))); - --spectrum-tabs-color-key-focus: var(--highcontrast-tabs-color-key-focus, var(--mod-tabs-color-key-focus, var(--spectrum-neutral-subdued-content-color-key-focus))); - --spectrum-tabs-color-selected: var(--highcontrast-tabs-color-selected, var(--mod-tabs-color-selected, var(--spectrum-neutral-content-color-default))); - --spectrum-tabs-color-selected-hover: var(--highcontrast-tabs-color-selected-hover, var(--mod-tabs-color-selected-hover, var(--spectrum-neutral-content-color-hover))); - --spectrum-tabs-color-selected-key-focus: var(--highcontrast-tabs-color-selected-key-focus, var(--mod-tabs-color-selected-key-focus, var(--spectrum-neutral-content-color-key-focus))); - --spectrum-tabs-color-disabled: var(--highcontrast-tabs-color-disabled, var(--mod-tabs-color-disabled, var(--spectrum-disabled-content-color))); - --spectrum-tabs-selection-indicator-color-disabled: var(--highcontrast-tabs-selection-indicator-color-disabled, var(--mod-tabs-selection-indicator-color-disabled, var(--spectrum-disabled-border-color))); + --spectrum-tabs-color: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-tabs-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --spectrum-tabs-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --spectrum-tabs-color-selected: var(--spectrum-neutral-content-color-default); + --spectrum-tabs-color-selected-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-tabs-color-selected-key-focus: var(--spectrum-neutral-content-color-key-focus); + --spectrum-tabs-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-tabs-selection-indicator-color-disabled: var(--spectrum-disabled-border-color); --spectrum-tabs-font-weight: var(--mod-tabs-font-weight, var(--spectrum-regular-font-weight)); --spectrum-tabs-font-family: var(--mod-tabs-font-family, var(--spectrum-sans-font-family-stack)); @@ -44,9 +44,9 @@ --spectrum-tabs-focus-indicator-width: var(--mod-tabs-focus-indicator-width, var(--spectrum-focus-indicator-thickness)); --spectrum-tabs-focus-indicator-border-radius: var(--mod-tabs-focus-indicator-border-radius, var(--spectrum-corner-radius-100)); /* component rounding + focus indicator thickness + focus indicator gap = 0 + 2px + 2px = 4px */ --spectrum-tabs-focus-indicator-gap: var(--mod-tabs-focus-indicator-gap, var(--spectrum-focus-indicator-gap)); - --spectrum-tabs-focus-indicator-color: var(--highcontrast-tabs-focus-indicator-color, var(--mod-tabs-focus-indicator-color, var(--spectrum-focus-indicator-color))); + --spectrum-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-tabs-selection-indicator-color: var(--highcontrast-tabs-selection-indicator-color, var(--mod-tabs-selection-indicator-color, var(--spectrum-neutral-subdued-content-color-down))); + --spectrum-tabs-selection-indicator-color: var(--spectrum-neutral-subdued-content-color-down); --spectrum-tabs-selection-indicator-thickness: var(--mod-tabs-selection-indicator-thickness, var(--spectrum-tab-selection-indicator-thickness)); --spectrum-tabs-selection-indicator-border-radius: var(--mod-tabs-selection-indicator-border-radius, var(--spectrum-corner-radius-full)); @@ -265,40 +265,3 @@ inset-inline: auto calc(-1 * var(--spectrum-tabs-start-to-edge)); } } - -@media (forced-colors: active) { - .spectrum-Tabs { - --highcontrast-tabs-background-color-selected: SelectedItem; - --highcontrast-tabs-color-selected: SelectedItemText; - --highcontrast-tabs-color-selected-key-focus: SelectedItemText; - --highcontrast-tabs-color-selected-hover: SelectedItemText; - --highcontrast-tabs-selection-indicator-color: CanvasText; - --highcontrast-tabs-focus-indicator-color: Highlight; - --highcontrast-tabs-color: ButtonText; - --highcontrast-tabs-color-hover: ButtonText; - --highcontrast-tabs-color-key-focus: ButtonText; - --highcontrast-tabs-color-disabled: GrayText; - --highcontrast-tabs-selection-indicator-color-disabled: GrayText; - - /* Prevents black box behind text on SelectedItem background */ - forced-color-adjust: none; - - .spectrum-Tabs-item.is-selected { - background-color: var(--highcontrast-tabs-background-color-selected); - - .spectrum-Icon { - color: var(--highcontrast-tabs-color-selected); - } - - &.is-disabled { - .spectrum-Icon { - color: var(--highcontrast-tabs-color-disabled); - } - - .spectrum-Tabs-selectionIndicator { - background-color: var(--highcontrast-tabs-selection-indicator-color-disabled); - } - } - } - } -} diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json index e4503014031..4f840096be8 100644 --- a/components/tag/dist/metadata.json +++ b/components/tag/dist/metadata.json @@ -12,9 +12,7 @@ ".spectrum-Tag.is-disabled", ".spectrum-Tag.is-disabled .spectrum-Avatar", ".spectrum-Tag.is-disabled .spectrum-Thumbnail", - ".spectrum-Tag.is-selected", ".spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)", - ".spectrum-Tag.spectrum-Tag--emphasized", ".spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)", ".spectrum-Tag.spectrum-Tag.is-disabled", ".spectrum-Tag:lang(ja)", @@ -30,39 +28,11 @@ "--mod-tag-avatar-size", "--mod-tag-avatar-spacing-block-end", "--mod-tag-avatar-spacing-block-start", - "--mod-tag-background-color", - "--mod-tag-background-color-active", - "--mod-tag-background-color-disabled", - "--mod-tag-background-color-emphasized", - "--mod-tag-background-color-emphasized-active", - "--mod-tag-background-color-emphasized-focus", - "--mod-tag-background-color-emphasized-hover", - "--mod-tag-background-color-focus", - "--mod-tag-background-color-hover", - "--mod-tag-background-color-selected", - "--mod-tag-background-color-selected-active", - "--mod-tag-background-color-selected-focus", - "--mod-tag-background-color-selected-hover", - "--mod-tag-border-color", - "--mod-tag-border-color-active", - "--mod-tag-border-color-disabled", - "--mod-tag-border-color-emphasized", - "--mod-tag-border-color-focus", - "--mod-tag-border-color-hover", - "--mod-tag-border-color-selected", "--mod-tag-border-width", "--mod-tag-clear-button-size", "--mod-tag-clear-button-spacing-block", - "--mod-tag-content-color", - "--mod-tag-content-color-active", - "--mod-tag-content-color-disabled", - "--mod-tag-content-color-emphasized", - "--mod-tag-content-color-focus", - "--mod-tag-content-color-hover", - "--mod-tag-content-color-selected", "--mod-tag-corner-radius", "--mod-tag-edge-to-clear-icon", - "--mod-tag-focus-ring-color", "--mod-tag-focus-ring-gap", "--mod-tag-focus-ring-thickness", "--mod-tag-font-size", @@ -229,34 +199,5 @@ "--mod-thumbnail-opacity-disabled", "--mod-thumbnail-size" ], - "high-contrast": [ - "--highcontrast-tag-background-color", - "--highcontrast-tag-background-color-active", - "--highcontrast-tag-background-color-disabled", - "--highcontrast-tag-background-color-emphasized", - "--highcontrast-tag-background-color-emphasized-active", - "--highcontrast-tag-background-color-emphasized-focus", - "--highcontrast-tag-background-color-emphasized-hover", - "--highcontrast-tag-background-color-focus", - "--highcontrast-tag-background-color-hover", - "--highcontrast-tag-background-color-selected", - "--highcontrast-tag-background-color-selected-active", - "--highcontrast-tag-background-color-selected-focus", - "--highcontrast-tag-background-color-selected-hover", - "--highcontrast-tag-border-color", - "--highcontrast-tag-border-color-active", - "--highcontrast-tag-border-color-disabled", - "--highcontrast-tag-border-color-emphasized", - "--highcontrast-tag-border-color-focus", - "--highcontrast-tag-border-color-hover", - "--highcontrast-tag-border-color-selected", - "--highcontrast-tag-content-color", - "--highcontrast-tag-content-color-active", - "--highcontrast-tag-content-color-disabled", - "--highcontrast-tag-content-color-emphasized", - "--highcontrast-tag-content-color-focus", - "--highcontrast-tag-content-color-hover", - "--highcontrast-tag-content-color-selected", - "--highcontrast-tag-focus-ring-color" - ] + "high-contrast": [] } diff --git a/components/tag/index.css b/components/tag/index.css index 48f1e3237dc..c363fc0d473 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -16,27 +16,27 @@ /* border color - transparent unless modified or high contrast mode */ --spectrum-tag-border-width: var(--spectrum-border-width-100); - --spectrum-tag-border-color: var(--highcontrast-tag-border-color, var(--mod-tag-border-color, transparent)); - --spectrum-tag-border-color-hover: var(--highcontrast-tag-border-color-hover, var(--mod-tag-border-color-hover, transparent)); - --spectrum-tag-border-color-active: var(--highcontrast-tag-border-color-active, var(--mod-tag-border-color-active, transparent)); - --spectrum-tag-border-color-focus: var(--highcontrast-tag-border-color-focus, var(--mod-tag-border-color-focus, transparent)); + --spectrum-tag-border-color: transparent; + --spectrum-tag-border-color-hover: transparent; + --spectrum-tag-border-color-active: transparent; + --spectrum-tag-border-color-focus: transparent; /* background color */ - --spectrum-tag-background-color: var(--highcontrast-tag-background-color, var(--mod-tag-background-color, var(--spectrum-gray-100))); - --spectrum-tag-background-color-hover: var(--highcontrast-tag-background-color-hover, var(--mod-tag-background-color-hover, var(--spectrum-gray-200))); - --spectrum-tag-background-color-active: var(--highcontrast-tag-background-color-active, var(--mod-tag-background-color-active, var(--spectrum-gray-200))); - --spectrum-tag-background-color-focus: var(--highcontrast-tag-background-color-focus, var(--mod-tag-background-color-focus, var(--spectrum-gray-200))); + --spectrum-tag-background-color: var(--spectrum-gray-100); + --spectrum-tag-background-color-hover: var(--spectrum-gray-200); + --spectrum-tag-background-color-active: var(--spectrum-gray-200); + --spectrum-tag-background-color-focus: var(--spectrum-gray-200); /* content color */ - --spectrum-tag-content-color: var(--highcontrast-tag-content-color, var(--mod-tag-content-color, var(--spectrum-neutral-content-color-default))); - --spectrum-tag-content-color-hover: var(--highcontrast-tag-content-color-hover, var(--mod-tag-content-color-hover, var(--spectrum-neutral-content-color-hover))); - --spectrum-tag-content-color-active: var(--highcontrast-tag-content-color-active, var(--mod-tag-content-color-active, var(--spectrum-neutral-content-color-down))); - --spectrum-tag-content-color-focus: var(--highcontrast-tag-content-color-focus, var(--mod-tag-content-color-focus, var(--spectrum-neutral-content-color-key-focus))); + --spectrum-tag-content-color: var(--spectrum-neutral-content-color-default); + --spectrum-tag-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-tag-content-color-active: var(--spectrum-neutral-content-color-down); + --spectrum-tag-content-color-focus: var(--spectrum-neutral-content-color-key-focus); /* focus ring */ --spectrum-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-tag-focus-ring-color: var(--highcontrast-tag-focus-ring-color, var(--mod-tag-focus-ring-color, var(--spectrum-focus-indicator-color))); + --spectrum-tag-focus-ring-color: var(--spectrum-focus-indicator-color); /* label */ --spectrum-tag-label-line-height: var(--spectrum-line-height-100); @@ -97,45 +97,45 @@ } &.is-selected:not(.is-disabled, .is-readOnly) { - --spectrum-tag-border-color: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, transparent)); - --spectrum-tag-background-color: var(--highcontrast-tag-background-color-selected, var(--mod-tag-background-color-selected, var(--spectrum-neutral-background-color-default))); - --spectrum-tag-content-color: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-gray-25))); + --spectrum-tag-border-color: transparent; + --spectrum-tag-background-color: var(--spectrum-neutral-background-color-default); + --spectrum-tag-content-color: var(--spectrum-gray-25); - --spectrum-tag-border-color-hover: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, transparent)); - --spectrum-tag-background-color-hover: var(--highcontrast-tag-background-color-selected-hover, var(--mod-tag-background-color-selected-hover, var(--spectrum-neutral-background-color-hover))); - --spectrum-tag-content-color-hover: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-gray-25))); + --spectrum-tag-border-color-hover: transparent; + --spectrum-tag-background-color-hover: var(--spectrum-neutral-background-color-hover); + --spectrum-tag-content-color-hover: var(--spectrum-gray-25); - --spectrum-tag-border-color-active: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, transparent)); - --spectrum-tag-background-color-active: var(--highcontrast-tag-background-color-selected-active, var(--mod-tag-background-color-selected-active, var(--spectrum-neutral-background-color-down))); - --spectrum-tag-content-color-active: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-gray-25))); + --spectrum-tag-border-color-active: transparent; + --spectrum-tag-background-color-active: var(--spectrum-neutral-background-color-down); + --spectrum-tag-content-color-active: var(--spectrum-gray-25); - --spectrum-tag-border-color-focus: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, transparent)); - --spectrum-tag-background-color-focus: var(--highcontrast-tag-background-color-selected-focus, var(--mod-tag-background-color-selected-focus, var(--spectrum-neutral-background-color-key-focus))); - --spectrum-tag-content-color-focus: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-gray-25))); + --spectrum-tag-border-color-focus: transparent; + --spectrum-tag-background-color-focus: var(--spectrum-neutral-background-color-key-focus); + --spectrum-tag-content-color-focus: var(--spectrum-gray-25); } &.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly) { - --spectrum-tag-border-color: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent)); - --spectrum-tag-background-color: var(--highcontrast-tag-background-color-emphasized, var(--mod-tag-background-color-emphasized, var(--spectrum-accent-background-color-default))); - --spectrum-tag-content-color: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white))); + --spectrum-tag-border-color: transparent; + --spectrum-tag-background-color: var(--spectrum-accent-background-color-default); + --spectrum-tag-content-color: var(--spectrum-white); - --spectrum-tag-border-color-hover: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent)); - --spectrum-tag-background-color-hover: var(--highcontrast-tag-background-color-emphasized-hover, var(--mod-tag-background-color-emphasized-hover, var(--spectrum-accent-background-color-hover))); - --spectrum-tag-content-color-hover: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white))); + --spectrum-tag-border-color-hover: transparent; + --spectrum-tag-background-color-hover: var(--spectrum-accent-background-color-hover); + --spectrum-tag-content-color-hover: var(--spectrum-white); - --spectrum-tag-border-color-active: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent)); - --spectrum-tag-background-color-active: var(--highcontrast-tag-background-color-emphasized-active, var(--mod-tag-background-color-emphasized-active, var(--spectrum-accent-background-color-down))); - --spectrum-tag-content-color-active: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white))); + --spectrum-tag-border-color-active: transparent; + --spectrum-tag-background-color-active: var(--spectrum-accent-background-color-down); + --spectrum-tag-content-color-active: var(--spectrum-white); - --spectrum-tag-border-color-focus: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent)); - --spectrum-tag-background-color-focus: var(--highcontrast-tag-background-color-emphasized-focus, var(--mod-tag-background-color-emphasized-focus, var(--spectrum-accent-background-color-key-focus))); - --spectrum-tag-content-color-focus: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white))); + --spectrum-tag-border-color-focus: transparent; + --spectrum-tag-background-color-focus: var(--spectrum-accent-background-color-key-focus); + --spectrum-tag-content-color-focus: var(--spectrum-white); } &.spectrum-Tag.is-disabled { - --spectrum-tag-border-color: var(--highcontrast-tag-border-color-disabled, var(--mod-tag-border-color-disabled, transparent)); - --spectrum-tag-background-color: var(--highcontrast-tag-background-color-disabled, var(--mod-tag-background-color-disabled, var(--spectrum-disabled-background-color))); - --spectrum-tag-content-color: var(--highcontrast-tag-content-color-disabled, var(--mod-tag-content-color-disabled, var(--spectrum-disabled-content-color))); + --spectrum-tag-border-color: transparent; + --spectrum-tag-background-color: var(--spectrum-disabled-background-color); + --spectrum-tag-content-color: var(--spectrum-disabled-content-color); } } @@ -334,54 +334,3 @@ opacity: var(--mod-thumbnail-opacity-disabled, var(--spectrum-thumbnail-opacity-disabled)); } } - -/* windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Tag { - --highcontrast-tag-border-color: ButtonText; - --highcontrast-tag-border-color-hover: ButtonText; - --highcontrast-tag-border-color-active: ButtonText; - --highcontrast-tag-border-color-focus: ButtonText; - - --highcontrast-tag-background-color: ButtonFace; - --highcontrast-tag-background-color-hover: ButtonFace; - --highcontrast-tag-background-color-active: ButtonFace; - --highcontrast-tag-background-color-focus: ButtonFace; - - --highcontrast-tag-content-color: ButtonText; - --highcontrast-tag-content-color-hover: ButtonText; - --highcontrast-tag-content-color-active: ButtonText; - --highcontrast-tag-content-color-focus: ButtonText; - - --highcontrast-tag-focus-ring-color: Highlight; - forced-color-adjust: none; - - &.is-selected { - --highcontrast-tag-border-color-selected: Highlight; - - --highcontrast-tag-background-color-selected: Highlight; - --highcontrast-tag-background-color-selected-hover: Highlight; - --highcontrast-tag-background-color-selected-active: Highlight; - --highcontrast-tag-background-color-selected-focus: Highlight; - - --highcontrast-tag-content-color-selected: HighlightText; - } - - &.is-disabled { - --highcontrast-tag-border-color-disabled: GrayText; - --highcontrast-tag-background-color-disabled: ButtonFace; - --highcontrast-tag-content-color-disabled: GrayText; - } - - &.spectrum-Tag--emphasized { - --highcontrast-tag-border-color-emphasized: Highlight; - - --highcontrast-tag-background-color-emphasized: ButtonFace; - --highcontrast-tag-background-color-emphasized-hover: ButtonFace; - --highcontrast-tag-background-color-emphasized-active: ButtonFace; - --highcontrast-tag-background-color-emphasized-focus: ButtonFace; - - --highcontrast-tag-content-color-emphasized: CanvasText; - } - } -} diff --git a/components/textfield/dist/metadata.json b/components/textfield/dist/metadata.json index 073bc68dfb2..005ac29b933 100644 --- a/components/textfield/dist/metadata.json +++ b/components/textfield/dist/metadata.json @@ -4,7 +4,6 @@ ".spectrum-Textfield", ".spectrum-Textfield .spectrum-FieldLabel", ".spectrum-Textfield .spectrum-HelpText", - ".spectrum-Textfield .spectrum-Textfield-input::placeholder", ".spectrum-Textfield--multiline .spectrum-Textfield-input", ".spectrum-Textfield--multiline .spectrum-Textfield-input:lang(ja)", ".spectrum-Textfield--multiline .spectrum-Textfield-input:lang(ko)", @@ -97,18 +96,6 @@ "--mod-text-area-min-inline-size", "--mod-textfield-animation-duration", "--mod-textfield-background-color", - "--mod-textfield-background-color-disabled", - "--mod-textfield-border-color", - "--mod-textfield-border-color-disabled", - "--mod-textfield-border-color-focus", - "--mod-textfield-border-color-focus-hover", - "--mod-textfield-border-color-hover", - "--mod-textfield-border-color-invalid-default", - "--mod-textfield-border-color-invalid-focus", - "--mod-textfield-border-color-invalid-focus-hover", - "--mod-textfield-border-color-invalid-hover", - "--mod-textfield-border-color-invalid-keyboard-focus", - "--mod-textfield-border-color-keyboard-focus", "--mod-textfield-border-width", "--mod-textfield-character-count-color", "--mod-textfield-character-count-spacing-block", @@ -116,7 +103,6 @@ "--mod-textfield-character-count-spacing-inline", "--mod-textfield-character-count-spacing-inline-side", "--mod-textfield-corner-radius", - "--mod-textfield-focus-indicator-color", "--mod-textfield-focus-indicator-gap", "--mod-textfield-focus-indicator-width", "--mod-textfield-font-family", @@ -143,15 +129,6 @@ "--mod-textfield-spacing-block-end", "--mod-textfield-spacing-block-start", "--mod-textfield-spacing-inline", - "--mod-textfield-text-color-default", - "--mod-textfield-text-color-disabled", - "--mod-textfield-text-color-focus", - "--mod-textfield-text-color-focus-hover", - "--mod-textfield-text-color-hover", - "--mod-textfield-text-color-invalid", - "--mod-textfield-text-color-keyboard-focus", - "--mod-textfield-text-color-readonly", - "--mod-textfield-text-color-valid", "--mod-textfield-width" ], "component": [ @@ -313,30 +290,5 @@ "--spectrum-workflow-icon-size-75" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-textfield-background-color", - "--highcontrast-textfield-background-color-disabled", - "--highcontrast-textfield-border-color", - "--highcontrast-textfield-border-color-disabled", - "--highcontrast-textfield-border-color-focus", - "--highcontrast-textfield-border-color-focus-hover", - "--highcontrast-textfield-border-color-hover", - "--highcontrast-textfield-border-color-invalid-default", - "--highcontrast-textfield-border-color-invalid-focus", - "--highcontrast-textfield-border-color-invalid-focus-hover", - "--highcontrast-textfield-border-color-invalid-hover", - "--highcontrast-textfield-border-color-invalid-keyboard-focus", - "--highcontrast-textfield-border-color-keyboard-focus", - "--highcontrast-textfield-border-color-readonly", - "--highcontrast-textfield-focus-indicator-color", - "--highcontrast-textfield-text-color-default", - "--highcontrast-textfield-text-color-disabled", - "--highcontrast-textfield-text-color-focus", - "--highcontrast-textfield-text-color-focus-hover", - "--highcontrast-textfield-text-color-hover", - "--highcontrast-textfield-text-color-invalid", - "--highcontrast-textfield-text-color-keyboard-focus", - "--highcontrast-textfield-text-color-readonly", - "--highcontrast-textfield-text-color-valid" - ] + "high-contrast": [] } diff --git a/components/textfield/index.css b/components/textfield/index.css index 1117d3ca174..a058af8b597 100644 --- a/components/textfield/index.css +++ b/components/textfield/index.css @@ -86,8 +86,8 @@ --spectrum-textfield-text-color-readonly: var(--spectrum-neutral-content-color-default); /* Disabled Colors */ - --spectrum-textfield-background-color-disabled: var(--highcontrast-textfield-background-color-disabled, var(--mod-textfield-background-color-disabled, var(--spectrum-gray-25))); - --spectrum-textfield-border-color-disabled: var(--highcontrast-textfield-border-color-disabled, var(--mod-textfield-border-color-disabled, var(--spectrum-disabled-border-color))); + --spectrum-textfield-background-color-disabled: var(--spectrum-gray-25); + --spectrum-textfield-border-color-disabled: var(--spectrum-disabled-border-color); --spectrum-textfield-text-color-disabled: var(--spectrum-disabled-content-color); /* Invalid Colors */ @@ -266,7 +266,7 @@ } .spectrum-Textfield.is-disabled & { - color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + color: var(--spectrum-textfield-text-color-disabled); } } @@ -279,7 +279,7 @@ } .spectrum-Textfield.is-disabled & .spectrum-HelpText-text { - color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + color: var(--spectrum-textfield-text-color-disabled); } } @@ -303,7 +303,7 @@ padding-inline-end: calc(var(--mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius)) / 2); .spectrum-Textfield.is-disabled & { - color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + color: var(--spectrum-textfield-text-color-disabled); } &:lang(ja), @@ -327,10 +327,10 @@ vertical-align: top; /* used to align them correctly in forms. */ outline: none; - background-color: var(--highcontrast-textfield-background-color, var(--spectrum-textfield-background-color)); + background-color: var(--spectrum-textfield-background-color); border-width: var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)); border-style: solid; - border-color: var(--highcontrast-textfield-border-color, var(--mod-textfield-border-color, var(--spectrum-textfield-border-color))); + border-color: var(--spectrum-textfield-border-color); border-radius: var(--mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius)); transition: border-color var(--mod-textfield-animation-duration, var(--spectrum-textfield-animation-duration)) ease-in-out; @@ -338,7 +338,7 @@ font-family: var(--mod-textfield-font-family, var(--spectrum-textfield-font-family)); font-weight: var(--mod-textfield-font-weight, var(--spectrum-textfield-font-weight)); font-style: var(--mod-textfield-font-style, var(--spectrum-textfield-font-style)); - color: var(--highcontrast-textfield-text-color-default, var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default))); + color: var(--spectrum-textfield-text-color-default); text-overflow: ellipsis; /* place in same cell: input, focus indicator, and grows sizer */ @@ -378,38 +378,38 @@ font-family: var(--mod-textfield-font-family, var(--spectrum-textfield-font-family)); font-weight: var(--mod-textfield-font-weight, var(--spectrum-textfield-font-weight)); font-style: var(--mod-textfield-font-style, var(--spectrum-textfield-font-style)); - color: var(--highcontrast-textfield-text-color-default, var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default))); + color: var(--spectrum-textfield-text-color-default); transition: color var(--mod-textfield-animation-duration, var(--spectrum-textfield-animation-duration)) ease-in-out; } /* hover */ .spectrum-Textfield:hover &, &:hover { - border-color: var(--highcontrast-textfield-border-color-hover, var(--mod-textfield-border-color-hover, var(--spectrum-textfield-border-color-hover))); - color: var(--highcontrast-textfield-text-color-hover, var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover))); + border-color: var(--spectrum-textfield-border-color-hover); + color: var(--spectrum-textfield-text-color-hover); &::placeholder { - color: var(--highcontrast-textfield-text-color-hover, var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover))); + color: var(--spectrum-textfield-text-color-hover); } } /* mouse focus */ .spectrum-Textfield.is-focused &, &:focus { - border-color: var(--highcontrast-textfield-border-color-focus, var(--mod-textfield-border-color-focus, var(--spectrum-textfield-border-color-focus))); - color: var(--highcontrast-textfield-text-color-focus, var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus))); + border-color: var(--spectrum-textfield-border-color-focus); + color: var(--spectrum-textfield-text-color-focus); &::placeholder { - color: var(--highcontrast-textfield-text-color-focus, var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus))); + color: var(--spectrum-textfield-text-color-focus); } /* focus hover */ &:hover { - border-color: var(--highcontrast-textfield-border-color-focus-hover, var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover))); - color: var(--highcontrast-textfield-text-color-focus-hover, var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover))); + border-color: var(--spectrum-textfield-border-color-focus-hover); + color: var(--spectrum-textfield-text-color-focus-hover); &::placeholder { - color: var(--highcontrast-textfield-text-color-focus-hover, var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover))); + color: var(--spectrum-textfield-text-color-focus-hover); } } } @@ -419,26 +419,26 @@ .spectrum-Textfield.is-focused:hover &, .spectrum-Textfield.is-keyboardFocused:hover &, &:focus:hover { - border-color: var(--highcontrast-textfield-border-color-focus-hover, var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover))); - color: var(--highcontrast-textfield-text-color-focus-hover, var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover))); + border-color: var(--spectrum-textfield-border-color-focus-hover); + color: var(--spectrum-textfield-text-color-focus-hover); &::placeholder { - color: var(--highcontrast-textfield-text-color-focus-hover, var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover))); + color: var(--spectrum-textfield-text-color-focus-hover); } } /* keyboard focus */ .spectrum-Textfield.is-keyboardFocused & { - border-color: var(--highcontrast-textfield-border-color-keyboard-focus, var(--mod-textfield-border-color-keyboard-focus, var(--spectrum-textfield-border-color-keyboard-focus))); - color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus))); + border-color: var(--spectrum-textfield-border-color-keyboard-focus); + color: var(--spectrum-textfield-text-color-keyboard-focus); &::placeholder { - color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus))); + color: var(--spectrum-textfield-text-color-keyboard-focus); } /* focus indicator is focused state */ outline: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)) solid; - outline-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color))); + outline-color: var(--spectrum-textfield-focus-indicator-color); outline-offset: var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap)); } @@ -446,44 +446,44 @@ .spectrum-Textfield.is-valid & { /* creates spacing between text end and icon start, sum of icon start spacing + icon size + icon end spacing - border */ padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid)) + var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); - color: var(--highcontrast-textfield-text-color-valid, var(--mod-textfield-text-color-valid, var(--spectrum-textfield-text-color-valid))); + color: var(--spectrum-textfield-text-color-valid); } /*** Input Invalid ⚠️ ***/ .spectrum-Textfield.is-invalid & { /* creates spacing between text end and icon start, sum of icon start spacing + icon size + icon end spacing - border */ padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)) + var(--mod-textfield-icon-spacing-inline-end-invalid, var(--spectrum-textfield-icon-spacing-inline-end-invalid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); - color: var(--highcontrast-textfield-text-color-invalid, var(--mod-textfield-text-color-invalid, var(--spectrum-textfield-text-color-invalid))); - border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default))); + color: var(--spectrum-textfield-text-color-invalid); + border-color: var(--spectrum-textfield-border-color-invalid-default); } /* Invalid hover */ .spectrum-Textfield.is-invalid:hover:not(.is-disabled, .is-readOnly) &, .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) &:hover { - border-color: var(--highcontrast-textfield-border-color-invalid-hover, var(--mod-textfield-border-color-invalid-hover, var(--spectrum-textfield-border-color-invalid-hover))); + border-color: var(--spectrum-textfield-border-color-invalid-hover); } /* Invalid mouse focus */ .spectrum-Textfield.is-invalid.is-focused &, .spectrum-Textfield.is-invalid:focus &, .spectrum-Textfield.is-invalid &:focus { - border-color: var(--highcontrast-textfield-border-color-invalid-focus, var(--mod-textfield-border-color-invalid-focus, var(--spectrum-textfield-border-color-invalid-focus))); + border-color: var(--spectrum-textfield-border-color-invalid-focus); /* focus hover */ &:hover { - border-color: var(--highcontrast-textfield-border-color-invalid-focus-hover, var(--mod-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover))); + border-color: var(--spectrum-textfield-border-color-invalid-focus-hover); } } .spectrum-Textfield.is-invalid:focus:hover &, .spectrum-Textfield.is-invalid.is-focused:hover &, .spectrum-Textfield.is-invalid.is-keyboardFocused:hover & { - border-color: var(--highcontrast-textfield-border-color-invalid-focus-hover, var(--mod-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover))); + border-color: var(--spectrum-textfield-border-color-invalid-focus-hover); } /* invalid keyboard focus */ .spectrum-Textfield.is-invalid.is-keyboardFocused & { - border-color: var(--highcontrast-textfield-border-color-invalid-keyboard-focus, var(--mod-textfield-border-color-invalid-keyboard-focus, var(--spectrum-textfield-border-color-invalid-keyboard-focus))); + border-color: var(--spectrum-textfield-border-color-invalid-keyboard-focus); } /****** Input Disabled 🚫 ******/ @@ -492,7 +492,7 @@ &:disabled { background-color: var(--spectrum-textfield-background-color-disabled); border-color: var(--spectrum-textfield-border-color-disabled); - color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + color: var(--spectrum-textfield-text-color-disabled); /* Disable the resize functionality when disabled */ resize: none; @@ -501,7 +501,7 @@ opacity: 1; &::placeholder { - color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + color: var(--spectrum-textfield-text-color-disabled); } } @@ -510,25 +510,25 @@ .spectrum-Textfield.is-readOnly:hover &, &:read-only { background-color: transparent; - border-color: var(--highcontrast-textfield-border-color-readonly, transparent); - color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly))); + border-color: transparent; + color: var(--spectrum-textfield-text-color-readonly); outline: none; &::placeholder { - color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly))); + color: var(--spectrum-textfield-text-color-readonly); background-color: transparent; .spectrum-Textfield.is-disabled &, .spectrum-Textfield.is-disabled:hover & { - color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + color: var(--spectrum-textfield-text-color-disabled); } } } /****** ReadOnly & Disabled ******/ .spectrum-Textfield.is-readOnly.is-disabled & { - border-color: var(--highcontrast-textfield-border-color-disabled, transparent); - color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + border-color: transparent; + color: var(--spectrum-textfield-text-color-disabled); } } @@ -592,40 +592,3 @@ } } } - -/********* WHCM *********/ -@media (forced-colors: active) { - .spectrum-Textfield { - --highcontrast-textfield-border-color: CanvasText; - --highcontrast-textfield-border-color-hover: Highlight; - --highcontrast-textfield-border-color-focus: Highlight; - --highcontrast-textfield-border-color-keyboard-focus: Highlight; - --highcontrast-textfield-border-color-focus-hover: Highlight; - --highcontrast-textfield-focus-indicator-color: Highlight; - --highcontrast-textfield-background-color: Canvas; - - --highcontrast-textfield-background-color-disabled: Canvas; - --highcontrast-textfield-border-color-disabled: GrayText; - - --highcontrast-textfield-border-color-readonly: CanvasText; - - --highcontrast-textfield-border-color-invalid-default: Highlight; - --highcontrast-textfield-border-color-invalid-hover: Highlight; - --highcontrast-textfield-border-color-invalid-focus: Highlight; - --highcontrast-textfield-border-color-invalid-keyboard-focus: Highlight; - --highcontrast-textfield-border-color-invalid-focus-hover: Highlight; - - &, - .spectrum-Textfield-input::placeholder { - --highcontrast-textfield-text-color-valid: CanvasText; - --highcontrast-textfield-text-color-invalid: CanvasText; - --highcontrast-textfield-text-color-default: CanvasText; - --highcontrast-textfield-text-color-hover: CanvasText; - --highcontrast-textfield-text-color-focus: CanvasText; - --highcontrast-textfield-text-color-focus-hover: CanvasText; - --highcontrast-textfield-text-color-keyboard-focus: CanvasText; - --highcontrast-textfield-text-color-disabled: GrayText; - --highcontrast-textfield-text-color-readonly: CanvasText; - } - } -} diff --git a/components/thumbnail/dist/metadata.json b/components/thumbnail/dist/metadata.json index 2a5fa051ef2..b2b6721ff8b 100644 --- a/components/thumbnail/dist/metadata.json +++ b/components/thumbnail/dist/metadata.json @@ -29,17 +29,12 @@ ".spectrum-Thumbnail:before" ], "modifiers": [ - "--mod-thumbnail-border-color", - "--mod-thumbnail-border-color-selected", "--mod-thumbnail-border-radius", "--mod-thumbnail-border-width", "--mod-thumbnail-border-width-selected", "--mod-thumbnail-color-opacity-disabled", - "--mod-thumbnail-focus-indicator-color", "--mod-thumbnail-focus-indicator-gap", "--mod-thumbnail-focus-indicator-thickness", - "--mod-thumbnail-layer-border-color-inner", - "--mod-thumbnail-layer-border-color-outer", "--mod-thumbnail-layer-border-width-inner", "--mod-thumbnail-layer-border-width-outer", "--mod-thumbnail-size" @@ -89,11 +84,5 @@ "--spectrum-white" ], "passthroughs": ["--mod-opacity-checkerboard-size"], - "high-contrast": [ - "--highcontrast-thumbnail-border-color", - "--highcontrast-thumbnail-border-color-selected", - "--highcontrast-thumbnail-focus-indicator-color", - "--highcontrast-thumbnail-layer-border-color-inner", - "--highcontrast-thumbnail-layer-border-color-outer" - ] + "high-contrast": [] } diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css index 4e28f1892e2..60761a81f33 100644 --- a/components/thumbnail/index.css +++ b/components/thumbnail/index.css @@ -110,7 +110,7 @@ inline-size: 100%; block-size: 100%; border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); - box-shadow: inset 0 0 0 var(--mod-thumbnail-border-width, var(--spectrum-thumbnail-border-width)) var(--highcontrast-thumbnail-border-color, var(--mod-thumbnail-border-color, var(--spectrum-thumbnail-border-color))); + box-shadow: inset 0 0 0 var(--mod-thumbnail-border-width, var(--spectrum-thumbnail-border-width)) var(--spectrum-thumbnail-border-color); } &.is-disabled { @@ -124,7 +124,7 @@ content: ""; border-style: solid; border-width: var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-thumbnail-focus-indicator-thickness)); - border-color: var(--highcontrast-thumbnail-focus-indicator-color, var(--mod-thumbnail-focus-indicator-color, var(--spectrum-thumbnail-focus-indicator-color))); + border-color: var(--spectrum-thumbnail-focus-indicator-color); border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); position: absolute; inset: calc((var(--mod-thumbnail-focus-indicator-gap, var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-thumbnail-focus-indicator-thickness))) * -1); @@ -140,7 +140,7 @@ .spectrum-Thumbnail-layer { border-style: solid; border-width: var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-thumbnail-layer-border-width-outer)); - border-color: var(--highcontrast-thumbnail-layer-border-color-outer, var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-thumbnail-layer-border-color-outer))); + border-color: var(--spectrum-thumbnail-layer-border-color-outer); box-sizing: border-box; display: flex; @@ -153,7 +153,7 @@ &.is-selected { outline-style: solid; - outline-color: var(--highcontrast-thumbnail-border-color-selected, var(--mod-thumbnail-border-color-selected, var(--spectrum-thumbnail-border-color-selected))); + outline-color: var(--spectrum-thumbnail-border-color-selected); outline-width: var(--mod-thumbnail-border-width-selected, var(--spectrum-thumbnail-border-width-selected)); outline-offset: calc(var(--mod-thumbnail-border-width-selected, var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner))); } @@ -167,7 +167,7 @@ inline-size: calc(var(--spectrum-thumbnail-size) - ((var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)))) * 2); block-size: calc(var(--spectrum-thumbnail-size) - ((var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)))) * 2); outline-style: solid; - outline-color: var(--highcontrast-thumbnail-layer-border-color-inner, var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-thumbnail-layer-border-color-inner))); + outline-color: var(--spectrum-thumbnail-layer-border-color-inner); outline-width: calc(var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-thumbnail-layer-border-width-outer))); } @@ -208,17 +208,3 @@ background-position: center center; border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); } - -/* Windows High Contrast Mode */ -@media (forced-colors: active) { - .spectrum-Thumbnail { - --highcontrast-thumbnail-border-color-selected: Highlight; - --highcontrast-thumbnail-focus-indicator-color: Highlight; - --highcontrast-thumbnail-border-color: CanvasText; - --highcontrast-thumbnail-layer-border-color-inner: Canvas; - --highcontrast-thumbnail-layer-border-color-outer: CanvasText; - - /* Allow checkerboard pattern to be visible. */ - forced-color-adjust: none; - } -} diff --git a/components/tooltip/dist/metadata.json b/components/tooltip/dist/metadata.json index 9c7a37c1250..4a71465cd8d 100644 --- a/components/tooltip/dist/metadata.json +++ b/components/tooltip/dist/metadata.json @@ -253,9 +253,6 @@ "--mod-overlay-animation-duration", "--mod-overlay-animation-duration-opened", "--mod-tooltip-animation-distance", - "--mod-tooltip-background-color-default", - "--mod-tooltip-background-color-informative", - "--mod-tooltip-background-color-negative", "--mod-tooltip-border-radius", "--mod-tooltip-cjk-line-height", "--mod-tooltip-content-color", @@ -320,8 +317,5 @@ "--spectrum-spacing-75" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-tooltip-background-color-default", - "--highcontrast-tooltip-border-width" - ] + "high-contrast": [] } diff --git a/components/tooltip/index.css b/components/tooltip/index.css index f589e24725c..96056610993 100644 --- a/components/tooltip/index.css +++ b/components/tooltip/index.css @@ -54,8 +54,6 @@ /* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */ --spectrum-tooltip-pointer-corner-spacing: var(--mod-tooltip-border-radius, var(--spectrum-tooltip-border-radius)); - - --highcontrast-tooltip-border-width: 0px; } .spectrum-Tooltip { @@ -85,7 +83,7 @@ min-block-size: var(--mod-tooltip-height, var(--spectrum-tooltip-height)); max-inline-size: var(--mod-tooltip-max-inline-size, var(--spectrum-tooltip-max-inline-size)); - background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default))); + background-color: var(--spectrum-tooltip-background-color-default); color: var(--mod-tooltip-content-color, var(--spectrum-tooltip-content-color)); font-size: var(--mod-tooltip-font-size, var(--spectrum-tooltip-font-size)); @@ -111,11 +109,11 @@ /****** Variants ******/ .spectrum-Tooltip--info { - background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative))); + background-color: var(--spectrum-tooltip-background-color-informative); } .spectrum-Tooltip--negative { - background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative))); + background-color: var(--spectrum-tooltip-background-color-negative); } .spectrum-Tooltip.is-open { @@ -132,12 +130,12 @@ block-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)); inline-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)); - inset-block-start: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + inset-block-start: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))); /* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */ left: calc(50% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)))); transform: rotate(-45deg); - background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default))); + background-color: var(--spectrum-tooltip-background-color-default); /* Default: Pointing down ▽ */ clip-path: polygon(0 0, 100% var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)), 0 100%); @@ -145,11 +143,11 @@ border-radius: 0 0 0 var(--mod-tooltip-tip-corner-radius, var(--spectrum-tooltip-tip-corner-radius)); .spectrum-Tooltip--info & { - background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative))); + background-color: var(--spectrum-tooltip-background-color-informative); } .spectrum-Tooltip--negative & { - background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative))); + background-color: var(--spectrum-tooltip-background-color-negative); } /*** Tip Placement ***/ @@ -159,7 +157,7 @@ .spectrum-Tooltip--top-right &, .spectrum-Tooltip--top-start &, .spectrum-Tooltip--top-end & { - inset-block-start: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + inset-block-start: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))); transform: rotate(-45deg); } @@ -169,7 +167,7 @@ .spectrum-Tooltip--bottom-right &, .spectrum-Tooltip--bottom-start &, .spectrum-Tooltip--bottom-end & { - inset-block: auto calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + inset-block: auto calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))); transform: rotate(135deg); } @@ -242,7 +240,7 @@ .spectrum-Tooltip--end &, .spectrum-Tooltip--end-top &, .spectrum-Tooltip--end-bottom & { - inset-inline: auto calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + inset-inline: auto calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))); transform: rotate(45deg); } @@ -253,7 +251,7 @@ .spectrum-Tooltip--start &, .spectrum-Tooltip--start-top &, .spectrum-Tooltip--start-bottom & { - inset-inline-start: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + inset-inline-start: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))); transform: rotate(-135deg); } @@ -283,7 +281,7 @@ &:dir(rtl) { transform: rotate(-135deg); right: auto; - left: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + left: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))); } } @@ -297,7 +295,7 @@ &:dir(rtl) { transform: rotate(45deg); left: auto; - right: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + right: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))); } } } @@ -602,15 +600,3 @@ } } } - -@media (forced-colors: active) { - .spectrum-Tooltip { - --highcontrast-tooltip-border-width: 1px; - - border: var(--highcontrast-tooltip-border-width) solid CanvasText; - } - - .spectrum-Tooltip-tip { - --highcontrast-tooltip-background-color-default: CanvasText; - } -} diff --git a/components/tray/dist/metadata.json b/components/tray/dist/metadata.json index db6c152c441..4cd8914f8d6 100644 --- a/components/tray/dist/metadata.json +++ b/components/tray/dist/metadata.json @@ -2,12 +2,10 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Tray", - ".spectrum-Tray .spectrum-Dialog", ".spectrum-Tray-wrapper", ".spectrum-Tray.is-open" ], "modifiers": [ - "--mod-tray-background-color", "--mod-tray-bottom-to-content-area", "--mod-tray-corner-radius", "--mod-tray-corner-radius-portrait", @@ -37,5 +35,5 @@ "--spectrum-corner-radius-100" ], "passthroughs": ["--mod-modal-max-width"], - "high-contrast": ["--highcontrast-tray-background-color"] + "high-contrast": [] } diff --git a/components/tray/index.css b/components/tray/index.css index 4915050ab91..4308822899a 100644 --- a/components/tray/index.css +++ b/components/tray/index.css @@ -35,7 +35,7 @@ --spectrum-tray-exit-animation-duration: var(--mod-tray-exit-animation-duration, var(--spectrum-animation-duration-100)); --spectrum-tray-corner-radius: var(--mod-tray-corner-radius, var(--spectrum-corner-radius-100)); - --spectrum-tray-background-color: var(--highcontrast-tray-background-color, var(--mod-tray-background-color, var(--spectrum-background-layer-2-color))); + --spectrum-tray-background-color: var(--spectrum-background-layer-2-color); --mod-modal-max-width: 100%; @@ -80,15 +80,3 @@ max-inline-size: var(--spectrum-tray-max-inline-size); } } - -@media (forced-colors: active) { - .spectrum-Tray { - --highcontrast-tray-background-color: Canvas; - - border: solid; - - & .spectrum-Dialog { - border: none; - } - } -} diff --git a/components/treeview/dist/metadata.json b/components/treeview/dist/metadata.json index b8515093336..36653684dc4 100644 --- a/components/treeview/dist/metadata.json +++ b/components/treeview/dist/metadata.json @@ -53,39 +53,23 @@ "modifiers": [ "--mod-treeview-font-size", "--mod-treeview-heading-bottom-to-text", - "--mod-treeview-heading-color", "--mod-treeview-heading-font-weight", "--mod-treeview-indicator-animation-duration", "--mod-treeview-indicator-margin-inline-start", "--mod-treeview-indicator-padding-block", "--mod-treeview-indicator-padding-inline", - "--mod-treeview-item-background-color-focus", - "--mod-treeview-item-background-color-hover", - "--mod-treeview-item-background-color-quiet-selected", "--mod-treeview-item-background-color-selected", - "--mod-treeview-item-border-color-focus", "--mod-treeview-item-border-color-selected", - "--mod-treeview-item-border-color-selected-quiet", "--mod-treeview-item-border-radius", "--mod-treeview-item-border-radius-detached", "--mod-treeview-item-border-size", "--mod-treeview-item-border-size-selected", - "--mod-treeview-item-icon-color", - "--mod-treeview-item-icon-color-disabled", - "--mod-treeview-item-icon-color-focus", - "--mod-treeview-item-icon-color-hover", - "--mod-treeview-item-icon-color-selected", "--mod-treeview-item-icon-gap", "--mod-treeview-item-indentation", "--mod-treeview-item-min-block-size", "--mod-treeview-item-min-block-size-thumbnail", "--mod-treeview-item-padding-inline-end", "--mod-treeview-item-padding-inline-start", - "--mod-treeview-item-text-color", - "--mod-treeview-item-text-color-disabled", - "--mod-treeview-item-text-color-focus", - "--mod-treeview-item-text-color-hover", - "--mod-treeview-item-text-color-selected", "--mod-treeview-line-height", "--mod-treeview-margin-block", "--mod-treeview-section-spacing" @@ -167,20 +151,5 @@ "--spectrum-text-to-visual-75" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-treeview-heading-color", - "--highcontrast-treeview-item-background-color-disabled", - "--highcontrast-treeview-item-background-color-focus", - "--highcontrast-treeview-item-background-color-selected", - "--highcontrast-treeview-item-border-color-focus", - "--highcontrast-treeview-item-border-color-selected", - "--highcontrast-treeview-item-icon-color", - "--highcontrast-treeview-item-icon-color-disabled", - "--highcontrast-treeview-item-icon-color-focus", - "--highcontrast-treeview-item-icon-color-selected", - "--highcontrast-treeview-item-text-color", - "--highcontrast-treeview-item-text-color-disabled", - "--highcontrast-treeview-item-text-color-focus", - "--highcontrast-treeview-item-text-color-selected" - ] + "high-contrast": [] } diff --git a/components/treeview/index.css b/components/treeview/index.css index 4e203633841..01284813719 100644 --- a/components/treeview/index.css +++ b/components/treeview/index.css @@ -16,26 +16,26 @@ --spectrum-treeview-item-border-size-selected: var(--mod-treeview-item-border-size-selected, 1px); --spectrum-treeview-item-border-radius: var(--mod-treeview-item-border-radius, 0px); - --spectrum-treeview-item-border-color-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected, var(--spectrum-blue-800))); - --spectrum-treeview-item-border-color-focus: var(--highcontrast-treeview-item-border-color-focus, var(--mod-treeview-item-border-color-focus, var(--spectrum-blue-700))); + --spectrum-treeview-item-border-color-selected: var(--spectrum-blue-800); + --spectrum-treeview-item-border-color-focus: var(--spectrum-blue-700); - --spectrum-treeview-item-border-color-quiet-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected-quiet, transparent)); + --spectrum-treeview-item-border-color-quiet-selected: transparent; --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100); --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100); --spectrum-treeview-item-icon-gap: var(--mod-treeview-item-icon-gap, var(--spectrum-text-to-visual-75)); - --spectrum-treeview-item-icon-color: var(--highcontrast-treeview-item-icon-color, var(--mod-treeview-item-icon-color, var(--spectrum-gray-700))); - --spectrum-treeview-item-icon-color-hover: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-icon-color-hover, var(--spectrum-gray-900))); - --spectrum-treeview-item-icon-color-focus: var(--highcontrast-treeview-item-icon-color-focus, var(--mod-treeview-item-icon-color-focus, var(--spectrum-gray-900))); - --spectrum-treeview-item-icon-color-selected: var(--highcontrast-treeview-item-icon-color-selected, var(--mod-treeview-item-icon-color-selected, var(--spectrum-gray-900))); - --spectrum-treeview-item-icon-color-disabled: var(--highcontrast-treeview-item-icon-color-disabled, var(--mod-treeview-item-icon-color-disabled, var(--spectrum-disabled-content-color))); - - --spectrum-treeview-item-text-color: var(--highcontrast-treeview-item-text-color, var(--mod-treeview-item-text-color, var(--spectrum-neutral-content-color-default))); - --spectrum-treeview-item-text-color-selected: var(--highcontrast-treeview-item-text-color-selected, var(--mod-treeview-item-text-color-selected, var(--spectrum-gray-900))); - --spectrum-treeview-item-text-color-disabled: var(--highcontrast-treeview-item-text-color-disabled, var(--mod-treeview-item-text-color-disabled, var(--spectrum-gray-500))); - --spectrum-treeview-item-text-color-focus: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-focus, var(--spectrum-gray-900))); - --spectrum-treeview-item-text-color-hover: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-hover, var(--spectrum-gray-900))); + --spectrum-treeview-item-icon-color: var(--spectrum-gray-700); + --spectrum-treeview-item-icon-color-hover: var(--spectrum-gray-900); + --spectrum-treeview-item-icon-color-focus: var(--spectrum-gray-900); + --spectrum-treeview-item-icon-color-selected: var(--spectrum-gray-900); + --spectrum-treeview-item-icon-color-disabled: var(--spectrum-disabled-content-color); + + --spectrum-treeview-item-text-color: var(--spectrum-neutral-content-color-default); + --spectrum-treeview-item-text-color-selected: var(--spectrum-gray-900); + --spectrum-treeview-item-text-color-disabled: var(--spectrum-gray-500); + --spectrum-treeview-item-text-color-focus: var(--spectrum-gray-900); + --spectrum-treeview-item-text-color-hover: var(--spectrum-gray-900); --spectrum-treeview-indicator-animation-duration: var(--mod-treeview-indicator-animation-duration, var(--spectrum-animation-duration-100)); @@ -103,36 +103,36 @@ .spectrum-TreeView { --spectrum-treeview-item-indentation: var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-sized-indentation)); --spectrum-treeview-section-spacing: var(--mod-treeview-section-spacing, var(--spectrum-treeview-item-indentation)); - --spectrum-treeview-heading-color: var(--highcontrast-treeview-heading-color, var(--mod-treeview-heading-color, var(--spectrum-heading-color))); + --spectrum-treeview-heading-color: var(--spectrum-heading-color); --spectrum-treeview-item-border-size: var(--mod-treeview-item-border-size, var(--spectrum-border-width-200)); --spectrum-treeview-item-border-size-selected: var(--mod-treeview-item-border-size-selected, 1px); --spectrum-treeview-item-border-radius: var(--mod-treeview-item-border-radius, 0px); - --spectrum-treeview-item-border-color-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected, var(--spectrum-blue-800))); - --spectrum-treeview-item-border-color-focus: var(--highcontrast-treeview-item-border-color-focus, var(--mod-treeview-item-border-color-focus, var(--spectrum-blue-700))); + --spectrum-treeview-item-border-color-selected: var(--spectrum-blue-800); + --spectrum-treeview-item-border-color-focus: var(--spectrum-blue-700); - --spectrum-treeview-item-border-color-quiet-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected-quiet, transparent)); + --spectrum-treeview-item-border-color-quiet-selected: transparent; --spectrum-treeview-item-icon-gap: var(--mod-treeview-item-icon-gap, var(--spectrum-text-to-visual-75)); - --spectrum-treeview-item-icon-color: var(--highcontrast-treeview-item-icon-color, var(--mod-treeview-item-icon-color, var(--spectrum-gray-700))); - --spectrum-treeview-item-icon-color-hover: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-icon-color-hover, var(--spectrum-gray-900))); - --spectrum-treeview-item-icon-color-focus: var(--highcontrast-treeview-item-icon-color-focus, var(--mod-treeview-item-icon-color-focus, var(--spectrum-gray-900))); - --spectrum-treeview-item-icon-color-selected: var(--highcontrast-treeview-item-icon-color-selected, var(--mod-treeview-item-icon-color-selected, var(--spectrum-gray-900))); - --spectrum-treeview-item-icon-color-disabled: var(--highcontrast-treeview-item-icon-color-disabled, var(--mod-treeview-item-icon-color-disabled, var(--spectrum-disabled-content-color))); - - --spectrum-treeview-item-text-color: var(--highcontrast-treeview-item-text-color, var(--mod-treeview-item-text-color, var(--spectrum-neutral-content-color-default))); - --spectrum-treeview-item-text-color-selected: var(--highcontrast-treeview-item-text-color-selected, var(--mod-treeview-item-text-color-selected, var(--spectrum-gray-900))); - --spectrum-treeview-item-text-color-disabled: var(--highcontrast-treeview-item-text-color-disabled, var(--mod-treeview-item-text-color-disabled, var(--spectrum-gray-500))); - --spectrum-treeview-item-text-color-focus: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-focus, var(--spectrum-gray-900))); - --spectrum-treeview-item-text-color-hover: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-hover, var(--spectrum-gray-900))); + --spectrum-treeview-item-icon-color: var(--spectrum-gray-700); + --spectrum-treeview-item-icon-color-hover: var(--spectrum-gray-900); + --spectrum-treeview-item-icon-color-focus: var(--spectrum-gray-900); + --spectrum-treeview-item-icon-color-selected: var(--spectrum-gray-900); + --spectrum-treeview-item-icon-color-disabled: var(--spectrum-disabled-content-color); + + --spectrum-treeview-item-text-color: var(--spectrum-neutral-content-color-default); + --spectrum-treeview-item-text-color-selected: var(--spectrum-gray-900); + --spectrum-treeview-item-text-color-disabled: var(--spectrum-gray-500); + --spectrum-treeview-item-text-color-focus: var(--spectrum-gray-900); + --spectrum-treeview-item-text-color-hover: var(--spectrum-gray-900); --spectrum-treeview-indicator-animation-duration: var(--mod-treeview-indicator-animation-duration, var(--spectrum-animation-duration-100)); --spectrum-treeview-item-min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-sized-min-block-size)); &.spectrum-TreeView--quiet { - --mod-treeview-item-background-color-selected: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-quiet-selected, var(--spectrum-treeview-item-background-color-quiet-selected))); + --mod-treeview-item-background-color-selected: var(--spectrum-treeview-item-background-color-quiet-selected); --mod-treeview-item-border-color-selected: var(--spectrum-treeview-item-border-color-quiet-selected); } @@ -191,7 +191,7 @@ color: var(--spectrum-treeview-item-text-color-selected); &::before { - background-color: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-selected, var(--spectrum-treeview-item-background-color-selected))); + background-color: var(--spectrum-treeview-item-background-color-selected); } & .spectrum-TreeView-itemIcon { @@ -216,7 +216,7 @@ color: var(--spectrum-treeview-item-text-color-disabled); &::before { - background-color: var(--highcontrast-treeview-item-background-color-disabled, transparent); + background-color: transparent; } & .spectrum-Icon { @@ -271,7 +271,7 @@ color: var(--spectrum-treeview-item-text-color-focus); &::before { - background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-focus, var(--spectrum-treeview-item-background-color-focus))); + background-color: var(--spectrum-treeview-item-background-color-focus); border-width: var(--spectrum-treeview-item-border-size); border-color: var(--spectrum-treeview-item-border-color-focus); } @@ -285,7 +285,7 @@ color: var(--spectrum-treeview-item-text-color-hover); &::before { - background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-hover, var(--spectrum-treeview-item-background-color-hover))); + background-color: var(--spectrum-treeview-item-background-color-hover); } & .spectrum-TreeView-itemIcon { @@ -383,44 +383,3 @@ flex-shrink: 0; margin-inline-end: var(--spectrum-treeview-item-icon-gap); } - -@media (forced-colors: active) { - .spectrum-TreeView { - --highcontrast-treeview-item-background-color-selected: Highlight; - --highcontrast-treeview-item-border-color-selected: Highlight; - --highcontrast-treeview-item-text-color-selected: HighlightText; - --highcontrast-treeview-item-icon-color-selected: HighlightText; - - --highcontrast-treeview-item-icon-color: LinkText; - --highcontrast-treeview-item-text-color: LinkText; - - --highcontrast-treeview-item-background-color-focus: Highlight; - --highcontrast-treeview-item-text-color-focus: HighlightText; - --highcontrast-treeview-item-border-color-focus: CanvasText; - --highcontrast-treeview-item-icon-color-focus: HighlightText; - - --highcontrast-treeview-item-background-color-disabled: Canvas; - --highcontrast-treeview-item-text-color-disabled: GrayText; - --highcontrast-treeview-item-icon-color-disabled: GrayText; - - --highcontrast-treeview-heading-color: CanvasText; - } - - @supports (color: SelectedItem) { - .spectrum-TreeView { - --highcontrast-treeview-item-background-color-selected: SelectedItem; - --highcontrast-treeview-item-border-color-selected: SelectedItem; - --highcontrast-treeview-item-text-color-selected: SelectedItemText; - --highcontrast-treeview-item-icon-color-selected: SelectedItemText; - } - } - - .spectrum-TreeView-itemLabel { - forced-color-adjust: none; - background: transparent; - } - - .spectrum-TreeView-itemLink::before { - forced-color-adjust: none; - } -} diff --git a/components/typography/dist/metadata.json b/components/typography/dist/metadata.json index 3ef566f741d..b7158f16bb8 100644 --- a/components/typography/dist/metadata.json +++ b/components/typography/dist/metadata.json @@ -310,7 +310,6 @@ "--mod-body-cjk-strong-emphasized-font-weight", "--mod-body-cjk-strong-font-style", "--mod-body-cjk-strong-font-weight", - "--mod-body-font-color", "--mod-body-font-size", "--mod-body-line-height", "--mod-body-margin", @@ -347,7 +346,6 @@ "--mod-code-cjk-strong-font-weight", "--mod-code-emphasized-font-style", "--mod-code-emphasized-font-weight", - "--mod-code-font-color", "--mod-code-font-family", "--mod-code-font-size", "--mod-code-font-style", @@ -377,7 +375,6 @@ "--mod-detail-cjk-strong-emphasized-font-weight", "--mod-detail-cjk-strong-font-style", "--mod-detail-cjk-strong-font-weight", - "--mod-detail-font-color", "--mod-detail-font-size", "--mod-detail-letter-spacing", "--mod-detail-line-height", @@ -444,7 +441,6 @@ "--mod-heading-cjk-strong-emphasized-font-weight", "--mod-heading-cjk-strong-font-style", "--mod-heading-cjk-strong-font-weight", - "--mod-heading-font-color", "--mod-heading-font-size", "--mod-heading-line-height", "--mod-heading-margin-end", @@ -752,10 +748,5 @@ "--spectrum-serif-font-family-stack" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-body-font-color", - "--highcontrast-code-font-color", - "--highcontrast-detail-font-color", - "--highcontrast-heading-font-color" - ] + "high-contrast": [] } diff --git a/components/typography/index.css b/components/typography/index.css index 25ffeaa8a2f..10956e47ca6 100644 --- a/components/typography/index.css +++ b/components/typography/index.css @@ -41,25 +41,6 @@ } } -/* Windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Heading { - --highcontrast-heading-font-color: Text; - } - - .spectrum-Body { - --highcontrast-body-font-color: Text; - } - - .spectrum-Detail { - --highcontrast-detail-font-color: Text; - } - - .spectrum-Code { - --highcontrast-code-font-color: Text; - } -} - /* Heading */ .spectrum-Heading, .spectrum-Heading--sizeM { @@ -118,7 +99,7 @@ font-style: var(--mod-heading-sans-serif-font-style, var(--spectrum-heading-sans-serif-font-style)); font-weight: var(--mod-heading-sans-serif-font-weight, var(--spectrum-heading-sans-serif-font-weight)); font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size)); - color: var(--highcontrast-heading-font-color, var(--mod-heading-font-color, var(--spectrum-heading-font-color))); + color: var(--spectrum-heading-font-color); line-height: var(--mod-heading-line-height, var(--spectrum-heading-line-height)); margin-block-start: var(--mod-heading-margin-start, var(--spectrum-heading-margin-start, 0)); margin-block-end: var(--mod-heading-margin-end, var(--spectrum-heading-margin-end, 0)); @@ -395,7 +376,7 @@ font-style: var(--mod-body-sans-serif-font-style, var(--spectrum-body-sans-serif-font-style)); font-weight: var(--mod-body-sans-serif-font-weight, var(--spectrum-body-sans-serif-font-weight)); font-size: var(--mod-body-font-size, var(--spectrum-body-font-size)); - color: var(--highcontrast-body-font-color, var(--mod-body-font-color, var(--spectrum-body-font-color))); + color: var(--spectrum-body-font-color); margin-block-start: var(--mod-body-margin-start, var(--mod-body-margin, 0)); margin-block-end: var(--mod-body-margin-end, var(--mod-body-margin, var(--spectrum-body-margin-end, 0))); @@ -514,7 +495,7 @@ margin-block-start: var(--mod-detail-margin-start, var(--spectrum-detail-margin-start, 0)); margin-block-end: var(--mod-detail-margin-end, var(--spectrum-detail-margin-end, 0)); - color: var(--highcontrast-detail-font-color, var(--mod-detail-font-color, var(--spectrum-detail-font-color))); + color: var(--spectrum-detail-font-color); line-height: var(--mod-detail-line-height, var(--spectrum-detail-line-height)); letter-spacing: var(--mod-detail-letter-spacing, var(--spectrum-detail-letter-spacing)); @@ -705,7 +686,7 @@ line-height: var(--mod-code-line-height, var(--spectrum-code-line-height)); - color: var(--highcontrast-code-font-color, var(--mod-code-font-color, var(--spectrum-code-font-color))); + color: var(--spectrum-code-font-color); strong, .spectrum-Code-strong { diff --git a/tools/generator/templates/index.css.hbs b/tools/generator/templates/index.css.hbs index 8fa905253bd..919ba3a889e 100644 --- a/tools/generator/templates/index.css.hbs +++ b/tools/generator/templates/index.css.hbs @@ -18,11 +18,3 @@ &.spectrum-{{ pascalCase name }}--sizeL {} &.spectrum-{{ pascalCase name }}--sizeXL {} } - -@media (forced-colors: active) { - .spectrum-{{ pascalCase name }} { - --highcontrast-{{ folderName }}-content-color-default: CanvasText; - - forced-color-adjust: none; - } -}