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 810ba5c8f06..b80be4d2f97 100644 --- a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css @@ -10,59 +10,56 @@ 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 { - 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-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-box { - &:before { - border-color: var(--spectrum-checkbox-emphasized-box-border-color); - background-color: var(--spectrum-checkbox-emphasized-box-background-color); - } + --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-label { - color: var(--spectrum-checkbox-emphasized-text-color); -} +.spectrum-Checkbox { + color: var(--spectrum-checkbox-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 +70,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 +87,200 @@ 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); - } -} + .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; + &:disabled ~ .spectrum-Checkbox-label, + &:disabled:active ~ .spectrum-Checkbox-label { + color: var(--spectrum-checkbox-text-color-disabled); } } - &:focus-ring + .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-box-border-color-key-focus); + + &.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); + } + } + + &: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 { + .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-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, + &.is-indeterminate .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-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,47 +288,30 @@ 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: Highlight; - --spectrum-checkbox-quiet-box-border-color-selected-down: Highlight; - --spectrum-checkbox-quiet-box-border-color-selected-hover: Highlight; --spectrum-checkbox-text-color: FieldText; --spectrum-checkbox-text-color-disabled: GrayText; --spectrum-checkbox-text-color-error: FieldText; --spectrum-checkbox-text-color-error-down: FieldText; --spectrum-checkbox-text-color-error-hover: FieldText; - &.is-invalid { - .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-box-border-color); - } - } - &.is-indeterminate .spectrum-Checkbox-box { - &:before { - border-color: var(--spectrum-checkbox-box-border-color-error); - } - } - &.is-disabled .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &:before { - border-color: GrayText; - } - } - /* Extra-specific selectors added here to handle checked state */ - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box - { - &:before { - border-color: var(--spectrum-checkbox-box-border-color-error); - } - } + --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; + --spectrum-alias-toggle-color-selected: ButtonText; } } } diff --git a/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css b/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css index 21cb618c311..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,7 +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; + --spectrum-loader-circle-medium-over-background-track-fill-color: Canvas; } } 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..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,22 +23,35 @@ 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); } } } } + +@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; + } + } +} diff --git a/packages/@adobe/spectrum-css-temp/components/table/index.css b/packages/@adobe/spectrum-css-temp/components/table/index.css index 14015fe2e95..f797d111637 100644 --- a/packages/@adobe/spectrum-css-temp/components/table/index.css +++ b/packages/@adobe/spectrum-css-temp/components/table/index.css @@ -508,3 +508,19 @@ svg.spectrum-Table-sortedIcon { .spectrum-Table-columnResizer--wresize { cursor: w-resize !important; } + +@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)); + 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 d4de45c019f..7c1e9cde355 100644 --- a/packages/@adobe/spectrum-css-temp/components/table/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/table/skin.css @@ -18,17 +18,28 @@ 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: 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); } .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 { @@ -79,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; } } } @@ -150,7 +164,7 @@ tbody.spectrum-Table-body { &:focus-ring { &:before { - background: var(--spectrum-selectlist-option-focus-indicator-color); + background-color: var(--spectrum-table-row-focus-indicator-color); } } @@ -177,12 +191,15 @@ 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. */ &.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 +220,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 +230,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); } } } @@ -222,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; } } } @@ -315,11 +335,11 @@ tbody.spectrum-Table-body { } .spectrum-Table-colResizeNubbin { svg { - > g { + g[fill][stroke] { fill: var(--spectrum-table-col-resize-nubbin-background-color); stroke: var(--spectrum-table-col-resize-nubbin-background-color); } - > path { + path[fill][stroke] { fill: var(--spectrum-table-col-resize-nubbin-icon-color); stroke: var(--spectrum-table-col-resize-nubbin-icon-color); } @@ -336,5 +356,30 @@ 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-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-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-row { + &:focus-ring { + &:after { + outline-color: var(--spectrum-table-row-focus-indicator-color); + } + } + + &.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 + transparent in order to see the .is-drop-target style. */ + .spectrum-Table-cellWrapper { + --spectrum-table-background-color: transparent; + } + } } } 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); } - - } } diff --git a/packages/@react-aria/dnd/stories/dnd.css b/packages/@react-aria/dnd/stories/dnd.css index 3934b90ba4e..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 { @@ -185,3 +211,91 @@ .option.drop-target { outline: 2px solid blue; } + +@media (forced-colors: active) { + .draggable { + --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 { + color: var(--spectrum-dnd-draggable-row-text-color-selected); + background-color: var(--spectrum-dnd-draggable-row-background-color-selected); + + .drag-handle { + --spectrum-dnd-draggable-border-color-selected-hover: HighlightText; + } + } + } + + .droppable { + --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; + } + + &.is-selected { + forced-color-adjust: none; + color: var(--spectrum-dnd-droppable-row-text-color-selected); + background-color: var(--spectrum-dnd-droppable-row-background-color-selected); + } + + &.is-drop-target { + --spectrum-dnd-droppable-background-color-selected-hover: Canvas; + --spectrum-dnd-droppable-border-color-selected-hover: Highlight; + forced-color-adjust: none; + } + } + + .drag-handle { + &:focus-ring { + forced-color-adjust: none; + --spectrum-dnd-draggable-border-color-selected-hover: Highlight; + } + } + + .droppable-collection { + --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 b3db7331fe6..b6ee67b48a2 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,11 +24,39 @@ --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); + + --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); + + --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); + + --spectrum-listview-item-draghandle-border-color-key-focus: var(--spectrum-listview-item-border-color-key-focus); } .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); @@ -38,7 +67,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; @@ -68,23 +97,30 @@ 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 { - 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 +140,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 +212,16 @@ 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); + + /* forced-color-adjust: none, so that background color will render for the sticky focus indicator. */ + forced-color-adjust: none; } } } .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 +271,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,8 +342,11 @@ 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-draghandle-border-color-key-focus); outline: none; + + /* forced-color-adjust: none, so that box-shadow style will render */ + forced-color-adjust: none; } } } @@ -395,9 +437,12 @@ &.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-table-background-color, var(--spectrum-global-color-gray-50)); + 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); @@ -418,8 +463,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); } @@ -436,9 +481,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-table-background-color, var(--spectrum-global-color-gray-50)); + background-color: var(--spectrum-listview-background-color); + + /* forced-color-adjust: none, so that box-shadow style will render */ + forced-color-adjust: none; } } @@ -515,22 +563,28 @@ } .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); + + /* forced-color-adjust: none, so that box-shadow style will render */ + forced-color-adjust: none; } .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); + + /* 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-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); } } @@ -546,36 +600,43 @@ } .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; &.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); + + /* forced-color-adjust: none, so that background color + will render border for insertion indicator. */ + forced-color-adjust: none; &: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-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; + + /* forced-color-adjust: none, so that box-shadow and background-color styles will render */ + forced-color-adjust: none; } } } @@ -599,7 +660,54 @@ .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, + .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; + --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; + --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 { + .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)); + top: calc(-1 * var(--spectrum-listview-border-width)); + height: calc(100% + var(--spectrum-listview-border-width)); + } + } + } + } + + .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-draghandle-border-color-key-focus: CanvasText; + } + } + +}