Skip to content

chore(stylelint): audit and remove unnecessary stylelint properties #3346

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 30, 2024
Merged

chore(stylelint): audit and remove unnecessary stylelint properties #3346

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7eebaf7
chore(stylelint): remove unnecessary disable comments
cdransf Oct 29, 2024
8666a70
chore(colorhandle): removes unnecessary disable
cdransf Oct 29, 2024
86f8e59
chore(stylelint): adds supported forced color value to ignoreProperties
cdransf Oct 29, 2024
8765292
chore(stylelint): fix max nesting violations
cdransf Oct 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 15 additions & 31 deletions components/checkbox/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)));
Expand Down Expand Up @@ -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)));
}
}
}
Expand All @@ -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)));
}
}
}
Expand Down Expand Up @@ -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)));
}
}
}
Expand All @@ -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 {
Expand All @@ -284,7 +271,6 @@
}
}
}
/* stylelint-enable max-nesting-depth */

/* Emphasized */
.spectrum-Checkbox--emphasized {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion components/checkbox/metadata/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 0 additions & 2 deletions components/colorhandle/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
1 change: 0 additions & 1 deletion components/colorloupe/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down
4 changes: 2 additions & 2 deletions components/dial/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;

Expand Down
1 change: 0 additions & 1 deletion components/sidenav/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down
3 changes: 0 additions & 3 deletions components/site/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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;
}
}
Expand Down
5 changes: 1 addition & 4 deletions components/slider/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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;
Expand Down
1 change: 0 additions & 1 deletion components/slider/metadata/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
]
}
13 changes: 2 additions & 11 deletions components/swatch/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand All @@ -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;

Expand All @@ -172,12 +170,8 @@
}
}

&.spectrum-Swatch--rectangle {
.spectrum-Swatch-fill {
&::after {
transform: rotate(-25deg);
}
}
&.spectrum-Swatch--rectangle .spectrum-Swatch-fill::after {
transform: rotate(-25deg);
}
}

Expand Down Expand Up @@ -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 */
Expand All @@ -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);
}
}
Expand All @@ -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);
}

Expand Down
Loading
Loading