fix: minor linting updates (#4113)

castastrophe · web-flow · commit cf4fc1a01d23 · 2025-08-06T19:32:39.000-04:00
diff --git a/.changeset/ready-apes-pull.md b/.changeset/ready-apes-pull.md
@@ -0,0 +1,33 @@
+---
+"@spectrum-css/coachindicator": patch
+"@spectrum-css/alertbanner": patch
+"@spectrum-css/colorhandle": patch
+"@spectrum-css/colorslider": patch
+"@spectrum-css/inlinealert": patch
+"@spectrum-css/breadcrumb": patch
+"@spectrum-css/colorwheel": patch
+"@spectrum-css/datepicker": patch
+"@spectrum-css/assetcard": patch
+"@spectrum-css/thumbnail": patch
+"@spectrum-css/calendar": patch
+"@spectrum-css/combobox": patch
+"@spectrum-css/dropzone": patch
+"@spectrum-css/treeview": patch
+"@spectrum-css/underlay": patch
+"@spectrum-css/sidenav": patch
+"@spectrum-css/stepper": patch
+"@spectrum-css/card": patch
+"@spectrum-css/dial": patch
+"@spectrum-css/page": patch
+"@spectrum-css/well": patch
+---
+
+## Minor linting fixes
+
+- Removed unused custom properties across multiple components
+- Fixed color function notation by converting `rgba()` to `rgb()` where appropriate
+- Removed duplicate custom property declarations
+- Fixed deprecated CSS properties (e.g., `word-wrap` → `overflow-wrap`)
+- Removed unnecessary stylelint-disable comments
+
+_No visual or functional changes to components._
diff --git a/components/alertbanner/dist/metadata.json b/components/alertbanner/dist/metadata.json
@@ -61,7 +61,6 @@
     "--spectrum-alert-banner-max-inline-size",
     "--spectrum-alert-banner-min-height",
     "--spectrum-alert-banner-minimum-height",
-    "--spectrum-alert-banner-neutral-background",
     "--spectrum-alert-banner-text-margin-block-end",
     "--spectrum-alert-banner-text-margin-block-start",
     "--spectrum-alert-banner-text-to-button-horizontal",
diff --git a/components/alertbanner/index.css b/components/alertbanner/index.css
@@ -12,25 +12,23 @@
  */
 
 .spectrum-AlertBanner {
-	--spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default);
-
 	--spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height);
 	--spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width);
 	--spectrum-alert-banner-inline-size: auto;
 
 	--spectrum-alert-banner-font-size: var(--spectrum-font-size-100);
 	--spectrum-alert-banner-line-height: var(--spectrum-line-height-100);
 	--spectrum-alert-banner-font-family: var(--spectrum-sans-font-family-stack);
-	--spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */
+	--spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100);
 
 	/* spacing */
 	--spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300);
 	--spectrum-alert-banner-inline-start-to-content: var(--spectrum-spacing-300);
 	--spectrum-alert-banner-inline-end-to-content: var(--spectrum-spacing-300);
 	--spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300);
 	--spectrum-alert-banner-block-edge-to-button: var(--spectrum-spacing-200);
-	--spectrum-alert-banner-close-button-to-content: var(--spectrum-spacing-300); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */
-	--spectrum-alert-banner-close-button-to-inline-end: var(--spectrum-alert-banner-close-button-spacing); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */
+	--spectrum-alert-banner-close-button-to-content: var(--spectrum-spacing-300);
+	--spectrum-alert-banner-close-button-to-inline-end: var(--spectrum-alert-banner-close-button-spacing);
 
 	/* Top and bottom margins for AlertBanner-text. Subtracts the vertical spacing that is already included in the
 	padding-block of its parent AlertBanner-body element. */
diff --git a/components/assetcard/index.css b/components/assetcard/index.css
@@ -13,15 +13,11 @@
 
 /* outer container, unstyled */
 .spectrum-AssetCard {
-	--spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%);
 	--spectrum-assetcard-background-color: var(--spectrum-gray-75);
-	--spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-75-rgb), 0.9);
-	--spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300);
 
 	/* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */
 	--spectrum-assetcard-asset-size: 224px;
-	--spectrum-assetcard-background-color: var(--spectrum-gray-75);
-	--spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%);
+	--spectrum-assetcard-overlay-background-color: rgb(27 127 245 / 10%);
 	--spectrum-assetcard-asset-animation-duration: var(--spectrum-animation-duration-100);
 	--spectrum-assetcard-asset-container-border-size: 1px;
 	--spectrum-assetcard-header-margin-block-start: var(--spectrum-spacing-300);
@@ -42,7 +38,7 @@
 	--spectrum-assetcard-selectionindicator-color: var(--spectrum-white);
 	--spectrum-assetcard-selectionindicator-font-weight: var(--spectrum-bold-font-weight);
 	--spectrum-assetcard-selectionindicator-font-size: var(--spectrum-font-size-400);
