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 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 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/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); + } + } + } + } +} 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; + } +} 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; + } +} 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 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 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; + } + } + } +} 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; + } +} 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; + } +} diff --git a/packages/@adobe/spectrum-css-temp/components/tooltip/skin.css b/packages/@adobe/spectrum-css-temp/components/tooltip/skin.css index 1d686e74e95..4e9b6a1d971 100644 --- a/packages/@adobe/spectrum-css-temp/components/tooltip/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/tooltip/skin.css @@ -46,3 +46,16 @@ 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; + --spectrum-tooltip-negative-background-color: Highlight; + --spectrum-tooltip-info-background-color: Highlight; + --spectrum-tooltip-positive-background-color: Highlight; + } +} \ No newline at end of file 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; + } + } +}