Skip to content

fix: minor linting updates #4113

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 1 commit into from
Aug 6, 2025
Merged

fix: minor linting updates #4113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
33 changes: 33 additions & 0 deletions .changeset/ready-apes-pull.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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._
1 change: 0 additions & 1 deletion components/alertbanner/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
8 changes: 3 additions & 5 deletions components/alertbanner/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,25 +12,23 @@
*/

.spectrum-AlertBanner {
--spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unused custom property.


--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);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unnecessary lint ignore rule; passthroughs are accounted for by the no-unused-custom-properties plugin.


/* 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. */
Expand Down
8 changes: 2 additions & 6 deletions components/assetcard/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,11 @@

/* outer container, unstyled */
.spectrum-AssetCard {
--spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Duplicate (and identical) definitions removed.

--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);
Expand All @@ -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);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using rgb shorthand instead of rgba

--spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300);

/* title */
Expand Down
2 changes: 1 addition & 1 deletion components/breadcrumb/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions components/calendar/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down Expand Up @@ -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)));
Expand Down
2 changes: 0 additions & 2 deletions components/card/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
4 changes: 1 addition & 3 deletions components/card/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unused custom property


/* 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));
Expand Down Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion components/coachmark/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion components/coachmark/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The variable name before is defined inside .spectrum-Popover and so not available to this component. I moved instead to using the global token value that the .spectrum-Popover variable is mapped to.


white-space: nowrap;
z-index: 1;
Expand Down
4 changes: 2 additions & 2 deletions components/colorhandle/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down
2 changes: 1 addition & 1 deletion components/colorslider/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion components/colorwheel/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
5 changes: 1 addition & 4 deletions components/combobox/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
]
}
8 changes: 4 additions & 4 deletions components/combobox/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)));
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These high contrast variables were removed at some point so are showing up now as undefined.

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));
Expand Down Expand Up @@ -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 {
Expand All @@ -392,7 +392,7 @@

.spectrum-HelpText-text {
inline-size: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
text-wrap: wrap;
}
}
Expand Down
2 changes: 0 additions & 2 deletions components/datepicker/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@
*/

.spectrum-DatePicker {
--spectrum-datepicker-initial-height: var(--spectrum-component-height-100);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Duplicate (and identical) definition


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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Duplicate definition


--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);
Expand Down
4 changes: 2 additions & 2 deletions components/dropzone/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion components/inlinealert/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down
7 changes: 5 additions & 2 deletions components/page/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Comment on lines +15 to +16
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pulled these variables out of the inline-use to match our standard approach for other components.


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);
}
Loading
Loading