From a560b5f3406042403044e81b1a853697c2911ca8 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Fri, 12 Nov 2021 14:47:14 -0800 Subject: [PATCH 01/13] fix: add focus outline to accordion in WHCM --- .../@adobe/spectrum-css-temp/components/accordion/skin.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/accordion/skin.css b/packages/@adobe/spectrum-css-temp/components/accordion/skin.css index c8e26abf71f..3e6f245de2c 100644 --- a/packages/@adobe/spectrum-css-temp/components/accordion/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/accordion/skin.css @@ -62,3 +62,10 @@ governing permissions and limitations under the License. } } } +@media (forced-colors: active) { + .spectrum-Accordion-itemHeader { + &:focus-ring { + outline: 3px solid CanvasText; + } + } +} \ No newline at end of file From 10ff0f66b630c97384557c19a63b634d5f28ceeb Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Fri, 12 Nov 2021 14:52:00 -0800 Subject: [PATCH 02/13] fix: add border around actionbar in WHCM --- packages/@react-spectrum/actionbar/src/actionbar.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/@react-spectrum/actionbar/src/actionbar.css b/packages/@react-spectrum/actionbar/src/actionbar.css index c7f821cee73..49560200b61 100644 --- a/packages/@react-spectrum/actionbar/src/actionbar.css +++ b/packages/@react-spectrum/actionbar/src/actionbar.css @@ -81,3 +81,11 @@ min-width: 0; } } +@media (forced-colors: active) { + .react-spectrum-ActionBar { + &.react-spectrum-ActionBar--emphasized .react-spectrum-ActionBar-bar { + + border: 1px solid transparent; + } + } +} From c95de95dbe1c0c6d10a925bba8bc30aefd8aa3bc Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Fri, 12 Nov 2021 14:59:03 -0800 Subject: [PATCH 03/13] fix: Add GrayText border - disabled avatar in WHCM --- .../@adobe/spectrum-css-temp/components/avatar/skin.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/avatar/skin.css b/packages/@adobe/spectrum-css-temp/components/avatar/skin.css index a7b3ca51811..ffb69b9ee98 100644 --- a/packages/@adobe/spectrum-css-temp/components/avatar/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/avatar/skin.css @@ -19,3 +19,11 @@ governing permissions and limitations under the License. opacity: var(--spectrum-avatar-small-opacity-disabled); } } +@media (forced-colors: active) { + .spectrum-Avatar { + &.is-disabled { + opacity: 1; + border: 2px solid GrayText; + } + } +} \ No newline at end of file From e822a07ff19ffa52028fb659d81fad31ee44af99 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Fri, 12 Nov 2021 15:45:39 -0800 Subject: [PATCH 04/13] fix: WHCM fixes for breadcrumbs --- .../components/breadcrumb/skin.css | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/breadcrumb/skin.css b/packages/@adobe/spectrum-css-temp/components/breadcrumb/skin.css index 76eeed0fcc9..d7b904b8e23 100644 --- a/packages/@adobe/spectrum-css-temp/components/breadcrumb/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/breadcrumb/skin.css @@ -72,3 +72,37 @@ governing permissions and limitations under the License. } } } +@media (forced-colors: active) { + .spectrum-Breadcrumbs-item { + --spectrum-breadcrumb-item-border-color-drop: LinkText; + --spectrum-breadcrumb-item-border-color-key-focus: CanvasText; + --spectrum-breadcrumb-item-text-color-drop: LinkText; + --spectrum-breadcrumb-text-color: LinkText; + --spectrum-breadcrumb-text-color-down: CanvasText; + --spectrum-breadcrumb-text-color-hover: LinkText; + --spectrum-breadcrumb-text-color-key-focus: LinkText; + --spectrum-breadcrumb-ui-icon-color: CanvasText; + --spectrum-label-text-color-disabled: GrayText; + /* Override the selected to be the Standard Text color */ + &.is-selected, + &:last-of-type { + color: var(--spectrum-breadcrumb-text-color-down); + .spectrum-Breadcrumbs-itemLink { + &:hover { + color: var(--spectrum-breadcrumb-text-color-down); + } + } + } + /* Make links stay link color when clicked and disabled links remain disabled color */ + .spectrum-Breadcrumbs-itemLink { + &:active { + color: var(--spectrum-breadcrumb-text-color); + } + &.is-disabled { + &:active { + color: var(--spectrum-label-text-color-disabled); + } + } + } + } +} From 4d91aa781b72ce566171177a01cc27beba754712 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Wed, 24 Nov 2021 17:09:06 -0800 Subject: [PATCH 05/13] fix: WHCM tooltips --- .../spectrum-css-temp/components/tooltip/skin.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/tooltip/skin.css b/packages/@adobe/spectrum-css-temp/components/tooltip/skin.css index 1d686e74e95..2ffb49caa28 100644 --- a/packages/@adobe/spectrum-css-temp/components/tooltip/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/tooltip/skin.css @@ -46,3 +46,13 @@ governing permissions and limitations under the License. border-top-color: var(--spectrum-tooltip-positive-background-color); } } + +@media (forced-colors: active) { + .spectrum-Tooltip { + border: 1px solid transparent; + } + .spectrum-Tooltip-tip { + forced-color-adjust: none; + --spectrum-tooltip-background-color: CanvasText; + } +} \ No newline at end of file From f4a43ac598409566c8d8cdbd2a499c1bced990e5 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Wed, 24 Nov 2021 17:13:13 -0800 Subject: [PATCH 06/13] fix: Add variants for WHCM tooltip --- packages/@adobe/spectrum-css-temp/components/tooltip/skin.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/tooltip/skin.css b/packages/@adobe/spectrum-css-temp/components/tooltip/skin.css index 2ffb49caa28..4e9b6a1d971 100644 --- a/packages/@adobe/spectrum-css-temp/components/tooltip/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/tooltip/skin.css @@ -54,5 +54,8 @@ governing permissions and limitations under the License. .spectrum-Tooltip-tip { forced-color-adjust: none; --spectrum-tooltip-background-color: CanvasText; + --spectrum-tooltip-negative-background-color: Highlight; + --spectrum-tooltip-info-background-color: Highlight; + --spectrum-tooltip-positive-background-color: Highlight; } } \ No newline at end of file From 429d7c67efaf39806fc7a34b936059ec73bd67c5 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Wed, 24 Nov 2021 17:13:25 -0800 Subject: [PATCH 07/13] fix: WHCM toast --- packages/@adobe/spectrum-css-temp/components/toast/skin.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/toast/skin.css b/packages/@adobe/spectrum-css-temp/components/toast/skin.css index 1b8dff8f38f..b2202cd00d6 100644 --- a/packages/@adobe/spectrum-css-temp/components/toast/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/toast/skin.css @@ -72,3 +72,9 @@ governing permissions and limitations under the License. } } } + +@media (forced-colors: active) { + .spectrum-Toast { + border: 1px solid transparent; + } +} From 24f5c37d649f9264437287f83248cb021e0c3a1a Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Wed, 24 Nov 2021 17:31:02 -0800 Subject: [PATCH 08/13] fix: WHCM tags --- .../components/tags/skin.css | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/tags/skin.css b/packages/@adobe/spectrum-css-temp/components/tags/skin.css index f25d64c914f..a0e2f7a3584 100644 --- a/packages/@adobe/spectrum-css-temp/components/tags/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/tags/skin.css @@ -155,3 +155,50 @@ governing permissions and limitations under the License. } } } + +@media (forced-colors: active) { + .spectrum-Tags-item { + forced-color-adjust: none; + --spectrum-tag-background-color: ButtonFace; + --spectrum-tag-background-color-disabled: ButtonFace; + --spectrum-tag-background-color-hover: ButtonFace; + --spectrum-tag-background-color-key-focus: ButtonFace; + --spectrum-tag-background-color-selected: Highlight; + --spectrum-tag-background-color-selected-hover: Highlight; + --spectrum-tag-border-color: ButtonText; + --spectrum-tag-border-color-disabled: GrayText; + --spectrum-tag-border-color-error: ButtonText; + --spectrum-tag-border-color-error-hover: ButtonText; + --spectrum-tag-border-color-error-selected: HighlightText; + --spectrum-tag-border-color-hover: Highlight; + --spectrum-tag-border-color-key-focus: Highlight; + --spectrum-tag-border-color-selected: HighlightText; + --spectrum-tag-border-color-selected-key-focus: ButtonText; + --spectrum-tag-icon-color-error: ButtonText; + --spectrum-tag-icon-color-error-hover: ButtonText; + --spectrum-tag-removable-border-color-error-down: Highlight; + --spectrum-tag-removable-border-color-error-hover: Highlight; + --spectrum-tag-removable-border-color-key-focus: Highlight; + --spectrum-tag-removable-button-background-color-hover: ButtonFace; + --spectrum-tag-removable-button-background-color-key-focus: ButtonFace; + --spectrum-tag-removable-button-background-color-selected-hover: Highlight; + --spectrum-tag-removable-button-icon-color-hover: Highlight; + --spectrum-tag-removable-button-icon-color-key-focus: Highlight; + --spectrum-tag-removable-button-icon-color-selected: HighlightText; + --spectrum-tag-removable-button-icon-color-selected-hover: HighlightText; + --spectrum-tag-removable-text-color-down: ButtonText; + --spectrum-tag-removable-text-color-error-down: Highlight; + --spectrum-tag-removable-text-color-error-key-focus: Highlight; + --spectrum-tag-removable-text-color-hover: ButtonText; + --spectrum-tag-removable-text-color-key-focus: ButtonText; + --spectrum-tag-removable-text-color-selected: HighlightText; + --spectrum-tag-removable-text-color-selected-key-focus: HighlightText; + --spectrum-tag-text-color: ButtonText; + --spectrum-tag-text-color-disabled: GrayText; + --spectrum-tag-text-color-error-selected: HighlightText; + --spectrum-tag-text-color-hover: ButtonText; + --spectrum-tag-text-color-key-focus: ButtonText; + --spectrum-tag-text-color-selected: HighlightText; + --spectrum-tag-text-color-selected-key-focus: HighlightText; + } +} From 5f54deb1b5a593a70ad65fe3c961dc46c34bdae8 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Mon, 29 Nov 2021 16:22:17 -0800 Subject: [PATCH 09/13] fix: WHCM StatusLight --- .../spectrum-css-temp/components/statuslight/skin.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/statuslight/skin.css b/packages/@adobe/spectrum-css-temp/components/statuslight/skin.css index af8f5cdc394..d6f1e5d8858 100644 --- a/packages/@adobe/spectrum-css-temp/components/statuslight/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/statuslight/skin.css @@ -79,3 +79,14 @@ governing permissions and limitations under the License. .spectrum-StatusLight--purple::before { background-color: var(--spectrum-statuslight-dot-color-label-purple); } + +@media (forced-colors: active) { + .spectrum-StatusLight { + forced-color-adjust: none; + --spectrum-statuslight-text-color-disabled: GrayText; + --spectrum-statuslight-dot-color-disabled: GrayText; + &:before { + border: 1px solid ButtonText; + } + } +} \ No newline at end of file From bf5d0994ef41e58e0c22f5edd9c86bacd61698b3 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Mon, 29 Nov 2021 16:35:50 -0800 Subject: [PATCH 10/13] fix: WHCM sidenav --- .../components/sidenav/skin.css | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/sidenav/skin.css b/packages/@adobe/spectrum-css-temp/components/sidenav/skin.css index 8ba533d7a6d..9d4ac3c1dd3 100644 --- a/packages/@adobe/spectrum-css-temp/components/sidenav/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/sidenav/skin.css @@ -62,3 +62,23 @@ governing permissions and limitations under the License. .spectrum-SideNav-heading { color: var(--spectrum-sidenav-header-text-color); } + +@media (forced-colors: active) { + .spectrum-SideNav-item { + forced-color-adjust: none; + --spectrum-sidenav-item-text-color-selected: HighlightText; + --spectrum-sidenav-item-background-color-selected: Highlight; + --spectrum-sidenav-item-background-color-down: Highlight; + --spectrum-sidenav-item-background-color-disabled: ButtonFace; + --spectrum-sidenav-item-text-color-disabled: GrayText; + --spectrum-sidenav-item-background-color: ButtonFace; + --spectrum-sidenav-item-text-color: ButtonText; + --spectrum-sidenav-item-background-color-hover: ButtonFace; + --spectrum-sidenav-item-text-color-hover: ButtonText; + --spectrum-sidenav-item-background-color-down: ButtonFace; + --spectrum-sidenav-item-background-color-key-focus: ButtonFace; + --spectrum-sidenav-item-text-color-key-focus: ButtonText; + --spectrum-sidenav-item-border-color-key-focus: ButtonText; + --spectrum-sidenav-header-text-color: ButtonText; + } +} \ No newline at end of file From f4aa83742f4278de3896d444d8a51bff17709129 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Mon, 29 Nov 2021 16:46:46 -0800 Subject: [PATCH 11/13] fix: WHCM progressCircle progressBar --- .../spectrum-css-temp/components/barloader/skin.css | 8 ++++++++ .../spectrum-css-temp/components/circleloader/skin.css | 6 ++++++ 2 files changed, 14 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/barloader/skin.css b/packages/@adobe/spectrum-css-temp/components/barloader/skin.css index 303e31937db..75db6b07ea3 100644 --- a/packages/@adobe/spectrum-css-temp/components/barloader/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/barloader/skin.css @@ -61,3 +61,11 @@ governing permissions and limitations under the License. .spectrum-BarLoader-percentage { color: var(--spectrum-fieldlabel-text-color); } +@media (forced-colors: active) { + .spectrum-BarLoader-track { + forced-color-adjust: none; + --spectrum-barloader-large-track-fill-color: ButtonText; + --spectrum-barloader-large-track-color: ButtonFace; + border: 1px solid ButtonText; + } +} diff --git a/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css b/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css index aea504fa4ec..528dc942729 100644 --- a/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css @@ -35,3 +35,9 @@ governing permissions and limitations under the License. border-color: var(--spectrum-loader-circle-medium-over-background-track-fill-color); } } + +@media (forced-colors: active) { + .spectrum-CircleLoader-fill { + --spectrum-loader-circle-medium-track-fill-color: Highlight; + } +} From a9aa66f7d1ac906f0204aa7f53aa3b068ca50552 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Tue, 30 Nov 2021 08:46:45 -0800 Subject: [PATCH 12/13] fix: WHCM add dialog border --- packages/@adobe/spectrum-css-temp/components/dialog/skin.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/dialog/skin.css b/packages/@adobe/spectrum-css-temp/components/dialog/skin.css index f38f3b8737c..39bf3b7caf7 100644 --- a/packages/@adobe/spectrum-css-temp/components/dialog/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/dialog/skin.css @@ -36,3 +36,8 @@ governing permissions and limitations under the License. color: var(--spectrum-dialog-warning-icon-color); } } +@media (forced-colors: active) { + .spectrum-Dialog { + border: 1px solid transparent; + } +} From b6fdc2a58984fd3e476ed585938bb35e2568f2e7 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Tue, 30 Nov 2021 16:34:33 -0800 Subject: [PATCH 13/13] fix: WHCM tabs --- .../components/tabs/skin.css | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/tabs/skin.css b/packages/@adobe/spectrum-css-temp/components/tabs/skin.css index f1350cd711c..6a5996091a4 100644 --- a/packages/@adobe/spectrum-css-temp/components/tabs/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/tabs/skin.css @@ -105,3 +105,52 @@ governing permissions and limitations under the License. border-color: var(--spectrum-tabs-focus-ring-color); } } + +@media (forced-colors: active) { + .spectrum-Tabs { + forced-color-adjust: none; + --spectrum-tabs-focus-ring-color: ButtonText; + --spectrum-tabs-icon-color: ButtonText; + --spectrum-tabs-icon-color-disabled: GrayText; + --spectrum-tabs-icon-color-hover: ButtonText; + --spectrum-tabs-icon-color-key-focus: ButtonText; + --spectrum-tabs-icon-color-selected: HighlightText; + --spectrum-tabs-quiet-rule-color: transparent; + --spectrum-tabs-quiet-selection-indicator-color: transparent; + --spectrum-tabs-quiet-vertical-rule-color: transparent; + --spectrum-tabs-rule-color: transparent; + --spectrum-tabs-selection-indicator-color: transparent; + --spectrum-tabs-text-color: ButtonText; + --spectrum-tabs-text-color-disabled: GrayText; + --spectrum-tabs-text-color-hover: ButtonText; + --spectrum-tabs-text-color-key-focus: ButtonText; + --spectrum-tabs-text-color-selected: HighlightText; + --spectrum-tabs-vertical-rule-color: transparent; + .spectrum-Tabs-item { + &:before { + background-color: ButtonFace; + } + .spectrum-Icon { + z-index: 1; + position: relative; + } + .spectrum-Tabs-itemLabel { + position: relative; + z-index: 1; + } + } + .is-selected { + color: HighlightText; + .spectrum-Icon { + fill: HighlightText; + } + &:before { + background-color: Highlight; + color: HighlightText; + } + .spectrum-Tabs-itemLabel { + color: HighlightText; + } + } + } +}