diff --git a/packages/@adobe/spectrum-css-temp/components/button/skin.css b/packages/@adobe/spectrum-css-temp/components/button/skin.css index 54797e05ef8..b6e0dfb8c33 100644 --- a/packages/@adobe/spectrum-css-temp/components/button/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/button/skin.css @@ -1337,6 +1337,8 @@ governing permissions and limitations under the License. --spectrum-logicbutton-or-text-color: ButtonText; --spectrum-button-primary-focus-ring-color-key-focus: CanvasText; --spectrum-button-primary-focus-ring-size-key-focus: 3px; + --spectrum-dropdown-border-color-key-focus: Highlight; + } .spectrum-Button--overBackground { @@ -1371,4 +1373,16 @@ governing permissions and limitations under the License. --spectrum-actionbutton-emphasized-icon-color-key-focus: HighlightText; } } + .spectrum-FieldButton { + &:focus-ring, + &.is-focused { + &:not(.spectrum-FieldButton--quiet) { + outline:2px solid Highlight; + } + &.spectrum-FieldButton--quiet { + forced-color-adjust: none; + box-shadow: 0 2px 0 0 var(--spectrum-dropdown-border-color-key-focus); + } + } + } } diff --git a/packages/@adobe/spectrum-css-temp/components/calendar/skin.css b/packages/@adobe/spectrum-css-temp/components/calendar/skin.css index a13194dae7f..4ed1f7be39f 100644 --- a/packages/@adobe/spectrum-css-temp/components/calendar/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/calendar/skin.css @@ -151,3 +151,58 @@ governing permissions and limitations under the License. } } } + +@media (forced-colors: active) { + .spectrum-Calendar-date { + color: CanvasText; + forced-color-adjust: none; + --spectrum-calendar-button-icon-color: ButtonText; + --spectrum-calendar-day-background-color-cap-selected: Highlight; + --spectrum-calendar-day-background-color-cap-invalid-selected: Highlight; + --spectrum-calendar-day-background-color-cap-invalid-selected-down: Highlight; + --spectrum-calendar-day-background-color-cap-invalid-selected-hover: Highlight; + --spectrum-calendar-day-background-color-cap-selected-down: Highlight; + --spectrum-calendar-day-background-color-cap-selected-hover: Highlight; + --spectrum-calendar-day-background-color-disabled: ButtonFace; + --spectrum-calendar-day-background-color-down: ButtonFace; + --spectrum-calendar-day-background-color-hover: ButtonFace; + --spectrum-calendar-day-background-color-invalid-selected: Highlight; + --spectrum-calendar-day-background-color-selected-hover: Highlight; + --spectrum-calendar-day-background-color-selected: Highlight; + --spectrum-calendar-day-border-color-key-focus: ButtonText; + --spectrum-calendar-day-text-color-cap-selected: HighlightText; + --spectrum-calendar-day-text-color-cap-selected-hover: HighlightText; + --spectrum-calendar-day-text-color-disabled: GrayText; + --spectrum-calendar-day-text-color-hover: ButtonText; + --spectrum-calendar-day-text-color-selected-hover: HighlightText; + --spectrum-calendar-day-title-text-color: CanvasText; + --spectrum-calendar-day-today-background-color: ButtonText; + --spectrum-calendar-day-today-background-color-down: ButtonText; + --spectrum-calendar-day-today-background-color-hover: ButtonText; + --spectrum-calendar-day-today-text-color: ButtonFace; + &.is-range-selection { + color: HighlightText; + } + &.is-disabled { + &.is-range-selection { + background: Highlight; + color: HighlightText; + } + + &.is-selected { + background: Highlight; + color: HighlightText; + } + } + &.is-unavailable { + &.is-today { + color: var(--spectrum-calendar-day-text-color-hover); + } + } + &:hover { + &.is-today { + color: var(--spectrum-calendar-day-today-text-color); + } + } + } +} diff --git a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css index 71a8eba846b..76dd006d733 100644 --- a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css @@ -1,4 +1,4 @@ -/* +/* Copyright 2019 Adobe. All rights reserved. This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy @@ -207,3 +207,62 @@ governing permissions and limitations under the License. } } } +@media (forced-colors: active) { + .spectrum-Checkbox { + forced-color-adjust: none; + --spectrum-checkbox-box-border-color: ButtonText; + --spectrum-checkbox-box-border-color-error: Highlight; + --spectrum-checkbox-box-border-color-error-down: Highlight; + --spectrum-checkbox-box-border-color-error-hover: Highlight; + --spectrum-checkbox-box-border-color-key-focus: Highlight; + --spectrum-checkbox-checkmark-color: HighlightText; + --spectrum-checkbox-emphasized-box-background-color: ButtonFace; + --spectrum-checkbox-emphasized-box-background-color-disabled: ButtonFace; + --spectrum-checkbox-emphasized-box-border-color: ButtonText; + --spectrum-checkbox-emphasized-box-border-color-disabled: GrayText; + --spectrum-checkbox-emphasized-box-border-color-down: Highlight; + --spectrum-checkbox-emphasized-box-border-color-hover: Highlight; + --spectrum-checkbox-emphasized-box-border-color-selected: Highlight; + --spectrum-checkbox-emphasized-box-border-color-selected-down: Highlight; + --spectrum-checkbox-emphasized-box-border-color-selected-hover: Highlight; + --spectrum-checkbox-emphasized-box-border-color-selected-key-focus: Highlight; + --spectrum-checkbox-emphasized-text-color: FieldText; + --spectrum-checkbox-emphasized-text-color-down: FieldText; + --spectrum-checkbox-emphasized-text-color-hover: FieldText; + --spectrum-checkbox-emphasized-text-color-key-focus: FieldText; + --spectrum-checkbox-focus-ring-color-key-focus: ButtonText; + --spectrum-checkbox-quiet-box-border-color-selected: Highlight; + --spectrum-checkbox-quiet-box-border-color-selected-down: Highlight; + --spectrum-checkbox-quiet-box-border-color-selected-hover: Highlight; + --spectrum-checkbox-text-color: FieldText; + --spectrum-checkbox-text-color-disabled: GrayText; + --spectrum-checkbox-text-color-error: FieldText; + --spectrum-checkbox-text-color-error-down: FieldText; + --spectrum-checkbox-text-color-error-hover: FieldText; + + &.is-invalid { + .spectrum-Checkbox-box { + &:before { + border-color: var(--spectrum-checkbox-box-border-color); + } + } + &.is-indeterminate .spectrum-Checkbox-box { + &:before { + border-color: var(--spectrum-checkbox-box-border-color-error); + } + } + &.is-disabled .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { + &:before { + border-color: GrayText; + } + } + /* Extra-specific selectors added here to handle checked state */ + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box + { + &:before { + border-color: var(--spectrum-checkbox-box-border-color-error); + } + } + } + } +} diff --git a/packages/@adobe/spectrum-css-temp/components/colorarea/skin.css b/packages/@adobe/spectrum-css-temp/components/colorarea/skin.css index e558a2e2542..3f6a2b20b97 100644 --- a/packages/@adobe/spectrum-css-temp/components/colorarea/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/colorarea/skin.css @@ -9,28 +9,29 @@ .spectrum-ColorHandle-color { forced-color-adjust: none; } - + .spectrum-ColorArea { &.is-disabled { background: var(--spectrum-colorarea-fill-color-disabled); - + &:before { box-shadow: inset 0 0 0 var(--spectrum-colorarea-border-size) var(--spectrum-colorarea-border-color-disabled); } - + .spectrum-ColorArea-gradient { display: none; } } } - + @media (forced-colors: active) { .spectrum-ColorArea { --spectrum-colorarea-fill-color-disabled : GrayText; } .spectrum-ColorArea { + forced-color-adjust: none; &.is-disabled { forced-color-adjust: none; } } - } \ No newline at end of file + } diff --git a/packages/@adobe/spectrum-css-temp/components/colorhandle/skin.css b/packages/@adobe/spectrum-css-temp/components/colorhandle/skin.css index 86ef9874b03..6a0ca1347f6 100644 --- a/packages/@adobe/spectrum-css-temp/components/colorhandle/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/colorhandle/skin.css @@ -34,3 +34,13 @@ .spectrum-ColorHandle-color { box-shadow: inset 0 0 0 var(--spectrum-colorhandle-outer-border-size) var(--spectrum-colorhandle-outer-border-color); } + +@media (forced-colors: active) { + .spectrum-ColorHandle { + forced-color-adjust: none; + --spectrum-colorhandle-inner-border-color-disabled: GrayText; + --spectrum-colorhandle-fill-color-disabled: GrayText; + --spectrum-colorhandle-inner-border-color: ButtonText; + --spectrum-colorhandle-outer-border-color: ButtonFace; + } +} \ No newline at end of file diff --git a/packages/@adobe/spectrum-css-temp/components/colorloupe/skin.css b/packages/@adobe/spectrum-css-temp/components/colorloupe/skin.css index 322fb484d59..9efd1222765 100644 --- a/packages/@adobe/spectrum-css-temp/components/colorloupe/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/colorloupe/skin.css @@ -9,3 +9,11 @@ .spectrum-ColorLoupe-inner-checker { fill: var(--spectrum-global-color-static-gray-500); } + +@media (forced-colors: active) { + .spectrum-ColorLoupe { + forced-color-adjust: none; + --spectrum-colorloupe-inner-border-color: ButtonText; + --spectrum-colorloupe-outer-border-color: ButtonFace; + } +} \ No newline at end of file diff --git a/packages/@adobe/spectrum-css-temp/components/colorslider/skin.css b/packages/@adobe/spectrum-css-temp/components/colorslider/skin.css index 592abad2da9..662aa3b5224 100644 --- a/packages/@adobe/spectrum-css-temp/components/colorslider/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/colorslider/skin.css @@ -25,3 +25,13 @@ margin: 0; } } + +@media (forced-colors: active) { + .spectrum-ColorSlider { + forced-color-adjust: none; + --spectrum-colorslider-fill-color-disabled: GrayText; + --spectrum-colorslider-border-color-disabled: GrayText; + --spectrum-colorslider-border-color: ButtonText; + --spectrum-colorarea-border-color: ButtonText; + } +} \ No newline at end of file diff --git a/packages/@adobe/spectrum-css-temp/components/colorwheel/skin.css b/packages/@adobe/spectrum-css-temp/components/colorwheel/skin.css index dd5804877d4..317f67258af 100644 --- a/packages/@adobe/spectrum-css-temp/components/colorwheel/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/colorwheel/skin.css @@ -27,3 +27,13 @@ border-color: var(--spectrum-colorwheel-border-color); } } + +@media (forced-colors: active) { + .spectrum-ColorWheel { + forced-color-adjust: none; + --spectrum-colorwheel-fill-color-disabled: GrayText; + --spectrum-colorwheel-border-color-disabled: GrayText; + --spectrum-colorwheel-border-color: ButtonText; + --spectrum-colorarea-border-color: ButtonText; + } +} \ No newline at end of file diff --git a/packages/@adobe/spectrum-css-temp/components/dropdown/skin.css b/packages/@adobe/spectrum-css-temp/components/dropdown/skin.css index 44d3776f166..6b7dc91c848 100644 --- a/packages/@adobe/spectrum-css-temp/components/dropdown/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/dropdown/skin.css @@ -11,6 +11,9 @@ governing permissions and limitations under the License. */ .spectrum-Dropdown { + /* Override to gray-800 to meet WCAG */ + --spectrum-dropdown-placeholder-text-color: var(--spectrum-global-color-gray-800); + .spectrum-Dropdown-trigger:hover { .spectrum-Dropdown-chevron { color: var(--spectrum-dropdown-icon-color-hover); @@ -62,8 +65,7 @@ governing permissions and limitations under the License. .spectrum-Dropdown-label { &.is-placeholder { - /* Override to gray-800 to meet WCAG */ - color: var(--spectrum-global-color-gray-800); + color: var(--spectrum-dropdown-placeholder-text-color); } } @@ -85,3 +87,29 @@ governing permissions and limitations under the License. color: var(--spectrum-dropdown-icon-color-key-focus) } } + +@media (forced-colors: active) { + .spectrum-Dropdown { + --spectrum-dropdown-icon-color: ButtonText; + --spectrum-dropdown-icon-color-disabled: GrayText; + --spectrum-dropdown-icon-color-hover: ButtonText; + --spectrum-dropdown-icon-color-key-focus: ButtonText; + --spectrum-dropdown-placeholder-text-color: GrayText; + --spectrum-dropdown-placeholder-text-color-disabled: GrayText; + --spectrum-dropdown-placeholder-text-color-down: GrayText; + --spectrum-dropdown-placeholder-text-color-hover: GrayText; + --spectrum-dropdown-placeholder-text-color-key-focus: GrayText; + --spectrum-dropdown-placeholder-text-color-mouse-focus: GrayText; + --spectrum-dropdown-text-color-disabled: GrayText; + --spectrum-dropdown-validation-icon-color-error: ButtonText; + } + /*Override the label behaviour when NOT a placeholder*/ + .spectrum-Dropdown-trigger { + &:hover .spectrum-Dropdown-label { + color: ButtonText; + &.is-placeholder { + color: GrayText; + } + } + } +} diff --git a/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css b/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css index df0007a567c..fe9922e371a 100644 --- a/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css @@ -217,3 +217,81 @@ governing permissions and limitations under the License. } } } +@media (forced-colors: active) { + .spectrum-InputGroup { + --spectrum-dropdown-border-color-error: Highlight; + --spectrum-dropdown-border-color-key-focus: Highlight; + --spectrum-textfield-border-color-error: Highlight; + --spectrum-textfield-border-color-hover: Highlight; + --spectrum-textfield-border-color-key-focus: Highlight; + --spectrum-textfield-quiet-border-color: CanvasText; + --spectrum-textfield-quiet-border-color-disabled: GrayText; + --spectrum-textfield-quiet-border-color-hover: Highlight; + --spectrum-textfield-quiet-border-color-key-focus: Highlight; + --spectrum-textfield-text-color-disabled: GrayText; + forced-color-adjust: none; + .spectrum-InputGroup-input { + forced-color-adjust: auto; + } + .spectrum-FieldButton { + forced-color-adjust: auto; + } + + &.is-disabled:not(.spectrum-InputGroup--invalid):not(.spectrum-InputGroup--quiet) .spectrum-FieldButton { + border-color: GrayText; + border-width: 1px; + } + } + + .spectrum-InputGroup--quiet { + /* + specifically for readonly inputgroups that aren't disabled since the button will have the disabled class + but we don't want the border color to be the disabled quiet one + */ + &:not(.is-disabled) { + .spectrum-FieldButton { + &:disabled, + &:disabled:hover { + border-color: var(--spectrum-textfield-quiet-border-color); + } + } + } + &.is-disabled { + .spectrum-FieldButton { + border-color: GrayText; + } + } + } + .spectrum-InputGroup--invalid { + .spectrum-FieldButton { + border-color: Highlight; + } + &.is-disabled:not(.spectrum-InputGroup--quiet) .spectrum-InputGroup-input { + border-color: GrayText; + } + &.is-disabled { + &.spectrum-InputGroup--quiet .spectrum-InputGroup-input { + border-color: GrayText; + } + &.spectrum-InputGroup--quiet .spectrum-FieldButton { + border-color: GrayText; + } + } + &.is-disabled:not(.spectrum-InputGroup--quiet) .spectrum-FieldButton { + border-color: GrayText; + } + } + + .spectrum-InputGroup { + &:focus-ring + { + &:not(.spectrum-InputGroup--quiet) { + outline:2px solid Highlight; + } + &.spectrum-InputGroup--quiet { + box-shadow: 0 2px 0 0 var(--spectrum-dropdown-border-color-key-focus); + } + } + } +} + diff --git a/packages/@adobe/spectrum-css-temp/components/menu/skin.css b/packages/@adobe/spectrum-css-temp/components/menu/skin.css index 2cc6d19c58d..c328dce0a7d 100644 --- a/packages/@adobe/spectrum-css-temp/components/menu/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/menu/skin.css @@ -69,3 +69,49 @@ governing permissions and limitations under the License. .spectrum-Menu-description { color: var(--spectrum-global-color-gray-700); } +@media (forced-colors: active) { + .spectrum-Menu-divider { + background-color: CanvasText; + forced-color-adjust: none; + } + .spectrum-Menu-item { + forced-color-adjust: none; + --spectrum-heading-subtitle3-text-color: ButtonText; + --spectrum-selectlist-background-color: ButtonFace; + --spectrum-selectlist-divider-color: ButtonText; + --spectrum-selectlist-option-background-color: ButtonFace; + --spectrum-selectlist-option-background-color-disabled: ButtonFace; + --spectrum-selectlist-option-background-color-down: ButtonFace; + --spectrum-selectlist-option-background-color-hover: Highlight; + --spectrum-selectlist-option-background-color-key-focus: Highlight; + --spectrum-selectlist-option-focus-indicator-color: Highlight; + --spectrum-selectlist-option-icon-color-selected: Highlight; + --spectrum-selectlist-option-text-color: ButtonText; + --spectrum-selectlist-option-text-color-disabled: GrayText; + --spectrum-selectlist-option-text-color-hover: HighlightText; + --spectrum-selectlist-option-text-color-key-focus: HighlightText; + --spectrum-alias-border-color-focus: Highlight; + /* Overriding menu descriptions which were hardcoded to gray-700 */ + .spectrum-Menu-description { + color: var(--spectrum-selectlist-option-text-color); + } + &:hover, + &:focus, + &.is-highlighted, + &.is-open, + &:focus-ring, + &.is-focused { + &.is-selected { + .spectrum-Menu-checkmark { + color: HighlightText; + } + } + .spectrum-Menu-description { + color: var(--spectrum-selectlist-option-text-color-key-focus); + background-color: var(--spectrum-selectlist-option-background-color-key-focus); + } + background-color: var(--spectrum-selectlist-option-background-color-key-focus); + color: var(--spectrum-selectlist-option-text-color-key-focus); + } + } +} \ No newline at end of file diff --git a/packages/@adobe/spectrum-css-temp/components/radio/skin.css b/packages/@adobe/spectrum-css-temp/components/radio/skin.css index e6763ac9bef..3a362c5c18b 100644 --- a/packages/@adobe/spectrum-css-temp/components/radio/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/radio/skin.css @@ -189,3 +189,45 @@ governing permissions and limitations under the License. } } } + +@media (forced-colors: active) { + .spectrum-Radio { + forced-color-adjust: none; + --spectrum-radio-circle-border-color-error-key-focus: ButtonText; + --spectrum-radio-circle-border-color-error-selected-key-focus: Highlight; + --spectrum-radio-circle-border-color-key-focus: Highlight; + --spectrum-radio-emphasized-circle-background-color: ButtonFace; + --spectrum-radio-emphasized-circle-border-color-disabled: GrayText; + --spectrum-radio-emphasized-circle-border-color-down: Highlight; + --spectrum-radio-emphasized-circle-border-color-error: ButtonText; + --spectrum-radio-emphasized-circle-border-color-error-down: Highlight; + --spectrum-radio-emphasized-circle-border-color-error-hover: Highlight; + --spectrum-radio-emphasized-circle-border-color-hover: Highlight; + --spectrum-radio-emphasized-circle-border-color-selected-down: Highlight; + --spectrum-radio-emphasized-circle-border-color-selected-hover: Highlight; + --spectrum-radio-emphasized-circle-border-color-selected-key-focus: Highlight; + --spectrum-radio-emphasized-circle-border-color-selected: Highlight; + --spectrum-radio-emphasized-circle-border-color: ButtonText; + --spectrum-radio-emphasized-text-color-disabled: GrayText; + --spectrum-radio-emphasized-text-color-down: CanvasText; + --spectrum-radio-emphasized-text-color-hover: CanvasText; + --spectrum-radio-emphasized-text-color: CanvasText; + --spectrum-radio-focus-ring-color-key-focus: ButtonText; + --spectrum-radio-quiet-circle-border-color-selected: Highlight; + --spectrum-radio-quiet-circle-border-color-selected-down: Highlight; + --spectrum-radio-quiet-circle-border-color-selected-hover: Highlight; + --spectrum-radio-quiet-circle-border-color-selected-key-focus: Highlight; + --spectrum-radio-focus-ring-gap-key-focus: var(--spectrum-global-dimension-static-size-25); + --spectrum-radio-focus-ring-size: var(--spectrum-global-dimension-static-size-40); + &.is-invalid:hover { + .spectrum-Radio-label { + color: var(--spectrum-radio-emphasized-circle-border-color-error); + } + } + &.is-invalid:active { + .spectrum-Radio-label { + color: var(--spectrum-radio-emphasized-circle-border-color-error); + } + } + } +} diff --git a/packages/@adobe/spectrum-css-temp/components/slider/skin.css b/packages/@adobe/spectrum-css-temp/components/slider/skin.css index c6644b4a30c..4426f0bc6d7 100644 --- a/packages/@adobe/spectrum-css-temp/components/slider/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/slider/skin.css @@ -9,12 +9,14 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ - +@media (forced-colors: none) { + :root { + --spectrum-slider-handle-border-color-key-focus: var(--spectrum-global-color-gray-800); + } +} :root { --spectrum-slider-focus-ring-size-key-focus: var(--spectrum-alias-focus-ring-size); - /* todo: remove when fixed */ - --spectrum-slider-handle-border-color-key-focus: var(--spectrum-global-color-gray-800); --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-alias-focus-color); } @@ -327,3 +329,46 @@ governing permissions and limitations under the License. margin-inline-end: var(--spectrum-slider-label-gap-x); } } +@media (forced-colors: active) { + :root { + --spectrum-slider-handle-border-color-key-focus: Highlight; + } + .spectrum-Dial { + --spectrum-dial-border-color-hover: Highlight; + --spectrum-dial-handle-marker-color: ButtonText; + --spectrum-dial-handle-marker-color-hover: Highlight; + --spectrum-dial-handle-marker-color-key-focus: Highlight; + --spectrum-dial-min-max-tick-color: GrayText; + } + .spectrum-Slider { + forced-color-adjust: none; + --spectrum-alias-background-color-default: ButtonFace; + --spectrum-alias-focus-color: ButtonText; + --spectrum-label-text-color: CanvasText; + --spectrum-label-text-color-disabled: GrayText; + --spectrum-slider-color-handle-border-color: ButtonText; + --spectrum-slider-color-handle-border-color-disabled: GrayText; + --spectrum-slider-color-handle-color: ButtonFace; + --spectrum-slider-color-handle-color-disabled: ButtonFace; + --spectrum-slider-color-handle-outset-border-color-key-focus: ButtonText; + --spectrum-slider-color-track-border-color: ButtonText; + --spectrum-slider-color-track-color-disabled: GrayText; + --spectrum-slider-fill-track-color: Highlight; + --spectrum-slider-fill-track-color-disabled: GrayText; + --spectrum-slider-handle-background-color: ButtonFace; + --spectrum-slider-handle-background-color-down: ButtonFace; + --spectrum-slider-handle-background-color-key-focus: Highlight; + --spectrum-slider-handle-border-color: ButtonText; + --spectrum-slider-handle-border-color-disabled: GrayText; + --spectrum-slider-handle-border-color-down: Highlight; + --spectrum-slider-handle-border-color-hover: Highlight; + --spectrum-slider-handle-border-color-key-focus: Highlight; + --spectrum-slider-handle-focus-ring-color-key-focus: ButtonText; + --spectrum-slider-player-track-buffer-color: ButtonText; + --spectrum-slider-player-track-buffer-color-disabled: GrayText; + --spectrum-slider-ramp-track-color-disabled: GrayText; + --spectrum-slider-tick-mark-color: ButtonText; + --spectrum-slider-track-color: ButtonText; + --spectrum-slider-track-color-disabled: GrayText; + } +} diff --git a/packages/@adobe/spectrum-css-temp/components/stepper/skin.css b/packages/@adobe/spectrum-css-temp/components/stepper/skin.css index 8af0d086df7..6d295c6f7c4 100644 --- a/packages/@adobe/spectrum-css-temp/components/stepper/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/stepper/skin.css @@ -245,3 +245,59 @@ governing permissions and limitations under the License. } } } +@media (forced-colors: active) { + .spectrum-Stepper { + --spectrum-textfield-border-color-disabled: GrayText; + --spectrum-textfield-border-color-error: Highlight; + --spectrum-textfield-border-color-hover: Highlight; + --spectrum-textfield-border-color-key-focus: Highlight; + --spectrum-textfield-quiet-border-color-disabled: GrayText; + --spectrum-textfield-quiet-border-color-error: Highlight; + --spectrum-textfield-quiet-border-color-hover: Highlight; + --spectrum-textfield-quiet-border-color-key-focus: Highlight; + --spectrum-textfield-quiet-border-color: ButtonText; + --spectrum-textfield-quiet-text-color-disabled: GrayText; + --spectrum-textfield-text-color-disabled: GrayText; + &:not(.spectrum-Stepper--isQuiet) { + &.is-focused, &:focus { + outline: 2px solid Highlight; + } + } + &.spectrum-Stepper--readonly { + &.spectrum-Stepper--isQuiet { + .spectrum-Stepper-button { + border-color: var(--spectrum-textfield-quiet-border-color); + } + } + } + &.spectrum-Stepper--isQuiet { + &.is-focused, + &:focus, + &.focus-ring, + &:focus-ring { + forced-color-adjust: none; + box-shadow: 0 1px 0 0 var(--spectrum-textfield-quiet-border-color-key-focus); + .spectrum-Stepper-input { + forced-color-adjust: auto; + border-color: var(--spectrum-textfield-quiet-border-color-key-focus); + } + .spectrum-Stepper-button { + forced-color-adjust: auto; + border-color: var(--spectrum-textfield-quiet-border-color-key-focus); + } + } + &.is-hovered, + &:hover { + .spectrum-Stepper-input { + border-color: var(--spectrum-textfield-quiet-border-color-key-focus); + } + .spectrum-Stepper-button { + border-color: var(--spectrum-textfield-quiet-border-color-key-focus); + } + } + } + + + + } +} diff --git a/packages/@adobe/spectrum-css-temp/components/tabs/skin.css b/packages/@adobe/spectrum-css-temp/components/tabs/skin.css index 4f042d1a2c5..e9b79e53684 100644 --- a/packages/@adobe/spectrum-css-temp/components/tabs/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/tabs/skin.css @@ -213,5 +213,12 @@ governing permissions and limitations under the License. color: HighlightText; } } + &.spectrum-Tabs--isCollapsed { + :focus-ring { + /* FieldButton Picker focus ring override */ + outline: none; + } + + } } } diff --git a/packages/@adobe/spectrum-css-temp/components/textfield/skin.css b/packages/@adobe/spectrum-css-temp/components/textfield/skin.css index 8acae877bf8..cea3d3401fe 100644 --- a/packages/@adobe/spectrum-css-temp/components/textfield/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/textfield/skin.css @@ -167,3 +167,31 @@ governing permissions and limitations under the License. fill: var(--spectrum-alert-error-icon-color); } } +@media (forced-colors: active) { + .spectrum-Textfield-input { + --spectrum-textfield-text-color-disabled: GrayText; + --spectrum-textfield-border-color-disabled: GrayText; + --spectrum-textfield-quiet-border-color-disabled: GrayText; + --spectrum-textfield-quiet-border-color-key-focus: Highlight; + --spectrum-textfield-border-color-key-focus: Highlight; + --spectrum-textfield-placeholder-text-color: GrayText; + --spectrum-textfield-placeholder-text-color-hover: GrayText; + &.focus-ring, + &:focus-ring { + outline: 2px solid Highlight; + } + .spectrum-Textfield--quiet & { + &.focus-ring, + &:focus-ring { + forced-color-adjust: none; + outline: 0; + box-shadow: 0 1px 0 0 var(--spectrum-textfield-quiet-border-color-key-focus); + .spectrum-Textfield-input { + border-color: var(--spectrum-textfield-quiet-border-color-key-focus); + } + } + } + + + } +} \ No newline at end of file diff --git a/packages/@adobe/spectrum-css-temp/components/toggle/skin.css b/packages/@adobe/spectrum-css-temp/components/toggle/skin.css index ea8287f79b4..ce4dad68b11 100644 --- a/packages/@adobe/spectrum-css-temp/components/toggle/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/toggle/skin.css @@ -224,3 +224,60 @@ governing permissions and limitations under the License. } } } + +@media (forced-colors: active) { + .spectrum-ToggleSwitch { + forced-color-adjust: none; + --spectrum-switch-emphasized-handle-background-color: ButtonFace; + --spectrum-switch-emphasized-handle-border-color: ButtonText; + --spectrum-switch-emphasized-handle-border-color-disabled: GrayText; + --spectrum-switch-emphasized-handle-border-color-down: Highlight; + --spectrum-switch-emphasized-handle-border-color-hover: Highlight; + --spectrum-switch-emphasized-handle-border-color-key-focus: ButtonText; + --spectrum-switch-emphasized-handle-border-color-selected: Highlight; + --spectrum-switch-emphasized-handle-border-color-selected-disabled: GrayText; + --spectrum-switch-emphasized-handle-border-color-selected-down: Highlight; + --spectrum-switch-emphasized-handle-border-color-selected-hover: Highlight; + --spectrum-switch-emphasized-handle-border-color-selected-key-focus: Highlight; + --spectrum-switch-emphasized-text-color: CanvasText; + --spectrum-switch-emphasized-text-color-disabled: GrayText; + --spectrum-switch-emphasized-text-color-down: CanvasText; + --spectrum-switch-emphasized-text-color-hover: CanvasText; + --spectrum-switch-emphasized-text-color-selected-disabled: GrayText; + --spectrum-switch-emphasized-track-color: ButtonFace; + --spectrum-switch-emphasized-track-color-disabled: ButtonFace; + --spectrum-switch-emphasized-track-color-selected: Highlight; + --spectrum-switch-emphasized-track-color-selected-disabled: GrayText; + --spectrum-switch-emphasized-track-color-selected-down: Highlight; + --spectrum-switch-emphasized-track-color-selected-hover: Highlight; + --spectrum-switch-emphasized-track-color-selected-key-focus: Highlight; + --spectrum-switch-focus-ring-color-key-focus: ButtonText; + --spectrum-switch-handle-border-color: ButtonText; + --spectrum-switch-handle-border-color-selected: Highlight; + --spectrum-switch-quiet-handle-border-color-selected: Highlight; + --spectrum-switch-quiet-handle-border-color-selected-down: Highlight; + --spectrum-switch-quiet-handle-border-color-selected-hover: Highlight; + --spectrum-switch-quiet-handle-border-color-selected-key-focus: Highlight; + --spectrum-switch-quiet-track-color-selected: Highlight; + --spectrum-switch-quiet-track-color-selected-down: Highlight; + --spectrum-switch-quiet-track-color-selected-hover: Highlight; + --spectrum-switch-quiet-track-color-selected-key-focus: Highlight; + --spectrum-switch-track-color: ButtonFace; + --spectrum-switch-track-color-disabled: ButtonFace; + /* Add a box-shadow on the switch track when not checked*/ + .spectrum-ToggleSwitch-input:not(:checked) + .spectrum-ToggleSwitch-switch { + box-shadow: inset 0 0 0 1px var(--spectrum-switch-handle-border-color); + } + &:hover { + .spectrum-ToggleSwitch-input:not(:checked) + .spectrum-ToggleSwitch-switch { + box-shadow: inset 0 0 0 1px var(--spectrum-switch-emphasized-handle-border-color-hover); + } + } + /* Disabled is the same colour as when checked so no need to only do this when unchecked*/ + .spectrum-ToggleSwitch-input:disabled + .spectrum-ToggleSwitch-switch { + box-shadow: inset 0 0 0 1px var(--spectrum-switch-emphasized-handle-border-color-disabled); + } + + + } +} diff --git a/packages/@react-spectrum/checkbox/stories/Checkbox.stories.tsx b/packages/@react-spectrum/checkbox/stories/Checkbox.stories.tsx index e554c0e844d..06a3e213882 100644 --- a/packages/@react-spectrum/checkbox/stories/Checkbox.stories.tsx +++ b/packages/@react-spectrum/checkbox/stories/Checkbox.stories.tsx @@ -12,6 +12,8 @@ import {action} from '@storybook/addon-actions'; import {Checkbox} from '../'; +import {Flex} from '@react-spectrum/layout'; +import {Link} from '@react-spectrum/link'; import React from 'react'; import {storiesOf} from '@storybook/react'; @@ -89,6 +91,21 @@ storiesOf('Checkbox', module) .add( 'no label', () => renderNoLabel({'aria-label': 'This checkbox has no visible label'}) + ) + .add( + 'WHCM test', + () => ( + + Shows the different states from spectrum + {renderRow()} + {renderRow({isSelected: true, isEmphasized: true})} + {renderRow({isIndeterminate: true, isEmphasized: true})} + {renderRow({isSelected: true, isEmphasized: false})} + {renderRow({isIndeterminate: true, isEmphasized: false})} + {renderRow({validationState: 'invalid'})} + {renderRow({isSelected: true, validationState: 'invalid'})} + + ) ); function render(props = {}) { @@ -118,3 +135,21 @@ function renderNoLabel(props = {}) { {...props} /> ); } + +function renderRow(props = {}) { + return ( + + + Option + + + Option + + + ); +} diff --git a/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx b/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx index ab8562c53df..478d1640c85 100644 --- a/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx +++ b/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx @@ -21,6 +21,7 @@ import {ComboBox, Item, Section} from '../'; import Copy from '@spectrum-icons/workflow/Copy'; import Draw from '@spectrum-icons/workflow/Draw'; import {Flex} from '@react-spectrum/layout'; +import {Link} from '@react-spectrum/link'; import {mergeProps} from '@react-aria/utils'; import React, {useRef, useState} from 'react'; import {storiesOf} from '@storybook/react'; @@ -466,6 +467,23 @@ storiesOf('ComboBox', module) ) + ) + .add( + 'WHCM test', + () => ( + + Shows the different states from spectrum + {renderRow({placeholder: 'Type here...'})} + {renderRow()} + {renderRow({labelPosition: 'side'})} + {renderRow({isQuiet: true, placeholder: 'Type here...'})} + {renderRow({isQuiet: true})} + {renderRow({isRequired: true})} + {renderRow({isRequired: true, isQuiet: true})} + {renderRow({validationState: 'invalid'})} + {renderRow({validationState: 'invalid', isQuiet: true})} + + ) ); @@ -905,6 +923,29 @@ function render(props = {}) { ); } +function renderRow(props = {}) { + return ( + + + Option 1 + + + Option 2 + + Option 3 + + + Option 1 + + + Option 2 + + Option 3 + + + ); +} + function ComboBoxWithMap(props) { let [items, setItems] = React.useState([ {name: 'The first item', id: 'one'}, diff --git a/packages/@react-spectrum/datepicker/src/styles.css b/packages/@react-spectrum/datepicker/src/styles.css index 9ae5ac4eb81..85294221bdc 100644 --- a/packages/@react-spectrum/datepicker/src/styles.css +++ b/packages/@react-spectrum/datepicker/src/styles.css @@ -182,3 +182,23 @@ padding: 0 var(--spectrum-calendar-day-padding); box-sizing: border-box; } + +@media (forced-colors:active) { + .react-spectrum-DatePicker-cell:focus { + forced-color-adjust: none; + background-color: Highlight; + color: HighlightText; + } + .react-spectrum-DatePicker-cell.is-read-only { + color: ButtonText; + &:focus { + color: HighlightText; + } + } + .react-spectrum-DatePicker-cell.is-placeholder { + color: ButtonText; + &:focus { + color: HighlightText; + } + } +} diff --git a/packages/@react-spectrum/switch/stories/Switch.stories.tsx b/packages/@react-spectrum/switch/stories/Switch.stories.tsx index 8b81733b035..41bea3fd268 100644 --- a/packages/@react-spectrum/switch/stories/Switch.stories.tsx +++ b/packages/@react-spectrum/switch/stories/Switch.stories.tsx @@ -12,6 +12,7 @@ import {chain} from '@react-aria/utils'; import {ComponentMeta, ComponentStoryObj} from '@storybook/react'; +import {Flex} from '@react-spectrum/layout'; import React, {useState} from 'react'; import {Switch} from '../'; @@ -110,3 +111,23 @@ function ControlledSwitch(props) { let [checked, setChecked] = useState(false); return ; } + +export const WHCMTest: SwitchStory = { + render: () => ( + + + Option + Option + + + Option + Option + + + Option + Option + + + ), + name: 'WHCM test' +};