diff --git a/.changeset/clever-otters-mix.md b/.changeset/clever-otters-mix.md new file mode 100644 index 00000000000..c7eb9394ea4 --- /dev/null +++ b/.changeset/clever-otters-mix.md @@ -0,0 +1,25 @@ +--- +"@spectrum-css/infieldbutton": minor +"@spectrum-css/logicbutton": minor +"@spectrum-css/progressbar": minor +"@spectrum-css/colorwheel": minor +"@spectrum-css/assetcard": minor +"@spectrum-css/colorarea": minor +"@spectrum-css/calendar": minor +"@spectrum-css/checkbox": minor +"@spectrum-css/underlay": minor +"@spectrum-css/stepper": minor +"@spectrum-css/button": minor +"@spectrum-css/modal": minor +"@spectrum-css/radio": minor +"@spectrum-css/table": minor +"@spectrum-css/card": minor +"@spectrum-css/site": minor +"@spectrum-css/tokens": minor +--- + +This resolves our remaining stylelint issues around undefined tokens, rule order, unused values and color syntax. + +- Updates invalid color syntax from `rgba(N, N, N, N)` to `rgba(N N N / N)`. +- In cases of duplicate properties, preserves the property that would be applied given current code structure. +- Updates misnamed tokens to use valid tokens (`table/index.css`). diff --git a/components/assetcard/index.css b/components/assetcard/index.css index 3664978d933..6b7d0f9a4e6 100644 --- a/components/assetcard/index.css +++ b/components/assetcard/index.css @@ -272,7 +272,7 @@ border-radius: var(--mod-assetcard-selectionindicator-border-radius, var(--spectrum-assetcard-selectionindicator-border-radius)); - box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) rgb(0, 0, 0, 15%); + box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) rgb(0 0 0 / 15%); color: var(--highcontrast-assetcard-selectionindicator-color, var(--mod-assetcard-selectionindicator-color, var(--spectrum-assetcard-selectionindicator-color))); font-weight: var(--mod-assetcard-selectionindicator-font-weight, var(--spectrum-assetcard-selectionindicator-font-weight)); diff --git a/components/assetcard/themes/express.css b/components/assetcard/themes/express.css index f208227f90e..42a72f70700 100644 --- a/components/assetcard/themes/express.css +++ b/components/assetcard/themes/express.css @@ -15,6 +15,6 @@ @container (--system: express) { .spectrum-AssetCard { - --spectrum-assetcard-overlay-background-color: rgba(109, 115, 246, 20%); + --spectrum-assetcard-overlay-background-color: rgba(109 115 246 / 20%); } } diff --git a/components/assetcard/themes/spectrum.css b/components/assetcard/themes/spectrum.css index 6104113334b..d3b3caf11c2 100644 --- a/components/assetcard/themes/spectrum.css +++ b/components/assetcard/themes/spectrum.css @@ -13,6 +13,6 @@ @container (--system: spectrum) { .spectrum-AssetCard { - --spectrum-assetcard-overlay-background-color: rgba(27, 127, 245, 10%); + --spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%); } } diff --git a/components/calendar/index.css b/components/calendar/index.css index 271286337ad..ec2cabe508b 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -411,7 +411,6 @@ @media (forced-colors: active) { .spectrum-Calendar-prevMonth, .spectrum-Calendar-nextMonth { - --highcontrast-calendar-button-icon-color-disabled: GrayText; --highcontrast-calendar-button-icon-color: ButtonText; } @@ -427,7 +426,6 @@ --highcontrast-calendar-day-text-color-disabled: GrayText; --highcontrast-calendar-day-text-color-hover: ButtonText; --highcontrast-calendar-day-text-color-key-focus: ButtonText; - --highcontrast-calendar-day-text-color-selected-hover: HighlightText; --highcontrast-calendar-day-text-color-selected: HighlightText; --highcontrast-calendar-day-title-text-color: CanvasText; --highcontrast-calendar-day-today-background-color-selected-hover: Highlight; diff --git a/components/calendar/metadata/metadata.json b/components/calendar/metadata/metadata.json index be6710fa5c1..f4998b63803 100644 --- a/components/calendar/metadata/metadata.json +++ b/components/calendar/metadata/metadata.json @@ -170,7 +170,6 @@ "passthroughs": [], "high-contrast": [ "--highcontrast-calendar-button-icon-color", - "--highcontrast-calendar-button-icon-color-disabled", "--highcontrast-calendar-day-background-color-cap-selected", "--highcontrast-calendar-day-background-color-down", "--highcontrast-calendar-day-background-color-hover", @@ -183,7 +182,6 @@ "--highcontrast-calendar-day-text-color-hover", "--highcontrast-calendar-day-text-color-key-focus", "--highcontrast-calendar-day-text-color-selected", - "--highcontrast-calendar-day-text-color-selected-hover", "--highcontrast-calendar-day-title-text-color", "--highcontrast-calendar-day-today-background-color-selected-hover", "--highcontrast-calendar-day-today-border-color", diff --git a/components/card/index.css b/components/card/index.css index 4639f6721b3..79c3b24907b 100644 --- a/components/card/index.css +++ b/components/card/index.css @@ -156,7 +156,7 @@ } &.is-drop-target { - --mod-card-background-color: var(--spectrum-card-background-color-quiet, var(--spectrum-background-base-color)); + --mod-card-background-color: var(--spectrum-background-base-color); border-color: var(--highcontrast-card-border-color-selected, var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected))); box-shadow: 0 0 0 1px var(--highcontrast-card-border-color-selected, var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected))); diff --git a/components/card/metadata/metadata.json b/components/card/metadata/metadata.json index 51b2fb5cabe..64cece37b44 100644 --- a/components/card/metadata/metadata.json +++ b/components/card/metadata/metadata.json @@ -148,7 +148,6 @@ "--spectrum-card-actions-size", "--spectrum-card-actions-spacing", "--spectrum-card-background-color", - "--spectrum-card-background-color-quiet", "--spectrum-card-body-font-color", "--spectrum-card-body-font-family", "--spectrum-card-body-font-size", diff --git a/components/checkbox/index.css b/components/checkbox/index.css index 742bfcc43d2..1d3b68f4037 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -462,6 +462,8 @@ } .spectrum-Checkbox-box { + --spectrum-checkbox-spacing: calc(var(--mod-checkbox-height, var(--spectrum-checkbox-height)) - var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size))); + display: flex; align-items: center; justify-content: center; @@ -472,7 +474,6 @@ block-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); /* Fix vertical alignment when not wrapping since we're flex-start */ - --spectrum-checkbox-spacing: calc(var(--mod-checkbox-height, var(--spectrum-checkbox-height)) - var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size))); margin: calc(var(--mod-checkbox-spacing, var(--spectrum-checkbox-spacing)) / 2) 0; flex-grow: 0; diff --git a/components/colorarea/index.css b/components/colorarea/index.css index cf24c6c22d7..39137f6d83c 100644 --- a/components/colorarea/index.css +++ b/components/colorarea/index.css @@ -12,7 +12,7 @@ */ .spectrum-ColorArea { --spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding); - --spectrum-colorarea-border-color: rgba(0, 0, 0, 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */ + --spectrum-colorarea-border-color: rgba(0 0 0 / 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */ --spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color); --spectrum-colorarea-border-width: var(--spectrum-color-area-border-width); --spectrum-colorarea-height: var(--spectrum-color-area-height); diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css index b38457862c2..abd2fe96f3b 100644 --- a/components/colorwheel/index.css +++ b/components/colorwheel/index.css @@ -124,7 +124,7 @@ .spectrum-ColorWheel-wheel { position: absolute; - background: conic-gradient(from 90deg, red, rgb(255, 128, 0), rgb(255, 255, 0), rgb(128, 255, 0), rgb(0, 255, 0), rgb(0, 255, 128), rgb(0, 255, 255), rgb(0, 128, 255), rgb(0, 0, 255), rgb(128, 0, 255), rgb(255, 0, 255), rgb(255, 0, 128), red); + background: conic-gradient(from 90deg, red, rgb(255 128 0), rgb(255 255 0), rgb(128 255 0), rgb(0 255 0), rgb(0 255 128), rgb(0 255 255), rgb(0 128 255), rgb(0 0 255), rgb(128 0 255), rgb(255 0 255), rgb(255 0 128), red); inset-block: var(--spectrum-colorwheel-border-width); inset-inline: var(--spectrum-colorwheel-border-width); clip-path: path(evenodd, var(--mod-colorwheel-path, var(--spectrum-colorwheel-path))); diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css index 2cf8eb7c715..37cf5f8b8f6 100644 --- a/components/infieldbutton/index.css +++ b/components/infieldbutton/index.css @@ -202,7 +202,7 @@ align-items: center; justify-content: var(--mod-infield-button-fill-justify-content, var(--spectrum-infield-button-fill-justify-content)); - transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out; + transition: border-color var(--spectrum-animation-duration-100) ease-in-out; } /* Stacked in-field buttons */ diff --git a/components/infieldbutton/metadata/metadata.json b/components/infieldbutton/metadata/metadata.json index 1b524213f41..c2b3804b3f6 100644 --- a/components/infieldbutton/metadata/metadata.json +++ b/components/infieldbutton/metadata/metadata.json @@ -129,6 +129,7 @@ "--spectrum-infield-button-width" ], "global": [ + "--spectrum-animation-duration-100", "--spectrum-border-width-100", "--spectrum-component-height-100", "--spectrum-component-height-200", @@ -138,7 +139,6 @@ "--spectrum-corner-radius-75", "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", - "--spectrum-global-animation-duration-100", "--spectrum-gray-200", "--spectrum-gray-300", "--spectrum-gray-400", diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css index bbcdde6513c..84f949c9e84 100644 --- a/components/logicbutton/index.css +++ b/components/logicbutton/index.css @@ -107,6 +107,17 @@ } .spectrum-LogicButton { + --highcontrast-logic-button-and-background-color: ButtonFace; + --highcontrast-logic-button-and-background-color-hover: ButtonFace; + --highcontrast-logic-button-and-border-color: ButtonText; + --highcontrast-logic-button-and-border-color-hover: Highlight; + --highcontrast-logic-button-and-text-color: ButtonText; + --highcontrast-logic-button-or-background-color: ButtonFace; + --highcontrast-logic-button-or-background-color-hover: ButtonFace; + --highcontrast-logic-button-or-border-color: ButtonText; + --highcontrast-logic-button-or-border-color-hover: Highlight; + --highcontrast-logic-button-or-text-color: ButtonText; + forced-color-adjust: none; &:disabled, @@ -118,16 +129,5 @@ --highcontrast-logic-button-or-border-color: GrayText; --highcontrast-logic-button-or-text-color: GrayText; } - - --highcontrast-logic-button-and-background-color: ButtonFace; - --highcontrast-logic-button-and-background-color-hover: ButtonFace; - --highcontrast-logic-button-and-border-color: ButtonText; - --highcontrast-logic-button-and-border-color-hover: Highlight; - --highcontrast-logic-button-and-text-color: ButtonText; - --highcontrast-logic-button-or-background-color: ButtonFace; - --highcontrast-logic-button-or-background-color-hover: ButtonFace; - --highcontrast-logic-button-or-border-color: ButtonText; - --highcontrast-logic-button-or-border-color-hover: Highlight; - --highcontrast-logic-button-or-text-color: ButtonText; } } diff --git a/components/modal/index.css b/components/modal/index.css index 62af51de41e..e1e636a7a8b 100644 --- a/components/modal/index.css +++ b/components/modal/index.css @@ -74,7 +74,7 @@ @extend %spectrum-overlay; /* Start offset by the animation distance */ - transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-modal-confirm-entry-animation-distance))); + transform: translateY(var(--mod-modal-confirm-entry-animation-distance)); /* Appear above underlay */ z-index: 2; diff --git a/components/modal/metadata/metadata.json b/components/modal/metadata/metadata.json index 0fcba109eea..8c056a66149 100644 --- a/components/modal/metadata/metadata.json +++ b/components/modal/metadata/metadata.json @@ -30,7 +30,6 @@ "--spectrum-modal-background-color", "--spectrum-modal-confirm-border-radius", "--spectrum-modal-confirm-entry-animation-delay", - "--spectrum-modal-confirm-entry-animation-distance", "--spectrum-modal-confirm-entry-animation-duration", "--spectrum-modal-confirm-exit-animation-delay", "--spectrum-modal-confirm-exit-animation-duration", diff --git a/components/progressbar/index.css b/components/progressbar/index.css index ef4ab3edad6..7b9fca3531d 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -269,9 +269,10 @@ @media (forced-colors: active) { .spectrum-ProgressBar-track { - forced-color-adjust: none; --highcontrast-progressbar-fill-color: ButtonText; --highcontrast-progressbar-track-color: ButtonFace; + border: 1px solid ButtonText; + forced-color-adjust: none; } } diff --git a/components/radio/index.css b/components/radio/index.css index 62f72e68366..436c8d9d5d6 100644 --- a/components/radio/index.css +++ b/components/radio/index.css @@ -49,7 +49,7 @@ --spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); --spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); --spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down); - --spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus); + --spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-key-focus); /* spacing all themes */ --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100); diff --git a/components/radio/metadata/metadata.json b/components/radio/metadata/metadata.json index 31fd8171138..1419edeed78 100644 --- a/components/radio/metadata/metadata.json +++ b/components/radio/metadata/metadata.json @@ -159,8 +159,8 @@ "--spectrum-line-height-100", "--spectrum-neutral-background-color-selected-default", "--spectrum-neutral-background-color-selected-down", - "--spectrum-neutral-background-color-selected-focus", "--spectrum-neutral-background-color-selected-hover", + "--spectrum-neutral-background-color-selected-key-focus", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover", diff --git a/components/site/component.css b/components/site/component.css index 3da1edf9cbf..ca2cc1cf887 100644 --- a/components/site/component.css +++ b/components/site/component.css @@ -118,7 +118,7 @@ .spectrum-CSSComponent-resource--adobe, .spectrum-CSSComponent-resources a[href*="spectrum.adobe.com"] .spectrum-Card-preview { - color: rgb(250, 15, 0); + color: rgb(250 15 0); background-color: var(--spectrum-gray-100); } @@ -130,7 +130,7 @@ .spectrum-CSSComponent-resource--npm, .spectrum-CSSComponent-resources a[href*="npmjs.com"] .spectrum-Card-preview { - background-color: rgba(203, 56, 55, 10%); + background-color: rgba(203 56 55 / 10%); } .spectrum-CSSComponent-cardImage { diff --git a/components/site/index.css b/components/site/index.css index de10099eb5e..1e917b3e917 100644 --- a/components/site/index.css +++ b/components/site/index.css @@ -33,7 +33,7 @@ background-color: var(--spectrum-gray-75); background-clip: padding-box; - border-block: 2px solid rgba(0, 0, 0, 0%); + border-block: 2px solid rgba(0 0 0 / 0%); border-radius: 8px; } diff --git a/components/stepper/index.css b/components/stepper/index.css index 23e913843d7..e5c6479719b 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -293,10 +293,6 @@ --highcontrast-stepper-border-color-focus: Highlight; --highcontrast-stepper-border-color-focus-hover: Highlight; --highcontrast-stepper-border-color-keyboard-focus: CanvasText; - --highcontrast-stepper-button-background-color-default: Canvas; - --highcontrast-stepper-button-background-color-hover: Canvas; - --highcontrast-stepper-button-background-color-focus: Canvas; - --highcontrast-stepper-button-background-color-keyboard-focus: Canvas; --highcontrast-stepper-focus-indicator-color: Highlight; &.is-invalid { @@ -305,12 +301,10 @@ --highcontrast-stepper-border-color-focus: Highlight; --highcontrast-stepper-border-color-focus-hover: Highlight; --highcontrast-stepper-border-color-keyboard-focus: Highlight; - --highcontrast-infield-button-border-color: Highlight; } &.is-disabled { --highcontrast-stepper-border-color: GrayText; - --highcontrast-infield-button-border-color: GrayText; --highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); } } diff --git a/components/stepper/metadata/metadata.json b/components/stepper/metadata/metadata.json index 7d2ac4ad7cf..bafd8e8dd94 100644 --- a/components/stepper/metadata/metadata.json +++ b/components/stepper/metadata/metadata.json @@ -132,7 +132,6 @@ "--spectrum-component-height-300", "--spectrum-component-height-75", "--spectrum-corner-radius-100", - "--spectrum-disabled-background-color", "--spectrum-disabled-border-color", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", @@ -178,9 +177,7 @@ "--system-spectrum-stepper-buttons-border-color-hover", "--system-spectrum-stepper-buttons-border-color-keyboard-focus", "--system-spectrum-stepper-buttons-border-style", - "--system-spectrum-stepper-buttons-border-width", - "--system-spectrum-stepper-disabled-buttons-background-color", - "--system-spectrum-stepper-disabled-buttons-border-width" + "--system-spectrum-stepper-buttons-border-width" ], "passthroughs": [ "--mod-infield-button-border-block-end-width", @@ -197,16 +194,11 @@ "--mod-textfield-icon-spacing-inline-start-invalid" ], "high-contrast": [ - "--highcontrast-infield-button-border-color", "--highcontrast-stepper-border-color", "--highcontrast-stepper-border-color-focus", "--highcontrast-stepper-border-color-focus-hover", "--highcontrast-stepper-border-color-hover", "--highcontrast-stepper-border-color-keyboard-focus", - "--highcontrast-stepper-button-background-color-default", - "--highcontrast-stepper-button-background-color-focus", - "--highcontrast-stepper-button-background-color-hover", - "--highcontrast-stepper-button-background-color-keyboard-focus", "--highcontrast-stepper-buttons-background-color", "--highcontrast-stepper-buttons-border-width", "--highcontrast-stepper-focus-indicator-color" diff --git a/components/stepper/themes/express.css b/components/stepper/themes/express.css index 6cc552c49f9..7edb9ef6874 100644 --- a/components/stepper/themes/express.css +++ b/components/stepper/themes/express.css @@ -41,10 +41,5 @@ --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-400); --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-300); - - &.is-disabled { - --spectrum-stepper-buttons-background-color: var(--spectrum-disabled-background-color); - --spectrum-stepper-buttons-border-width: 0; - } } } diff --git a/components/table/index.css b/components/table/index.css index 2d10ed969b1..978ef5b16ec 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -66,8 +66,8 @@ --spectrum-table-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); --spectrum-table-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); --spectrum-table-icon-color-active: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-focus); - --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-focus-hover); + --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-hover); --spectrum-table-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); /* Row Selection */ @@ -351,12 +351,10 @@ --highcontrast-table-selected-row-background-color: Highlight; --highcontrast-table-selected-row-text-color: HighlightText; - --highcontrast-table-selected-row-text-color-default: HighlightText; @supports (color: SelectedItem) { --highcontrast-table-selected-row-background-color: SelectedItem; --highcontrast-table-selected-row-text-color: SelectedItemText; - --highcontrast-table-selected-row-text-color-default: SelectedItemText; } --highcontrast-table-selected-row-background-color-focus: Highlight; diff --git a/components/table/metadata/metadata.json b/components/table/metadata/metadata.json index 4b33650d334..11b5b870409 100644 --- a/components/table/metadata/metadata.json +++ b/components/table/metadata/metadata.json @@ -415,10 +415,8 @@ "--spectrum-neutral-content-color-default", "--spectrum-neutral-subdued-content-color-default", "--spectrum-neutral-subdued-content-color-down", - "--spectrum-neutral-subdued-content-color-focus", "--spectrum-neutral-subdued-content-color-hover", "--spectrum-neutral-subdued-content-color-key-focus", - "--spectrum-neutral-subdued-content-focus-hover", "--spectrum-regular-font-weight", "--spectrum-sans-font-family-stack", "--spectrum-spacing-300", @@ -452,7 +450,6 @@ "--highcontrast-table-selected-row-background-color", "--highcontrast-table-selected-row-background-color-focus", "--highcontrast-table-selected-row-text-color", - "--highcontrast-table-selected-row-text-color-default", "--highcontrast-table-selected-row-text-color-focus", "--highcontrast-table-transition-duration" ] diff --git a/components/underlay/index.css b/components/underlay/index.css index ef76d4072ed..ff93c86a8cc 100644 --- a/components/underlay/index.css +++ b/components/underlay/index.css @@ -17,7 +17,6 @@ --spectrum-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0); --spectrum-underlay-background-exit-animation-ease: var(--spectrum-animation-ease-in); --spectrum-underlay-background-entry-animation-ease: var(--spectrum-animation-ease-out); - --spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-100); --spectrum-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600); --spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-300); --spectrum-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200); diff --git a/tokens/dist/css/components/bridge/index.css b/tokens/dist/css/components/bridge/index.css index 06fd00e48e2..0fa78e36d90 100644 --- a/tokens/dist/css/components/bridge/index.css +++ b/tokens/dist/css/components/bridge/index.css @@ -692,11 +692,6 @@ --spectrum-stepper-button-background-color-keyboard-focus: var(--system-spectrum-stepper-button-background-color-keyboard-focus); } -.spectrum-Stepper.is-disabled { - --spectrum-stepper-buttons-background-color: var(--system-spectrum-stepper-disabled-buttons-background-color); - --spectrum-stepper-buttons-border-width: var(--system-spectrum-stepper-disabled-buttons-border-width); -} - .spectrum-Switch { --spectrum-switch-handle-border-color-default: var(--system-spectrum-switch-handle-border-color-default); --spectrum-switch-handle-border-color-hover: var(--system-spectrum-switch-handle-border-color-hover); diff --git a/tokens/dist/css/components/bridge/stepper.css b/tokens/dist/css/components/bridge/stepper.css index e3aaa302ed5..dda58e3adc7 100644 --- a/tokens/dist/css/components/bridge/stepper.css +++ b/tokens/dist/css/components/bridge/stepper.css @@ -34,7 +34,3 @@ --spectrum-stepper-button-background-color-focus: var(--system-spectrum-stepper-button-background-color-focus); --spectrum-stepper-button-background-color-keyboard-focus: var(--system-spectrum-stepper-button-background-color-keyboard-focus); } -.spectrum-Stepper.is-disabled { - --spectrum-stepper-buttons-background-color: var(--system-spectrum-stepper-disabled-buttons-background-color); - --spectrum-stepper-buttons-border-width: var(--system-spectrum-stepper-disabled-buttons-border-width); -} diff --git a/tokens/dist/css/components/express/index.css b/tokens/dist/css/components/express/index.css index a4cfa742c68..ef72328e7df 100644 --- a/tokens/dist/css/components/express/index.css +++ b/tokens/dist/css/components/express/index.css @@ -533,8 +533,6 @@ --system-spectrum-stepper-border-color-keyboard-focus-invalid: transparent; --system-spectrum-stepper-button-background-color-focus: var(--spectrum-gray-400); --system-spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-300); - --system-spectrum-stepper-disabled-buttons-background-color: var(--spectrum-disabled-background-color); - --system-spectrum-stepper-disabled-buttons-border-width: 0; --system-spectrum-switch-handle-border-color-default: var(--spectrum-gray-800); --system-spectrum-switch-handle-border-color-hover: var(--spectrum-gray-900); --system-spectrum-switch-handle-border-color-down: var(--spectrum-gray-900); diff --git a/tokens/dist/css/components/express/stepper.css b/tokens/dist/css/components/express/stepper.css index 6935f77b8f0..ca66bb608e8 100644 --- a/tokens/dist/css/components/express/stepper.css +++ b/tokens/dist/css/components/express/stepper.css @@ -33,6 +33,4 @@ --system-spectrum-stepper-border-color-keyboard-focus-invalid: transparent; --system-spectrum-stepper-button-background-color-focus: var(--spectrum-gray-400); --system-spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-300); - --system-spectrum-stepper-disabled-buttons-background-color: var(--spectrum-disabled-background-color); - --system-spectrum-stepper-disabled-buttons-border-width: 0; }