-	--spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-75-rgb), 0.9);
+	--spectrum-assetcard-selectionindicator-background-color-default: rgb(var(--spectrum-gray-75-rgb), 0.9);
 	--spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300);
 
 	/* title */
diff --git a/components/breadcrumb/index.css b/components/breadcrumb/index.css
@@ -61,7 +61,7 @@
 	--spectrum-breadcrumbs-action-button-color: var(--spectrum-neutral-subdued-content-color-default);
 	--spectrum-breadcrumbs-action-button-color-disabled: var(--spectrum-disabled-content-color);
 	--spectrum-breadcrumbs-focus-indicator-color: var(--spectrum-focus-indicator-color);
-	--spectrum-breadcrumbs-item-dragged-background: rgba(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity));
+	--spectrum-breadcrumbs-item-dragged-background: rgb(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity));
 
 	/* Sub-component: heading */
 	--mod-heading-margin-end: 0px;
diff --git a/components/calendar/index.css b/components/calendar/index.css
@@ -12,7 +12,7 @@
  */
 
 .spectrum-Calendar {
-	--spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4);
+	--spectrum-calendar-day-background-color-selected-disabled: rgb(var(--spectrum-gray-100-rgb), 0.4);
 
 	--spectrum-calendar-day-width: var(--mod-calendar-day-width, var(--spectrum-component-height-100));
 	--spectrum-calendar-day-height: var(--mod-calendar-day-height, var(--spectrum-component-height-100));
@@ -48,7 +48,7 @@
 	--spectrum-calendar-day-background: var(--mod-calendar-day-background-color, transparent);
 	--spectrum-calendar-day-background-selected: var(--highcontrast-calendar-day-background-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected)));
 	--spectrum-calendar-day-background-selected-hover: var(--highcontrast-calendar-day-background-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover)));
-	--spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4);
+	--spectrum-calendar-day-background-color-selected-disabled: rgb(var(--spectrum-gray-100-rgb), 0.4);
 	--spectrum-calendar-day-background-cap-selected: var(--highcontrast-calendar-day-background-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected)));
 	--spectrum-calendar-day-background-hover: var(--highcontrast-calendar-day-background-hover, var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover)));
 	--spectrum-calendar-day-background-focus: var(--highcontrast-calendar-day-background-focus, var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus)));
diff --git a/components/card/dist/metadata.json b/components/card/dist/metadata.json
@@ -99,7 +99,6 @@
     "--mod-card-minimum-width",
     "--mod-card-preview-background-color",
     "--mod-card-preview-background-color-hover",
-    "--mod-card-preview-border-width-selected",
     "--mod-card-preview-minimum-height",
     "--mod-card-selected-background-color-rgb",
     "--mod-card-selected-background-opacity",
@@ -146,7 +145,6 @@
     "--spectrum-card-minimum-width",
     "--spectrum-card-preview-background-color",
     "--spectrum-card-preview-background-color-hover",
-    "--spectrum-card-preview-border-width-selected",
     "--spectrum-card-preview-minimum-height",
     "--spectrum-card-selected-background-color-rgb",
     "--spectrum-card-selected-background-opacity",
diff --git a/components/card/index.css b/components/card/index.css
@@ -65,8 +65,6 @@
 	/* Selected */
 	--spectrum-card-selected-background-opacity: var(--mod-card-selected-background-opacity, 0.1); /* table-selected-row-background-opacity does not exist in tokens yet */
 
-	--spectrum-card-preview-border-width-selected: var(--mod-card-preview-border-width-selected, var(--spectrum-border-width-100));
-
 	/* Horizontal */
 	--spectrum-card-horizontal-body-padding: var(--mod-card-horizontal-body-padding, var(--spectrum-spacing-300));
 	--spectrum-card-horizontal-preview-padding: var(--mod-card-horizontal-preview-padding, var(--spectrum-spacing-200));
