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

…3346) * 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
adobe · Oct 30, 2024 · 469f731 · 469f731
1 parent fa59456
commit 469f731
Show file tree

Hide file tree

Showing 12 changed files with 50 additions and 91 deletions.
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);
 }