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 095530088c8..2e063508df9 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -413,7 +413,6 @@ @media (forced-colors: active) { .spectrum-Calendar-prevMonth, .spectrum-Calendar-nextMonth { - --highcontrast-calendar-button-icon-color-disabled: GrayText; --highcontrast-calendar-button-icon-color: ButtonText; } @@ -429,7 +428,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 a39a9e85340..06bbb3a48a7 100644 --- a/components/card/index.css +++ b/components/card/index.css @@ -158,7 +158,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 f2c87f2c4db..24f627cb065 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -442,6 +442,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; @@ -452,7 +454,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 3c83d4b484d..46dfff23137 100644 --- a/components/colorarea/index.css +++ b/components/colorarea/index.css @@ -15,7 +15,7 @@ .spectrum-ColorArea { --spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding); - --spectrum-colorarea-border-color: rgb(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/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 c2f85821aac..739e201a3ca 100644 --- a/components/logicbutton/index.css +++ b/components/logicbutton/index.css @@ -108,7 +108,6 @@ } .spectrum-LogicButton { - --highcontrast-logic-button-and-background-color: ButtonFace; --highcontrast-logic-button-and-background-color-hover: ButtonFace; --highcontrast-logic-button-and-border-color: ButtonText; @@ -119,6 +118,7 @@ --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, diff --git a/components/modal/index.css b/components/modal/index.css index fb6b22c0ef8..a24991179e5 100644 --- a/components/modal/index.css +++ b/components/modal/index.css @@ -75,7 +75,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 970c7adf162..02a2aaf1786 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -273,7 +273,7 @@ .spectrum-ProgressBar-track { --highcontrast-progressbar-fill-color: ButtonText; --highcontrast-progressbar-track-color: ButtonFace; - forced-color-adjust: none; border: 1px solid ButtonText; + forced-color-adjust: none; } } diff --git a/components/radio/index.css b/components/radio/index.css index 37e128bdb45..9a8372635c5 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 9fd6219975e..a37bbf5dbfe 100644 --- a/components/radio/metadata/metadata.json +++ b/components/radio/metadata/metadata.json @@ -158,8 +158,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 new file mode 100644 index 00000000000..ca2cc1cf887 --- /dev/null +++ b/components/site/component.css @@ -0,0 +1,375 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +/* CSS Component */ +.spectrum-CSSComponent { + box-sizing: border-box; + inline-size: min(1080px, 100%); + margin: var(--spectrum-spacing-600) auto; + padding: 0 56px; +} + +.spectrum-CSSComponent-heading { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + margin-block-end: var(--spectrum-spacing-600); +} + +.spectrum-CSSComponent-link { + display: flex; + align-items: center; + + color: inherit; + text-decoration: none; + + outline: none; + + &:focus-visible, + &:hover { + text-decoration: underline; + } +} + +.spectrum-CSSComponent-statusContainer { + display: flex; + flex-flow: row nowrap; + flex-grow: 1; + gap: 80px; + align-self: center; + + > * { + flex-basis: min(370px, 50%); + } +} + +.spectrum-CSSComponent-detailsTable { + --mod-table-cursor-row-default: default; + --mod-table-row-background-color-hover: transparent; + --mod-table-divider-color: transparent; + --mod-table-border-color: transparent; + --mod-table-row-line-height: 1.6; + + border-spacing: 0; + margin-block-start: var(--spectrum-spacing-600); + margin-block-end: 36px; + + & th { + block-size: var(--spectrum-spacing-300); + padding-inline-end: var(--spectrum-spacing-400); + font-weight: var(--spectrum-regular-font-weight); + text-align: start; + } +} + +.spectrum-CSSComponent-sectionHeading { + margin-block-start: var(--spectrum-spacing-700); + margin-block-end: var(--spectrum-spacing-500); +} + +.spectrum-CSSExample-status, +.spectrum-CSSComponent-status { + min-block-size: 0 !important; + padding: 0 !important; +} + +.spectrum-CSSComponent-status::before { + margin-inline-start: 0 !important; +} + +.spectrum-CSSExample-status { + margin-inline-start: var(--spectrum-spacing-200); +} + +.spectrum-CSSComponent-version { + flex-grow: 1; + text-align: end; +} + +.spectrum-CSSComponent-description { + margin-block-start: var(--spectrum-spacing-400); + margin-block-end: var(--spectrum-spacing-700); +} + +/* cards */ +.spectrum-CSSComponent-resources { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-block-end: var(--spectrum-spacing-500); + + & .spectrum-Card { + margin-block-end: var(--spectrum-spacing-300); + margin-inline-end: var(--spectrum-spacing-300); + } +} + +.spectrum-CSSComponent-resource--adobe, +.spectrum-CSSComponent-resources a[href*="spectrum.adobe.com"] .spectrum-Card-preview { + color: rgb(250 15 0); + background-color: var(--spectrum-gray-100); +} + +.spectrum-CSSComponent-resource--github, +.spectrum-CSSComponent-resources a[href*="github.com"] .spectrum-Card-preview { + color: var(--spectrum-black); + background-color: var(--spectrum-transparent-black-200); +} + +.spectrum-CSSComponent-resource--npm, +.spectrum-CSSComponent-resources a[href*="npmjs.com"] .spectrum-Card-preview { + background-color: rgba(203 56 55 / 10%); +} + +.spectrum-CSSComponent-cardImage { + text-decoration: none; +} + +.spectrum-CSSComponent-switcher { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: var(--spectrum-spacing-500); + justify-content: flex-end; +} + +.spectrum-CSS-switcherContainer { + margin-inline-start: var(--spectrum-spacing-300); + white-space: nowrap; +} + +/* CSS Example */ +.spectrum-CSSExample { + margin-block-end: 64px; +} + +.spectrum-CSSExample-container { + position: relative; + display: flex; + flex-direction: column; + border-radius: var(--spectrum-corner-radius-100); +} + +.spectrum-CSSExample-heading { + display: flex; + flex-direction: row; + align-items: center; + margin-block-end: var(--spectrum-spacing-100) !important; +} + +.spectrum-CSSExample-example, +.spectrum-CSSExample-markup { + box-sizing: border-box; +} + +:root { + --spectrum-docs-static-white-background-color: var(--spectrum-seafoam-900); + --spectrum-docs-static-black-background-color: var(--spectrum-seafoam-100); +} + +.spectrum-CSSExample-example { + flex: 1 0 auto; + min-block-size: 0; + padding: var(--spectrum-spacing-500) var(--spectrum-spacing-600); + border-radius: var(--spectrum-corner-radius-100) var(--spectrum-corner-radius-100) 0 0; + + &:has(> .spectrum-CSSExample-example-staticWhite) { + background-color: var(--spectrum-docs-static-white-background-color); + border-color: var(--spectrum-docs-static-white-background-color); + } + + &:has(> .spectrum-CSSExample-example-staticBlack) { + background-color: var(--spectrum-docs-static-black-background-color); + border-color: var(--spectrum-docs-static-black-background-color); + } +} + +.spectrum-CSSExample-markup { + position: relative; + + overflow: hidden; + + max-inline-size: 100%; + max-block-size: 192px; + padding: 10px 18px; + + border-radius: 0 0 var(--spectrum-corner-radius-100) var(--spectrum-corner-radius-100); + + &.is-open { + max-block-size: 100%; + padding-block-end: var(--spectrum-spacing-700); + + & .spectrum-CSSExample-markupToggle::before { + display: none; + } + } +} + +.spectrum-CSSExample-markupToggle + pre { + padding-block-end: var(--spectrum-spacing-100); +} + +.spectrum-CSSExample-example--spacious { + position: relative; + block-size: 150px; +} + +.spectrum-CSSExample-example--overlay { + position: relative; + min-block-size: var(--spectrum-spacing-800); +} + +.spectrum-CSSExample-dialog { + position: relative !important; + z-index: 1 !important; + inset-block-start: 0; + inset-inline-start: 0; + transform: none !important; + + inline-size: auto !important; + block-size: auto !important; + margin-inline-start: auto; + margin-inline-end: auto; + + transition: none; +} + +/* Mimics the .spectrum-Modal-wrapper so the modals & dialogs are above the underlay */ +.spectrum-CSSExample-modal { + z-index: 2 !important; +} + +.spectrum-Examples, +.spectrum-Examples-itemGroup { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: var(--spectrum-spacing-100); + justify-content: space-between; +} + +.spectrum-Examples--vertical { + flex-direction: column; +} + +.spectrum-Examples-item .spectrum-Examples-itemHeading { + margin-block-end: var(--spectrum-spacing-100); +} + +.spectrum-Button.spectrum-CSSExample-overlayShowButton { + position: absolute; + inset-block-start: 50%; + inset-inline-start: 50%; + transform: translate(-50%, -50%); +} + +.spectrum-CSSExample-markup pre code { + white-space: pre-wrap; +} + +.spectrum-CSSExample-markupToggle { + position: absolute; + z-index: 0; + inset-block-end: 0; + inset-inline-start: 0; + inset-inline-end: 0; + + box-sizing: border-box; + padding: var(--spectrum-spacing-400); + + font-size: var(--spectrum-font-size-50); + text-align: start; +} + +.spectrum-CenteredImage { + display: block; + inline-size: max(720px, 100%); + margin: auto; +} + +.spectrum-CodeBlock { + margin: var(--spectrum-spacing-200) 0; + padding: var(--spectrum-spacing-100) var(--spectrum-spacing-200); + + border-style: solid; + border-width: var(--spectrum-border-width-100); + border-radius: var(--spectrum-spacing-50); +} + +/* CSS Example */ +.spectrum-CSSExample-example { + background-color: var(--spectrum-background-layer-1-color, var(--spectrum-gray-100)); +} + +.spectrum-CSSExample-markup { + background-color: var(--spectrum-gray-75); + border-block-start: 1px solid var(--spectrum-gray-100); +} + +.spectrum-CSSExample-markupToggle { + z-index: 1; + background-color: var(--spectrum-gray-75); +} + +.spectrum-CSSExample-markup.is-open .spectrum-CSSExample-markupToggle { + background-color: transparent; +} + +.spectrum-CSSExample-example--overlay { + color: var(--spectrum-transparent-black-400); + background-color: var(--spectrum-transparent-black-400); +} + +.spectrum-CSSExample-oldAPI { + color: var(--spectrum-negative-color-800); +} + +.spectrum-CodeBlock { + background-color: var(--spectrum-gray-75); + border-color: var(--spectrum-gray-400); +} + +@media screen and (width <= 960px) { + .spectrum-CSSComponent { + margin-block: var(--spectrum-spacing-100); + margin-inline: auto; + padding-inline: 0 var(--spectrum-spacing-600); + } + + .spectrum-CSSComponent-description { + margin-block-end: var(--spectrum-spacing-200); + } + + .spectrum-CSSExample { + margin-block-end: var(--spectrum-spacing-200); + } + + .spectrum-CSSExample-example { + padding: var(--spectrum-spacing-200); + } + + .spectrum-CSSComponent-header { + margin-block-end: var(--spectrum-spacing-200); + } + + .spectrum-CSSComponent-statusContainer, + .spectrum-CSSComponent-version { + display: none; + } + + .spectrum-CSSComponent-title { + font-size: var(--spectrum-font-size-500); + } +} diff --git a/components/site/index.css b/components/site/index.css new file mode 100644 index 00000000000..1e917b3e917 --- /dev/null +++ b/components/site/index.css @@ -0,0 +1,48 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +@import "./site.css"; +@import "./component.css"; + +/* Scrollable */ +.u-scrollable, +.is-scrollable { + overflow-x: hidden; + overflow-y: auto; + + -webkit-overflow-scrolling: touch; + + &::-webkit-scrollbar { + inline-size: 10px; + block-size: 10px; + } + + &::-webkit-scrollbar-thumb { + inline-size: 8px; + block-size: 8px; + + background-color: var(--spectrum-gray-75); + background-clip: padding-box; + border-block: 2px solid rgba(0 0 0 / 0%); + border-radius: 8px; + } + + &::-webkit-scrollbar-track, + &::-webkit-scrollbar-track-piece { + background-color: var(--spectrum-gray-75); + } + + &:hover::-webkit-scrollbar-thumb { + background-color: var(--spectrum-gray-400); + } +} 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 9f58a1b3265..dbbb99d0b57 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -68,8 +68,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 */ @@ -353,12 +353,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 48814e0d705..45e556bca6e 100644 --- a/components/underlay/index.css +++ b/components/underlay/index.css @@ -18,7 +18,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 new file mode 100644 index 00000000000..0fa78e36d90 --- /dev/null +++ b/tokens/dist/css/components/bridge/index.css @@ -0,0 +1,758 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum-ActionButton { + --spectrum-actionbutton-background-color-default: var(--system-spectrum-actionbutton-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--system-spectrum-actionbutton-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--system-spectrum-actionbutton-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--system-spectrum-actionbutton-background-color-focus); + --spectrum-actionbutton-border-color-default: var(--system-spectrum-actionbutton-border-color-default); + --spectrum-actionbutton-border-color-hover: var(--system-spectrum-actionbutton-border-color-hover); + --spectrum-actionbutton-border-color-down: var(--system-spectrum-actionbutton-border-color-down); + --spectrum-actionbutton-border-color-focus: var(--system-spectrum-actionbutton-border-color-focus); + --spectrum-actionbutton-background-color-disabled: var(--system-spectrum-actionbutton-background-color-disabled); + --spectrum-actionbutton-border-color-disabled: var(--system-spectrum-actionbutton-border-color-disabled); + --spectrum-actionbutton-content-color-disabled: var(--system-spectrum-actionbutton-content-color-disabled); +} + +.spectrum-ActionButton.spectrum-ActionButton--quiet { + --spectrum-actionbutton-background-color-default: var(--system-spectrum-actionbutton-quiet-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--system-spectrum-actionbutton-quiet-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--system-spectrum-actionbutton-quiet-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--system-spectrum-actionbutton-quiet-background-color-focus); + --spectrum-actionbutton-border-color-default: var(--system-spectrum-actionbutton-quiet-border-color-default); + --spectrum-actionbutton-border-color-hover: var(--system-spectrum-actionbutton-quiet-border-color-hover); + --spectrum-actionbutton-border-color-down: var(--system-spectrum-actionbutton-quiet-border-color-down); + --spectrum-actionbutton-border-color-focus: var(--system-spectrum-actionbutton-quiet-border-color-focus); + --spectrum-actionbutton-background-color-disabled: var(--system-spectrum-actionbutton-quiet-background-color-disabled); + --spectrum-actionbutton-border-color-disabled: var(--system-spectrum-actionbutton-quiet-border-color-disabled); +} + +.spectrum-ActionButton.is-selected { + --spectrum-actionbutton-border-color-default: var(--system-spectrum-actionbutton-selected-border-color-default); + --spectrum-actionbutton-border-color-hover: var(--system-spectrum-actionbutton-selected-border-color-hover); + --spectrum-actionbutton-border-color-down: var(--system-spectrum-actionbutton-selected-border-color-down); + --spectrum-actionbutton-border-color-focus: var(--system-spectrum-actionbutton-selected-border-color-focus); + --spectrum-actionbutton-background-color-disabled: var(--system-spectrum-actionbutton-selected-background-color-disabled); + --spectrum-actionbutton-border-color-disabled: var(--system-spectrum-actionbutton-selected-border-color-disabled); +} + +.spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet { + --spectrum-actionbutton-border-color-default: var(--system-spectrum-actionbutton-staticblack-quiet-border-color-default); + --spectrum-actionbutton-border-color-hover: var(--system-spectrum-actionbutton-staticblack-quiet-border-color-hover); + --spectrum-actionbutton-border-color-down: var(--system-spectrum-actionbutton-staticblack-quiet-border-color-down); + --spectrum-actionbutton-border-color-focus: var(--system-spectrum-actionbutton-staticblack-quiet-border-color-focus); + --spectrum-actionbutton-border-color-disabled: var(--system-spectrum-actionbutton-staticblack-quiet-border-color-disabled); +} + +.spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet { + --spectrum-actionbutton-border-color-default: var(--system-spectrum-actionbutton-staticwhite-quiet-border-color-default); + --spectrum-actionbutton-border-color-hover: var(--system-spectrum-actionbutton-staticwhite-quiet-border-color-hover); + --spectrum-actionbutton-border-color-down: var(--system-spectrum-actionbutton-staticwhite-quiet-border-color-down); + --spectrum-actionbutton-border-color-focus: var(--system-spectrum-actionbutton-staticwhite-quiet-border-color-focus); + --spectrum-actionbutton-border-color-disabled: var(--system-spectrum-actionbutton-staticwhite-quiet-border-color-disabled); +} + +.spectrum-ActionButton.spectrum-ActionButton--staticBlack { + --spectrum-actionbutton-background-color-default: var(--system-spectrum-actionbutton-staticblack-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--system-spectrum-actionbutton-staticblack-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--system-spectrum-actionbutton-staticblack-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--system-spectrum-actionbutton-staticblack-background-color-focus); + --spectrum-actionbutton-border-color-default: var(--system-spectrum-actionbutton-staticblack-border-color-default); + --spectrum-actionbutton-border-color-hover: var(--system-spectrum-actionbutton-staticblack-border-color-hover); + --spectrum-actionbutton-border-color-down: var(--system-spectrum-actionbutton-staticblack-border-color-down); + --spectrum-actionbutton-border-color-focus: var(--system-spectrum-actionbutton-staticblack-border-color-focus); + --spectrum-actionbutton-content-color-default: var(--system-spectrum-actionbutton-staticblack-content-color-default); + --spectrum-actionbutton-content-color-hover: var(--system-spectrum-actionbutton-staticblack-content-color-hover); + --spectrum-actionbutton-content-color-down: var(--system-spectrum-actionbutton-staticblack-content-color-down); + --spectrum-actionbutton-content-color-focus: var(--system-spectrum-actionbutton-staticblack-content-color-focus); + --spectrum-actionbutton-focus-indicator-color: var(--system-spectrum-actionbutton-staticblack-focus-indicator-color); + --spectrum-actionbutton-background-color-disabled: var(--system-spectrum-actionbutton-staticblack-background-color-disabled); + --spectrum-actionbutton-border-color-disabled: var(--system-spectrum-actionbutton-staticblack-border-color-disabled); + --spectrum-actionbutton-content-color-disabled: var(--system-spectrum-actionbutton-staticblack-content-color-disabled); +} + +.spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected { + --mod-actionbutton-background-color-default: var(--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-default); + --mod-actionbutton-background-color-hover: var(--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-hover); + --mod-actionbutton-background-color-down: var(--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-down); + --mod-actionbutton-background-color-focus: var(--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-focus); + --mod-actionbutton-content-color-default: var(--mod-actionbutton-static-content-color, var(--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-default)); + --mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-content-color, var(--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-hover)); + --mod-actionbutton-content-color-down: var(--mod-actionbutton-static-content-color, var(--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-down)); + --mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-content-color, var(--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-focus)); + --mod-actionbutton-background-color-disabled: var(--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-disabled); + --mod-actionbutton-border-color-disabled: var(--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-border-color-disabled); +} + +.spectrum-ActionButton.spectrum-ActionButton--staticWhite { + --spectrum-actionbutton-background-color-default: var(--system-spectrum-actionbutton-staticwhite-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--system-spectrum-actionbutton-staticwhite-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--system-spectrum-actionbutton-staticwhite-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--system-spectrum-actionbutton-staticwhite-background-color-focus); + --spectrum-actionbutton-border-color-default: var(--system-spectrum-actionbutton-staticwhite-border-color-default); + --spectrum-actionbutton-border-color-hover: var(--system-spectrum-actionbutton-staticwhite-border-color-hover); + --spectrum-actionbutton-border-color-down: var(--system-spectrum-actionbutton-staticwhite-border-color-down); + --spectrum-actionbutton-border-color-focus: var(--system-spectrum-actionbutton-staticwhite-border-color-focus); + --spectrum-actionbutton-content-color-default: var(--system-spectrum-actionbutton-staticwhite-content-color-default); + --spectrum-actionbutton-content-color-hover: var(--system-spectrum-actionbutton-staticwhite-content-color-hover); + --spectrum-actionbutton-content-color-down: var(--system-spectrum-actionbutton-staticwhite-content-color-down); + --spectrum-actionbutton-content-color-focus: var(--system-spectrum-actionbutton-staticwhite-content-color-focus); + --spectrum-actionbutton-focus-indicator-color: var(--system-spectrum-actionbutton-staticwhite-focus-indicator-color); + --spectrum-actionbutton-background-color-disabled: var(--system-spectrum-actionbutton-staticwhite-background-color-disabled); + --spectrum-actionbutton-border-color-disabled: var(--system-spectrum-actionbutton-staticwhite-border-color-disabled); + --spectrum-actionbutton-content-color-disabled: var(--system-spectrum-actionbutton-staticwhite-content-color-disabled); +} + +.spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected { + --mod-actionbutton-background-color-default: var(--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-default); + --mod-actionbutton-background-color-hover: var(--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-hover); + --mod-actionbutton-background-color-down: var(--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-down); + --mod-actionbutton-background-color-focus: var(--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-focus); + --mod-actionbutton-content-color-default: var(--mod-actionbutton-static-content-color, var(--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-default)); + --mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-content-color, var(--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-hover)); + --mod-actionbutton-content-color-down: var(--mod-actionbutton-static-content-color, var(--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-down)); + --mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-content-color, var(--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-focus)); + --mod-actionbutton-background-color-disabled: var(--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-disabled); + --mod-actionbutton-border-color-disabled: var(--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-border-color-disabled); +} + +.spectrum-ActionGroup { + --spectrum-actiongroup-gap-size-compact: var(--system-spectrum-actiongroup-gap-size-compact); + --spectrum-actiongroup-horizontal-spacing-compact: var(--system-spectrum-actiongroup-horizontal-spacing-compact); + --spectrum-actiongroup-vertical-spacing-compact: var(--system-spectrum-actiongroup-vertical-spacing-compact); +} + +.spectrum-AlertBanner { + --spectrum-alert-banner-netural-background: var(--system-spectrum-alertbanner-spectrum-alert-banner-netural-background); +} + +.spectrum-AssetCard { + --spectrum-assetcard-overlay-background-color: var(--system-spectrum-assetcard-overlay-background-color); +} + +.spectrum-Button { + --spectrum-button-background-color-default: var(--system-spectrum-button-background-color-default); + --spectrum-button-background-color-hover: var(--system-spectrum-button-background-color-hover); + --spectrum-button-background-color-down: var(--system-spectrum-button-background-color-down); + --spectrum-button-background-color-focus: var(--system-spectrum-button-background-color-focus); + --spectrum-button-border-color-default: var(--system-spectrum-button-border-color-default); + --spectrum-button-border-color-hover: var(--system-spectrum-button-border-color-hover); + --spectrum-button-border-color-down: var(--system-spectrum-button-border-color-down); + --spectrum-button-border-color-focus: var(--system-spectrum-button-border-color-focus); + --spectrum-button-content-color-default: var(--system-spectrum-button-content-color-default); + --spectrum-button-content-color-hover: var(--system-spectrum-button-content-color-hover); + --spectrum-button-content-color-down: var(--system-spectrum-button-content-color-down); + --spectrum-button-content-color-focus: var(--system-spectrum-button-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-spectrum-button-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-spectrum-button-content-color-disabled); +} + +.spectrum-Button.spectrum-Button--accent { + --spectrum-button-background-color-default: var(--system-spectrum-button-accent-background-color-default); + --spectrum-button-background-color-hover: var(--system-spectrum-button-accent-background-color-hover); + --spectrum-button-background-color-down: var(--system-spectrum-button-accent-background-color-down); + --spectrum-button-background-color-focus: var(--system-spectrum-button-accent-background-color-focus); + --spectrum-button-border-color-default: var(--system-spectrum-button-accent-border-color-default); + --spectrum-button-border-color-hover: var(--system-spectrum-button-accent-border-color-hover); + --spectrum-button-border-color-down: var(--system-spectrum-button-accent-border-color-down); + --spectrum-button-border-color-focus: var(--system-spectrum-button-accent-border-color-focus); + --spectrum-button-content-color-default: var(--system-spectrum-button-accent-content-color-default); + --spectrum-button-content-color-hover: var(--system-spectrum-button-accent-content-color-hover); + --spectrum-button-content-color-down: var(--system-spectrum-button-accent-content-color-down); + --spectrum-button-content-color-focus: var(--system-spectrum-button-accent-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-spectrum-button-accent-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-accent-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-spectrum-button-accent-content-color-disabled); +} + +.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline { + --spectrum-button-background-color-default: var(--system-spectrum-button-accent-outline-background-color-default); + --spectrum-button-background-color-hover: var(--system-spectrum-button-accent-outline-background-color-hover); + --spectrum-button-background-color-down: var(--system-spectrum-button-accent-outline-background-color-down); + --spectrum-button-background-color-focus: var(--system-spectrum-button-accent-outline-background-color-focus); + --spectrum-button-border-color-default: var(--system-spectrum-button-accent-outline-border-color-default); + --spectrum-button-border-color-hover: var(--system-spectrum-button-accent-outline-border-color-hover); + --spectrum-button-border-color-down: var(--system-spectrum-button-accent-outline-border-color-down); + --spectrum-button-border-color-focus: var(--system-spectrum-button-accent-outline-border-color-focus); + --spectrum-button-content-color-default: var(--system-spectrum-button-accent-outline-content-color-default); + --spectrum-button-content-color-hover: var(--system-spectrum-button-accent-outline-content-color-hover); + --spectrum-button-content-color-down: var(--system-spectrum-button-accent-outline-content-color-down); + --spectrum-button-content-color-focus: var(--system-spectrum-button-accent-outline-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-spectrum-button-accent-outline-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-accent-outline-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-spectrum-button-accent-outline-content-color-disabled); +} + +.spectrum-Button.spectrum-Button--negative { + --spectrum-button-background-color-default: var(--system-spectrum-button-negative-background-color-default); + --spectrum-button-background-color-hover: var(--system-spectrum-button-negative-background-color-hover); + --spectrum-button-background-color-down: var(--system-spectrum-button-negative-background-color-down); + --spectrum-button-background-color-focus: var(--system-spectrum-button-negative-background-color-focus); + --spectrum-button-border-color-default: var(--system-spectrum-button-negative-border-color-default); + --spectrum-button-border-color-hover: var(--system-spectrum-button-negative-border-color-hover); + --spectrum-button-border-color-down: var(--system-spectrum-button-negative-border-color-down); + --spectrum-button-border-color-focus: var(--system-spectrum-button-negative-border-color-focus); + --spectrum-button-content-color-default: var(--system-spectrum-button-negative-content-color-default); + --spectrum-button-content-color-hover: var(--system-spectrum-button-negative-content-color-hover); + --spectrum-button-content-color-down: var(--system-spectrum-button-negative-content-color-down); + --spectrum-button-content-color-focus: var(--system-spectrum-button-negative-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-spectrum-button-negative-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-negative-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-spectrum-button-negative-content-color-disabled); +} + +.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline { + --spectrum-button-background-color-default: var(--system-spectrum-button-negative-outline-background-color-default); + --spectrum-button-background-color-hover: var(--system-spectrum-button-negative-outline-background-color-hover); + --spectrum-button-background-color-down: var(--system-spectrum-button-negative-outline-background-color-down); + --spectrum-button-background-color-focus: var(--system-spectrum-button-negative-outline-background-color-focus); + --spectrum-button-border-color-default: var(--system-spectrum-button-negative-outline-border-color-default); + --spectrum-button-border-color-hover: var(--system-spectrum-button-negative-outline-border-color-hover); + --spectrum-button-border-color-down: var(--system-spectrum-button-negative-outline-border-color-down); + --spectrum-button-border-color-focus: var(--system-spectrum-button-negative-outline-border-color-focus); + --spectrum-button-content-color-default: var(--system-spectrum-button-negative-outline-content-color-default); + --spectrum-button-content-color-hover: var(--system-spectrum-button-negative-outline-content-color-hover); + --spectrum-button-content-color-down: var(--system-spectrum-button-negative-outline-content-color-down); + --spectrum-button-content-color-focus: var(--system-spectrum-button-negative-outline-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-spectrum-button-negative-outline-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-negative-outline-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-spectrum-button-negative-outline-content-color-disabled); +} + +.spectrum-Button.spectrum-Button--primary { + --spectrum-button-background-color-default: var(--system-spectrum-button-primary-background-color-default); + --spectrum-button-background-color-hover: var(--system-spectrum-button-primary-background-color-hover); + --spectrum-button-background-color-down: var(--system-spectrum-button-primary-background-color-down); + --spectrum-button-background-color-focus: var(--system-spectrum-button-primary-background-color-focus); + --spectrum-button-border-color-default: var(--system-spectrum-button-primary-border-color-default); + --spectrum-button-border-color-hover: var(--system-spectrum-button-primary-border-color-hover); + --spectrum-button-border-color-down: var(--system-spectrum-button-primary-border-color-down); + --spectrum-button-border-color-focus: var(--system-spectrum-button-primary-border-color-focus); + --spectrum-button-content-color-default: var(--system-spectrum-button-primary-content-color-default); + --spectrum-button-content-color-hover: var(--system-spectrum-button-primary-content-color-hover); + --spectrum-button-content-color-down: var(--system-spectrum-button-primary-content-color-down); + --spectrum-button-content-color-focus: var(--system-spectrum-button-primary-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-spectrum-button-primary-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-primary-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-spectrum-button-primary-content-color-disabled); +} + +.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline { + --spectrum-button-background-color-default: var(--system-spectrum-button-primary-outline-background-color-default); + --spectrum-button-background-color-hover: var(--system-spectrum-button-primary-outline-background-color-hover); + --spectrum-button-background-color-down: var(--system-spectrum-button-primary-outline-background-color-down); + --spectrum-button-background-color-focus: var(--system-spectrum-button-primary-outline-background-color-focus); + --spectrum-button-border-color-default: var(--system-spectrum-button-primary-outline-border-color-default); + --spectrum-button-border-color-hover: var(--system-spectrum-button-primary-outline-border-color-hover); + --spectrum-button-border-color-down: var(--system-spectrum-button-primary-outline-border-color-down); + --spectrum-button-border-color-focus: var(--system-spectrum-button-primary-outline-border-color-focus); + --spectrum-button-content-color-default: var(--system-spectrum-button-primary-outline-content-color-default); + --spectrum-button-content-color-hover: var(--system-spectrum-button-primary-outline-content-color-hover); + --spectrum-button-content-color-down: var(--system-spectrum-button-primary-outline-content-color-down); + --spectrum-button-content-color-focus: var(--system-spectrum-button-primary-outline-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-spectrum-button-primary-outline-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-primary-outline-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-spectrum-button-primary-outline-content-color-disabled); +} + +.spectrum-Button.spectrum-Button--secondary { + --spectrum-button-background-color-default: var(--system-spectrum-button-secondary-background-color-default); + --spectrum-button-background-color-hover: var(--system-spectrum-button-secondary-background-color-hover); + --spectrum-button-background-color-down: var(--system-spectrum-button-secondary-background-color-down); + --spectrum-button-background-color-focus: var(--system-spectrum-button-secondary-background-color-focus); + --spectrum-button-border-color-default: var(--system-spectrum-button-secondary-border-color-default); + --spectrum-button-border-color-hover: var(--system-spectrum-button-secondary-border-color-hover); + --spectrum-button-border-color-down: var(--system-spectrum-button-secondary-border-color-down); + --spectrum-button-border-color-focus: var(--system-spectrum-button-secondary-border-color-focus); + --spectrum-button-content-color-default: var(--system-spectrum-button-secondary-content-color-default); + --spectrum-button-content-color-hover: var(--system-spectrum-button-secondary-content-color-hover); + --spectrum-button-content-color-down: var(--system-spectrum-button-secondary-content-color-down); + --spectrum-button-content-color-focus: var(--system-spectrum-button-secondary-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-spectrum-button-secondary-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-secondary-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-spectrum-button-secondary-content-color-disabled); +} + +.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline { + --spectrum-button-background-color-default: var(--system-spectrum-button-secondary-outline-background-color-default); + --spectrum-button-background-color-hover: var(--system-spectrum-button-secondary-outline-background-color-hover); + --spectrum-button-background-color-down: var(--system-spectrum-button-secondary-outline-background-color-down); + --spectrum-button-background-color-focus: var(--system-spectrum-button-secondary-outline-background-color-focus); + --spectrum-button-border-color-default: var(--system-spectrum-button-secondary-outline-border-color-default); + --spectrum-button-border-color-hover: var(--system-spectrum-button-secondary-outline-border-color-hover); + --spectrum-button-border-color-down: var(--system-spectrum-button-secondary-outline-border-color-down); + --spectrum-button-border-color-focus: var(--system-spectrum-button-secondary-outline-border-color-focus); + --spectrum-button-content-color-default: var(--system-spectrum-button-secondary-outline-content-color-default); + --spectrum-button-content-color-hover: var(--system-spectrum-button-secondary-outline-content-color-hover); + --spectrum-button-content-color-down: var(--system-spectrum-button-secondary-outline-content-color-down); + --spectrum-button-content-color-focus: var(--system-spectrum-button-secondary-outline-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-spectrum-button-secondary-outline-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-secondary-outline-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-spectrum-button-secondary-outline-content-color-disabled); +} + +.spectrum-Button.spectrum-Button--quiet { + --spectrum-button-background-color-default: var(--system-spectrum-button-quiet-background-color-default); + --spectrum-button-background-color-hover: var(--system-spectrum-button-quiet-background-color-hover); + --spectrum-button-background-color-down: var(--system-spectrum-button-quiet-background-color-down); + --spectrum-button-background-color-focus: var(--system-spectrum-button-quiet-background-color-focus); + --spectrum-button-border-color-default: var(--system-spectrum-button-quiet-border-color-default); + --spectrum-button-border-color-hover: var(--system-spectrum-button-quiet-border-color-hover); + --spectrum-button-border-color-down: var(--system-spectrum-button-quiet-border-color-down); + --spectrum-button-border-color-focus: var(--system-spectrum-button-quiet-border-color-focus); + --spectrum-button-background-color-disabled: var(--system-spectrum-button-quiet-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-quiet-border-color-disabled); +} + +.spectrum-Button.is-selected { + --spectrum-button-background-color-default: var(--system-spectrum-button-selected-background-color-default); + --spectrum-button-background-color-hover: var(--system-spectrum-button-selected-background-color-hover); + --spectrum-button-background-color-down: var(--system-spectrum-button-selected-background-color-down); + --spectrum-button-background-color-focus: var(--system-spectrum-button-selected-background-color-focus); + --spectrum-button-border-color-default: var(--system-spectrum-button-selected-border-color-default); + --spectrum-button-border-color-hover: var(--system-spectrum-button-selected-border-color-hover); + --spectrum-button-border-color-down: var(--system-spectrum-button-selected-border-color-down); + --spectrum-button-border-color-focus: var(--system-spectrum-button-selected-border-color-focus); + --spectrum-button-content-color-default: var(--system-spectrum-button-selected-content-color-default); + --spectrum-button-content-color-hover: var(--system-spectrum-button-selected-content-color-hover); + --spectrum-button-content-color-down: var(--system-spectrum-button-selected-content-color-down); + --spectrum-button-content-color-focus: var(--system-spectrum-button-selected-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-spectrum-button-selected-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-selected-border-color-disabled); +} + +.spectrum-Button.is-selected.spectrum-Button--emphasized { + --spectrum-button-background-color-default: var(--system-spectrum-button-selected-emphasized-background-color-default); + --spectrum-button-background-color-hover: var(--system-spectrum-button-selected-emphasized-background-color-hover); + --spectrum-button-background-color-down: var(--system-spectrum-button-selected-emphasized-background-color-down); + --spectrum-button-background-color-focus: var(--system-spectrum-button-selected-emphasized-background-color-focus); +} + +.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet { + --spectrum-button-border-color-default: var(--system-spectrum-button-staticblack-quiet-border-color-default); + --spectrum-button-border-color-hover: var(--system-spectrum-button-staticblack-quiet-border-color-hover); + --spectrum-button-border-color-down: var(--system-spectrum-button-staticblack-quiet-border-color-down); + --spectrum-button-border-color-focus: var(--system-spectrum-button-staticblack-quiet-border-color-focus); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticblack-quiet-border-color-disabled); +} + +.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet { + --spectrum-button-border-color-default: var(--system-spectrum-button-staticwhite-quiet-border-color-default); + --spectrum-button-border-color-hover: var(--system-spectrum-button-staticwhite-quiet-border-color-hover); + --spectrum-button-border-color-down: var(--system-spectrum-button-staticwhite-quiet-border-color-down); + --spectrum-button-border-color-focus: var(--system-spectrum-button-staticwhite-quiet-border-color-focus); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticwhite-quiet-border-color-disabled); +} + +.spectrum-Button.spectrum-Button--staticWhite { + --spectrum-button-background-color-default: var(--system-spectrum-button-staticwhite-background-color-default); + --spectrum-button-background-color-hover: var(--system-spectrum-button-staticwhite-background-color-hover); + --spectrum-button-background-color-down: var(--system-spectrum-button-staticwhite-background-color-down); + --spectrum-button-background-color-focus: var(--system-spectrum-button-staticwhite-background-color-focus); + --spectrum-button-border-color-default: var(--system-spectrum-button-staticwhite-border-color-default); + --spectrum-button-border-color-hover: var(--system-spectrum-button-staticwhite-border-color-hover); + --spectrum-button-border-color-down: var(--system-spectrum-button-staticwhite-border-color-down); + --spectrum-button-border-color-focus: var(--system-spectrum-button-staticwhite-border-color-focus); + --spectrum-button-content-color-default: var(--system-spectrum-button-staticwhite-content-color-default); + --spectrum-button-content-color-hover: var(--system-spectrum-button-staticwhite-content-color-hover); + --spectrum-button-content-color-down: var(--system-spectrum-button-staticwhite-content-color-down); + --spectrum-button-content-color-focus: var(--system-spectrum-button-staticwhite-content-color-focus); + --spectrum-button-focus-indicator-color: var(--system-spectrum-button-staticwhite-focus-indicator-color); + --spectrum-button-background-color-disabled: var(--system-spectrum-button-staticwhite-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticwhite-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-spectrum-button-staticwhite-content-color-disabled); +} + +.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline { + --spectrum-button-background-color-default: var(--system-spectrum-button-staticwhite-outline-background-color-default); + --spectrum-button-background-color-hover: var(--system-spectrum-button-staticwhite-outline-background-color-hover); + --spectrum-button-background-color-down: var(--system-spectrum-button-staticwhite-outline-background-color-down); + --spectrum-button-background-color-focus: var(--system-spectrum-button-staticwhite-outline-background-color-focus); + --spectrum-button-border-color-default: var(--system-spectrum-button-staticwhite-outline-border-color-default); + --spectrum-button-border-color-hover: var(--system-spectrum-button-staticwhite-outline-border-color-hover); + --spectrum-button-border-color-down: var(--system-spectrum-button-staticwhite-outline-border-color-down); + --spectrum-button-border-color-focus: var(--system-spectrum-button-staticwhite-outline-border-color-focus); + --spectrum-button-content-color-default: var(--system-spectrum-button-staticwhite-outline-content-color-default); + --spectrum-button-content-color-hover: var(--system-spectrum-button-staticwhite-outline-content-color-hover); + --spectrum-button-content-color-down: var(--system-spectrum-button-staticwhite-outline-content-color-down); + --spectrum-button-content-color-focus: var(--system-spectrum-button-staticwhite-outline-content-color-focus); + --spectrum-button-focus-indicator-color: var(--system-spectrum-button-staticwhite-outline-focus-indicator-color); + --spectrum-button-background-color-disabled: var(--system-spectrum-button-staticwhite-outline-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticwhite-outline-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-spectrum-button-staticwhite-outline-content-color-disabled); +} + +.spectrum-Button.spectrum-Button--staticWhite.is-selected { + --spectrum-button-background-color-default: var(--system-spectrum-button-staticwhite-selected-background-color-default); + --spectrum-button-background-color-hover: var(--system-spectrum-button-staticwhite-selected-background-color-hover); + --spectrum-button-background-color-down: var(--system-spectrum-button-staticwhite-selected-background-color-down); + --spectrum-button-background-color-focus: var(--system-spectrum-button-staticwhite-selected-background-color-focus); + --spectrum-button-content-color-default: var(--mod-button-static-content-color, var(--system-spectrum-button-staticwhite-selected-content-color-default)); + --spectrum-button-content-color-hover: var(--mod-button-static-content-color, var(--system-spectrum-button-staticwhite-selected-content-color-hover)); + --spectrum-button-content-color-down: var(--mod-button-static-content-color, var(--system-spectrum-button-staticwhite-selected-content-color-down)); + --spectrum-button-content-color-focus: var(--mod-button-static-content-color, var(--system-spectrum-button-staticwhite-selected-content-color-focus)); + --spectrum-button-background-color-disabled: var(--system-spectrum-button-staticwhite-selected-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticwhite-selected-border-color-disabled); +} + +.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary { + --spectrum-button-background-color-default: var(--system-spectrum-button-staticwhite-secondary-background-color-default); + --spectrum-button-background-color-hover: var(--system-spectrum-button-staticwhite-secondary-background-color-hover); + --spectrum-button-background-color-down: var(--system-spectrum-button-staticwhite-secondary-background-color-down); + --spectrum-button-background-color-focus: var(--system-spectrum-button-staticwhite-secondary-background-color-focus); + --spectrum-button-border-color-default: var(--system-spectrum-button-staticwhite-secondary-border-color-default); + --spectrum-button-border-color-hover: var(--system-spectrum-button-staticwhite-secondary-border-color-hover); + --spectrum-button-border-color-down: var(--system-spectrum-button-staticwhite-secondary-border-color-down); + --spectrum-button-border-color-focus: var(--system-spectrum-button-staticwhite-secondary-border-color-focus); + --spectrum-button-content-color-default: var(--system-spectrum-button-staticwhite-secondary-content-color-default); + --spectrum-button-content-color-hover: var(--system-spectrum-button-staticwhite-secondary-content-color-hover); + --spectrum-button-content-color-down: var(--system-spectrum-button-staticwhite-secondary-content-color-down); + --spectrum-button-content-color-focus: var(--system-spectrum-button-staticwhite-secondary-content-color-focus); + --spectrum-button-focus-indicator-color: var(--system-spectrum-button-staticwhite-secondary-focus-indicator-color); + --spectrum-button-background-color-disabled: var(--system-spectrum-button-staticwhite-secondary-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticwhite-secondary-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-spectrum-button-staticwhite-secondary-content-color-disabled); +} + +.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline { + --spectrum-button-background-color-default: var(--system-spectrum-button-staticwhite-secondary-outline-background-color-default); + --spectrum-button-background-color-hover: var(--system-spectrum-button-staticwhite-secondary-outline-background-color-hover); + --spectrum-button-background-color-down: var(--system-spectrum-button-staticwhite-secondary-outline-background-color-down); + --spectrum-button-background-color-focus: var(--system-spectrum-button-staticwhite-secondary-outline-background-color-focus); + --spectrum-button-border-color-default: var(--system-spectrum-button-staticwhite-secondary-outline-border-color-default); + --spectrum-button-border-color-hover: var(--system-spectrum-button-staticwhite-secondary-outline-border-color-hover); + --spectrum-button-border-color-down: var(--system-spectrum-button-staticwhite-secondary-outline-border-color-down); + --spectrum-button-border-color-focus: var(--system-spectrum-button-staticwhite-secondary-outline-border-color-focus); + --spectrum-button-content-color-default: var(--system-spectrum-button-staticwhite-secondary-outline-content-color-default); + --spectrum-button-content-color-hover: var(--system-spectrum-button-staticwhite-secondary-outline-content-color-hover); + --spectrum-button-content-color-down: var(--system-spectrum-button-staticwhite-secondary-outline-content-color-down); + --spectrum-button-content-color-focus: var(--system-spectrum-button-staticwhite-secondary-outline-content-color-focus); + --spectrum-button-focus-indicator-color: var(--system-spectrum-button-staticwhite-secondary-outline-focus-indicator-color); + --spectrum-button-background-color-disabled: var(--system-spectrum-button-staticwhite-secondary-outline-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticwhite-secondary-outline-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-spectrum-button-staticwhite-secondary-outline-content-color-disabled); +} + +.spectrum-Button.spectrum-Button--staticBlack { + --spectrum-button-background-color-default: var(--system-spectrum-button-staticblack-background-color-default); + --spectrum-button-background-color-hover: var(--system-spectrum-button-staticblack-background-color-hover); + --spectrum-button-background-color-down: var(--system-spectrum-button-staticblack-background-color-down); + --spectrum-button-background-color-focus: var(--system-spectrum-button-staticblack-background-color-focus); + --spectrum-button-border-color-default: var(--system-spectrum-button-staticblack-border-color-default); + --spectrum-button-border-color-hover: var(--system-spectrum-button-staticblack-border-color-hover); + --spectrum-button-border-color-down: var(--system-spectrum-button-staticblack-border-color-down); + --spectrum-button-border-color-focus: var(--system-spectrum-button-staticblack-border-color-focus); + --spectrum-button-content-color-default: var(--system-spectrum-button-staticblack-content-color-default); + --spectrum-button-content-color-hover: var(--system-spectrum-button-staticblack-content-color-hover); + --spectrum-button-content-color-down: var(--system-spectrum-button-staticblack-content-color-down); + --spectrum-button-content-color-focus: var(--system-spectrum-button-staticblack-content-color-focus); + --spectrum-button-focus-indicator-color: var(--system-spectrum-button-staticblack-focus-indicator-color); + --spectrum-button-background-color-disabled: var(--system-spectrum-button-staticblack-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticblack-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-spectrum-button-staticblack-content-color-disabled); +} + +.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline { + --spectrum-button-background-color-default: var(--system-spectrum-button-staticblack-outline-background-color-default); + --spectrum-button-background-color-hover: var(--system-spectrum-button-staticblack-outline-background-color-hover); + --spectrum-button-background-color-down: var(--system-spectrum-button-staticblack-outline-background-color-down); + --spectrum-button-background-color-focus: var(--system-spectrum-button-staticblack-outline-background-color-focus); + --spectrum-button-border-color-default: var(--system-spectrum-button-staticblack-outline-border-color-default); + --spectrum-button-border-color-hover: var(--system-spectrum-button-staticblack-outline-border-color-hover); + --spectrum-button-border-color-down: var(--system-spectrum-button-staticblack-outline-border-color-down); + --spectrum-button-border-color-focus: var(--system-spectrum-button-staticblack-outline-border-color-focus); + --spectrum-button-content-color-default: var(--system-spectrum-button-staticblack-outline-content-color-default); + --spectrum-button-content-color-hover: var(--system-spectrum-button-staticblack-outline-content-color-hover); + --spectrum-button-content-color-down: var(--system-spectrum-button-staticblack-outline-content-color-down); + --spectrum-button-content-color-focus: var(--system-spectrum-button-staticblack-outline-content-color-focus); + --spectrum-button-focus-indicator-color: var(--system-spectrum-button-staticblack-outline-focus-indicator-color); + --spectrum-button-background-color-disabled: var(--system-spectrum-button-staticblack-outline-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticblack-outline-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-spectrum-button-staticblack-outline-content-color-disabled); +} + +.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary { + --spectrum-button-background-color-default: var(--system-spectrum-button-staticblack-secondary-background-color-default); + --spectrum-button-background-color-hover: var(--system-spectrum-button-staticblack-secondary-background-color-hover); + --spectrum-button-background-color-down: var(--system-spectrum-button-staticblack-secondary-background-color-down); + --spectrum-button-background-color-focus: var(--system-spectrum-button-staticblack-secondary-background-color-focus); + --spectrum-button-border-color-default: var(--system-spectrum-button-staticblack-secondary-border-color-default); + --spectrum-button-border-color-hover: var(--system-spectrum-button-staticblack-secondary-border-color-hover); + --spectrum-button-border-color-down: var(--system-spectrum-button-staticblack-secondary-border-color-down); + --spectrum-button-border-color-focus: var(--system-spectrum-button-staticblack-secondary-border-color-focus); + --spectrum-button-content-color-default: var(--system-spectrum-button-staticblack-secondary-content-color-default); + --spectrum-button-content-color-hover: var(--system-spectrum-button-staticblack-secondary-content-color-hover); + --spectrum-button-content-color-down: var(--system-spectrum-button-staticblack-secondary-content-color-down); + --spectrum-button-content-color-focus: var(--system-spectrum-button-staticblack-secondary-content-color-focus); + --spectrum-button-focus-indicator-color: var(--system-spectrum-button-staticblack-secondary-focus-indicator-color); + --spectrum-button-background-color-disabled: var(--system-spectrum-button-staticblack-secondary-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticblack-secondary-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-spectrum-button-staticblack-secondary-content-color-disabled); +} + +.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline { + --spectrum-button-background-color-default: var(--system-spectrum-button-staticblack-secondary-outline-background-color-default); + --spectrum-button-background-color-hover: var(--system-spectrum-button-staticblack-secondary-outline-background-color-hover); + --spectrum-button-background-color-down: var(--system-spectrum-button-staticblack-secondary-outline-background-color-down); + --spectrum-button-background-color-focus: var(--system-spectrum-button-staticblack-secondary-outline-background-color-focus); + --spectrum-button-border-color-default: var(--system-spectrum-button-staticblack-secondary-outline-border-color-default); + --spectrum-button-border-color-hover: var(--system-spectrum-button-staticblack-secondary-outline-border-color-hover); + --spectrum-button-border-color-down: var(--system-spectrum-button-staticblack-secondary-outline-border-color-down); + --spectrum-button-border-color-focus: var(--system-spectrum-button-staticblack-secondary-outline-border-color-focus); + --spectrum-button-content-color-default: var(--system-spectrum-button-staticblack-secondary-outline-content-color-default); + --spectrum-button-content-color-hover: var(--system-spectrum-button-staticblack-secondary-outline-content-color-hover); + --spectrum-button-content-color-down: var(--system-spectrum-button-staticblack-secondary-outline-content-color-down); + --spectrum-button-content-color-focus: var(--system-spectrum-button-staticblack-secondary-outline-content-color-focus); + --spectrum-button-focus-indicator-color: var(--system-spectrum-button-staticblack-secondary-outline-focus-indicator-color); + --spectrum-button-background-color-disabled: var(--system-spectrum-button-staticblack-secondary-outline-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-spectrum-button-staticblack-secondary-outline-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-spectrum-button-staticblack-secondary-outline-content-color-disabled); +} + +.spectrum-Checkbox { + --spectrum-checkbox-control-color-default: var(--system-spectrum-checkbox-control-color-default); + --spectrum-checkbox-control-color-hover: var(--system-spectrum-checkbox-control-color-hover); + --spectrum-checkbox-control-color-down: var(--system-spectrum-checkbox-control-color-down); + --spectrum-checkbox-control-color-focus: var(--system-spectrum-checkbox-control-color-focus); +} + +.spectrum-ClearButton { + --spectrum-clear-button-background-color: var(--system-spectrum-clearbutton-spectrum-clear-button-background-color); + --spectrum-clear-button-background-color-hover: var(--system-spectrum-clearbutton-spectrum-clear-button-background-color-hover); + --spectrum-clear-button-background-color-down: var(--system-spectrum-clearbutton-spectrum-clear-button-background-color-down); + --spectrum-clear-button-background-color-key-focus: var(--system-spectrum-clearbutton-spectrum-clear-button-background-color-key-focus); +} + +.spectrum-CloseButton { + --spectrum-closebutton-background-color-default: var(--system-spectrum-closebutton-background-color-default); + --spectrum-closebutton-background-color-hover: var(--system-spectrum-closebutton-background-color-hover); + --spectrum-closebutton-background-color-down: var(--system-spectrum-closebutton-background-color-down); + --spectrum-closebutton-background-color-focus: var(--system-spectrum-closebutton-background-color-focus); +} + +.spectrum-Combobox { + --spectrum-combobox-border-color-default: var(--system-spectrum-combobox-border-color-default); + --spectrum-combobox-border-color-hover: var(--system-spectrum-combobox-border-color-hover); + --spectrum-combobox-border-color-focus: var(--system-spectrum-combobox-border-color-focus); + --spectrum-combobox-border-color-focus-hover: var(--system-spectrum-combobox-border-color-focus-hover); + --spectrum-combobox-border-color-key-focus: var(--system-spectrum-combobox-border-color-key-focus); +} + +.spectrum-DatePicker { + --spectrum-datepicker-initial-height: var(--system-spectrum-datepicker-initial-height); +} + +.spectrum-InfieldButton { + --spectrum-infield-button-border-width: var(--system-spectrum-infieldbutton-spectrum-infield-button-border-width); + --spectrum-infield-button-border-color: var(--system-spectrum-infieldbutton-spectrum-infield-button-border-color); + --spectrum-infield-button-border-radius: var(--system-spectrum-infieldbutton-spectrum-infield-button-border-radius); + --spectrum-infield-button-border-radius-reset: var(--system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset); + --spectrum-infield-button-stacked-top-border-radius-start-start: var(--system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start); + --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start); + --spectrum-infield-button-background-color: var(--system-spectrum-infieldbutton-spectrum-infield-button-background-color); + --spectrum-infield-button-background-color-hover: var(--system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover); + --spectrum-infield-button-background-color-down: var(--system-spectrum-infieldbutton-spectrum-infield-button-background-color-down); + --spectrum-infield-button-background-color-key-focus: var(--system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus); +} + +.spectrum-Picker { + --spectrum-picker-background-color-default: var(--system-spectrum-picker-background-color-default); + --spectrum-picker-background-color-default-open: var(--system-spectrum-picker-background-color-default-open); + --spectrum-picker-background-color-active: var(--system-spectrum-picker-background-color-active); + --spectrum-picker-background-color-hover: var(--system-spectrum-picker-background-color-hover); + --spectrum-picker-background-color-hover-open: var(--system-spectrum-picker-background-color-hover-open); + --spectrum-picker-background-color-key-focus: var(--system-spectrum-picker-background-color-key-focus); + --spectrum-picker-border-color-default: var(--system-spectrum-picker-border-color-default); + --spectrum-picker-border-color-default-open: var(--system-spectrum-picker-border-color-default-open); + --spectrum-picker-border-color-hover: var(--system-spectrum-picker-border-color-hover); + --spectrum-picker-border-color-hover-open: var(--system-spectrum-picker-border-color-hover-open); + --spectrum-picker-border-color-active: var(--system-spectrum-picker-border-color-active); + --spectrum-picker-border-color-key-focus: var(--system-spectrum-picker-border-color-key-focus); + --spectrum-picker-border-width: var(--system-spectrum-picker-border-width); +} + +.spectrum-PickerButton { + --spectrum-picker-button-background-color: var(--system-spectrum-pickerbutton-spectrum-picker-button-background-color); + --spectrum-picker-button-background-color-hover: var(--system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover); + --spectrum-picker-button-background-color-down: var(--system-spectrum-pickerbutton-spectrum-picker-button-background-color-down); + --spectrum-picker-button-background-color-key-focus: var(--system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus); + --spectrum-picker-button-border-color: var(--system-spectrum-pickerbutton-spectrum-picker-button-border-color); + --spectrum-picker-button-border-radius: var(--system-spectrum-pickerbutton-spectrum-picker-button-border-radius); + --spectrum-picker-button-border-radius-rounded-sided: var(--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided); + --spectrum-picker-button-border-radius-sided: var(--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided); + --spectrum-picker-button-border-width: var(--system-spectrum-pickerbutton-spectrum-picker-button-border-width); +} + +.spectrum-Popover { + --spectrum-popover-border-width: var(--system-spectrum-popover-border-width); +} + +.spectrum-Radio { + --spectrum-radio-button-border-color-default: var(--system-spectrum-radio-button-border-color-default); + --spectrum-radio-button-border-color-hover: var(--system-spectrum-radio-button-border-color-hover); + --spectrum-radio-button-border-color-down: var(--system-spectrum-radio-button-border-color-down); + --spectrum-radio-button-border-color-focus: var(--system-spectrum-radio-button-border-color-focus); +} + +.spectrum-Radio--emphasized { + --spectrum-radio-button-checked-border-color-default: var(--system-spectrum-radio-emphasized-button-checked-border-color-default); + --spectrum-radio-button-checked-border-color-hover: var(--system-spectrum-radio-emphasized-button-checked-border-color-hover); + --spectrum-radio-button-checked-border-color-down: var(--system-spectrum-radio-emphasized-button-checked-border-color-down); + --spectrum-radio-button-checked-border-color-focus: var(--system-spectrum-radio-emphasized-button-checked-border-color-focus); +} + +.spectrum-Rating { + --spectrum-rating-icon-color-default: var(--system-spectrum-rating-icon-color-default); + --spectrum-rating-icon-color-hover: var(--system-spectrum-rating-icon-color-hover); + --spectrum-rating-icon-color-down: var(--system-spectrum-rating-icon-color-down); + --spectrum-rating-icon-color-key-focus: var(--system-spectrum-rating-icon-color-key-focus); +} + +.spectrum-Search { + --spectrum-search-border-radius: var(--system-spectrum-search-border-radius); + --spectrum-search-edge-to-visual: var(--system-spectrum-search-edge-to-visual); + --spectrum-search-border-color-default: var(--system-spectrum-search-border-color-default); + --spectrum-search-border-color-hover: var(--system-spectrum-search-border-color-hover); + --spectrum-search-border-color-focus: var(--system-spectrum-search-border-color-focus); + --spectrum-search-border-color-focus-hover: var(--system-spectrum-search-border-color-focus-hover); + --spectrum-search-border-color-key-focus: var(--system-spectrum-search-border-color-key-focus); +} + +.spectrum-Search--sizeS { + --spectrum-search-border-radius: var(--system-spectrum-search-sizes-border-radius); + --spectrum-search-edge-to-visual: var(--system-spectrum-search-sizes-edge-to-visual); +} + +.spectrum-Search--sizeM { + --spectrum-search-border-radius: var(--system-spectrum-search-sizem-border-radius); + --spectrum-search-edge-to-visual: var(--system-spectrum-search-sizem-edge-to-visual); +} + +.spectrum-Search--sizeL { + --spectrum-search-border-radius: var(--system-spectrum-search-sizel-border-radius); + --spectrum-search-edge-to-visual: var(--system-spectrum-search-sizel-edge-to-visual); +} + +.spectrum-Search--sizeXL { + --spectrum-search-border-radius: var(--system-spectrum-search-sizexl-border-radius); + --spectrum-search-edge-to-visual: var(--system-spectrum-search-sizexl-edge-to-visual); +} + +.spectrum-Slider { + --spectrum-slider-track-color: var(--system-spectrum-slider-track-color); + --spectrum-slider-track-fill-color: var(--system-spectrum-slider-track-fill-color); + --spectrum-slider-ramp-track-color: var(--system-spectrum-slider-ramp-track-color); + --spectrum-slider-ramp-track-color-disabled: var(--system-spectrum-slider-ramp-track-color-disabled); + --spectrum-slider-handle-background-color: var(--system-spectrum-slider-handle-background-color); + --spectrum-slider-handle-background-color-disabled: var(--system-spectrum-slider-handle-background-color-disabled); + --spectrum-slider-ramp-handle-background-color: var(--system-spectrum-slider-ramp-handle-background-color); + --spectrum-slider-ticks-handle-background-color: var(--system-spectrum-slider-ticks-handle-background-color); + --spectrum-slider-handle-border-color: var(--system-spectrum-slider-handle-border-color); + --spectrum-slider-handle-disabled-background-color: var(--system-spectrum-slider-handle-disabled-background-color); + --spectrum-slider-tick-mark-color: var(--system-spectrum-slider-tick-mark-color); + --spectrum-slider-handle-border-color-hover: var(--system-spectrum-slider-handle-border-color-hover); + --spectrum-slider-handle-border-color-down: var(--system-spectrum-slider-handle-border-color-down); + --spectrum-slider-handle-border-color-key-focus: var(--system-spectrum-slider-handle-border-color-key-focus); + --spectrum-slider-handle-focus-ring-color-key-focus: var(--system-spectrum-slider-handle-focus-ring-color-key-focus); +} + +.spectrum-Stepper { + --spectrum-stepper-border-width: var(--system-spectrum-stepper-border-width); + --spectrum-stepper-buttons-border-style: var(--system-spectrum-stepper-buttons-border-style); + --spectrum-stepper-buttons-border-width: var(--system-spectrum-stepper-buttons-border-width); + --spectrum-stepper-buttons-border-color: var(--system-spectrum-stepper-buttons-border-color); + --spectrum-stepper-buttons-background-color: var(--system-spectrum-stepper-buttons-background-color); + --spectrum-stepper-buttons-border-color-hover: var(--system-spectrum-stepper-buttons-border-color-hover); + --spectrum-stepper-buttons-border-color-focus: var(--system-spectrum-stepper-buttons-border-color-focus); + --spectrum-stepper-buttons-border-color-keyboard-focus: var(--system-spectrum-stepper-buttons-border-color-keyboard-focus); + --spectrum-stepper-button-border-radius-reset: var(--system-spectrum-stepper-button-border-radius-reset); + --spectrum-stepper-button-border-width: var(--system-spectrum-stepper-button-border-width); + --spectrum-stepper-border-color: var(--system-spectrum-stepper-border-color); + --spectrum-stepper-border-color-hover: var(--system-spectrum-stepper-border-color-hover); + --spectrum-stepper-border-color-focus: var(--system-spectrum-stepper-border-color-focus); + --spectrum-stepper-border-color-focus-hover: var(--system-spectrum-stepper-border-color-focus-hover); + --spectrum-stepper-border-color-keyboard-focus: var(--system-spectrum-stepper-border-color-keyboard-focus); + --spectrum-stepper-border-color-invalid: var(--system-spectrum-stepper-border-color-invalid); + --spectrum-stepper-border-color-focus-invalid: var(--system-spectrum-stepper-border-color-focus-invalid); + --spectrum-stepper-border-color-focus-hover-invalid: var(--system-spectrum-stepper-border-color-focus-hover-invalid); + --spectrum-stepper-border-color-keyboard-focus-invalid: var(--system-spectrum-stepper-border-color-keyboard-focus-invalid); + --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-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); + --spectrum-switch-handle-border-color-down: var(--system-spectrum-switch-handle-border-color-down); + --spectrum-switch-handle-border-color-focus: var(--system-spectrum-switch-handle-border-color-focus); + --spectrum-switch-handle-border-color-selected-default: var(--system-spectrum-switch-handle-border-color-selected-default); + --spectrum-switch-handle-border-color-selected-hover: var(--system-spectrum-switch-handle-border-color-selected-hover); + --spectrum-switch-handle-border-color-selected-down: var(--system-spectrum-switch-handle-border-color-selected-down); + --spectrum-switch-handle-border-color-selected-focus: var(--system-spectrum-switch-handle-border-color-selected-focus); +} + +.spectrum-Tabs { + --spectrum-tabs-font-weight: var(--system-spectrum-tabs-font-weight); +} + +.spectrum-Tag { + --spectrum-tag-border-color: var(--system-spectrum-tag-border-color); + --spectrum-tag-border-color-hover: var(--system-spectrum-tag-border-color-hover); + --spectrum-tag-border-color-active: var(--system-spectrum-tag-border-color-active); + --spectrum-tag-border-color-focus: var(--system-spectrum-tag-border-color-focus); + --spectrum-tag-size-small-corner-radius: var(--system-spectrum-tag-size-small-corner-radius); + --spectrum-tag-size-medium-corner-radius: var(--system-spectrum-tag-size-medium-corner-radius); + --spectrum-tag-size-large-corner-radius: var(--system-spectrum-tag-size-large-corner-radius); + --spectrum-tag-background-color: var(--system-spectrum-tag-background-color); + --spectrum-tag-background-color-hover: var(--system-spectrum-tag-background-color-hover); + --spectrum-tag-background-color-active: var(--system-spectrum-tag-background-color-active); + --spectrum-tag-background-color-focus: var(--system-spectrum-tag-background-color-focus); + --spectrum-tag-content-color: var(--system-spectrum-tag-content-color); + --spectrum-tag-content-color-hover: var(--system-spectrum-tag-content-color-hover); + --spectrum-tag-content-color-active: var(--system-spectrum-tag-content-color-active); + --spectrum-tag-content-color-focus: var(--system-spectrum-tag-content-color-focus); + --spectrum-tag-border-color-selected: var(--system-spectrum-tag-border-color-selected); + --spectrum-tag-border-color-selected-hover: var(--system-spectrum-tag-border-color-selected-hover); + --spectrum-tag-border-color-selected-active: var(--system-spectrum-tag-border-color-selected-active); + --spectrum-tag-border-color-selected-focus: var(--system-spectrum-tag-border-color-selected-focus); + --spectrum-tag-border-color-disabled: var(--system-spectrum-tag-border-color-disabled); + --spectrum-tag-background-color-disabled: var(--system-spectrum-tag-background-color-disabled); + --spectrum-tag-size-small-spacing-inline-start: var(--system-spectrum-tag-size-small-spacing-inline-start); + --spectrum-tag-size-small-label-spacing-inline-end: var(--system-spectrum-tag-size-small-label-spacing-inline-end); + --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--system-spectrum-tag-size-small-clear-button-spacing-inline-end); + --spectrum-tag-size-medium-spacing-inline-start: var(--system-spectrum-tag-size-medium-spacing-inline-start); + --spectrum-tag-size-medium-label-spacing-inline-end: var(--system-spectrum-tag-size-medium-label-spacing-inline-end); + --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--system-spectrum-tag-size-medium-clear-button-spacing-inline-end); + --spectrum-tag-size-large-spacing-inline-start: var(--system-spectrum-tag-size-large-spacing-inline-start); + --spectrum-tag-size-large-label-spacing-inline-end: var(--system-spectrum-tag-size-large-label-spacing-inline-end); + --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--system-spectrum-tag-size-large-clear-button-spacing-inline-end); +} + +.spectrum-Textfield { + --spectrum-textfield-border-color: var(--system-spectrum-textfield-border-color); + --spectrum-textfield-border-color-hover: var(--system-spectrum-textfield-border-color-hover); + --spectrum-textfield-border-color-focus: var(--system-spectrum-textfield-border-color-focus); + --spectrum-textfield-border-color-focus-hover: var(--system-spectrum-textfield-border-color-focus-hover); + --spectrum-textfield-border-color-keyboard-focus: var(--system-spectrum-textfield-border-color-keyboard-focus); + --spectrum-textfield-border-width: var(--system-spectrum-textfield-border-width); +} + +.spectrum-Toast { + --spectrum-toast-background-color-default: var(--system-spectrum-toast-background-color-default); +} + +.spectrum-Tooltip { + --spectrum-tooltip-backgound-color-default-neutral: var(--system-spectrum-tooltip-backgound-color-default-neutral); +} diff --git a/tokens/dist/css/components/bridge/stepper.css b/tokens/dist/css/components/bridge/stepper.css new file mode 100644 index 00000000000..dda58e3adc7 --- /dev/null +++ b/tokens/dist/css/components/bridge/stepper.css @@ -0,0 +1,36 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum-Stepper { + --spectrum-stepper-border-width: var(--system-spectrum-stepper-border-width); + --spectrum-stepper-buttons-border-style: var(--system-spectrum-stepper-buttons-border-style); + --spectrum-stepper-buttons-border-width: var(--system-spectrum-stepper-buttons-border-width); + --spectrum-stepper-buttons-border-color: var(--system-spectrum-stepper-buttons-border-color); + --spectrum-stepper-buttons-background-color: var(--system-spectrum-stepper-buttons-background-color); + --spectrum-stepper-buttons-border-color-hover: var(--system-spectrum-stepper-buttons-border-color-hover); + --spectrum-stepper-buttons-border-color-focus: var(--system-spectrum-stepper-buttons-border-color-focus); + --spectrum-stepper-buttons-border-color-keyboard-focus: var(--system-spectrum-stepper-buttons-border-color-keyboard-focus); + --spectrum-stepper-button-border-radius-reset: var(--system-spectrum-stepper-button-border-radius-reset); + --spectrum-stepper-button-border-width: var(--system-spectrum-stepper-button-border-width); + --spectrum-stepper-border-color: var(--system-spectrum-stepper-border-color); + --spectrum-stepper-border-color-hover: var(--system-spectrum-stepper-border-color-hover); + --spectrum-stepper-border-color-focus: var(--system-spectrum-stepper-border-color-focus); + --spectrum-stepper-border-color-focus-hover: var(--system-spectrum-stepper-border-color-focus-hover); + --spectrum-stepper-border-color-keyboard-focus: var(--system-spectrum-stepper-border-color-keyboard-focus); + --spectrum-stepper-border-color-invalid: var(--system-spectrum-stepper-border-color-invalid); + --spectrum-stepper-border-color-focus-invalid: var(--system-spectrum-stepper-border-color-focus-invalid); + --spectrum-stepper-border-color-focus-hover-invalid: var(--system-spectrum-stepper-border-color-focus-hover-invalid); + --spectrum-stepper-border-color-keyboard-focus-invalid: var(--system-spectrum-stepper-border-color-keyboard-focus-invalid); + --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); +} diff --git a/tokens/dist/css/components/express/index.css b/tokens/dist/css/components/express/index.css new file mode 100644 index 00000000000..ef72328e7df --- /dev/null +++ b/tokens/dist/css/components/express/index.css @@ -0,0 +1,583 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--express { + --system-spectrum-actionbutton-background-color-default: var(--spectrum-gray-200); + --system-spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); + --system-spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); + --system-spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); + --system-spectrum-actionbutton-border-color-default: transparent; + --system-spectrum-actionbutton-border-color-hover: transparent; + --system-spectrum-actionbutton-border-color-down: transparent; + --system-spectrum-actionbutton-border-color-focus: transparent; + --system-spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); + --system-spectrum-actionbutton-border-color-disabled: transparent; + --system-spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color); + --system-spectrum-actionbutton-quiet-background-color-default: transparent; + --system-spectrum-actionbutton-quiet-background-color-hover: var(--spectrum-gray-300); + --system-spectrum-actionbutton-quiet-background-color-down: var(--spectrum-gray-400); + --system-spectrum-actionbutton-quiet-background-color-focus: var(--spectrum-gray-300); + --system-spectrum-actionbutton-quiet-border-color-default: transparent; + --system-spectrum-actionbutton-quiet-border-color-hover: transparent; + --system-spectrum-actionbutton-quiet-border-color-down: transparent; + --system-spectrum-actionbutton-quiet-border-color-focus: transparent; + --system-spectrum-actionbutton-quiet-background-color-disabled: transparent; + --system-spectrum-actionbutton-quiet-border-color-disabled: transparent; + --system-spectrum-actionbutton-selected-border-color-default: transparent; + --system-spectrum-actionbutton-selected-border-color-hover: transparent; + --system-spectrum-actionbutton-selected-border-color-down: transparent; + --system-spectrum-actionbutton-selected-border-color-focus: transparent; + --system-spectrum-actionbutton-selected-background-color-disabled: var(--spectrum-disabled-background-color); + --system-spectrum-actionbutton-selected-border-color-disabled: transparent; + --system-spectrum-actionbutton-staticblack-quiet-border-color-default: transparent; + --system-spectrum-actionbutton-staticwhite-quiet-border-color-default: transparent; + --system-spectrum-actionbutton-staticblack-quiet-border-color-hover: transparent; + --system-spectrum-actionbutton-staticwhite-quiet-border-color-hover: transparent; + --system-spectrum-actionbutton-staticblack-quiet-border-color-down: transparent; + --system-spectrum-actionbutton-staticwhite-quiet-border-color-down: transparent; + --system-spectrum-actionbutton-staticblack-quiet-border-color-focus: transparent; + --system-spectrum-actionbutton-staticwhite-quiet-border-color-focus: transparent; + --system-spectrum-actionbutton-staticblack-quiet-border-color-disabled: transparent; + --system-spectrum-actionbutton-staticwhite-quiet-border-color-disabled: transparent; + --system-spectrum-actionbutton-staticblack-background-color-default: var(--spectrum-transparent-black-200); + --system-spectrum-actionbutton-staticblack-background-color-hover: var(--spectrum-transparent-black-300); + --system-spectrum-actionbutton-staticblack-background-color-down: var(--spectrum-transparent-black-400); + --system-spectrum-actionbutton-staticblack-background-color-focus: var(--spectrum-transparent-black-300); + --system-spectrum-actionbutton-staticblack-border-color-default: transparent; + --system-spectrum-actionbutton-staticblack-border-color-hover: transparent; + --system-spectrum-actionbutton-staticblack-border-color-down: transparent; + --system-spectrum-actionbutton-staticblack-border-color-focus: transparent; + --system-spectrum-actionbutton-staticblack-content-color-default: var(--spectrum-black); + --system-spectrum-actionbutton-staticblack-content-color-hover: var(--spectrum-black); + --system-spectrum-actionbutton-staticblack-content-color-down: var(--spectrum-black); + --system-spectrum-actionbutton-staticblack-content-color-focus: var(--spectrum-black); + --system-spectrum-actionbutton-staticblack-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-spectrum-actionbutton-staticblack-background-color-disabled: transparent; + --system-spectrum-actionbutton-staticblack-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --system-spectrum-actionbutton-staticblack-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-default: var(--spectrum-transparent-black-800); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-hover: var(--spectrum-transparent-black-900); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-down: var(--spectrum-transparent-black-900); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-focus: var(--spectrum-transparent-black-900); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-default: var(--spectrum-white); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-hover: var(--spectrum-white); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-down: var(--spectrum-white); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-focus: var(--spectrum-white); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-border-color-disabled: transparent; + --system-spectrum-actionbutton-staticwhite-background-color-default: var(--spectrum-transparent-white-200); + --system-spectrum-actionbutton-staticwhite-background-color-hover: var(--spectrum-transparent-white-300); + --system-spectrum-actionbutton-staticwhite-background-color-down: var(--spectrum-transparent-white-400); + --system-spectrum-actionbutton-staticwhite-background-color-focus: var(--spectrum-transparent-white-300); + --system-spectrum-actionbutton-staticwhite-border-color-default: transparent; + --system-spectrum-actionbutton-staticwhite-border-color-hover: transparent; + --system-spectrum-actionbutton-staticwhite-border-color-down: transparent; + --system-spectrum-actionbutton-staticwhite-border-color-focus: transparent; + --system-spectrum-actionbutton-staticwhite-content-color-default: var(--spectrum-white); + --system-spectrum-actionbutton-staticwhite-content-color-hover: var(--spectrum-white); + --system-spectrum-actionbutton-staticwhite-content-color-down: var(--spectrum-white); + --system-spectrum-actionbutton-staticwhite-content-color-focus: var(--spectrum-white); + --system-spectrum-actionbutton-staticwhite-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-spectrum-actionbutton-staticwhite-background-color-disabled: transparent; + --system-spectrum-actionbutton-staticwhite-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --system-spectrum-actionbutton-staticwhite-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-default: var(--spectrum-transparent-white-800); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-hover: var(--spectrum-transparent-white-900); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-down: var(--spectrum-transparent-white-900); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-focus: var(--spectrum-transparent-white-900); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-default: var(--spectrum-black); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-hover: var(--spectrum-black); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-down: var(--spectrum-black); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-focus: var(--spectrum-black); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-border-color-disabled: transparent; + --system-spectrum-actiongroup-gap-size-compact: var(--spectrum-spacing-50); + --system-spectrum-actiongroup-horizontal-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); + --system-spectrum-actiongroup-vertical-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); + --system-spectrum-alertbanner-spectrum-alert-banner-netural-background: var(--spectrum-neutral-background-color-default); + --system-spectrum-assetcard-overlay-background-color-rgb: 109, 115, 246; + --system-spectrum-assetcard-overlay-background-color-opacity: 0.2; + --system-spectrum-assetcard-overlay-background-color: rgba(var(--system-spectrum-assetcard-overlay-background-color-rgb), var(--system-spectrum-assetcard-overlay-background-color-opacity)); + --system-spectrum-button-background-color-default: var(--spectrum-gray-200); + --system-spectrum-button-background-color-hover: var(--spectrum-gray-300); + --system-spectrum-button-background-color-down: var(--spectrum-gray-400); + --system-spectrum-button-background-color-focus: var(--spectrum-gray-300); + --system-spectrum-button-border-color-default: transparent; + --system-spectrum-button-border-color-hover: transparent; + --system-spectrum-button-border-color-down: transparent; + --system-spectrum-button-border-color-focus: transparent; + --system-spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); + --system-spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); + --system-spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); + --system-spectrum-button-border-color-disabled: transparent; + --system-spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + --system-spectrum-button-accent-background-color-default: var(--spectrum-accent-background-color-default); + --system-spectrum-button-accent-background-color-hover: var(--spectrum-accent-background-color-hover); + --system-spectrum-button-accent-background-color-down: var(--spectrum-accent-background-color-down); + --system-spectrum-button-accent-background-color-focus: var(--spectrum-accent-background-color-key-focus); + --system-spectrum-button-accent-border-color-default: transparent; + --system-spectrum-button-accent-border-color-hover: transparent; + --system-spectrum-button-accent-border-color-down: transparent; + --system-spectrum-button-accent-border-color-focus: transparent; + --system-spectrum-button-accent-content-color-default: var(--spectrum-white); + --system-spectrum-button-accent-content-color-hover: var(--spectrum-white); + --system-spectrum-button-accent-content-color-down: var(--spectrum-white); + --system-spectrum-button-accent-content-color-focus: var(--spectrum-white); + --system-spectrum-button-accent-background-color-disabled: var(--spectrum-disabled-background-color); + --system-spectrum-button-accent-border-color-disabled: transparent; + --system-spectrum-button-accent-content-color-disabled: var(--spectrum-disabled-content-color); + --system-spectrum-button-accent-outline-background-color-default: transparent; + --system-spectrum-button-accent-outline-background-color-hover: var(--spectrum-accent-color-200); + --system-spectrum-button-accent-outline-background-color-down: var(--spectrum-accent-color-300); + --system-spectrum-button-accent-outline-background-color-focus: var(--spectrum-accent-color-200); + --system-spectrum-button-accent-outline-border-color-default: var(--spectrum-accent-color-900); + --system-spectrum-button-accent-outline-border-color-hover: var(--spectrum-accent-color-1000); + --system-spectrum-button-accent-outline-border-color-down: var(--spectrum-accent-color-1100); + --system-spectrum-button-accent-outline-border-color-focus: var(--spectrum-accent-color-1000); + --system-spectrum-button-accent-outline-content-color-default: var(--spectrum-accent-content-color-default); + --system-spectrum-button-accent-outline-content-color-hover: var(--spectrum-accent-content-color-hover); + --system-spectrum-button-accent-outline-content-color-down: var(--spectrum-accent-content-color-down); + --system-spectrum-button-accent-outline-content-color-focus: var(--spectrum-accent-content-color-key-focus); + --system-spectrum-button-accent-outline-background-color-disabled: transparent; + --system-spectrum-button-accent-outline-border-color-disabled: var(--spectrum-disabled-border-color); + --system-spectrum-button-accent-outline-content-color-disabled: var(--spectrum-disabled-content-color); + --system-spectrum-button-negative-background-color-default: var(--spectrum-negative-background-color-default); + --system-spectrum-button-negative-background-color-hover: var(--spectrum-negative-background-color-hover); + --system-spectrum-button-negative-background-color-down: var(--spectrum-negative-background-color-down); + --system-spectrum-button-negative-background-color-focus: var(--spectrum-negative-background-color-key-focus); + --system-spectrum-button-negative-border-color-default: transparent; + --system-spectrum-button-negative-border-color-hover: transparent; + --system-spectrum-button-negative-border-color-down: transparent; + --system-spectrum-button-negative-border-color-focus: transparent; + --system-spectrum-button-negative-content-color-default: var(--spectrum-white); + --system-spectrum-button-negative-content-color-hover: var(--spectrum-white); + --system-spectrum-button-negative-content-color-down: var(--spectrum-white); + --system-spectrum-button-negative-content-color-focus: var(--spectrum-white); + --system-spectrum-button-negative-background-color-disabled: var(--spectrum-disabled-background-color); + --system-spectrum-button-negative-border-color-disabled: transparent; + --system-spectrum-button-negative-content-color-disabled: var(--spectrum-disabled-content-color); + --system-spectrum-button-negative-outline-background-color-default: transparent; + --system-spectrum-button-negative-outline-background-color-hover: var(--spectrum-negative-color-200); + --system-spectrum-button-negative-outline-background-color-down: var(--spectrum-negative-color-300); + --system-spectrum-button-negative-outline-background-color-focus: var(--spectrum-negative-color-200); + --system-spectrum-button-negative-outline-border-color-default: var(--spectrum-negative-color-900); + --system-spectrum-button-negative-outline-border-color-hover: var(--spectrum-negative-color-1000); + --system-spectrum-button-negative-outline-border-color-down: var(--spectrum-negative-color-1100); + --system-spectrum-button-negative-outline-border-color-focus: var(--spectrum-negative-color-1000); + --system-spectrum-button-negative-outline-content-color-default: var(--spectrum-negative-content-color-default); + --system-spectrum-button-negative-outline-content-color-hover: var(--spectrum-negative-content-color-hover); + --system-spectrum-button-negative-outline-content-color-down: var(--spectrum-negative-content-color-down); + --system-spectrum-button-negative-outline-content-color-focus: var(--spectrum-negative-content-color-key-focus); + --system-spectrum-button-negative-outline-background-color-disabled: transparent; + --system-spectrum-button-negative-outline-border-color-disabled: var(--spectrum-disabled-border-color); + --system-spectrum-button-negative-outline-content-color-disabled: var(--spectrum-disabled-content-color); + --system-spectrum-button-primary-background-color-default: var(--spectrum-neutral-background-color-default); + --system-spectrum-button-primary-background-color-hover: var(--spectrum-neutral-background-color-hover); + --system-spectrum-button-primary-background-color-down: var(--spectrum-neutral-background-color-down); + --system-spectrum-button-primary-background-color-focus: var(--spectrum-neutral-background-color-key-focus); + --system-spectrum-button-primary-border-color-default: transparent; + --system-spectrum-button-primary-border-color-hover: transparent; + --system-spectrum-button-primary-border-color-down: transparent; + --system-spectrum-button-primary-border-color-focus: transparent; + --system-spectrum-button-primary-content-color-default: var(--spectrum-white); + --system-spectrum-button-primary-content-color-hover: var(--spectrum-white); + --system-spectrum-button-primary-content-color-down: var(--spectrum-white); + --system-spectrum-button-primary-content-color-focus: var(--spectrum-white); + --system-spectrum-button-primary-background-color-disabled: var(--spectrum-disabled-background-color); + --system-spectrum-button-primary-border-color-disabled: transparent; + --system-spectrum-button-primary-content-color-disabled: var(--spectrum-disabled-content-color); + --system-spectrum-button-primary-outline-background-color-default: transparent; + --system-spectrum-button-primary-outline-background-color-hover: var(--spectrum-gray-300); + --system-spectrum-button-primary-outline-background-color-down: var(--spectrum-gray-400); + --system-spectrum-button-primary-outline-background-color-focus: var(--spectrum-gray-300); + --system-spectrum-button-primary-outline-border-color-default: var(--spectrum-gray-800); + --system-spectrum-button-primary-outline-border-color-hover: var(--spectrum-gray-900); + --system-spectrum-button-primary-outline-border-color-down: var(--spectrum-gray-900); + --system-spectrum-button-primary-outline-border-color-focus: var(--spectrum-gray-900); + --system-spectrum-button-primary-outline-content-color-default: var(--spectrum-neutral-content-color-default); + --system-spectrum-button-primary-outline-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-spectrum-button-primary-outline-content-color-down: var(--spectrum-neutral-content-color-down); + --system-spectrum-button-primary-outline-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-spectrum-button-primary-outline-background-color-disabled: transparent; + --system-spectrum-button-primary-outline-border-color-disabled: var(--spectrum-disabled-border-color); + --system-spectrum-button-primary-outline-content-color-disabled: var(--spectrum-disabled-content-color); + --system-spectrum-button-secondary-background-color-default: var(--spectrum-gray-200); + --system-spectrum-button-secondary-background-color-hover: var(--spectrum-gray-300); + --system-spectrum-button-secondary-background-color-down: var(--spectrum-gray-400); + --system-spectrum-button-secondary-background-color-focus: var(--spectrum-gray-300); + --system-spectrum-button-secondary-border-color-default: transparent; + --system-spectrum-button-secondary-border-color-hover: transparent; + --system-spectrum-button-secondary-border-color-down: transparent; + --system-spectrum-button-secondary-border-color-focus: transparent; + --system-spectrum-button-secondary-content-color-default: var(--spectrum-neutral-content-color-default); + --system-spectrum-button-secondary-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-spectrum-button-secondary-content-color-down: var(--spectrum-neutral-content-color-down); + --system-spectrum-button-secondary-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-spectrum-button-secondary-background-color-disabled: var(--spectrum-disabled-background-color); + --system-spectrum-button-secondary-border-color-disabled: transparent; + --system-spectrum-button-secondary-content-color-disabled: var(--spectrum-disabled-content-color); + --system-spectrum-button-secondary-outline-background-color-default: transparent; + --system-spectrum-button-secondary-outline-background-color-hover: var(--spectrum-gray-300); + --system-spectrum-button-secondary-outline-background-color-down: var(--spectrum-gray-400); + --system-spectrum-button-secondary-outline-background-color-focus: var(--spectrum-gray-300); + --system-spectrum-button-secondary-outline-border-color-default: var(--spectrum-gray-300); + --system-spectrum-button-secondary-outline-border-color-hover: var(--spectrum-gray-400); + --system-spectrum-button-secondary-outline-border-color-down: var(--spectrum-gray-500); + --system-spectrum-button-secondary-outline-border-color-focus: var(--spectrum-gray-400); + --system-spectrum-button-secondary-outline-content-color-default: var(--spectrum-neutral-content-color-default); + --system-spectrum-button-secondary-outline-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-spectrum-button-secondary-outline-content-color-down: var(--spectrum-neutral-content-color-down); + --system-spectrum-button-secondary-outline-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-spectrum-button-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-secondary-outline-border-color-disabled: var(--spectrum-disabled-border-color); + --system-spectrum-button-secondary-outline-content-color-disabled: var(--spectrum-disabled-content-color); + --system-spectrum-button-quiet-background-color-default: transparent; + --system-spectrum-button-quiet-background-color-hover: var(--spectrum-gray-200); + --system-spectrum-button-quiet-background-color-down: var(--spectrum-gray-300); + --system-spectrum-button-quiet-background-color-focus: var(--spectrum-gray-200); + --system-spectrum-button-quiet-border-color-default: transparent; + --system-spectrum-button-quiet-border-color-hover: transparent; + --system-spectrum-button-quiet-border-color-down: transparent; + --system-spectrum-button-quiet-border-color-focus: transparent; + --system-spectrum-button-quiet-background-color-disabled: transparent; + --system-spectrum-button-quiet-border-color-disabled: transparent; + --system-spectrum-button-selected-background-color-default: var(--spectrum-neutral-background-color-default); + --system-spectrum-button-selected-background-color-hover: var(--spectrum-neutral-background-color-hover); + --system-spectrum-button-selected-background-color-down: var(--spectrum-neutral-background-color-down); + --system-spectrum-button-selected-background-color-focus: var(--spectrum-neutral-background-color-key-focus); + --system-spectrum-button-selected-border-color-default: transparent; + --system-spectrum-button-selected-border-color-hover: transparent; + --system-spectrum-button-selected-border-color-down: transparent; + --system-spectrum-button-selected-border-color-focus: transparent; + --system-spectrum-button-selected-content-color-default: var(--spectrum-white); + --system-spectrum-button-selected-content-color-hover: var(--spectrum-white); + --system-spectrum-button-selected-content-color-down: var(--spectrum-white); + --system-spectrum-button-selected-content-color-focus: var(--spectrum-white); + --system-spectrum-button-selected-background-color-disabled: var(--spectrum-disabled-background-color); + --system-spectrum-button-selected-border-color-disabled: transparent; + --system-spectrum-button-selected-emphasized-background-color-default: var(--spectrum-accent-background-color-default); + --system-spectrum-button-selected-emphasized-background-color-hover: var(--spectrum-accent-background-color-hover); + --system-spectrum-button-selected-emphasized-background-color-down: var(--spectrum-accent-background-color-down); + --system-spectrum-button-selected-emphasized-background-color-focus: var(--spectrum-accent-background-color-key-focus); + --system-spectrum-button-staticblack-quiet-border-color-default: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-default: transparent; + --system-spectrum-button-staticblack-quiet-border-color-hover: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-hover: transparent; + --system-spectrum-button-staticblack-quiet-border-color-down: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-down: transparent; + --system-spectrum-button-staticblack-quiet-border-color-focus: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-focus: transparent; + --system-spectrum-button-staticblack-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-background-color-default: var(--spectrum-transparent-white-800); + --system-spectrum-button-staticwhite-background-color-hover: var(--spectrum-transparent-white-900); + --system-spectrum-button-staticwhite-background-color-down: var(--spectrum-transparent-white-900); + --system-spectrum-button-staticwhite-background-color-focus: var(--spectrum-transparent-white-900); + --system-spectrum-button-staticwhite-border-color-default: transparent; + --system-spectrum-button-staticwhite-border-color-hover: transparent; + --system-spectrum-button-staticwhite-border-color-down: transparent; + --system-spectrum-button-staticwhite-border-color-focus: transparent; + --system-spectrum-button-staticwhite-content-color-default: var(--spectrum-black); + --system-spectrum-button-staticwhite-content-color-hover: var(--spectrum-black); + --system-spectrum-button-staticwhite-content-color-down: var(--spectrum-black); + --system-spectrum-button-staticwhite-content-color-focus: var(--spectrum-black); + --system-spectrum-button-staticwhite-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-spectrum-button-staticwhite-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --system-spectrum-button-staticwhite-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-spectrum-button-staticwhite-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-outline-background-color-hover: var(--spectrum-transparent-white-300); + --system-spectrum-button-staticwhite-outline-background-color-down: var(--spectrum-transparent-white-400); + --system-spectrum-button-staticwhite-outline-background-color-focus: var(--spectrum-transparent-white-300); + --system-spectrum-button-staticwhite-outline-border-color-default: var(--spectrum-transparent-white-800); + --system-spectrum-button-staticwhite-outline-border-color-hover: var(--spectrum-transparent-white-900); + --system-spectrum-button-staticwhite-outline-border-color-down: var(--spectrum-transparent-white-900); + --system-spectrum-button-staticwhite-outline-border-color-focus: var(--spectrum-transparent-white-900); + --system-spectrum-button-staticwhite-outline-content-color-default: var(--spectrum-white); + --system-spectrum-button-staticwhite-outline-content-color-hover: var(--spectrum-white); + --system-spectrum-button-staticwhite-outline-content-color-down: var(--spectrum-white); + --system-spectrum-button-staticwhite-outline-content-color-focus: var(--spectrum-white); + --system-spectrum-button-staticwhite-outline-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-spectrum-button-staticwhite-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-outline-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --system-spectrum-button-staticwhite-outline-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-spectrum-button-staticwhite-selected-background-color-default: var(--spectrum-transparent-white-800); + --system-spectrum-button-staticwhite-selected-background-color-hover: var(--spectrum-transparent-white-900); + --system-spectrum-button-staticwhite-selected-background-color-down: var(--spectrum-transparent-white-900); + --system-spectrum-button-staticwhite-selected-background-color-focus: var(--spectrum-transparent-white-900); + --system-spectrum-button-staticwhite-selected-content-color-default: var(--spectrum-black); + --system-spectrum-button-staticwhite-selected-content-color-hover: var(--spectrum-black); + --system-spectrum-button-staticwhite-selected-content-color-down: var(--spectrum-black); + --system-spectrum-button-staticwhite-selected-content-color-focus: var(--spectrum-black); + --system-spectrum-button-staticwhite-selected-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --system-spectrum-button-staticwhite-selected-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-background-color-default: var(--spectrum-transparent-white-200); + --system-spectrum-button-staticwhite-secondary-background-color-hover: var(--spectrum-transparent-white-300); + --system-spectrum-button-staticwhite-secondary-background-color-down: var(--spectrum-transparent-white-400); + --system-spectrum-button-staticwhite-secondary-background-color-focus: var(--spectrum-transparent-white-300); + --system-spectrum-button-staticwhite-secondary-border-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-hover: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-down: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-focus: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-default: var(--spectrum-white); + --system-spectrum-button-staticwhite-secondary-content-color-hover: var(--spectrum-white); + --system-spectrum-button-staticwhite-secondary-content-color-down: var(--spectrum-white); + --system-spectrum-button-staticwhite-secondary-content-color-focus: var(--spectrum-white); + --system-spectrum-button-staticwhite-secondary-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-spectrum-button-staticwhite-secondary-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --system-spectrum-button-staticwhite-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-spectrum-button-staticwhite-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-outline-background-color-hover: var(--spectrum-transparent-white-300); + --system-spectrum-button-staticwhite-secondary-outline-background-color-down: var(--spectrum-transparent-white-400); + --system-spectrum-button-staticwhite-secondary-outline-background-color-focus: var(--spectrum-transparent-white-300); + --system-spectrum-button-staticwhite-secondary-outline-border-color-default: var(--spectrum-transparent-white-300); + --system-spectrum-button-staticwhite-secondary-outline-border-color-hover: var(--spectrum-transparent-white-400); + --system-spectrum-button-staticwhite-secondary-outline-border-color-down: var(--spectrum-transparent-white-500); + --system-spectrum-button-staticwhite-secondary-outline-border-color-focus: var(--spectrum-transparent-white-400); + --system-spectrum-button-staticwhite-secondary-outline-content-color-default: var(--spectrum-white); + --system-spectrum-button-staticwhite-secondary-outline-content-color-hover: var(--spectrum-white); + --system-spectrum-button-staticwhite-secondary-outline-content-color-down: var(--spectrum-white); + --system-spectrum-button-staticwhite-secondary-outline-content-color-focus: var(--spectrum-white); + --system-spectrum-button-staticwhite-secondary-outline-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-spectrum-button-staticwhite-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-outline-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --system-spectrum-button-staticwhite-secondary-outline-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-spectrum-button-staticblack-background-color-default: var(--spectrum-transparent-black-800); + --system-spectrum-button-staticblack-background-color-hover: var(--spectrum-transparent-black-900); + --system-spectrum-button-staticblack-background-color-down: var(--spectrum-transparent-black-900); + --system-spectrum-button-staticblack-background-color-focus: var(--spectrum-transparent-black-900); + --system-spectrum-button-staticblack-border-color-default: transparent; + --system-spectrum-button-staticblack-border-color-hover: transparent; + --system-spectrum-button-staticblack-border-color-down: transparent; + --system-spectrum-button-staticblack-border-color-focus: transparent; + --system-spectrum-button-staticblack-content-color-default: var(--spectrum-white); + --system-spectrum-button-staticblack-content-color-hover: var(--spectrum-white); + --system-spectrum-button-staticblack-content-color-down: var(--spectrum-white); + --system-spectrum-button-staticblack-content-color-focus: var(--spectrum-white); + --system-spectrum-button-staticblack-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-spectrum-button-staticblack-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --system-spectrum-button-staticblack-border-color-disabled: transparent; + --system-spectrum-button-staticblack-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-spectrum-button-staticblack-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-outline-background-color-hover: var(--spectrum-transparent-black-300); + --system-spectrum-button-staticblack-outline-background-color-down: var(--spectrum-transparent-black-400); + --system-spectrum-button-staticblack-outline-background-color-focus: var(--spectrum-transparent-black-300); + --system-spectrum-button-staticblack-outline-border-color-default: var(--spectrum-transparent-black-400); + --system-spectrum-button-staticblack-outline-border-color-hover: var(--spectrum-transparent-black-500); + --system-spectrum-button-staticblack-outline-border-color-down: var(--spectrum-transparent-black-600); + --system-spectrum-button-staticblack-outline-border-color-focus: var(--spectrum-transparent-black-500); + --system-spectrum-button-staticblack-outline-content-color-default: var(--spectrum-black); + --system-spectrum-button-staticblack-outline-content-color-hover: var(--spectrum-black); + --system-spectrum-button-staticblack-outline-content-color-down: var(--spectrum-black); + --system-spectrum-button-staticblack-outline-content-color-focus: var(--spectrum-black); + --system-spectrum-button-staticblack-outline-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-spectrum-button-staticblack-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-outline-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --system-spectrum-button-staticblack-outline-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-spectrum-button-staticblack-secondary-background-color-default: var(--spectrum-transparent-black-200); + --system-spectrum-button-staticblack-secondary-background-color-hover: var(--spectrum-transparent-black-300); + --system-spectrum-button-staticblack-secondary-background-color-down: var(--spectrum-transparent-black-400); + --system-spectrum-button-staticblack-secondary-background-color-focus: var(--spectrum-transparent-black-300); + --system-spectrum-button-staticblack-secondary-border-color-default: transparent; + --system-spectrum-button-staticblack-secondary-border-color-hover: transparent; + --system-spectrum-button-staticblack-secondary-border-color-down: transparent; + --system-spectrum-button-staticblack-secondary-border-color-focus: transparent; + --system-spectrum-button-staticblack-secondary-content-color-default: var(--spectrum-black); + --system-spectrum-button-staticblack-secondary-content-color-hover: var(--spectrum-black); + --system-spectrum-button-staticblack-secondary-content-color-down: var(--spectrum-black); + --system-spectrum-button-staticblack-secondary-content-color-focus: var(--spectrum-black); + --system-spectrum-button-staticblack-secondary-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-spectrum-button-staticblack-secondary-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --system-spectrum-button-staticblack-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-spectrum-button-staticblack-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-secondary-outline-background-color-hover: var(--spectrum-transparent-black-300); + --system-spectrum-button-staticblack-secondary-outline-background-color-down: var(--spectrum-transparent-black-400); + --system-spectrum-button-staticblack-secondary-outline-background-color-focus: var(--spectrum-transparent-black-300); + --system-spectrum-button-staticblack-secondary-outline-border-color-default: var(--spectrum-transparent-black-300); + --system-spectrum-button-staticblack-secondary-outline-border-color-hover: var(--spectrum-transparent-black-400); + --system-spectrum-button-staticblack-secondary-outline-border-color-down: var(--spectrum-transparent-black-500); + --system-spectrum-button-staticblack-secondary-outline-border-color-focus: var(--spectrum-transparent-black-400); + --system-spectrum-button-staticblack-secondary-outline-content-color-default: var(--spectrum-black); + --system-spectrum-button-staticblack-secondary-outline-content-color-hover: var(--spectrum-black); + --system-spectrum-button-staticblack-secondary-outline-content-color-down: var(--spectrum-black); + --system-spectrum-button-staticblack-secondary-outline-content-color-focus: var(--spectrum-black); + --system-spectrum-button-staticblack-secondary-outline-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-spectrum-button-staticblack-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-outline-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --system-spectrum-button-staticblack-secondary-outline-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-spectrum-checkbox-control-color-default: var(--spectrum-gray-800); + --system-spectrum-checkbox-control-color-hover: var(--spectrum-gray-900); + --system-spectrum-checkbox-control-color-down: var(--spectrum-gray-900); + --system-spectrum-checkbox-control-color-focus: var(--spectrum-gray-900); + --system-spectrum-clearbutton-spectrum-clear-button-background-color: var(--spectrum-gray-200); + --system-spectrum-clearbutton-spectrum-clear-button-background-color-hover: var(--spectrum-gray-300); + --system-spectrum-clearbutton-spectrum-clear-button-background-color-down: var(--spectrum-gray-400); + --system-spectrum-clearbutton-spectrum-clear-button-background-color-key-focus: var(--spectrum-gray-300); + --system-spectrum-closebutton-background-color-default: transparent; + --system-spectrum-closebutton-background-color-hover: var(--spectrum-gray-300); + --system-spectrum-closebutton-background-color-down: var(--spectrum-gray-400); + --system-spectrum-closebutton-background-color-focus: var(--spectrum-gray-300); + --system-spectrum-combobox-border-color-default: var(--spectrum-gray-400); + --system-spectrum-combobox-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-combobox-border-color-focus: var(--spectrum-gray-900); + --system-spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-800); + --system-spectrum-combobox-border-color-key-focus: var(--spectrum-gray-900); + --system-spectrum-datepicker-initial-height: var(--spectrum-component-height-75); + --system-spectrum-infieldbutton-spectrum-infield-button-border-width: 0; + --system-spectrum-infieldbutton-spectrum-infield-button-border-color: transparent; + --system-spectrum-infieldbutton-spectrum-infield-button-border-radius: var(--spectrum-corner-radius-75); + --system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset: var(--spectrum-corner-radius-75); + --system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-corner-radius-75); + --system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-corner-radius-75); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color: var(--spectrum-gray-200); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover: var(--spectrum-gray-300); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-down: var(--spectrum-gray-400); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-300); + --system-spectrum-picker-background-color-default: var(--spectrum-gray-200); + --system-spectrum-picker-background-color-default-open: var(--spectrum-gray-300); + --system-spectrum-picker-background-color-active: var(--spectrum-gray-400); + --system-spectrum-picker-background-color-hover: var(--spectrum-gray-300); + --system-spectrum-picker-background-color-hover-open: var(--spectrum-gray-300); + --system-spectrum-picker-background-color-key-focus: var(--spectrum-gray-300); + --system-spectrum-picker-border-color-default: transparent; + --system-spectrum-picker-border-color-default-open: transparent; + --system-spectrum-picker-border-color-hover: transparent; + --system-spectrum-picker-border-color-hover-open: transparent; + --system-spectrum-picker-border-color-active: transparent; + --system-spectrum-picker-border-color-key-focus: transparent; + --system-spectrum-picker-border-width: 0px; + --system-spectrum-pickerbutton-spectrum-picker-button-background-color: var(--spectrum-gray-200); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var(--spectrum-gray-300); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var(--spectrum-gray-400); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-300); + --system-spectrum-pickerbutton-spectrum-picker-button-border-color: none; + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75); + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); + --system-spectrum-pickerbutton-spectrum-picker-button-border-width: 0px; + --system-spectrum-popover-border-width: 0; + --system-spectrum-radio-button-border-color-default: var(--spectrum-gray-800); + --system-spectrum-radio-button-border-color-hover: var(--spectrum-gray-900); + --system-spectrum-radio-button-border-color-down: var(--spectrum-gray-900); + --system-spectrum-radio-button-border-color-focus: var(--spectrum-gray-900); + --system-spectrum-radio-emphasized-button-checked-border-color-default: var(--spectrum-accent-color-900); + --system-spectrum-radio-emphasized-button-checked-border-color-hover: var(--spectrum-accent-color-1000); + --system-spectrum-radio-emphasized-button-checked-border-color-down: var(--spectrum-accent-color-1100); + --system-spectrum-radio-emphasized-button-checked-border-color-focus: var(--spectrum-accent-color-1000); + --system-spectrum-rating-icon-color-default: var(--spectrum-neutral-content-color-default); + --system-spectrum-rating-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-spectrum-rating-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-spectrum-search-border-radius: calc(var(--spectrum-component-height-100) / 2); + --system-spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100); + --system-spectrum-search-border-color-default: var(--spectrum-gray-400); + --system-spectrum-search-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-search-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-spectrum-search-border-color-key-focus: var(--spectrum-gray-900); + --system-spectrum-search-sizes-border-radius: calc(var(--spectrum-component-height-75) / 2); + --system-spectrum-search-sizes-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-75); + --system-spectrum-search-sizem-border-radius: calc(var(--spectrum-component-height-100) / 2); + --system-spectrum-search-sizem-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100); + --system-spectrum-search-sizel-border-radius: calc(var(--spectrum-component-height-200) / 2); + --system-spectrum-search-sizel-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200); + --system-spectrum-search-sizexl-border-radius: calc(var(--spectrum-component-height-300) / 2); + --system-spectrum-search-sizexl-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300); + --system-spectrum-slider-track-color: var(--spectrum-gray-200); + --system-spectrum-slider-track-fill-color: var(--spectrum-gray-600); + --system-spectrum-slider-ramp-track-color: var(--spectrum-gray-300); + --system-spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200); + --system-spectrum-slider-handle-background-color: var(--spectrum-gray-50); + --system-spectrum-slider-handle-background-color-disabled: var(--spectrum-gray-50); + --system-spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-50); + --system-spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-50); + --system-spectrum-slider-handle-border-color: var(--spectrum-gray-800); + --system-spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-50); + --system-spectrum-slider-tick-mark-color: var(--spectrum-gray-200); + --system-spectrum-slider-handle-border-color-hover: var(--spectrum-gray-900); + --system-spectrum-slider-handle-border-color-down: var(--spectrum-gray-900); + --system-spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-900); + --system-spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); + --system-spectrum-stepper-border-width: var(--spectrum-border-width-200); + --system-spectrum-stepper-buttons-border-style: solid; + --system-spectrum-stepper-buttons-border-width: var(--spectrum-border-width-200); + --system-spectrum-stepper-buttons-border-color: transparent; + --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); + --system-spectrum-stepper-buttons-border-color-hover: transparent; + --system-spectrum-stepper-buttons-border-color-focus: transparent; + --system-spectrum-stepper-buttons-border-color-keyboard-focus: transparent; + --system-spectrum-stepper-button-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); + --system-spectrum-stepper-button-border-width: 0; + --system-spectrum-stepper-border-color: var(--spectrum-gray-400); + --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-900); + --system-spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-spectrum-stepper-border-color-invalid: transparent; + --system-spectrum-stepper-border-color-focus-invalid: transparent; + --system-spectrum-stepper-border-color-focus-hover-invalid: transparent; + --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-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); + --system-spectrum-switch-handle-border-color-focus: var(--spectrum-gray-900); + --system-spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-800); + --system-spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-900); + --system-spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --system-spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-900); + --system-spectrum-tabs-font-weight: var(--spectrum-bold-font-weight); + --system-spectrum-tag-border-color: var(--spectrum-gray-300); + --system-spectrum-tag-border-color-hover: var(--spectrum-gray-400); + --system-spectrum-tag-border-color-active: var(--spectrum-gray-500); + --system-spectrum-tag-border-color-focus: var(--spectrum-gray-400); + --system-spectrum-tag-size-small-corner-radius: var(--spectrum-component-height-75); + --system-spectrum-tag-size-medium-corner-radius: var(--spectrum-component-height-100); + --system-spectrum-tag-size-large-corner-radius: var(--spectrum-component-height-200); + --system-spectrum-tag-background-color: transparent; + --system-spectrum-tag-background-color-hover: var(--spectrum-gray-300); + --system-spectrum-tag-background-color-active: var(--spectrum-gray-400); + --system-spectrum-tag-background-color-focus: var(--spectrum-gray-300); + --system-spectrum-tag-content-color: var(--spectrum-neutral-content-color-default); + --system-spectrum-tag-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-spectrum-tag-content-color-active: var(--spectrum-neutral-content-color-down); + --system-spectrum-tag-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-spectrum-tag-border-color-selected: var(--spectrum-neutral-background-color-default); + --system-spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-background-color-hover); + --system-spectrum-tag-border-color-selected-active: var(--spectrum-neutral-background-color-down); + --system-spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-background-color-key-focus); + --system-spectrum-tag-border-color-disabled: var(--spectrum-disabled-border-color); + --system-spectrum-tag-background-color-disabled: transparent; + --system-spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-75); + --system-spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-75); + --system-spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-75); + --system-spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-100); + --system-spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-100); + --system-spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-100); + --system-spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-200); + --system-spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-200); + --system-spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-200); + --system-spectrum-textfield-border-color: var(--spectrum-gray-400); + --system-spectrum-textfield-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-textfield-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900); + --system-spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-spectrum-textfield-border-width: var(--spectrum-border-width-200); + --system-spectrum-toast-background-color-default: var(--spectrum-neutral-background-color-default); + --system-spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-background-color-default); +} diff --git a/tokens/dist/css/components/express/stepper.css b/tokens/dist/css/components/express/stepper.css new file mode 100644 index 00000000000..ca66bb608e8 --- /dev/null +++ b/tokens/dist/css/components/express/stepper.css @@ -0,0 +1,36 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--express { + --system-spectrum-stepper-border-width: var(--spectrum-border-width-200); + --system-spectrum-stepper-buttons-border-style: solid; + --system-spectrum-stepper-buttons-border-width: var(--spectrum-border-width-200); + --system-spectrum-stepper-buttons-border-color: transparent; + --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); + --system-spectrum-stepper-buttons-border-color-hover: transparent; + --system-spectrum-stepper-buttons-border-color-focus: transparent; + --system-spectrum-stepper-buttons-border-color-keyboard-focus: transparent; + --system-spectrum-stepper-button-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); + --system-spectrum-stepper-button-border-width: 0; + --system-spectrum-stepper-border-color: var(--spectrum-gray-400); + --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-900); + --system-spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-spectrum-stepper-border-color-invalid: transparent; + --system-spectrum-stepper-border-color-focus-invalid: transparent; + --system-spectrum-stepper-border-color-focus-hover-invalid: transparent; + --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); +}