@@ -378,7 +376,7 @@
 	}
 
 	&.is-selected .spectrum-Card-preview::before {
-		background-color: rgba(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--mod-card-selected-background-opacity, var(--spectrum-card-selected-background-opacity)));
+		background-color: rgb(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--mod-card-selected-background-opacity, var(--spectrum-card-selected-background-opacity)));
 	}
 
 	.spectrum-Card-body {
diff --git a/components/coachmark/dist/metadata.json b/components/coachmark/dist/metadata.json
@@ -103,7 +103,7 @@
     "--spectrum-heading-color",
     "--spectrum-line-height-200",
     "--spectrum-medium-font-weight",
-    "--spectrum-popover-content-area-spacing",
+    "--spectrum-popover-edge-to-content-area",
     "--spectrum-sans-serif-font",
     "--spectrum-spacing-100",
     "--spectrum-spacing-200",
diff --git a/components/coachmark/index.css b/components/coachmark/index.css
@@ -119,7 +119,7 @@
 
 /* Wrapper element around the nested action menu sub-component */
 .spectrum-CoachMark-action-menu {
-	--mod-popover-content-area-spacing: var(--spectrum-popover-content-area-spacing);
+	--mod-popover-content-area-spacing: var(--spectrum-popover-edge-to-content-area);
 
 	white-space: nowrap;
 	z-index: 1;
diff --git a/components/colorhandle/index.css b/components/colorhandle/index.css
@@ -25,12 +25,12 @@
 .spectrum-ColorHandle {
 	/* outer border as box shadow on the colorhandle */
 	/* TODO replace --spectrum-black-rgb with color-handle-outer-border-color when supported by RGBA */
-	--spectrum-colorhandle-outer-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity));
+	--spectrum-colorhandle-outer-border-color: rgb(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity));
 	--spectrum-colorhandle-outer-border-width: var(--spectrum-color-handle-outer-border-width);
 
 	/* inner border as inset boxshadow on the colorhandle-inner */
 	/* TODO replace --spectrum-black-rgb with color-handle-inner-border-color when supported by RGBA */
-	--spectrum-colorhandle-inner-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity));
+	--spectrum-colorhandle-inner-border-color: rgb(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity));
 
 	/* @passthrough -- opacity checkerboard customization */
 	--mod-opacity-checkerboard-position: 50%;
diff --git a/components/colorslider/index.css b/components/colorslider/index.css
@@ -16,7 +16,7 @@
 	--spectrum-color-slider-control-track-width: var(--spectrum-color-control-track-width);
 
 	/* @todo Refactor with --spectrum-color-slider-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */
-	--spectrum-color-slider-border-color-default: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-color-slider-border-opacity));
+	--spectrum-color-slider-border-color-default: rgb(var(--spectrum-gray-1000-rgb), var(--spectrum-color-slider-border-opacity));
 
 	/* @passthrough -- settings for nested color handle */
 	--mod-colorhandle-hitarea-border-radius: var(--mod-color-slider-handle-hitarea-border-radius, 0px);
diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css
@@ -20,7 +20,7 @@
 	--spectrum-colorwheel-border-color-rgb: var(--spectrum-gray-1000-rgb);
 
 	--spectrum-colorwheel-border-opacity: var(--spectrum-color-wheel-border-opacity);
-	--spectrum-colorwheel-border-color: rgba(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity));
+	--spectrum-colorwheel-border-color: rgb(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity));
 
 	--spectrum-colorwheel-border-width: var(--spectrum-border-width-100);
 	--spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width);
diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json
@@ -315,9 +315,6 @@
     "--highcontrast-combobox-background-color-default",
     "--highcontrast-combobox-border-color-highlight",
     "--highcontrast-combobox-border-color-invalid",
-    "--highcontrast-combobox-readonly-border-color",
-    "--highcontrast-textfield-border-color-invalid-default",
-    "--highcontrast-textfield-text-color-default",
-    "--highcontrast-textfield-text-color-disabled"
+    "--highcontrast-combobox-readonly-border-color"
   ]
 }
diff --git a/components/combobox/index.css b/components/combobox/index.css
@@ -208,13 +208,13 @@
 		}
 
 		&.is-invalid .spectrum-Combobox-input:read-only {
-			border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default)));
+			border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default)));
 		}
 
 		&.is-disabled .spectrum-Combobox-input:read-only {
 			background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-combobox-readonly-background-color-disabled));
 			border-color: var(--mod-combobox-readonly-border-color-disabled, var(--spectrum-combobox-readonly-border-color-disabled, transparent));
-			color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled)));
+			color: var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled));
 
 			&:hover {
 				background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-combobox-readonly-background-color-disabled));
@@ -378,7 +378,7 @@
 		border-color: var(--spectrum-combobox-border-color-default);
 		box-shadow: 0 0 0 30px var(--highcontrast-combobox-background-color-default, var(--spectrum-combobox-background-color-default)) inset !important;
 		transition: background-color 200ms ease-in-out 0s;
-		-webkit-text-fill-color: var(--highcontrast-textfield-text-color-default, var(--spectrum-neutral-content-color-default)) !important;
+		-webkit-text-fill-color: var(--spectrum-neutral-content-color-default) !important;
 		line-height: var(--spectrum-combobox-line-height);
 
 		&::selection {
@@ -392,7 +392,7 @@
 
 	.spectrum-HelpText-text {
 		inline-size: 100%;
-		word-wrap: break-word;
+		overflow-wrap: break-word;
 		text-wrap: wrap;
 	}
 }
