From 7c98fe0e8897309848c6a64587e6251bc93edbea Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 31 Mar 2025 21:44:31 +0000 Subject: [PATCH 1/3] chore: update dependency @spectrum-css/dialog to v11.0.1 --- packages/dialog/package.json | 2 +- packages/dialog/src/spectrum-dialog.css | 40 ++++++++++++++----- .../styles/tokens-v2/system-theme-bridge.css | 40 ------------------- .../tokens/express/system-theme-bridge.css | 40 ------------------- .../tokens/spectrum/system-theme-bridge.css | 40 ------------------- yarn.lock | 12 +++--- 6 files changed, 38 insertions(+), 136 deletions(-) diff --git a/packages/dialog/package.json b/packages/dialog/package.json index f8ab5aff05..e8e8f0d966 100644 --- a/packages/dialog/package.json +++ b/packages/dialog/package.json @@ -91,7 +91,7 @@ "@spectrum-web-components/underlay": "1.6.0" }, "devDependencies": { - "@spectrum-css/dialog": "11.0.0-s2-foundations.15" + "@spectrum-css/dialog": "11.0.1" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/dialog/src/spectrum-dialog.css b/packages/dialog/src/spectrum-dialog.css index a1a554a2ca..f37d066cdf 100644 --- a/packages/dialog/src/spectrum-dialog.css +++ b/packages/dialog/src/spectrum-dialog.css @@ -12,8 +12,32 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { + --spectrum-dialog-fullscreen-header-text-size: 28px; + --spectrum-dialog-min-inline-size: 288px; + --spectrum-dialog-confirm-small-width: 400px; + --spectrum-dialog-confirm-medium-width: 480px; + --spectrum-dialog-confirm-large-width: 640px; + --spectrum-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300); + --spectrum-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200); + --spectrum-dialog-confirm-description-text-color: var(--spectrum-gray-800); + --spectrum-dialog-confirm-title-text-color: var(--spectrum-gray-900); + --spectrum-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100); + --spectrum-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100); + --spectrum-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --spectrum-dialog-confirm-description-padding: var(--spectrum-spacing-50); + --spectrum-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1); + --spectrum-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); + --spectrum-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100); + --spectrum-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); + --spectrum-dialog-confirm-close-button-size: var(--spectrum-component-height-100); + --spectrum-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300)); + --spectrum-dialog-confirm-divider-height: var(--spectrum-spacing-50); +} + +:host, +:host([size="m"]) { box-sizing: border-box; - inline-size: fit-content; + inline-size: var(--mod-dialog-confirm-medium-width, var(--spectrum-dialog-confirm-medium-width)); min-inline-size: var(--mod-dialog-min-inline-size, var(--spectrum-dialog-min-inline-size)); max-inline-size: 100%; max-block-size: inherit; @@ -21,15 +45,13 @@ governing permissions and limitations under the License. display: flex; } +.spectrum-Dialog--sizeS, :host([size="s"]) { inline-size: var(--mod-dialog-confirm-small-width, var(--spectrum-dialog-confirm-small-width)); } -:host([size="m"]) { - inline-size: var(--mod-dialog-confirm-medium-width, var(--spectrum-dialog-confirm-medium-width)); -} - -:host([size="l"]) { +:host([size="l"]), +.spectrum-Dialog--sizeL { inline-size: var(--mod-dialog-confirm-large-width, var(--spectrum-dialog-confirm-large-width)); } @@ -45,6 +67,8 @@ governing permissions and limitations under the License. .grid { grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + inline-size: 100%; grid-template-areas: "hero hero hero hero hero hero" ". . . . . ." @@ -53,8 +77,6 @@ governing permissions and limitations under the License. ". content content content content ." ". footer footer buttonGroup buttonGroup ." ". . . . . ."; - grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - inline-size: 100%; display: grid; } @@ -143,6 +165,7 @@ governing permissions and limitations under the License. :host([dismissable]) .grid { grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) minmax(0, var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); grid-template-areas: "hero hero hero hero hero hero hero" ". . . . . closeButton closeButton" @@ -151,7 +174,6 @@ governing permissions and limitations under the License. ". content content content content content ." ". footer footer buttonGroup buttonGroup buttonGroup ." ". . . . . . ."; - grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); } :host([dismissable]) .grid .button-group { diff --git a/tools/styles/tokens-v2/system-theme-bridge.css b/tools/styles/tokens-v2/system-theme-bridge.css index 12f17ce60f..fd2b9ddf52 100644 --- a/tools/styles/tokens-v2/system-theme-bridge.css +++ b/tools/styles/tokens-v2/system-theme-bridge.css @@ -633,46 +633,6 @@ --system-combobox-border-color-disabled: var( --spectrum-disabled-border-color ); - --system-dialog-fullscreen-header-text-size: 28px; - --system-dialog-min-inline-size: 288px; - --system-dialog-confirm-small-width: 400px; - --system-dialog-confirm-medium-width: 480px; - --system-dialog-confirm-large-width: 640px; - --system-dialog-confirm-divider-block-spacing-start: var( - --spectrum-spacing-300 - ); - --system-dialog-confirm-divider-block-spacing-end: var( - --spectrum-spacing-200 - ); - --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --system-dialog-confirm-description-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-confirm-title-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-heading-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --system-dialog-confirm-description-margin: calc( - var(--spectrum-spacing-50) * -1 - ); - --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-gap-size: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-dialog-confirm-buttongroup-padding-top: var( - --spectrum-spacing-600 - ); - --system-dialog-confirm-close-button-size: var( - --spectrum-component-height-100 - ); - --system-dialog-confirm-close-button-padding: calc( - 26px - var(--spectrum-component-bottom-to-text-300) - ); - --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); --system-divider-background-color: var(--spectrum-gray-200); --system-divider-background-color-static-white: var( --spectrum-transparent-white-200 diff --git a/tools/styles/tokens/express/system-theme-bridge.css b/tools/styles/tokens/express/system-theme-bridge.css index 49b45a6375..147b46f490 100644 --- a/tools/styles/tokens/express/system-theme-bridge.css +++ b/tools/styles/tokens/express/system-theme-bridge.css @@ -640,46 +640,6 @@ --spectrum-disabled-background-color ); --system-combobox-border-color-disabled: transparent; - --system-dialog-fullscreen-header-text-size: 28px; - --system-dialog-min-inline-size: 288px; - --system-dialog-confirm-small-width: 400px; - --system-dialog-confirm-medium-width: 480px; - --system-dialog-confirm-large-width: 640px; - --system-dialog-confirm-divider-block-spacing-start: var( - --spectrum-spacing-300 - ); - --system-dialog-confirm-divider-block-spacing-end: var( - --spectrum-spacing-200 - ); - --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --system-dialog-confirm-description-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-confirm-title-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-heading-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --system-dialog-confirm-description-margin: calc( - var(--spectrum-spacing-50) * -1 - ); - --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-gap-size: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-dialog-confirm-buttongroup-padding-top: var( - --spectrum-spacing-600 - ); - --system-dialog-confirm-close-button-size: var( - --spectrum-component-height-100 - ); - --system-dialog-confirm-close-button-padding: calc( - 26px - var(--spectrum-component-bottom-to-text-300) - ); - --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); --system-divider-background-color: var(--spectrum-gray-300); --system-divider-background-color-static-white: var( --spectrum-transparent-white-300 diff --git a/tools/styles/tokens/spectrum/system-theme-bridge.css b/tools/styles/tokens/spectrum/system-theme-bridge.css index 34a314b1e6..58492b99d2 100644 --- a/tools/styles/tokens/spectrum/system-theme-bridge.css +++ b/tools/styles/tokens/spectrum/system-theme-bridge.css @@ -646,46 +646,6 @@ --spectrum-disabled-background-color ); --system-combobox-border-color-disabled: transparent; - --system-dialog-fullscreen-header-text-size: 28px; - --system-dialog-min-inline-size: 288px; - --system-dialog-confirm-small-width: 400px; - --system-dialog-confirm-medium-width: 480px; - --system-dialog-confirm-large-width: 640px; - --system-dialog-confirm-divider-block-spacing-start: var( - --spectrum-spacing-300 - ); - --system-dialog-confirm-divider-block-spacing-end: var( - --spectrum-spacing-200 - ); - --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --system-dialog-confirm-description-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-confirm-title-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-heading-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --system-dialog-confirm-description-margin: calc( - var(--spectrum-spacing-50) * -1 - ); - --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-gap-size: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-dialog-confirm-buttongroup-padding-top: var( - --spectrum-spacing-600 - ); - --system-dialog-confirm-close-button-size: var( - --spectrum-component-height-100 - ); - --system-dialog-confirm-close-button-padding: calc( - 26px - var(--spectrum-component-bottom-to-text-300) - ); - --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); --system-divider-background-color: var(--spectrum-gray-300); --system-divider-background-color-static-white: var( --spectrum-transparent-white-300 diff --git a/yarn.lock b/yarn.lock index c0235117fd..95d344bc27 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6734,14 +6734,14 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/dialog@npm:11.0.0-s2-foundations.15": - version: 11.0.0-s2-foundations.15 - resolution: "@spectrum-css/dialog@npm:11.0.0-s2-foundations.15" +"@spectrum-css/dialog@npm:11.0.1": + version: 11.0.1 + resolution: "@spectrum-css/dialog@npm:11.0.1" peerDependencies: "@spectrum-css/closebutton": ">=5" "@spectrum-css/divider": ">=3" "@spectrum-css/modal": ">=5" - "@spectrum-css/tokens": ">=14" + "@spectrum-css/tokens": ">=14 || >=15" "@spectrum-css/underlay": ">=4" peerDependenciesMeta: "@spectrum-css/divider": @@ -6750,7 +6750,7 @@ __metadata: optional: true "@spectrum-css/underlay": optional: true - checksum: 10c0/0911458424815f49f08a1c47aa10fb06fbfbdd4ccce9578039730f9f50aae1714997ab0d653ccc58bb6a11f8e776b4ccdb677b22627adb4b43682ac8abe39a91 + checksum: 10c0/bc164c8a5c5343f647446c1833aaa77470fbb2dde8b375a051570690632dc727b7e3f3a19ea12ceffb42c7ef7d04be1ec74b02d9e80e25ea356161344c0c4fdb languageName: node linkType: hard @@ -7885,7 +7885,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-web-components/dialog@workspace:packages/dialog" dependencies: - "@spectrum-css/dialog": "npm:11.0.0-s2-foundations.15" + "@spectrum-css/dialog": "npm:11.0.1" "@spectrum-web-components/alert-dialog": "npm:1.6.0" "@spectrum-web-components/base": "npm:1.6.0" "@spectrum-web-components/button": "npm:1.6.0" From 0d1a20ca0eac3f1f3207990cda56dd5a585ababb Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" Date: Mon, 31 Mar 2025 18:20:04 -0400 Subject: [PATCH 2/3] fix(dialog,styles): use latest CSS --- packages/dialog/package.json | 2 +- packages/dialog/src/dialog.css | 1 - packages/dialog/src/spectrum-dialog.css | 53 +++++++++---------------- yarn.lock | 24 ++++++----- 4 files changed, 34 insertions(+), 46 deletions(-) diff --git a/packages/dialog/package.json b/packages/dialog/package.json index e8e8f0d966..2a8798f778 100644 --- a/packages/dialog/package.json +++ b/packages/dialog/package.json @@ -91,7 +91,7 @@ "@spectrum-web-components/underlay": "1.6.0" }, "devDependencies": { - "@spectrum-css/dialog": "11.0.1" + "@spectrum-css/dialog": "12.1.0" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/dialog/src/dialog.css b/packages/dialog/src/dialog.css index ddcc1d7354..589c3590e8 100644 --- a/packages/dialog/src/dialog.css +++ b/packages/dialog/src/dialog.css @@ -11,7 +11,6 @@ governing permissions and limitations under the License. */ @import url('./spectrum-dialog.css'); -@import url('./dialog-overrides.css'); :host { --swc-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color); diff --git a/packages/dialog/src/spectrum-dialog.css b/packages/dialog/src/spectrum-dialog.css index f37d066cdf..b320cbc5b3 100644 --- a/packages/dialog/src/spectrum-dialog.css +++ b/packages/dialog/src/spectrum-dialog.css @@ -12,47 +12,31 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-dialog-fullscreen-header-text-size: 28px; - --spectrum-dialog-min-inline-size: 288px; - --spectrum-dialog-confirm-small-width: 400px; - --spectrum-dialog-confirm-medium-width: 480px; - --spectrum-dialog-confirm-large-width: 640px; --spectrum-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300); --spectrum-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200); --spectrum-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --spectrum-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --spectrum-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100); - --spectrum-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100); - --spectrum-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); --spectrum-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --spectrum-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1); - --spectrum-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); --spectrum-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100); --spectrum-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); --spectrum-dialog-confirm-close-button-size: var(--spectrum-component-height-100); --spectrum-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300)); - --spectrum-dialog-confirm-divider-height: var(--spectrum-spacing-50); -} - -:host, -:host([size="m"]) { box-sizing: border-box; - inline-size: var(--mod-dialog-confirm-medium-width, var(--spectrum-dialog-confirm-medium-width)); - min-inline-size: var(--mod-dialog-min-inline-size, var(--spectrum-dialog-min-inline-size)); + inline-size: 480px; + inline-size: var(--mod-dialog-width, var(--mod-dialog-confirm-medium-width, 480px)); + min-inline-size: 288px; + min-inline-size: var(--mod-dialog-min-inline-size, 288px); max-inline-size: 100%; max-block-size: inherit; outline: none; display: flex; } -.spectrum-Dialog--sizeS, -:host([size="s"]) { - inline-size: var(--mod-dialog-confirm-small-width, var(--spectrum-dialog-confirm-small-width)); +.spectrum-Dialog--sizeS { + --mod-dialog-width: var(--mod-dialog-confirm-small-width, 400px); } -:host([size="l"]), .spectrum-Dialog--sizeL { - inline-size: var(--mod-dialog-confirm-large-width, var(--spectrum-dialog-confirm-large-width)); + --mod-dialog-width: var(--mod-dialog-confirm-large-width, 640px); } ::slotted([slot="hero"]) { @@ -67,8 +51,6 @@ governing permissions and limitations under the License. .grid { grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - inline-size: 100%; grid-template-areas: "hero hero hero hero hero hero" ". . . . . ." @@ -77,14 +59,16 @@ governing permissions and limitations under the License. ". content content content content ." ". footer footer buttonGroup buttonGroup ." ". . . . . ."; + grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + inline-size: 100%; display: grid; } ::slotted([slot="heading"]) { font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size)); - font-weight: var(--mod-dialog-heading-font-weight, var(--spectrum-dialog-heading-font-weight)); - line-height: var(--mod-dialog-confirm-title-text-line-height, var(--spectrum-dialog-confirm-title-text-line-height)); - color: var(--mod-dialog-confirm-title-text-color, var(--spectrum-dialog-confirm-title-text-color)); + font-weight: var(--mod-dialog-heading-font-weight, var(--spectrum-heading-sans-serif-font-weight)); + line-height: var(--mod-dialog-confirm-title-text-line-height, var(--spectrum-line-height-100)); + color: var(--mod-dialog-confirm-title-text-color, var(--spectrum-gray-900)); outline: none; grid-area: heading; margin: 0; @@ -121,7 +105,7 @@ governing permissions and limitations under the License. } :host([no-divider]) ::slotted([slot="heading"]) { - padding-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)) + var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) + var(--mod-dialog-confirm-divider-height, var(--spectrum-dialog-confirm-divider-height))); + padding-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)) + var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) + var(--mod-dialog-confirm-divider-height, var(--spectrum-spacing-50))); } .content { @@ -129,10 +113,10 @@ governing permissions and limitations under the License. -webkit-overflow-scrolling: touch; font-size: var(--mod-dialog-confirm-description-text-size, var(--spectrum-dialog-confirm-description-text-size)); font-weight: var(--mod-dialog-confirm-description-font-weight, var(--spectrum-regular-font-weight)); - line-height: var(--mod-dialog-confirm-description-text-line-height, var(--spectrum-dialog-confirm-description-text-line-height)); + line-height: var(--mod-dialog-confirm-description-text-line-height, var(--spectrum-line-height-100)); color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color)); padding: calc(var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2); - margin: 0 var(--mod-dialog-confirm-description-margin, var(--spectrum-dialog-confirm-description-margin)); + margin: 0 var(--mod-dialog-confirm-description-margin, calc(var(--spectrum-spacing-50) * -1)); outline: none; grid-area: content; overflow-y: auto; @@ -142,7 +126,7 @@ governing permissions and limitations under the License. outline: none; flex-wrap: wrap; grid-area: footer; - padding-block-start: var(--mod-dialog-confirm-footer-padding-top, var(--spectrum-dialog-confirm-footer-padding-top)); + padding-block-start: var(--mod-dialog-confirm-footer-padding-top, var(--spectrum-spacing-600)); display: flex; } @@ -165,7 +149,6 @@ governing permissions and limitations under the License. :host([dismissable]) .grid { grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) minmax(0, var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); grid-template-areas: "hero hero hero hero hero hero hero" ". . . . . closeButton closeButton" @@ -174,6 +157,7 @@ governing permissions and limitations under the License. ". content content content content content ." ". footer footer buttonGroup buttonGroup buttonGroup ." ". . . . . . ."; + grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); } :host([dismissable]) .grid .button-group { @@ -224,7 +208,8 @@ governing permissions and limitations under the License. :host([mode="fullscreen"]) ::slotted([slot="heading"]), :host([mode="fullscreenTakeover"]) ::slotted([slot="heading"]) { - font-size: var(--mod-dialog-fullscreen-header-text-size, var(--spectrum-dialog-fullscreen-header-text-size)); + font-size: 28px; + font-size: var(--mod-dialog-fullscreen-header-text-size, 28px); } :host([mode="fullscreen"]) .content, diff --git a/yarn.lock b/yarn.lock index 95d344bc27..55449319f4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6734,23 +6734,27 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/dialog@npm:11.0.1": - version: 11.0.1 - resolution: "@spectrum-css/dialog@npm:11.0.1" +"@spectrum-css/dialog@npm:12.1.0": + version: 12.1.0 + resolution: "@spectrum-css/dialog@npm:12.1.0" peerDependencies: - "@spectrum-css/closebutton": ">=5" - "@spectrum-css/divider": ">=3" - "@spectrum-css/modal": ">=5" - "@spectrum-css/tokens": ">=14 || >=15" - "@spectrum-css/underlay": ">=4" + "@spectrum-css/closebutton": ">=6.0.0 <7.0.0" + "@spectrum-css/divider": ">=5.0.0 <6.0.0" + "@spectrum-css/modal": ">=7.0.0 <8.0.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/underlay": ">=6.0.0 <7.0.0" peerDependenciesMeta: + "@spectrum-css/closebutton": + optional: true "@spectrum-css/divider": optional: true "@spectrum-css/modal": optional: true + "@spectrum-css/tokens": + optional: true "@spectrum-css/underlay": optional: true - checksum: 10c0/bc164c8a5c5343f647446c1833aaa77470fbb2dde8b375a051570690632dc727b7e3f3a19ea12ceffb42c7ef7d04be1ec74b02d9e80e25ea356161344c0c4fdb + checksum: 10c0/e6c761eb29e070f5b979dd6925e1b43aa727a24efa0389aa67cad25c1193a6149e1277c6270d0c44c831d6c0c0b2aa1e3c3cec6dde11677567bff756d1090e75 languageName: node linkType: hard @@ -7885,7 +7889,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-web-components/dialog@workspace:packages/dialog" dependencies: - "@spectrum-css/dialog": "npm:11.0.1" + "@spectrum-css/dialog": "npm:12.1.0" "@spectrum-web-components/alert-dialog": "npm:1.6.0" "@spectrum-web-components/base": "npm:1.6.0" "@spectrum-web-components/button": "npm:1.6.0" From fc960b391b83fa6cf6314f6eb069c03f7a8f3ab6 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Tue, 6 May 2025 09:40:54 -0400 Subject: [PATCH 3/3] chore: prettier settings for all CSS --- packages/dialog/src/dialog-overrides.css | 22 - packages/dialog/src/dialog.css | 43 +- .../styles/tokens-v2/system-theme-bridge.css | 1204 ++++------------ .../tokens/express/system-theme-bridge.css | 1236 ++++------------ .../tokens/spectrum/system-theme-bridge.css | 1240 ++++------------- 5 files changed, 923 insertions(+), 2822 deletions(-) diff --git a/packages/dialog/src/dialog-overrides.css b/packages/dialog/src/dialog-overrides.css index bf7ade9e97..b1cee0dbcd 100644 --- a/packages/dialog/src/dialog-overrides.css +++ b/packages/dialog/src/dialog-overrides.css @@ -11,25 +11,3 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-dialog-fullscreen-header-text-size: var(--system-dialog-fullscreen-header-text-size); - --spectrum-dialog-min-inline-size: var(--system-dialog-min-inline-size); - --spectrum-dialog-confirm-small-width: var(--system-dialog-confirm-small-width); - --spectrum-dialog-confirm-medium-width: var(--system-dialog-confirm-medium-width); - --spectrum-dialog-confirm-large-width: var(--system-dialog-confirm-large-width); - --spectrum-dialog-confirm-divider-block-spacing-start: var(--system-dialog-confirm-divider-block-spacing-start); - --spectrum-dialog-confirm-divider-block-spacing-end: var(--system-dialog-confirm-divider-block-spacing-end); - --spectrum-dialog-confirm-description-text-color: var(--system-dialog-confirm-description-text-color); - --spectrum-dialog-confirm-title-text-color: var(--system-dialog-confirm-title-text-color); - --spectrum-dialog-confirm-description-text-line-height: var(--system-dialog-confirm-description-text-line-height); - --spectrum-dialog-confirm-title-text-line-height: var(--system-dialog-confirm-title-text-line-height); - --spectrum-dialog-heading-font-weight: var(--system-dialog-heading-font-weight); - --spectrum-dialog-confirm-description-padding: var(--system-dialog-confirm-description-padding); - --spectrum-dialog-confirm-description-margin: var(--system-dialog-confirm-description-margin); - --spectrum-dialog-confirm-footer-padding-top: var(--system-dialog-confirm-footer-padding-top); - --spectrum-dialog-confirm-gap-size: var(--system-dialog-confirm-gap-size); - --spectrum-dialog-confirm-buttongroup-padding-top: var(--system-dialog-confirm-buttongroup-padding-top); - --spectrum-dialog-confirm-close-button-size: var(--system-dialog-confirm-close-button-size); - --spectrum-dialog-confirm-close-button-padding: var(--system-dialog-confirm-close-button-padding); - --spectrum-dialog-confirm-divider-height: var(--system-dialog-confirm-divider-height); -} diff --git a/packages/dialog/src/dialog.css b/packages/dialog/src/dialog.css index 589c3590e8..c1cee8aaef 100644 --- a/packages/dialog/src/dialog.css +++ b/packages/dialog/src/dialog.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('./spectrum-dialog.css'); +@import url("./spectrum-dialog.css"); :host { --swc-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color); @@ -21,39 +21,32 @@ governing permissions and limitations under the License. } .footer { - color: var( - --spectrum-dialog-confirm-description-text-color, - var(--spectrum-gray-800) - ); + color: var(--spectrum-dialog-confirm-description-text-color, var(--spectrum-gray-800)); } .type-icon { grid-area: typeIcon; - color: var( - --mod-alert-dialog-error-icon-color, - var(--swc-alert-dialog-error-icon-color) - ); + color: var(--mod-alert-dialog-error-icon-color, var(--swc-alert-dialog-error-icon-color)); } .content[tabindex] { overflow: auto; } -::slotted(img[slot='hero']) { +::slotted(img[slot="hero"]) { width: 100%; height: auto; } -/* We may remove this override when CSS fixes unused `header` and `typeIcon` areas */ .grid { grid-template-areas: - 'hero hero hero hero hero hero' - '. . . . . .' - '. heading heading heading typeIcon . ' - '. divider divider divider divider .' - '. content content content content .' - '. footer footer buttonGroup buttonGroup .' - '. . . . . .'; + "hero hero hero hero hero hero" + ". . . . . ." + ". heading heading heading typeIcon . " + ". divider divider divider divider ." + ". content content content content ." + ". footer footer buttonGroup buttonGroup ." + ". . . . . ."; inline-size: 100%; display: grid; } @@ -61,13 +54,13 @@ governing permissions and limitations under the License. /* Needed while `error` attribute still exists as deprecated */ :host(:not([error], [dismissable], [mode])) .grid { grid-template-areas: - 'hero hero hero hero hero hero' - '. . . . . .' - '. heading heading heading heading . ' - '. divider divider divider divider .' - '. content content content content .' - '. footer footer buttonGroup buttonGroup .' - '. . . . . .'; + "hero hero hero hero hero hero" + ". . . . . ." + ". heading heading heading heading . " + ". divider divider divider divider ." + ". content content content content ." + ". footer footer buttonGroup buttonGroup ." + ". . . . . ."; inline-size: 100%; display: grid; } diff --git a/tools/styles/tokens-v2/system-theme-bridge.css b/tools/styles/tokens-v2/system-theme-bridge.css index fd2b9ddf52..3ad81bbf9d 100644 --- a/tools/styles/tokens-v2/system-theme-bridge.css +++ b/tools/styles/tokens-v2/system-theme-bridge.css @@ -1,9 +1,7 @@ :host, :root { --system-accordion-divider-color: var(--spectrum-gray-200); - --system-accordion-item-content-disabled-color: var( - --spectrum-disabled-content-color - ); + --system-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color); --system-accordion-item-content-color: var(--spectrum-body-color); --system-action-bar-popover-background-color: var(--spectrum-gray-25); --system-action-bar-popover-border-color: var(--spectrum-gray-400); @@ -11,130 +9,64 @@ --system-action-button-background-color-hover: var(--spectrum-gray-200); --system-action-button-background-color-down: var(--spectrum-gray-200); --system-action-button-background-color-focus: var(--spectrum-gray-200); - --system-action-button-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-action-button-background-color-selected: var( - --spectrum-neutral-background-color-selected-default - ); - --system-action-button-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-action-button-background-color-selected-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-action-button-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); + --system-action-button-background-color-disabled: var(--spectrum-disabled-background-color); + --system-action-button-background-color-selected: var(--spectrum-neutral-background-color-selected-default); + --system-action-button-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-action-button-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); + --system-action-button-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); --system-action-button-border-color-default: transparent; --system-action-button-border-color-hover: transparent; --system-action-button-border-color-down: transparent; --system-action-button-border-color-focus: transparent; --system-action-button-border-color-disabled: transparent; --system-action-button-content-color-selected: var(--spectrum-gray-50); - --system-action-button-size-m-border-radius-default: var( - --spectrum-corner-radius-medium-size-medium - ); - --system-action-button-size-xs-border-radius-default: var( - --spectrum-corner-radius-medium-size-extra-small - ); - --system-action-button-size-s-border-radius-default: var( - --spectrum-corner-radius-medium-size-small - ); - --system-action-button-size-l-border-radius-default: var( - --spectrum-corner-radius-medium-size-large - ); - --system-action-button-size-xl-border-radius-default: var( - --spectrum-corner-radius-medium-size-extra-large - ); + --system-action-button-size-m-border-radius-default: var(--spectrum-corner-radius-medium-size-medium); + --system-action-button-size-xs-border-radius-default: var(--spectrum-corner-radius-medium-size-extra-small); + --system-action-button-size-s-border-radius-default: var(--spectrum-corner-radius-medium-size-small); + --system-action-button-size-l-border-radius-default: var(--spectrum-corner-radius-medium-size-large); + --system-action-button-size-xl-border-radius-default: var(--spectrum-corner-radius-medium-size-extra-large); --system-action-button-quiet-background-color-default: transparent; - --system-action-button-quiet-background-color-hover: var( - --spectrum-gray-200 - ); - --system-action-button-quiet-background-color-down: var( - --spectrum-gray-200 - ); - --system-action-button-quiet-background-color-focus: var( - --spectrum-gray-200 - ); + --system-action-button-quiet-background-color-hover: var(--spectrum-gray-200); + --system-action-button-quiet-background-color-down: var(--spectrum-gray-200); + --system-action-button-quiet-background-color-focus: var(--spectrum-gray-200); --system-action-button-quiet-background-color-disabled: transparent; - --system-action-button-quiet-background-color-selected-disabled: var( - --spectrum-disabled-background-color - ); + --system-action-button-quiet-background-color-selected-disabled: var(--spectrum-disabled-background-color); --system-action-button-static-black-border-color-default: transparent; --system-action-button-static-black-border-color-hover: transparent; --system-action-button-static-black-border-color-down: transparent; --system-action-button-static-black-border-color-focus: transparent; --system-action-button-static-black-border-color-disabled: transparent; - --system-action-button-static-black-background-color-disabled: var( - --spectrum-disabled-static-black-background-color - ); - --system-action-button-static-black-background-color-selected-disabled: var( - --spectrum-disabled-static-black-background-color - ); - --system-action-button-static-black-background-color-default: var( - --spectrum-transparent-black-100 - ); - --system-action-button-static-black-background-color-hover: var( - --spectrum-transparent-black-200 - ); - --system-action-button-static-black-background-color-down: var( - --spectrum-transparent-black-200 - ); - --system-action-button-static-black-background-color-focus: var( - --spectrum-transparent-black-200 - ); + --system-action-button-static-black-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --system-action-button-static-black-background-color-selected-disabled: var(--spectrum-disabled-static-black-background-color); + --system-action-button-static-black-background-color-default: var(--spectrum-transparent-black-100); + --system-action-button-static-black-background-color-hover: var(--spectrum-transparent-black-200); + --system-action-button-static-black-background-color-down: var(--spectrum-transparent-black-200); + --system-action-button-static-black-background-color-focus: var(--spectrum-transparent-black-200); --system-action-button-static-black-quiet-background-color-default: transparent; - --system-action-button-static-black-quiet-background-color-hover: var( - --spectrum-transparent-black-200 - ); - --system-action-button-static-black-quiet-background-color-down: var( - --spectrum-transparent-black-200 - ); - --system-action-button-static-black-quiet-background-color-focus: var( - --spectrum-transparent-black-200 - ); + --system-action-button-static-black-quiet-background-color-hover: var(--spectrum-transparent-black-200); + --system-action-button-static-black-quiet-background-color-down: var(--spectrum-transparent-black-200); + --system-action-button-static-black-quiet-background-color-focus: var(--spectrum-transparent-black-200); --system-action-button-static-black-quiet-background-color-disabled: transparent; --system-action-button-static-white-border-color-default: transparent; --system-action-button-static-white-border-color-hover: transparent; --system-action-button-static-white-border-color-down: transparent; --system-action-button-static-white-border-color-focus: transparent; --system-action-button-static-white-border-color-disabled: transparent; - --system-action-button-static-white-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-action-button-static-white-background-color-selected-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-action-button-static-white-background-color-default: var( - --spectrum-transparent-white-100 - ); - --system-action-button-static-white-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --system-action-button-static-white-background-color-down: var( - --spectrum-transparent-white-200 - ); - --system-action-button-static-white-background-color-focus: var( - --spectrum-transparent-white-200 - ); + --system-action-button-static-white-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --system-action-button-static-white-background-color-selected-disabled: var(--spectrum-disabled-static-white-background-color); + --system-action-button-static-white-background-color-default: var(--spectrum-transparent-white-100); + --system-action-button-static-white-background-color-hover: var(--spectrum-transparent-white-200); + --system-action-button-static-white-background-color-down: var(--spectrum-transparent-white-200); + --system-action-button-static-white-background-color-focus: var(--spectrum-transparent-white-200); --system-action-button-static-white-quiet-background-color-default: transparent; - --system-action-button-static-white-quiet-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --system-action-button-static-white-quiet-background-color-down: var( - --spectrum-transparent-white-200 - ); - --system-action-button-static-white-quiet-background-color-focus: var( - --spectrum-transparent-white-200 - ); + --system-action-button-static-white-quiet-background-color-hover: var(--spectrum-transparent-white-200); + --system-action-button-static-white-quiet-background-color-down: var(--spectrum-transparent-white-200); + --system-action-button-static-white-quiet-background-color-focus: var(--spectrum-transparent-white-200); --system-action-button-static-white-quiet-background-color-disabled: transparent; --system-action-group-gap-size-compact: 0; --system-action-group-horizontal-spacing-compact: -1px; --system-action-group-vertical-spacing-compact: -1px; - --system-alert-banner-neutral-background: var( - --spectrum-neutral-subdued-background-color-default - ); + --system-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default); --system-asset-folder-background-color: var(--spectrum-gray-200); --system-asset-file-background-color: var(--spectrum-gray-25); --system-asset-icon-outline-color: var(--spectrum-gray-500); @@ -147,258 +79,100 @@ --system-button-border-color-down: var(--spectrum-gray-600); --system-button-border-color-focus: var(--spectrum-gray-500); --system-button-background-color-disabled: transparent; - --system-button-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-selected-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-button-selected-background-color-hover: var( - --spectrum-neutral-subdued-background-color-hover - ); - --system-button-selected-background-color-down: var( - --spectrum-neutral-subdued-background-color-down - ); - --system-button-selected-background-color-focus: var( - --spectrum-neutral-subdued-background-color-key-focus - ); + --system-button-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-selected-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --system-button-selected-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); + --system-button-selected-background-color-down: var(--spectrum-neutral-subdued-background-color-down); + --system-button-selected-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); --system-button-primary-content-color-default: var(--spectrum-gray-25); --system-button-primary-content-color-hover: var(--spectrum-gray-25); --system-button-primary-content-color-down: var(--spectrum-gray-25); --system-button-primary-content-color-focus: var(--spectrum-gray-25); - --system-button-primary-outline-background-color-hover: var( - --spectrum-gray-100 - ); - --system-button-primary-outline-background-color-down: var( - --spectrum-gray-100 - ); - --system-button-primary-outline-background-color-focus: var( - --spectrum-gray-100 - ); - --system-button-secondary-background-color-default: var( - --spectrum-gray-100 - ); + --system-button-primary-outline-background-color-hover: var(--spectrum-gray-100); + --system-button-primary-outline-background-color-down: var(--spectrum-gray-100); + --system-button-primary-outline-background-color-focus: var(--spectrum-gray-100); + --system-button-secondary-background-color-default: var(--spectrum-gray-100); --system-button-secondary-background-color-hover: var(--spectrum-gray-200); --system-button-secondary-background-color-down: var(--spectrum-gray-200); --system-button-secondary-background-color-focus: var(--spectrum-gray-200); - --system-button-secondary-outline-background-color-hover: var( - --spectrum-gray-100 - ); - --system-button-secondary-outline-background-color-down: var( - --spectrum-gray-100 - ); - --system-button-secondary-outline-background-color-focus: var( - --spectrum-gray-100 - ); - --system-button-secondary-outline-border-color-default: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-border-color-down: var( - --spectrum-gray-400 - ); - --system-button-static-white-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-background-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-background-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-background-color-focus: var( - --spectrum-transparent-white-900 - ); + --system-button-secondary-outline-background-color-hover: var(--spectrum-gray-100); + --system-button-secondary-outline-background-color-down: var(--spectrum-gray-100); + --system-button-secondary-outline-background-color-focus: var(--spectrum-gray-100); + --system-button-secondary-outline-border-color-default: var(--spectrum-gray-300); + --system-button-secondary-outline-border-color-down: var(--spectrum-gray-400); + --system-button-static-white-background-color-default: var(--spectrum-transparent-white-800); + --system-button-static-white-background-color-hover: var(--spectrum-transparent-white-900); + --system-button-static-white-background-color-down: var(--spectrum-transparent-white-900); + --system-button-static-white-background-color-focus: var(--spectrum-transparent-white-900); --system-button-static-white-content-color-default: var(--spectrum-black); --system-button-static-white-content-color-hover: var(--spectrum-black); --system-button-static-white-content-color-down: var(--spectrum-black); --system-button-static-white-content-color-focus: var(--spectrum-black); - --system-button-static-white-outline-background-color-default: var( - --spectrum-transparent-white-25 - ); - --system-button-static-white-outline-background-color-hover: var( - --spectrum-transparent-white-100 - ); - --system-button-static-white-outline-background-color-down: var( - --spectrum-transparent-white-100 - ); - --system-button-static-white-outline-background-color-focus: var( - --spectrum-transparent-white-100 - ); - --system-button-static-white-outline-content-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-outline-content-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-content-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-content-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-border-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-outline-border-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-border-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-border-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-secondary-background-color-default: var( - --spectrum-transparent-white-100 - ); - --system-button-static-white-secondary-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --system-button-static-white-secondary-background-color-down: var( - --spectrum-transparent-white-200 - ); - --system-button-static-white-secondary-background-color-focus: var( - --spectrum-transparent-white-200 - ); - --system-button-static-white-secondary-content-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-secondary-content-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-secondary-content-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-secondary-content-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-secondary-outline-border-color-default: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-border-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-border-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-border-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-background-color-default: var( - --spectrum-transparent-white-25 - ); - --system-button-static-white-secondary-outline-background-color-hover: var( - --spectrum-transparent-white-100 - ); - --system-button-static-white-secondary-outline-background-color-down: var( - --spectrum-transparent-white-100 - ); - --system-button-static-white-secondary-outline-background-color-focus: var( - --spectrum-transparent-white-100 - ); - --system-button-static-black-background-color-default: var( - --spectrum-transparent-black-800 - ); - --system-button-static-black-background-color-hover: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-background-color-down: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-background-color-focus: var( - --spectrum-transparent-black-900 - ); + --system-button-static-white-outline-background-color-default: var(--spectrum-transparent-white-25); + --system-button-static-white-outline-background-color-hover: var(--spectrum-transparent-white-100); + --system-button-static-white-outline-background-color-down: var(--spectrum-transparent-white-100); + --system-button-static-white-outline-background-color-focus: var(--spectrum-transparent-white-100); + --system-button-static-white-outline-content-color-default: var(--spectrum-transparent-white-800); + --system-button-static-white-outline-content-color-hover: var(--spectrum-transparent-white-900); + --system-button-static-white-outline-content-color-down: var(--spectrum-transparent-white-900); + --system-button-static-white-outline-content-color-focus: var(--spectrum-transparent-white-900); + --system-button-static-white-outline-border-color-default: var(--spectrum-transparent-white-800); + --system-button-static-white-outline-border-color-hover: var(--spectrum-transparent-white-900); + --system-button-static-white-outline-border-color-down: var(--spectrum-transparent-white-900); + --system-button-static-white-outline-border-color-focus: var(--spectrum-transparent-white-900); + --system-button-static-white-secondary-background-color-default: var(--spectrum-transparent-white-100); + --system-button-static-white-secondary-background-color-hover: var(--spectrum-transparent-white-200); + --system-button-static-white-secondary-background-color-down: var(--spectrum-transparent-white-200); + --system-button-static-white-secondary-background-color-focus: var(--spectrum-transparent-white-200); + --system-button-static-white-secondary-content-color-default: var(--spectrum-transparent-white-800); + --system-button-static-white-secondary-content-color-hover: var(--spectrum-transparent-white-900); + --system-button-static-white-secondary-content-color-down: var(--spectrum-transparent-white-900); + --system-button-static-white-secondary-content-color-focus: var(--spectrum-transparent-white-900); + --system-button-static-white-secondary-outline-border-color-default: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-outline-border-color-hover: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-outline-border-color-down: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-outline-border-color-focus: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-outline-background-color-default: var(--spectrum-transparent-white-25); + --system-button-static-white-secondary-outline-background-color-hover: var(--spectrum-transparent-white-100); + --system-button-static-white-secondary-outline-background-color-down: var(--spectrum-transparent-white-100); + --system-button-static-white-secondary-outline-background-color-focus: var(--spectrum-transparent-white-100); + --system-button-static-black-background-color-default: var(--spectrum-transparent-black-800); + --system-button-static-black-background-color-hover: var(--spectrum-transparent-black-900); + --system-button-static-black-background-color-down: var(--spectrum-transparent-black-900); + --system-button-static-black-background-color-focus: var(--spectrum-transparent-black-900); --system-button-static-black-content-color-default: var(--spectrum-white); --system-button-static-black-content-color-hover: var(--spectrum-white); --system-button-static-black-content-color-down: var(--spectrum-white); --system-button-static-black-content-color-focus: var(--spectrum-white); - --system-button-static-black-outline-background-color-default: var( - --spectrum-transparent-black-25 - ); - --system-button-static-black-outline-background-color-hover: var( - --spectrum-transparent-black-100 - ); - --system-button-static-black-outline-background-color-down: var( - --spectrum-transparent-black-100 - ); - --system-button-static-black-outline-background-color-focus: var( - --spectrum-transparent-black-100 - ); - --system-button-static-black-outline-content-color-default: var( - --spectrum-transparent-black-800 - ); - --system-button-static-black-outline-content-color-hover: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-outline-content-color-down: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-outline-content-color-focus: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-outline-border-color-default: var( - --spectrum-transparent-black-800 - ); - --system-button-static-black-outline-border-color-hover: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-outline-border-color-down: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-outline-border-color-focus: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-secondary-background-color-default: var( - --spectrum-transparent-black-100 - ); - --system-button-static-black-secondary-background-color-hover: var( - --spectrum-transparent-black-200 - ); - --system-button-static-black-secondary-background-color-down: var( - --spectrum-transparent-black-200 - ); - --system-button-static-black-secondary-background-color-focus: var( - --spectrum-transparent-black-200 - ); - --system-button-static-black-secondary-content-color-default: var( - --spectrum-transparent-black-800 - ); - --system-button-static-black-secondary-content-color-hover: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-secondary-content-color-down: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-secondary-content-color-focus: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-secondary-outline-border-color-default: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-border-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-border-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-border-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-background-color-default: var( - --spectrum-transparent-black-25 - ); - --system-button-static-black-secondary-outline-background-color-hover: var( - --spectrum-transparent-black-100 - ); - --system-button-static-black-secondary-outline-background-color-down: var( - --spectrum-transparent-black-100 - ); - --system-button-static-black-secondary-outline-background-color-focus: var( - --spectrum-transparent-black-100 - ); - --system-checkbox-control-color-default: var( - --spectrum-neutral-content-color-default - ); + --system-button-static-black-outline-background-color-default: var(--spectrum-transparent-black-25); + --system-button-static-black-outline-background-color-hover: var(--spectrum-transparent-black-100); + --system-button-static-black-outline-background-color-down: var(--spectrum-transparent-black-100); + --system-button-static-black-outline-background-color-focus: var(--spectrum-transparent-black-100); + --system-button-static-black-outline-content-color-default: var(--spectrum-transparent-black-800); + --system-button-static-black-outline-content-color-hover: var(--spectrum-transparent-black-900); + --system-button-static-black-outline-content-color-down: var(--spectrum-transparent-black-900); + --system-button-static-black-outline-content-color-focus: var(--spectrum-transparent-black-900); + --system-button-static-black-outline-border-color-default: var(--spectrum-transparent-black-800); + --system-button-static-black-outline-border-color-hover: var(--spectrum-transparent-black-900); + --system-button-static-black-outline-border-color-down: var(--spectrum-transparent-black-900); + --system-button-static-black-outline-border-color-focus: var(--spectrum-transparent-black-900); + --system-button-static-black-secondary-background-color-default: var(--spectrum-transparent-black-100); + --system-button-static-black-secondary-background-color-hover: var(--spectrum-transparent-black-200); + --system-button-static-black-secondary-background-color-down: var(--spectrum-transparent-black-200); + --system-button-static-black-secondary-background-color-focus: var(--spectrum-transparent-black-200); + --system-button-static-black-secondary-content-color-default: var(--spectrum-transparent-black-800); + --system-button-static-black-secondary-content-color-hover: var(--spectrum-transparent-black-900); + --system-button-static-black-secondary-content-color-down: var(--spectrum-transparent-black-900); + --system-button-static-black-secondary-content-color-focus: var(--spectrum-transparent-black-900); + --system-button-static-black-secondary-outline-border-color-default: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-outline-border-color-hover: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-outline-border-color-down: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-outline-border-color-focus: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-outline-background-color-default: var(--spectrum-transparent-black-25); + --system-button-static-black-secondary-outline-background-color-hover: var(--spectrum-transparent-black-100); + --system-button-static-black-secondary-outline-background-color-down: var(--spectrum-transparent-black-100); + --system-button-static-black-secondary-outline-background-color-focus: var(--spectrum-transparent-black-100); + --system-checkbox-control-color-default: var(--spectrum-neutral-content-color-default); --system-checkbox-control-color-hover: var(--spectrum-gray-700); --system-checkbox-control-color-down: var(--spectrum-gray-800); --system-checkbox-control-color-focus: var(--spectrum-gray-700); @@ -416,146 +190,60 @@ --system-clear-button-height: var(--spectrum-component-height-100); --system-clear-button-width: var(--spectrum-component-height-100); --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-clear-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-clear-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-clear-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-clear-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); + --system-clear-button-icon-color: var(--spectrum-neutral-content-color-default); + --system-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); --system-clear-button-size-s-height: var(--spectrum-component-height-75); --system-clear-button-size-s-width: var(--spectrum-component-height-75); --system-clear-button-size-l-height: var(--spectrum-component-height-200); --system-clear-button-size-l-width: var(--spectrum-component-height-200); --system-clear-button-size-xl-height: var(--spectrum-component-height-300); --system-clear-button-size-xl-width: var(--spectrum-component-height-300); - --system-clear-button-quiet-background-color: var( - --spectrum-clear-button-background-color-quiet, - transparent - ); - --system-clear-button-quiet-background-color-hover: var( - --spectrum-clear-button-background-color-hover-quiet, - transparent - ); - --system-clear-button-quiet-background-color-down: var( - --spectrum-clear-button-background-color-down-quiet, - transparent - ); - --system-clear-button-quiet-background-color-key-focus: var( - --spectrum-clear-button-background-color-key-focus-quiet, - transparent - ); - --system-clear-button-over-background-icon-color: var( - --spectrum-clear-button-icon-color-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-icon-color-hover: var( - --spectrum-clear-button-icon-color-hover-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-icon-color-down: var( - --spectrum-clear-button-icon-color-down-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-icon-color-key-focus: var( - --spectrum-clear-button-icon-color-key-focus-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-background-color: var( - --spectrum-clear-button-background-color-over-background, - transparent - ); - --system-clear-button-over-background-background-color-hover: var( - --spectrum-clear-button-background-color-hover-over-background, - var(--spectrum-transparent-white-400) - ); - --system-clear-button-over-background-background-color-down: var( - --spectrum-clear-button-background-color-hover-over-background, - var(--spectrum-transparent-white-500) - ); - --system-clear-button-over-background-background-color-key-focus: var( - --spectrum-clear-button-background-color-hover-over-background, - var(--spectrum-transparent-white-400) - ); - --system-clear-button-disabled-icon-color: var( - --spectrum-disabled-content-color - ); - --system-clear-button-disabled-icon-color-hover: var( - --spectrum-clear-button-icon-color-hover-disabled, - var(--spectrum-disabled-content-color) - ); - --system-clear-button-disabled-icon-color-down: var( - --spectrum-clear-button-icon-color-down-disabled, - var(--spectrum-disabled-content-color) - ); + --system-clear-button-quiet-background-color: var(--spectrum-clear-button-background-color-quiet, transparent); + --system-clear-button-quiet-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent); + --system-clear-button-quiet-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent); + --system-clear-button-quiet-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent); + --system-clear-button-over-background-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white)); + --system-clear-button-over-background-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white)); + --system-clear-button-over-background-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white)); + --system-clear-button-over-background-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white)); + --system-clear-button-over-background-background-color: var(--spectrum-clear-button-background-color-over-background, transparent); + --system-clear-button-over-background-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); + --system-clear-button-over-background-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-500)); + --system-clear-button-over-background-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); + --system-clear-button-disabled-icon-color: var(--spectrum-disabled-content-color); + --system-clear-button-disabled-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); + --system-clear-button-disabled-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); --system-clear-button-disabled-background-color: transparent; --system-close-button-background-color-default: transparent; --system-close-button-background-color-hover: var(--spectrum-gray-100); --system-close-button-background-color-down: var(--spectrum-gray-200); --system-close-button-background-color-focus: var(--spectrum-gray-100); - --system-close-button-static-white-static-background-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-close-button-static-white-static-background-color-down: var( - --spectrum-transparent-white-500 - ); - --system-close-button-static-white-static-background-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-close-button-static-black-static-background-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-close-button-static-black-static-background-color-down: var( - --spectrum-transparent-black-500 - ); - --system-close-button-static-black-static-background-color-focus: var( - --spectrum-transparent-black-400 - ); + --system-close-button-static-white-static-background-color-hover: var(--spectrum-transparent-white-400); + --system-close-button-static-white-static-background-color-down: var(--spectrum-transparent-white-500); + --system-close-button-static-white-static-background-color-focus: var(--spectrum-transparent-white-400); + --system-close-button-static-black-static-background-color-hover: var(--spectrum-transparent-black-400); + --system-close-button-static-black-static-background-color-down: var(--spectrum-transparent-black-500); + --system-close-button-static-black-static-background-color-focus: var(--spectrum-transparent-black-400); --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); - --system-coach-indicator-min-inline-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-min-block-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-inline-size: var( - --system-coach-indicator-min-inline-size - ); - --system-coach-indicator-block-size: var( - --system-coach-indicator-min-block-size - ); - --system-coach-indicator-ring-inline-size: var( - --spectrum-coach-indicator-ring-diameter - ); - --system-coach-indicator-ring-block-size: var( - --spectrum-coach-indicator-ring-diameter - ); + --system-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); + --system-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); + --system-coach-indicator-inline-size: var(--system-coach-indicator-min-inline-size); + --system-coach-indicator-block-size: var(--system-coach-indicator-min-block-size); + --system-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter); + --system-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter); --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --system-coach-indicator-ring-light-color: var(--spectrum-gray-25); - --system-coach-indicator-top: calc( - var(--system-coach-indicator-block-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-left: calc( - var(--system-coach-indicator-inline-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-coach-animation-indicator-ring-duration: var( - --spectrum-animation-duration-6000 - ); + --system-coach-indicator-top: calc(var(--system-coach-indicator-block-size) / 3 - var(--system-coach-indicator-ring-border-size)); + --system-coach-indicator-left: calc(var(--system-coach-indicator-inline-size) / 3 - var(--system-coach-indicator-ring-border-size)); + --system-coach-indicator-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000); --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; --system-coach-indicator-animation-name: pulse; - --system-coach-indicator-inner-animation-delay-multiple: var( - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple - ); + --system-coach-indicator-inner-animation-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple); --system-coach-indicator-animation-keyframe-0-scale: 1; --system-coach-indicator-animation-keyframe-0-opacity: 0; --system-coach-indicator-animation-keyframe-50-scale: 1.5; @@ -563,65 +251,39 @@ --system-coach-indicator-animation-keyframe-100-scale: 2; --system-coach-indicator-animation-keyframe-100-opacity: 0; --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; - --system-coach-indicator-quiet-quiet-ring-diameter-size: var( - --spectrum-coach-indicator-quiet-ring-diameter - ); + --system-coach-indicator-quiet-quiet-ring-diameter-size: var(--spectrum-coach-indicator-quiet-ring-diameter); --system-coach-indicator-quiet-animation-name: pulse-quiet; --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); --system-coach-mark-width: var(--spectrum-coach-mark-width); --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); - --system-coach-mark-media-min-height: var( - --spectrum-coach-mark-media-minimum-height - ); + --system-coach-mark-media-min-height: var(--spectrum-coach-mark-media-minimum-height); --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); --system-coach-mark-header-to-body: var(--spectrum-spacing-200); --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); --system-coach-mark-title-color: var(--spectrum-heading-color); --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-title-font-style: var( - --spectrum-heading-serif-font-style - ); - --system-coach-mark-title-text-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); + --system-coach-mark-title-font-style: var(--spectrum-heading-serif-font-style); + --system-coach-mark-title-text-font-weight: var(--spectrum-heading-sans-serif-font-weight); --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); - --system-coach-mark-title-text-line-height: var( - --spectrum-heading-line-height - ); + --system-coach-mark-title-text-line-height: var(--spectrum-heading-line-height); --system-coach-mark-content-font-color: var(--spectrum-body-color); - --system-coach-mark-content-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); + --system-coach-mark-content-font-weight: var(--spectrum-body-sans-serif-font-weight); --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-content-font-style: var( - --spectrum-body-sans-serif-font-style - ); + --system-coach-mark-content-font-style: var(--spectrum-body-sans-serif-font-style); --system-coach-mark-content-line-height: var(--spectrum-body-line-height); --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); - --system-coach-mark-step-font-weight: var( - --spectrum-body-medium-font-weight - ); + --system-coach-mark-step-font-weight: var(--spectrum-body-medium-font-weight); --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-step-font-style: var( - --spectrum-body-sans-serif-font-style - ); + --system-coach-mark-step-font-style: var(--spectrum-body-sans-serif-font-style); --system-coach-mark-step-line-height: var(--spectrum-body-line-height); - --system-coach-mark-step-font-size: var( - --spectrum-coach-mark-pagination-body-size - ); - --system-coach-mark-step-to-bottom: var( - --spectrum-coach-mark-pagination-text-to-bottom-edge - ); + --system-coach-mark-step-font-size: var(--spectrum-coach-mark-pagination-body-size); + --system-coach-mark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge); --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); - --system-coach-mark-popover-corner-radius: var( - --spectrum-corner-radius-100 - ); - --system-coach-mark-buttongroup-spacing-horizontal: var( - --spectrum-spacing-100 - ); + --system-coach-mark-popover-corner-radius: var(--spectrum-corner-radius-100); + --system-coach-mark-buttongroup-spacing-horizontal: var(--spectrum-spacing-100); --system-color-wheel-border-color: var(--spectrum-transparent-black-300); --system-combobox-border-color-default: var(--spectrum-gray-500); --system-combobox-border-color-hover: var(--spectrum-gray-600); @@ -630,48 +292,27 @@ --system-combobox-border-color-key-focus: var(--spectrum-gray-800); --system-combobox-readonly-input-border-color: var(--spectrum-gray-500); --system-combobox-background-color-disabled: var(--spectrum-gray-25); - --system-combobox-border-color-disabled: var( - --spectrum-disabled-border-color - ); + --system-combobox-border-color-disabled: var(--spectrum-disabled-border-color); --system-divider-background-color: var(--spectrum-gray-200); - --system-divider-background-color-static-white: var( - --spectrum-transparent-white-200 - ); - --system-divider-background-color-static-black: var( - --spectrum-transparent-black-200 - ); + --system-divider-background-color-static-white: var(--spectrum-transparent-white-200); + --system-divider-background-color-static-black: var(--spectrum-transparent-black-200); --system-drop-zone-border-color: var(--spectrum-gray-200); --system-field-group-margin: var(--spectrum-spacing-300); - --system-field-group-readonly-delimiter: ','; + --system-field-group-readonly-delimiter: ","; --system-infield-button-border-width: var(--spectrum-border-width-100); --system-infield-button-border-color: inherit; --system-infield-button-border-radius: var(--spectrum-corner-radius-100); --system-infield-button-border-radius-reset: 0; - --system-infield-button-stacked-top-border-radius-start-start: var( - --system-infield-button-border-radius-reset - ); - --system-infield-button-stacked-bottom-border-radius-end-start: var( - --system-infield-button-border-radius-reset - ); + --system-infield-button-stacked-top-border-radius-start-start: var(--system-infield-button-border-radius-reset); + --system-infield-button-stacked-bottom-border-radius-end-start: var(--system-infield-button-border-radius-reset); --system-infield-button-background-color: var(--spectrum-gray-100); --system-infield-button-background-color-hover: var(--spectrum-gray-200); --system-infield-button-background-color-down: var(--spectrum-gray-200); - --system-infield-button-background-color-key-focus: var( - --spectrum-gray-200 - ); + --system-infield-button-background-color-key-focus: var(--spectrum-gray-200); --system-infield-button-disabled-border-color: var(--spectrum-gray-300); - --system-menu-item-background-color-hover: rgba( - var(--spectrum-gray-1000-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-down: rgba( - var(--spectrum-gray-1000-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-key-focus: rgba( - var(--spectrum-gray-1000-rgb), - var(--spectrum-transparent-black-200-opacity) - ); + --system-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); + --system-menu-item-background-color-down: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); + --system-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); --system-menu-item-corner-radius: var(--spectrum-corner-radius-100); --system-menu-item-focus-indicator-shadow: none; --system-menu-item-focus-indicator-offset: var(--spectrum-spacing-50); @@ -695,9 +336,7 @@ --system-meter-font-size: var(--spectrum-font-size-100); --system-meter-size-l-font-size: var(--spectrum-font-size-100); --system-meter-top-to-text: var(--spectrum-component-top-to-text-200); - --system-meter-size-l-top-to-text: var( - --spectrum-component-top-to-text-200 - ); + --system-meter-size-l-top-to-text: var(--spectrum-component-top-to-text-200); --system-modal-background-color: var(--spectrum-background-layer-2-color); --system-picker-background-color-default: var(--spectrum-gray-100); --system-picker-background-color-default-open: var(--spectrum-gray-200); @@ -719,21 +358,13 @@ --system-picker-button-background-color-key-focus: var(--spectrum-gray-200); --system-picker-button-border-color: none; --system-picker-button-border-radius: var(--spectrum-corner-radius-75); - --system-picker-button-border-radius-rounded-sided: var( - --spectrum-corner-radius-200 - ); - --system-picker-button-border-radius-sided: var( - --spectrum-corner-radius-75 - ); + --system-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); + --system-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); --system-picker-button-border-width: 0px; --system-picker-button-padding: 4px; --system-popover-border-width: var(--spectrum-border-width-100); - --system-progress-bar-animation-ease-in-out-indeterminate: var( - --spectrum-animation-ease-in-out - ); - --system-progress-bar-animation-duration-indeterminate: var( - --spectrum-animation-duration-2000 - ); + --system-progress-bar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out); + --system-progress-bar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000); --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); --system-progress-bar-fill-size-indeterminate: 70%; --system-progress-bar-size-2400: 192px; @@ -745,122 +376,58 @@ --system-progress-bar-line-height: var(--spectrum-line-height-100); --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); - --system-progress-bar-text-color: var( - --spectrum-neutral-content-color-default - ); + --system-progress-bar-text-color: var(--spectrum-neutral-content-color-default); --system-progress-bar-track-color: var(--spectrum-gray-200); --system-progress-bar-fill-color: var(--spectrum-accent-color-900); --system-progress-bar-label-and-value-white: var(--spectrum-white); - --system-progress-bar-track-color-white: var( - --spectrum-transparent-white-400 - ); + --system-progress-bar-track-color-white: var(--spectrum-transparent-white-400); --system-progress-bar-fill-color-white: var(--spectrum-white); --system-progress-bar-size-default: var(--system-progress-bar-size-2400); - --system-progress-bar-size-m-size-default: var( - --system-progress-bar-size-2400 - ); + --system-progress-bar-size-m-size-default: var(--system-progress-bar-size-2400); --system-progress-bar-font-size: var(--spectrum-font-size-75); --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); - --system-progress-bar-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-m-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-m-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-s-size-default: var( - --system-progress-bar-size-2400 - ); + --system-progress-bar-thickness: var(--spectrum-progress-bar-thickness-large); + --system-progress-bar-size-m-thickness: var(--spectrum-progress-bar-thickness-large); + --system-progress-bar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-progress-bar-size-m-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-progress-bar-size-s-size-default: var(--system-progress-bar-size-2400); --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-s-thickness: var( - --spectrum-progress-bar-thickness-small - ); - --system-progress-bar-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-l-size-default: var( - --system-progress-bar-size-2500 - ); + --system-progress-bar-size-s-thickness: var(--spectrum-progress-bar-thickness-small); + --system-progress-bar-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-progress-bar-size-l-size-default: var(--system-progress-bar-size-2500); --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); - --system-progress-bar-size-l-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-progress-bar-size-xl-size-default: var( - --system-progress-bar-size-2800 - ); + --system-progress-bar-size-l-thickness: var(--spectrum-progress-bar-thickness-large); + --system-progress-bar-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200); + --system-progress-bar-size-xl-size-default: var(--system-progress-bar-size-2800); --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); - --system-progress-bar-size-xl-thickness: var( - --spectrum-progress-bar-thickness-extra-large - ); - --system-progress-bar-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); + --system-progress-bar-size-xl-thickness: var(--spectrum-progress-bar-thickness-extra-large); + --system-progress-bar-size-xl-spacing-top-to-text: var(--spectrum-component-top-to-text-300); --system-progress-circle-track-border-color: var(--spectrum-gray-200); - --system-progress-circle-track-border-color-over-background: var( - --spectrum-transparent-white-400 - ); - --system-progress-circle-fill-border-color-over-background: var( - --spectrum-transparent-white-1000 - ); + --system-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-400); + --system-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-1000); --system-radio-button-border-color-default: var(--spectrum-gray-600); --system-radio-button-border-color-hover: var(--spectrum-gray-700); --system-radio-button-border-color-down: var(--spectrum-gray-800); --system-radio-button-border-color-focus: var(--spectrum-gray-700); - --system-radio-neutral-content-color: var( - --spectrum-neutral-content-color-default - ); - --system-radio-neutral-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-radio-neutral-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-radio-neutral-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-radio-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); + --system-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); + --system-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down); + --system-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-radio-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-radio-disabled-border-color: var( - --spectrum-disabled-content-color - ); + --system-radio-disabled-content-color: var(--spectrum-disabled-content-color); + --system-radio-disabled-border-color: var(--spectrum-disabled-content-color); --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); - --system-radio-emphasized-accent-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-accent-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-accent-color-focus: var( - --spectrum-accent-color-1000 - ); + --system-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000); + --system-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); + --system-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); --system-radio-border-width: var(--spectrum-border-width-200); --system-radio-button-background-color: var(--spectrum-gray-50); - --system-radio-button-checked-border-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-radio-button-checked-border-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-radio-button-checked-border-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-radio-button-checked-border-color-focus: var( - --spectrum-neutral-background-color-selected-focus - ); + --system-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); + --system-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down); + --system-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus); --system-radio-line-height: var(--spectrum-line-height-100); --system-radio-animation-duration: var(--spectrum-animation-duration-100); --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); @@ -868,89 +435,43 @@ --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); --system-radio-height: var(--spectrum-component-height-100); --system-radio-size-m-height: var(--spectrum-component-height-100); - --system-radio-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --system-radio-size-m-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); + --system-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); + --system-radio-size-m-button-control-size: var(--spectrum-radio-button-control-size-medium); --system-radio-text-to-control: var(--spectrum-text-to-control-100); --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-size-m-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-radio-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-size-m-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); - --system-radio-size-m-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); + --system-radio-size-m-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-radio-size-m-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); + --system-radio-size-m-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); --system-radio-font-size: var(--spectrum-font-size-100); --system-radio-size-m-font-size: var(--spectrum-font-size-100); --system-radio-size-s-height: var(--spectrum-component-height-75); - --system-radio-size-s-button-control-size: var( - --spectrum-radio-button-control-size-small - ); + --system-radio-size-s-button-control-size: var(--spectrum-radio-button-control-size-small); --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); - --system-radio-size-s-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-radio-size-s-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-radio-size-s-button-top-to-control: var( - --spectrum-radio-button-top-to-control-small - ); + --system-radio-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-radio-size-s-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-radio-size-s-button-top-to-control: var(--spectrum-radio-button-top-to-control-small); --system-radio-size-s-font-size: var(--spectrum-font-size-75); --system-radio-size-l-height: var(--spectrum-component-height-200); - --system-radio-size-l-button-control-size: var( - --spectrum-radio-button-control-size-large - ); + --system-radio-size-l-button-control-size: var(--spectrum-radio-button-control-size-large); --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); - --system-radio-size-l-label-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-radio-size-l-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-radio-size-l-button-top-to-control: var( - --spectrum-radio-button-top-to-control-large - ); + --system-radio-size-l-label-top-to-text: var(--spectrum-component-top-to-text-200); + --system-radio-size-l-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --system-radio-size-l-button-top-to-control: var(--spectrum-radio-button-top-to-control-large); --system-radio-size-l-font-size: var(--spectrum-font-size-200); --system-radio-size-xl-height: var(--spectrum-component-height-300); - --system-radio-size-xl-button-control-size: var( - --spectrum-radio-button-control-size-extra-large - ); + --system-radio-size-xl-button-control-size: var(--spectrum-radio-button-control-size-extra-large); --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); - --system-radio-size-xl-label-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-radio-size-xl-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-radio-size-xl-button-top-to-control: var( - --spectrum-radio-button-top-to-control-extra-large - ); + --system-radio-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-300); + --system-radio-size-xl-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --system-radio-size-xl-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large); --system-radio-size-xl-font-size: var(--spectrum-font-size-300); - --system-radio-emphasized-button-checked-border-color-default: var( - --spectrum-accent-color-900 - ); - --system-radio-emphasized-button-checked-border-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-button-checked-border-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-button-checked-border-color-focus: var( - --spectrum-accent-color-1000 - ); + --system-radio-emphasized-button-checked-border-color-default: var(--spectrum-accent-color-900); + --system-radio-emphasized-button-checked-border-color-hover: var(--spectrum-accent-color-1000); + --system-radio-emphasized-button-checked-border-color-down: var(--spectrum-accent-color-1100); + --system-radio-emphasized-button-checked-border-color-focus: var(--spectrum-accent-color-1000); --system-search-border-color-default: var(--spectrum-gray-500); --system-search-border-color-hover: var(--spectrum-gray-600); --system-search-border-color-focus: var(--spectrum-gray-800); @@ -961,34 +482,20 @@ --system-search-border-color-disabled: var(--spectrum-gray-300); --system-search-border-radius: var(--spectrum-corner-radius-100); --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); - --system-search-edge-to-visual: var( - --spectrum-component-edge-to-visual-100 - ); - --system-search-size-m-edge-to-visual: var( - --spectrum-component-edge-to-visual-100 - ); + --system-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); + --system-search-size-m-edge-to-visual: var(--spectrum-component-edge-to-visual-100); --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-s-edge-to-visual: var( - --spectrum-component-edge-to-visual-75 - ); + --system-search-size-s-edge-to-visual: var(--spectrum-component-edge-to-visual-75); --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-l-edge-to-visual: var( - --spectrum-component-edge-to-visual-200 - ); + --system-search-size-l-edge-to-visual: var(--spectrum-component-edge-to-visual-200); --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-xl-edge-to-visual: var( - --spectrum-component-edge-to-visual-300 - ); + --system-search-size-xl-edge-to-visual: var(--spectrum-component-edge-to-visual-300); --system-search-quiet-background-color-disabled: transparent; - --system-search-quiet-border-color-disabled: var( - --spectrum-disabled-border-color - ); + --system-search-quiet-border-color-disabled: var(--spectrum-disabled-border-color); --system-side-nav-background-hover: var(--spectrum-gray-100); --system-side-nav-item-background-down: var(--spectrum-gray-200); --system-side-nav-background-key-focus: var(--spectrum-gray-100); - --system-side-nav-item-background-default-selected: var( - --spectrum-gray-100 - ); + --system-side-nav-item-background-default-selected: var(--spectrum-gray-100); --system-side-nav-background-hover-selected: var(--spectrum-gray-200); --system-side-nav-item-background-down-selected: var(--spectrum-gray-200); --system-side-nav-background-key-focus-selected: var(--spectrum-gray-100); @@ -1006,23 +513,13 @@ --system-slider-handle-border-color-hover: var(--spectrum-gray-800); --system-slider-handle-border-color-down: var(--spectrum-gray-800); --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800); - --system-slider-handle-focus-ring-color-key-focus: var( - --spectrum-focus-indicator-color - ); + --system-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); --system-slider-track-corner-radius: 2px; --system-slider-handle-border-radius: var(--spectrum-corner-radius-500); - --system-slider-size-m-handle-border-radius: var( - --spectrum-corner-radius-500 - ); - --system-slider-size-s-handle-border-radius: var( - --spectrum-corner-radius-500 - ); - --system-slider-size-l-handle-border-radius: calc( - var(--spectrum-corner-radius-500) * 4 - ); - --system-slider-size-xl-handle-border-radius: calc( - var(--spectrum-corner-radius-500) * 4 - ); + --system-slider-size-m-handle-border-radius: var(--spectrum-corner-radius-500); + --system-slider-size-s-handle-border-radius: var(--spectrum-corner-radius-500); + --system-slider-size-l-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); + --system-slider-size-xl-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); --system-split-view-background-color: var(--spectrum-gray-75); --system-split-view-handle-background-color: var(--spectrum-gray-200); --system-split-view-gripper-border-radius: 2px; @@ -1038,94 +535,49 @@ --system-stepper-buttons-background-color: var(--spectrum-gray-100); --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); - --system-stepper-buttons-border-color-keyboard-focus: var( - --spectrum-gray-800 - ); + --system-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-800); --system-stepper-button-border-width: var(--spectrum-border-width-100); - --system-stepper-border-color-invalid: var( - --spectrum-negative-border-color-default - ); - --system-stepper-border-color-focus-invalid: var( - --spectrum-negative-border-color-focus - ); - --system-stepper-border-color-focus-hover-invalid: var( - --spectrum-negative-border-color-focus-hover - ); - --system-stepper-border-color-keyboard-focus-invalid: var( - --spectrum-negative-border-color-key-focus - ); + --system-stepper-border-color-invalid: var(--spectrum-negative-border-color-default); + --system-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus); + --system-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); + --system-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); --system-stepper-border-color-disabled: var(--spectrum-gray-300); - --system-stepper-button-border-width-disabled: var( - --spectrum-border-width-200 - ); + --system-stepper-button-border-width-disabled: var(--spectrum-border-width-200); --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); --system-stepper-quiet-buttons-border-style: none; --system-stepper-quiet-button-edge-to-fill: 0; --system-swatch-border-radius: var(--spectrum-corner-radius-100); - --system-swatch-focus-indicator-border-radius: var( - --spectrum-corner-radius-200 - ); + --system-swatch-focus-indicator-border-radius: var(--spectrum-corner-radius-200); --system-swatch-border-thickness: var(--spectrum-border-width-100); --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --system-swatch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); + --system-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-swatch-border-color-opacity: 0.51; --system-swatch-border-color-light-opacity: 0.2; - --system-swatch-border-color: rgba( - var(--spectrum-gray-1000-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-icon-border-color: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-border-color-light: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-light-opacity) - ); + --system-swatch-border-color: rgba(var(--spectrum-gray-1000-rgb), var(--system-swatch-border-color-opacity)); + --system-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-opacity)); + --system-swatch-border-color-light: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-light-opacity)); --system-swatch-border-color-selected: var(--spectrum-gray-900); --system-swatch-inner-border-color-selected: var(--spectrum-gray-25); --system-swatch-disabled-icon-color: var(--spectrum-gray-25); --system-swatch-dash-icon-color: var(--spectrum-gray-800); --system-swatch-slash-icon-color: var(--spectrum-red-900); - --system-swatch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); + --system-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); --system-swatch-size: var(--spectrum-swatch-size-medium); --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --system-swatch-size-m-disabled-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-swatch-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-m-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); + --system-swatch-size-m-disabled-icon-size: var(--spectrum-workflow-icon-size-100); + --system-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); + --system-swatch-size-m-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); - --system-swatch-size-xs-disabled-icon-size: var( - --spectrum-workflow-icon-size-50 - ); - --system-swatch-size-xs-slash-thickness: var( - --spectrum-swatch-slash-thickness-extra-small - ); + --system-swatch-size-xs-disabled-icon-size: var(--spectrum-workflow-icon-size-50); + --system-swatch-size-xs-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small); --system-swatch-size-s-size: var(--spectrum-swatch-size-small); - --system-swatch-size-s-disabled-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-swatch-size-s-slash-thickness: var( - --spectrum-swatch-slash-thickness-small - ); + --system-swatch-size-s-disabled-icon-size: var(--spectrum-workflow-icon-size-75); + --system-swatch-size-s-slash-thickness: var(--spectrum-swatch-slash-thickness-small); --system-swatch-size-l-size: var(--spectrum-swatch-size-large); - --system-swatch-size-l-disabled-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-swatch-size-l-slash-thickness: var( - --spectrum-swatch-slash-thickness-large - ); + --system-swatch-size-l-disabled-icon-size: var(--spectrum-workflow-icon-size-200); + --system-swatch-size-l-slash-thickness: var(--spectrum-swatch-slash-thickness-large); --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); @@ -1133,39 +585,23 @@ --system-switch-handle-border-color-hover: var(--spectrum-gray-700); --system-switch-handle-border-color-down: var(--spectrum-gray-800); --system-switch-handle-border-color-focus: var(--spectrum-gray-700); - --system-switch-handle-border-color-selected-default: var( - --spectrum-gray-700 - ); - --system-switch-handle-border-color-selected-hover: var( - --spectrum-gray-800 - ); + --system-switch-handle-border-color-selected-default: var(--spectrum-gray-700); + --system-switch-handle-border-color-selected-hover: var(--spectrum-gray-800); --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-focus: var( - --spectrum-gray-800 - ); + --system-switch-handle-border-color-selected-focus: var(--spectrum-gray-800); --system-switch-background-color: var(--spectrum-gray-200); --system-switch-background-color-disabled: var(--spectrum-gray-200); --system-switch-handle-background-color: var(--spectrum-gray-50); - --system-table-header-background-color: var( - --spectrum-transparent-white-25 - ); + --system-table-header-background-color: var(--spectrum-transparent-white-25); --system-table-border-color: var(--spectrum-gray-200); --system-table-divider-color: var(--spectrum-gray-200); --system-table-row-background-color: var(--spectrum-gray-25); --system-table-summary-row-background-color: var(--spectrum-gray-100); --system-table-section-header-background-color: var(--spectrum-gray-100); - --system-table-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-table-icon-color-focus-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-table-quiet-header-background-color: var( - --spectrum-transparent-white-25 - ); - --system-table-quiet-row-background-color: var( - --spectrum-transparent-white-25 - ); + --system-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-table-quiet-header-background-color: var(--spectrum-transparent-white-25); + --system-table-quiet-row-background-color: var(--spectrum-transparent-white-25); --system-tabs-font-weight: var(--spectrum-regular-font-weight); --system-tabs-divider-background-color: var(--spectrum-gray-200); --system-tag-background-color: var(--spectrum-gray-50); @@ -1179,62 +615,26 @@ --system-tag-border-color-hover: var(--spectrum-gray-800); --system-tag-border-color-active: var(--spectrum-gray-900); --system-tag-border-color-focus: var(--spectrum-gray-800); - --system-tag-content-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-tag-content-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-tag-content-color-active: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-tag-content-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); + --system-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); + --system-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down); + --system-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); --system-tag-content-color-selected: var(--spectrum-gray-25); - --system-tag-border-color-selected: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-tag-border-color-selected-hover: var( - --spectrum-neutral-subdued-background-color-hover - ); - --system-tag-border-color-selected-active: var( - --spectrum-neutral-subdued-background-color-down - ); - --system-tag-border-color-selected-focus: var( - --spectrum-neutral-subdued-background-color-key-focus - ); + --system-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default); + --system-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover); + --system-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down); + --system-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus); --system-tag-border-color-disabled: transparent; - --system-tag-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-tag-size-small-spacing-inline-start: var( - --spectrum-component-edge-to-visual-75 - ); - --system-tag-size-small-label-spacing-inline-end: var( - --spectrum-component-edge-to-text-75 - ); - --system-tag-size-small-clear-button-spacing-inline-end: var( - --spectrum-component-edge-to-visual-75 - ); - --system-tag-size-medium-spacing-inline-start: var( - --spectrum-component-edge-to-visual-100 - ); - --system-tag-size-medium-label-spacing-inline-end: var( - --spectrum-component-edge-to-text-100 - ); - --system-tag-size-medium-clear-button-spacing-inline-end: var( - --spectrum-component-edge-to-visual-100 - ); - --system-tag-size-large-spacing-inline-start: var( - --spectrum-component-edge-to-visual-200 - ); - --system-tag-size-large-label-spacing-inline-end: var( - --spectrum-component-edge-to-text-200 - ); - --system-tag-size-large-clear-button-spacing-inline-end: var( - --spectrum-component-edge-to-visual-200 - ); + --system-tag-background-color-disabled: var(--spectrum-disabled-background-color); + --system-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75); + --system-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75); + --system-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75); + --system-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100); + --system-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100); + --system-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100); + --system-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200); + --system-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200); + --system-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200); --system-textfield-background-color: var(--spectrum-gray-25); --system-textfield-background-color-disabled: var(--spectrum-gray-25); --system-textfield-border-color: var(--spectrum-gray-500); @@ -1244,25 +644,13 @@ --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-800); --system-textfield-border-color-disabled: var(--spectrum-gray-300); --system-textfield-border-width: var(--spectrum-border-width-100); - --system-textfield-icon-spacing-block-invalid: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-textfield-size-s-icon-spacing-block-invalid: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-textfield-size-l-icon-spacing-block-invalid: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-textfield-size-xl-icon-spacing-block-invalid: var( - --spectrum-component-top-to-workflow-icon-300 - ); + --system-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-100); + --system-textfield-size-s-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-75); + --system-textfield-size-l-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-200); + --system-textfield-size-xl-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-300); --system-textfield-quiet-border-color-disabled: var(--spectrum-gray-300); --system-thumbnail-border-radius: 2px; - --system-toast-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); + --system-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); --system-toast-divider-color: var(--spectrum-transparent-white-400); - --system-tooltip-backgound-color-default-neutral: var( - --spectrum-neutral-subdued-background-color-default - ); + --system-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default); } diff --git a/tools/styles/tokens/express/system-theme-bridge.css b/tools/styles/tokens/express/system-theme-bridge.css index 147b46f490..b80e423b93 100644 --- a/tools/styles/tokens/express/system-theme-bridge.css +++ b/tools/styles/tokens/express/system-theme-bridge.css @@ -10,138 +10,64 @@ --system-action-button-background-color-down: var(--spectrum-gray-400); --system-action-button-background-color-focus: var(--spectrum-gray-300); --system-action-button-background-color-disabled: var(--spectrum-gray-200); - --system-action-button-background-color-selected: var( - --spectrum-neutral-background-color-selected-default - ); - --system-action-button-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-action-button-background-color-selected-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-action-button-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); + --system-action-button-background-color-selected: var(--spectrum-neutral-background-color-selected-default); + --system-action-button-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-action-button-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); + --system-action-button-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); --system-action-button-border-color-default: transparent; --system-action-button-border-color-hover: transparent; --system-action-button-border-color-down: transparent; --system-action-button-border-color-focus: transparent; --system-action-button-border-color-disabled: transparent; --system-action-button-content-color-selected: var(--spectrum-gray-75); - --system-action-button-size-m-border-radius-default: var( - --spectrum-corner-radius-100 - ); - --system-action-button-size-xs-border-radius-default: var( - --spectrum-corner-radius-100 - ); - --system-action-button-size-s-border-radius-default: var( - --spectrum-corner-radius-100 - ); - --system-action-button-size-l-border-radius-default: var( - --spectrum-corner-radius-100 - ); - --system-action-button-size-xl-border-radius-default: var( - --spectrum-corner-radius-100 - ); + --system-action-button-size-m-border-radius-default: var(--spectrum-corner-radius-100); + --system-action-button-size-xs-border-radius-default: var(--spectrum-corner-radius-100); + --system-action-button-size-s-border-radius-default: var(--spectrum-corner-radius-100); + --system-action-button-size-l-border-radius-default: var(--spectrum-corner-radius-100); + --system-action-button-size-xl-border-radius-default: var(--spectrum-corner-radius-100); --system-action-button-quiet-background-color-default: transparent; - --system-action-button-quiet-background-color-hover: var( - --spectrum-gray-300 - ); - --system-action-button-quiet-background-color-down: var( - --spectrum-gray-400 - ); - --system-action-button-quiet-background-color-focus: var( - --spectrum-gray-300 - ); + --system-action-button-quiet-background-color-hover: var(--spectrum-gray-300); + --system-action-button-quiet-background-color-down: var(--spectrum-gray-400); + --system-action-button-quiet-background-color-focus: var(--spectrum-gray-300); --system-action-button-quiet-background-color-disabled: transparent; - --system-action-button-quiet-background-color-selected-disabled: var( - --spectrum-disabled-background-color - ); + --system-action-button-quiet-background-color-selected-disabled: var(--spectrum-disabled-background-color); --system-action-button-static-black-border-color-default: transparent; --system-action-button-static-black-border-color-hover: transparent; --system-action-button-static-black-border-color-down: transparent; --system-action-button-static-black-border-color-focus: transparent; - --system-action-button-static-black-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); + --system-action-button-static-black-border-color-disabled: var(--spectrum-disabled-static-black-border-color); --system-action-button-static-black-background-color-disabled: transparent; - --system-action-button-static-black-background-color-selected-disabled: var( - --spectrum-disabled-static-black-background-color - ); - --system-action-button-static-black-background-color-default: var( - --spectrum-transparent-black-200 - ); - --system-action-button-static-black-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-action-button-static-black-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-action-button-static-black-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-action-button-static-black-quiet-background-color-default: var( - --spectrum-transparent-black-200 - ); - --system-action-button-static-black-quiet-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-action-button-static-black-quiet-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-action-button-static-black-quiet-background-color-focus: var( - --spectrum-transparent-black-300 - ); + --system-action-button-static-black-background-color-selected-disabled: var(--spectrum-disabled-static-black-background-color); + --system-action-button-static-black-background-color-default: var(--spectrum-transparent-black-200); + --system-action-button-static-black-background-color-hover: var(--spectrum-transparent-black-300); + --system-action-button-static-black-background-color-down: var(--spectrum-transparent-black-400); + --system-action-button-static-black-background-color-focus: var(--spectrum-transparent-black-300); + --system-action-button-static-black-quiet-background-color-default: var(--spectrum-transparent-black-200); + --system-action-button-static-black-quiet-background-color-hover: var(--spectrum-transparent-black-300); + --system-action-button-static-black-quiet-background-color-down: var(--spectrum-transparent-black-400); + --system-action-button-static-black-quiet-background-color-focus: var(--spectrum-transparent-black-300); --system-action-button-static-black-quiet-background-color-disabled: transparent; --system-action-button-static-white-border-color-default: transparent; --system-action-button-static-white-border-color-hover: transparent; --system-action-button-static-white-border-color-down: transparent; --system-action-button-static-white-border-color-focus: transparent; - --system-action-button-static-white-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); + --system-action-button-static-white-border-color-disabled: var(--spectrum-disabled-static-white-border-color); --system-action-button-static-white-background-color-disabled: transparent; - --system-action-button-static-white-background-color-selected-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-action-button-static-white-background-color-default: var( - --spectrum-transparent-white-200 - ); - --system-action-button-static-white-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-action-button-static-white-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-action-button-static-white-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-action-button-static-white-quiet-background-color-default: var( - --spectrum-transparent-white-200 - ); - --system-action-button-static-white-quiet-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-action-button-static-white-quiet-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-action-button-static-white-quiet-background-color-focus: var( - --spectrum-transparent-white-300 - ); + --system-action-button-static-white-background-color-selected-disabled: var(--spectrum-disabled-static-white-background-color); + --system-action-button-static-white-background-color-default: var(--spectrum-transparent-white-200); + --system-action-button-static-white-background-color-hover: var(--spectrum-transparent-white-300); + --system-action-button-static-white-background-color-down: var(--spectrum-transparent-white-400); + --system-action-button-static-white-background-color-focus: var(--spectrum-transparent-white-300); + --system-action-button-static-white-quiet-background-color-default: var(--spectrum-transparent-white-200); + --system-action-button-static-white-quiet-background-color-hover: var(--spectrum-transparent-white-300); + --system-action-button-static-white-quiet-background-color-down: var(--spectrum-transparent-white-400); + --system-action-button-static-white-quiet-background-color-focus: var(--spectrum-transparent-white-300); --system-action-button-static-white-quiet-background-color-disabled: transparent; - --system-action-button-background-color-selected-disabled: var( - --spectrum-disabled-background-color - ); + --system-action-button-background-color-selected-disabled: var(--spectrum-disabled-background-color); --system-action-group-gap-size-compact: var(--spectrum-spacing-50); - --system-action-group-horizontal-spacing-compact: calc( - -1px * var(--spectrum-spacing-50) - ); - --system-action-group-vertical-spacing-compact: calc( - -1px * var(--spectrum-spacing-50) - ); - --system-alert-banner-neutral-background: var( - --spectrum-neutral-background-color-default - ); + --system-action-group-horizontal-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); + --system-action-group-vertical-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); + --system-alert-banner-neutral-background: var(--spectrum-neutral-background-color-default); --system-asset-folder-background-color: var(--spectrum-gray-300); --system-asset-file-background-color: var(--spectrum-gray-50); --system-asset-icon-outline-color: var(--spectrum-gray-500); @@ -154,255 +80,99 @@ --system-button-border-color-down: transparent; --system-button-border-color-focus: transparent; --system-button-background-color-disabled: transparent; - --system-button-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-selected-background-color-default: var( - --spectrum-neutral-background-color-default - ); - --system-button-selected-background-color-hover: var( - --spectrum-neutral-background-color-hover - ); - --system-button-selected-background-color-down: var( - --spectrum-neutral-background-color-down - ); - --system-button-selected-background-color-focus: var( - --spectrum-neutral-background-color-key-focus - ); + --system-button-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-selected-background-color-default: var(--spectrum-neutral-background-color-default); + --system-button-selected-background-color-hover: var(--spectrum-neutral-background-color-hover); + --system-button-selected-background-color-down: var(--spectrum-neutral-background-color-down); + --system-button-selected-background-color-focus: var(--spectrum-neutral-background-color-key-focus); --system-button-primary-content-color-default: var(--spectrum-white); --system-button-primary-content-color-hover: var(--spectrum-white); --system-button-primary-content-color-down: var(--spectrum-white); --system-button-primary-content-color-focus: var(--spectrum-white); - --system-button-primary-outline-background-color-hover: var( - --spectrum-gray-300 - ); - --system-button-primary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-primary-outline-background-color-focus: var( - --spectrum-gray-300 - ); - --system-button-secondary-background-color-default: var( - --spectrum-gray-200 - ); + --system-button-primary-outline-background-color-hover: var(--spectrum-gray-300); + --system-button-primary-outline-background-color-down: var(--spectrum-gray-400); + --system-button-primary-outline-background-color-focus: var(--spectrum-gray-300); + --system-button-secondary-background-color-default: var(--spectrum-gray-200); --system-button-secondary-background-color-hover: var(--spectrum-gray-300); --system-button-secondary-background-color-down: var(--spectrum-gray-400); --system-button-secondary-background-color-focus: var(--spectrum-gray-300); - --system-button-secondary-outline-background-color-hover: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-background-color-focus: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-border-color-default: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-border-color-down: var( - --spectrum-gray-500 - ); - --system-button-static-white-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-background-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-background-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-background-color-focus: var( - --spectrum-transparent-white-900 - ); + --system-button-secondary-outline-background-color-hover: var(--spectrum-gray-300); + --system-button-secondary-outline-background-color-down: var(--spectrum-gray-400); + --system-button-secondary-outline-background-color-focus: var(--spectrum-gray-300); + --system-button-secondary-outline-border-color-default: var(--spectrum-gray-300); + --system-button-secondary-outline-border-color-down: var(--spectrum-gray-500); + --system-button-static-white-background-color-default: var(--spectrum-transparent-white-800); + --system-button-static-white-background-color-hover: var(--spectrum-transparent-white-900); + --system-button-static-white-background-color-down: var(--spectrum-transparent-white-900); + --system-button-static-white-background-color-focus: var(--spectrum-transparent-white-900); --system-button-static-white-content-color-default: var(--spectrum-black); --system-button-static-white-content-color-hover: var(--spectrum-black); --system-button-static-white-content-color-down: var(--spectrum-black); --system-button-static-white-content-color-focus: var(--spectrum-black); - --system-button-static-white-outline-background-color-default: var( - --spectrum-transparent-white-25 - ); - --system-button-static-white-outline-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-outline-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-outline-border-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-outline-border-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-border-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-border-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-secondary-background-color-default: var( - --spectrum-transparent-white-200 - ); - --system-button-static-white-secondary-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-border-color-default: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-border-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-border-color-down: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-secondary-outline-border-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-secondary-outline-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-black-background-color-default: var( - --spectrum-transparent-black-800 - ); - --system-button-static-black-background-color-hover: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-background-color-down: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-background-color-focus: var( - --spectrum-transparent-black-900 - ); + --system-button-static-white-outline-background-color-default: var(--spectrum-transparent-white-25); + --system-button-static-white-outline-background-color-hover: var(--spectrum-transparent-white-300); + --system-button-static-white-outline-background-color-down: var(--spectrum-transparent-white-400); + --system-button-static-white-outline-background-color-focus: var(--spectrum-transparent-white-300); + --system-button-static-white-outline-content-color-default: var(--spectrum-white); + --system-button-static-white-outline-content-color-hover: var(--spectrum-white); + --system-button-static-white-outline-content-color-down: var(--spectrum-white); + --system-button-static-white-outline-content-color-focus: var(--spectrum-white); + --system-button-static-white-outline-border-color-default: var(--spectrum-transparent-white-800); + --system-button-static-white-outline-border-color-hover: var(--spectrum-transparent-white-900); + --system-button-static-white-outline-border-color-down: var(--spectrum-transparent-white-900); + --system-button-static-white-outline-border-color-focus: var(--spectrum-transparent-white-900); + --system-button-static-white-secondary-background-color-default: var(--spectrum-transparent-white-200); + --system-button-static-white-secondary-background-color-hover: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-background-color-down: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-background-color-focus: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-content-color-default: var(--spectrum-white); + --system-button-static-white-secondary-content-color-hover: var(--spectrum-white); + --system-button-static-white-secondary-content-color-down: var(--spectrum-white); + --system-button-static-white-secondary-content-color-focus: var(--spectrum-white); + --system-button-static-white-secondary-outline-border-color-default: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-outline-border-color-hover: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-outline-border-color-down: var(--spectrum-transparent-white-500); + --system-button-static-white-secondary-outline-border-color-focus: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-outline-background-color-default: var(--spectrum-transparent-white-800); + --system-button-static-white-secondary-outline-background-color-hover: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-outline-background-color-down: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-outline-background-color-focus: var(--spectrum-transparent-white-300); + --system-button-static-black-background-color-default: var(--spectrum-transparent-black-800); + --system-button-static-black-background-color-hover: var(--spectrum-transparent-black-900); + --system-button-static-black-background-color-down: var(--spectrum-transparent-black-900); + --system-button-static-black-background-color-focus: var(--spectrum-transparent-black-900); --system-button-static-black-content-color-default: var(--spectrum-white); --system-button-static-black-content-color-hover: var(--spectrum-white); --system-button-static-black-content-color-down: var(--spectrum-white); --system-button-static-black-content-color-focus: var(--spectrum-white); - --system-button-static-black-outline-background-color-default: var( - --spectrum-transparent-black-25 - ); - --system-button-static-black-outline-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-outline-border-color-default: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-border-color-hover: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-border-color-down: var( - --spectrum-transparent-black-600 - ); - --system-button-static-black-outline-border-color-focus: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-background-color-default: var( - --spectrum-transparent-black-200 - ); - --system-button-static-black-secondary-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-border-color-default: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-border-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-border-color-down: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-outline-border-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-background-color-default: var( - --spectrum-transparent-black-800 - ); - --system-button-static-black-secondary-outline-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-background-color-focus: var( - --spectrum-transparent-black-300 - ); + --system-button-static-black-outline-background-color-default: var(--spectrum-transparent-black-25); + --system-button-static-black-outline-background-color-hover: var(--spectrum-transparent-black-300); + --system-button-static-black-outline-background-color-down: var(--spectrum-transparent-black-400); + --system-button-static-black-outline-background-color-focus: var(--spectrum-transparent-black-300); + --system-button-static-black-outline-content-color-default: var(--spectrum-black); + --system-button-static-black-outline-content-color-hover: var(--spectrum-black); + --system-button-static-black-outline-content-color-down: var(--spectrum-black); + --system-button-static-black-outline-content-color-focus: var(--spectrum-black); + --system-button-static-black-outline-border-color-default: var(--spectrum-transparent-black-400); + --system-button-static-black-outline-border-color-hover: var(--spectrum-transparent-black-500); + --system-button-static-black-outline-border-color-down: var(--spectrum-transparent-black-600); + --system-button-static-black-outline-border-color-focus: var(--spectrum-transparent-black-500); + --system-button-static-black-secondary-background-color-default: var(--spectrum-transparent-black-200); + --system-button-static-black-secondary-background-color-hover: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-background-color-down: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-background-color-focus: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-content-color-default: var(--spectrum-black); + --system-button-static-black-secondary-content-color-hover: var(--spectrum-black); + --system-button-static-black-secondary-content-color-down: var(--spectrum-black); + --system-button-static-black-secondary-content-color-focus: var(--spectrum-black); + --system-button-static-black-secondary-outline-border-color-default: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-outline-border-color-hover: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-outline-border-color-down: var(--spectrum-transparent-black-500); + --system-button-static-black-secondary-outline-border-color-focus: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-outline-background-color-default: var(--spectrum-transparent-black-800); + --system-button-static-black-secondary-outline-background-color-hover: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-outline-background-color-down: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-outline-background-color-focus: var(--spectrum-transparent-black-300); --system-checkbox-control-color-default: var(--spectrum-gray-800); --system-checkbox-control-color-hover: var(--spectrum-gray-900); --system-checkbox-control-color-down: var(--spectrum-gray-900); @@ -412,9 +182,7 @@ --system-card-border-color: var(--spectrum-gray-200); --system-card-border-color-hover: var(--spectrum-gray-300); --system-card-divider-color: var(--spectrum-gray-300); - --system-card-preview-background-color: var( - --spectrum-background-base-color - ); + --system-card-preview-background-color: var(--spectrum-background-base-color); --system-card-preview-background-color-hover: var(--spectrum-gray-300); --system-clear-button-background-color: var(--spectrum-gray-200); --system-clear-button-background-color-hover: var(--spectrum-gray-300); @@ -423,146 +191,60 @@ --system-clear-button-height: var(--spectrum-component-height-100); --system-clear-button-width: var(--spectrum-component-height-100); --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-clear-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-clear-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-clear-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-clear-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); + --system-clear-button-icon-color: var(--spectrum-neutral-content-color-default); + --system-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); --system-clear-button-size-s-height: var(--spectrum-component-height-75); --system-clear-button-size-s-width: var(--spectrum-component-height-75); --system-clear-button-size-l-height: var(--spectrum-component-height-200); --system-clear-button-size-l-width: var(--spectrum-component-height-200); --system-clear-button-size-xl-height: var(--spectrum-component-height-300); --system-clear-button-size-xl-width: var(--spectrum-component-height-300); - --system-clear-button-quiet-background-color: var( - --spectrum-clear-button-background-color-quiet, - transparent - ); - --system-clear-button-quiet-background-color-hover: var( - --spectrum-clear-button-background-color-hover-quiet, - transparent - ); - --system-clear-button-quiet-background-color-down: var( - --spectrum-clear-button-background-color-down-quiet, - transparent - ); - --system-clear-button-quiet-background-color-key-focus: var( - --spectrum-clear-button-background-color-key-focus-quiet, - transparent - ); - --system-clear-button-over-background-icon-color: var( - --spectrum-clear-button-icon-color-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-icon-color-hover: var( - --spectrum-clear-button-icon-color-hover-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-icon-color-down: var( - --spectrum-clear-button-icon-color-down-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-icon-color-key-focus: var( - --spectrum-clear-button-icon-color-key-focus-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-background-color: var( - --spectrum-clear-button-background-color-over-background, - transparent - ); - --system-clear-button-over-background-background-color-hover: var( - --spectrum-clear-button-background-color-hover-over-background, - var(--spectrum-transparent-white-300) - ); - --system-clear-button-over-background-background-color-down: var( - --spectrum-clear-button-background-color-hover-over-background, - var(--spectrum-transparent-white-400) - ); - --system-clear-button-over-background-background-color-key-focus: var( - --spectrum-clear-button-background-color-hover-over-background, - var(--spectrum-transparent-white-300) - ); - --system-clear-button-disabled-icon-color: var( - --spectrum-disabled-content-color - ); - --system-clear-button-disabled-icon-color-hover: var( - --spectrum-clear-button-icon-color-hover-disabled, - var(--spectrum-disabled-content-color) - ); - --system-clear-button-disabled-icon-color-down: var( - --spectrum-clear-button-icon-color-down-disabled, - var(--spectrum-disabled-content-color) - ); + --system-clear-button-quiet-background-color: var(--spectrum-clear-button-background-color-quiet, transparent); + --system-clear-button-quiet-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent); + --system-clear-button-quiet-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent); + --system-clear-button-quiet-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent); + --system-clear-button-over-background-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white)); + --system-clear-button-over-background-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white)); + --system-clear-button-over-background-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white)); + --system-clear-button-over-background-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white)); + --system-clear-button-over-background-background-color: var(--spectrum-clear-button-background-color-over-background, transparent); + --system-clear-button-over-background-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); + --system-clear-button-over-background-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); + --system-clear-button-over-background-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); + --system-clear-button-disabled-icon-color: var(--spectrum-disabled-content-color); + --system-clear-button-disabled-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); + --system-clear-button-disabled-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); --system-clear-button-disabled-background-color: transparent; --system-close-button-background-color-default: transparent; --system-close-button-background-color-hover: var(--spectrum-gray-300); --system-close-button-background-color-down: var(--spectrum-gray-400); --system-close-button-background-color-focus: var(--spectrum-gray-300); - --system-close-button-static-white-static-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-close-button-static-white-static-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-close-button-static-white-static-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-close-button-static-black-static-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-close-button-static-black-static-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-close-button-static-black-static-background-color-focus: var( - --spectrum-transparent-black-300 - ); + --system-close-button-static-white-static-background-color-hover: var(--spectrum-transparent-white-300); + --system-close-button-static-white-static-background-color-down: var(--spectrum-transparent-white-400); + --system-close-button-static-white-static-background-color-focus: var(--spectrum-transparent-white-300); + --system-close-button-static-black-static-background-color-hover: var(--spectrum-transparent-black-300); + --system-close-button-static-black-static-background-color-down: var(--spectrum-transparent-black-400); + --system-close-button-static-black-static-background-color-focus: var(--spectrum-transparent-black-300); --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); - --system-coach-indicator-min-inline-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-min-block-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-inline-size: var( - --system-coach-indicator-min-inline-size - ); - --system-coach-indicator-block-size: var( - --system-coach-indicator-min-block-size - ); - --system-coach-indicator-ring-inline-size: var( - --spectrum-coach-indicator-ring-diameter - ); - --system-coach-indicator-ring-block-size: var( - --spectrum-coach-indicator-ring-diameter - ); + --system-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); + --system-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); + --system-coach-indicator-inline-size: var(--system-coach-indicator-min-inline-size); + --system-coach-indicator-block-size: var(--system-coach-indicator-min-block-size); + --system-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter); + --system-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter); --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --system-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --system-coach-indicator-top: calc( - var(--system-coach-indicator-block-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-left: calc( - var(--system-coach-indicator-inline-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-coach-animation-indicator-ring-duration: var( - --spectrum-animation-duration-6000 - ); + --system-coach-indicator-top: calc(var(--system-coach-indicator-block-size) / 3 - var(--system-coach-indicator-ring-border-size)); + --system-coach-indicator-left: calc(var(--system-coach-indicator-inline-size) / 3 - var(--system-coach-indicator-ring-border-size)); + --system-coach-indicator-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000); --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; --system-coach-indicator-animation-name: pulse; - --system-coach-indicator-inner-animation-delay-multiple: var( - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple - ); + --system-coach-indicator-inner-animation-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple); --system-coach-indicator-animation-keyframe-0-scale: 1; --system-coach-indicator-animation-keyframe-0-opacity: 0; --system-coach-indicator-animation-keyframe-50-scale: 1.5; @@ -570,65 +252,39 @@ --system-coach-indicator-animation-keyframe-100-scale: 2; --system-coach-indicator-animation-keyframe-100-opacity: 0; --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; - --system-coach-indicator-quiet-quiet-ring-diameter-size: var( - --spectrum-coach-indicator-quiet-ring-diameter - ); + --system-coach-indicator-quiet-quiet-ring-diameter-size: var(--spectrum-coach-indicator-quiet-ring-diameter); --system-coach-indicator-quiet-animation-name: pulse-quiet; --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); --system-coach-mark-width: var(--spectrum-coach-mark-width); --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); - --system-coach-mark-media-min-height: var( - --spectrum-coach-mark-media-minimum-height - ); + --system-coach-mark-media-min-height: var(--spectrum-coach-mark-media-minimum-height); --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); --system-coach-mark-header-to-body: var(--spectrum-spacing-200); --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); --system-coach-mark-title-color: var(--spectrum-heading-color); --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-title-font-style: var( - --spectrum-heading-serif-font-style - ); - --system-coach-mark-title-text-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); + --system-coach-mark-title-font-style: var(--spectrum-heading-serif-font-style); + --system-coach-mark-title-text-font-weight: var(--spectrum-heading-sans-serif-font-weight); --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); - --system-coach-mark-title-text-line-height: var( - --spectrum-heading-line-height - ); + --system-coach-mark-title-text-line-height: var(--spectrum-heading-line-height); --system-coach-mark-content-font-color: var(--spectrum-body-color); - --system-coach-mark-content-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); + --system-coach-mark-content-font-weight: var(--spectrum-body-sans-serif-font-weight); --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-content-font-style: var( - --spectrum-body-sans-serif-font-style - ); + --system-coach-mark-content-font-style: var(--spectrum-body-sans-serif-font-style); --system-coach-mark-content-line-height: var(--spectrum-body-line-height); --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); - --system-coach-mark-step-font-weight: var( - --spectrum-body-medium-font-weight - ); + --system-coach-mark-step-font-weight: var(--spectrum-body-medium-font-weight); --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-step-font-style: var( - --spectrum-body-sans-serif-font-style - ); + --system-coach-mark-step-font-style: var(--spectrum-body-sans-serif-font-style); --system-coach-mark-step-line-height: var(--spectrum-body-line-height); - --system-coach-mark-step-font-size: var( - --spectrum-coach-mark-pagination-body-size - ); - --system-coach-mark-step-to-bottom: var( - --spectrum-coach-mark-pagination-text-to-bottom-edge - ); + --system-coach-mark-step-font-size: var(--spectrum-coach-mark-pagination-body-size); + --system-coach-mark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge); --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); - --system-coach-mark-popover-corner-radius: var( - --spectrum-corner-radius-100 - ); - --system-coach-mark-buttongroup-spacing-horizontal: var( - --spectrum-spacing-100 - ); + --system-coach-mark-popover-corner-radius: var(--spectrum-corner-radius-100); + --system-coach-mark-buttongroup-spacing-horizontal: var(--spectrum-spacing-100); --system-color-wheel-border-color: var(--spectrum-transparent-black-200); --system-combobox-border-color-default: var(--spectrum-gray-400); --system-combobox-border-color-hover: var(--spectrum-gray-500); @@ -636,51 +292,28 @@ --system-combobox-border-color-focus-hover: var(--spectrum-gray-800); --system-combobox-border-color-key-focus: var(--spectrum-gray-900); --system-combobox-readonly-input-border-color: var(--spectrum-gray-400); - --system-combobox-background-color-disabled: var( - --spectrum-disabled-background-color - ); + --system-combobox-background-color-disabled: var(--spectrum-disabled-background-color); --system-combobox-border-color-disabled: transparent; --system-divider-background-color: var(--spectrum-gray-300); - --system-divider-background-color-static-white: var( - --spectrum-transparent-white-300 - ); - --system-divider-background-color-static-black: var( - --spectrum-transparent-black-300 - ); + --system-divider-background-color-static-white: var(--spectrum-transparent-white-300); + --system-divider-background-color-static-black: var(--spectrum-transparent-black-300); --system-drop-zone-border-color: var(--spectrum-gray-300); --system-field-group-margin: var(--spectrum-spacing-300); - --system-field-group-readonly-delimiter: ','; + --system-field-group-readonly-delimiter: ","; --system-infield-button-border-width: 0; --system-infield-button-border-color: transparent; --system-infield-button-border-radius: var(--spectrum-corner-radius-75); - --system-infield-button-border-radius-reset: var( - --spectrum-corner-radius-75 - ); - --system-infield-button-stacked-top-border-radius-start-start: var( - --spectrum-corner-radius-75 - ); - --system-infield-button-stacked-bottom-border-radius-end-start: var( - --spectrum-corner-radius-75 - ); + --system-infield-button-border-radius-reset: var(--spectrum-corner-radius-75); + --system-infield-button-stacked-top-border-radius-start-start: var(--spectrum-corner-radius-75); + --system-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-corner-radius-75); --system-infield-button-background-color: var(--spectrum-gray-200); --system-infield-button-background-color-hover: var(--spectrum-gray-300); --system-infield-button-background-color-down: var(--spectrum-gray-400); - --system-infield-button-background-color-key-focus: var( - --spectrum-gray-300 - ); + --system-infield-button-background-color-key-focus: var(--spectrum-gray-300); --system-infield-button-disabled-border-color: var(--spectrum-gray-200); - --system-menu-item-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-down: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-key-focus: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); + --system-menu-item-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity)); + --system-menu-item-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity)); + --system-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity)); --system-menu-item-corner-radius: 0; --system-menu-item-focus-indicator-shadow: inset; --system-menu-item-focus-indicator-offset: 0; @@ -702,9 +335,7 @@ --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500); --system-meter-font-size: var(--spectrum-font-size-100); --system-meter-size-l-font-size: var(--spectrum-font-size-100); - --system-meter-size-l-top-to-text: var( - --spectrum-component-top-to-text-200 - ); + --system-meter-size-l-top-to-text: var(--spectrum-component-top-to-text-200); --system-modal-background-color: var(--spectrum-gray-100); --system-picker-background-color-default: var(--spectrum-gray-200); --system-picker-background-color-default-open: var(--spectrum-gray-300); @@ -726,23 +357,13 @@ --system-picker-button-background-color-key-focus: var(--spectrum-gray-300); --system-picker-button-border-color: none; --system-picker-button-border-radius: var(--spectrum-corner-radius-75); - --system-picker-button-border-radius-rounded-sided: var( - --spectrum-corner-radius-200 - ); - --system-picker-button-border-radius-sided: var( - --spectrum-corner-radius-75 - ); + --system-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); + --system-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); --system-picker-button-border-width: 0px; - --system-picker-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); + --system-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); --system-popover-border-width: 0; - --system-progress-bar-animation-ease-in-out-indeterminate: var( - --spectrum-animation-ease-in-out - ); - --system-progress-bar-animation-duration-indeterminate: var( - --spectrum-animation-duration-2000 - ); + --system-progress-bar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out); + --system-progress-bar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000); --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); --system-progress-bar-fill-size-indeterminate: 70%; --system-progress-bar-size-2400: 192px; @@ -754,122 +375,58 @@ --system-progress-bar-line-height: var(--spectrum-line-height-100); --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); - --system-progress-bar-text-color: var( - --spectrum-neutral-content-color-default - ); + --system-progress-bar-text-color: var(--spectrum-neutral-content-color-default); --system-progress-bar-track-color: var(--spectrum-gray-300); --system-progress-bar-fill-color: var(--spectrum-accent-color-900); --system-progress-bar-label-and-value-white: var(--spectrum-white); - --system-progress-bar-track-color-white: var( - --spectrum-transparent-white-300 - ); + --system-progress-bar-track-color-white: var(--spectrum-transparent-white-300); --system-progress-bar-fill-color-white: var(--spectrum-white); --system-progress-bar-size-default: var(--system-progress-bar-size-2400); - --system-progress-bar-size-m-size-default: var( - --system-progress-bar-size-2400 - ); + --system-progress-bar-size-m-size-default: var(--system-progress-bar-size-2400); --system-progress-bar-font-size: var(--spectrum-font-size-75); --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); - --system-progress-bar-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-m-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-m-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-s-size-default: var( - --system-progress-bar-size-2400 - ); + --system-progress-bar-thickness: var(--spectrum-progress-bar-thickness-large); + --system-progress-bar-size-m-thickness: var(--spectrum-progress-bar-thickness-large); + --system-progress-bar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-progress-bar-size-m-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-progress-bar-size-s-size-default: var(--system-progress-bar-size-2400); --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-s-thickness: var( - --spectrum-progress-bar-thickness-small - ); - --system-progress-bar-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-l-size-default: var( - --system-progress-bar-size-2500 - ); + --system-progress-bar-size-s-thickness: var(--spectrum-progress-bar-thickness-small); + --system-progress-bar-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-progress-bar-size-l-size-default: var(--system-progress-bar-size-2500); --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); - --system-progress-bar-size-l-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-progress-bar-size-xl-size-default: var( - --system-progress-bar-size-2800 - ); + --system-progress-bar-size-l-thickness: var(--spectrum-progress-bar-thickness-large); + --system-progress-bar-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200); + --system-progress-bar-size-xl-size-default: var(--system-progress-bar-size-2800); --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); - --system-progress-bar-size-xl-thickness: var( - --spectrum-progress-bar-thickness-extra-large - ); - --system-progress-bar-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); + --system-progress-bar-size-xl-thickness: var(--spectrum-progress-bar-thickness-extra-large); + --system-progress-bar-size-xl-spacing-top-to-text: var(--spectrum-component-top-to-text-300); --system-progress-circle-track-border-color: var(--spectrum-gray-300); - --system-progress-circle-track-border-color-over-background: var( - --spectrum-transparent-white-300 - ); - --system-progress-circle-fill-border-color-over-background: var( - --spectrum-transparent-white-900 - ); + --system-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300); + --system-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900); --system-radio-button-border-color-default: var(--spectrum-gray-800); --system-radio-button-border-color-hover: var(--spectrum-gray-900); --system-radio-button-border-color-down: var(--spectrum-gray-900); --system-radio-button-border-color-focus: var(--spectrum-gray-900); - --system-radio-neutral-content-color: var( - --spectrum-neutral-content-color-default - ); - --system-radio-neutral-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-radio-neutral-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-radio-neutral-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-radio-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); + --system-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); + --system-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down); + --system-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-radio-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-radio-disabled-border-color: var( - --spectrum-disabled-content-color - ); + --system-radio-disabled-content-color: var(--spectrum-disabled-content-color); + --system-radio-disabled-border-color: var(--spectrum-disabled-content-color); --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); - --system-radio-emphasized-accent-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-accent-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-accent-color-focus: var( - --spectrum-accent-color-1000 - ); + --system-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000); + --system-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); + --system-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); --system-radio-border-width: var(--spectrum-border-width-200); --system-radio-button-background-color: var(--spectrum-gray-50); - --system-radio-button-checked-border-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-radio-button-checked-border-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-radio-button-checked-border-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-radio-button-checked-border-color-focus: var( - --spectrum-neutral-background-color-selected-focus - ); + --system-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); + --system-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down); + --system-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus); --system-radio-line-height: var(--spectrum-line-height-100); --system-radio-animation-duration: var(--spectrum-animation-duration-100); --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); @@ -877,141 +434,67 @@ --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); --system-radio-height: var(--spectrum-component-height-100); --system-radio-size-m-height: var(--spectrum-component-height-100); - --system-radio-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --system-radio-size-m-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); + --system-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); + --system-radio-size-m-button-control-size: var(--spectrum-radio-button-control-size-medium); --system-radio-text-to-control: var(--spectrum-text-to-control-100); --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-size-m-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-radio-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-size-m-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); - --system-radio-size-m-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); + --system-radio-size-m-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-radio-size-m-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); + --system-radio-size-m-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); --system-radio-font-size: var(--spectrum-font-size-100); --system-radio-size-m-font-size: var(--spectrum-font-size-100); --system-radio-size-s-height: var(--spectrum-component-height-75); - --system-radio-size-s-button-control-size: var( - --spectrum-radio-button-control-size-small - ); + --system-radio-size-s-button-control-size: var(--spectrum-radio-button-control-size-small); --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); - --system-radio-size-s-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-radio-size-s-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-radio-size-s-button-top-to-control: var( - --spectrum-radio-button-top-to-control-small - ); + --system-radio-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-radio-size-s-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-radio-size-s-button-top-to-control: var(--spectrum-radio-button-top-to-control-small); --system-radio-size-s-font-size: var(--spectrum-font-size-75); --system-radio-size-l-height: var(--spectrum-component-height-200); - --system-radio-size-l-button-control-size: var( - --spectrum-radio-button-control-size-large - ); + --system-radio-size-l-button-control-size: var(--spectrum-radio-button-control-size-large); --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); - --system-radio-size-l-label-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-radio-size-l-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-radio-size-l-button-top-to-control: var( - --spectrum-radio-button-top-to-control-large - ); + --system-radio-size-l-label-top-to-text: var(--spectrum-component-top-to-text-200); + --system-radio-size-l-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --system-radio-size-l-button-top-to-control: var(--spectrum-radio-button-top-to-control-large); --system-radio-size-l-font-size: var(--spectrum-font-size-200); --system-radio-size-xl-height: var(--spectrum-component-height-300); - --system-radio-size-xl-button-control-size: var( - --spectrum-radio-button-control-size-extra-large - ); + --system-radio-size-xl-button-control-size: var(--spectrum-radio-button-control-size-extra-large); --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); - --system-radio-size-xl-label-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-radio-size-xl-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-radio-size-xl-button-top-to-control: var( - --spectrum-radio-button-top-to-control-extra-large - ); + --system-radio-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-300); + --system-radio-size-xl-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --system-radio-size-xl-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large); --system-radio-size-xl-font-size: var(--spectrum-font-size-300); - --system-radio-emphasized-button-checked-border-color-default: var( - --spectrum-accent-color-900 - ); - --system-radio-emphasized-button-checked-border-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-button-checked-border-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-button-checked-border-color-focus: var( - --spectrum-accent-color-1000 - ); + --system-radio-emphasized-button-checked-border-color-default: var(--spectrum-accent-color-900); + --system-radio-emphasized-button-checked-border-color-hover: var(--spectrum-accent-color-1000); + --system-radio-emphasized-button-checked-border-color-down: var(--spectrum-accent-color-1100); + --system-radio-emphasized-button-checked-border-color-focus: var(--spectrum-accent-color-1000); --system-search-border-color-default: var(--spectrum-gray-400); --system-search-border-color-hover: var(--spectrum-gray-500); --system-search-border-color-focus: var(--spectrum-gray-800); --system-search-border-color-focus-hover: var(--spectrum-gray-900); --system-search-border-color-key-focus: var(--spectrum-gray-900); --system-search-background-color: var(--spectrum-gray-50); - --system-search-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-border-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-border-radius: calc( - var(--spectrum-component-height-100) / 2 - ); - --system-search-size-m-border-radius: calc( - var(--spectrum-component-height-100) / 2 - ); - --system-search-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-100 - ); - --system-search-size-m-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-100 - ); - --system-search-size-s-border-radius: calc( - var(--spectrum-component-height-75) / 2 - ); - --system-search-size-s-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-75 - ); - --system-search-size-l-border-radius: calc( - var(--spectrum-component-height-200) / 2 - ); - --system-search-size-l-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-200 - ); - --system-search-size-xl-border-radius: calc( - var(--spectrum-component-height-300) / 2 - ); - --system-search-size-xl-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-300 - ); + --system-search-background-color-disabled: var(--spectrum-disabled-background-color); + --system-search-border-color-disabled: var(--spectrum-disabled-background-color); + --system-search-border-radius: calc(var(--spectrum-component-height-100) / 2); + --system-search-size-m-border-radius: calc(var(--spectrum-component-height-100) / 2); + --system-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100); + --system-search-size-m-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100); + --system-search-size-s-border-radius: calc(var(--spectrum-component-height-75) / 2); + --system-search-size-s-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-75); + --system-search-size-l-border-radius: calc(var(--spectrum-component-height-200) / 2); + --system-search-size-l-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200); + --system-search-size-xl-border-radius: calc(var(--spectrum-component-height-300) / 2); + --system-search-size-xl-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300); --system-search-quiet-background-color-disabled: transparent; - --system-search-quiet-border-color-disabled: var( - --spectrum-disabled-border-color - ); + --system-search-quiet-border-color-disabled: var(--spectrum-disabled-border-color); --system-side-nav-background-hover: var(--spectrum-gray-200); --system-side-nav-item-background-down: var(--spectrum-gray-300); --system-side-nav-background-key-focus: var(--spectrum-gray-200); - --system-side-nav-item-background-default-selected: var( - --spectrum-gray-200 - ); + --system-side-nav-item-background-default-selected: var(--spectrum-gray-200); --system-side-nav-background-hover-selected: var(--spectrum-gray-300); --system-side-nav-item-background-down-selected: var(--spectrum-gray-300); --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200); @@ -1029,23 +512,13 @@ --system-slider-handle-border-color-hover: var(--spectrum-gray-900); --system-slider-handle-border-color-down: var(--spectrum-gray-900); --system-slider-handle-border-color-key-focus: var(--spectrum-gray-900); - --system-slider-handle-focus-ring-color-key-focus: var( - --spectrum-focus-indicator-color - ); + --system-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); --system-slider-track-corner-radius: var(--spectrum-corner-radius-75); --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); - --system-slider-size-m-handle-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-slider-size-s-handle-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-slider-size-l-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); - --system-slider-size-xl-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); + --system-slider-size-m-handle-border-radius: var(--spectrum-corner-radius-200); + --system-slider-size-s-handle-border-radius: var(--spectrum-corner-radius-200); + --system-slider-size-l-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); + --system-slider-size-xl-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); --system-split-view-background-color: var(--spectrum-gray-100); --system-split-view-handle-background-color: var(--spectrum-gray-300); --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); @@ -1067,80 +540,43 @@ --system-stepper-border-color-focus-invalid: transparent; --system-stepper-border-color-focus-hover-invalid: transparent; --system-stepper-border-color-keyboard-focus-invalid: transparent; - --system-stepper-border-color-disabled: var( - --spectrum-disabled-background-color - ); + --system-stepper-border-color-disabled: var(--spectrum-disabled-background-color); --system-stepper-button-border-width-disabled: 0; - --system-stepper-buttons-background-color-disabled: var( - --spectrum-disabled-background-color - ); + --system-stepper-buttons-background-color-disabled: var(--spectrum-disabled-background-color); --system-stepper-quiet-buttons-border-style: none; --system-stepper-quiet-button-edge-to-fill: 0; --system-swatch-border-radius: var(--spectrum-corner-radius-100); - --system-swatch-focus-indicator-border-radius: var( - --spectrum-corner-radius-200 - ); + --system-swatch-focus-indicator-border-radius: var(--spectrum-corner-radius-200); --system-swatch-border-thickness: var(--spectrum-border-width-100); --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --system-swatch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); + --system-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-swatch-border-color-opacity: 0.51; --system-swatch-border-color-light-opacity: 0.2; - --system-swatch-border-color: rgba( - var(--spectrum-gray-900-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-icon-border-color: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-border-color-light: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-light-opacity) - ); + --system-swatch-border-color: rgba(var(--spectrum-gray-900-rgb), var(--system-swatch-border-color-opacity)); + --system-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-opacity)); + --system-swatch-border-color-light: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-light-opacity)); --system-swatch-border-color-selected: var(--spectrum-gray-900); --system-swatch-inner-border-color-selected: var(--spectrum-gray-50); --system-swatch-disabled-icon-color: var(--spectrum-gray-50); --system-swatch-dash-icon-color: var(--spectrum-gray-800); --system-swatch-slash-icon-color: var(--spectrum-red-900); - --system-swatch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); + --system-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); --system-swatch-size: var(--spectrum-swatch-size-medium); --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --system-swatch-size-m-disabled-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-swatch-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-m-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); + --system-swatch-size-m-disabled-icon-size: var(--spectrum-workflow-icon-size-100); + --system-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); + --system-swatch-size-m-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); - --system-swatch-size-xs-disabled-icon-size: var( - --spectrum-workflow-icon-size-50 - ); - --system-swatch-size-xs-slash-thickness: var( - --spectrum-swatch-slash-thickness-extra-small - ); + --system-swatch-size-xs-disabled-icon-size: var(--spectrum-workflow-icon-size-50); + --system-swatch-size-xs-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small); --system-swatch-size-s-size: var(--spectrum-swatch-size-small); - --system-swatch-size-s-disabled-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-swatch-size-s-slash-thickness: var( - --spectrum-swatch-slash-thickness-small - ); + --system-swatch-size-s-disabled-icon-size: var(--spectrum-workflow-icon-size-75); + --system-swatch-size-s-slash-thickness: var(--spectrum-swatch-slash-thickness-small); --system-swatch-size-l-size: var(--spectrum-swatch-size-large); - --system-swatch-size-l-disabled-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-swatch-size-l-slash-thickness: var( - --spectrum-swatch-slash-thickness-large - ); + --system-swatch-size-l-disabled-icon-size: var(--spectrum-workflow-icon-size-200); + --system-swatch-size-l-slash-thickness: var(--spectrum-swatch-slash-thickness-large); --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); @@ -1148,39 +584,23 @@ --system-switch-handle-border-color-hover: var(--spectrum-gray-900); --system-switch-handle-border-color-down: var(--spectrum-gray-900); --system-switch-handle-border-color-focus: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-default: var( - --spectrum-gray-800 - ); - --system-switch-handle-border-color-selected-hover: var( - --spectrum-gray-900 - ); + --system-switch-handle-border-color-selected-default: var(--spectrum-gray-800); + --system-switch-handle-border-color-selected-hover: var(--spectrum-gray-900); --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-focus: var( - --spectrum-gray-900 - ); + --system-switch-handle-border-color-selected-focus: var(--spectrum-gray-900); --system-switch-background-color: var(--spectrum-gray-300); --system-switch-background-color-disabled: var(--spectrum-gray-300); --system-switch-handle-background-color: var(--spectrum-gray-75); - --system-table-header-background-color: var( - --spectrum-transparent-white-100 - ); + --system-table-header-background-color: var(--spectrum-transparent-white-100); --system-table-border-color: var(--spectrum-gray-300); --system-table-divider-color: var(--spectrum-gray-300); --system-table-row-background-color: var(--spectrum-gray-50); --system-table-summary-row-background-color: var(--spectrum-gray-200); --system-table-section-header-background-color: var(--spectrum-gray-200); - --system-table-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-table-icon-color-focus-hover: var( - --spectrum-neutral-subdued-content-down - ); - --system-table-quiet-header-background-color: var( - --spectrum-transparent-white-100 - ); - --system-table-quiet-row-background-color: var( - --spectrum-transparent-white-100 - ); + --system-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-down); + --system-table-quiet-header-background-color: var(--spectrum-transparent-white-100); + --system-table-quiet-row-background-color: var(--spectrum-transparent-white-100); --system-tabs-font-weight: var(--spectrum-bold-font-weight); --system-tabs-divider-background-color: var(--spectrum-gray-300); --system-tag-background-color: transparent; @@ -1188,70 +608,34 @@ --system-tag-background-color-active: var(--spectrum-gray-400); --system-tag-background-color-focus: var(--spectrum-gray-300); --system-tag-size-small-corner-radius: var(--spectrum-component-height-75); - --system-tag-size-medium-corner-radius: var( - --spectrum-component-height-100 - ); + --system-tag-size-medium-corner-radius: var(--spectrum-component-height-100); --system-tag-size-large-corner-radius: var(--spectrum-component-height-200); --system-tag-border-color: var(--spectrum-gray-300); --system-tag-border-color-hover: var(--spectrum-gray-400); --system-tag-border-color-active: var(--spectrum-gray-500); --system-tag-border-color-focus: var(--spectrum-gray-400); --system-tag-content-color: var(--spectrum-neutral-content-color-default); - --system-tag-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-tag-content-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-tag-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); + --system-tag-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-tag-content-color-active: var(--spectrum-neutral-content-color-down); + --system-tag-content-color-focus: var(--spectrum-neutral-content-color-key-focus); --system-tag-content-color-selected: var(--spectrum-gray-50); - --system-tag-border-color-selected: var( - --spectrum-neutral-background-color-default - ); - --system-tag-border-color-selected-hover: var( - --spectrum-neutral-background-color-hover - ); - --system-tag-border-color-selected-active: var( - --spectrum-neutral-background-color-down - ); - --system-tag-border-color-selected-focus: var( - --spectrum-neutral-background-color-key-focus - ); + --system-tag-border-color-selected: var(--spectrum-neutral-background-color-default); + --system-tag-border-color-selected-hover: var(--spectrum-neutral-background-color-hover); + --system-tag-border-color-selected-active: var(--spectrum-neutral-background-color-down); + --system-tag-border-color-selected-focus: var(--spectrum-neutral-background-color-key-focus); --system-tag-border-color-disabled: var(--spectrum-disabled-border-color); --system-tag-background-color-disabled: transparent; - --system-tag-size-small-spacing-inline-start: var( - --spectrum-component-pill-edge-to-visual-75 - ); - --system-tag-size-small-label-spacing-inline-end: var( - --spectrum-component-pill-edge-to-text-75 - ); - --system-tag-size-small-clear-button-spacing-inline-end: var( - --spectrum-component-pill-edge-to-visual-75 - ); - --system-tag-size-medium-spacing-inline-start: var( - --spectrum-component-pill-edge-to-visual-100 - ); - --system-tag-size-medium-label-spacing-inline-end: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-tag-size-medium-clear-button-spacing-inline-end: var( - --spectrum-component-pill-edge-to-visual-100 - ); - --system-tag-size-large-spacing-inline-start: var( - --spectrum-component-pill-edge-to-visual-200 - ); - --system-tag-size-large-label-spacing-inline-end: var( - --spectrum-component-pill-edge-to-text-200 - ); - --system-tag-size-large-clear-button-spacing-inline-end: var( - --spectrum-component-pill-edge-to-visual-200 - ); + --system-tag-size-small-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-75); + --system-tag-size-small-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-75); + --system-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-75); + --system-tag-size-medium-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-100); + --system-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-100); + --system-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-100); + --system-tag-size-large-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-200); + --system-tag-size-large-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-200); + --system-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-200); --system-textfield-background-color: var(--spectrum-gray-50); - --system-textfield-background-color-disabled: var( - --spectrum-disabled-background-color - ); + --system-textfield-background-color-disabled: var(--spectrum-disabled-background-color); --system-textfield-border-color: var(--spectrum-gray-400); --system-textfield-border-color-hover: var(--spectrum-gray-500); --system-textfield-border-color-focus: var(--spectrum-gray-800); @@ -1259,25 +643,13 @@ --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); --system-textfield-border-color-disabled: var(--spectrum-gray-200); --system-textfield-border-width: var(--spectrum-border-width-200); - --system-textfield-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-size-s-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-textfield-size-l-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-textfield-size-xl-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-extra-large - ); + --system-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); + --system-textfield-size-s-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small); + --system-textfield-size-l-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large); + --system-textfield-size-xl-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large); --system-textfield-quiet-border-color-disabled: var(--spectrum-gray-300); --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); - --system-toast-background-color-default: var( - --spectrum-neutral-background-color-default - ); + --system-toast-background-color-default: var(--spectrum-neutral-background-color-default); --system-toast-divider-color: var(--spectrum-transparent-white-300); - --system-tooltip-backgound-color-default-neutral: var( - --spectrum-neutral-background-color-default - ); + --system-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-background-color-default); } diff --git a/tools/styles/tokens/spectrum/system-theme-bridge.css b/tools/styles/tokens/spectrum/system-theme-bridge.css index 58492b99d2..84ecadffc5 100644 --- a/tools/styles/tokens/spectrum/system-theme-bridge.css +++ b/tools/styles/tokens/spectrum/system-theme-bridge.css @@ -10,144 +10,64 @@ --system-action-button-background-color-down: var(--spectrum-gray-300); --system-action-button-background-color-focus: var(--spectrum-gray-200); --system-action-button-background-color-disabled: transparent; - --system-action-button-background-color-selected: var( - --spectrum-neutral-background-color-selected-default - ); - --system-action-button-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-action-button-background-color-selected-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-action-button-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); + --system-action-button-background-color-selected: var(--spectrum-neutral-background-color-selected-default); + --system-action-button-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-action-button-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); + --system-action-button-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); --system-action-button-border-color-default: var(--spectrum-gray-400); --system-action-button-border-color-hover: var(--spectrum-gray-500); --system-action-button-border-color-down: var(--spectrum-gray-600); --system-action-button-border-color-focus: var(--spectrum-gray-500); - --system-action-button-border-color-disabled: var( - --spectrum-disabled-border-color - ); + --system-action-button-border-color-disabled: var(--spectrum-disabled-border-color); --system-action-button-content-color-selected: var(--spectrum-gray-75); - --system-action-button-size-m-border-radius-default: var( - --spectrum-corner-radius-100 - ); - --system-action-button-size-xs-border-radius-default: var( - --spectrum-corner-radius-100 - ); - --system-action-button-size-s-border-radius-default: var( - --spectrum-corner-radius-100 - ); - --system-action-button-size-l-border-radius-default: var( - --spectrum-corner-radius-100 - ); - --system-action-button-size-xl-border-radius-default: var( - --spectrum-corner-radius-100 - ); + --system-action-button-size-m-border-radius-default: var(--spectrum-corner-radius-100); + --system-action-button-size-xs-border-radius-default: var(--spectrum-corner-radius-100); + --system-action-button-size-s-border-radius-default: var(--spectrum-corner-radius-100); + --system-action-button-size-l-border-radius-default: var(--spectrum-corner-radius-100); + --system-action-button-size-xl-border-radius-default: var(--spectrum-corner-radius-100); --system-action-button-quiet-background-color-default: transparent; - --system-action-button-quiet-background-color-hover: var( - --spectrum-gray-200 - ); - --system-action-button-quiet-background-color-down: var( - --spectrum-gray-300 - ); - --system-action-button-quiet-background-color-focus: var( - --spectrum-gray-200 - ); + --system-action-button-quiet-background-color-hover: var(--spectrum-gray-200); + --system-action-button-quiet-background-color-down: var(--spectrum-gray-300); + --system-action-button-quiet-background-color-focus: var(--spectrum-gray-200); --system-action-button-quiet-background-color-disabled: transparent; - --system-action-button-quiet-background-color-selected-disabled: var( - --spectrum-disabled-background-color - ); - --system-action-button-static-black-border-color-default: var( - --spectrum-transparent-black-400 - ); - --system-action-button-static-black-border-color-hover: var( - --spectrum-transparent-black-500 - ); - --system-action-button-static-black-border-color-down: var( - --spectrum-transparent-black-600 - ); - --system-action-button-static-black-border-color-focus: var( - --spectrum-transparent-black-500 - ); - --system-action-button-static-black-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); + --system-action-button-quiet-background-color-selected-disabled: var(--spectrum-disabled-background-color); + --system-action-button-static-black-border-color-default: var(--spectrum-transparent-black-400); + --system-action-button-static-black-border-color-hover: var(--spectrum-transparent-black-500); + --system-action-button-static-black-border-color-down: var(--spectrum-transparent-black-600); + --system-action-button-static-black-border-color-focus: var(--spectrum-transparent-black-500); + --system-action-button-static-black-border-color-disabled: var(--spectrum-disabled-static-black-border-color); --system-action-button-static-black-background-color-disabled: transparent; - --system-action-button-static-black-background-color-selected-disabled: var( - --spectrum-disabled-static-black-background-color - ); + --system-action-button-static-black-background-color-selected-disabled: var(--spectrum-disabled-static-black-background-color); --system-action-button-static-black-background-color-default: transparent; - --system-action-button-static-black-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-action-button-static-black-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-action-button-static-black-background-color-focus: var( - --spectrum-transparent-black-300 - ); + --system-action-button-static-black-background-color-hover: var(--spectrum-transparent-black-300); + --system-action-button-static-black-background-color-down: var(--spectrum-transparent-black-400); + --system-action-button-static-black-background-color-focus: var(--spectrum-transparent-black-300); --system-action-button-static-black-quiet-background-color-default: transparent; - --system-action-button-static-black-quiet-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-action-button-static-black-quiet-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-action-button-static-black-quiet-background-color-focus: var( - --spectrum-transparent-black-300 - ); + --system-action-button-static-black-quiet-background-color-hover: var(--spectrum-transparent-black-300); + --system-action-button-static-black-quiet-background-color-down: var(--spectrum-transparent-black-400); + --system-action-button-static-black-quiet-background-color-focus: var(--spectrum-transparent-black-300); --system-action-button-static-black-quiet-background-color-disabled: transparent; - --system-action-button-static-white-border-color-default: var( - --spectrum-transparent-white-400 - ); - --system-action-button-static-white-border-color-hover: var( - --spectrum-transparent-white-500 - ); - --system-action-button-static-white-border-color-down: var( - --spectrum-transparent-white-600 - ); - --system-action-button-static-white-border-color-focus: var( - --spectrum-transparent-white-500 - ); - --system-action-button-static-white-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); + --system-action-button-static-white-border-color-default: var(--spectrum-transparent-white-400); + --system-action-button-static-white-border-color-hover: var(--spectrum-transparent-white-500); + --system-action-button-static-white-border-color-down: var(--spectrum-transparent-white-600); + --system-action-button-static-white-border-color-focus: var(--spectrum-transparent-white-500); + --system-action-button-static-white-border-color-disabled: var(--spectrum-disabled-static-white-border-color); --system-action-button-static-white-background-color-disabled: transparent; - --system-action-button-static-white-background-color-selected-disabled: var( - --spectrum-disabled-static-white-background-color - ); + --system-action-button-static-white-background-color-selected-disabled: var(--spectrum-disabled-static-white-background-color); --system-action-button-static-white-background-color-default: transparent; - --system-action-button-static-white-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-action-button-static-white-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-action-button-static-white-background-color-focus: var( - --spectrum-transparent-white-300 - ); + --system-action-button-static-white-background-color-hover: var(--spectrum-transparent-white-300); + --system-action-button-static-white-background-color-down: var(--spectrum-transparent-white-400); + --system-action-button-static-white-background-color-focus: var(--spectrum-transparent-white-300); --system-action-button-static-white-quiet-background-color-default: transparent; - --system-action-button-static-white-quiet-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-action-button-static-white-quiet-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-action-button-static-white-quiet-background-color-focus: var( - --spectrum-transparent-white-300 - ); + --system-action-button-static-white-quiet-background-color-hover: var(--spectrum-transparent-white-300); + --system-action-button-static-white-quiet-background-color-down: var(--spectrum-transparent-white-400); + --system-action-button-static-white-quiet-background-color-focus: var(--spectrum-transparent-white-300); --system-action-button-static-white-quiet-background-color-disabled: transparent; - --system-action-button-background-color-selected-disabled: var( - --spectrum-disabled-background-color - ); + --system-action-button-background-color-selected-disabled: var(--spectrum-disabled-background-color); --system-action-group-gap-size-compact: 0; --system-action-group-horizontal-spacing-compact: -1px; --system-action-group-vertical-spacing-compact: -1px; - --system-alert-banner-neutral-background: var( - --spectrum-neutral-subdued-background-color-default - ); + --system-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default); --system-asset-folder-background-color: var(--spectrum-gray-300); --system-asset-file-background-color: var(--spectrum-gray-50); --system-asset-icon-outline-color: var(--spectrum-gray-500); @@ -160,255 +80,99 @@ --system-button-border-color-down: var(--spectrum-gray-600); --system-button-border-color-focus: var(--spectrum-gray-500); --system-button-background-color-disabled: transparent; - --system-button-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-selected-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-button-selected-background-color-hover: var( - --spectrum-neutral-subdued-background-color-hover - ); - --system-button-selected-background-color-down: var( - --spectrum-neutral-subdued-background-color-down - ); - --system-button-selected-background-color-focus: var( - --spectrum-neutral-subdued-background-color-key-focus - ); + --system-button-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-selected-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --system-button-selected-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); + --system-button-selected-background-color-down: var(--spectrum-neutral-subdued-background-color-down); + --system-button-selected-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); --system-button-primary-content-color-default: var(--spectrum-white); --system-button-primary-content-color-hover: var(--spectrum-white); --system-button-primary-content-color-down: var(--spectrum-white); --system-button-primary-content-color-focus: var(--spectrum-white); - --system-button-primary-outline-background-color-hover: var( - --spectrum-gray-300 - ); - --system-button-primary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-primary-outline-background-color-focus: var( - --spectrum-gray-300 - ); - --system-button-secondary-background-color-default: var( - --spectrum-gray-200 - ); + --system-button-primary-outline-background-color-hover: var(--spectrum-gray-300); + --system-button-primary-outline-background-color-down: var(--spectrum-gray-400); + --system-button-primary-outline-background-color-focus: var(--spectrum-gray-300); + --system-button-secondary-background-color-default: var(--spectrum-gray-200); --system-button-secondary-background-color-hover: var(--spectrum-gray-300); --system-button-secondary-background-color-down: var(--spectrum-gray-400); --system-button-secondary-background-color-focus: var(--spectrum-gray-300); - --system-button-secondary-outline-background-color-hover: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-background-color-focus: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-border-color-default: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-border-color-down: var( - --spectrum-gray-500 - ); - --system-button-static-white-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-background-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-background-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-background-color-focus: var( - --spectrum-transparent-white-900 - ); + --system-button-secondary-outline-background-color-hover: var(--spectrum-gray-300); + --system-button-secondary-outline-background-color-down: var(--spectrum-gray-400); + --system-button-secondary-outline-background-color-focus: var(--spectrum-gray-300); + --system-button-secondary-outline-border-color-default: var(--spectrum-gray-300); + --system-button-secondary-outline-border-color-down: var(--spectrum-gray-500); + --system-button-static-white-background-color-default: var(--spectrum-transparent-white-800); + --system-button-static-white-background-color-hover: var(--spectrum-transparent-white-900); + --system-button-static-white-background-color-down: var(--spectrum-transparent-white-900); + --system-button-static-white-background-color-focus: var(--spectrum-transparent-white-900); --system-button-static-white-content-color-default: var(--spectrum-black); --system-button-static-white-content-color-hover: var(--spectrum-black); --system-button-static-white-content-color-down: var(--spectrum-black); --system-button-static-white-content-color-focus: var(--spectrum-black); - --system-button-static-white-outline-background-color-default: var( - --spectrum-transparent-white-25 - ); - --system-button-static-white-outline-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-outline-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-outline-border-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-outline-border-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-border-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-border-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-secondary-background-color-default: var( - --spectrum-transparent-white-200 - ); - --system-button-static-white-secondary-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-border-color-default: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-border-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-border-color-down: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-secondary-outline-border-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-secondary-outline-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-black-background-color-default: var( - --spectrum-transparent-black-800 - ); - --system-button-static-black-background-color-hover: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-background-color-down: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-background-color-focus: var( - --spectrum-transparent-black-900 - ); + --system-button-static-white-outline-background-color-default: var(--spectrum-transparent-white-25); + --system-button-static-white-outline-background-color-hover: var(--spectrum-transparent-white-300); + --system-button-static-white-outline-background-color-down: var(--spectrum-transparent-white-400); + --system-button-static-white-outline-background-color-focus: var(--spectrum-transparent-white-300); + --system-button-static-white-outline-content-color-default: var(--spectrum-white); + --system-button-static-white-outline-content-color-hover: var(--spectrum-white); + --system-button-static-white-outline-content-color-down: var(--spectrum-white); + --system-button-static-white-outline-content-color-focus: var(--spectrum-white); + --system-button-static-white-outline-border-color-default: var(--spectrum-transparent-white-800); + --system-button-static-white-outline-border-color-hover: var(--spectrum-transparent-white-900); + --system-button-static-white-outline-border-color-down: var(--spectrum-transparent-white-900); + --system-button-static-white-outline-border-color-focus: var(--spectrum-transparent-white-900); + --system-button-static-white-secondary-background-color-default: var(--spectrum-transparent-white-200); + --system-button-static-white-secondary-background-color-hover: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-background-color-down: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-background-color-focus: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-content-color-default: var(--spectrum-white); + --system-button-static-white-secondary-content-color-hover: var(--spectrum-white); + --system-button-static-white-secondary-content-color-down: var(--spectrum-white); + --system-button-static-white-secondary-content-color-focus: var(--spectrum-white); + --system-button-static-white-secondary-outline-border-color-default: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-outline-border-color-hover: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-outline-border-color-down: var(--spectrum-transparent-white-500); + --system-button-static-white-secondary-outline-border-color-focus: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-outline-background-color-default: var(--spectrum-transparent-white-800); + --system-button-static-white-secondary-outline-background-color-hover: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-outline-background-color-down: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-outline-background-color-focus: var(--spectrum-transparent-white-300); + --system-button-static-black-background-color-default: var(--spectrum-transparent-black-800); + --system-button-static-black-background-color-hover: var(--spectrum-transparent-black-900); + --system-button-static-black-background-color-down: var(--spectrum-transparent-black-900); + --system-button-static-black-background-color-focus: var(--spectrum-transparent-black-900); --system-button-static-black-content-color-default: var(--spectrum-white); --system-button-static-black-content-color-hover: var(--spectrum-white); --system-button-static-black-content-color-down: var(--spectrum-white); --system-button-static-black-content-color-focus: var(--spectrum-white); - --system-button-static-black-outline-background-color-default: var( - --spectrum-transparent-black-25 - ); - --system-button-static-black-outline-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-outline-border-color-default: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-border-color-hover: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-border-color-down: var( - --spectrum-transparent-black-600 - ); - --system-button-static-black-outline-border-color-focus: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-background-color-default: var( - --spectrum-transparent-black-200 - ); - --system-button-static-black-secondary-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-border-color-default: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-border-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-border-color-down: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-outline-border-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-background-color-default: var( - --spectrum-transparent-black-800 - ); - --system-button-static-black-secondary-outline-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-background-color-focus: var( - --spectrum-transparent-black-300 - ); + --system-button-static-black-outline-background-color-default: var(--spectrum-transparent-black-25); + --system-button-static-black-outline-background-color-hover: var(--spectrum-transparent-black-300); + --system-button-static-black-outline-background-color-down: var(--spectrum-transparent-black-400); + --system-button-static-black-outline-background-color-focus: var(--spectrum-transparent-black-300); + --system-button-static-black-outline-content-color-default: var(--spectrum-black); + --system-button-static-black-outline-content-color-hover: var(--spectrum-black); + --system-button-static-black-outline-content-color-down: var(--spectrum-black); + --system-button-static-black-outline-content-color-focus: var(--spectrum-black); + --system-button-static-black-outline-border-color-default: var(--spectrum-transparent-black-400); + --system-button-static-black-outline-border-color-hover: var(--spectrum-transparent-black-500); + --system-button-static-black-outline-border-color-down: var(--spectrum-transparent-black-600); + --system-button-static-black-outline-border-color-focus: var(--spectrum-transparent-black-500); + --system-button-static-black-secondary-background-color-default: var(--spectrum-transparent-black-200); + --system-button-static-black-secondary-background-color-hover: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-background-color-down: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-background-color-focus: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-content-color-default: var(--spectrum-black); + --system-button-static-black-secondary-content-color-hover: var(--spectrum-black); + --system-button-static-black-secondary-content-color-down: var(--spectrum-black); + --system-button-static-black-secondary-content-color-focus: var(--spectrum-black); + --system-button-static-black-secondary-outline-border-color-default: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-outline-border-color-hover: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-outline-border-color-down: var(--spectrum-transparent-black-500); + --system-button-static-black-secondary-outline-border-color-focus: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-outline-background-color-default: var(--spectrum-transparent-black-800); + --system-button-static-black-secondary-outline-background-color-hover: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-outline-background-color-down: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-outline-background-color-focus: var(--spectrum-transparent-black-300); --system-checkbox-control-color-default: var(--spectrum-gray-600); --system-checkbox-control-color-hover: var(--spectrum-gray-700); --system-checkbox-control-color-down: var(--spectrum-gray-800); @@ -418,9 +182,7 @@ --system-card-border-color: var(--spectrum-gray-200); --system-card-border-color-hover: var(--spectrum-gray-300); --system-card-divider-color: var(--spectrum-gray-300); - --system-card-preview-background-color: var( - --spectrum-background-base-color - ); + --system-card-preview-background-color: var(--spectrum-background-base-color); --system-card-preview-background-color-hover: var(--spectrum-gray-300); --system-clear-button-background-color: transparent; --system-clear-button-background-color-hover: transparent; @@ -429,146 +191,60 @@ --system-clear-button-height: var(--spectrum-component-height-100); --system-clear-button-width: var(--spectrum-component-height-100); --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-clear-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-clear-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-clear-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-clear-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); + --system-clear-button-icon-color: var(--spectrum-neutral-content-color-default); + --system-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); --system-clear-button-size-s-height: var(--spectrum-component-height-75); --system-clear-button-size-s-width: var(--spectrum-component-height-75); --system-clear-button-size-l-height: var(--spectrum-component-height-200); --system-clear-button-size-l-width: var(--spectrum-component-height-200); --system-clear-button-size-xl-height: var(--spectrum-component-height-300); --system-clear-button-size-xl-width: var(--spectrum-component-height-300); - --system-clear-button-quiet-background-color: var( - --spectrum-clear-button-background-color-quiet, - transparent - ); - --system-clear-button-quiet-background-color-hover: var( - --spectrum-clear-button-background-color-hover-quiet, - transparent - ); - --system-clear-button-quiet-background-color-down: var( - --spectrum-clear-button-background-color-down-quiet, - transparent - ); - --system-clear-button-quiet-background-color-key-focus: var( - --spectrum-clear-button-background-color-key-focus-quiet, - transparent - ); - --system-clear-button-over-background-icon-color: var( - --spectrum-clear-button-icon-color-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-icon-color-hover: var( - --spectrum-clear-button-icon-color-hover-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-icon-color-down: var( - --spectrum-clear-button-icon-color-down-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-icon-color-key-focus: var( - --spectrum-clear-button-icon-color-key-focus-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-background-color: var( - --spectrum-clear-button-background-color-over-background, - transparent - ); - --system-clear-button-over-background-background-color-hover: var( - --spectrum-clear-button-background-color-hover-over-background, - var(--spectrum-transparent-white-300) - ); - --system-clear-button-over-background-background-color-down: var( - --spectrum-clear-button-background-color-hover-over-background, - var(--spectrum-transparent-white-400) - ); - --system-clear-button-over-background-background-color-key-focus: var( - --spectrum-clear-button-background-color-hover-over-background, - var(--spectrum-transparent-white-300) - ); - --system-clear-button-disabled-icon-color: var( - --spectrum-disabled-content-color - ); - --system-clear-button-disabled-icon-color-hover: var( - --spectrum-clear-button-icon-color-hover-disabled, - var(--spectrum-disabled-content-color) - ); - --system-clear-button-disabled-icon-color-down: var( - --spectrum-clear-button-icon-color-down-disabled, - var(--spectrum-disabled-content-color) - ); + --system-clear-button-quiet-background-color: var(--spectrum-clear-button-background-color-quiet, transparent); + --system-clear-button-quiet-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent); + --system-clear-button-quiet-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent); + --system-clear-button-quiet-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent); + --system-clear-button-over-background-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white)); + --system-clear-button-over-background-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white)); + --system-clear-button-over-background-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white)); + --system-clear-button-over-background-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white)); + --system-clear-button-over-background-background-color: var(--spectrum-clear-button-background-color-over-background, transparent); + --system-clear-button-over-background-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); + --system-clear-button-over-background-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); + --system-clear-button-over-background-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); + --system-clear-button-disabled-icon-color: var(--spectrum-disabled-content-color); + --system-clear-button-disabled-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); + --system-clear-button-disabled-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); --system-clear-button-disabled-background-color: transparent; --system-close-button-background-color-default: transparent; --system-close-button-background-color-hover: var(--spectrum-gray-200); --system-close-button-background-color-down: var(--spectrum-gray-300); --system-close-button-background-color-focus: var(--spectrum-gray-200); - --system-close-button-static-white-static-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-close-button-static-white-static-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-close-button-static-white-static-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-close-button-static-black-static-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-close-button-static-black-static-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-close-button-static-black-static-background-color-focus: var( - --spectrum-transparent-black-300 - ); + --system-close-button-static-white-static-background-color-hover: var(--spectrum-transparent-white-300); + --system-close-button-static-white-static-background-color-down: var(--spectrum-transparent-white-400); + --system-close-button-static-white-static-background-color-focus: var(--spectrum-transparent-white-300); + --system-close-button-static-black-static-background-color-hover: var(--spectrum-transparent-black-300); + --system-close-button-static-black-static-background-color-down: var(--spectrum-transparent-black-400); + --system-close-button-static-black-static-background-color-focus: var(--spectrum-transparent-black-300); --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); - --system-coach-indicator-min-inline-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-min-block-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-inline-size: var( - --system-coach-indicator-min-inline-size - ); - --system-coach-indicator-block-size: var( - --system-coach-indicator-min-block-size - ); - --system-coach-indicator-ring-inline-size: var( - --spectrum-coach-indicator-ring-diameter - ); - --system-coach-indicator-ring-block-size: var( - --spectrum-coach-indicator-ring-diameter - ); + --system-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); + --system-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); + --system-coach-indicator-inline-size: var(--system-coach-indicator-min-inline-size); + --system-coach-indicator-block-size: var(--system-coach-indicator-min-block-size); + --system-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter); + --system-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter); --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --system-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --system-coach-indicator-top: calc( - var(--system-coach-indicator-block-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-left: calc( - var(--system-coach-indicator-inline-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-coach-animation-indicator-ring-duration: var( - --spectrum-animation-duration-6000 - ); + --system-coach-indicator-top: calc(var(--system-coach-indicator-block-size) / 3 - var(--system-coach-indicator-ring-border-size)); + --system-coach-indicator-left: calc(var(--system-coach-indicator-inline-size) / 3 - var(--system-coach-indicator-ring-border-size)); + --system-coach-indicator-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000); --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; --system-coach-indicator-animation-name: pulse; - --system-coach-indicator-inner-animation-delay-multiple: var( - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple - ); + --system-coach-indicator-inner-animation-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple); --system-coach-indicator-animation-keyframe-0-scale: 1; --system-coach-indicator-animation-keyframe-0-opacity: 0; --system-coach-indicator-animation-keyframe-50-scale: 1.5; @@ -576,65 +252,39 @@ --system-coach-indicator-animation-keyframe-100-scale: 2; --system-coach-indicator-animation-keyframe-100-opacity: 0; --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; - --system-coach-indicator-quiet-quiet-ring-diameter-size: var( - --spectrum-coach-indicator-quiet-ring-diameter - ); + --system-coach-indicator-quiet-quiet-ring-diameter-size: var(--spectrum-coach-indicator-quiet-ring-diameter); --system-coach-indicator-quiet-animation-name: pulse-quiet; --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); --system-coach-mark-width: var(--spectrum-coach-mark-width); --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); - --system-coach-mark-media-min-height: var( - --spectrum-coach-mark-media-minimum-height - ); + --system-coach-mark-media-min-height: var(--spectrum-coach-mark-media-minimum-height); --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); --system-coach-mark-header-to-body: var(--spectrum-spacing-200); --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); --system-coach-mark-title-color: var(--spectrum-heading-color); --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-title-font-style: var( - --spectrum-heading-serif-font-style - ); - --system-coach-mark-title-text-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); + --system-coach-mark-title-font-style: var(--spectrum-heading-serif-font-style); + --system-coach-mark-title-text-font-weight: var(--spectrum-heading-sans-serif-font-weight); --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); - --system-coach-mark-title-text-line-height: var( - --spectrum-heading-line-height - ); + --system-coach-mark-title-text-line-height: var(--spectrum-heading-line-height); --system-coach-mark-content-font-color: var(--spectrum-body-color); - --system-coach-mark-content-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); + --system-coach-mark-content-font-weight: var(--spectrum-body-sans-serif-font-weight); --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-content-font-style: var( - --spectrum-body-sans-serif-font-style - ); + --system-coach-mark-content-font-style: var(--spectrum-body-sans-serif-font-style); --system-coach-mark-content-line-height: var(--spectrum-body-line-height); --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); - --system-coach-mark-step-font-weight: var( - --spectrum-body-medium-font-weight - ); + --system-coach-mark-step-font-weight: var(--spectrum-body-medium-font-weight); --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-step-font-style: var( - --spectrum-body-sans-serif-font-style - ); + --system-coach-mark-step-font-style: var(--spectrum-body-sans-serif-font-style); --system-coach-mark-step-line-height: var(--spectrum-body-line-height); - --system-coach-mark-step-font-size: var( - --spectrum-coach-mark-pagination-body-size - ); - --system-coach-mark-step-to-bottom: var( - --spectrum-coach-mark-pagination-text-to-bottom-edge - ); + --system-coach-mark-step-font-size: var(--spectrum-coach-mark-pagination-body-size); + --system-coach-mark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge); --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); - --system-coach-mark-popover-corner-radius: var( - --spectrum-corner-radius-100 - ); - --system-coach-mark-buttongroup-spacing-horizontal: var( - --spectrum-spacing-100 - ); + --system-coach-mark-popover-corner-radius: var(--spectrum-corner-radius-100); + --system-coach-mark-buttongroup-spacing-horizontal: var(--spectrum-spacing-100); --system-color-wheel-border-color: var(--spectrum-transparent-black-200); --system-combobox-border-color-default: var(--spectrum-gray-500); --system-combobox-border-color-hover: var(--spectrum-gray-600); @@ -642,49 +292,28 @@ --system-combobox-border-color-focus-hover: var(--spectrum-gray-600); --system-combobox-border-color-key-focus: var(--spectrum-gray-600); --system-combobox-readonly-input-border-color: var(--spectrum-gray-500); - --system-combobox-background-color-disabled: var( - --spectrum-disabled-background-color - ); + --system-combobox-background-color-disabled: var(--spectrum-disabled-background-color); --system-combobox-border-color-disabled: transparent; --system-divider-background-color: var(--spectrum-gray-300); - --system-divider-background-color-static-white: var( - --spectrum-transparent-white-300 - ); - --system-divider-background-color-static-black: var( - --spectrum-transparent-black-300 - ); + --system-divider-background-color-static-white: var(--spectrum-transparent-white-300); + --system-divider-background-color-static-black: var(--spectrum-transparent-black-300); --system-drop-zone-border-color: var(--spectrum-gray-300); --system-field-group-margin: var(--spectrum-spacing-300); - --system-field-group-readonly-delimiter: ','; + --system-field-group-readonly-delimiter: ","; --system-infield-button-border-width: var(--spectrum-border-width-100); --system-infield-button-border-color: inherit; --system-infield-button-border-radius: var(--spectrum-corner-radius-100); --system-infield-button-border-radius-reset: 0; - --system-infield-button-stacked-top-border-radius-start-start: var( - --system-infield-button-border-radius-reset - ); - --system-infield-button-stacked-bottom-border-radius-end-start: var( - --system-infield-button-border-radius-reset - ); + --system-infield-button-stacked-top-border-radius-start-start: var(--system-infield-button-border-radius-reset); + --system-infield-button-stacked-bottom-border-radius-end-start: var(--system-infield-button-border-radius-reset); --system-infield-button-background-color: var(--spectrum-gray-75); --system-infield-button-background-color-hover: var(--spectrum-gray-200); --system-infield-button-background-color-down: var(--spectrum-gray-300); - --system-infield-button-background-color-key-focus: var( - --spectrum-gray-200 - ); + --system-infield-button-background-color-key-focus: var(--spectrum-gray-200); --system-infield-button-disabled-border-color: var(--spectrum-gray-200); - --system-menu-item-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-down: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-key-focus: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); + --system-menu-item-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity)); + --system-menu-item-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity)); + --system-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity)); --system-menu-item-corner-radius: 0; --system-menu-item-focus-indicator-shadow: inset; --system-menu-item-focus-indicator-offset: 0; @@ -706,9 +335,7 @@ --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500); --system-meter-font-size: var(--spectrum-font-size-100); --system-meter-size-l-font-size: var(--spectrum-font-size-100); - --system-meter-size-l-top-to-text: var( - --spectrum-component-top-to-text-200 - ); + --system-meter-size-l-top-to-text: var(--spectrum-component-top-to-text-200); --system-modal-background-color: var(--spectrum-gray-100); --system-picker-background-color-default: var(--spectrum-gray-75); --system-picker-background-color-default-open: var(--spectrum-gray-200); @@ -733,16 +360,10 @@ --system-picker-button-border-radius-rounded-sided: 0; --system-picker-button-border-radius-sided: 0; --system-picker-button-border-width: var(--spectrum-border-width-100); - --system-picker-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); + --system-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); --system-popover-border-width: var(--spectrum-border-width-100); - --system-progress-bar-animation-ease-in-out-indeterminate: var( - --spectrum-animation-ease-in-out - ); - --system-progress-bar-animation-duration-indeterminate: var( - --spectrum-animation-duration-2000 - ); + --system-progress-bar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out); + --system-progress-bar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000); --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); --system-progress-bar-fill-size-indeterminate: 70%; --system-progress-bar-size-2400: 192px; @@ -754,122 +375,58 @@ --system-progress-bar-line-height: var(--spectrum-line-height-100); --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); - --system-progress-bar-text-color: var( - --spectrum-neutral-content-color-default - ); + --system-progress-bar-text-color: var(--spectrum-neutral-content-color-default); --system-progress-bar-track-color: var(--spectrum-gray-300); --system-progress-bar-fill-color: var(--spectrum-accent-color-900); --system-progress-bar-label-and-value-white: var(--spectrum-white); - --system-progress-bar-track-color-white: var( - --spectrum-transparent-white-300 - ); + --system-progress-bar-track-color-white: var(--spectrum-transparent-white-300); --system-progress-bar-fill-color-white: var(--spectrum-white); --system-progress-bar-size-default: var(--system-progress-bar-size-2400); - --system-progress-bar-size-m-size-default: var( - --system-progress-bar-size-2400 - ); + --system-progress-bar-size-m-size-default: var(--system-progress-bar-size-2400); --system-progress-bar-font-size: var(--spectrum-font-size-75); --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); - --system-progress-bar-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-m-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-m-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-s-size-default: var( - --system-progress-bar-size-2400 - ); + --system-progress-bar-thickness: var(--spectrum-progress-bar-thickness-large); + --system-progress-bar-size-m-thickness: var(--spectrum-progress-bar-thickness-large); + --system-progress-bar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-progress-bar-size-m-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-progress-bar-size-s-size-default: var(--system-progress-bar-size-2400); --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-s-thickness: var( - --spectrum-progress-bar-thickness-small - ); - --system-progress-bar-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-l-size-default: var( - --system-progress-bar-size-2500 - ); + --system-progress-bar-size-s-thickness: var(--spectrum-progress-bar-thickness-small); + --system-progress-bar-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-progress-bar-size-l-size-default: var(--system-progress-bar-size-2500); --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); - --system-progress-bar-size-l-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-progress-bar-size-xl-size-default: var( - --system-progress-bar-size-2800 - ); + --system-progress-bar-size-l-thickness: var(--spectrum-progress-bar-thickness-large); + --system-progress-bar-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200); + --system-progress-bar-size-xl-size-default: var(--system-progress-bar-size-2800); --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); - --system-progress-bar-size-xl-thickness: var( - --spectrum-progress-bar-thickness-extra-large - ); - --system-progress-bar-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); + --system-progress-bar-size-xl-thickness: var(--spectrum-progress-bar-thickness-extra-large); + --system-progress-bar-size-xl-spacing-top-to-text: var(--spectrum-component-top-to-text-300); --system-progress-circle-track-border-color: var(--spectrum-gray-300); - --system-progress-circle-track-border-color-over-background: var( - --spectrum-transparent-white-300 - ); - --system-progress-circle-fill-border-color-over-background: var( - --spectrum-transparent-white-900 - ); + --system-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300); + --system-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900); --system-radio-button-border-color-default: var(--spectrum-gray-600); --system-radio-button-border-color-hover: var(--spectrum-gray-700); --system-radio-button-border-color-down: var(--spectrum-gray-800); --system-radio-button-border-color-focus: var(--spectrum-gray-700); - --system-radio-neutral-content-color: var( - --spectrum-neutral-content-color-default - ); - --system-radio-neutral-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-radio-neutral-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-radio-neutral-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-radio-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); + --system-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); + --system-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down); + --system-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-radio-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-radio-disabled-border-color: var( - --spectrum-disabled-content-color - ); + --system-radio-disabled-content-color: var(--spectrum-disabled-content-color); + --system-radio-disabled-border-color: var(--spectrum-disabled-content-color); --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); - --system-radio-emphasized-accent-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-accent-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-accent-color-focus: var( - --spectrum-accent-color-1000 - ); + --system-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000); + --system-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); + --system-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); --system-radio-border-width: var(--spectrum-border-width-200); --system-radio-button-background-color: var(--spectrum-gray-50); - --system-radio-button-checked-border-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-radio-button-checked-border-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-radio-button-checked-border-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-radio-button-checked-border-color-focus: var( - --spectrum-neutral-background-color-selected-focus - ); + --system-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); + --system-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down); + --system-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus); --system-radio-line-height: var(--spectrum-line-height-100); --system-radio-animation-duration: var(--spectrum-animation-duration-100); --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); @@ -877,131 +434,67 @@ --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); --system-radio-height: var(--spectrum-component-height-100); --system-radio-size-m-height: var(--spectrum-component-height-100); - --system-radio-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --system-radio-size-m-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); + --system-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); + --system-radio-size-m-button-control-size: var(--spectrum-radio-button-control-size-medium); --system-radio-text-to-control: var(--spectrum-text-to-control-100); --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-size-m-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-radio-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-size-m-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); - --system-radio-size-m-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); + --system-radio-size-m-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-radio-size-m-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); + --system-radio-size-m-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); --system-radio-font-size: var(--spectrum-font-size-100); --system-radio-size-m-font-size: var(--spectrum-font-size-100); --system-radio-size-s-height: var(--spectrum-component-height-75); - --system-radio-size-s-button-control-size: var( - --spectrum-radio-button-control-size-small - ); + --system-radio-size-s-button-control-size: var(--spectrum-radio-button-control-size-small); --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); - --system-radio-size-s-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-radio-size-s-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-radio-size-s-button-top-to-control: var( - --spectrum-radio-button-top-to-control-small - ); + --system-radio-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-radio-size-s-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-radio-size-s-button-top-to-control: var(--spectrum-radio-button-top-to-control-small); --system-radio-size-s-font-size: var(--spectrum-font-size-75); --system-radio-size-l-height: var(--spectrum-component-height-200); - --system-radio-size-l-button-control-size: var( - --spectrum-radio-button-control-size-large - ); + --system-radio-size-l-button-control-size: var(--spectrum-radio-button-control-size-large); --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); - --system-radio-size-l-label-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-radio-size-l-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-radio-size-l-button-top-to-control: var( - --spectrum-radio-button-top-to-control-large - ); + --system-radio-size-l-label-top-to-text: var(--spectrum-component-top-to-text-200); + --system-radio-size-l-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --system-radio-size-l-button-top-to-control: var(--spectrum-radio-button-top-to-control-large); --system-radio-size-l-font-size: var(--spectrum-font-size-200); --system-radio-size-xl-height: var(--spectrum-component-height-300); - --system-radio-size-xl-button-control-size: var( - --spectrum-radio-button-control-size-extra-large - ); + --system-radio-size-xl-button-control-size: var(--spectrum-radio-button-control-size-extra-large); --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); - --system-radio-size-xl-label-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-radio-size-xl-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-radio-size-xl-button-top-to-control: var( - --spectrum-radio-button-top-to-control-extra-large - ); + --system-radio-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-300); + --system-radio-size-xl-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --system-radio-size-xl-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large); --system-radio-size-xl-font-size: var(--spectrum-font-size-300); - --system-radio-emphasized-button-checked-border-color-default: var( - --spectrum-accent-color-900 - ); - --system-radio-emphasized-button-checked-border-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-button-checked-border-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-button-checked-border-color-focus: var( - --spectrum-accent-color-1000 - ); + --system-radio-emphasized-button-checked-border-color-default: var(--spectrum-accent-color-900); + --system-radio-emphasized-button-checked-border-color-hover: var(--spectrum-accent-color-1000); + --system-radio-emphasized-button-checked-border-color-down: var(--spectrum-accent-color-1100); + --system-radio-emphasized-button-checked-border-color-focus: var(--spectrum-accent-color-1000); --system-search-border-color-default: var(--spectrum-gray-500); --system-search-border-color-hover: var(--spectrum-gray-600); --system-search-border-color-focus: var(--spectrum-gray-800); --system-search-border-color-focus-hover: var(--spectrum-gray-900); --system-search-border-color-key-focus: var(--spectrum-gray-900); --system-search-background-color: var(--spectrum-gray-50); - --system-search-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-border-color-disabled: var( - --spectrum-disabled-background-color - ); + --system-search-background-color-disabled: var(--spectrum-disabled-background-color); + --system-search-border-color-disabled: var(--spectrum-disabled-background-color); --system-search-border-radius: var(--spectrum-corner-radius-100); --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); - --system-search-edge-to-visual: var( - --spectrum-component-edge-to-visual-100 - ); - --system-search-size-m-edge-to-visual: var( - --spectrum-component-edge-to-visual-100 - ); + --system-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); + --system-search-size-m-edge-to-visual: var(--spectrum-component-edge-to-visual-100); --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-s-edge-to-visual: var( - --spectrum-component-edge-to-visual-75 - ); + --system-search-size-s-edge-to-visual: var(--spectrum-component-edge-to-visual-75); --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-l-edge-to-visual: var( - --spectrum-component-edge-to-visual-200 - ); + --system-search-size-l-edge-to-visual: var(--spectrum-component-edge-to-visual-200); --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-xl-edge-to-visual: var( - --spectrum-component-edge-to-visual-300 - ); + --system-search-size-xl-edge-to-visual: var(--spectrum-component-edge-to-visual-300); --system-search-quiet-background-color-disabled: transparent; - --system-search-quiet-border-color-disabled: var( - --spectrum-disabled-border-color - ); + --system-search-quiet-border-color-disabled: var(--spectrum-disabled-border-color); --system-side-nav-background-hover: var(--spectrum-gray-200); --system-side-nav-item-background-down: var(--spectrum-gray-300); --system-side-nav-background-key-focus: var(--spectrum-gray-200); - --system-side-nav-item-background-default-selected: var( - --spectrum-gray-200 - ); + --system-side-nav-item-background-default-selected: var(--spectrum-gray-200); --system-side-nav-background-hover-selected: var(--spectrum-gray-300); --system-side-nav-item-background-down-selected: var(--spectrum-gray-300); --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200); @@ -1019,23 +512,13 @@ --system-slider-handle-border-color-hover: var(--spectrum-gray-800); --system-slider-handle-border-color-down: var(--spectrum-gray-800); --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800); - --system-slider-handle-focus-ring-color-key-focus: var( - --spectrum-focus-indicator-color - ); + --system-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); --system-slider-track-corner-radius: var(--spectrum-corner-radius-75); --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); - --system-slider-size-m-handle-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-slider-size-s-handle-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-slider-size-l-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); - --system-slider-size-xl-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); + --system-slider-size-m-handle-border-radius: var(--spectrum-corner-radius-200); + --system-slider-size-s-handle-border-radius: var(--spectrum-corner-radius-200); + --system-slider-size-l-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); + --system-slider-size-xl-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); --system-split-view-background-color: var(--spectrum-gray-100); --system-split-view-handle-background-color: var(--spectrum-gray-300); --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); @@ -1051,96 +534,49 @@ --system-stepper-buttons-background-color: var(--spectrum-gray-50); --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); - --system-stepper-buttons-border-color-keyboard-focus: var( - --spectrum-gray-800 - ); + --system-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-800); --system-stepper-button-border-width: var(--spectrum-border-width-100); - --system-stepper-border-color-invalid: var( - --spectrum-negative-border-color-default - ); - --system-stepper-border-color-focus-invalid: var( - --spectrum-negative-border-color-focus - ); - --system-stepper-border-color-focus-hover-invalid: var( - --spectrum-negative-border-color-focus-hover - ); - --system-stepper-border-color-keyboard-focus-invalid: var( - --spectrum-negative-border-color-key-focus - ); + --system-stepper-border-color-invalid: var(--spectrum-negative-border-color-default); + --system-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus); + --system-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); + --system-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); --system-stepper-border-color-disabled: transparent; - --system-stepper-button-border-width-disabled: var( - --spectrum-border-width-100 - ); - --system-stepper-buttons-background-color-disabled: var( - --spectrum-gray-100 - ); + --system-stepper-button-border-width-disabled: var(--spectrum-border-width-100); + --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-100); --system-stepper-quiet-buttons-border-style: none; --system-stepper-quiet-button-edge-to-fill: 0; --system-swatch-border-radius: var(--spectrum-corner-radius-100); - --system-swatch-focus-indicator-border-radius: var( - --spectrum-corner-radius-200 - ); + --system-swatch-focus-indicator-border-radius: var(--spectrum-corner-radius-200); --system-swatch-border-thickness: var(--spectrum-border-width-100); --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --system-swatch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); + --system-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-swatch-border-color-opacity: 0.51; --system-swatch-border-color-light-opacity: 0.2; - --system-swatch-border-color: rgba( - var(--spectrum-gray-900-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-icon-border-color: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-border-color-light: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-light-opacity) - ); + --system-swatch-border-color: rgba(var(--spectrum-gray-900-rgb), var(--system-swatch-border-color-opacity)); + --system-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-opacity)); + --system-swatch-border-color-light: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-light-opacity)); --system-swatch-border-color-selected: var(--spectrum-gray-900); --system-swatch-inner-border-color-selected: var(--spectrum-gray-50); --system-swatch-disabled-icon-color: var(--spectrum-gray-50); --system-swatch-dash-icon-color: var(--spectrum-gray-800); --system-swatch-slash-icon-color: var(--spectrum-red-900); - --system-swatch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); + --system-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); --system-swatch-size: var(--spectrum-swatch-size-medium); --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --system-swatch-size-m-disabled-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-swatch-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-m-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); + --system-swatch-size-m-disabled-icon-size: var(--spectrum-workflow-icon-size-100); + --system-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); + --system-swatch-size-m-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); - --system-swatch-size-xs-disabled-icon-size: var( - --spectrum-workflow-icon-size-50 - ); - --system-swatch-size-xs-slash-thickness: var( - --spectrum-swatch-slash-thickness-extra-small - ); + --system-swatch-size-xs-disabled-icon-size: var(--spectrum-workflow-icon-size-50); + --system-swatch-size-xs-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small); --system-swatch-size-s-size: var(--spectrum-swatch-size-small); - --system-swatch-size-s-disabled-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-swatch-size-s-slash-thickness: var( - --spectrum-swatch-slash-thickness-small - ); + --system-swatch-size-s-disabled-icon-size: var(--spectrum-workflow-icon-size-75); + --system-swatch-size-s-slash-thickness: var(--spectrum-swatch-slash-thickness-small); --system-swatch-size-l-size: var(--spectrum-swatch-size-large); - --system-swatch-size-l-disabled-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-swatch-size-l-slash-thickness: var( - --spectrum-swatch-slash-thickness-large - ); + --system-swatch-size-l-disabled-icon-size: var(--spectrum-workflow-icon-size-200); + --system-swatch-size-l-slash-thickness: var(--spectrum-swatch-slash-thickness-large); --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); @@ -1148,39 +584,23 @@ --system-switch-handle-border-color-hover: var(--spectrum-gray-700); --system-switch-handle-border-color-down: var(--spectrum-gray-800); --system-switch-handle-border-color-focus: var(--spectrum-gray-700); - --system-switch-handle-border-color-selected-default: var( - --spectrum-gray-700 - ); - --system-switch-handle-border-color-selected-hover: var( - --spectrum-gray-800 - ); + --system-switch-handle-border-color-selected-default: var(--spectrum-gray-700); + --system-switch-handle-border-color-selected-hover: var(--spectrum-gray-800); --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-focus: var( - --spectrum-gray-800 - ); + --system-switch-handle-border-color-selected-focus: var(--spectrum-gray-800); --system-switch-background-color: var(--spectrum-gray-300); --system-switch-background-color-disabled: var(--spectrum-gray-300); --system-switch-handle-background-color: var(--spectrum-gray-75); - --system-table-header-background-color: var( - --spectrum-transparent-white-100 - ); + --system-table-header-background-color: var(--spectrum-transparent-white-100); --system-table-border-color: var(--spectrum-gray-300); --system-table-divider-color: var(--spectrum-gray-300); --system-table-row-background-color: var(--spectrum-gray-50); --system-table-summary-row-background-color: var(--spectrum-gray-200); --system-table-section-header-background-color: var(--spectrum-gray-200); - --system-table-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-table-icon-color-focus-hover: var( - --spectrum-neutral-subdued-content-down - ); - --system-table-quiet-header-background-color: var( - --spectrum-transparent-white-100 - ); - --system-table-quiet-row-background-color: var( - --spectrum-transparent-white-100 - ); + --system-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-down); + --system-table-quiet-header-background-color: var(--spectrum-transparent-white-100); + --system-table-quiet-row-background-color: var(--spectrum-transparent-white-100); --system-tabs-font-weight: var(--spectrum-regular-font-weight); --system-tabs-divider-background-color: var(--spectrum-gray-300); --system-tag-background-color: var(--spectrum-gray-75); @@ -1194,66 +614,28 @@ --system-tag-border-color-hover: var(--spectrum-gray-800); --system-tag-border-color-active: var(--spectrum-gray-900); --system-tag-border-color-focus: var(--spectrum-gray-800); - --system-tag-content-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-tag-content-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-tag-content-color-active: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-tag-content-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); + --system-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); + --system-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down); + --system-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); --system-tag-content-color-selected: var(--spectrum-gray-50); - --system-tag-border-color-selected: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-tag-border-color-selected-hover: var( - --spectrum-neutral-subdued-background-color-hover - ); - --system-tag-border-color-selected-active: var( - --spectrum-neutral-subdued-background-color-down - ); - --system-tag-border-color-selected-focus: var( - --spectrum-neutral-subdued-background-color-key-focus - ); + --system-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default); + --system-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover); + --system-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down); + --system-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus); --system-tag-border-color-disabled: transparent; - --system-tag-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-tag-size-small-spacing-inline-start: var( - --spectrum-component-edge-to-visual-75 - ); - --system-tag-size-small-label-spacing-inline-end: var( - --spectrum-component-edge-to-text-75 - ); - --system-tag-size-small-clear-button-spacing-inline-end: var( - --spectrum-component-edge-to-visual-75 - ); - --system-tag-size-medium-spacing-inline-start: var( - --spectrum-component-edge-to-visual-100 - ); - --system-tag-size-medium-label-spacing-inline-end: var( - --spectrum-component-edge-to-text-100 - ); - --system-tag-size-medium-clear-button-spacing-inline-end: var( - --spectrum-component-edge-to-visual-100 - ); - --system-tag-size-large-spacing-inline-start: var( - --spectrum-component-edge-to-visual-200 - ); - --system-tag-size-large-label-spacing-inline-end: var( - --spectrum-component-edge-to-text-200 - ); - --system-tag-size-large-clear-button-spacing-inline-end: var( - --spectrum-component-edge-to-visual-200 - ); + --system-tag-background-color-disabled: var(--spectrum-disabled-background-color); + --system-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75); + --system-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75); + --system-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75); + --system-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100); + --system-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100); + --system-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100); + --system-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200); + --system-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200); + --system-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200); --system-textfield-background-color: var(--spectrum-gray-50); - --system-textfield-background-color-disabled: var( - --spectrum-disabled-background-color - ); + --system-textfield-background-color-disabled: var(--spectrum-disabled-background-color); --system-textfield-border-color: var(--spectrum-gray-500); --system-textfield-border-color-hover: var(--spectrum-gray-600); --system-textfield-border-color-focus: var(--spectrum-gray-800); @@ -1261,25 +643,13 @@ --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); --system-textfield-border-color-disabled: var(--spectrum-gray-200); --system-textfield-border-width: var(--spectrum-border-width-100); - --system-textfield-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-size-s-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-textfield-size-l-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-textfield-size-xl-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-extra-large - ); + --system-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); + --system-textfield-size-s-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small); + --system-textfield-size-l-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large); + --system-textfield-size-xl-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large); --system-textfield-quiet-border-color-disabled: var(--spectrum-gray-300); --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); - --system-toast-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); + --system-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); --system-toast-divider-color: var(--spectrum-transparent-white-300); - --system-tooltip-backgound-color-default-neutral: var( - --spectrum-neutral-subdued-background-color-default - ); + --system-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default); }