diff --git a/components/checkbox/index.css b/components/checkbox/index.css index 482a192afcc..742bfcc43d2 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -110,7 +110,6 @@ --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-300); } -/* stylelint-disable max-nesting-depth */ /* Default Unchecked */ .spectrum-Checkbox { color: var(--highcontrast-checkbox-content-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default))); @@ -164,19 +163,15 @@ &.is-indeterminate .spectrum-Checkbox-input:focus-visible, .spectrum-Checkbox-input:focus-visible { - & + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); - } + & + .spectrum-Checkbox-box::before { + border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); } } &:hover { .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); - } + .spectrum-Checkbox-box::before { + border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); } } } @@ -192,18 +187,14 @@ border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); &:hover { - .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); - } + .spectrum-Checkbox-box::before { + border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); } } &:active { - .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-selected-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); - } + .spectrum-Checkbox-box::before { + border-color: var(--highcontrast-checkbox-selected-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); } } } @@ -251,11 +242,9 @@ } &:hover { - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-selected-color-hover, var(--spectrum-checkbox-control-selected-color-hover))); - } + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before, + .spectrum-Checkbox-box::before { + border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-selected-color-hover, var(--spectrum-checkbox-control-selected-color-hover))); } } } @@ -271,11 +260,9 @@ } &:hover { - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); - } + .spectrum-Checkbox-box::before, + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before { + border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); } .spectrum-Checkbox-label { @@ -284,7 +271,6 @@ } } } -/* stylelint-enable max-nesting-depth */ /* Emphasized */ .spectrum-Checkbox--emphasized { @@ -427,8 +413,7 @@ inline-size: 100%; block-size: 100%; - /* @todo Look into replacing with opacity 0. The tiny opacity value appears to be a workaround for a ChromeVox legacy bug (circa 2018). */ - opacity: 0.0001; + opacity: 0; z-index: 1; cursor: pointer; @@ -577,7 +562,6 @@ outline-color: var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))); outline-style: auto; outline-offset: var(--highcontrast-checkbox-focus-indicator-gap, var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap))); - /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */ outline-width: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); &::after { diff --git a/components/checkbox/metadata/metadata.json b/components/checkbox/metadata/metadata.json index d95164d16a1..c6f46aba371 100644 --- a/components/checkbox/metadata/metadata.json +++ b/components/checkbox/metadata/metadata.json @@ -66,7 +66,7 @@ ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-label", ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box", ".spectrum-Checkbox.is-readOnly", ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label", diff --git a/components/colorhandle/index.css b/components/colorhandle/index.css index 62e9b967bbd..fd524efecb8 100644 --- a/components/colorhandle/index.css +++ b/components/colorhandle/index.css @@ -95,8 +95,6 @@ inline-size: 100%; block-size: 100%; box-shadow: inset 0 0 0 var(--mod-colorhandle-inner-border-width, var(--spectrum-colorhandle-inner-border-width)) var(--mod-colorhandle-inner-border-color, var(--spectrum-colorhandle-inner-border-color)); - - /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- undefined variable allows custom stylesheet or JS to pass the value to this element */ background-color: var(--spectrum-picked-color); } diff --git a/components/colorloupe/index.css b/components/colorloupe/index.css index 308bdc29deb..ba9871a3d56 100644 --- a/components/colorloupe/index.css +++ b/components/colorloupe/index.css @@ -60,7 +60,6 @@ } .spectrum-ColorLoupe-inner-border { - /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- undefined variable allows custom stylesheet or JS to pass the value to this element */ fill: var(--spectrum-picked-color); stroke: var(--mod-colorloupe-inner-border-color, var(--spectrum-colorloupe-inner-border-color)); stroke-width: var(--mod-colorloupe-inner-border-width, var(--spectrum-colorloupe-inner-border-width)); diff --git a/components/dial/index.css b/components/dial/index.css index 05e34cd638e..dd83d346881 100644 --- a/components/dial/index.css +++ b/components/dial/index.css @@ -230,8 +230,7 @@ padding: 0; position: absolute; overflow: hidden; - /* stylelint-disable-next-line number-max-precision -- @todo Look into replacing with opacity 0. The tiny opacity value appears to be a workaround for a ChromeVox legacy bug (circa 2018). */ - opacity: 0.000001; + opacity: 0; cursor: default; appearance: none; border: 0; @@ -274,6 +273,7 @@ .u-isGrabbing { cursor: ns-resize; + /* stylelint-disable-next-line -- required for webkit cursor grab/grabbing support */ cursor: -webkit-grabbing; cursor: grabbing; diff --git a/components/sidenav/index.css b/components/sidenav/index.css index 91664d1696d..ef06c92a512 100644 --- a/components/sidenav/index.css +++ b/components/sidenav/index.css @@ -265,7 +265,6 @@ @media (forced-colors: active) { .spectrum-SideNav { .spectrum-Icon { - /* stylelint-disable-next-line declaration-property-value-no-unknown -- forced-color-adjust: preserve-parent-color addresses svg bug on icon hover */ forced-color-adjust: preserve-parent-color; } } diff --git a/components/site/site.css b/components/site/site.css index d5b24002df5..6246b5f2cee 100644 --- a/components/site/site.css +++ b/components/site/site.css @@ -103,13 +103,11 @@ } .spectrum-Site-logo { - /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- passthrough icon sizing */ --spectrum-icon-size: 32px; --mod-icon-color: #fa0f00; margin-inline-end: var(--spectrum-spacing-200); .spectrum--large & { - /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- passthrough icon sizing */ --spectrum-icon-size: 40px; } } @@ -206,7 +204,6 @@ margin-inline-end: 20px; & .spectrum-Icon { - /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- passthrough icon sizing */ --spectrum-icon-size: 200px; } } diff --git a/components/slider/index.css b/components/slider/index.css index 276fd803106..f4cd0317ee8 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -390,8 +390,7 @@ inset-inline-start: var(--mod-slider-input-left, var(--spectrum-slider-input-left)); overflow: hidden; - /* stylelint-disable-next-line number-max-precision -- @todo Look into replacing with opacity 0. The tiny opacity value appears to be a workaround for a ChromeVox legacy bug (circa 2018). */ - opacity: 0.000001; + opacity: 0; cursor: default; appearance: none; border: 0; @@ -704,7 +703,6 @@ --highcontrast-slider-track-color: ButtonText; --highcontrast-slider-track-color-disabled: GrayText; --highcontrast-slider-track-color-static: ButtonText; - --highcontrast-slider-track-fill-color: ButtonText; --highcontrast-slider-track-fill-color-disabled: GrayText; --highcontrast-slider-filled-track-fill-color: Highlight; @@ -745,7 +743,6 @@ .spectrum-Slider-controls:active, .spectrum-Slider-controls:focus-within, .spectrum-Slider-controls.is-focused { - --highcontrast-slider-track-fill-color: Highlight; --highcontrast-slider-track-color: Highlight; --highcontrast-slider-handle-border-color: Highlight; --highcontrast-slider-ramp-track-color: Highlight; diff --git a/components/slider/metadata/metadata.json b/components/slider/metadata/metadata.json index 0a79c13b355..4c2be2d396c 100644 --- a/components/slider/metadata/metadata.json +++ b/components/slider/metadata/metadata.json @@ -301,7 +301,6 @@ "--highcontrast-slider-track-color", "--highcontrast-slider-track-color-disabled", "--highcontrast-slider-track-color-static", - "--highcontrast-slider-track-fill-color", "--highcontrast-slider-track-fill-color-disabled" ] } diff --git a/components/swatch/index.css b/components/swatch/index.css index ebf9f2838d4..70d19895425 100644 --- a/components/swatch/index.css +++ b/components/swatch/index.css @@ -145,7 +145,6 @@ &.is-mixedValue { .spectrum-Swatch-fill { - /* stylelint-disable-next-line -- Undefined variable allows custom stylesheet or JS to pass the value to this element */ background: var(--spectrum-picked-color, transparent); } @@ -158,7 +157,6 @@ /* Swatch fill: Not fill with Slash */ &.is-nothing { .spectrum-Swatch-fill { - /* stylelint-disable-next-line -- Undefined variable allows custom stylesheet or JS to pass the value to this element */ background-color: var(--spectrum-picked-color, transparent); background-image: none; @@ -172,12 +170,8 @@ } } - &.spectrum-Swatch--rectangle { - .spectrum-Swatch-fill { - &::after { - transform: rotate(-25deg); - } - } + &.spectrum-Swatch--rectangle .spectrum-Swatch-fill::after { + transform: rotate(-25deg); } } @@ -248,7 +242,6 @@ inset: 0; z-index: 0; - /* stylelint-disable-next-line -- Undefined variable allows custom stylesheet or JS to pass the value to this element */ background-color: var(--spectrum-picked-color, transparent); /* Swatch border */ @@ -263,7 +256,6 @@ &::before { box-shadow: none; - /* stylelint-disable-next-line -- Undefined variable allows custom stylesheet or JS to pass the value to this element */ background-color: var(--spectrum-picked-color, transparent); } } @@ -281,7 +273,6 @@ display: none; pointer-events: none; - /* stylelint-disable-next-line -- Undefined variable allows custom stylesheet or JS to pass the value to this element */ color: var(--spectrum-picked-color, transparent); } diff --git a/components/switch/index.css b/components/switch/index.css index 9bc6027e728..7913f290947 100644 --- a/components/switch/index.css +++ b/components/switch/index.css @@ -247,7 +247,6 @@ } } -/* stylelint-disable max-nesting-depth */ .spectrum-Switch:hover { .spectrum-Switch-input { & + .spectrum-Switch-switch { @@ -274,10 +273,10 @@ &[disabled] { & + .spectrum-Switch-switch { background-color: var(--highcontrast-switch-background-color-disabled, var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled))); + } - &::before { - border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); - } + & + .spectrum-Switch-switch::before { + border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); } & ~ .spectrum-Switch-label { @@ -285,18 +284,16 @@ } /* disabled + selected, not emphasized */ - &:checked { - & + .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color-selected-disabled, var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled))); + &:checked + .spectrum-Switch-switch { + background-color: var(--highcontrast-switch-background-color-selected-disabled, var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled))); + } - &::before { - border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); - } - } + &:checked + .spectrum-Switch-switch::before { + border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); + } - & ~ .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); - } + &:checked ~ .spectrum-Switch-label { + color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); } } } @@ -345,10 +342,10 @@ &:checked { & + .spectrum-Switch-switch { background-color: var(--highcontrast-switch-background-color-selected-focus, var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus))); + } - &::before { - border-color: var(--highcontrast-switch-handle-border-color-selected-focus, var(--mod-switch-handle-border-color-selected-focus, var(--spectrum-switch-handle-border-color-selected-focus))); - } + & + .spectrum-Switch-switch::before { + border-color: var(--highcontrast-switch-handle-border-color-selected-focus, var(--mod-switch-handle-border-color-selected-focus, var(--spectrum-switch-handle-border-color-selected-focus))); } } @@ -357,7 +354,6 @@ } } } -/* stylelint-enable max-nesting-depth */ /* when checked, after transition or set manually */ .spectrum-Switch-input { @@ -403,8 +399,6 @@ /* high contrast mode */ @media (forced-colors: active) { .spectrum-Switch { - forced-color-adjust: none; - --highcontrast-switch-label-color-default: ButtonText; --highcontrast-switch-label-color-hover: ButtonText; --highcontrast-switch-label-color-down: ButtonText; @@ -433,13 +427,14 @@ --highcontrast-switch-focus-indicator-color: ButtonText; + forced-color-adjust: none; + .spectrum-Switch-input { &:not(:checked) + .spectrum-Switch-switch { box-shadow: inset 0 0 0 1px ButtonText; } } - /* stylelint-disable max-nesting-depth */ &:hover .spectrum-Switch-input { &:not(:checked) + .spectrum-Switch-switch { box-shadow: inset 0 0 0 1px Highlight; @@ -450,11 +445,11 @@ &:checked + .spectrum-Switch-switch { box-shadow: inset 0 0 0 1px GrayText; background-color: GrayText; + } - &::before { - border-color: GrayText; - background-color: ButtonFace; - } + &:checked + .spectrum-Switch-switch::before { + border-color: GrayText; + background-color: ButtonFace; } } } @@ -466,21 +461,21 @@ &:not(:checked) + .spectrum-Switch-switch { box-shadow: inset 0 0 0 1px GrayText; background-color: ButtonFace; + } - &::before { - border-color: GrayText; - background-color: ButtonFace; - } + &:not(:checked) + .spectrum-Switch-switch::before { + border-color: GrayText; + background-color: ButtonFace; } &:checked + .spectrum-Switch-switch { box-shadow: inset 0 0 0 1px GrayText; background-color: GrayText; + } - &::before { - border-color: GrayText; - background-color: ButtonFace; - } + &:checked + .spectrum-Switch-switch::before { + border-color: GrayText; + background-color: ButtonFace; } & ~ .spectrum-Switch-label { @@ -488,6 +483,5 @@ } } } - /* stylelint-enable max-nesting-depth */ } } diff --git a/stylelint.config.js b/stylelint.config.js index 2e1d10c956e..4ef8d25ed0b 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -64,6 +64,7 @@ module.exports = { { ignoreProperties: { color: ["CanvasText"], + "forced-color-adjust": ["preserve-parent-color"], }, }, ],