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

cdransf · web-flow · commit 469f731197e9 · 2024-10-30T09:48:38.000-07:00
* chore(stylelint): remove unnecessary disable comments

* chore(colorhandle): removes unnecessary disable

* 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

* chore(stylelint): fix max nesting violations
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/stylelint.config.js b/stylelint.config.js

Original file line number	Diff line number	Diff line change
`@@ -110,7 +110,6 @@`
`110`	`110`	`--spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-300);`
`111`	`111`	`}`
`112`	`112`
`113`		`-/* stylelint-disable max-nesting-depth */`
`114`	`113`	`/* Default Unchecked */`
`115`	`114`	`.spectrum-Checkbox {`
`116`	`115`	`color: var(--highcontrast-checkbox-content-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default)));`
`@@ -164,19 +163,15 @@`
`164`	`163`
`165`	`164`	`&.is-indeterminate .spectrum-Checkbox-input:focus-visible,`
`166`	`165`	`.spectrum-Checkbox-input:focus-visible {`
`167`		`- & + .spectrum-Checkbox-box {`
`168`		`- &::before {`
`169`		`- border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover)));`
`170`		`- }`
	`166`	`+ & + .spectrum-Checkbox-box::before {`
	`167`	`+ border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover)));`
`171`	`168`	`}`
`172`	`169`	`}`
`173`	`170`
`174`	`171`	`&:hover {`
`175`	`172`	`.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box,`
`176`		`- .spectrum-Checkbox-box {`
`177`		`- &::before {`
`178`		`- border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover)));`
`179`		`- }`
	`173`	`+ .spectrum-Checkbox-box::before {`
	`174`	`+ border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover)));`
`180`	`175`	`}`
`181`	`176`	`}`
`182`	`177`	`}`
`@@ -192,18 +187,14 @@`
`192`	`187`	`border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default)));`
`193`	`188`
`194`	`189`	`&:hover {`
`195`		`- .spectrum-Checkbox-box {`
`196`		`- &::before {`
`197`		`- border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default)));`
`198`		`- }`
	`190`	`+ .spectrum-Checkbox-box::before {`
	`191`	`+ border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default)));`
`199`	`192`	`}`
`200`	`193`	`}`
`201`	`194`
`202`	`195`	`&:active {`
`203`		`- .spectrum-Checkbox-box {`
`204`		`- &::before {`
`205`		`- border-color: var(--highcontrast-checkbox-selected-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default)));`
`206`		`- }`
	`196`	`+ .spectrum-Checkbox-box::before {`
	`197`	`+ border-color: var(--highcontrast-checkbox-selected-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default)));`
`207`	`198`	`}`
`208`	`199`	`}`
`209`	`200`	`}`
`@@ -251,11 +242,9 @@`
`251`	`242`	`}`
`252`	`243`
`253`	`244`	`&:hover {`
`254`		`- .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box,`
`255`		`- .spectrum-Checkbox-box {`
`256`		`- &::before {`
`257`		`- border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-selected-color-hover, var(--spectrum-checkbox-control-selected-color-hover)));`
`258`		`- }`
	`245`	`+ .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before,`
	`246`	`+ .spectrum-Checkbox-box::before {`
	`247`	`+ border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-selected-color-hover, var(--spectrum-checkbox-control-selected-color-hover)));`
`259`	`248`	`}`
`260`	`249`	`}`
`261`	`250`	`}`
`@@ -271,11 +260,9 @@`
`271`	`260`	`}`
`272`	`261`
`273`	`262`	`&:hover {`
`274`		`- .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box,`
`275`		`- .spectrum-Checkbox-box {`
`276`		`- &::before {`
`277`		`- border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover)));`
`278`		`- }`
	`263`	`+ .spectrum-Checkbox-box::before,`
	`264`	`+ .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before {`
	`265`	`+ border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover)));`
`279`	`266`	`}`
`280`	`267`
`281`	`268`	`.spectrum-Checkbox-label {`
`@@ -284,7 +271,6 @@`
`284`	`271`	`}`
`285`	`272`	`}`
`286`	`273`	`}`
`287`		`-/* stylelint-enable max-nesting-depth */`
`288`	`274`
`289`	`275`	`/* Emphasized */`
`290`	`276`	`.spectrum-Checkbox--emphasized {`
`@@ -427,8 +413,7 @@`
`427`	`413`	`inline-size: 100%;`
`428`	`414`	`block-size: 100%;`
`429`	`415`
`430`		`- /* @todo Look into replacing with opacity 0. The tiny opacity value appears to be a workaround for a ChromeVox legacy bug (circa 2018). */`
`431`		`- opacity: 0.0001;`
	`416`	`+ opacity: 0;`
