From 7eebaf76d64913d758631870ae9cd7155af79717 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 28 Oct 2024 17:15:50 -0700 Subject: [PATCH 1/4] chore(stylelint): remove unnecessary disable comments --- components/checkbox/index.css | 2 -- components/colorloupe/index.css | 1 - components/swatch/index.css | 5 ----- 3 files changed, 8 deletions(-) diff --git a/components/checkbox/index.css b/components/checkbox/index.css index 482a192afcc..07ce6073f48 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))); @@ -577,7 +576,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/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/swatch/index.css b/components/swatch/index.css index ebf9f2838d4..0d8f8d2564e 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; @@ -248,7 +246,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 +260,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 +277,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); } From 8666a70e7b59b1f5d4b5b553da87b24a4d532776 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Tue, 29 Oct 2024 06:24:36 -0700 Subject: [PATCH 2/4] chore(colorhandle): removes unnecessary disable --- components/colorhandle/index.css | 2 -- 1 file changed, 2 deletions(-) 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); } From 86f8e594a96de3db663555c054ccee1a148e0904 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Tue, 29 Oct 2024 06:26:14 -0700 Subject: [PATCH 3/4] chore(stylelint): adds supported forced color value to ignoreProperties - Removes unnecessary disables - Adjusts nesting to resolve lint violations - update opacity values and remove comments for unsupported ChromeVox version --- components/checkbox/index.css | 4 +--- components/dial/index.css | 3 +-- components/sidenav/index.css | 1 - components/site/site.css | 3 --- components/slider/index.css | 3 +-- components/switch/index.css | 38 ++++++++++++++++------------------- stylelint.config.js | 1 + 7 files changed, 21 insertions(+), 32 deletions(-) diff --git a/components/checkbox/index.css b/components/checkbox/index.css index 07ce6073f48..9145c440ee9 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -283,7 +283,6 @@ } } } -/* stylelint-enable max-nesting-depth */ /* Emphasized */ .spectrum-Checkbox--emphasized { @@ -426,8 +425,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; diff --git a/components/dial/index.css b/components/dial/index.css index 05e34cd638e..8e8e63fec99 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; 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..a27b6b50079 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; diff --git a/components/switch/index.css b/components/switch/index.css index 9bc6027e728..42183331e03 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 { @@ -345,10 +344,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 +356,6 @@ } } } -/* stylelint-enable max-nesting-depth */ /* when checked, after transition or set manually */ .spectrum-Switch-input { @@ -403,8 +401,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 +429,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 +447,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 +463,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 +485,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"], }, }, ], From 8765292ecfb29dcb4808af959a334048d1f14063 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Tue, 29 Oct 2024 10:17:27 -0700 Subject: [PATCH 4/4] chore(stylelint): fix max nesting violations --- components/checkbox/index.css | 40 ++++++++-------------- components/checkbox/metadata/metadata.json | 2 +- components/dial/index.css | 1 + components/slider/index.css | 2 -- components/slider/metadata/metadata.json | 1 - components/swatch/index.css | 8 ++--- components/switch/index.css | 26 +++++++------- 7 files changed, 30 insertions(+), 50 deletions(-) diff --git a/components/checkbox/index.css b/components/checkbox/index.css index 9145c440ee9..742bfcc43d2 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -163,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))); } } } @@ -191,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))); } } } @@ -250,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))); } } } @@ -270,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 { 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/dial/index.css b/components/dial/index.css index 8e8e63fec99..dd83d346881 100644 --- a/components/dial/index.css +++ b/components/dial/index.css @@ -273,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/slider/index.css b/components/slider/index.css index a27b6b50079..f4cd0317ee8 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -703,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; @@ -744,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 0d8f8d2564e..70d19895425 100644 --- a/components/swatch/index.css +++ b/components/swatch/index.css @@ -170,12 +170,8 @@ } } - &.spectrum-Swatch--rectangle { - .spectrum-Swatch-fill { - &::after { - transform: rotate(-25deg); - } - } + &.spectrum-Swatch--rectangle .spectrum-Swatch-fill::after { + transform: rotate(-25deg); } } diff --git a/components/switch/index.css b/components/switch/index.css index 42183331e03..7913f290947 100644 --- a/components/switch/index.css +++ b/components/switch/index.css @@ -273,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 { @@ -284,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))); } } } @@ -475,7 +473,7 @@ background-color: GrayText; } - &:checked + .spectrum-Switch-switch ::before { + &:checked + .spectrum-Switch-switch::before { border-color: GrayText; background-color: ButtonFace; }