From 5ba857c32a39fa5c44961c9fc4d31d7e28bd5402 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Fri, 12 Nov 2021 15:55:39 -0800 Subject: [PATCH 01/40] fix: merged checkbox fixes from spectrum-css for WHCM --- .../components/checkbox/skin.css | 68 +++++++++++++++++++ 1 file changed, 68 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css index d6337ed72c7..ce248209074 100644 --- a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css @@ -206,3 +206,71 @@ governing permissions and limitations under the License. } } } +@media (forced-colors: active) { + .spectrum-Checkbox-input { + &:focus-ring + .spectrum-Checkbox-box { + forced-color-adjust: none; + outline-color: var(--spectrum-checkbox-focus-ring-color-key-focus); + outline-style: auto; + outline-offset: var(--spectrum-checkbox-m-focus-ring-gap-key-focus); + outline-width: var(--spectrum-checkbox-m-focus-ring-size); + } + } + .spectrum-Checkbox { + --spectrum-checkbox-box-background-color-disabled: ButtonFace; + --spectrum-checkbox-box-background-color: ButtonFace; + --spectrum-checkbox-box-border-color-disabled: GrayText; + --spectrum-checkbox-box-border-color-down: Highlight; + --spectrum-checkbox-box-border-color-error-down: Highlight; + --spectrum-checkbox-box-border-color-error-hover: Highlight; + --spectrum-checkbox-box-border-color-error: Highlight; + --spectrum-checkbox-box-border-color-hover: Highlight; + --spectrum-checkbox-box-border-color-key-focus: Highlight; + --spectrum-checkbox-box-border-color-selected-down: Highlight; + --spectrum-checkbox-box-border-color-selected-hover: Highlight; + --spectrum-checkbox-box-border-color-selected-key-focus: Highlight; + --spectrum-checkbox-box-border-color-selected: Highlight; + --spectrum-checkbox-box-border-color: ButtonText; + --spectrum-checkbox-checkmark-color: HighlightText; + --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-hover: Highlight; + --spectrum-checkbox-emphasized-box-border-color-selected: Highlight; + --spectrum-checkbox-emphasized-text-color-hover: FieldText; + --spectrum-checkbox-focus-ring-color-key-focus: FieldText; + --spectrum-checkbox-text-color-disabled: GrayText; + --spectrum-checkbox-text-color-down: FieldText; + --spectrum-checkbox-text-color-error-down: FieldText; + --spectrum-checkbox-text-color-error-hover: FieldText; + --spectrum-checkbox-quiet-box-border-color-selected: Highlight; + --spectrum-checkbox-checkmark-color: HighlightText; + --spectrum-checkbox-focus-ring-gap-key-focus: var(--spectrum-global-dimension-static-size-25); + --spectrum-checkbox-focus-ring-size: var(--spectrum-global-dimension-static-size-40); + --spectrum-checkbox-box-border-color-error: FieldText; + --spectrum-checkbox-box-border-color-error-hover: FieldText; + --spectrum-checkbox-box-border-color-error-selected: FieldText; + --spectrum-checkbox-text-color-error: FieldText; + --spectrum-checkbox-text-color-hover: FieldText; + --spectrum-checkbox-text-color-key-focus: FieldText; + --spectrum-checkbox-text-color: 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); + } + } + /* 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); + } + } + } + } +} From 1c01b22b7afc3708be8057570221cde160b01c87 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Fri, 12 Nov 2021 16:18:34 -0800 Subject: [PATCH 02/40] fix: WHCM for menu --- .../spectrum-css-temp/components/menu/skin.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/menu/skin.css b/packages/@adobe/spectrum-css-temp/components/menu/skin.css index 2cc6d19c58d..5e2060fa3d1 100644 --- a/packages/@adobe/spectrum-css-temp/components/menu/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/menu/skin.css @@ -69,3 +69,19 @@ 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 { + --spectrum-selectlist-option-icon-color-selected: Highlight; + --spectrum-selectlist-option-text-color-disabled: GrayText; + --spectrum-alias-border-color-focus: Highlight; + &:focus-ring, + &.is-focused { + outline: 2px solid CanvasText; + outline-offset: -2px; + } + } +} \ No newline at end of file From 1cbc0ea84881b7deccb816de6e46906885eb32d4 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Fri, 12 Nov 2021 17:43:44 -0800 Subject: [PATCH 03/40] fix: WHCM fixes for textfield --- .../components/textfield/skin.css | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/textfield/skin.css b/packages/@adobe/spectrum-css-temp/components/textfield/skin.css index 39aca89964a..42bcc9be07e 100644 --- a/packages/@adobe/spectrum-css-temp/components/textfield/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/textfield/skin.css @@ -164,3 +164,32 @@ 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; + &.is-focused, &:focus { + outline: 2px solid Highlight; + } + &.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 From 3d9b038d36daab57591304800159362cc3c79aeb Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Thu, 18 Nov 2021 14:45:16 -0800 Subject: [PATCH 04/40] fix: WHCM for switch --- .../components/toggle/skin.css | 73 +++++++++++++++++++ .../switch/stories/Switch.stories.tsx | 21 ++++++ 2 files changed, 94 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/toggle/skin.css b/packages/@adobe/spectrum-css-temp/components/toggle/skin.css index ea8287f79b4..ac26baf8791 100644 --- a/packages/@adobe/spectrum-css-temp/components/toggle/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/toggle/skin.css @@ -224,3 +224,76 @@ 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; + .spectrum-ToggleSwitch-switch { + &:after { + border-color: var(--spectrum-switch-handle-border-color); + border-style: solid; + } + } + + } + .spectrum-ToggleSwitch .spectrum-ToggleSwitch-input:disabled { + & + .spectrum-ToggleSwitch-switch { + &:after { + border-color: var(--spectrum-switch-emphasized-handle-border-color-disabled); + } + } + } + .spectrum-ToggleSwitch-input { + &:checked + .spectrum-ToggleSwitch-switch { + &:after { + border-color: var(--spectrum-switch-emphasized-handle-border-color-selected); + } + } + } + .spectrum-ToggleSwitch:hover, + .spectrum-ToggleSwitch:active { + .spectrum-ToggleSwitch-input { + & + .spectrum-ToggleSwitch-switch { + &:after { + border-color: var(--spectrum-switch-emphasized-handle-border-color-hover); + } + } + } + } +} diff --git a/packages/@react-spectrum/switch/stories/Switch.stories.tsx b/packages/@react-spectrum/switch/stories/Switch.stories.tsx index 374adc88b02..e061146a45d 100644 --- a/packages/@react-spectrum/switch/stories/Switch.stories.tsx +++ b/packages/@react-spectrum/switch/stories/Switch.stories.tsx @@ -11,9 +11,11 @@ */ import {action} from '@storybook/addon-actions'; +import { Flex } from '@react-spectrum/layout'; import React from 'react'; import {storiesOf} from '@storybook/react'; import {Switch} from '../'; +import { isDisabled } from '@react-spectrum/autocomplete/stories/SearchAutocomplete.stories'; storiesOf('Switch', module) .addParameters({providerSwitcher: {status: 'positive'}}) @@ -69,6 +71,25 @@ storiesOf('Switch', module) .add( 'no label', () => renderNoLabel({'aria-label': 'This switch has no visible label'}) + ) + .add( + 'WHCM test', + () => ( + + + Option + Option + + + Option + Option + + + Option + Option + + + ) ); function render(props = {}) { From 43b053eb9db106fdf1926be637ae357518f5091f Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Wed, 24 Nov 2021 16:53:53 -0800 Subject: [PATCH 05/40] fix: WHCM checkbox - more fixes --- .../components/checkbox/skin.css | 64 ++++++++----------- 1 file changed, 25 insertions(+), 39 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css index ce248209074..69fb3041d50 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,53 +207,39 @@ governing permissions and limitations under the License. } } @media (forced-colors: active) { - .spectrum-Checkbox-input { - &:focus-ring + .spectrum-Checkbox-box { - forced-color-adjust: none; - outline-color: var(--spectrum-checkbox-focus-ring-color-key-focus); - outline-style: auto; - outline-offset: var(--spectrum-checkbox-m-focus-ring-gap-key-focus); - outline-width: var(--spectrum-checkbox-m-focus-ring-size); - } - } .spectrum-Checkbox { - --spectrum-checkbox-box-background-color-disabled: ButtonFace; - --spectrum-checkbox-box-background-color: ButtonFace; - --spectrum-checkbox-box-border-color-disabled: GrayText; - --spectrum-checkbox-box-border-color-down: Highlight; + 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-error: Highlight; - --spectrum-checkbox-box-border-color-hover: Highlight; --spectrum-checkbox-box-border-color-key-focus: Highlight; - --spectrum-checkbox-box-border-color-selected-down: Highlight; - --spectrum-checkbox-box-border-color-selected-hover: Highlight; - --spectrum-checkbox-box-border-color-selected-key-focus: Highlight; - --spectrum-checkbox-box-border-color-selected: Highlight; - --spectrum-checkbox-box-border-color: ButtonText; --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-hover: Highlight; - --spectrum-checkbox-emphasized-box-border-color-selected: 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-focus-ring-color-key-focus: FieldText; - --spectrum-checkbox-text-color-disabled: GrayText; - --spectrum-checkbox-text-color-down: FieldText; - --spectrum-checkbox-text-color-error-down: FieldText; - --spectrum-checkbox-text-color-error-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-checkmark-color: HighlightText; - --spectrum-checkbox-focus-ring-gap-key-focus: var(--spectrum-global-dimension-static-size-25); - --spectrum-checkbox-focus-ring-size: var(--spectrum-global-dimension-static-size-40); - --spectrum-checkbox-box-border-color-error: FieldText; - --spectrum-checkbox-box-border-color-error-hover: FieldText; - --spectrum-checkbox-box-border-color-error-selected: FieldText; - --spectrum-checkbox-text-color-error: FieldText; - --spectrum-checkbox-text-color-hover: FieldText; - --spectrum-checkbox-text-color-key-focus: FieldText; + --spectrum-checkbox-quiet-box-border-color-selected-down: Highlight; + --spectrum-checkbox-quiet-box-border-color-selected-hover: Highlight; --spectrum-checkbox-text-color: FieldText; - &.is-invalid { + --spectrum-checkbox-text-color-disabled: GrayText; + --spectrum-checkbox-text-color-error: Highlight; + --spectrum-checkbox-text-color-error-down: Highlight; + --spectrum-checkbox-text-color-error-hover: Highlight; + + &.is-invalid { .spectrum-Checkbox-box { &:before { border-color: var(--spectrum-checkbox-box-border-color); @@ -271,6 +257,6 @@ governing permissions and limitations under the License. border-color: var(--spectrum-checkbox-box-border-color-error); } } - } + } } } From 984793bb2d3480d5e67f3b90c1151d3a380d45cb Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Wed, 24 Nov 2021 16:54:07 -0800 Subject: [PATCH 06/40] fix: WHCM radioGroup --- .../components/radio/skin.css | 51 +++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/radio/skin.css b/packages/@adobe/spectrum-css-temp/components/radio/skin.css index e6763ac9bef..96e51946373 100644 --- a/packages/@adobe/spectrum-css-temp/components/radio/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/radio/skin.css @@ -189,3 +189,54 @@ governing permissions and limitations under the License. } } } + +@media (forced-colors: active) { + /* .spectrum-Radio-input { + &:focus-ring + .spectrum-Radio-button { + forced-color-adjust: none; + + &:before { + background-color: ButtonFace; + } + } + } */ + .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); + } + } + } +} From 71fbb79d498c7b7e856e23ff6acd68a635efde0f Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Wed, 24 Nov 2021 16:55:55 -0800 Subject: [PATCH 07/40] fix: WHCM slider --- .../components/slider/skin.css | 51 +++++++++++++++++-- 1 file changed, 48 insertions(+), 3 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/slider/skin.css b/packages/@adobe/spectrum-css-temp/components/slider/skin.css index c6644b4a30c..e9cab3c9beb 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: Highlight; + --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; + } +} From 1aa3afa5fb97078c1043fce8c2d623e996273e0d Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Wed, 24 Nov 2021 16:56:07 -0800 Subject: [PATCH 08/40] fix: WHCM stepper --- .../components/stepper/skin.css | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/stepper/skin.css b/packages/@adobe/spectrum-css-temp/components/stepper/skin.css index 8af0d086df7..ca11d5a95c0 100644 --- a/packages/@adobe/spectrum-css-temp/components/stepper/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/stepper/skin.css @@ -245,3 +245,34 @@ governing permissions and limitations under the License. } } } +@media (forced-colors: active) { + .spectrum-Stepper { + --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; + &:not(.spectrum-Stepper--isQuiet) { + &.is-focused, &:focus { + outline: 3px solid Highlight; + } + } + &.spectrum-Stepper--isQuiet { + &.is-focused, &:focus { + border-width: 2px; + } + &.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 { + border-color: var(--spectrum-textfield-quiet-border-color-key-focus); + } + .spectrum-Stepper-button { + border-color: var(--spectrum-textfield-quiet-border-color-key-focus); + } + } + } + + + } +} From b0ba6fca974a76f19329f1c5ec7d62cf0af59511 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Fri, 12 Nov 2021 15:55:39 -0800 Subject: [PATCH 09/40] fix: merged checkbox fixes from spectrum-css for WHCM --- .../components/checkbox/skin.css | 68 +++++++++++++++++++ 1 file changed, 68 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css index 71a8eba846b..888ceaa4110 100644 --- a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css @@ -207,3 +207,71 @@ governing permissions and limitations under the License. } } } +@media (forced-colors: active) { + .spectrum-Checkbox-input { + &:focus-ring + .spectrum-Checkbox-box { + forced-color-adjust: none; + outline-color: var(--spectrum-checkbox-focus-ring-color-key-focus); + outline-style: auto; + outline-offset: var(--spectrum-checkbox-m-focus-ring-gap-key-focus); + outline-width: var(--spectrum-checkbox-m-focus-ring-size); + } + } + .spectrum-Checkbox { + --spectrum-checkbox-box-background-color-disabled: ButtonFace; + --spectrum-checkbox-box-background-color: ButtonFace; + --spectrum-checkbox-box-border-color-disabled: GrayText; + --spectrum-checkbox-box-border-color-down: Highlight; + --spectrum-checkbox-box-border-color-error-down: Highlight; + --spectrum-checkbox-box-border-color-error-hover: Highlight; + --spectrum-checkbox-box-border-color-error: Highlight; + --spectrum-checkbox-box-border-color-hover: Highlight; + --spectrum-checkbox-box-border-color-key-focus: Highlight; + --spectrum-checkbox-box-border-color-selected-down: Highlight; + --spectrum-checkbox-box-border-color-selected-hover: Highlight; + --spectrum-checkbox-box-border-color-selected-key-focus: Highlight; + --spectrum-checkbox-box-border-color-selected: Highlight; + --spectrum-checkbox-box-border-color: ButtonText; + --spectrum-checkbox-checkmark-color: HighlightText; + --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-hover: Highlight; + --spectrum-checkbox-emphasized-box-border-color-selected: Highlight; + --spectrum-checkbox-emphasized-text-color-hover: FieldText; + --spectrum-checkbox-focus-ring-color-key-focus: FieldText; + --spectrum-checkbox-text-color-disabled: GrayText; + --spectrum-checkbox-text-color-down: FieldText; + --spectrum-checkbox-text-color-error-down: FieldText; + --spectrum-checkbox-text-color-error-hover: FieldText; + --spectrum-checkbox-quiet-box-border-color-selected: Highlight; + --spectrum-checkbox-checkmark-color: HighlightText; + --spectrum-checkbox-focus-ring-gap-key-focus: var(--spectrum-global-dimension-static-size-25); + --spectrum-checkbox-focus-ring-size: var(--spectrum-global-dimension-static-size-40); + --spectrum-checkbox-box-border-color-error: FieldText; + --spectrum-checkbox-box-border-color-error-hover: FieldText; + --spectrum-checkbox-box-border-color-error-selected: FieldText; + --spectrum-checkbox-text-color-error: FieldText; + --spectrum-checkbox-text-color-hover: FieldText; + --spectrum-checkbox-text-color-key-focus: FieldText; + --spectrum-checkbox-text-color: 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); + } + } + /* 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); + } + } + } + } +} From ccffaf7307f35cc4900b824a3c49045d91793ab8 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Fri, 12 Nov 2021 16:18:34 -0800 Subject: [PATCH 10/40] fix: WHCM for menu --- .../spectrum-css-temp/components/menu/skin.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/menu/skin.css b/packages/@adobe/spectrum-css-temp/components/menu/skin.css index 2cc6d19c58d..5e2060fa3d1 100644 --- a/packages/@adobe/spectrum-css-temp/components/menu/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/menu/skin.css @@ -69,3 +69,19 @@ 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 { + --spectrum-selectlist-option-icon-color-selected: Highlight; + --spectrum-selectlist-option-text-color-disabled: GrayText; + --spectrum-alias-border-color-focus: Highlight; + &:focus-ring, + &.is-focused { + outline: 2px solid CanvasText; + outline-offset: -2px; + } + } +} \ No newline at end of file From 138b2c41d8c6722033013948cd3af195cb806243 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Fri, 12 Nov 2021 17:43:44 -0800 Subject: [PATCH 11/40] fix: WHCM fixes for textfield --- .../components/textfield/skin.css | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/textfield/skin.css b/packages/@adobe/spectrum-css-temp/components/textfield/skin.css index 39aca89964a..42bcc9be07e 100644 --- a/packages/@adobe/spectrum-css-temp/components/textfield/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/textfield/skin.css @@ -164,3 +164,32 @@ 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; + &.is-focused, &:focus { + outline: 2px solid Highlight; + } + &.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 From 72a76547e160a09e1d66499dc772861998671e88 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Thu, 18 Nov 2021 14:45:16 -0800 Subject: [PATCH 12/40] fix: WHCM for switch --- .../components/toggle/skin.css | 73 +++++++++++++++++++ .../switch/stories/Switch.stories.tsx | 21 ++++++ 2 files changed, 94 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/toggle/skin.css b/packages/@adobe/spectrum-css-temp/components/toggle/skin.css index ea8287f79b4..ac26baf8791 100644 --- a/packages/@adobe/spectrum-css-temp/components/toggle/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/toggle/skin.css @@ -224,3 +224,76 @@ 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; + .spectrum-ToggleSwitch-switch { + &:after { + border-color: var(--spectrum-switch-handle-border-color); + border-style: solid; + } + } + + } + .spectrum-ToggleSwitch .spectrum-ToggleSwitch-input:disabled { + & + .spectrum-ToggleSwitch-switch { + &:after { + border-color: var(--spectrum-switch-emphasized-handle-border-color-disabled); + } + } + } + .spectrum-ToggleSwitch-input { + &:checked + .spectrum-ToggleSwitch-switch { + &:after { + border-color: var(--spectrum-switch-emphasized-handle-border-color-selected); + } + } + } + .spectrum-ToggleSwitch:hover, + .spectrum-ToggleSwitch:active { + .spectrum-ToggleSwitch-input { + & + .spectrum-ToggleSwitch-switch { + &:after { + border-color: var(--spectrum-switch-emphasized-handle-border-color-hover); + } + } + } + } +} diff --git a/packages/@react-spectrum/switch/stories/Switch.stories.tsx b/packages/@react-spectrum/switch/stories/Switch.stories.tsx index 374adc88b02..e061146a45d 100644 --- a/packages/@react-spectrum/switch/stories/Switch.stories.tsx +++ b/packages/@react-spectrum/switch/stories/Switch.stories.tsx @@ -11,9 +11,11 @@ */ import {action} from '@storybook/addon-actions'; +import { Flex } from '@react-spectrum/layout'; import React from 'react'; import {storiesOf} from '@storybook/react'; import {Switch} from '../'; +import { isDisabled } from '@react-spectrum/autocomplete/stories/SearchAutocomplete.stories'; storiesOf('Switch', module) .addParameters({providerSwitcher: {status: 'positive'}}) @@ -69,6 +71,25 @@ storiesOf('Switch', module) .add( 'no label', () => renderNoLabel({'aria-label': 'This switch has no visible label'}) + ) + .add( + 'WHCM test', + () => ( + + + Option + Option + + + Option + Option + + + Option + Option + + + ) ); function render(props = {}) { From 8d749562bd777d725334189a0bd0523098010673 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Wed, 24 Nov 2021 16:53:53 -0800 Subject: [PATCH 13/40] fix: WHCM checkbox - more fixes --- .../components/checkbox/skin.css | 64 ++++++++----------- 1 file changed, 25 insertions(+), 39 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css index 888ceaa4110..7f9756d15a3 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 @@ -208,53 +208,39 @@ governing permissions and limitations under the License. } } @media (forced-colors: active) { - .spectrum-Checkbox-input { - &:focus-ring + .spectrum-Checkbox-box { - forced-color-adjust: none; - outline-color: var(--spectrum-checkbox-focus-ring-color-key-focus); - outline-style: auto; - outline-offset: var(--spectrum-checkbox-m-focus-ring-gap-key-focus); - outline-width: var(--spectrum-checkbox-m-focus-ring-size); - } - } .spectrum-Checkbox { - --spectrum-checkbox-box-background-color-disabled: ButtonFace; - --spectrum-checkbox-box-background-color: ButtonFace; - --spectrum-checkbox-box-border-color-disabled: GrayText; - --spectrum-checkbox-box-border-color-down: Highlight; + 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-error: Highlight; - --spectrum-checkbox-box-border-color-hover: Highlight; --spectrum-checkbox-box-border-color-key-focus: Highlight; - --spectrum-checkbox-box-border-color-selected-down: Highlight; - --spectrum-checkbox-box-border-color-selected-hover: Highlight; - --spectrum-checkbox-box-border-color-selected-key-focus: Highlight; - --spectrum-checkbox-box-border-color-selected: Highlight; - --spectrum-checkbox-box-border-color: ButtonText; --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-hover: Highlight; - --spectrum-checkbox-emphasized-box-border-color-selected: 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-focus-ring-color-key-focus: FieldText; - --spectrum-checkbox-text-color-disabled: GrayText; - --spectrum-checkbox-text-color-down: FieldText; - --spectrum-checkbox-text-color-error-down: FieldText; - --spectrum-checkbox-text-color-error-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-checkmark-color: HighlightText; - --spectrum-checkbox-focus-ring-gap-key-focus: var(--spectrum-global-dimension-static-size-25); - --spectrum-checkbox-focus-ring-size: var(--spectrum-global-dimension-static-size-40); - --spectrum-checkbox-box-border-color-error: FieldText; - --spectrum-checkbox-box-border-color-error-hover: FieldText; - --spectrum-checkbox-box-border-color-error-selected: FieldText; - --spectrum-checkbox-text-color-error: FieldText; - --spectrum-checkbox-text-color-hover: FieldText; - --spectrum-checkbox-text-color-key-focus: FieldText; + --spectrum-checkbox-quiet-box-border-color-selected-down: Highlight; + --spectrum-checkbox-quiet-box-border-color-selected-hover: Highlight; --spectrum-checkbox-text-color: FieldText; - &.is-invalid { + --spectrum-checkbox-text-color-disabled: GrayText; + --spectrum-checkbox-text-color-error: Highlight; + --spectrum-checkbox-text-color-error-down: Highlight; + --spectrum-checkbox-text-color-error-hover: Highlight; + + &.is-invalid { .spectrum-Checkbox-box { &:before { border-color: var(--spectrum-checkbox-box-border-color); @@ -272,6 +258,6 @@ governing permissions and limitations under the License. border-color: var(--spectrum-checkbox-box-border-color-error); } } - } + } } } From 8c793951b3923331f5f4fb2c27ea7c636f90a58a Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Wed, 24 Nov 2021 16:54:07 -0800 Subject: [PATCH 14/40] fix: WHCM radioGroup --- .../components/radio/skin.css | 51 +++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/radio/skin.css b/packages/@adobe/spectrum-css-temp/components/radio/skin.css index e6763ac9bef..96e51946373 100644 --- a/packages/@adobe/spectrum-css-temp/components/radio/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/radio/skin.css @@ -189,3 +189,54 @@ governing permissions and limitations under the License. } } } + +@media (forced-colors: active) { + /* .spectrum-Radio-input { + &:focus-ring + .spectrum-Radio-button { + forced-color-adjust: none; + + &:before { + background-color: ButtonFace; + } + } + } */ + .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); + } + } + } +} From bb3384479b4a779e02ce22af750678edfb40e0cd Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Wed, 24 Nov 2021 16:55:55 -0800 Subject: [PATCH 15/40] fix: WHCM slider --- .../components/slider/skin.css | 51 +++++++++++++++++-- 1 file changed, 48 insertions(+), 3 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/slider/skin.css b/packages/@adobe/spectrum-css-temp/components/slider/skin.css index c6644b4a30c..e9cab3c9beb 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: Highlight; + --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; + } +} From 92b75047ec2ece5c62f4aded28ee16c8386bb990 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Wed, 24 Nov 2021 16:56:07 -0800 Subject: [PATCH 16/40] fix: WHCM stepper --- .../components/stepper/skin.css | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/stepper/skin.css b/packages/@adobe/spectrum-css-temp/components/stepper/skin.css index 8af0d086df7..ca11d5a95c0 100644 --- a/packages/@adobe/spectrum-css-temp/components/stepper/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/stepper/skin.css @@ -245,3 +245,34 @@ governing permissions and limitations under the License. } } } +@media (forced-colors: active) { + .spectrum-Stepper { + --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; + &:not(.spectrum-Stepper--isQuiet) { + &.is-focused, &:focus { + outline: 3px solid Highlight; + } + } + &.spectrum-Stepper--isQuiet { + &.is-focused, &:focus { + border-width: 2px; + } + &.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 { + border-color: var(--spectrum-textfield-quiet-border-color-key-focus); + } + .spectrum-Stepper-button { + border-color: var(--spectrum-textfield-quiet-border-color-key-focus); + } + } + } + + + } +} From 77035421b9b38c199ca4783205c5af63d3f18c05 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Wed, 9 Feb 2022 18:31:07 -0800 Subject: [PATCH 17/40] Add calendar WHCM --- .../components/calendar/skin.css | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/calendar/skin.css b/packages/@adobe/spectrum-css-temp/components/calendar/skin.css index 868d22ebc3d..2327b37bcf7 100644 --- a/packages/@adobe/spectrum-css-temp/components/calendar/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/calendar/skin.css @@ -123,3 +123,43 @@ 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-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-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; + } + } + } +} From f45332bc2bc56b631063cdf5f3f1976c1e5e78cd Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Wed, 9 Feb 2022 18:31:28 -0800 Subject: [PATCH 18/40] Add InputGroup WHCM --- .../components/inputgroup/skin.css | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css b/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css index df0007a567c..7508ec15b3c 100644 --- a/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css @@ -217,3 +217,38 @@ 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: Canvas; + --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; + } + + .spectrum-FieldButton:not(.spectrum-InputGroup--quiet) { + &:not(.is-disabled) { + &:disabled, + &:disabled:hover { + border-color: GrayText; + border-width: 1px; + } + } + } +} + + .spectrum-InputGroup:focus-ring:not(.spectrum-InputGroup--quiet) { + outline:2px solid Highlight; + } +} From f7cda1f8174a8e4fa8b7951438d83d9f3d9f2b50 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Wed, 9 Feb 2022 18:31:41 -0800 Subject: [PATCH 19/40] Add Color Controls WHCM --- .../components/colorhandle/skin.css | 14 ++++++++++++++ .../components/colorloupe/skin.css | 8 ++++++++ .../components/colorslider/skin.css | 10 ++++++++++ .../components/colorwheel/skin.css | 10 ++++++++++ 4 files changed, 42 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/colorhandle/skin.css b/packages/@adobe/spectrum-css-temp/components/colorhandle/skin.css index 86ef9874b03..d4cc5754364 100644 --- a/packages/@adobe/spectrum-css-temp/components/colorhandle/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/colorhandle/skin.css @@ -34,3 +34,17 @@ .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; + &.is-focused { + border-color: Highlight; + } + + } +} \ 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 From a7f7d3913bf7bf8e3b2016bf6d1034e96fb1d2ce Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Thu, 10 Feb 2022 09:19:12 -0800 Subject: [PATCH 20/40] fix linter --- packages/@react-spectrum/switch/stories/Switch.stories.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/@react-spectrum/switch/stories/Switch.stories.tsx b/packages/@react-spectrum/switch/stories/Switch.stories.tsx index e061146a45d..8118c0961ec 100644 --- a/packages/@react-spectrum/switch/stories/Switch.stories.tsx +++ b/packages/@react-spectrum/switch/stories/Switch.stories.tsx @@ -11,11 +11,10 @@ */ import {action} from '@storybook/addon-actions'; -import { Flex } from '@react-spectrum/layout'; +import {Flex} from '@react-spectrum/layout'; import React from 'react'; import {storiesOf} from '@storybook/react'; import {Switch} from '../'; -import { isDisabled } from '@react-spectrum/autocomplete/stories/SearchAutocomplete.stories'; storiesOf('Switch', module) .addParameters({providerSwitcher: {status: 'positive'}}) From e572c56bf918d0191701a61a1720ad8be4588fc5 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Thu, 10 Feb 2022 16:37:37 -0800 Subject: [PATCH 21/40] fix: Picker WHCM --- .../components/dropdown/skin.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/dropdown/skin.css b/packages/@adobe/spectrum-css-temp/components/dropdown/skin.css index ec3a6a77273..a70c7ef19a9 100644 --- a/packages/@adobe/spectrum-css-temp/components/dropdown/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/dropdown/skin.css @@ -84,3 +84,20 @@ 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; + } +} From 78b6f4cf6bddbe9e993f80b2bcfa2361177af85c Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Fri, 11 Feb 2022 16:23:46 -0800 Subject: [PATCH 22/40] fix: add WHCM checkbox story --- .../components/checkbox/skin.css | 11 ++++-- .../checkbox/stories/Checkbox.stories.tsx | 35 +++++++++++++++++++ 2 files changed, 43 insertions(+), 3 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css index 7f9756d15a3..76dd006d733 100644 --- a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css @@ -236,9 +236,9 @@ governing permissions and limitations under the License. --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: Highlight; - --spectrum-checkbox-text-color-error-down: Highlight; - --spectrum-checkbox-text-color-error-hover: Highlight; + --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 { @@ -251,6 +251,11 @@ governing permissions and limitations under the License. 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 { 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 + + + ); +} From 26121dca05216ede1e71269bb28cc9f0f0721d5c Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Thu, 17 Feb 2022 15:43:50 -0800 Subject: [PATCH 23/40] fix: update WHCM combo/menu/picker --- .../components/inputgroup/skin.css | 64 +++++++++++++++++-- .../components/menu/skin.css | 25 ++++++-- .../combobox/stories/ComboBox.stories.tsx | 41 ++++++++++++ 3 files changed, 119 insertions(+), 11 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css b/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css index 7508ec15b3c..b29563601ed 100644 --- a/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css @@ -225,7 +225,7 @@ governing permissions and limitations under the License. --spectrum-textfield-border-color-hover: Highlight; --spectrum-textfield-border-color-key-focus: Highlight; --spectrum-textfield-quiet-border-color: Canvas; - --spectrum-textfield-quiet-border-color-disabled: GrayText; + --spectrum-textfield-quiet-border-color-disabled: Canvas; --spectrum-textfield-quiet-border-color-hover: Highlight; --spectrum-textfield-quiet-border-color-key-focus: Highlight; --spectrum-textfield-text-color-disabled: GrayText; @@ -237,18 +237,68 @@ governing permissions and limitations under the License. forced-color-adjust: auto; } - .spectrum-FieldButton:not(.spectrum-InputGroup--quiet) { - &:not(.is-disabled) { + &.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: GrayText; - border-width: 1px; + 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 { + &: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); + } + } + } + .spectrum-InputGroup { + &.is-focused { + &:not(.spectrum-InputGroup--quiet):not(.spectrum-InputGroup--invalid):not(.is-disabled) { + outline:2px solid Highlight; + } + } } } + diff --git a/packages/@adobe/spectrum-css-temp/components/menu/skin.css b/packages/@adobe/spectrum-css-temp/components/menu/skin.css index 5e2060fa3d1..37843775da8 100644 --- a/packages/@adobe/spectrum-css-temp/components/menu/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/menu/skin.css @@ -75,13 +75,30 @@ governing permissions and limitations under the License. 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: ButtonFace; + --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: ButtonText; + --spectrum-selectlist-option-text-color-key-focus: HighlightText; --spectrum-alias-border-color-focus: Highlight; - &:focus-ring, - &.is-focused { - outline: 2px solid CanvasText; - outline-offset: -2px; + &:focus-ring, &.is-focused { + &.is-selected { + .spectrum-Menu-checkmark { + color: HighlightText; + } + } + 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/@react-spectrum/combobox/stories/ComboBox.stories.tsx b/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx index f2431ffb65c..bce0e5973b9 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'; @@ -470,6 +471,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})} + + ) ); @@ -909,6 +927,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'}, From 15c842983f206f6522502ae44693feae722fe770 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Thu, 17 Mar 2022 16:38:22 -0700 Subject: [PATCH 24/40] fix: add hover style for today --- .../@adobe/spectrum-css-temp/components/calendar/skin.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/calendar/skin.css b/packages/@adobe/spectrum-css-temp/components/calendar/skin.css index 2327b37bcf7..f0762c5938d 100644 --- a/packages/@adobe/spectrum-css-temp/components/calendar/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/calendar/skin.css @@ -161,5 +161,10 @@ governing permissions and limitations under the License. color: HighlightText; } } + &:hover { + &.is-today { + color: var(--spectrum-calendar-day-today-text-color); + } + } } } From 1b3cb8a67d0d9a6f61995555f862565ee86458a3 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Fri, 18 Mar 2022 12:14:34 -0700 Subject: [PATCH 25/40] fix: remove comment from radio --- .../@adobe/spectrum-css-temp/components/radio/skin.css | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/radio/skin.css b/packages/@adobe/spectrum-css-temp/components/radio/skin.css index 96e51946373..3a362c5c18b 100644 --- a/packages/@adobe/spectrum-css-temp/components/radio/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/radio/skin.css @@ -191,15 +191,6 @@ governing permissions and limitations under the License. } @media (forced-colors: active) { - /* .spectrum-Radio-input { - &:focus-ring + .spectrum-Radio-button { - forced-color-adjust: none; - - &:before { - background-color: ButtonFace; - } - } - } */ .spectrum-Radio { forced-color-adjust: none; --spectrum-radio-circle-border-color-error-key-focus: ButtonText; From 4f629a7635602bf0c279eaf09977a1681334a58d Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Fri, 18 Mar 2022 14:05:48 -0700 Subject: [PATCH 26/40] fix: indents in inputgroup --- .../components/inputgroup/skin.css | 85 +++++++++---------- 1 file changed, 42 insertions(+), 43 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css b/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css index b29563601ed..b2d71575399 100644 --- a/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css @@ -229,59 +229,58 @@ governing permissions and limitations under the License. --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; + 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); + .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; } } } - &.is-disabled { + .spectrum-InputGroup--invalid { .spectrum-FieldButton { - border-color: GrayText; + border-color: Highlight; } - } -} -.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 { + &.is-disabled:not(.spectrum-InputGroup--quiet) .spectrum-InputGroup-input { border-color: GrayText; } - &.spectrum-InputGroup--quiet .spectrum-FieldButton { + &.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; } } - &.is-disabled:not(.spectrum-InputGroup--quiet) .spectrum-FieldButton { - border-color: GrayText; - } -} .spectrum-InputGroup { &:focus-ring { @@ -289,14 +288,14 @@ governing permissions and limitations under the License. outline:2px solid Highlight; } &.spectrum-InputGroup--quiet { - box-shadow: 0 2px 0 0 var(--spectrum-dropdown-border-color-key-focus); + box-shadow: 0 2px 0 0 var(--spectrum-dropdown-border-color-key-focus); } } } .spectrum-InputGroup { &.is-focused { &:not(.spectrum-InputGroup--quiet):not(.spectrum-InputGroup--invalid):not(.is-disabled) { - outline:2px solid Highlight; + outline:2px solid Highlight; } } } From acd7ce3256244b09bc323cf7cbce99e18f9f27d0 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Fri, 18 Mar 2022 14:22:03 -0700 Subject: [PATCH 27/40] fix: textfield border on hover in WHCM --- .../spectrum-css-temp/components/textfield/skin.css | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/textfield/skin.css b/packages/@adobe/spectrum-css-temp/components/textfield/skin.css index 42bcc9be07e..0320f9569b1 100644 --- a/packages/@adobe/spectrum-css-temp/components/textfield/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/textfield/skin.css @@ -173,14 +173,17 @@ governing permissions and limitations under the License. --spectrum-textfield-border-color-key-focus: Highlight; --spectrum-textfield-placeholder-text-color: GrayText; --spectrum-textfield-placeholder-text-color-hover: GrayText; - &.is-focused, &:focus { - outline: 2px solid Highlight; - } - &.focus-ring, &:focus-ring { + &.is-focused, + &:focus + &.focus-ring, + &:focus-ring { outline: 2px solid Highlight; } .spectrum-Textfield--quiet & { - &.focus-ring, &:focus-ring { + &.is-focused, + &:focus , + &.focus-ring, + &:focus-ring { forced-color-adjust: none; outline: 0; box-shadow: 0 1px 0 0 var(--spectrum-textfield-quiet-border-color-key-focus); From c3a89fa13e15ebf36bd02e6d894d9f0074821fe2 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Fri, 18 Mar 2022 16:28:45 -0700 Subject: [PATCH 28/40] fix: switch review comments WHCM --- .../components/toggle/skin.css | 38 ++++++------------- 1 file changed, 11 insertions(+), 27 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/toggle/skin.css b/packages/@adobe/spectrum-css-temp/components/toggle/skin.css index ac26baf8791..ce4dad68b11 100644 --- a/packages/@adobe/spectrum-css-temp/components/toggle/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/toggle/skin.css @@ -264,36 +264,20 @@ governing permissions and limitations under the License. --spectrum-switch-quiet-track-color-selected-key-focus: Highlight; --spectrum-switch-track-color: ButtonFace; --spectrum-switch-track-color-disabled: ButtonFace; - .spectrum-ToggleSwitch-switch { - &:after { - border-color: var(--spectrum-switch-handle-border-color); - border-style: solid; - } + /* 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); } - - } - .spectrum-ToggleSwitch .spectrum-ToggleSwitch-input:disabled { - & + .spectrum-ToggleSwitch-switch { - &:after { - border-color: var(--spectrum-switch-emphasized-handle-border-color-disabled); + &:hover { + .spectrum-ToggleSwitch-input:not(:checked) + .spectrum-ToggleSwitch-switch { + box-shadow: inset 0 0 0 1px var(--spectrum-switch-emphasized-handle-border-color-hover); } } - } - .spectrum-ToggleSwitch-input { - &:checked + .spectrum-ToggleSwitch-switch { - &:after { - border-color: var(--spectrum-switch-emphasized-handle-border-color-selected); - } + /* 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); } + + } - .spectrum-ToggleSwitch:hover, - .spectrum-ToggleSwitch:active { - .spectrum-ToggleSwitch-input { - & + .spectrum-ToggleSwitch-switch { - &:after { - border-color: var(--spectrum-switch-emphasized-handle-border-color-hover); - } - } - } - } } From 38acf7c59f742077e581abc257f2a40b84a09e93 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Fri, 18 Mar 2022 17:07:22 -0700 Subject: [PATCH 29/40] fix: stepper fixes from review comments --- .../components/stepper/skin.css | 39 +++++++++++++++---- 1 file changed, 32 insertions(+), 7 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/stepper/skin.css b/packages/@adobe/spectrum-css-temp/components/stepper/skin.css index ca11d5a95c0..6d295c6f7c4 100644 --- a/packages/@adobe/spectrum-css-temp/components/stepper/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/stepper/skin.css @@ -247,23 +247,47 @@ governing permissions and limitations under the License. } @media (forced-colors: active) { .spectrum-Stepper { - --spectrum-textfield-text-color-disabled: GrayText; --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-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: 3px solid Highlight; + outline: 2px solid Highlight; } } - &.spectrum-Stepper--isQuiet { - &.is-focused, &:focus { - border-width: 2px; + &.spectrum-Stepper--readonly { + &.spectrum-Stepper--isQuiet { + .spectrum-Stepper-button { + border-color: var(--spectrum-textfield-quiet-border-color); + } } - &.focus-ring, &:focus-ring { + } + &.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); } @@ -272,6 +296,7 @@ governing permissions and limitations under the License. } } } + } From e873aabf3fa45ef30a06bc759d0ad34f6796ce7b Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Mon, 21 Mar 2022 16:50:28 -0700 Subject: [PATCH 30/40] fix: inputgroup, picker, menu review comments --- .../components/dropdown/skin.css | 9 +++++++++ .../components/inputgroup/skin.css | 5 ++++- .../components/menu/skin.css | 19 ++++++++++++++++--- 3 files changed, 29 insertions(+), 4 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/dropdown/skin.css b/packages/@adobe/spectrum-css-temp/components/dropdown/skin.css index a70c7ef19a9..174d5bf699d 100644 --- a/packages/@adobe/spectrum-css-temp/components/dropdown/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/dropdown/skin.css @@ -100,4 +100,13 @@ governing permissions and limitations under the License. --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 b2d71575399..68c95d01a67 100644 --- a/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css @@ -283,7 +283,10 @@ governing permissions and limitations under the License. } .spectrum-InputGroup { - &:focus-ring { + &:focus-ring, + &:hover:not(.spectrum-InputGroup--invalid):not(.is-focused):not(.is-disabled), + &.is-focused + { &:not(.spectrum-InputGroup--quiet) { outline:2px solid Highlight; } diff --git a/packages/@adobe/spectrum-css-temp/components/menu/skin.css b/packages/@adobe/spectrum-css-temp/components/menu/skin.css index 37843775da8..c328dce0a7d 100644 --- a/packages/@adobe/spectrum-css-temp/components/menu/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/menu/skin.css @@ -82,21 +82,34 @@ governing permissions and limitations under the License. --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: 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: ButtonText; + --spectrum-selectlist-option-text-color-hover: HighlightText; --spectrum-selectlist-option-text-color-key-focus: HighlightText; --spectrum-alias-border-color-focus: Highlight; - &:focus-ring, &.is-focused { + /* 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); } From fafdfb2db88cb288df9eaf495989db9237ccc2f6 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Tue, 7 Jun 2022 16:38:25 -0700 Subject: [PATCH 31/40] remove focus colour for colorhandle --- .../@adobe/spectrum-css-temp/components/colorhandle/skin.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/colorhandle/skin.css b/packages/@adobe/spectrum-css-temp/components/colorhandle/skin.css index d4cc5754364..6a0ca1347f6 100644 --- a/packages/@adobe/spectrum-css-temp/components/colorhandle/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/colorhandle/skin.css @@ -42,9 +42,5 @@ --spectrum-colorhandle-fill-color-disabled: GrayText; --spectrum-colorhandle-inner-border-color: ButtonText; --spectrum-colorhandle-outer-border-color: ButtonFace; - &.is-focused { - border-color: Highlight; - } - } } \ No newline at end of file From b4b6d7f3af374eb7cbdfd765ad80e22ab5c99a3d Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Tue, 7 Jun 2022 17:26:38 -0700 Subject: [PATCH 32/40] add focus on cells within dateFields --- packages/@react-spectrum/datepicker/src/index.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/@react-spectrum/datepicker/src/index.css b/packages/@react-spectrum/datepicker/src/index.css index d29bac298ad..ffeb80a4857 100644 --- a/packages/@react-spectrum/datepicker/src/index.css +++ b/packages/@react-spectrum/datepicker/src/index.css @@ -171,3 +171,17 @@ 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; + } + .react-spectrum-DatePicker-cell.is-placeholder { + color: ButtonText; + } +} From 9ef0248ae2a6fd1e8dab83778c85467f46684fae Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Wed, 8 Jun 2022 16:57:54 -0700 Subject: [PATCH 33/40] fix placeholder for dropdown --- .../@adobe/spectrum-css-temp/components/dropdown/skin.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/dropdown/skin.css b/packages/@adobe/spectrum-css-temp/components/dropdown/skin.css index fffcc54bd03..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); } } From f041a65c904169a851a7807fff2d16a0090c42a9 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Thu, 16 Jun 2022 16:29:14 -0700 Subject: [PATCH 34/40] add focus overrides for readonly & placeholder --- packages/@react-spectrum/datepicker/src/styles.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/@react-spectrum/datepicker/src/styles.css b/packages/@react-spectrum/datepicker/src/styles.css index 81ffd13c102..85294221bdc 100644 --- a/packages/@react-spectrum/datepicker/src/styles.css +++ b/packages/@react-spectrum/datepicker/src/styles.css @@ -191,8 +191,14 @@ } .react-spectrum-DatePicker-cell.is-read-only { color: ButtonText; + &:focus { + color: HighlightText; + } } .react-spectrum-DatePicker-cell.is-placeholder { color: ButtonText; + &:focus { + color: HighlightText; + } } } From 06d95f1f6a8ea9665fa34ef0bbd20a75e82c683f Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Fri, 24 Jun 2022 13:52:18 -0700 Subject: [PATCH 35/40] fix: unavailable today date was invisible --- .../@adobe/spectrum-css-temp/components/calendar/skin.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/calendar/skin.css b/packages/@adobe/spectrum-css-temp/components/calendar/skin.css index 17546c6a9fd..4091d08e8e7 100644 --- a/packages/@adobe/spectrum-css-temp/components/calendar/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/calendar/skin.css @@ -189,6 +189,11 @@ governing permissions and limitations under the License. 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); From e29d077fccbcb8d4c9b012ea1997d7f2c0654457 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Mon, 27 Jun 2022 15:15:40 -0700 Subject: [PATCH 36/40] fix slider down state --- packages/@adobe/spectrum-css-temp/components/slider/skin.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@adobe/spectrum-css-temp/components/slider/skin.css b/packages/@adobe/spectrum-css-temp/components/slider/skin.css index e9cab3c9beb..4426f0bc6d7 100644 --- a/packages/@adobe/spectrum-css-temp/components/slider/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/slider/skin.css @@ -356,7 +356,7 @@ governing permissions and limitations under the License. --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: Highlight; + --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; From 26a3d97bd93e5405dca42751be5235146bd6db0e Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Mon, 27 Jun 2022 15:30:43 -0700 Subject: [PATCH 37/40] Fix quiet combobox --- .../@adobe/spectrum-css-temp/components/inputgroup/skin.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css b/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css index 68c95d01a67..ca0664e3b68 100644 --- a/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css @@ -224,8 +224,8 @@ governing permissions and limitations under the License. --spectrum-textfield-border-color-error: Highlight; --spectrum-textfield-border-color-hover: Highlight; --spectrum-textfield-border-color-key-focus: Highlight; - --spectrum-textfield-quiet-border-color: Canvas; - --spectrum-textfield-quiet-border-color-disabled: Canvas; + --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; From 6726f839b463ab13899ff0c1b10540e29b041fc7 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Wed, 29 Jun 2022 17:33:24 -0700 Subject: [PATCH 38/40] Add invalid colours --- .../@adobe/spectrum-css-temp/components/calendar/skin.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/calendar/skin.css b/packages/@adobe/spectrum-css-temp/components/calendar/skin.css index 4091d08e8e7..4ed1f7be39f 100644 --- a/packages/@adobe/spectrum-css-temp/components/calendar/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/calendar/skin.css @@ -158,11 +158,16 @@ governing permissions and limitations under the License. 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; From d90330ea898f6126248b6182ed3ddfe3da9d4793 Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Thu, 30 Jun 2022 13:57:25 -0400 Subject: [PATCH 39/40] ColorArea should have forced-color-adjust: none In order to reproduce the overlapping gradients for a ColorArea, the container element .spectrum-ColorArea will have a background-image or background-color over which the .spectrum-ColorArea-gradient renders. --- .../spectrum-css-temp/components/colorarea/skin.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) 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 + } From 3930fec59c7c8c2c2d94418b154da249f70bb334 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Fri, 1 Jul 2022 14:59:16 -0700 Subject: [PATCH 40/40] fix: combobox/picker/date/textfield hover/active style --- .../spectrum-css-temp/components/button/skin.css | 14 ++++++++++++++ .../components/inputgroup/skin.css | 13 ++----------- .../spectrum-css-temp/components/tabs/skin.css | 7 +++++++ .../components/textfield/skin.css | 4 ---- 4 files changed, 23 insertions(+), 15 deletions(-) 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/inputgroup/skin.css b/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css index ca0664e3b68..fe9922e371a 100644 --- a/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css @@ -283,10 +283,8 @@ governing permissions and limitations under the License. } .spectrum-InputGroup { - &:focus-ring, - &:hover:not(.spectrum-InputGroup--invalid):not(.is-focused):not(.is-disabled), - &.is-focused - { + &:focus-ring + { &:not(.spectrum-InputGroup--quiet) { outline:2px solid Highlight; } @@ -295,12 +293,5 @@ governing permissions and limitations under the License. } } } - .spectrum-InputGroup { - &.is-focused { - &:not(.spectrum-InputGroup--quiet):not(.spectrum-InputGroup--invalid):not(.is-disabled) { - outline:2px solid Highlight; - } - } - } } 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 0320f9569b1..dec2a3a6a6a 100644 --- a/packages/@adobe/spectrum-css-temp/components/textfield/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/textfield/skin.css @@ -173,15 +173,11 @@ governing permissions and limitations under the License. --spectrum-textfield-border-color-key-focus: Highlight; --spectrum-textfield-placeholder-text-color: GrayText; --spectrum-textfield-placeholder-text-color-hover: GrayText; - &.is-focused, - &:focus &.focus-ring, &:focus-ring { outline: 2px solid Highlight; } .spectrum-Textfield--quiet & { - &.is-focused, - &:focus , &.focus-ring, &:focus-ring { forced-color-adjust: none;