`432`	`417`	`z-index: 1;`
`433`	`418`
`434`	`419`	`cursor: pointer;`
`@@ -577,7 +562,6 @@`
`577`	`562`	`outline-color: var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color)));`
`578`	`563`	`outline-style: auto;`
`579`	`564`	`outline-offset: var(--highcontrast-checkbox-focus-indicator-gap, var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)));`
`580`		`- /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */`
`581`	`565`	`outline-width: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));`
`582`	`566`
`583`	`567`	`&::after {`
Original file line number	Diff line number	Diff line change
`@@ -95,8 +95,6 @@`
`95`	`95`	`inline-size: 100%;`
`96`	`96`	`block-size: 100%;`
`97`	`97`	`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));`
`98`		`-`
`99`		`- /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- undefined variable allows custom stylesheet or JS to pass the value to this element */`
`100`	`98`	`background-color: var(--spectrum-picked-color);`
`101`	`99`	`}`
`102`	`100`
Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,6 @@`
`60`	`60`	`}`
`61`	`61`
`62`	`62`	`.spectrum-ColorLoupe-inner-border {`
`63`		`- /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- undefined variable allows custom stylesheet or JS to pass the value to this element */`
`64`	`63`	`fill: var(--spectrum-picked-color);`
`65`	`64`	`stroke: var(--mod-colorloupe-inner-border-color, var(--spectrum-colorloupe-inner-border-color));`
`66`	`65`	`stroke-width: var(--mod-colorloupe-inner-border-width, var(--spectrum-colorloupe-inner-border-width));`
Original file line number	Diff line number	Diff line change
`@@ -265,7 +265,6 @@`
`265`	`265`	`@media (forced-colors: active) {`
`266`	`266`	`.spectrum-SideNav {`
`267`	`267`	`.spectrum-Icon {`
`268`		`- /* stylelint-disable-next-line declaration-property-value-no-unknown -- forced-color-adjust: preserve-parent-color addresses svg bug on icon hover */`
`269`	`268`	`forced-color-adjust: preserve-parent-color;`
`270`	`269`	`}`
`271`	`270`	`}`
Original file line number	Diff line number	Diff line change
`@@ -103,13 +103,11 @@`
`103`	`103`	`}`
`104`	`104`
`105`	`105`	`.spectrum-Site-logo {`
`106`		`- /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- passthrough icon sizing */`
`107`	`106`	`--spectrum-icon-size: 32px;`
`108`	`107`	`--mod-icon-color: #fa0f00;`
`109`	`108`	`margin-inline-end: var(--spectrum-spacing-200);`
`110`	`109`
`111`	`110`	`.spectrum--large & {`
`112`		`- /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- passthrough icon sizing */`
`113`	`111`	`--spectrum-icon-size: 40px;`
`114`	`112`	`}`
`115`	`113`	`}`
`@@ -206,7 +204,6 @@`
`206`	`204`	`margin-inline-end: 20px;`
`207`	`205`
`208`	`206`	`& .spectrum-Icon {`
`209`		`- /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- passthrough icon sizing */`
`210`	`207`	`--spectrum-icon-size: 200px;`
`211`	`208`	`}`
`212`	`209`	`}`
Original file line number	Diff line number	Diff line change
`@@ -301,7 +301,6 @@`
`301`	`301`	`"--highcontrast-slider-track-color",`
`302`	`302`	`"--highcontrast-slider-track-color-disabled",`
`303`	`303`	`"--highcontrast-slider-track-color-static",`
`304`		`- "--highcontrast-slider-track-fill-color",`
`305`	`304`	`"--highcontrast-slider-track-fill-color-disabled"`
`306`	`305`	`]`
`307`	`306`	`}`
Original file line number	Diff line number	Diff line change
`@@ -145,7 +145,6 @@`
`145`	`145`
`146`	`146`	`&.is-mixedValue {`
`147`	`147`	`.spectrum-Swatch-fill {`
`148`		`- /* stylelint-disable-next-line -- Undefined variable allows custom stylesheet or JS to pass the value to this element */`
`149`	`148`	`background: var(--spectrum-picked-color, transparent);`
`150`	`149`	`}`
`151`	`150`
`@@ -158,7 +157,6 @@`
`158`	`157`	`/* Swatch fill: Not fill with Slash */`
`159`	`158`	`&.is-nothing {`
`160`	`159`	`.spectrum-Swatch-fill {`
`161`		`- /* stylelint-disable-next-line -- Undefined variable allows custom stylesheet or JS to pass the value to this element */`
`162`	`160`	`background-color: var(--spectrum-picked-color, transparent);`
`163`	`161`	`background-image: none;`
`164`	`162`
`@@ -172,12 +170,8 @@`
`172`	`170`	`}`
`173`	`171`	`}`
`174`	`172`
`175`		`- &.spectrum-Swatch--rectangle {`
`176`		`- .spectrum-Swatch-fill {`
`177`		`- &::after {`
`178`		`- transform: rotate(-25deg);`
`179`		`- }`
`180`		`- }`
	`173`	`+ &.spectrum-Swatch--rectangle .spectrum-Swatch-fill::after {`
	`174`	`+ transform: rotate(-25deg);`
`181`	`175`	`}`
`182`	`176`	`}`
`183`	`177`
`@@ -248,7 +242,6 @@`
`248`	`242`	`inset: 0;`
`249`	`243`	`z-index: 0;`
`250`	`244`
`251`		`- /* stylelint-disable-next-line -- Undefined variable allows custom stylesheet or JS to pass the value to this element */`
`252`	`245`	`background-color: var(--spectrum-picked-color, transparent);`
`253`	`246`
`254`	`247`	`/* Swatch border */`
`@@ -263,7 +256,6 @@`
`263`	`256`	`&::before {`
`264`	`257`	`box-shadow: none;`
`265`	`258`
`266`		`- /* stylelint-disable-next-line -- Undefined variable allows custom stylesheet or JS to pass the value to this element */`
`267`	`259`	`background-color: var(--spectrum-picked-color, transparent);`
`268`	`260`	`}`
`269`	`261`	`}`
`@@ -281,7 +273,6 @@`
`281`	`273`	`display: none;`
`282`	`274`	`pointer-events: none;`
`283`	`275`
`284`		`- /* stylelint-disable-next-line -- Undefined variable allows custom stylesheet or JS to pass the value to this element */`
`285`	`276`	`color: var(--spectrum-picked-color, transparent);`
`286`	`277`	`}`
`287`	`278`