From 5dc305485464afe8f9fa52fd40de2ecdee2650f3 Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Thu, 8 Dec 2022 17:38:58 -0500 Subject: [PATCH 01/18] fix(#2949): TableView Windows High Contrast issues --- .../components/checkbox/skin.css | 87 +++++++++++- .../components/table/index.css | 14 ++ .../components/table/skin.css | 126 +++++++++++++++++- 3 files changed, 218 insertions(+), 9 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css index 810ba5c8f06..9cb7be85fad 100644 --- a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css @@ -231,19 +231,19 @@ governing permissions and limitations under the License. --spectrum-checkbox-emphasized-text-color-hover: FieldText; --spectrum-checkbox-emphasized-text-color-key-focus: FieldText; --spectrum-checkbox-focus-ring-color-key-focus: ButtonText; - --spectrum-checkbox-quiet-box-border-color-selected: Highlight; - --spectrum-checkbox-quiet-box-border-color-selected-down: Highlight; - --spectrum-checkbox-quiet-box-border-color-selected-hover: Highlight; + --spectrum-checkbox-quiet-box-border-color-selected: ButtonText; + --spectrum-checkbox-quiet-box-border-color-selected-down: ButtonText; + --spectrum-checkbox-quiet-box-border-color-selected-hover: ButtonText; --spectrum-checkbox-text-color: FieldText; --spectrum-checkbox-text-color-disabled: GrayText; --spectrum-checkbox-text-color-error: FieldText; --spectrum-checkbox-text-color-error-down: FieldText; --spectrum-checkbox-text-color-error-hover: FieldText; - &.is-invalid { + &.is-invalid { .spectrum-Checkbox-box { &:before { - border-color: var(--spectrum-checkbox-box-border-color); + border-color: ButtonText; } } &.is-indeterminate .spectrum-Checkbox-box { @@ -265,4 +265,81 @@ governing permissions and limitations under the License. } } } + + /* Indeterminate is basically a checked state, so handle colors for checked state here */ + .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box, + .spectrum-Checkbox.is-checked .spectrum-Checkbox-box, + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { + &:before { + border-color: Highlight; + } + } + + .spectrum-Checkbox:hover { + &.is-indeterminate .spectrum-Checkbox-box, + &.is-checked .spectrum-Checkbox-box, + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { + &:before { + border-color: Highlight; + } + } + } + + .spectrum-Checkbox:active { + &.is-indeterminate .spectrum-Checkbox-box, + &.is-checked .spectrum-Checkbox-box, + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { + &:before { + border-color: Highlight; + } + } + } + + .spectrum-Checkbox-input { + & + .spectrum-Checkbox-box { + &:after { + box-shadow: 0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus) ButtonText; + } + } + &:focus-ring + .spectrum-Checkbox-box { + &:before { + border-color: Highlight; + } + } + .spectrum-Checkbox.is-indeterminate &, + &:checked { + &:focus-ring + .spectrum-Checkbox-box { + &:before { + border-color: Highlight; + } + } + } + &:focus-ring ~ .spectrum-Checkbox-label { + color: FieldText; + } + } + + .spectrum-Checkbox--quiet .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, + .spectrum-Checkbox--quiet.is-indeterminate .spectrum-Checkbox-box, + .spectrum-Checkbox--quiet.is-indeterminate .spectrum-Checkbox-input:focus-ring + .spectrum-Checkbox-box { + &:before { + border-color: ButtonText; + } + } + .spectrum-Checkbox--quiet:hover { + &.is-indeterminate .spectrum-Checkbox-box, + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { + &:before { + border-color: ButtonText; + } + } + } + .spectrum-Checkbox--quiet:active { + &.is-indeterminate .spectrum-Checkbox-box, + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { + &:before { + border-color: ButtonText; + } + } + } } diff --git a/packages/@adobe/spectrum-css-temp/components/table/index.css b/packages/@adobe/spectrum-css-temp/components/table/index.css index 4384583a26e..e3fe1a0a93d 100644 --- a/packages/@adobe/spectrum-css-temp/components/table/index.css +++ b/packages/@adobe/spectrum-css-temp/components/table/index.css @@ -496,3 +496,17 @@ svg.spectrum-Table-sortedIcon { .spectrum-Table-columnResizer--wresize { cursor: w-resize !important; } + +@media (forced-colors: active) { + .spectrum-Table-row { + &:focus-ring { + &:after { + outline: var(--spectrum-table-row-sticky-focus-indicator-width) solid; + outline-offset: calc(-1 * var(--spectrum-table-row-sticky-focus-indicator-width)); + /* move up 1px and grow by one px so that the focus outline covers the previous row border */ + margin-top: -1px; + height: calc(100% + 1px); + } + } + } +} diff --git a/packages/@adobe/spectrum-css-temp/components/table/skin.css b/packages/@adobe/spectrum-css-temp/components/table/skin.css index 73845d5aec8..37180bf8dca 100644 --- a/packages/@adobe/spectrum-css-temp/components/table/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/table/skin.css @@ -144,7 +144,7 @@ tbody.spectrum-Table-body { &:focus-ring { &:before { - background: var(--spectrum-selectlist-option-focus-indicator-color); + background-color: var(--spectrum-selectlist-option-focus-indicator-color); } } @@ -303,11 +303,129 @@ tbody.spectrum-Table-body { } .spectrum-Table-colResizeIndicator { + --spectrum-table-col-resize-indicator-background-color: var(--spectrum-global-color-blue-600); &.spectrum-Table-colResizeIndicator--resizing { - background-color: var(--spectrum-global-color-blue-600); + background-color: var(--spectrum-table-col-resize-indicator-background-color); + } +} +.spectrum-Table-colResizeNubbin { + --spectrum-table-col-resize-nubbin-background-color: var(--spectrum-global-color-blue-600); + --spectrum-table-col-resize-nubbin-icon-color: var(--spectrum-global-color-static-white); + svg { + g[fill][stroke] { + fill: var(--spectrum-table-col-resize-nubbin-background-color); + stroke: var(--spectrum-table-col-resize-nubbin-background-color); + } + path[fill][stroke] { + fill: var(--spectrum-table-col-resize-nubbin-icon-color); + stroke: var(--spectrum-table-col-resize-nubbin-icon-color); + } } } -.spectrum-Table-colResizeNubbin {} .spectrum-Table-bodyResizeIndicator { - background-color: var(--spectrum-global-color-blue-600); + --spectrum-table-body-resize-indicator-background-color: var(--spectrum-global-color-blue-600); + background-color: var(--spectrum-table-body-resize-indicator-background-color); +} + +@media (forced-colors: active) { + .spectrum-Table-headWrapper { + forced-color-adjust: none; + .spectrum-Table-headCell { + forced-color-adjust: auto; + } + } + + .spectrum-Table-cell, + .spectrum-Table-headCell, + .spectrum-Table-headCellButton { + --spectrum-table-cell-border-color-key-focus: Highlight; + &:focus-ring, + &.is-focused { + &::before { + forced-color-adjust: none; + } + } + } + + .spectrum-Table-columnResizer { + --spectrum-table-divider-border-color: CanvasText; + } + + .spectrum-Table-colResizeIndicator { + --spectrum-table-col-resize-indicator-background-color: Highlight; + } + + .spectrum-Table-colResizeNubbin { + --spectrum-table-col-resize-nubbin-background-color: Highlight; + --spectrum-table-col-resize-nubbin-icon-color: HighlightText; + } + + .spectrum-Table-bodyResizeIndicator { + --spectrum-table-body-resize-indicator-background-color: Highlight; + } + + .spectrum-Table-row { + --spectrum-table-background-color: Canvas; + --spectrum-table-row-background-color-hover: Canvas; + --spectrum-selectlist-option-focus-indicator-color: Highlight; + --spectrum-table-row-background-color-down: Canvas; + + &:focus-ring { + &:before { + forced-color-adjust: none; + } + &:after { + outline-color: var(--spectrum-selectlist-option-focus-indicator-color); + } + } + + /* Alternative to border on rows. Using box shadow since they don't take room unlike border which would cause wiggles + * in the highlight case and displace the sticky indicator. Also allows for a nicer bottom curved border to match the container, + * the bottom border curved corners were cut off when using borders. + */ + + /* Box shadow for bottom border for non-selected rows that aren't immediately above a selected row. Can't omit the bottom border for last row unlike listview + * due to how table rows always reserve 1px for the bottom border (results in a white gap on hover otherwise). + */ + &:after { + forced-color-adjust: none; + --spectrum-table-cell-border-color: CanvasText; + } + + /* Box shadow for bottom border for non-selected row that is immediately above a selected row. */ + &.is-next-selected { + --spectrum-global-color-blue-500: Highlight; + &:after { + forced-color-adjust: none; + } + } + + &.is-selected { + --spectrum-global-color-blue-500: Highlight; + /* Box shadow for bottom, left, and right border for selected rows. */ + &:after { + forced-color-adjust: none; + } + } + + /* Box shadow for bottom, left, right, and top border for first row when selected. When the row isn't selected, it doesn't need + * a top border. + */ + &.spectrum-Table-row--firstRow { + --spectrum-global-color-blue-500: Highlight; + &.is-selected { + &:after { + forced-color-adjust: none; + } + } + } + + &.is-drop-target { + --spectrum-alias-border-color-focus: Highlight; + &::before { + box-shadow: inset 0 0 0 2px var(--spectrum-alias-border-color-focus); + background-color: var(--spectrum-alias-highlight-selected); + } + } + } } From 68e44b0b1d63b1e1d5a8a6bac23ab558636e4448 Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Fri, 9 Dec 2022 17:20:11 -0500 Subject: [PATCH 02/18] fix(#2949): ListView Windows High Contrast issues --- .../components/circleloader/skin.css | 5 ++ packages/@react-spectrum/list/src/styles.css | 79 +++++++++++++++++++ 2 files changed, 84 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css b/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css index 21cb618c311..63e47af8eb8 100644 --- a/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css @@ -43,5 +43,10 @@ governing permissions and limitations under the License. @media (forced-colors: active) { .spectrum-CircleLoader-fill { --spectrum-loader-circle-medium-track-fill-color: Highlight; + border-color: Highlight; + } + + .spectrum-CircleLoader--overBackground { + --spectrum-loader-circle-medium-over-background-track-fill-color: Canvas; } } diff --git a/packages/@react-spectrum/list/src/styles.css b/packages/@react-spectrum/list/src/styles.css index b3db7331fe6..3bda42799b8 100644 --- a/packages/@react-spectrum/list/src/styles.css +++ b/packages/@react-spectrum/list/src/styles.css @@ -603,3 +603,82 @@ box-shadow: inset 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus); } } + +@media (forced-colors: active) { + .react-spectrum-ListView { + --spectrum-table-cell-border-color: CanvasText; + &:not(.react-spectrum-ListView--quiet) { + .react-spectrum-ListViewItem { + /* Box shadow for bottom border for non-selected rows that aren't immediately above a selected row (grey border bottom). */ + /* Also omit bottom border for last row if the total content height of the ListView is equal or greater than the height of the container. This avoids overlapping bottom borders. */ + &:not(.is-selected):not(.is-next-selected):not(.react-spectrum-ListViewItem--isFlushBottom) { + &:after { + forced-color-adjust: none; + } + } + } + } + .react-spectrum-ListViewItem { + &.is-selected { + /* Negative block start causes borders to actually be shared between items. Only works if we allow item overflow to be visible, like card focus rings. */ + &:after { + --spectrum-global-color-blue-500: Highlight; + forced-color-adjust: none; + } + } + } + } + + .react-spectrum-ListView-row { + --spectrum-selectlist-option-focus-indicator-color: Highlight; + &:focus-ring { + &:before { + forced-color-adjust: none; + } + .react-spectrum-ListViewItem { + &:after { + outline: var(--spectrum-listview-row-sticky-focus-indicator-width) solid var(--spectrum-selectlist-option-focus-indicator-color); + outline-offset: calc(-1 * var(--spectrum-listview-row-sticky-focus-indicator-width)); + top: -1px; + height: calc(100% + 1px); + } + } + } + } + + .react-spectrum-ListViewInsertionIndicator { + &.react-spectrum-ListViewInsertionIndicator--dropTarget { + --spectrum-dropindicator-border-color: Highlight; + --spectrum-dropindicator-circle-border-color: Highlight; + forced-color-adjust: none; + &:before, + &:after { + forced-color-adjust: none; + } + } + } + + .react-spectrum-ListViewItem-draghandle-container { + .react-spectrum-ListViewItem-draghandle-button { + --spectrum-table-cell-border-color-key-focus: CanvasText; + &:focus-ring { + forced-color-adjust: none; + } + } + } + + .react-spectrum-ListViewItem--dropTarget { + --spectrum-global-color-blue-500: Highlight; + --spectrum-table-cell-border-color-key-focus: Highlight; + --spectrum-alias-highlight-selected: var(--spectrum-alias-global-color-transparent); + forced-color-adjust: none; + } + + .react-spectrum-ListView.react-spectrum-ListView--dropTarget { + --spectrum-global-color-blue-500: Highlight; + --spectrum-table-cell-border-color-key-focus: Highlight; + --spectrum-alias-highlight-selected: var(--spectrum-alias-global-color-transparent); + forced-color-adjust: none; + } + +} From 21b1b1cc3de2c81638c9c75ebfefb7e4fac5a39d Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Tue, 13 Dec 2022 11:14:54 -0500 Subject: [PATCH 03/18] fix(#2949): Drag and Drop Windows High Contrast issues --- .../components/dropindicator/skin.css | 8 ++ .../components/dropzone/skin.css | 15 ++++ packages/@react-aria/dnd/stories/dnd.css | 73 +++++++++++++++++++ 3 files changed, 96 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/dropindicator/skin.css b/packages/@adobe/spectrum-css-temp/components/dropindicator/skin.css index 9c9df8a391a..870008e33fc 100644 --- a/packages/@adobe/spectrum-css-temp/components/dropindicator/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/dropindicator/skin.css @@ -18,3 +18,11 @@ governing permissions and limitations under the License. border-color: var(--spectrum-dropindicator-circle-border-color); } } + +@media (forced-colors: active) { + .spectrum-DropIndicator { + --spectrum-dropindicator-border-color: Highlight; + --spectrum-dropindicator-circle-border-color: Highlight; + forced-color-adjust: none; + } +} diff --git a/packages/@adobe/spectrum-css-temp/components/dropzone/skin.css b/packages/@adobe/spectrum-css-temp/components/dropzone/skin.css index f95e29cfed1..cfe43b5d7e4 100644 --- a/packages/@adobe/spectrum-css-temp/components/dropzone/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/dropzone/skin.css @@ -37,3 +37,18 @@ governing permissions and limitations under the License. } } } + +@media (forced-colors: active) { + .spectrum-Dropzone { + --spectrum-dropzone-border-color: CanvasText; + + &.is-dragged { + forced-color-adjust: none; + --spectrum-dropzone-border-color-selected-hover: Highlight; + --spectrum-dropzone-background-color-selected-hover: Canvas; + .spectrum-IllustratedMessage-illustration { + --spectrum-global-color-blue-400: Highlight; + } + } + } +} diff --git a/packages/@react-aria/dnd/stories/dnd.css b/packages/@react-aria/dnd/stories/dnd.css index 3934b90ba4e..04c7e300a17 100644 --- a/packages/@react-aria/dnd/stories/dnd.css +++ b/packages/@react-aria/dnd/stories/dnd.css @@ -185,3 +185,76 @@ .option.drop-target { outline: 2px solid blue; } + +@media (forced-colors: active) { + .draggable { + --spectrum-dropzone-background-color-selected-hover: Canvas; + --spectrum-dropzone-border-color-selected-hover: Highlight; + --spectrum-alias-highlight-selected: Highlight; + --spectrum-table-row-text-color-selected: HighlightText; + --spectrum-table-row-background-color-selected: Highlight; + + &:focus-ring { + forced-color-adjust: none; + } + + &.is-selected { + forced-color-adjust: none; + color: var(--spectrum-table-row-text-color-selected); + background-color: var(--spectrum-table-row-background-color-selected); + + .drag-handle { + --spectrum-dropzone-border-color-selected-hover: HighlightText; + &:focus-ring { + forced-color-adjust: none; + } + } + } + + &.is-dragging { + --spectrum-global-color-gray-75: Canvas; + --spectrum-global-color-gray-200: CanvasText; + } + } + + .droppable { + --spectrum-global-color-gray-300: CanvasText; + --spectrum-global-color-gray-50: Canvas; + --spectrum-dropzone-background-color-selected-hover: Canvas; + --spectrum-dropzone-border-color-selected-hover: Highlight; + --spectrum-alias-highlight-selected: Highlight; + --spectrum-table-row-text-color-selected: HighlightText; + --spectrum-table-row-background-color-selected: Highlight; + + &:focus-ring { + forced-color-adjust: none; + } + + &.is-selected { + forced-color-adjust: none; + color: var(--spectrum-table-row-text-color-selected); + background-color: var(--spectrum-table-row-background-color-selected); + } + + &.is-drop-target { + --spectrum-dropzone-background-color-selected-hover: Canvas; + --spectrum-dropzone-border-color-selected-hover: Highlight; + forced-color-adjust: none; + } + } + + .drag-handle { + &:focus-ring { + forced-color-adjust: none; + --spectrum-dropzone-border-color-selected-hover: Highlight; + } + } + + .droppable-collection { + --spectrum-dropzone-background-color-selected-hover: Canvas; + --spectrum-dropzone-border-color-selected-hover: Highlight; + &.is-drop-target { + forced-color-adjust: none; + } + } +} From 044cb2baa284607beb6d673fd88da0e78bf1e55e Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Fri, 16 Dec 2022 13:11:48 -0500 Subject: [PATCH 04/18] fix(#3672): refine Checkbox WHCM/forced-colors styles --- .../components/checkbox/skin.css | 386 +++++++----------- 1 file changed, 158 insertions(+), 228 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css index 9cb7be85fad..f785cb4789f 100644 --- a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css @@ -18,51 +18,33 @@ governing permissions and limitations under the License. .spectrum-Checkbox { color: var(--spectrum-checkbox-text-color); -} -.spectrum-Checkbox .spectrum-Checkbox-checkmark, -.spectrum-Checkbox .spectrum-Checkbox-partialCheckmark { - color: var(--spectrum-checkbox-checkmark-color); -} - -.spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-emphasized-box-border-color); - background-color: var(--spectrum-checkbox-emphasized-box-background-color); - } -} - -.spectrum-Checkbox-label { - color: var(--spectrum-checkbox-emphasized-text-color); -} + border-color: var(--spectrum-checkbox-emphasized-box-border-color); -/* Indeterminate is basically a checked state, so handle colors for checked state here */ -.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box, -.spectrum-Checkbox.is-checked .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-emphasized-box-border-color-selected); + .spectrum-Checkbox-checkmark, + .spectrum-Checkbox-partialCheckmark { + color: var(--spectrum-checkbox-checkmark-color); } -} -.spectrum-Checkbox:hover { - &.is-indeterminate .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { + .spectrum-Checkbox-box { &:before { - border-color: var(--spectrum-checkbox-emphasized-box-border-color-selected-hover); + border-color: var(--spectrum-checkbox-emphasized-box-border-color); + background-color: var(--spectrum-checkbox-emphasized-box-background-color); } } -} -.spectrum-Checkbox:active { - &.is-indeterminate .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-emphasized-box-border-color-selected-down); - } + .spectrum-Checkbox-label { + color: var(--spectrum-checkbox-emphasized-text-color); } -} -.spectrum-Checkbox { - border-color: var(--spectrum-checkbox-emphasized-box-border-color); + /* Indeterminate is basically a checked state, so handle colors for checked state here */ + &.is-indeterminate, + &.is-checked { + .spectrum-Checkbox-box { + &:before { + border-color: var(--spectrum-checkbox-emphasized-box-border-color-selected); + } + } + } &:hover { .spectrum-Checkbox-box { @@ -73,6 +55,12 @@ governing permissions and limitations under the License. .spectrum-Checkbox-label { color: var(--spectrum-checkbox-emphasized-text-color-hover); } + &.is-indeterminate .spectrum-Checkbox-box, + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { + &:before { + border-color: var(--spectrum-checkbox-emphasized-box-border-color-selected-hover); + } + } } &:active { @@ -84,137 +72,182 @@ governing permissions and limitations under the License. .spectrum-Checkbox-label { color: var(--spectrum-checkbox-emphasized-text-color-down); } - } -} - -.spectrum-Checkbox .spectrum-Checkbox-input, -.spectrum-Checkbox .spectrum-Checkbox-input:checked { - &:disabled + .spectrum-Checkbox-box, - &:disabled:active + .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-emphasized-box-border-color-disabled); - background-color: var(--spectrum-checkbox-emphasized-box-background-color-disabled); + &.is-indeterminate .spectrum-Checkbox-box, + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { + &:before { + border-color: var(--spectrum-checkbox-emphasized-box-border-color-selected-down); + } } } - &:disabled ~ .spectrum-Checkbox-label { - color: var(--spectrum-checkbox-text-color-disabled); - } -} + &.is-disabled { + .spectrum-Checkbox-input, + .spectrum-Checkbox-input:checked { + &:disabled + .spectrum-Checkbox-box, + &:disabled:active + .spectrum-Checkbox-box { + &:before { + border-color: var(--spectrum-checkbox-emphasized-box-border-color-disabled); + background-color: var(--spectrum-checkbox-emphasized-box-background-color-disabled); + } + } -/* Focus */ -.spectrum-Checkbox-input { - & + .spectrum-Checkbox-box { - &:after { - box-shadow: 0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus) var(--spectrum-checkbox-focus-ring-color-key-focus); - opacity: 0; - } - } - &:focus-ring + .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-box-border-color-key-focus); + &:disabled ~ .spectrum-Checkbox-label, + &:disabled:active ~ .spectrum-Checkbox-label { + color: var(--spectrum-checkbox-text-color-disabled); + } } - &:after { - opacity: 1; + + &:hover, + &:active { + .spectrum-Checkbox-box { + &:before { + border-color: var(--spectrum-checkbox-emphasized-box-border-color-disabled); + background-color: var(--spectrum-checkbox-emphasized-box-background-color-disabled); + } + } + .spectrum-Checkbox-label { + color: var(--spectrum-checkbox-text-color-disabled); + } } } - .spectrum-Checkbox.is-indeterminate &, - &:checked { + + /* Focus */ + .spectrum-Checkbox-input { + & + .spectrum-Checkbox-box { + &:after { + box-shadow: 0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus) var(--spectrum-checkbox-focus-ring-color-key-focus); + opacity: 0; + } + } &:focus-ring + .spectrum-Checkbox-box { &:before { - border-color: var(--spectrum-checkbox-emphasized-box-border-color-selected-key-focus); + border-color: var(--spectrum-checkbox-box-border-color-key-focus); + } + &:after { + opacity: 1; } } - } - &:focus-ring ~ .spectrum-Checkbox-label { - color: var(--spectrum-checkbox-emphasized-text-color-key-focus); - } -} - -.spectrum-Checkbox--quiet .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, -.spectrum-Checkbox--quiet.is-indeterminate .spectrum-Checkbox-box, -.spectrum-Checkbox--quiet.is-indeterminate .spectrum-Checkbox-input:focus-ring + .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-quiet-box-border-color-selected); - } -} -.spectrum-Checkbox--quiet:hover { - &.is-indeterminate .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-quiet-box-border-color-selected-hover); + &:checked { + &:focus-ring + .spectrum-Checkbox-box { + &:before { + border-color: var(--spectrum-checkbox-emphasized-box-border-color-selected-key-focus); + } + } } - } -} -.spectrum-Checkbox--quiet:active { - &.is-indeterminate .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-quiet-box-border-color-selected-down); + &:focus-ring ~ .spectrum-Checkbox-label { + color: var(--spectrum-checkbox-emphasized-text-color-key-focus); } } -} -.spectrum-Checkbox.is-invalid { - /* Extra-specific selectors added here to handle checked state */ - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-box-border-color-error); + &.is-indeterminate { + .spectrum-Checkbox-input { + &:focus-ring + .spectrum-Checkbox-box { + &:before { + border-color: var(--spectrum-checkbox-emphasized-box-border-color-selected-key-focus); + } + } } } - .spectrum-Checkbox-label { - color: var(--spectrum-checkbox-text-color-error); - } - - &.is-indeterminate .spectrum-Checkbox-input:focus-ring, - .spectrum-Checkbox-input:focus-ring { - & + .spectrum-Checkbox-box { + &.spectrum-Checkbox--quiet { + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, + &.is-indeterminate .spectrum-Checkbox-box, + &.is-indeterminate .spectrum-Checkbox-input:focus-ring + .spectrum-Checkbox-box { &:before { - border-color: var(--spectrum-checkbox-box-border-color-error-hover); + border-color: var(--spectrum-checkbox-quiet-box-border-color-selected); } } - & ~ .spectrum-Checkbox-label { - color: var(--spectrum-checkbox-text-color-error-hover); + &:hover { + &.is-indeterminate .spectrum-Checkbox-box, + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { + &:before { + border-color: var(--spectrum-checkbox-quiet-box-border-color-selected-hover); + } + } + } + + &:active { + &.is-indeterminate .spectrum-Checkbox-box, + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { + &:before { + border-color: var(--spectrum-checkbox-quiet-box-border-color-selected-down); + } + } } } - &:hover { + &.is-invalid { + /* Extra-specific selectors added here to handle checked state */ .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, .spectrum-Checkbox-box { &:before { - border-color: var(--spectrum-checkbox-box-border-color-error-hover); + border-color: var(--spectrum-checkbox-box-border-color-error); } } .spectrum-Checkbox-label { - color: var(--spectrum-checkbox-text-color-error-hover); + color: var(--spectrum-checkbox-text-color-error); } - } - &:active { - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-box-border-color-error-down); + &.is-indeterminate .spectrum-Checkbox-input:focus-ring, + .spectrum-Checkbox-input:focus-ring { + & + .spectrum-Checkbox-box { + &:before { + border-color: var(--spectrum-checkbox-box-border-color-error-hover); + } + } + + & ~ .spectrum-Checkbox-label { + color: var(--spectrum-checkbox-text-color-error-hover); } } - .spectrum-Checkbox-label { - color: var(--spectrum-checkbox-text-color-error-down); + &:hover { + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, + .spectrum-Checkbox-box { + &:before { + border-color: var(--spectrum-checkbox-box-border-color-error-hover); + } + } + + .spectrum-Checkbox-label { + color: var(--spectrum-checkbox-text-color-error-hover); + } + } + + &:active { + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, + .spectrum-Checkbox-box { + &:before { + border-color: var(--spectrum-checkbox-box-border-color-error-down); + } + } + + .spectrum-Checkbox-label { + color: var(--spectrum-checkbox-text-color-error-down); + } } } } + @media (forced-colors: active) { .spectrum-Checkbox { forced-color-adjust: none; - --spectrum-checkbox-box-border-color: ButtonText; + --spectrum-alias-toggle-color-default: ButtonText; + --spectrum-alias-toggle-color-hover: Highlight; + --spectrum-alias-toggle-color-key-focus: Highlight; + --spectrum-alias-toggle-color-selected: Highlight; + --spectrum-alias-toggle-color-selected-hover: Highlight; + --spectrum-alias-toggle-color-selected-key-focus: Highlight; + --spectrum-alias-toggle-color-selected-down: Highlight; + --spectrum-accent-color-900: Highlight; + --spectrum-accent-color-1000: Highlight; + --spectrum-accent-color-1100: Highlight; + --spectrum-checkbox-box-border-color-error: Highlight; --spectrum-checkbox-box-border-color-error-down: Highlight; --spectrum-checkbox-box-border-color-error-hover: Highlight; - --spectrum-checkbox-box-border-color-key-focus: Highlight; --spectrum-checkbox-checkmark-color: HighlightText; --spectrum-checkbox-emphasized-box-background-color: ButtonFace; --spectrum-checkbox-emphasized-box-background-color-disabled: ButtonFace; @@ -222,124 +255,21 @@ governing permissions and limitations under the License. --spectrum-checkbox-emphasized-box-border-color-disabled: GrayText; --spectrum-checkbox-emphasized-box-border-color-down: Highlight; --spectrum-checkbox-emphasized-box-border-color-hover: Highlight; - --spectrum-checkbox-emphasized-box-border-color-selected: Highlight; - --spectrum-checkbox-emphasized-box-border-color-selected-down: Highlight; - --spectrum-checkbox-emphasized-box-border-color-selected-hover: Highlight; - --spectrum-checkbox-emphasized-box-border-color-selected-key-focus: Highlight; --spectrum-checkbox-emphasized-text-color: FieldText; --spectrum-checkbox-emphasized-text-color-down: FieldText; --spectrum-checkbox-emphasized-text-color-hover: FieldText; --spectrum-checkbox-emphasized-text-color-key-focus: FieldText; --spectrum-checkbox-focus-ring-color-key-focus: ButtonText; - --spectrum-checkbox-quiet-box-border-color-selected: ButtonText; - --spectrum-checkbox-quiet-box-border-color-selected-down: ButtonText; - --spectrum-checkbox-quiet-box-border-color-selected-hover: ButtonText; --spectrum-checkbox-text-color: FieldText; --spectrum-checkbox-text-color-disabled: GrayText; --spectrum-checkbox-text-color-error: FieldText; --spectrum-checkbox-text-color-error-down: FieldText; --spectrum-checkbox-text-color-error-hover: FieldText; - &.is-invalid { - .spectrum-Checkbox-box { - &:before { - border-color: ButtonText; - } - } - &.is-indeterminate .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-box-border-color-error); - } - } - &.is-disabled .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &:before { - border-color: GrayText; - } - } - /* Extra-specific selectors added here to handle checked state */ - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box - { - &:before { - border-color: var(--spectrum-checkbox-box-border-color-error); - } - } - } - } - - /* Indeterminate is basically a checked state, so handle colors for checked state here */ - .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box, - .spectrum-Checkbox.is-checked .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &:before { - border-color: Highlight; - } - } - - .spectrum-Checkbox:hover { - &.is-indeterminate .spectrum-Checkbox-box, - &.is-checked .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &:before { - border-color: Highlight; - } - } - } - - .spectrum-Checkbox:active { - &.is-indeterminate .spectrum-Checkbox-box, - &.is-checked .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &:before { - border-color: Highlight; - } - } - } - - .spectrum-Checkbox-input { - & + .spectrum-Checkbox-box { - &:after { - box-shadow: 0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus) ButtonText; - } - } - &:focus-ring + .spectrum-Checkbox-box { - &:before { - border-color: Highlight; - } - } - .spectrum-Checkbox.is-indeterminate &, - &:checked { - &:focus-ring + .spectrum-Checkbox-box { - &:before { - border-color: Highlight; - } - } - } - &:focus-ring ~ .spectrum-Checkbox-label { - color: FieldText; - } - } - - .spectrum-Checkbox--quiet .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox--quiet.is-indeterminate .spectrum-Checkbox-box, - .spectrum-Checkbox--quiet.is-indeterminate .spectrum-Checkbox-input:focus-ring + .spectrum-Checkbox-box { - &:before { - border-color: ButtonText; - } - } - .spectrum-Checkbox--quiet:hover { - &.is-indeterminate .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &:before { - border-color: ButtonText; - } - } - } - .spectrum-Checkbox--quiet:active { - &.is-indeterminate .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &:before { - border-color: ButtonText; - } + &.spectrum-Checkbox--quiet, + &.is-indeterminate { + --spectrum-alias-toggle-color-default: ButtonText; + --spectrum-alias-toggle-color-selected: ButtonText; } } } From f14cfb9b2ef192991744f485ee92c2aff49c4e98 Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Tue, 17 Jan 2023 15:51:16 -0500 Subject: [PATCH 05/18] fix(#3827): fix checkbox chromatic tests --- .../components/checkbox/skin.css | 25 +++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css index f785cb4789f..0c2c34d33d8 100644 --- a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css @@ -80,6 +80,22 @@ governing permissions and limitations under the License. } } + .spectrum-Checkbox-input, + .spectrum-Checkbox-input:checked { + &:disabled + .spectrum-Checkbox-box, + &:disabled:active + .spectrum-Checkbox-box { + &:before { + border-color: var(--spectrum-checkbox-emphasized-box-border-color-disabled); + background-color: var(--spectrum-checkbox-emphasized-box-background-color-disabled); + } + } + + &:disabled ~ .spectrum-Checkbox-label, + &:disabled:active ~ .spectrum-Checkbox-label { + color: var(--spectrum-checkbox-text-color-disabled); + } + } + &.is-disabled { .spectrum-Checkbox-input, .spectrum-Checkbox-input:checked { @@ -111,6 +127,8 @@ governing permissions and limitations under the License. } } + + /* Focus */ .spectrum-Checkbox-input { & + .spectrum-Checkbox-box { @@ -180,7 +198,9 @@ governing permissions and limitations under the License. &.is-invalid { /* Extra-specific selectors added here to handle checked state */ .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-box { + .spectrum-Checkbox-box, + &.is-indeterminate .spectrum-Checkbox-box, + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { &:before { border-color: var(--spectrum-checkbox-box-border-color-error); } @@ -205,7 +225,8 @@ governing permissions and limitations under the License. &:hover { .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-box { + .spectrum-Checkbox-box, + &.is-indeterminate .spectrum-Checkbox-box { &:before { border-color: var(--spectrum-checkbox-box-border-color-error-hover); } From 6c769b7c72995da17c10d17ade6a492215fa4dd1 Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Tue, 17 Jan 2023 17:54:21 -0500 Subject: [PATCH 06/18] fix(#3672): Move forced-colors color overrides to start of media-query --- .../components/table/skin.css | 93 +++++++++---------- 1 file changed, 45 insertions(+), 48 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/table/skin.css b/packages/@adobe/spectrum-css-temp/components/table/skin.css index 250f826b43c..a69a0046413 100644 --- a/packages/@adobe/spectrum-css-temp/components/table/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/table/skin.css @@ -340,8 +340,45 @@ tbody.spectrum-Table-body { --spectrum-table-col-resize-nubbin-icon-color: HighlightText; --spectrum-table-body-resize-indicator-background-color: Highlight; --spectrum-table-divider-border-color: CanvasText; + + .spectrum-Table-cell, + .spectrum-Table-headCell, + .spectrum-Table-headCellButton { + --spectrum-table-cell-border-color-key-focus: Highlight; + } + + .spectrum-Table-colResizeIndicator { + --spectrum-table-col-resize-indicator-background-color: Highlight; + } + + .spectrum-Table-colResizeNubbin { + --spectrum-table-col-resize-nubbin-background-color: Highlight; + --spectrum-table-col-resize-nubbin-icon-color: HighlightText; + } + + .spectrum-Table-bodyResizeIndicator { + --spectrum-table-body-resize-indicator-background-color: Highlight; + } + + .spectrum-Table-row { + --spectrum-table-background-color: Canvas; + --spectrum-table-row-background-color-hover: Canvas; + --spectrum-table-row-background-color-down: Canvas; + --spectrum-selectlist-option-focus-indicator-color: Highlight; + &:after { + --spectrum-table-cell-border-color: CanvasText; + } + &.is-next-selected, + &.is-selected, + &.spectrum-Table-row--firstRow.is-selected { + --spectrum-global-color-blue-500: Highlight; + } + &.is-drop-target { + --spectrum-alias-border-color-focus: Highlight; + } + } } - + .spectrum-Table-headWrapper { forced-color-adjust: none; .spectrum-Table-headCell { @@ -352,7 +389,6 @@ tbody.spectrum-Table-body { .spectrum-Table-cell, .spectrum-Table-headCell, .spectrum-Table-headCellButton { - --spectrum-table-cell-border-color-key-focus: Highlight; &:focus-ring, &.is-focused { &::before { @@ -361,29 +397,7 @@ tbody.spectrum-Table-body { } } - .spectrum-Table-columnResizer { - --spectrum-table-divider-border-color: CanvasText; - } - - .spectrum-Table-colResizeIndicator { - --spectrum-table-col-resize-indicator-background-color: Highlight; - } - - .spectrum-Table-colResizeNubbin { - --spectrum-table-col-resize-nubbin-background-color: Highlight; - --spectrum-table-col-resize-nubbin-icon-color: HighlightText; - } - - .spectrum-Table-bodyResizeIndicator { - --spectrum-table-body-resize-indicator-background-color: Highlight; - } - .spectrum-Table-row { - --spectrum-table-background-color: Canvas; - --spectrum-table-row-background-color-hover: Canvas; - --spectrum-selectlist-option-focus-indicator-color: Highlight; - --spectrum-table-row-background-color-down: Canvas; - &:focus-ring { &:before { forced-color-adjust: none; @@ -403,40 +417,23 @@ tbody.spectrum-Table-body { */ &:after { forced-color-adjust: none; - --spectrum-table-cell-border-color: CanvasText; } /* Box shadow for bottom border for non-selected row that is immediately above a selected row. */ - &.is-next-selected { - --spectrum-global-color-blue-500: Highlight; - &:after { - forced-color-adjust: none; - } - } - - &.is-selected { - --spectrum-global-color-blue-500: Highlight; - /* Box shadow for bottom, left, and right border for selected rows. */ - &:after { - forced-color-adjust: none; - } - } - + &.is-next-selected, + /* Box shadow for bottom, left, and right border for selected rows. */ + &.is-selected, /* Box shadow for bottom, left, right, and top border for first row when selected. When the row isn't selected, it doesn't need * a top border. */ - &.spectrum-Table-row--firstRow { - --spectrum-global-color-blue-500: Highlight; - &.is-selected { - &:after { - forced-color-adjust: none; - } + &.spectrum-Table-row--firstRow.is-selected { + &:after { + forced-color-adjust: none; } } &.is-drop-target { - --spectrum-alias-border-color-focus: Highlight; - &::before { + &:before { box-shadow: inset 0 0 0 2px var(--spectrum-alias-border-color-focus); background-color: var(--spectrum-alias-highlight-selected); } From 1625af56cb3f12704c3bb3d809988d0557804ebf Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Thu, 19 Jan 2023 11:29:03 -0500 Subject: [PATCH 07/18] fix(#3672): remove some css specificity for forced-color overrides --- .../components/table/skin.css | 34 ++++--------------- 1 file changed, 7 insertions(+), 27 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/table/skin.css b/packages/@adobe/spectrum-css-temp/components/table/skin.css index a69a0046413..3a8fec0872e 100644 --- a/packages/@adobe/spectrum-css-temp/components/table/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/table/skin.css @@ -334,18 +334,18 @@ tbody.spectrum-Table-body { } @media (forced-colors: active) { - .spectrum-Table { + .spectrum-Table.spectrum-Table { --spectrum-table-col-resize-indicator-background-color: Highlight; --spectrum-table-col-resize-nubbin-background-color: Highlight; --spectrum-table-col-resize-nubbin-icon-color: HighlightText; --spectrum-table-body-resize-indicator-background-color: Highlight; --spectrum-table-divider-border-color: CanvasText; - - .spectrum-Table-cell, - .spectrum-Table-headCell, - .spectrum-Table-headCellButton { - --spectrum-table-cell-border-color-key-focus: Highlight; - } + --spectrum-table-cell-border-color-key-focus: Highlight; + --spectrum-table-background-color: Canvas; + --spectrum-table-row-background-color-hover: Canvas; + --spectrum-table-row-background-color-down: Canvas; + --spectrum-selectlist-option-focus-indicator-color: Highlight; + --spectrum-table-cell-border-color: CanvasText; .spectrum-Table-colResizeIndicator { --spectrum-table-col-resize-indicator-background-color: Highlight; @@ -361,13 +361,6 @@ tbody.spectrum-Table-body { } .spectrum-Table-row { - --spectrum-table-background-color: Canvas; - --spectrum-table-row-background-color-hover: Canvas; - --spectrum-table-row-background-color-down: Canvas; - --spectrum-selectlist-option-focus-indicator-color: Highlight; - &:after { - --spectrum-table-cell-border-color: CanvasText; - } &.is-next-selected, &.is-selected, &.spectrum-Table-row--firstRow.is-selected { @@ -407,25 +400,12 @@ tbody.spectrum-Table-body { } } - /* Alternative to border on rows. Using box shadow since they don't take room unlike border which would cause wiggles - * in the highlight case and displace the sticky indicator. Also allows for a nicer bottom curved border to match the container, - * the bottom border curved corners were cut off when using borders. - */ - - /* Box shadow for bottom border for non-selected rows that aren't immediately above a selected row. Can't omit the bottom border for last row unlike listview - * due to how table rows always reserve 1px for the bottom border (results in a white gap on hover otherwise). - */ &:after { forced-color-adjust: none; } - /* Box shadow for bottom border for non-selected row that is immediately above a selected row. */ &.is-next-selected, - /* Box shadow for bottom, left, and right border for selected rows. */ &.is-selected, - /* Box shadow for bottom, left, right, and top border for first row when selected. When the row isn't selected, it doesn't need - * a top border. - */ &.spectrum-Table-row--firstRow.is-selected { &:after { forced-color-adjust: none; From d9b24813be8094bc16f4802dff9671e17feca968 Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Thu, 19 Jan 2023 16:43:53 -0500 Subject: [PATCH 08/18] fix(#3672): add vars for --spectrum-global-color-blue-500 --- .../components/table/skin.css | 33 +++++++++---------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/table/skin.css b/packages/@adobe/spectrum-css-temp/components/table/skin.css index 3a8fec0872e..c824d4b08ff 100644 --- a/packages/@adobe/spectrum-css-temp/components/table/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/table/skin.css @@ -18,6 +18,8 @@ governing permissions and limitations under the License. --spectrum-table-col-resize-nubbin-background-color: xvar(--spectrum-legacy-color-blue-400, var(--spectrum-global-color-blue-400)); --spectrum-table-col-resize-nubbin-icon-color: var(--spectrum-global-color-static-white); --spectrum-table-body-resize-indicator-background-color: xvar(--spectrum-legacy-color-blue-400, var(--spectrum-global-color-blue-400)); + --spectrum-table-row-border-color-selected: xvar(--spectrum-legacy-color-blue-500, var(--spectrum-global-color-blue-500)); + --spectrum-table-cell-border-color-selected: xvar(--spectrum-legacy-color-blue-500, var(--spectrum-global-color-blue-500)); } .spectrum-Table-headWrapper { @@ -182,7 +184,7 @@ tbody.spectrum-Table-body { /* Box shadow for bottom border for non-selected row that is immediately above a selected row. */ &.is-next-selected { &:after { - box-shadow: inset 0 -1px 0 0 var(--spectrum-global-color-blue-500); + box-shadow: inset 0 -1px 0 0 var(--spectrum-table-row-border-color-selected); } } @@ -203,7 +205,7 @@ tbody.spectrum-Table-body { /* Box shadow for bottom, left, and right border for selected rows. */ &:after { - box-shadow: inset 1px 0 0 0 var(--spectrum-global-color-blue-500), inset -1px 0 0 0 var(--spectrum-global-color-blue-500), inset 0 -1px 0 0 var(--spectrum-global-color-blue-500); + box-shadow: inset 1px 0 0 0 var(--spectrum-table-row-border-color-selected), inset -1px 0 0 0 var(--spectrum-table-row-border-color-selected), inset 0 -1px 0 0 var(--spectrum-table-row-border-color-selected); } } @@ -213,7 +215,7 @@ tbody.spectrum-Table-body { &.spectrum-Table-row--firstRow { &.is-selected { &:after { - box-shadow: inset 1px 0 0 0 var(--spectrum-global-color-blue-500), inset -1px 0 0 0 var(--spectrum-global-color-blue-500), inset 0 1px 0 0 var(--spectrum-global-color-blue-500), inset 0 -1px 0 0 var(--spectrum-global-color-blue-500); + box-shadow: inset 1px 0 0 0 var(--spectrum-table-row-border-color-selected), inset -1px 0 0 0 var(--spectrum-table-row-border-color-selected), inset 0 1px 0 0 var(--spectrum-table-row-border-color-selected), inset 0 -1px 0 0 var(--spectrum-table-row-border-color-selected); } } } @@ -346,6 +348,8 @@ tbody.spectrum-Table-body { --spectrum-table-row-background-color-down: Canvas; --spectrum-selectlist-option-focus-indicator-color: Highlight; --spectrum-table-cell-border-color: CanvasText; + --spectrum-table-row-border-color-selected: Highlight; + --spectrum-alias-border-color-focus: Highlight; .spectrum-Table-colResizeIndicator { --spectrum-table-col-resize-indicator-background-color: Highlight; @@ -359,17 +363,6 @@ tbody.spectrum-Table-body { .spectrum-Table-bodyResizeIndicator { --spectrum-table-body-resize-indicator-background-color: Highlight; } - - .spectrum-Table-row { - &.is-next-selected, - &.is-selected, - &.spectrum-Table-row--firstRow.is-selected { - --spectrum-global-color-blue-500: Highlight; - } - &.is-drop-target { - --spectrum-alias-border-color-focus: Highlight; - } - } } .spectrum-Table-headWrapper { @@ -395,6 +388,7 @@ tbody.spectrum-Table-body { &:before { forced-color-adjust: none; } + /* Add an outline color to the focused row in so that it displays with a nice thick border. */ &:after { outline-color: var(--spectrum-selectlist-option-focus-indicator-color); } @@ -413,9 +407,14 @@ tbody.spectrum-Table-body { } &.is-drop-target { - &:before { - box-shadow: inset 0 0 0 2px var(--spectrum-alias-border-color-focus); - background-color: var(--spectrum-alias-highlight-selected); + /* Cells with .spectrum-Table-cellWrapper render on top ofthe + ::before element in the row, so we have to make its background-color + transparent in order to see the .is-drop-target style. */ + .spectrum-Table-cellWrapper { + --spectrum-table-background-color: transparent; + } + &::before { + forced-color-adjust: none; } } } From b22009cfffea7d4dcf0c7ca125cabb2a48845655 Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Tue, 24 Jan 2023 19:16:04 -0500 Subject: [PATCH 09/18] fix(#3672): fix checkbox forced-colors overrides --- .../components/checkbox/index.css | 16 ---------- .../components/checkbox/skin.css | 31 ++++++++++++++++--- 2 files changed, 26 insertions(+), 21 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/checkbox/index.css b/packages/@adobe/spectrum-css-temp/components/checkbox/index.css index 6cf88f3c94d..6c6db37be2e 100644 --- a/packages/@adobe/spectrum-css-temp/components/checkbox/index.css +++ b/packages/@adobe/spectrum-css-temp/components/checkbox/index.css @@ -20,22 +20,6 @@ governing permissions and limitations under the License. /* Fix for inconsistent line-height between browsers that would push the label 1px below the intended baseline */ /* more info: https://stackoverflow.com/questions/47700568/css-fonts-render-differently-in-firefox-and-chrome */ --spectrum-checkbox-label-line-height: 1.49; - - --spectrum-checkbox-box-border-color: var(--spectrum-alias-toggle-color-default); - --spectrum-checkbox-box-border-color-hover: var(--spectrum-alias-toggle-color-hover); - --spectrum-checkbox-box-border-color-key-focus: var(--spectrum-alias-toggle-color-key-focus); - --spectrum-checkbox-quiet-box-border-color-selected: var(--spectrum-alias-toggle-color-selected); - --spectrum-checkbox-quiet-box-border-color-selected-hover: var(--spectrum-alias-toggle-color-selected-hover); - --spectrum-checkbox-quiet-box-border-color-selected-key-focus: var(--spectrum-alias-toggle-color-selected-key-focus); - - --spectrum-checkbox-emphasized-box-background-color-selected: var(--spectrum-accent-color-900); - --spectrum-checkbox-emphasized-box-background-color-selected-hover: var(--spectrum-accent-color-1000); - --spectrum-checkbox-emphasized-box-background-color-selected-key-focus: var(--spectrum-accent-color-1000); - --spectrum-checkbox-emphasized-box-background-color-selected-down: var(--spectrum-accent-color-1100); - --spectrum-checkbox-emphasized-box-border-color-selected: var(--spectrum-accent-color-900); - --spectrum-checkbox-emphasized-box-border-color-selected-hover: var(--spectrum-accent-color-1000); - --spectrum-checkbox-emphasized-box-border-color-selected-key-focus: var(--spectrum-accent-color-1000); - --spectrum-checkbox-emphasized-box-border-color-selected-down: var(--spectrum-accent-color-1100); } .spectrum-Checkbox { diff --git a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css index 0c2c34d33d8..b80be4d2f97 100644 --- a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css @@ -10,10 +10,25 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -:root { +.spectrum-Checkbox { /* todo: fix in DNA */ --spectrum-checkbox-emphasized-text-color-key-focus: var(--spectrum-checkbox-emphasized-text-color-hover); - --spectrum-checkbox-emphasized-box-border-color-selected-key-focus: var(--spectrum-checkbox-emphasized-box-border-color-selected-hover); + + --spectrum-checkbox-box-border-color: var(--spectrum-alias-toggle-color-default); + --spectrum-checkbox-box-border-color-hover: var(--spectrum-alias-toggle-color-hover); + --spectrum-checkbox-box-border-color-key-focus: var(--spectrum-alias-toggle-color-key-focus); + --spectrum-checkbox-quiet-box-border-color-selected: var(--spectrum-alias-toggle-color-selected); + --spectrum-checkbox-quiet-box-border-color-selected-hover: var(--spectrum-alias-toggle-color-selected-hover); + --spectrum-checkbox-quiet-box-border-color-selected-key-focus: var(--spectrum-alias-toggle-color-selected-key-focus); + + --spectrum-checkbox-emphasized-box-background-color-selected: var(--spectrum-accent-color-900); + --spectrum-checkbox-emphasized-box-background-color-selected-hover: var(--spectrum-accent-color-1000); + --spectrum-checkbox-emphasized-box-background-color-selected-key-focus: var(--spectrum-accent-color-1000); + --spectrum-checkbox-emphasized-box-background-color-selected-down: var(--spectrum-accent-color-1100); + --spectrum-checkbox-emphasized-box-border-color-selected: var(--spectrum-accent-color-900); + --spectrum-checkbox-emphasized-box-border-color-selected-hover: var(--spectrum-accent-color-1000); + --spectrum-checkbox-emphasized-box-border-color-selected-key-focus: var(--spectrum-accent-color-1000); + --spectrum-checkbox-emphasized-box-border-color-selected-down: var(--spectrum-accent-color-1100); } .spectrum-Checkbox { @@ -262,9 +277,6 @@ governing permissions and limitations under the License. --spectrum-alias-toggle-color-selected-hover: Highlight; --spectrum-alias-toggle-color-selected-key-focus: Highlight; --spectrum-alias-toggle-color-selected-down: Highlight; - --spectrum-accent-color-900: Highlight; - --spectrum-accent-color-1000: Highlight; - --spectrum-accent-color-1100: Highlight; --spectrum-checkbox-box-border-color-error: Highlight; --spectrum-checkbox-box-border-color-error-down: Highlight; @@ -287,6 +299,15 @@ governing permissions and limitations under the License. --spectrum-checkbox-text-color-error-down: FieldText; --spectrum-checkbox-text-color-error-hover: FieldText; + --spectrum-checkbox-emphasized-box-background-color-selected: Highlight; + --spectrum-checkbox-emphasized-box-background-color-selected-hover: Highlight; + --spectrum-checkbox-emphasized-box-background-color-selected-key-focus: Highlight; + --spectrum-checkbox-emphasized-box-background-color-selected-down: Highlight; + --spectrum-checkbox-emphasized-box-border-color-selected: Highlight; + --spectrum-checkbox-emphasized-box-border-color-selected-hover: Highlight; + --spectrum-checkbox-emphasized-box-border-color-selected-key-focus: Highlight; + --spectrum-checkbox-emphasized-box-border-color-selected-down: Highlight; + &.spectrum-Checkbox--quiet, &.is-indeterminate { --spectrum-alias-toggle-color-default: ButtonText; From 5df48fa0d506db3975c8dae3b767d90fdb499e75 Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Tue, 24 Jan 2023 19:16:27 -0500 Subject: [PATCH 10/18] fix(#3672): fix circle loader forced-colors overrides --- .../spectrum-css-temp/components/circleloader/skin.css | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css b/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css index 63e47af8eb8..a99cab8c4b9 100644 --- a/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -:root { +.spectrum-CircleLoader { --spectrum-loader-circle-medium-track-fill-color: var(--spectrum-accent-color-900); } @@ -41,12 +41,8 @@ governing permissions and limitations under the License. } @media (forced-colors: active) { - .spectrum-CircleLoader-fill { + .spectrum-CircleLoader { --spectrum-loader-circle-medium-track-fill-color: Highlight; - border-color: Highlight; - } - - .spectrum-CircleLoader--overBackground { --spectrum-loader-circle-medium-over-background-track-fill-color: Canvas; } } From aba67e9dee638a77ef577403f53c1a661299e7f8 Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Tue, 24 Jan 2023 19:16:45 -0500 Subject: [PATCH 11/18] fix(#3672): fix dropzone forced-colors overrides --- .../components/dropzone/skin.css | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/dropzone/skin.css b/packages/@adobe/spectrum-css-temp/components/dropzone/skin.css index cfe43b5d7e4..29d673eb2c8 100644 --- a/packages/@adobe/spectrum-css-temp/components/dropzone/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/dropzone/skin.css @@ -10,6 +10,11 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ +.spectrum-Dropzone { + --spectrum-dropzone-illustratedmessage-illustration-color-selected: var(--spectrum-global-color-blue-400); + --spectrum-dropzone-illustratedmessage-illustration-color-key-focus: var(--spectrum-global-color-blue-500); +} + .spectrum-Dropzone { border-color: var(--spectrum-dropzone-border-color); @@ -18,21 +23,21 @@ governing permissions and limitations under the License. background-color: var(--spectrum-dropzone-background-color-selected-hover); .spectrum-IllustratedMessage-illustration { - color: var(--spectrum-global-color-blue-400); + color: var(--spectrum-dropzone-illustratedmessage-illustration-color-selected); } } &:focus:not(.is-dragged) { border-color: var(--spectrum-dropzone-border-color); .spectrum-IllustratedMessage-illustration { - color: var(--spectrum-global-color-static-gray-500); + color: var(--spectrum-dropzone-illustratedmessage-illustration-color-key-focus); } &.focus-ring { border-color: var(--spectrum-dropzone-border-color-selected-hover); } &.is-dragged.focus-ring { .spectrum-IllustratedMessage-illustration { - color: var(--spectrum-global-color-blue-400); + color: var(--spectrum-dropzone-illustratedmessage-illustration-color-selected); } } } @@ -41,14 +46,12 @@ governing permissions and limitations under the License. @media (forced-colors: active) { .spectrum-Dropzone { --spectrum-dropzone-border-color: CanvasText; + --spectrum-dropzone-illustratedmessage-illustration-color-selected: Highlight; + --spectrum-dropzone-border-color-selected-hover: Highlight; + --spectrum-dropzone-background-color-selected-hover: Canvas; &.is-dragged { forced-color-adjust: none; - --spectrum-dropzone-border-color-selected-hover: Highlight; - --spectrum-dropzone-background-color-selected-hover: Canvas; - .spectrum-IllustratedMessage-illustration { - --spectrum-global-color-blue-400: Highlight; - } } } } From 0f2791c0e54ec9bbab4c67dab312fdd76fefe9b7 Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Tue, 24 Jan 2023 19:17:01 -0500 Subject: [PATCH 12/18] fix(#3672): fix switch forced-colors overrides --- .../components/toggle/index.css | 19 ------------ .../components/toggle/skin.css | 29 +++++++++++++++++-- 2 files changed, 26 insertions(+), 22 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/toggle/index.css b/packages/@adobe/spectrum-css-temp/components/toggle/index.css index 1500843f834..656a0583f64 100644 --- a/packages/@adobe/spectrum-css-temp/components/toggle/index.css +++ b/packages/@adobe/spectrum-css-temp/components/toggle/index.css @@ -20,25 +20,6 @@ governing permissions and limitations under the License. /* Fix for inconsistent line-height between browsers that would push the label 1px below the intended baseline */ /* more info: https://stackoverflow.com/questions/47700568/css-fonts-render-differently-in-firefox-and-chrome */ --spectrum-switch-label-line-height: 1.49; - - --spectrum-switch-emphasized-handle-border-color: var(--spectrum-alias-toggle-color-default); - --spectrum-switch-emphasized-handle-border-color-hover: var(--spectrum-alias-toggle-color-hover); - --spectrum-switch-emphasized-handle-border-color-key-focus: var(--spectrum-alias-toggle-color-key-focus); - --spectrum-switch-quiet-track-color-selected: var(--spectrum-alias-toggle-color-selected); - --spectrum-switch-quiet-track-color-selected-hover: var(--spectrum-alias-toggle-color-selected-hover); - --spectrum-switch-quiet-track-color-selected-key-focus: var(--spectrum-alias-toggle-color-selected-key-focus); - --spectrum-switch-quiet-handle-border-color-selected: var(--spectrum-alias-toggle-color-selected); - --spectrum-switch-quiet-handle-border-color-selected-hover: var(--spectrum-alias-toggle-color-selected-hover); - --spectrum-switch-quiet-handle-border-color-selected-key-focus: var(--spectrum-alias-toggle-color-selected-key-focus); - - --spectrum-switch-emphasized-track-color-selected: var(--spectrum-accent-color-900); - --spectrum-switch-emphasized-handle-border-color-selected: var(--spectrum-accent-color-900); - --spectrum-switch-emphasized-track-color-selected-hover: var(--spectrum-accent-color-1000); - --spectrum-switch-emphasized-handle-border-color-selected-hover: var(--spectrum-accent-color-1000); - --spectrum-switch-emphasized-track-color-selected-key-focus: var(--spectrum-accent-color-1000); - --spectrum-switch-emphasized-handle-border-color-selected-key-focus: var(--spectrum-accent-color-1000); - --spectrum-switch-emphasized-track-color-selected-down: var(--spectrum-accent-color-1100); - --spectrum-switch-emphasized-handle-border-color-selected-down: var(--spectrum-accent-color-1100); } .spectrum-ToggleSwitch { diff --git a/packages/@adobe/spectrum-css-temp/components/toggle/skin.css b/packages/@adobe/spectrum-css-temp/components/toggle/skin.css index ce4dad68b11..bc2ed4a0f54 100644 --- a/packages/@adobe/spectrum-css-temp/components/toggle/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/toggle/skin.css @@ -10,6 +10,27 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ +.spectrum-ToggleSwitch { + --spectrum-switch-emphasized-handle-border-color: var(--spectrum-alias-toggle-color-default); + --spectrum-switch-emphasized-handle-border-color-hover: var(--spectrum-alias-toggle-color-hover); + --spectrum-switch-emphasized-handle-border-color-key-focus: var(--spectrum-alias-toggle-color-key-focus); + --spectrum-switch-quiet-track-color-selected: var(--spectrum-alias-toggle-color-selected); + --spectrum-switch-quiet-track-color-selected-hover: var(--spectrum-alias-toggle-color-selected-hover); + --spectrum-switch-quiet-track-color-selected-key-focus: var(--spectrum-alias-toggle-color-selected-key-focus); + --spectrum-switch-quiet-handle-border-color-selected: var(--spectrum-alias-toggle-color-selected); + --spectrum-switch-quiet-handle-border-color-selected-hover: var(--spectrum-alias-toggle-color-selected-hover); + --spectrum-switch-quiet-handle-border-color-selected-key-focus: var(--spectrum-alias-toggle-color-selected-key-focus); + + --spectrum-switch-emphasized-track-color-selected: var(--spectrum-accent-color-900); + --spectrum-switch-emphasized-handle-border-color-selected: var(--spectrum-accent-color-900); + --spectrum-switch-emphasized-track-color-selected-hover: var(--spectrum-accent-color-1000); + --spectrum-switch-emphasized-handle-border-color-selected-hover: var(--spectrum-accent-color-1000); + --spectrum-switch-emphasized-track-color-selected-key-focus: var(--spectrum-accent-color-1000); + --spectrum-switch-emphasized-handle-border-color-selected-key-focus: var(--spectrum-accent-color-1000); + --spectrum-switch-emphasized-track-color-selected-down: var(--spectrum-accent-color-1100); + --spectrum-switch-emphasized-handle-border-color-selected-down: var(--spectrum-accent-color-1100); +} + /* Default */ .spectrum-ToggleSwitch-switch { background-color: var(--spectrum-switch-emphasized-track-color); @@ -233,7 +254,7 @@ governing permissions and limitations under the License. --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-key-focus: Highlight; --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; @@ -264,6 +285,7 @@ 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; + /* 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); @@ -273,11 +295,12 @@ governing permissions and limitations under the License. box-shadow: inset 0 0 0 1px var(--spectrum-switch-emphasized-handle-border-color-hover); } } + .spectrum-ToggleSwitch-input:not(:checked):focus + .spectrum-ToggleSwitch-switch { + box-shadow: inset 0 0 0 1px var(--spectrum-switch-emphasized-handle-border-color-key-focus); + } /* 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); } - - } } From de450112b648541e6556058dab621f37c55ac56b Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Tue, 24 Jan 2023 19:17:25 -0500 Subject: [PATCH 13/18] fix(#3672): fix table forced-colors overrides --- .../components/table/index.css | 5 +-- .../components/table/skin.css | 39 +++++++------------ 2 files changed, 16 insertions(+), 28 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/table/index.css b/packages/@adobe/spectrum-css-temp/components/table/index.css index e2a4d77ff57..2ad1aa49376 100644 --- a/packages/@adobe/spectrum-css-temp/components/table/index.css +++ b/packages/@adobe/spectrum-css-temp/components/table/index.css @@ -515,9 +515,8 @@ svg.spectrum-Table-sortedIcon { &:after { outline: var(--spectrum-table-row-sticky-focus-indicator-width) solid; outline-offset: calc(-1 * var(--spectrum-table-row-sticky-focus-indicator-width)); - /* move up 1px and grow by one px so that the focus outline covers the previous row border */ - margin-top: -1px; - height: calc(100% + 1px); + margin-top: calc(-1 * var(--spectrum-table-border-size)); + height: calc(100% + var(--spectrum-table-border-size)); } } } diff --git a/packages/@adobe/spectrum-css-temp/components/table/skin.css b/packages/@adobe/spectrum-css-temp/components/table/skin.css index c824d4b08ff..848450a0ec4 100644 --- a/packages/@adobe/spectrum-css-temp/components/table/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/table/skin.css @@ -20,6 +20,7 @@ governing permissions and limitations under the License. --spectrum-table-body-resize-indicator-background-color: xvar(--spectrum-legacy-color-blue-400, var(--spectrum-global-color-blue-400)); --spectrum-table-row-border-color-selected: xvar(--spectrum-legacy-color-blue-500, var(--spectrum-global-color-blue-500)); --spectrum-table-cell-border-color-selected: xvar(--spectrum-legacy-color-blue-500, var(--spectrum-global-color-blue-500)); + --spectrum-table-row-focus-indicator-color: var(--spectrum-selectlist-option-focus-indicator-color); } .spectrum-Table-headWrapper { @@ -152,7 +153,7 @@ tbody.spectrum-Table-body { &:focus-ring { &:before { - background-color: var(--spectrum-selectlist-option-focus-indicator-color); + background-color: var(--spectrum-table-row-focus-indicator-color); } } @@ -311,14 +312,11 @@ tbody.spectrum-Table-body { } .spectrum-Table-colResizeIndicator { - --spectrum-table-col-resize-indicator-background-color: var(--spectrum-global-color-blue-600); &.spectrum-Table-colResizeIndicator--resizing { background-color: var(--spectrum-table-col-resize-indicator-background-color); } } .spectrum-Table-colResizeNubbin { - --spectrum-table-col-resize-nubbin-background-color: var(--spectrum-global-color-blue-600); - --spectrum-table-col-resize-nubbin-icon-color: var(--spectrum-global-color-static-white); svg { g[fill][stroke] { fill: var(--spectrum-table-col-resize-nubbin-background-color); @@ -331,12 +329,11 @@ tbody.spectrum-Table-body { } } .spectrum-Table-bodyResizeIndicator { - --spectrum-table-body-resize-indicator-background-color: var(--spectrum-global-color-blue-600); background-color: var(--spectrum-table-body-resize-indicator-background-color); } @media (forced-colors: active) { - .spectrum-Table.spectrum-Table { + .spectrum-Table { --spectrum-table-col-resize-indicator-background-color: Highlight; --spectrum-table-col-resize-nubbin-background-color: Highlight; --spectrum-table-col-resize-nubbin-icon-color: HighlightText; @@ -346,28 +343,19 @@ tbody.spectrum-Table-body { --spectrum-table-background-color: Canvas; --spectrum-table-row-background-color-hover: Canvas; --spectrum-table-row-background-color-down: Canvas; - --spectrum-selectlist-option-focus-indicator-color: Highlight; + --spectrum-table-row-focus-indicator-color: Highlight; --spectrum-table-cell-border-color: CanvasText; --spectrum-table-row-border-color-selected: Highlight; --spectrum-alias-border-color-focus: Highlight; - - .spectrum-Table-colResizeIndicator { - --spectrum-table-col-resize-indicator-background-color: Highlight; - } - - .spectrum-Table-colResizeNubbin { - --spectrum-table-col-resize-nubbin-background-color: Highlight; - --spectrum-table-col-resize-nubbin-icon-color: HighlightText; - } - - .spectrum-Table-bodyResizeIndicator { - --spectrum-table-body-resize-indicator-background-color: Highlight; - } } .spectrum-Table-headWrapper { + /* forced-color-adjust: none, so that border-inline-start-color and + border-inline-end-color remain transparent with forced-colors: active. */ forced-color-adjust: none; .spectrum-Table-headCell { + /* forced-color-adjust: auto, so that cells and cell content within + .spectrum-Table-headWrapper render using force-colors: active */ forced-color-adjust: auto; } } @@ -378,6 +366,7 @@ tbody.spectrum-Table-body { &:focus-ring, &.is-focused { &::before { + /* forced-color-adjust: none, so that box-shadow style will render */ forced-color-adjust: none; } } @@ -385,16 +374,14 @@ tbody.spectrum-Table-body { .spectrum-Table-row { &:focus-ring { - &:before { - forced-color-adjust: none; - } /* Add an outline color to the focused row in so that it displays with a nice thick border. */ &:after { - outline-color: var(--spectrum-selectlist-option-focus-indicator-color); + outline-color: var(--spectrum-table-row-focus-indicator-color); } } &:after { + /* forced-color-adjust: none, so that box-shadow style will render */ forced-color-adjust: none; } @@ -402,18 +389,20 @@ tbody.spectrum-Table-body { &.is-selected, &.spectrum-Table-row--firstRow.is-selected { &:after { + /* forced-color-adjust: none, so that box-shadow style will render */ forced-color-adjust: none; } } &.is-drop-target { - /* Cells with .spectrum-Table-cellWrapper render on top ofthe + /* Cells with .spectrum-Table-cellWrapper render on top of the ::before element in the row, so we have to make its background-color transparent in order to see the .is-drop-target style. */ .spectrum-Table-cellWrapper { --spectrum-table-background-color: transparent; } &::before { + /* forced-color-adjust: none, so that box-shadow style will render */ forced-color-adjust: none; } } From a796b339ea69c487d5d5d3e702d4372557e16ddd Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Tue, 24 Jan 2023 19:17:48 -0500 Subject: [PATCH 14/18] fix(#3672): fix ListView forced-colors overrides --- packages/@react-spectrum/list/src/styles.css | 121 +++++++++++-------- 1 file changed, 72 insertions(+), 49 deletions(-) diff --git a/packages/@react-spectrum/list/src/styles.css b/packages/@react-spectrum/list/src/styles.css index 3bda42799b8..62db8920ff2 100644 --- a/packages/@react-spectrum/list/src/styles.css +++ b/packages/@react-spectrum/list/src/styles.css @@ -25,9 +25,30 @@ --spectrum-listview-item-description-text-size: var(--spectrum-global-dimension-font-size-75); } +.react-spectrum-ListView { + --spectrum-listview-border-color: var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)); + --spectrum-listview-border-color-key-focus: var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-focus-color)); + --spectrum-listview-background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50)); + --spectrum-listview-item-background-color-hover: var(--spectrum-table-row-background-color-hover); + --spectrum-listview-item-background-color-down: var(--spectrum-table-row-background-color-down); + --spectrum-listview-item-background-color-selected: var(--spectrum-table-row-background-color-selected); + --spectrum-listview-item-background-color-selected-hover: var(--spectrum-table-row-background-color-selected); + --spectrum-listview-item-background-color-selected-key-focus: var(--spectrum-table-row-background-color-selected-key-focus); + --spectrum-listview-item-border-color: var(--spectrum-table-cell-border-color, var(--spectrum-alias-border-color-mid)); + --spectrum-listview-item-border-color-selected: var(--spectrum-global-color-blue-500); + --spectrum-listview-item-border-color-key-focus: var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-focus-color)); + --spectrum-listview-row-sticky-focus-indicator-color: var(--spectrum-selectlist-option-focus-indicator-color); + --spectrum-listview-quiet-background-color: var(--spectrum-alias-background-color-transparent); + --spectrum-listview-item-text-color: var(--spectrum-table-cell-text-color, var(--spectrum-alias-text-color)); + --spectrum-listview-item-text-color-disabled: var(--spectrum-alias-text-color-disabled); + --spectrum-listview-droptarget-background-color: var(--spectrum-alias-highlight-selected); + --spectrum-listview-dropindicator-border-color: var(--spectrum-dropindicator-border-color); + --spectrum-listview-dropindicator-circle-border-color: var(--spectrum-dropindicator-circle-border-color); +} + .react-spectrum-ListView { box-sizing: border-box; - border-color: var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)); + border-color: var(--spectrum-listview-border-color); border-style: solid; position: relative; border-width: var(--spectrum-listview-border-width); @@ -71,20 +92,24 @@ } &.is-selected { - background-color: var(--spectrum-table-row-background-color-selected); + background-color: var(--spectrum-listview-item-background-color-selected); &.is-hovered, &.is-active { - background-color: var(--spectrum-table-row-background-color-selected-hover); + background-color: var(--spectrum-listview-item-background-color-selected-hover); } &:focus-ring { - background-color: var(--spectrum-table-row-background-color-selected-key-focus); + background-color: var(--spectrum-listview-item-background-color-selected-key-focus); } /* Negative block start causes borders to actually be shared between items. Only works if we allow item overflow to be visible, like card focus rings. */ &:after { inset-block-start: -1px; - box-shadow: inset 1px 0 0 0 var(--spectrum-global-color-blue-500), inset -1px 0 0 0 var(--spectrum-global-color-blue-500), inset 0 -1px 0 0 var(--spectrum-global-color-blue-500), inset 0 1px 0 0 var(--spectrum-global-color-blue-500); + box-shadow: + inset 1px 0 0 0 var(--spectrum-listview-item-border-color-selected), + inset -1px 0 0 0 var(--spectrum-listview-item-border-color-selected), + inset 0 -1px 0 0 var(--spectrum-listview-item-border-color-selected), + inset 0 1px 0 0 var(--spectrum-listview-item-border-color-selected); } } @@ -104,7 +129,7 @@ /* Also omit bottom border for last row if the total content height of the ListView is equal or greater than the height of the container. This avoids overlapping bottom borders. */ &:not(.is-selected):not(.is-next-selected):not(.react-spectrum-ListViewItem--isFlushBottom) { &:after { - box-shadow: inset 0 -1px 0 0 var(--spectrum-table-cell-border-color); + box-shadow: inset 0 -1px 0 0 var(--spectrum-listview-item-border-color); } } @@ -176,13 +201,13 @@ inset-inline-start: 0; width: var(--spectrum-listview-row-sticky-focus-indicator-width); z-index: 4; - background: var(--spectrum-selectlist-option-focus-indicator-color); + background: var(--spectrum-listview-row-sticky-focus-indicator-color); } } } .react-spectrum-ListView.react-spectrum-ListView--quiet { - background-color: var(--spectrum-alias-background-color-transparent); + background-color: var(--spectrum-listview-quiet-background-color); border-width: 0; border-radius: 0; @@ -232,39 +257,39 @@ padding: var(--spectrum-listview-item-regular-padding-y) var(--spectrum-global-dimension-size-160); position: relative; /*background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));*/ - color: var(--spectrum-table-cell-text-color, var(--spectrum-alias-text-color)); + color: var(--spectrum-listview-item-text-color); outline: 0; min-height: var(--spectrum-global-dimension-size-500); &.is-hovered, &.is-focused { - background-color: var(--spectrum-table-row-background-color-hover); + background-color: var(--spectrum-listview-item-background-color-hover); } &:focus-ring { - background-color: var(--spectrum-table-row-background-color-hover); + background-color: var(--spectrum-listview-item-background-color-hover); } &.is-active { - background-color: var(--spectrum-table-row-background-color-down); + background-color: var(--spectrum-listview-item-background-color-down); } &.is-selected { - background-color: var(--spectrum-table-row-background-color-hover); + background-color: var(--spectrum-listview-item-background-color-hover); &.is-hovered, &.is-active { - background-color: var(--spectrum-table-row-background-color-hover); + background-color: var(--spectrum-listview-item-background-color-hover); } &:focus-ring { - background-color: var(--spectrum-table-row-background-color-selected-key-focus); + background-color: var(--spectrum-listview-item-background-color-selected-key-focus); } } &.is-disabled { &, .react-spectrum-ListViewItem-content, .react-spectrum-ListViewItem-description { - color: var(--spectrum-alias-text-color-disabled); + color: var(--spectrum-listview-item-text-color-disabled); } } @@ -303,7 +328,7 @@ border-radius: var(--spectrum-alias-border-radius-regular); &:focus-ring { - box-shadow: inset 0 0 0 2px var(--spectrum-table-cell-border-color-key-focus); + box-shadow: inset 0 0 0 2px var(--spectrum-listview-item-border-color-key-focus); outline: none; } } @@ -397,7 +422,7 @@ width: var(--spectrum-global-dimension-size-2400); border: 1px solid var(--spectrum-dropzone-border-color-selected-hover); border-radius: var(--spectrum-alias-border-radius-regular); - background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50)); + background-color: var(--spectrum-listview-background-color); &.react-spectrum-ListViewItem-dragPreview--compact { padding-top: var(--spectrum-listview-item-compact-padding-y); @@ -438,7 +463,7 @@ height: 100%; border: 1px solid var(--spectrum-dropzone-border-color-selected-hover); border-radius: var(--spectrum-alias-border-radius-regular); - background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50)); + background-color: var(--spectrum-listview-background-color); } } @@ -515,22 +540,22 @@ } .react-spectrum-ListViewItem--dropTarget { - background-color: var(--spectrum-alias-highlight-selected); + background-color: var(--spectrum-listview-droptarget-background-color); box-shadow: - inset 2px 0 0 0 var(--spectrum-table-cell-border-color-key-focus), - inset -2px 0 0 0 var(--spectrum-table-cell-border-color-key-focus), - inset 0 -3px 0 0 var(--spectrum-table-cell-border-color-key-focus), - inset 0 2px 0 0 var(--spectrum-table-cell-border-color-key-focus); + inset 2px 0 0 0 var(--spectrum-listview-item-border-color-key-focus), + inset -2px 0 0 0 var(--spectrum-listview-item-border-color-key-focus), + inset 0 -3px 0 0 var(--spectrum-listview-item-border-color-key-focus), + inset 0 2px 0 0 var(--spectrum-listview-item-border-color-key-focus); } .react-spectrum-ListView.react-spectrum-ListView--dropTarget { - border-color: var(--spectrum-global-color-blue-500); - background-color: var(--spectrum-alias-highlight-selected); - box-shadow: inset 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus); + border-color: var(--spectrum-listview-border-color-key-focus); + background-color: var(--spectrum-listview-droptarget-background-color); + box-shadow: inset 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus); /* Add border to quiet ListView only when it is a drop target */ &.react-spectrum-ListView--quiet { - box-shadow: inset 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus), 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus); + box-shadow: inset 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus), 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus); } } @@ -552,8 +577,8 @@ outline: none; &.react-spectrum-ListViewInsertionIndicator--dropTarget { - background: var(--spectrum-dropindicator-border-color); - border-bottom: 2px solid var(--spectrum-dropindicator-border-color); + background: var(--spectrum-listview-dropindicator-border-color); + border-bottom: 2px solid var(--spectrum-listview-dropindicator-border-color); &:before { left: calc(var(--spectrum-dropindicator-circle-size) * -1); @@ -573,8 +598,8 @@ border-radius: 50%; border: var(--spectrum-dropindicator-border-size) solid; box-sizing: border-box; - border-color: var(--spectrum-dropindicator-circle-border-color); - background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50)); + border-color: var(--spectrum-listview-dropindicator-circle-border-color); + background-color: var(--spectrum-listview-background-color); z-index: 5; } } @@ -599,14 +624,22 @@ .react-spectrum-ListView { &:focus-ring { - border-color: var(--spectrum-global-color-blue-500); - box-shadow: inset 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus); + border-color: var(--spectrum-listview-border-color-key-focus); + box-shadow: inset 0 0 0 1px var(--spectrum-listview-border-color-key-focus); } } @media (forced-colors: active) { .react-spectrum-ListView { - --spectrum-table-cell-border-color: CanvasText; + --spectrum-listview-border-color-key-focus: Highlight; + --spectrum-listview-item-border-color: CanvasText; + --spectrum-listview-item-border-color-selected: Highlight; + --spectrum-listview-item-border-color-key-focus: Highlight; + --spectrum-listview-row-sticky-focus-indicator-color: Highlight; + --spectrum-listview-droptarget-background-color: var(--spectrum-alias-global-color-transparent); + --spectrum-listview-dropindicator-border-color: Highlight; + --spectrum-listview-dropindicator-circle-border-color: Highlight; + &:not(.react-spectrum-ListView--quiet) { .react-spectrum-ListViewItem { /* Box shadow for bottom border for non-selected rows that aren't immediately above a selected row (grey border bottom). */ @@ -622,7 +655,6 @@ &.is-selected { /* Negative block start causes borders to actually be shared between items. Only works if we allow item overflow to be visible, like card focus rings. */ &:after { - --spectrum-global-color-blue-500: Highlight; forced-color-adjust: none; } } @@ -630,17 +662,16 @@ } .react-spectrum-ListView-row { - --spectrum-selectlist-option-focus-indicator-color: Highlight; &:focus-ring { &:before { forced-color-adjust: none; } .react-spectrum-ListViewItem { &:after { - outline: var(--spectrum-listview-row-sticky-focus-indicator-width) solid var(--spectrum-selectlist-option-focus-indicator-color); + outline: var(--spectrum-listview-row-sticky-focus-indicator-width) solid var(--spectrum-listview-row-sticky-focus-indicator-color); outline-offset: calc(-1 * var(--spectrum-listview-row-sticky-focus-indicator-width)); - top: -1px; - height: calc(100% + 1px); + top: calc(-1 * var(--spectrum-listview-border-width)); + height: calc(100% + var(--spectrum-listview-border-width)); } } } @@ -648,8 +679,6 @@ .react-spectrum-ListViewInsertionIndicator { &.react-spectrum-ListViewInsertionIndicator--dropTarget { - --spectrum-dropindicator-border-color: Highlight; - --spectrum-dropindicator-circle-border-color: Highlight; forced-color-adjust: none; &:before, &:after { @@ -660,7 +689,7 @@ .react-spectrum-ListViewItem-draghandle-container { .react-spectrum-ListViewItem-draghandle-button { - --spectrum-table-cell-border-color-key-focus: CanvasText; + --spectrum-listview-item-border-color-key-focus: CanvasText; &:focus-ring { forced-color-adjust: none; } @@ -668,16 +697,10 @@ } .react-spectrum-ListViewItem--dropTarget { - --spectrum-global-color-blue-500: Highlight; - --spectrum-table-cell-border-color-key-focus: Highlight; - --spectrum-alias-highlight-selected: var(--spectrum-alias-global-color-transparent); forced-color-adjust: none; } .react-spectrum-ListView.react-spectrum-ListView--dropTarget { - --spectrum-global-color-blue-500: Highlight; - --spectrum-table-cell-border-color-key-focus: Highlight; - --spectrum-alias-highlight-selected: var(--spectrum-alias-global-color-transparent); forced-color-adjust: none; } From e23100ba3eff9c6206f91b525d06f5620eedb5d4 Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Wed, 25 Jan 2023 11:26:19 -0500 Subject: [PATCH 15/18] fix(#3672): ListView/Table add more code comments for forced-colors --- .../components/table/index.css | 3 ++ packages/@react-spectrum/list/src/styles.css | 37 +++++++++++++------ 2 files changed, 29 insertions(+), 11 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/table/index.css b/packages/@adobe/spectrum-css-temp/components/table/index.css index 2ad1aa49376..f797d111637 100644 --- a/packages/@adobe/spectrum-css-temp/components/table/index.css +++ b/packages/@adobe/spectrum-css-temp/components/table/index.css @@ -512,6 +512,9 @@ svg.spectrum-Table-sortedIcon { @media (forced-colors: active) { .spectrum-Table-row { &:focus-ring { + /* Adds a full outline style to the focused row to better distinguish between + the selected, not selected, selected + focused and selected + not focused + states without using a background color on the row in forced-colors: active mode. */ &:after { outline: var(--spectrum-table-row-sticky-focus-indicator-width) solid; outline-offset: calc(-1 * var(--spectrum-table-row-sticky-focus-indicator-width)); diff --git a/packages/@react-spectrum/list/src/styles.css b/packages/@react-spectrum/list/src/styles.css index 62db8920ff2..2a49b95a325 100644 --- a/packages/@react-spectrum/list/src/styles.css +++ b/packages/@react-spectrum/list/src/styles.css @@ -44,6 +44,9 @@ --spectrum-listview-droptarget-background-color: var(--spectrum-alias-highlight-selected); --spectrum-listview-dropindicator-border-color: var(--spectrum-dropindicator-border-color); --spectrum-listview-dropindicator-circle-border-color: var(--spectrum-dropindicator-circle-border-color); + + --spectrum-listview-dropindicator-circle-size: var(--spectrum-dropindicator-circle-size); + --spectrum-listview-dropindicator-border-size: var(--spectrum-dropindicator-border-size); } .react-spectrum-ListView { @@ -571,8 +574,8 @@ } .react-spectrum-ListViewInsertionIndicator { - width: calc(100% - (2 * var(--spectrum-dropindicator-circle-size))); - inset-inline-start: var(--spectrum-dropindicator-circle-size); + width: calc(100% - (2 * var(--spectrum-listview-dropindicator-circle-size))); + inset-inline-start: var(--spectrum-listview-dropindicator-circle-size); position: absolute; outline: none; @@ -581,22 +584,22 @@ border-bottom: 2px solid var(--spectrum-listview-dropindicator-border-color); &:before { - left: calc(var(--spectrum-dropindicator-circle-size) * -1); + left: calc(var(--spectrum-listview-dropindicator-circle-size) * -1); } &:after { - right: calc(var(--spectrum-dropindicator-circle-size) * -1); + right: calc(var(--spectrum-listview-dropindicator-circle-size) * -1); } &:before, &:after { content: ''; position: absolute; - top: calc(var(--spectrum-dropindicator-circle-size) * -1 / 2 + var(--spectrum-dropindicator-border-size) / 2); - width: var(--spectrum-dropindicator-circle-size); - height: var(--spectrum-dropindicator-circle-size); + top: calc(var(--spectrum-listview-dropindicator-circle-size) * -1 / 2 + var(--spectrum-listview-dropindicator-border-size) / 2); + width: var(--spectrum-listview-dropindicator-circle-size); + height: var(--spectrum-listview-dropindicator-circle-size); border-radius: 50%; - border: var(--spectrum-dropindicator-border-size) solid; + border: var(--spectrum-listview-dropindicator-border-size) solid; box-sizing: border-box; border-color: var(--spectrum-listview-dropindicator-circle-border-color); background-color: var(--spectrum-listview-background-color); @@ -642,10 +645,9 @@ &:not(.react-spectrum-ListView--quiet) { .react-spectrum-ListViewItem { - /* Box shadow for bottom border for non-selected rows that aren't immediately above a selected row (grey border bottom). */ - /* Also omit bottom border for last row if the total content height of the ListView is equal or greater than the height of the container. This avoids overlapping bottom borders. */ &:not(.is-selected):not(.is-next-selected):not(.react-spectrum-ListViewItem--isFlushBottom) { &:after { + /* forced-color-adjust: none, so that box-shadow style will render */ forced-color-adjust: none; } } @@ -653,8 +655,8 @@ } .react-spectrum-ListViewItem { &.is-selected { - /* Negative block start causes borders to actually be shared between items. Only works if we allow item overflow to be visible, like card focus rings. */ &:after { + /* forced-color-adjust: none, so that box-shadow style will render */ forced-color-adjust: none; } } @@ -664,9 +666,13 @@ .react-spectrum-ListView-row { &:focus-ring { &:before { + /* forced-color-adjust: none, so that background color will render for the sticky focus indicator. */ forced-color-adjust: none; } .react-spectrum-ListViewItem { + /* Adds a full outline style to the focused listview item to better distinguish between + the selected, not selected, selected + focused and selected + not focused + states without using a background color on the row in forced-colors: active mode. */ &:after { outline: var(--spectrum-listview-row-sticky-focus-indicator-width) solid var(--spectrum-listview-row-sticky-focus-indicator-color); outline-offset: calc(-1 * var(--spectrum-listview-row-sticky-focus-indicator-width)); @@ -679,9 +685,13 @@ .react-spectrum-ListViewInsertionIndicator { &.react-spectrum-ListViewInsertionIndicator--dropTarget { + /* forced-color-adjust: none, so that background color + will render border for insertion indicator. */ forced-color-adjust: none; &:before, &:after { + /* forced-color-adjust: none, so that border and background colors + will render for circle end caps on the insertion indicator. */ forced-color-adjust: none; } } @@ -689,18 +699,23 @@ .react-spectrum-ListViewItem-draghandle-container { .react-spectrum-ListViewItem-draghandle-button { + /* Use CanvasText, so that focus ring color on drag handle button matches + focus ring color for other interactive elements within the listview item. */ --spectrum-listview-item-border-color-key-focus: CanvasText; &:focus-ring { + /* forced-color-adjust: none, so that box-shadow style will render */ forced-color-adjust: none; } } } .react-spectrum-ListViewItem--dropTarget { + /* forced-color-adjust: none, so that box-shadow style will render */ forced-color-adjust: none; } .react-spectrum-ListView.react-spectrum-ListView--dropTarget { + /* forced-color-adjust: none, so that box-shadow and background coloe style will render */ forced-color-adjust: none; } From ca1ef8385a22773ba1843d89d5f513ae98b0c04c Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Wed, 25 Jan 2023 15:47:52 -0500 Subject: [PATCH 16/18] fix(#3672): move forced-color-adjust statements to simplify media query overrides --- .../components/table/skin.css | 59 +++------- packages/@react-spectrum/list/src/styles.css | 109 ++++++++---------- 2 files changed, 66 insertions(+), 102 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/table/skin.css b/packages/@adobe/spectrum-css-temp/components/table/skin.css index 848450a0ec4..5e18a97ac8c 100644 --- a/packages/@adobe/spectrum-css-temp/components/table/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/table/skin.css @@ -26,12 +26,20 @@ governing permissions and limitations under the License. .spectrum-Table-headWrapper { border-inline-start-color: transparent; border-inline-end-color: transparent; + + /* forced-color-adjust: none, so that border-inline-start-color and + border-inline-end-color remain transparent with forced-colors: active. */ + forced-color-adjust: none; } .spectrum-Table-headCell { color: var(--spectrum-alias-text-color); background-color: var(--spectrum-alias-background-color-default); + /* forced-color-adjust: auto, so that cells and cell content within + .spectrum-Table-headWrapper render using force-colors: active */ + forced-color-adjust: auto; + &.is-sortable, &.is-resizable { .spectrum-Table-sortedIcon { @@ -82,6 +90,9 @@ governing permissions and limitations under the License. &.is-focused { &::before { box-shadow: inset 0 0 0 2px var(--spectrum-table-cell-border-color-key-focus); + + /* forced-color-adjust: none, so that box-shadow style will render */ + forced-color-adjust: none; } } } @@ -180,6 +191,9 @@ tbody.spectrum-Table-body { inset-block-start: 0; z-index: 3; pointer-events: none; + + /* forced-color-adjust: none, so that box-shadow style will render */ + forced-color-adjust: none; } /* Box shadow for bottom border for non-selected row that is immediately above a selected row. */ @@ -225,6 +239,9 @@ tbody.spectrum-Table-body { &::before { box-shadow: inset 0 0 0 2px var(--spectrum-alias-border-color-focus); background-color: var(--spectrum-alias-highlight-selected); + + /* forced-color-adjust: none, so that box-shadow style will render */ + forced-color-adjust: none; } } } @@ -349,51 +366,13 @@ tbody.spectrum-Table-body { --spectrum-alias-border-color-focus: Highlight; } - .spectrum-Table-headWrapper { - /* forced-color-adjust: none, so that border-inline-start-color and - border-inline-end-color remain transparent with forced-colors: active. */ - forced-color-adjust: none; - .spectrum-Table-headCell { - /* forced-color-adjust: auto, so that cells and cell content within - .spectrum-Table-headWrapper render using force-colors: active */ - forced-color-adjust: auto; - } - } - - .spectrum-Table-cell, - .spectrum-Table-headCell, - .spectrum-Table-headCellButton { - &:focus-ring, - &.is-focused { - &::before { - /* forced-color-adjust: none, so that box-shadow style will render */ - forced-color-adjust: none; - } - } - } - .spectrum-Table-row { &:focus-ring { - /* Add an outline color to the focused row in so that it displays with a nice thick border. */ &:after { outline-color: var(--spectrum-table-row-focus-indicator-color); } } - &:after { - /* forced-color-adjust: none, so that box-shadow style will render */ - forced-color-adjust: none; - } - - &.is-next-selected, - &.is-selected, - &.spectrum-Table-row--firstRow.is-selected { - &:after { - /* forced-color-adjust: none, so that box-shadow style will render */ - forced-color-adjust: none; - } - } - &.is-drop-target { /* Cells with .spectrum-Table-cellWrapper render on top of the ::before element in the row, so we have to make its background-color @@ -401,10 +380,6 @@ tbody.spectrum-Table-body { .spectrum-Table-cellWrapper { --spectrum-table-background-color: transparent; } - &::before { - /* forced-color-adjust: none, so that box-shadow style will render */ - forced-color-adjust: none; - } } } } diff --git a/packages/@react-spectrum/list/src/styles.css b/packages/@react-spectrum/list/src/styles.css index 2a49b95a325..be17fec5f2e 100644 --- a/packages/@react-spectrum/list/src/styles.css +++ b/packages/@react-spectrum/list/src/styles.css @@ -10,7 +10,8 @@ * governing permissions and limitations under the License. */ -:root { +.react-spectrum-ListView, +.react-spectrum-ListViewItem { --spectrum-listview-item-compact-padding-y: var(--spectrum-global-dimension-size-50); --spectrum-listview-item-regular-padding-y: var(--spectrum-global-dimension-size-85); --spectrum-listview-item-spacious-padding-y: var(--spectrum-global-dimension-size-100); @@ -23,9 +24,7 @@ --spectrum-listview-item-title-text-size: var(--spectrum-global-dimension-font-size-100); --spectrum-listview-item-description-text-color: var(--spectrum-global-color-gray-700); --spectrum-listview-item-description-text-size: var(--spectrum-global-dimension-font-size-75); -} -.react-spectrum-ListView { --spectrum-listview-border-color: var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)); --spectrum-listview-border-color-key-focus: var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-focus-color)); --spectrum-listview-background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50)); @@ -47,6 +46,10 @@ --spectrum-listview-dropindicator-circle-size: var(--spectrum-dropindicator-circle-size); --spectrum-listview-dropindicator-border-size: var(--spectrum-dropindicator-border-size); + + --spectrum-listview-dropzone-border-color-selected-hover: var(--spectrum-dropzone-border-color-selected-hover); + --spectrum-listview-item-badge-text-color: var(--spectrum-global-color-static-white); + --spectrum-listview-item-badge-background-color: var(--spectrum-global-color-blue-400); } .react-spectrum-ListView { @@ -62,7 +65,7 @@ border-spacing: 0; transform: translate3d(0, 0, 0); padding: 0; - background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50)); + background-color: var(--spectrum-listview-background-color); outline: 0; user-select: none; @@ -92,6 +95,9 @@ inset-block-start: 0; z-index: 3; pointer-events: none; + + /* forced-color-adjust: none, so that box-shadow style will render */ + forced-color-adjust: none; } &.is-selected { @@ -205,6 +211,9 @@ width: var(--spectrum-listview-row-sticky-focus-indicator-width); z-index: 4; background: var(--spectrum-listview-row-sticky-focus-indicator-color); + + /* forced-color-adjust: none, so that background color will render for the sticky focus indicator. */ + forced-color-adjust: none; } } } @@ -333,6 +342,9 @@ &:focus-ring { box-shadow: inset 0 0 0 2px var(--spectrum-listview-item-border-color-key-focus); outline: none; + + /* forced-color-adjust: none, so that box-shadow style will render */ + forced-color-adjust: none; } } } @@ -423,10 +435,13 @@ &.react-spectrum-ListViewItem-dragPreview { width: var(--spectrum-global-dimension-size-2400); - border: 1px solid var(--spectrum-dropzone-border-color-selected-hover); + border: 1px solid var(--spectrum-listview-dropzone-border-color-selected-hover); border-radius: var(--spectrum-alias-border-radius-regular); background-color: var(--spectrum-listview-background-color); + /* forced-color-adjust: none, so that background-color style will render */ + forced-color-adjust: none; + &.react-spectrum-ListViewItem-dragPreview--compact { padding-top: var(--spectrum-listview-item-compact-padding-y); padding-bottom: var(--spectrum-listview-item-compact-padding-y); @@ -446,8 +461,8 @@ .react-spectrum-ListViewItem-badge { grid-area: badge; - color: white; - background: var(--spectrum-global-color-blue-400); + color: var(--spectrum-listview-item-badge-text-color); + background: var(--spectrum-listview-item-badge-background-color); padding: 0 8px; border-radius: var(--spectrum-alias-border-radius-regular); } @@ -464,9 +479,12 @@ inset-inline-start: 4px; width: 100%; height: 100%; - border: 1px solid var(--spectrum-dropzone-border-color-selected-hover); + border: 1px solid var(--spectrum-listview-dropzone-border-color-selected-hover); border-radius: var(--spectrum-alias-border-radius-regular); background-color: var(--spectrum-listview-background-color); + + /* forced-color-adjust: none, so that box-shadow style will render */ + forced-color-adjust: none; } } @@ -549,6 +567,9 @@ inset -2px 0 0 0 var(--spectrum-listview-item-border-color-key-focus), inset 0 -3px 0 0 var(--spectrum-listview-item-border-color-key-focus), inset 0 2px 0 0 var(--spectrum-listview-item-border-color-key-focus); + + /* forced-color-adjust: none, so that box-shadow style will render */ + forced-color-adjust: none; } .react-spectrum-ListView.react-spectrum-ListView--dropTarget { @@ -556,6 +577,9 @@ background-color: var(--spectrum-listview-droptarget-background-color); box-shadow: inset 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus); + /* forced-color-adjust: none, so that box-shadow and background color styles will render */ + forced-color-adjust: none; + /* Add border to quiet ListView only when it is a drop target */ &.react-spectrum-ListView--quiet { box-shadow: inset 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus), 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus); @@ -583,6 +607,10 @@ background: var(--spectrum-listview-dropindicator-border-color); border-bottom: 2px solid var(--spectrum-listview-dropindicator-border-color); + /* forced-color-adjust: none, so that background color + will render border for insertion indicator. */ + forced-color-adjust: none; + &:before { left: calc(var(--spectrum-listview-dropindicator-circle-size) * -1); } @@ -604,6 +632,9 @@ border-color: var(--spectrum-listview-dropindicator-circle-border-color); background-color: var(--spectrum-listview-background-color); z-index: 5; + + /* forced-color-adjust: none, so that box-shadow and background-color styles will render */ + forced-color-adjust: none; } } } @@ -633,7 +664,11 @@ } @media (forced-colors: active) { - .react-spectrum-ListView { + .react-spectrum-ListView, + .react-spectrum-ListViewItem { + --spectrum-listview-background-color: Canvas; + --spectrum-listview-item-background-color: Canvas; + --spectrum-listview-item-background-color-selected: Canvas; --spectrum-listview-border-color-key-focus: Highlight; --spectrum-listview-item-border-color: CanvasText; --spectrum-listview-item-border-color-selected: Highlight; @@ -642,33 +677,15 @@ --spectrum-listview-droptarget-background-color: var(--spectrum-alias-global-color-transparent); --spectrum-listview-dropindicator-border-color: Highlight; --spectrum-listview-dropindicator-circle-border-color: Highlight; - - &:not(.react-spectrum-ListView--quiet) { - .react-spectrum-ListViewItem { - &:not(.is-selected):not(.is-next-selected):not(.react-spectrum-ListViewItem--isFlushBottom) { - &:after { - /* forced-color-adjust: none, so that box-shadow style will render */ - forced-color-adjust: none; - } - } - } - } - .react-spectrum-ListViewItem { - &.is-selected { - &:after { - /* forced-color-adjust: none, so that box-shadow style will render */ - forced-color-adjust: none; - } - } - } + --spectrum-listview-dropzone-border-color-selected-hover: Highlight; + --spectrum-listview-item-badge-text-color: HighlightText; + --spectrum-listview-item-badge-background-color: Highlight; + --spectrum-listview-item-title-text-color: CanvasText; + --spectrum-listview-item-description-text-color: CanvasText; } .react-spectrum-ListView-row { &:focus-ring { - &:before { - /* forced-color-adjust: none, so that background color will render for the sticky focus indicator. */ - forced-color-adjust: none; - } .react-spectrum-ListViewItem { /* Adds a full outline style to the focused listview item to better distinguish between the selected, not selected, selected + focused and selected + not focused @@ -683,40 +700,12 @@ } } - .react-spectrum-ListViewInsertionIndicator { - &.react-spectrum-ListViewInsertionIndicator--dropTarget { - /* forced-color-adjust: none, so that background color - will render border for insertion indicator. */ - forced-color-adjust: none; - &:before, - &:after { - /* forced-color-adjust: none, so that border and background colors - will render for circle end caps on the insertion indicator. */ - forced-color-adjust: none; - } - } - } - .react-spectrum-ListViewItem-draghandle-container { .react-spectrum-ListViewItem-draghandle-button { /* Use CanvasText, so that focus ring color on drag handle button matches focus ring color for other interactive elements within the listview item. */ --spectrum-listview-item-border-color-key-focus: CanvasText; - &:focus-ring { - /* forced-color-adjust: none, so that box-shadow style will render */ - forced-color-adjust: none; - } } } - .react-spectrum-ListViewItem--dropTarget { - /* forced-color-adjust: none, so that box-shadow style will render */ - forced-color-adjust: none; - } - - .react-spectrum-ListView.react-spectrum-ListView--dropTarget { - /* forced-color-adjust: none, so that box-shadow and background coloe style will render */ - forced-color-adjust: none; - } - } From 91302f94ed580898530e1520c56b7705b6700900 Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Wed, 25 Jan 2023 19:49:28 -0500 Subject: [PATCH 17/18] fix(#3672): remove global variables from forced-colors overrides --- packages/@react-aria/dnd/stories/dnd.css | 161 ++++++++++++------- packages/@react-spectrum/list/src/styles.css | 6 +- 2 files changed, 105 insertions(+), 62 deletions(-) diff --git a/packages/@react-aria/dnd/stories/dnd.css b/packages/@react-aria/dnd/stories/dnd.css index 04c7e300a17..981d4194c00 100644 --- a/packages/@react-aria/dnd/stories/dnd.css +++ b/packages/@react-aria/dnd/stories/dnd.css @@ -1,23 +1,46 @@ +.draggable { + --spectrum-dnd-draggable-background-color: var(--spectrum-global-color-gray-50); + --spectrum-dnd-draggable-background-color-selected: var(--spectrum-alias-highlight-selected); + --spectrum-dnd-draggable-background-color-dragging: var(--spectrum-global-color-gray-75); + --spectrum-dnd-draggable-border-color: var(--spectrum-global-color-gray-300); + --spectrum-dnd-draggable-border-color-selected: var(--spectrum-table-row-background-color-selected); + --spectrum-dnd-draggable-border-color-dragging: var(--spectrum-global-color-gray-200); + --spectrum-dnd-draggable-border-color-selected-hover: var(--spectrum-dropzone-border-color-selected-hover); + --spectrum-dnd-draggable-border-color-focus: var(--spectrum-dnd-draggable-border-color-selected-hover); + --spectrum-dnd-draggable-badge-text-color: var(--spectrum-global-color-static-white); + --spectrum-dnd-draggable-badge-background-color: var(--spectrum-global-color-blue-400); +} + +.droppable { + --spectrum-dnd-droppable-background-color: var(--spectrum-global-color-gray-50); + --spectrum-dnd-droppable-background-color-selected: var(--spectrum-alias-highlight-selected); + --spectrum-dnd-droppable-border-color: var(--spectrum-global-color-gray-300); + --spectrum-dnd-droppable-border-color-selected: var(--spectrum-table-row-background-color-selected); + --spectrum-dnd-droppable-border-color-selected-hover: var(--spectrum-dropzone-border-color-selected-hover); + --spectrum-dnd-droppable-border-color-focus: var(--spectrum-dnd-droppable-border-color-selected-hover); +} + .draggable { width: var(--spectrum-alias-single-line-width); - border: 1px solid var(--spectrum-global-color-gray-300);; + border: 1px solid var(--spectrum-dnd-draggable-border-color); box-sizing: border-box; height: var(--spectrum-global-dimension-static-size-500); display: flex; align-items: center; padding: 0 var(--spectrum-global-dimension-static-size-150); border-radius: var(--spectrum-alias-border-radius-regular); - background: var(--spectrum-global-color-gray-50); + background: var(--spectrum-dnd-draggable-background-color); margin: 4px 0; &.is-selected { - background: var(--spectrum-alias-highlight-selected); - border-color: var(--spectrum-table-row-background-color-selected); + background: var(--spectrum-dnd-draggable-background-color-selected); + border-color: var(--spectrum-dnd-draggable-border-color-selected); + forced-color-adjust: none; } &.is-dragging { - background: var(--spectrum-global-color-gray-75); - border-color: var(--spectrum-global-color-gray-200); + background: var(--spectrum-dnd-draggable-background-color-dragging); + border-color: var(--spectrum-dnd-draggable-border-color-dragging); } &:focus { @@ -25,8 +48,9 @@ } &:focus-ring { - border-color: var(--spectrum-dropzone-border-color-selected-hover); - box-shadow: 0 0 0 1px var(--spectrum-dropzone-border-color-selected-hover); + border-color: var(--spectrum-dnd-draggable-border-color-focus); + box-shadow: 0 0 0 1px var(--spectrum-dnd-draggable-border-color-focus); + forced-color-adjust: none; } > span { @@ -42,7 +66,7 @@ &.is-drag-preview { margin: 0; - border-color: var(--spectrum-dropzone-border-color-selected-hover); + border-color: var(--spectrum-dnd-draggable-border-color-selected-hover); } &.is-dragging-multiple { @@ -56,35 +80,37 @@ left: 4px; width: 100%; height: 100%; - border: 1px solid var(--spectrum-dropzone-border-color-selected-hover); + border: 1px solid var(--spectrum-dnd-draggable-border-color-selected-hover); border-radius: var(--spectrum-alias-border-radius-regular); - background: var(--spectrum-global-color-gray-50); + background: var(--spectrum-dnd-draggable-background-color); + forced-color-adjust: none; } } .badge { - color: white; - background: var(--spectrum-global-color-blue-400); + color: var(--spectrum-dnd-draggable-badge-text-color); + background: var(--spectrum-dnd-draggable-badge-background-color); padding: 0 8px; - border-radius: var(--spectrum-alias-border-radius-regular) + border-radius: var(--spectrum-alias-border-radius-regular); + forced-color-adjust: none; } } .droppable { width: var(--spectrum-alias-single-line-width); - border: 1px solid var(--spectrum-global-color-gray-300); + border: 1px solid var(--spectrum-dnd-droppable-border-color); box-sizing: border-box; height: var(--spectrum-global-dimension-static-size-500); display: flex; align-items: center; padding: 0 var(--spectrum-global-dimension-static-size-150); border-radius: var(--spectrum-alias-border-radius-regular); - background: var(--spectrum-global-color-gray-50); + background: var(--spectrum-dnd-droppable-background-color); margin: 4px 0; &.is-selected { - background: var(--spectrum-alias-highlight-selected); - border-color: var(--spectrum-table-row-background-color-selected); + background: var(--spectrum-dnd-droppable-background-color-selected); + border-color: var(--spectrum-dnd-droppable-border-color-selected); } &:focus { @@ -92,14 +118,14 @@ } &:focus-ring { - border-color: var(--spectrum-dropzone-border-color-selected-hover); - box-shadow: 0 0 0 1px var(--spectrum-dropzone-border-color-selected-hover); + border-color: var(--spectrum-dnd-droppable-border-color-selected-hover); + box-shadow: 0 0 0 1px var(--spectrum-dnd-droppable-border-color-selected-hover); } &.is-drop-target { - border-color: var(--spectrum-dropzone-border-color-selected-hover); - background-color: var(--spectrum-dropzone-background-color-selected-hover); - box-shadow: 0 0 0 1px var(--spectrum-dropzone-border-color-selected-hover); + border-color: var(--spectrum-dnd-droppable-border-color-selected-hover); + background-color: var(--spectrum-dnd-droppable-background-color-selected); + box-shadow: 0 0 0 1px var(--spectrum-dnd-droppable-border-color-selected-hover); } > span { @@ -121,7 +147,7 @@ } &:focus-ring { - box-shadow: 0 0 0 2px var(--spectrum-dropzone-border-color-selected-hover); + box-shadow: 0 0 0 2px var(--spectrum-dnd-draggable-border-color-selected-hover); } } @@ -137,8 +163,8 @@ gap: 8px; &.is-drop-target { - background-color: var(--spectrum-dropzone-background-color-selected-hover); - box-shadow: 0 0 0 2px var(--spectrum-dropzone-border-color-selected-hover); + background-color: var(--spectrum-dnd-droppable-background-color-selected-hover); + box-shadow: 0 0 0 2px var(--spectrum-dnd-droppable-border-color-selected-hover); } &.is-virtualized { @@ -188,43 +214,46 @@ @media (forced-colors: active) { .draggable { - --spectrum-dropzone-background-color-selected-hover: Canvas; - --spectrum-dropzone-border-color-selected-hover: Highlight; - --spectrum-alias-highlight-selected: Highlight; - --spectrum-table-row-text-color-selected: HighlightText; - --spectrum-table-row-background-color-selected: Highlight; - - &:focus-ring { - forced-color-adjust: none; + --spectrum-dnd-draggable-row-text-color-selected: HighlightText; + --spectrum-dnd-draggable-row-background-color-selected: Highlight; + --spectrum-dnd-draggable-background-color: Canvas; + --spectrum-dnd-draggable-background-color-selected: Canvas; + --spectrum-dnd-draggable-background-color-dragging: Canvas; + --spectrum-dnd-draggable-border-color: CanvasText; + --spectrum-dnd-draggable-border-color-selected: Highlight; + --spectrum-dnd-draggable-border-color-dragging: Highlight; + --spectrum-dnd-draggable-border-color-selected-hover: Highlight; + --spectrum-dnd-draggable-border-color-focus: Highlight; + --spectrum-dnd-draggable-badge-text-color: HighlightText; + --spectrum-dnd-draggable-badge-background-color: Highlight; + + .drag-handle { + --spectrum-dnd-draggable-border-color-selected-hover: CanvasText; } &.is-selected { - forced-color-adjust: none; - color: var(--spectrum-table-row-text-color-selected); - background-color: var(--spectrum-table-row-background-color-selected); + color: var(--spectrum-dnd-draggable-row-text-color-selected); + background-color: var(--spectrum-dnd-draggable-row-background-color-selected); .drag-handle { - --spectrum-dropzone-border-color-selected-hover: HighlightText; - &:focus-ring { - forced-color-adjust: none; - } + --spectrum-dnd-draggable-border-color-selected-hover: HighlightText; } } - - &.is-dragging { - --spectrum-global-color-gray-75: Canvas; - --spectrum-global-color-gray-200: CanvasText; - } } .droppable { - --spectrum-global-color-gray-300: CanvasText; - --spectrum-global-color-gray-50: Canvas; - --spectrum-dropzone-background-color-selected-hover: Canvas; - --spectrum-dropzone-border-color-selected-hover: Highlight; - --spectrum-alias-highlight-selected: Highlight; - --spectrum-table-row-text-color-selected: HighlightText; - --spectrum-table-row-background-color-selected: Highlight; + --spectrum-dnd-droppable-row-text-color-selected: HighlightText; + --spectrum-dnd-droppable-row-background-color-selected: Highlight; + --spectrum-dnd-droppable-background-color: Canvas; + --spectrum-dnd-droppable-background-color-selected: Canvas; + --spectrum-dnd-droppable-background-color-dragging: Canvas; + --spectrum-dnd-droppable-border-color: CanvasText; + --spectrum-dnd-droppable-border-color-selected: Highlight; + --spectrum-dnd-droppable-border-color-dragging: Highlight; + --spectrum-dnd-droppable-border-color-selected-hover: Highlight; + --spectrum-dnd-droppable-border-color-focus: Highlight; + --spectrum-dnd-droppable-badge-text-color: HighlightText; + --spectrum-dnd-droppable-badge-background-color: Highlight; &:focus-ring { forced-color-adjust: none; @@ -232,13 +261,13 @@ &.is-selected { forced-color-adjust: none; - color: var(--spectrum-table-row-text-color-selected); - background-color: var(--spectrum-table-row-background-color-selected); + color: var(--spectrum-dnd-droppable-row-text-color-selected); + background-color: var(--spectrum-dnd-droppable-row-background-color-selected); } &.is-drop-target { - --spectrum-dropzone-background-color-selected-hover: Canvas; - --spectrum-dropzone-border-color-selected-hover: Highlight; + --spectrum-dnd-droppable-background-color-selected-hover: Canvas; + --spectrum-dnd-droppable-border-color-selected-hover: Highlight; forced-color-adjust: none; } } @@ -246,15 +275,27 @@ .drag-handle { &:focus-ring { forced-color-adjust: none; - --spectrum-dropzone-border-color-selected-hover: Highlight; + --spectrum-dnd-draggable-border-color-selected-hover: Highlight; } } .droppable-collection { - --spectrum-dropzone-background-color-selected-hover: Canvas; - --spectrum-dropzone-border-color-selected-hover: Highlight; + --spectrum-dnd-droppable-background-color-selected-hover: Canvas; + --spectrum-dnd-droppable-border-color-selected-hover: Highlight; &.is-drop-target { forced-color-adjust: none; } } + + .option[aria-selected=true] { + background: Highlight; + color: HighlightText; + forced-color-adjust: none; + } + + .option.focus-visible { + position: relative; + outline: 3px solid Highlight; + forced-color-adjust: none; + } } diff --git a/packages/@react-spectrum/list/src/styles.css b/packages/@react-spectrum/list/src/styles.css index be17fec5f2e..b6ee67b48a2 100644 --- a/packages/@react-spectrum/list/src/styles.css +++ b/packages/@react-spectrum/list/src/styles.css @@ -50,6 +50,8 @@ --spectrum-listview-dropzone-border-color-selected-hover: var(--spectrum-dropzone-border-color-selected-hover); --spectrum-listview-item-badge-text-color: var(--spectrum-global-color-static-white); --spectrum-listview-item-badge-background-color: var(--spectrum-global-color-blue-400); + + --spectrum-listview-item-draghandle-border-color-key-focus: var(--spectrum-listview-item-border-color-key-focus); } .react-spectrum-ListView { @@ -340,7 +342,7 @@ border-radius: var(--spectrum-alias-border-radius-regular); &:focus-ring { - box-shadow: inset 0 0 0 2px var(--spectrum-listview-item-border-color-key-focus); + box-shadow: inset 0 0 0 2px var(--spectrum-listview-item-draghandle-border-color-key-focus); outline: none; /* forced-color-adjust: none, so that box-shadow style will render */ @@ -704,7 +706,7 @@ .react-spectrum-ListViewItem-draghandle-button { /* Use CanvasText, so that focus ring color on drag handle button matches focus ring color for other interactive elements within the listview item. */ - --spectrum-listview-item-border-color-key-focus: CanvasText; + --spectrum-listview-item-draghandle-border-color-key-focus: CanvasText; } } From b32554b17bcc4db54810619cac3314d03a1e0500 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Mon, 30 Jan 2023 13:02:53 -0600 Subject: [PATCH 18/18] fix border focus colors --- packages/@adobe/spectrum-css-temp/components/table/skin.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/table/skin.css b/packages/@adobe/spectrum-css-temp/components/table/skin.css index 5e18a97ac8c..7c1e9cde355 100644 --- a/packages/@adobe/spectrum-css-temp/components/table/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/table/skin.css @@ -18,8 +18,8 @@ governing permissions and limitations under the License. --spectrum-table-col-resize-nubbin-background-color: xvar(--spectrum-legacy-color-blue-400, var(--spectrum-global-color-blue-400)); --spectrum-table-col-resize-nubbin-icon-color: var(--spectrum-global-color-static-white); --spectrum-table-body-resize-indicator-background-color: xvar(--spectrum-legacy-color-blue-400, var(--spectrum-global-color-blue-400)); - --spectrum-table-row-border-color-selected: xvar(--spectrum-legacy-color-blue-500, var(--spectrum-global-color-blue-500)); - --spectrum-table-cell-border-color-selected: xvar(--spectrum-legacy-color-blue-500, var(--spectrum-global-color-blue-500)); + --spectrum-table-row-border-color-selected: var(--spectrum-global-color-blue-500); + --spectrum-table-cell-border-color-selected: var(--spectrum-global-color-blue-500); --spectrum-table-row-focus-indicator-color: var(--spectrum-selectlist-option-focus-indicator-color); }