diff --git a/.changeset/ready-apes-pull.md b/.changeset/ready-apes-pull.md new file mode 100644 index 00000000000..73b00003a8a --- /dev/null +++ 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 index 2e9ddb2f699..deed56dd2c9 100644 --- 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 index 6659d42cbd1..d3000e6d243 100644 --- a/components/alertbanner/index.css +++ b/components/alertbanner/index.css @@ -12,8 +12,6 @@ */ .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; @@ -21,7 +19,7 @@ --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); @@ -29,8 +27,8 @@ --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 index 7b9ee81e647..56c40cc58c1 100644 --- 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 index d8d46e277dc..bc62aafbc57 100644 --- 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 index 68b3c73e049..352a388d74f 100644 --- 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 index 8fc5a6b28df..d1d22100c30 100644 --- 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 index 8eeedd3c1b8..472e79504f2 100644 --- 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 index a814cca94ed..9286c817c5f 100644 --- 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 index 5c09fe2e03b..3d78766e888 100644 --- 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 index 983ec65767e..4a44307da48 100644 --- 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 index a1be2551592..8c34d8aa396 100644 --- 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 index 1a730529ad9..d910165d5ac 100644 --- 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 index e1a94398633..ee4f97630eb 100644 --- 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 index be469b573fa..eab2bd4feb8 100644 --- 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 index 2c6cd24fc1f..2890b5f54d1 100644 --- 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 index 4e891ef1b17..1db955a115f 100644 --- 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 index c5824560074..b495fc596e1 100644 --- 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 index 662a89ebb4e..62cf0bf3b97 100644 --- 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 index b5ce5555917..1e6b3996eaa 100644 --- 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 index 06c5c19fb4a..c408228f7ca 100644 --- a/components/sidenav/index.css +++ b/components/sidenav/index.css @@ -11,49 +11,7 @@ * governing permissions and limitations under the License. */ -@media (forced-colors: active) { - /* forced-color-adjust: preserve-parent-color addresses svg bug on icon hover */ - .spectrum-SideNav { - .spectrum-Icon { - forced-color-adjust: preserve-parent-color; - } - } - - .spectrum-SideNav-item { - --highcontrast-sidenav-content-disabled-color: GrayText; - - --highcontrast-sidenav-focus-ring-color: Highlight; - - --highcontrast-sidenav-content-color-default-selected: SelectedItemText; - --highcontrast-sidenav-item-background-default-selected: SelectedItem; - - --highcontrast-sidenav-background-key-focus-selected: Highlight; - --highcontrast-sidenav-background-hover-selected: Highlight; - --highcontrast-sidenav-item-background-down-selected: Highlight; - - --highcontrast-sidenav-item-background-down: Highlight; - --highcontrast-sidenav-background-hover: Highlight; - --highcontrast-sidenav-content-color-hover: HighlightText; - --highcontrast-sidenav-background-key-focus: Highlight; - - --highcontrast-sidenav-top-level-font-color: ButtonText; - --highcontrast-sidenav-content-color-default: ButtonText; - --highcontrast-sidenav-content-color-down: HighlightText; - - forced-color-adjust: none; - } -} - .spectrum-SideNav { - --spectrum-sidenav-background-hover: var(--spectrum-gray-100); - --spectrum-sidenav-item-background-down: var(--spectrum-gray-200); - --spectrum-sidenav-background-key-focus: var(--spectrum-gray-100); - - --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-100); - --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-200); - --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-200); - --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-100); - /* focus indicator */ --spectrum-sidenav-focus-ring-size: var(--spectrum-focus-indicator-thickness); --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap); @@ -293,3 +251,36 @@ } } } + +@media (forced-colors: active) { + /* forced-color-adjust: preserve-parent-color addresses svg bug on icon hover */ + .spectrum-SideNav { + .spectrum-Icon { + forced-color-adjust: preserve-parent-color; + } + } + + .spectrum-SideNav-item { + --highcontrast-sidenav-content-disabled-color: GrayText; + + --highcontrast-sidenav-focus-ring-color: Highlight; + + --highcontrast-sidenav-content-color-default-selected: SelectedItemText; + --highcontrast-sidenav-item-background-default-selected: SelectedItem; + + --highcontrast-sidenav-background-key-focus-selected: Highlight; + --highcontrast-sidenav-background-hover-selected: Highlight; + --highcontrast-sidenav-item-background-down-selected: Highlight; + + --highcontrast-sidenav-item-background-down: Highlight; + --highcontrast-sidenav-background-hover: Highlight; + --highcontrast-sidenav-content-color-hover: HighlightText; + --highcontrast-sidenav-background-key-focus: Highlight; + + --highcontrast-sidenav-top-level-font-color: ButtonText; + --highcontrast-sidenav-content-color-default: ButtonText; + --highcontrast-sidenav-content-color-down: HighlightText; + + forced-color-adjust: none; + } +} diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index 8817bd86903..a8b7ec49b01 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -172,9 +172,6 @@ "--spectrum-in-field-stepper-to-end-large", "--spectrum-in-field-stepper-to-end-medium", "--spectrum-in-field-stepper-to-end-small", - "--spectrum-infield-button-edge-to-fill", - "--spectrum-infield-button-inline-edge-to-fill", - "--spectrum-infield-button-width", "--spectrum-line-height-100", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-focus", diff --git a/components/stepper/index.css b/components/stepper/index.css index 1d5604ff369..90dcf6864f9 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -72,6 +72,11 @@ --spectrum-numberfield-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); --spectrum-numberfield-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); + /* Button size and offset (to properly position the validation icons/padding) */ + --spectrum-numberfield-button-inline-padding: var(--spectrum-in-field-button-side-edge-to-fill-medium); + --spectrum-numberfield-button-container-size: calc((var(--spectrum-component-height-100) - var(--spectrum-in-field-button-edge-to-fill-medium)) * 2); + --spectrum-numberfield-button-inline-offset: var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-medium)); + /* the input to the stepper buttons spacing accommodates the built-in padding on the infield buttons */ --spectrum-numberfield-spacing-min-inline-end-text-to-stepper: calc(var(--spectrum-text-to-visual-100) - var(--spectrum-numberfield-button-inline-padding)); --spectrum-numberfield-spacing-min-inline-end-value-to-icon: var(--spectrum-text-to-visual-100); @@ -80,11 +85,6 @@ --spectrum-numberfield-spacing-validation-icon-to-stepper: calc(var(--spectrum-number-field-visual-to-in-field-stepper-medium) - var(--spectrum-numberfield-button-inline-padding)); --spectrum-numberfield-spacing-side-label-to-field: var(--spectrum-spacing-200); - /* Button size and offset (to properly position the validation icons/padding) */ - --spectrum-numberfield-button-inline-padding: var(--spectrum-infield-button-inline-edge-to-fill, var(--spectrum-in-field-button-side-edge-to-fill-medium)); - --spectrum-numberfield-button-container-size: calc(calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-100)) - var(--spectrum-infield-button-edge-to-fill, var(--spectrum-in-field-button-edge-to-fill-medium))) * 2); - --spectrum-numberfield-button-inline-offset: var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-medium)); - --spectrum-numberfield-spacing-block-start-edge-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-100); /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- documenting from token specs, but not used in textfield mod */ @@ -103,10 +103,10 @@ --spectrum-numberfield-spacing-min-inline-end-value-to-icon: var(--spectrum-text-to-visual-75); --spectrum-numberfield-spacing-validation-icon-to-stepper: calc(var(--spectrum-number-field-visual-to-in-field-stepper-small) - var(--spectrum-numberfield-button-inline-padding)); - --spectrum-numberfield-button-inline-padding: var(--spectrum-infield-button-inline-edge-to-fill, var(--spectrum-in-field-button-side-edge-to-fill-small)); + --spectrum-numberfield-button-inline-padding: var(--spectrum-in-field-button-side-edge-to-fill-small); /* this 👇 container size does not include the infield buttons' inline-padding */ - --spectrum-numberfield-button-container-size: calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-75)) * 2); + --spectrum-numberfield-button-container-size: calc(var(--spectrum-component-height-75) * 2); --spectrum-numberfield-button-inline-offset: var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-small)); --spectrum-numberfield-spacing-block-start-edge-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-75); @@ -129,8 +129,8 @@ --spectrum-numberfield-spacing-min-inline-end-value-to-icon: var(--spectrum-text-to-visual-200); --spectrum-numberfield-spacing-validation-icon-to-stepper: calc(var(--spectrum-number-field-visual-to-in-field-stepper-large) - var(--spectrum-numberfield-button-inline-padding)); - --spectrum-numberfield-button-inline-padding: var(--spectrum-infield-button-inline-edge-to-fill, var(--spectrum-in-field-button-side-edge-to-fill-large)); - --spectrum-numberfield-button-container-size: calc(calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-200)) - var(--spectrum-infield-button-edge-to-fill, var(--spectrum-in-field-button-edge-to-fill-large))) * 2); + --spectrum-numberfield-button-inline-padding: var(--spectrum-in-field-button-side-edge-to-fill-large); + --spectrum-numberfield-button-container-size: calc((var(--spectrum-component-height-200) - var(--spectrum-in-field-button-edge-to-fill-large)) * 2); --spectrum-numberfield-button-inline-offset: var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-large)); --spectrum-numberfield-spacing-block-start-edge-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-200); @@ -153,8 +153,8 @@ --spectrum-numberfield-spacing-min-inline-end-value-to-icon: var(--spectrum-text-to-visual-300); --spectrum-numberfield-spacing-validation-icon-to-stepper: calc(var(--spectrum-number-field-visual-to-in-field-stepper-extra-large) - var(--spectrum-numberfield-button-inline-padding)); - --spectrum-numberfield-button-inline-padding: var(--spectrum-infield-button-inline-edge-to-fill, var(--spectrum-in-field-button-side-edge-to-fill-extra-large)); - --spectrum-numberfield-button-container-size: calc(calc(var(--spectrum-infield-button-width, var(--spectrum-component-height-300)) - var(--spectrum-infield-button-edge-to-fill, var(--spectrum-in-field-button-edge-to-fill-extra-large))) * 2); + --spectrum-numberfield-button-inline-padding: var(--spectrum-in-field-button-side-edge-to-fill-extra-large); + --spectrum-numberfield-button-container-size: calc((var(--spectrum-component-height-300) - var(--spectrum-in-field-button-edge-to-fill-extra-large)) * 2); --spectrum-numberfield-button-inline-offset: var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-extra-large)); --spectrum-numberfield-spacing-block-start-edge-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-300); diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css index 3f2ab89f941..4e28f1892e2 100644 --- a/components/thumbnail/index.css +++ b/components/thumbnail/index.css @@ -18,7 +18,7 @@ --spectrum-thumbnail-border-width: var(--spectrum-border-width-100); /* @todo Refactor with --spectrum-thumbnail-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */ - --spectrum-thumbnail-border-color: rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-opacity)); + --spectrum-thumbnail-border-color: rgb(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-opacity)); --spectrum-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400); --spectrum-thumbnail-layer-border-color-inner: var(--spectrum-white); --spectrum-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100); diff --git a/components/treeview/index.css b/components/treeview/index.css index 20e3fd46ea6..4e203633841 100644 --- a/components/treeview/index.css +++ b/components/treeview/index.css @@ -11,51 +11,7 @@ * governing permissions and limitations under the License. */ -@media (forced-colors: active) { - .spectrum-TreeView { - --highcontrast-treeview-item-background-color-selected: Highlight; - --highcontrast-treeview-item-border-color-selected: Highlight; - --highcontrast-treeview-item-text-color-selected: HighlightText; - --highcontrast-treeview-item-icon-color-selected: HighlightText; - - --highcontrast-treeview-item-icon-color: LinkText; - --highcontrast-treeview-item-text-color: LinkText; - - --highcontrast-treeview-item-background-color-focus: Highlight; - --highcontrast-treeview-item-text-color-focus: HighlightText; - --highcontrast-treeview-item-border-color-focus: CanvasText; - --highcontrast-treeview-item-icon-color-focus: HighlightText; - - --highcontrast-treeview-item-background-color-disabled: Canvas; - --highcontrast-treeview-item-text-color-disabled: GrayText; - --highcontrast-treeview-item-icon-color-disabled: GrayText; - - --highcontrast-treeview-heading-color: CanvasText; - } - - @supports (color: SelectedItem) { - .spectrum-TreeView { - --highcontrast-treeview-item-background-color-selected: SelectedItem; - --highcontrast-treeview-item-border-color-selected: SelectedItem; - --highcontrast-treeview-item-text-color-selected: SelectedItemText; - --highcontrast-treeview-item-icon-color-selected: SelectedItemText; - } - } - - .spectrum-TreeView-itemLabel { - forced-color-adjust: none; - background: transparent; - } - - .spectrum-TreeView-itemLink::before { - forced-color-adjust: none; - } -} - .spectrum-TreeView { - --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100); - --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100); - --spectrum-treeview-item-border-size: var(--mod-treeview-item-border-size, var(--spectrum-border-width-200)); --spectrum-treeview-item-border-size-selected: var(--mod-treeview-item-border-size-selected, 1px); --spectrum-treeview-item-border-radius: var(--mod-treeview-item-border-radius, 0px); @@ -427,3 +383,44 @@ flex-shrink: 0; margin-inline-end: var(--spectrum-treeview-item-icon-gap); } + +@media (forced-colors: active) { + .spectrum-TreeView { + --highcontrast-treeview-item-background-color-selected: Highlight; + --highcontrast-treeview-item-border-color-selected: Highlight; + --highcontrast-treeview-item-text-color-selected: HighlightText; + --highcontrast-treeview-item-icon-color-selected: HighlightText; + + --highcontrast-treeview-item-icon-color: LinkText; + --highcontrast-treeview-item-text-color: LinkText; + + --highcontrast-treeview-item-background-color-focus: Highlight; + --highcontrast-treeview-item-text-color-focus: HighlightText; + --highcontrast-treeview-item-border-color-focus: CanvasText; + --highcontrast-treeview-item-icon-color-focus: HighlightText; + + --highcontrast-treeview-item-background-color-disabled: Canvas; + --highcontrast-treeview-item-text-color-disabled: GrayText; + --highcontrast-treeview-item-icon-color-disabled: GrayText; + + --highcontrast-treeview-heading-color: CanvasText; + } + + @supports (color: SelectedItem) { + .spectrum-TreeView { + --highcontrast-treeview-item-background-color-selected: SelectedItem; + --highcontrast-treeview-item-border-color-selected: SelectedItem; + --highcontrast-treeview-item-text-color-selected: SelectedItemText; + --highcontrast-treeview-item-icon-color-selected: SelectedItemText; + } + } + + .spectrum-TreeView-itemLabel { + forced-color-adjust: none; + background: transparent; + } + + .spectrum-TreeView-itemLink::before { + forced-color-adjust: none; + } +} diff --git a/components/underlay/index.css b/components/underlay/index.css index 42effdc418a..494f736e5a0 100644 --- a/components/underlay/index.css +++ b/components/underlay/index.css @@ -21,7 +21,7 @@ --spectrum-underlay-background-entry-animation-delay: var(--mod-underlay-background-entry-animation-delay, var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0))); /* TODO update to --spectrum-overlay-color token once an RGB stripped value is available */ - --spectrum-underlay-background-color: var(--mod-underlay-background-color, rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity))); + --spectrum-underlay-background-color: var(--mod-underlay-background-color, rgb(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity))); pointer-events: none; visibility: hidden; diff --git a/components/well/index.css b/components/well/index.css index 1aabb0c2b55..4c24597f735 100644 --- a/components/well/index.css +++ b/components/well/index.css @@ -12,11 +12,11 @@ */ .spectrum-Well { - --spectrum-well-border-color: rgba(var(--spectrum-gray-1000-rgb), 0.05); + --spectrum-well-border-color: rgb(var(--spectrum-gray-1000-rgb), 0.05); --spectrum-well-border-width: var(--spectrum-border-width-100); --spectrum-well-content-color: var(--spectrum-body-color); - --spectrum-well-background-color: rgba(var(--spectrum-gray-800-rgb), 0.02); + --spectrum-well-background-color: rgb(var(--spectrum-gray-800-rgb), 0.02); text-align: start; display: block; diff --git a/stylelint.config.js b/stylelint.config.js index bbfa2e8866b..6660f23328b 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -186,6 +186,7 @@ module.exports = { /^--mod-/, /^--system-/, /^--spectrum-picked-color$/, + /^--spectrum-downstate-(height|width)$/, ], skipDependencies: false, disableFix: true,