diff --git a/components/datepicker/index.css b/components/datepicker/index.css
@@ -12,8 +12,6 @@
  */
 
 .spectrum-DatePicker {
-	--spectrum-datepicker-initial-height: var(--spectrum-component-height-100);
-
 	--spectrum-datepicker-border-radius: var(--mod-datepicker-border-radius, var(--spectrum-corner-radius-100));
 	--spectrum-datepicker-border-radius-quiet: var(--mod-datepicker-border-radius-quiet, 0);
 	--spectrum-datepicker-border-width: var(--spectrum-border-width-100);
diff --git a/components/dial/index.css b/components/dial/index.css
@@ -25,8 +25,6 @@
 
 	--spectrum-dial-min-max-tick-color: var(--spectrum-gray-600);
 
-	--spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25);
-
 	--spectrum-dial-label-text-color: var(--spectrum-gray-700);
 	--spectrum-dial-label-text-color-disabled: var(--spectrum-gray-700);
 	--spectrum-dial-handle-border-color-disabled: var(--spectrum-gray-400);
diff --git a/components/dropzone/index.css b/components/dropzone/index.css
@@ -68,7 +68,7 @@
 
 	&.is-dragged {
 		--mod-drop-zone-border-style: var(--mod-drop-zone-border-style-dragged, solid);
-		--mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-dragged-background-color)));
+		--mod-drop-zone-background-color: rgb(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-dragged-background-color)));
 		--spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover)));
 
 		/* Updated values for a nested illustrated message when state changes */
@@ -83,7 +83,7 @@
 
 	&.is-filled {
 		/* note: the below applies to .is-filled.is-dragged but works here b/c dragged is the only state applying background color */
-		--mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled)));
+		--mod-drop-zone-background-color: rgb(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled)));
 
 		/* Updated values for a nested illustrated message when state changes */
 		--mod-illustrated-message-display: none;
diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
@@ -179,7 +179,7 @@
 	margin-inline-end: 0;
 	padding: 0;
 
-	word-wrap: break-word;
+	overflow-wrap: break-word;
 
 	font-weight: var(--mod-inlinealert-content-font-weight, var(--spectrum-inlinealert-content-font-weight));
 	font-family: var(--mod-inlinealert-content-font-family, var(--spectrum-inlinealert-content-font-family));
diff --git a/components/page/index.css b/components/page/index.css
@@ -12,8 +12,11 @@
  */
 
 :root {
-	background: var(--mod-page-background, var(--spectrum-page-background-color, var(--spectrum-gray-75)));
+	--spectrum-page-background-color: var(--mod-page-background, var(--spectrum-gray-75));
+	--spectrum-page-content-tap-highlight: var(--mod-page-content-tap-highlight, var(--spectrum-transparent-black-25));
+
+	background: var(--spectrum-page-background-color);
 
 	/* The highlight that appears over a link while it's being tapped */
-	-webkit-tap-highlight-color: var(--mod-page-content-tap-highlight, var(--spectrum-page-content-tap-highlight, var(--spectrum-transparent-black-25)));
+	-webkit-tap-highlight-color: var(--spectrum-page-content-tap-highlight);
 }
diff --git a/components/sidenav/index.css b/components/sidenav/index.css
diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json
diff --git a/components/stepper/index.css b/components/stepper/index.css
diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css
diff --git a/components/treeview/index.css b/components/treeview/index.css
diff --git a/components/underlay/index.css b/components/underlay/index.css
diff --git a/components/well/index.css b/components/well/index.css
diff --git a/stylelint.config.js b/stylelint.config.js

Original file line number	Diff line number	Diff line change
`@@ -65,8 +65,6 @@`
`65`	`65`	`/* Selected */`
`66`	`66`	`--spectrum-card-selected-background-opacity: var(--mod-card-selected-background-opacity, 0.1); /* table-selected-row-background-opacity does not exist in tokens yet */`
`67`	`67`
`68`		`- --spectrum-card-preview-border-width-selected: var(--mod-card-preview-border-width-selected, var(--spectrum-border-width-100));`
`69`		`-`
`70`	`68`	`/* Horizontal */`
`71`	`69`	`--spectrum-card-horizontal-body-padding: var(--mod-card-horizontal-body-padding, var(--spectrum-spacing-300));`
`72`	`70`	`--spectrum-card-horizontal-preview-padding: var(--mod-card-horizontal-preview-padding, var(--spectrum-spacing-200));`
`@@ -378,7 +376,7 @@`
`378`	`376`	`}`
`379`	`377`
`380`	`378`	`&.is-selected .spectrum-Card-preview::before {`
`381`		`- background-color: rgba(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--mod-card-selected-background-opacity, var(--spectrum-card-selected-background-opacity)));`
	`379`	`+ background-color: rgb(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--mod-card-selected-background-opacity, var(--spectrum-card-selected-background-opacity)));`
`382`	`380`	`}`
`383`	`381`
`384`	`382`	`.spectrum-Card-body {`