From a4a6d42e7615466c6de344ccf36c8d7b4903a921 Mon Sep 17 00:00:00 2001 From: Bernhard Schmidt Date: Wed, 12 Oct 2022 18:53:39 -0600 Subject: [PATCH] feat(button): using core-tokens for button --- packages/button/package.json | 2 +- packages/button/src/spectrum-button.css | 2990 ++++++++--------- scripts/spectrum-tokens.js | 1 + tools/styles/express/spectrum-core-global.css | 183 - tools/styles/express/spectrum-scale-large.css | 9 - .../styles/express/spectrum-scale-medium.css | 13 - tools/styles/package.json | 4 +- tools/styles/spectrum-core-global.css | 183 - tools/styles/spectrum-scale-large.css | 9 - tools/styles/spectrum-scale-medium.css | 13 - tools/styles/tokens/express/global-vars.css | 754 ++++- tools/styles/tokens/express/medium-vars.css | 4 + tools/styles/tokens/global-vars.css | 402 +-- tools/styles/tokens/large-vars.css | 14 +- tools/styles/tokens/medium-vars.css | 14 +- tools/styles/tokens/spectrum/custom-vars.css | 30 +- tools/styles/tokens/spectrum/global-vars.css | 754 ++++- tools/styles/tokens/spectrum/medium-vars.css | 4 + yarn.lock | 24 +- 19 files changed, 3154 insertions(+), 2253 deletions(-) diff --git a/packages/button/package.json b/packages/button/package.json index 52df175b74..4ac3049c7e 100644 --- a/packages/button/package.json +++ b/packages/button/package.json @@ -90,7 +90,7 @@ "@spectrum-web-components/shared": "^0.15.5" }, "devDependencies": { - "@spectrum-css/button": "^6.0.21" + "@spectrum-css/button": "^9.0.0" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/button/src/spectrum-button.css b/packages/button/src/spectrum-button.css index b368112cb9..493afbec26 100644 --- a/packages/button/src/spectrum-button.css +++ b/packages/button/src/spectrum-button.css @@ -18,27 +18,41 @@ governing permissions and limitations under the License. -webkit-appearance: button; box-sizing: border-box; cursor: pointer; - display: inline-flex; + display: inline-flex; /* .spectrum-Button */ font-family: var( - --spectrum-alias-body-text-font-family, - var(--spectrum-global-font-family-base) + --mod-sans-font-family-stack, + var(--spectrum-sans-font-family-stack) ); justify-content: center; - line-height: var( - --spectrum-alias-component-text-line-height, - var(--spectrum-global-font-line-height-small) - ); + line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); margin: 0; overflow: visible; - position: relative; /* .spectrum-Button */ text-decoration: none; text-transform: none; - transition: background var(--spectrum-global-animation-duration-100, 0.13s) + transition: background + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ease-out, + border-color + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) ease-out, - border-color var(--spectrum-global-animation-duration-100, 0.13s) + color + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) ease-out, - color var(--spectrum-global-animation-duration-100, 0.13s) ease-out, - box-shadow var(--spectrum-global-animation-duration-100, 0.13s) ease-out; + box-shadow + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ease-out; user-select: none; -webkit-user-select: none; vertical-align: top; @@ -49,59 +63,43 @@ governing permissions and limitations under the License. :host(::-moz-focus-inner) { border: 0; /* .spectrum-Button::-moz-focus-inner */ border-style: none; - margin-bottom: -2px; - margin-top: -2px; + margin-block-end: -2px; + margin-block-start: -2px; padding: 0; } :host([disabled]) { cursor: default; /* .spectrum-Button:disabled */ } -::slotted([slot='icon']) { - flex-shrink: 0; - max-height: 100%; /* .spectrum-Button .spectrum-Icon */ -} :host:after { - border-radius: calc( - var( - --spectrum-button-m-primary-fill-texticon-border-radius, - var(--spectrum-global-dimension-size-200) - ) + - var( - --spectrum-alias-focus-ring-gap, - var(--spectrum-global-dimension-static-size-25) - ) - ); /* .spectrum-Button:after */ bottom: 0; - content: ''; - display: block; + display: block; /* .spectrum-Button:after */ left: 0; margin: calc( - var( - --spectrum-alias-focus-ring-gap, - var(--spectrum-global-dimension-static-size-25) - ) * -1 + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1 ); - position: absolute; right: 0; top: 0; - transition: opacity var(--spectrum-global-animation-duration-100, 0.13s) + transition: opacity + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) ease-out, - margin var(--spectrum-global-animation-duration-100, 0.13s) ease-out; + margin + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ease-out; } :host(.focus-visible):after { margin: calc( - var( - --spectrum-alias-focus-ring-gap, - var(--spectrum-global-dimension-static-size-25) - ) * -2 + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2 ); /* .spectrum-Button.focus-ring:after */ } :host(:focus-visible):after { margin: calc( - var( - --spectrum-alias-focus-ring-gap, - var(--spectrum-global-dimension-static-size-25) - ) * -2 + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2 ); /* .spectrum-Button.focus-ring:after */ } #label { @@ -112,1703 +110,1489 @@ governing permissions and limitations under the License. #label:empty { display: none; /* .spectrum-Button-label:empty */ } -:host([size='s']) { - --spectrum-button-primary-fill-textonly-text-padding-bottom: var( - --spectrum-button-s-primary-fill-textonly-text-padding-bottom - ); /* .spectrum-Button--sizeS */ - --spectrum-button-primary-fill-texticon-text-size: var( - --spectrum-button-s-primary-fill-texticon-text-size, - var(--spectrum-global-dimension-font-size-75) - ); - --spectrum-button-primary-fill-texticon-text-font-weight: var( - --spectrum-button-s-primary-fill-texticon-text-font-weight, - var(--spectrum-global-font-weight-bold) - ); - --spectrum-button-primary-fill-texticon-text-line-height: var( - --spectrum-button-s-primary-fill-texticon-text-line-height, - var(--spectrum-alias-component-text-line-height) - ); - --spectrum-button-primary-fill-texticon-icon-gap: var( - --spectrum-button-s-primary-fill-texticon-icon-gap, - var(--spectrum-global-dimension-size-85) - ); - --spectrum-button-primary-fill-texticon-focus-ring-size: var( - --spectrum-button-s-primary-fill-texticon-focus-ring-size, - var(--spectrum-alias-focus-ring-size) - ); - --spectrum-button-primary-fill-texticon-border-size: var( - --spectrum-button-s-primary-fill-texticon-border-size, - var(--spectrum-alias-border-size-thick) - ); - --spectrum-button-primary-fill-texticon-padding-left: var( - --spectrum-button-s-primary-fill-texticon-padding-left, - var(--spectrum-global-dimension-size-125) +:host { + --spectrum-button-animation-duration: var( + --spectrum-animation-duration-100 + ); /* .spectrum-Button */ + --spectrum-button-border-radius: var(--spectrum-corner-radius-100); + --spectrum-button-border-width: var(--spectrum-border-width-200); + --spectrum-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --spectrum-button-focus-ring-thickness: var( + --spectrum-focus-indicator-thickness ); - --spectrum-button-primary-fill-texticon-border-radius: var( - --spectrum-button-s-primary-fill-texticon-border-radius, - var(--spectrum-global-dimension-size-150) + --spectrum-button-focus-indicator-color: var( + --spectrum-focus-indicator-color ); - --spectrum-button-primary-fill-textonly-border-size: var( - --spectrum-button-s-primary-fill-textonly-border-size, - var(--spectrum-alias-border-size-thick) + --spectrum-button-focus-ring-border-radius: calc( + var(--spectrum-button-border-radius) + + var(--spectrum-button-focus-ring-gap) ); - --spectrum-button-primary-fill-textonly-min-width: var( - --spectrum-button-s-primary-fill-textonly-min-width, - var(--spectrum-global-dimension-size-675) +} +:host([size='s']) { + --spectrum-button-min-width: calc( + var(--spectrum-component-height-75) * + var(--spectrum-button-minimum-width-multiplier) + ); /* .spectrum-Button--sizeS */ + --spectrum-button-border-radius: var( + --spectrum-component-pill-edge-to-text-75 ); - --spectrum-button-primary-fill-textonly-padding-left: var( - --spectrum-button-s-primary-fill-textonly-padding-left, - var(--spectrum-global-dimension-size-150) + --spectrum-button-height: var(--spectrum-component-height-75); + --spectrum-button-font-size: var(--spectrum-font-size-75); + --spectrum-button-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-75) - + var(--spectrum-button-border-width) ); - --spectrum-button-primary-fill-textonly-padding-right: var( - --spectrum-button-s-primary-fill-textonly-padding-right, - var(--spectrum-global-dimension-size-150) + --spectrum-button-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-75) - + var(--spectrum-button-border-width) ); - --spectrum-button-primary-fill-textonly-height: var( - --spectrum-button-s-primary-fill-textonly-height, - var(--spectrum-global-dimension-size-300) + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-75); + --spectrum-button-padding-label-top: var( + --spectrum-component-top-to-text-75 ); - --spectrum-button-primary-fill-textonly-text-padding-top: calc( - var( - --spectrum-button-s-primary-fill-textonly-text-padding-top, - var(--spectrum-global-dimension-static-size-50) - ) - 1px + --spectrum-button-padding-label-bottom: var( + --spectrum-component-bottom-to-text-75 ); } :host([size='m']) { - --spectrum-button-primary-fill-texticon-padding-left: var( - --spectrum-button-m-primary-fill-texticon-padding-left + --spectrum-button-min-width: calc( + var(--spectrum-component-height-100) * + var(--spectrum-button-minimum-width-multiplier) ); /* .spectrum-Button--sizeM */ - --spectrum-button-primary-fill-texticon-text-size: var( - --spectrum-button-m-primary-fill-texticon-text-size, - var(--spectrum-global-dimension-font-size-100) - ); - --spectrum-button-primary-fill-texticon-text-font-weight: var( - --spectrum-button-m-primary-fill-texticon-text-font-weight, - var(--spectrum-global-font-weight-bold) - ); - --spectrum-button-primary-fill-texticon-text-line-height: var( - --spectrum-button-m-primary-fill-texticon-text-line-height, - var(--spectrum-alias-component-text-line-height) - ); - --spectrum-button-primary-fill-texticon-icon-gap: var( - --spectrum-button-m-primary-fill-texticon-icon-gap, - var(--spectrum-global-dimension-size-100) - ); - --spectrum-button-primary-fill-texticon-focus-ring-size: var( - --spectrum-button-m-primary-fill-texticon-focus-ring-size, - var(--spectrum-alias-focus-ring-size) - ); - --spectrum-button-primary-fill-texticon-border-size: var( - --spectrum-button-m-primary-fill-texticon-border-size, - var(--spectrum-alias-border-size-thick) - ); - --spectrum-button-primary-fill-texticon-border-radius: var( - --spectrum-button-m-primary-fill-texticon-border-radius, - var(--spectrum-global-dimension-size-200) - ); - --spectrum-button-primary-fill-textonly-text-padding-top: var( - --spectrum-button-m-primary-fill-textonly-text-padding-top, - var(--spectrum-global-dimension-size-75) - ); - --spectrum-button-primary-fill-textonly-border-size: var( - --spectrum-button-m-primary-fill-textonly-border-size, - var(--spectrum-alias-border-size-thick) + --spectrum-button-border-radius: var( + --spectrum-component-pill-edge-to-text-100 ); - --spectrum-button-primary-fill-textonly-min-width: var( - --spectrum-button-m-primary-fill-textonly-min-width, - var(--spectrum-global-dimension-size-900) + --spectrum-button-height: var(--spectrum-component-height-100); + --spectrum-button-font-size: var(--spectrum-font-size-100); + --spectrum-button-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-100) - + var(--spectrum-button-border-width) ); - --spectrum-button-primary-fill-textonly-padding-left: var( - --spectrum-button-m-primary-fill-textonly-padding-left, - var(--spectrum-global-dimension-size-200) + --spectrum-button-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-100) - + var(--spectrum-button-border-width) ); - --spectrum-button-primary-fill-textonly-padding-right: var( - --spectrum-button-m-primary-fill-textonly-padding-right, - var(--spectrum-global-dimension-size-200) + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); + --spectrum-button-padding-label-top: var( + --spectrum-component-top-to-text-100 ); - --spectrum-button-primary-fill-textonly-height: var( - --spectrum-button-m-primary-fill-textonly-height, - var(--spectrum-global-dimension-size-400) - ); - --spectrum-button-primary-fill-textonly-text-padding-bottom: calc( - var( - --spectrum-button-m-primary-fill-textonly-text-padding-bottom, - var(--spectrum-global-dimension-size-115) - ) - 1px + --spectrum-button-padding-label-bottom: var( + --spectrum-component-bottom-to-text-100 ); } :host([size='l']) { - --spectrum-button-primary-fill-textonly-text-padding-top: var( - --spectrum-button-l-primary-fill-textonly-text-padding-top + --spectrum-button-min-width: calc( + var(--spectrum-component-height-200) * + var(--spectrum-button-minimum-width-multiplier) ); /* .spectrum-Button--sizeL */ - --spectrum-button-primary-fill-texticon-text-size: var( - --spectrum-button-l-primary-fill-texticon-text-size, - var(--spectrum-global-dimension-font-size-200) - ); - --spectrum-button-primary-fill-texticon-text-font-weight: var( - --spectrum-button-l-primary-fill-texticon-text-font-weight, - var(--spectrum-global-font-weight-bold) - ); - --spectrum-button-primary-fill-texticon-text-line-height: var( - --spectrum-button-l-primary-fill-texticon-text-line-height, - var(--spectrum-alias-component-text-line-height) - ); - --spectrum-button-primary-fill-texticon-icon-gap: var( - --spectrum-button-l-primary-fill-texticon-icon-gap, - var(--spectrum-global-dimension-size-115) - ); - --spectrum-button-primary-fill-texticon-focus-ring-size: var( - --spectrum-button-l-primary-fill-texticon-focus-ring-size, - var(--spectrum-alias-focus-ring-size) - ); - --spectrum-button-primary-fill-texticon-border-size: var( - --spectrum-button-l-primary-fill-texticon-border-size, - var(--spectrum-alias-border-size-thick) - ); - --spectrum-button-primary-fill-texticon-padding-left: var( - --spectrum-button-l-primary-fill-texticon-padding-left, - var(--spectrum-global-dimension-size-225) + --spectrum-button-border-radius: var( + --spectrum-component-pill-edge-to-text-200 ); - --spectrum-button-primary-fill-texticon-border-radius: var( - --spectrum-button-l-primary-fill-texticon-border-radius, - var(--spectrum-global-dimension-size-250) + --spectrum-button-height: var(--spectrum-component-height-200); + --spectrum-button-font-size: var(--spectrum-font-size-200); + --spectrum-button-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-200) - + var(--spectrum-button-border-width) ); - --spectrum-button-primary-fill-textonly-text-padding-bottom: var( - --spectrum-button-l-primary-fill-textonly-text-padding-bottom, - var(--spectrum-global-dimension-size-130) + --spectrum-button-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-200) - + var(--spectrum-button-border-width) ); - --spectrum-button-primary-fill-textonly-border-size: var( - --spectrum-button-l-primary-fill-textonly-border-size, - var(--spectrum-alias-border-size-thick) + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-200); + --spectrum-button-padding-label-top: var( + --spectrum-component-top-to-text-200 ); - --spectrum-button-primary-fill-textonly-min-width: var( - --spectrum-button-l-primary-fill-textonly-min-width, - var(--spectrum-global-dimension-size-1125) - ); - --spectrum-button-primary-fill-textonly-padding-left: var( - --spectrum-button-l-primary-fill-textonly-padding-left, - var(--spectrum-global-dimension-size-250) - ); - --spectrum-button-primary-fill-textonly-padding-right: var( - --spectrum-button-l-primary-fill-textonly-padding-right, - var(--spectrum-global-dimension-size-250) - ); - --spectrum-button-primary-fill-textonly-height: var( - --spectrum-button-l-primary-fill-textonly-height, - var(--spectrum-global-dimension-size-500) + --spectrum-button-padding-label-bottom: var( + --spectrum-component-bottom-to-text-200 ); } :host([size='xl']) { - --spectrum-button-primary-fill-texticon-padding-left: var( - --spectrum-button-xl-primary-fill-texticon-padding-left + --spectrum-button-min-width: calc( + var(--spectrum-component-height-300) * + var(--spectrum-button-minimum-width-multiplier) ); /* .spectrum-Button--sizeXL */ - --spectrum-button-primary-fill-texticon-text-size: var( - --spectrum-button-xl-primary-fill-texticon-text-size, - var(--spectrum-global-dimension-font-size-300) - ); - --spectrum-button-primary-fill-texticon-text-font-weight: var( - --spectrum-button-xl-primary-fill-texticon-text-font-weight, - var(--spectrum-global-font-weight-bold) - ); - --spectrum-button-primary-fill-texticon-text-line-height: var( - --spectrum-button-xl-primary-fill-texticon-text-line-height, - var(--spectrum-alias-component-text-line-height) - ); - --spectrum-button-primary-fill-texticon-icon-gap: var( - --spectrum-button-xl-primary-fill-texticon-icon-gap, - var(--spectrum-global-dimension-size-125) - ); - --spectrum-button-primary-fill-texticon-focus-ring-size: var( - --spectrum-button-xl-primary-fill-texticon-focus-ring-size, - var(--spectrum-alias-focus-ring-size) - ); - --spectrum-button-primary-fill-texticon-border-size: var( - --spectrum-button-xl-primary-fill-texticon-border-size, - var(--spectrum-alias-border-size-thick) + --spectrum-button-border-radius: var( + --spectrum-component-pill-edge-to-text-300 ); - --spectrum-button-primary-fill-texticon-border-radius: var( - --spectrum-button-xl-primary-fill-texticon-border-radius, - var(--spectrum-global-dimension-size-300) + --spectrum-button-height: var(--spectrum-component-height-300); + --spectrum-button-font-size: var(--spectrum-font-size-300); + --spectrum-button-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-300) - + var(--spectrum-button-border-width) ); - --spectrum-button-primary-fill-textonly-text-padding-top: var( - --spectrum-button-xl-primary-fill-textonly-text-padding-top, - var(--spectrum-global-dimension-size-150) + --spectrum-button-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-300) - + var(--spectrum-button-border-width) ); - --spectrum-button-primary-fill-textonly-border-size: var( - --spectrum-button-xl-primary-fill-textonly-border-size, - var(--spectrum-alias-border-size-thick) + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-300); + --spectrum-button-padding-label-top: var( + --spectrum-component-top-to-text-300 ); - --spectrum-button-primary-fill-textonly-min-width: var( - --spectrum-button-xl-primary-fill-textonly-min-width, - var(--spectrum-global-dimension-size-1250) - ); - --spectrum-button-primary-fill-textonly-padding-left: var( - --spectrum-button-xl-primary-fill-textonly-padding-left, - var(--spectrum-global-dimension-size-300) - ); - --spectrum-button-primary-fill-textonly-padding-right: var( - --spectrum-button-xl-primary-fill-textonly-padding-right, - var(--spectrum-global-dimension-size-300) - ); - --spectrum-button-primary-fill-textonly-height: var( - --spectrum-button-xl-primary-fill-textonly-height, - var(--spectrum-global-dimension-size-600) - ); - --spectrum-button-primary-fill-textonly-text-padding-bottom: calc( - var( - --spectrum-button-xl-primary-fill-textonly-text-padding-bottom, - var(--spectrum-global-dimension-size-175) - ) - 1px - ); -} -:host { - --spectrum-button-primary-fill-padding-left-adjusted: calc( - var(--spectrum-button-primary-fill-texticon-padding-left) - - var(--spectrum-button-primary-fill-texticon-border-size) - ); /* .spectrum-Button */ - --spectrum-button-primary-fill-textonly-padding-left-adjusted: calc( - var(--spectrum-button-primary-fill-textonly-padding-left) - - var(--spectrum-button-primary-fill-texticon-border-size) - ); - --spectrum-button-primary-fill-textonly-padding-right-adjusted: calc( - var(--spectrum-button-primary-fill-textonly-padding-right) - - var(--spectrum-button-primary-fill-texticon-border-size) - ); -} -:host([dir='ltr']) { - padding-left: var( - --spectrum-button-primary-fill-textonly-padding-left-adjusted - ); /* [dir=ltr] .spectrum-Button */ - padding-right: var( - --spectrum-button-primary-fill-textonly-padding-right-adjusted + --spectrum-button-padding-label-bottom: var( + --spectrum-component-bottom-to-text-300 ); } -:host([dir='rtl']) { - padding-left: var( - --spectrum-button-primary-fill-textonly-padding-right-adjusted - ); - padding-right: var( - --spectrum-button-primary-fill-textonly-padding-left-adjusted - ); /* [dir=rtl] .spectrum-Button */ -} :host { - --spectrum-button-focus-ring-color: var( - --spectrum-button-m-primary-fill-texticon-focus-ring-color-key-focus, - var(--spectrum-alias-focus-ring-color) + block-size: auto; + border-radius: var( + --mod-button-border-radius, + var(--spectrum-button-border-radius) ); - border-radius: var(--spectrum-button-primary-fill-texticon-border-radius); - border-style: solid; + border-style: solid; /* .spectrum-Button */ border-width: var( - --spectrum-button-primary-fill-texticon-border-size - ); /* .spectrum-Button */ + --mod-button-border-width, + var(--spectrum-button-border-width) + ); color: inherit; - font-size: var(--spectrum-button-primary-fill-texticon-text-size); - font-weight: var(--spectrum-button-primary-fill-texticon-text-font-weight); - height: auto; - min-height: var(--spectrum-button-primary-fill-textonly-height); - min-width: var(--spectrum-button-primary-fill-textonly-min-width); - padding-bottom: 0; - padding-top: 0; + font-size: var(--mod-button-font-size, var(--spectrum-button-font-size)); + font-weight: var(--mod-bold-font-weight, var(--spectrum-bold-font-weight)); + height: var(--mod-button-height, var(--spectrum-button-height)); + min-block-size: var( + --mod-button-min-width, + var(--spectrum-button-min-width) + ); + min-block-size: var( + --mod-spectrum-button-height, + var(--spectrum-button-height) + ); + min-inline-size: var( + --mod-button-min-width, + var(--spectrum-button-min-width) + ); + min-width: var(--mod-button-min-width, var(--spectrum-button-min-width)); + padding-block-end: 0; + padding-block-start: 0; + padding-inline-end: var( + --mod-button-edge-to-text, + var(--spectrum-button-edge-to-text) + ); + padding-inline-start: var( + --mod-button-edge-to-visual, + var(--spectrum-button-edge-to-visual) + ); + position: relative; } :host(:hover), :host([active]) { box-shadow: none; /* .spectrum-Button:hover, * .spectrum-Button:active */ } -:host([dir='ltr']) ::slotted([slot='icon']) { - margin-left: calc( - ( - var( - --spectrum-button-primary-fill-textonly-padding-left-adjusted - ) - - var(--spectrum-button-primary-fill-padding-left-adjusted) - ) * -1 - ); /* [dir=ltr] .spectrum-Button .spectrum-Icon */ -} -:host([dir='rtl']) ::slotted([slot='icon']) { - margin-right: calc( - ( - var( - --spectrum-button-primary-fill-textonly-padding-left-adjusted - ) - - var(--spectrum-button-primary-fill-padding-left-adjusted) - ) * -1 - ); /* [dir=rtl] .spectrum-Button .spectrum-Icon */ -} -:host([dir='ltr']) slot[name='icon'] + #label { - padding-left: var( - --spectrum-button-primary-fill-texticon-icon-gap - ); /* [dir=ltr] .spectrum-Button .spectrum-Icon+.spectrum-Button-label */ -} -:host([dir='rtl']) slot[name='icon'] + #label { - padding-right: var( - --spectrum-button-primary-fill-texticon-icon-gap - ); /* [dir=rtl] .spectrum-Button .spectrum-Icon+.spectrum-Button-label */ -} -:host([dir='ltr']) slot[name='icon'] + #label { - padding-right: 0; /* [dir=ltr] .spectrum-Button .spectrum-Icon+.spectrum-Button-label */ -} -:host([dir='rtl']) slot[name='icon'] + #label { - padding-left: 0; /* [dir=rtl] .spectrum-Button .spectrum-Icon+.spectrum-Button-label */ +::slotted([slot='icon']) { + color: inherit; + inset-block-end: calc( + var( + --mod-spectrum-button-edge-to-visual, + var(--spectrum-button-edge-to-visual) + ) - + var(--mod-button-border-width, var(--spectrum-button-border-width)) + ); + inset-inline-end: calc( + var( + --mod-spectrum-button-edge-to-visual, + var(--spectrum-button-edge-to-visual) + ) - + var(--mod-button-border-width, var(--spectrum-button-border-width)) + ); /* .spectrum-Button .spectrum-Icon */ +} +slot[name='icon'] + #label { + padding-inline-end: 0; + padding-inline-start: var( + --mod-button-padding-label-to-icon, + var(--spectrum-button-padding-label-to-icon) + ); /* .spectrum-Button .spectrum-Icon+.spectrum-Button-label */ } :host:after { border-radius: calc( - var(--spectrum-button-primary-fill-texticon-border-radius) + - var( - --spectrum-alias-focus-ring-gap, - var(--spectrum-global-dimension-static-size-25) - ) + var(--mod-button-border-radius, var(--spectrum-button-border-radius)) + + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) ); /* .spectrum-Button:after */ } #label { - line-height: var( - --spectrum-button-primary-fill-texticon-text-line-height - ); /* .spectrum-Button-label */ - padding-bottom: calc( - var(--spectrum-button-primary-fill-textonly-text-padding-bottom) - - var(--spectrum-button-primary-fill-textonly-border-size) - ); - padding-top: calc( - var(--spectrum-button-primary-fill-textonly-text-padding-top) - - var(--spectrum-button-primary-fill-textonly-border-size) + padding-block-end: var( + --mod-button-padding-label-bottom, + var(--spectrum-button-padding-label-bottom) ); + padding-block-start: var( + --mod-button-padding-label-top, + var(--spectrum-button-padding-label-top) + ); /* .spectrum-Button-label */ } :host(.focus-visible):after, :host([focused]):after { box-shadow: 0 0 0 - var(--spectrum-button-primary-fill-texticon-focus-ring-size) - var(--spectrum-button-focus-ring-color); /* .spectrum-Button.focus-ring:after, + var( + --mod-button-focus-ring-thickness, + var(--spectrum-button-focus-ring-thickness) + ) + var( + --mod-button-focus-ring-color, + var(--spectrum-button-focus-indicator-color) + ); /* .spectrum-Button.focus-ring:after, * .spectrum-Button.is-focused:after */ } :host(:focus-visible):after, :host([focused]):after { box-shadow: 0 0 0 - var(--spectrum-button-primary-fill-texticon-focus-ring-size) - var(--spectrum-button-focus-ring-color); /* .spectrum-Button.focus-ring:after, + var( + --mod-button-focus-ring-thickness, + var(--spectrum-button-focus-ring-thickness) + ) + var( + --mod-button-focus-ring-color, + var(--spectrum-button-focus-indicator-color) + ); /* .spectrum-Button.focus-ring:after, * .spectrum-Button.is-focused:after */ } -:host([variant='white']) { - --spectrum-button-focus-ring-color: var( - --spectrum-button-m-primary-fill-white-texticon-focus-ring-color-key-focus, - var(--spectrum-global-color-static-white) - ); /* .spectrum-Button--staticWhite */ -} -:host([variant='black']) { - --spectrum-button-focus-ring-color: var( - --spectrum-button-m-primary-fill-black-texticon-focus-ring-color-key-focus, - var(--spectrum-global-color-static-black) - ); /* .spectrum-Button--staticBlack */ -} -:host(:not([variant='white']):not([variant='black'])[disabled]) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-primary-fill-texticon-icon-color-disabled, - var(--spectrum-global-color-gray-500) - ); /* .spectrum-Button:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):disabled .spectrum-Icon */ -} -:host(:not([variant='white']):not([variant='black'])[disabled]) #label { - color: var( - --spectrum-button-m-primary-fill-texticon-text-color-disabled, - var(--spectrum-global-color-gray-500) - ); /* .spectrum-Button:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):disabled .spectrum-Button-label */ +:host { + transition: border-color + var( + --mod-button-animation-duration, + var(--spectrum-button-animation-duration) + ) + ease-in-out; /* .spectrum-Button */ } -:host([variant='white'][disabled]) ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-primary-fill-white-texticon-icon-color-disabled, - var(--spectrum-global-color-static-transparent-white-500) - ); /* .spectrum-Button.spectrum-Button--staticWhite:disabled .spectrum-Icon */ +:host:after { + border-radius: var( + --mod-button-focus-ring-border-radius, + var(--spectrum-button-focus-ring-border-radius) + ); + content: ''; + inset: 0; + margin: calc( + ( + var( + --mod-button-focus-ring-gap, + var(--spectrum-button-focus-ring-gap) + ) + + var( + --mod-button-border-width, + var(--spectrum-button-border-width) + ) + ) * -1 + ); + pointer-events: none; + position: absolute; /* .spectrum-Button:after */ + transition: box-shadow + var( + --mod-button-animation-duration, + var(--spectrum-button-animation-duration) + ) + ease-in-out; } -:host([variant='white'][disabled]) #label { - color: var( - --spectrum-button-m-primary-fill-white-texticon-text-color-disabled, - var(--spectrum-global-color-static-transparent-white-500) - ); /* .spectrum-Button.spectrum-Button--staticWhite:disabled .spectrum-Button-label */ +:host(.focus-visible) { + box-shadow: none; /* .spectrum-Button.focus-ring */ } -:host([variant='white'][treatment='fill']:not([variant='secondary']):not([disabled])) { - background-color: var( - --spectrum-button-m-primary-fill-white-texticon-background-color, - var(--spectrum-global-color-static-white) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill:not(.spectrum-Button--secondary):not(:disabled) */ +:host(:focus-visible) { + box-shadow: none; /* .spectrum-Button.focus-ring */ } -:host([variant='white'][treatment='fill']:not([variant='secondary']):not([disabled])) - ::slotted([slot='icon']) { - color: inherit; /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill:not(.spectrum-Button--secondary):not(:disabled) .spectrum-Icon */ +:host(.focus-visible):after { + box-shadow: 0 0 0 + var( + --mod-button-focus-ring-thickness, + var(--spectrum-button-focus-ring-thickness) + ) + var( + --highcontrast-button-focus-ring-color, + var( + --mod-button-focus-ring-color, + var( + --mod-button-focus-ring-color, + var(--spectrum-button-focus-indicator-color) + ) + ) + ); /* .spectrum-Button.focus-ring:after */ } -:host([variant='white'][treatment='fill']:not([variant='secondary']):not([disabled])) - #label { - color: inherit; /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill:not(.spectrum-Button--secondary):not(:disabled) .spectrum-Button-label */ +:host(:focus-visible):after { + box-shadow: 0 0 0 + var( + --mod-button-focus-ring-thickness, + var(--spectrum-button-focus-ring-thickness) + ) + var( + --highcontrast-button-focus-ring-color, + var( + --mod-button-focus-ring-color, + var( + --mod-button-focus-ring-color, + var(--spectrum-button-focus-indicator-color) + ) + ) + ); /* .spectrum-Button.focus-ring:after */ } -:host([variant='white'][treatment='fill'][variant='secondary']:not([disabled])) { +:host { background-color: var( - --spectrum-button-m-secondary-fill-white-texticon-background-color, - var(--spectrum-global-color-static-transparent-white-200) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled) */ -} -:host([variant='white'][treatment='fill'][variant='secondary']:not([disabled])) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-secondary-fill-white-texticon-icon-color, - var(--spectrum-global-color-static-white) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled) .spectrum-Icon */ -} -:host([variant='white'][treatment='fill'][variant='secondary']:not([disabled])) - #label { + --highcontrast-button-background-color-default, + var( + --mod-button-background-color-default, + var(--spectrum-button-background-color-default) + ) + ); /* .spectrum-Button */ + border-color: var( + --highcontrast-button-border-color-default, + var( + --mod-button-border-color-default, + var(--spectrum-button-border-color-default) + ) + ); color: var( - --spectrum-button-m-secondary-fill-white-texticon-text-color, - var(--spectrum-global-color-static-white) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled) .spectrum-Button-label */ -} -:host([variant='white'][treatment='fill'][variant='secondary']:not([disabled]):hover) { - background-color: var( - --spectrum-button-m-secondary-fill-white-texticon-background-color-hover, - var(--spectrum-global-color-static-transparent-white-300) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled):hover */ -} -:host([variant='white'][treatment='fill'][variant='secondary']:not([disabled])[active]) { - background-color: var( - --spectrum-button-m-secondary-fill-white-texticon-background-color-down, - var(--spectrum-global-color-static-transparent-white-400) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled):active */ -} -:host([variant='white'][treatment='fill'][variant='secondary']:not([disabled]).focus-visible) { - background-color: var( - --spectrum-button-m-secondary-fill-white-texticon-background-color-key-focus, - var(--spectrum-global-color-static-transparent-white-300) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled):focus-visible */ -} -:host([variant='white'][treatment='fill'][variant='secondary']:not([disabled]):focus-visible) { - background-color: var( - --spectrum-button-m-secondary-fill-white-texticon-background-color-key-focus, - var(--spectrum-global-color-static-transparent-white-300) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled):focus-visible */ -} -:host([variant='white'][treatment='fill'][variant='secondary']:not([disabled]).is-keyboardFocused) { - background-color: var( - --spectrum-button-m-secondary-fill-white-texticon-background-color-key-focus, - var(--spectrum-global-color-static-transparent-white-300) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled).is-keyboardFocused */ + --highcontrast-button-content-color-default, + var( + --mod-button-content-color-default, + var(--spectrum-button-content-color-default) + ) + ); } -:host([variant='white'][treatment='fill'][disabled]) { +:host(:hover) { background-color: var( - --spectrum-button-m-secondary-fill-white-texticon-background-color-disabled, - var(--spectrum-global-color-static-transparent-white-200) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill:disabled */ -} -:host([variant='white'][treatment='outline']:not([disabled])) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-secondary-outline-white-texticon-icon-color, - var(--spectrum-global-color-static-white) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:not(:disabled) .spectrum-Icon */ -} -:host([variant='white'][treatment='outline']:not([disabled])) #label { + --highcontrast-button-background-color-hover, + var( + --mod-button-background-color-hover, + var(--spectrum-button-background-color-hover) + ) + ); /* .spectrum-Button:hover */ + border-color: var( + --highcontrast-button-border-color-hover, + var( + --mod-button-border-color-hover, + var(--spectrum-button-border-color-hover) + ) + ); color: var( - --spectrum-button-m-secondary-outline-white-texticon-text-color, - var(--spectrum-global-color-static-white) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:not(:disabled) .spectrum-Button-label */ -} -:host([variant='white'][treatment='outline'][disabled]) { - background-color: var( - --spectrum-button-m-secondary-outline-white-texticon-background-color-disabled, - var(--spectrum-alias-background-color-transparent) + --highcontrast-button-content-color-hover, + var( + --mod-button-content-color-hover, + var(--spectrum-button-content-color-hover) + ) ); - border-color: var( - --spectrum-button-m-secondary-outline-white-texticon-border-color-disabled, - var(--spectrum-global-color-static-transparent-white-200) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:disabled */ } -:host([variant='white'][treatment='outline']:not([variant='secondary']):not([disabled])) { +:host(.focus-visible) { background-color: var( - --spectrum-button-m-primary-outline-white-texticon-background-color, - var(--spectrum-alias-background-color-transparent) - ); + --highcontrast-button-background-color-focus, + var( + --mod-button-background-color-focus, + var(--spectrum-button-background-color-focus) + ) + ); /* .spectrum-Button.focus-ring */ border-color: var( - --spectrum-button-m-primary-outline-white-texticon-border-color, - var(--spectrum-global-color-static-white) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled) */ -} -:host([variant='white'][treatment='outline']:not([variant='secondary']):not([disabled]):hover) { - background-color: var( - --spectrum-button-m-primary-outline-white-texticon-background-color-hover, - var(--spectrum-global-color-static-transparent-white-300) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled):hover */ -} -:host([variant='white'][treatment='outline']:not([variant='secondary']):not([disabled])[active]) { - background-color: var( - --spectrum-button-m-primary-outline-white-texticon-background-color-down, - var(--spectrum-global-color-static-transparent-white-400) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled):active */ -} -:host([variant='white'][treatment='outline']:not([variant='secondary']):not([disabled]).focus-visible) { - background-color: var( - --spectrum-button-m-primary-outline-white-texticon-background-color-key-focus, - var(--spectrum-global-color-static-transparent-white-300) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled):focus-visible */ -} -:host([variant='white'][treatment='outline']:not([variant='secondary']):not([disabled]):focus-visible) { - background-color: var( - --spectrum-button-m-primary-outline-white-texticon-background-color-key-focus, - var(--spectrum-global-color-static-transparent-white-300) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled):focus-visible */ -} -:host([variant='white'][treatment='outline']:not([variant='secondary']):not([disabled]).is-keyboardFocused) { - background-color: var( - --spectrum-button-m-primary-outline-white-texticon-background-color-key-focus, - var(--spectrum-global-color-static-transparent-white-300) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled).is-keyboardFocused */ -} -:host([variant='white'][treatment='outline'][variant='secondary']:not([disabled])) { - background-color: var( - --spectrum-button-m-secondary-outline-white-texticon-background-color, - var(--spectrum-alias-background-color-transparent) + --highcontrast-button-border-color-focus, + var( + --mod-button-border-color-focus, + var(--spectrum-button-border-color-focus) + ) ); - border-color: var( - --spectrum-button-m-secondary-outline-white-texticon-border-color, - var(--spectrum-global-color-static-transparent-white-200) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled) */ -} -:host([variant='white'][treatment='outline'][variant='secondary']:not([disabled]):hover) { - background-color: var( - --spectrum-button-m-secondary-outline-white-texticon-background-color-hover, - var(--spectrum-global-color-static-transparent-white-300) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled):hover */ -} -:host([variant='white'][treatment='outline'][variant='secondary']:not([disabled])[active]) { - background-color: var( - --spectrum-button-m-secondary-outline-white-texticon-background-color-down, - var(--spectrum-global-color-static-transparent-white-400) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled):active */ -} -:host([variant='white'][treatment='outline'][variant='secondary']:not([disabled]).focus-visible) { - background-color: var( - --spectrum-button-m-secondary-outline-white-texticon-background-color-key-focus, - var(--spectrum-global-color-static-transparent-white-300) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled):focus-visible */ -} -:host([variant='white'][treatment='outline'][variant='secondary']:not([disabled]):focus-visible) { - background-color: var( - --spectrum-button-m-secondary-outline-white-texticon-background-color-key-focus, - var(--spectrum-global-color-static-transparent-white-300) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled):focus-visible */ -} -:host([variant='white'][treatment='outline'][variant='secondary']:not([disabled]).is-keyboardFocused) { - background-color: var( - --spectrum-button-m-secondary-outline-white-texticon-background-color-key-focus, - var(--spectrum-global-color-static-transparent-white-300) - ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled).is-keyboardFocused */ -} -:host([variant='black'][disabled]) ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-primary-fill-black-texticon-icon-color-disabled, - var(--spectrum-global-color-static-transparent-black-500) - ); /* .spectrum-Button.spectrum-Button--staticBlack:disabled .spectrum-Icon */ -} -:host([variant='black'][disabled]) #label { color: var( - --spectrum-button-m-primary-fill-black-texticon-text-color-disabled, - var(--spectrum-global-color-static-transparent-black-500) - ); /* .spectrum-Button.spectrum-Button--staticBlack:disabled .spectrum-Button-label */ -} -:host([variant='black'][treatment='fill']:not([variant='secondary']):not([disabled])) { - background-color: var( - --spectrum-button-m-primary-fill-black-texticon-background-color, - var(--spectrum-global-color-static-black) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill:not(.spectrum-Button--secondary):not(:disabled) */ -} -:host([variant='black'][treatment='fill']:not([variant='secondary']):not([disabled])) - ::slotted([slot='icon']) { - color: inherit; /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill:not(.spectrum-Button--secondary):not(:disabled) .spectrum-Icon */ -} -:host([variant='black'][treatment='fill']:not([variant='secondary']):not([disabled])) - #label { - color: inherit; /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill:not(.spectrum-Button--secondary):not(:disabled) .spectrum-Button-label */ + --highcontrast-button-content-color-focus, + var( + --mod-button-content-color-focus, + var(--spectrum-button-content-color-focus) + ) + ); } -:host([variant='black'][treatment='fill'][variant='secondary']:not([disabled])) { +:host(:focus-visible) { background-color: var( - --spectrum-button-m-secondary-fill-black-texticon-background-color, - var(--spectrum-global-color-static-transparent-black-200) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled) */ -} -:host([variant='black'][treatment='fill'][variant='secondary']:not([disabled])) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-secondary-fill-black-texticon-icon-color, - var(--spectrum-global-color-static-black) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled) .spectrum-Icon */ -} -:host([variant='black'][treatment='fill'][variant='secondary']:not([disabled])) - #label { + --highcontrast-button-background-color-focus, + var( + --mod-button-background-color-focus, + var(--spectrum-button-background-color-focus) + ) + ); /* .spectrum-Button.focus-ring */ + border-color: var( + --highcontrast-button-border-color-focus, + var( + --mod-button-border-color-focus, + var(--spectrum-button-border-color-focus) + ) + ); color: var( - --spectrum-button-m-secondary-fill-black-texticon-text-color, - var(--spectrum-global-color-static-black) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled) .spectrum-Button-label */ -} -:host([variant='black'][treatment='fill'][variant='secondary']:not([disabled]):hover) { - background-color: var( - --spectrum-button-m-secondary-fill-black-texticon-background-color-hover, - var(--spectrum-global-color-static-transparent-black-300) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled):hover */ -} -:host([variant='black'][treatment='fill'][variant='secondary']:not([disabled])[active]) { - background-color: var( - --spectrum-button-m-secondary-fill-black-texticon-background-color-down, - var(--spectrum-global-color-static-transparent-black-400) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled):active */ -} -:host([variant='black'][treatment='fill'][variant='secondary']:not([disabled]).focus-visible) { - background-color: var( - --spectrum-button-m-secondary-fill-black-texticon-background-color-key-focus, - var(--spectrum-global-color-static-transparent-black-300) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled):focus-visible */ -} -:host([variant='black'][treatment='fill'][variant='secondary']:not([disabled]):focus-visible) { - background-color: var( - --spectrum-button-m-secondary-fill-black-texticon-background-color-key-focus, - var(--spectrum-global-color-static-transparent-black-300) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled):focus-visible */ -} -:host([variant='black'][treatment='fill'][variant='secondary']:not([disabled]).is-keyboardFocused) { - background-color: var( - --spectrum-button-m-secondary-fill-black-texticon-background-color-key-focus, - var(--spectrum-global-color-static-transparent-black-300) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled).is-keyboardFocused */ + --highcontrast-button-content-color-focus, + var( + --mod-button-content-color-focus, + var(--spectrum-button-content-color-focus) + ) + ); } -:host([variant='black'][treatment='fill'][disabled]) { +:host([active]) { background-color: var( - --spectrum-button-m-secondary-fill-black-texticon-background-color-disabled, - var(--spectrum-global-color-static-transparent-black-200) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill:disabled */ -} -:host([variant='black'][treatment='outline']:not([disabled])) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-secondary-outline-black-texticon-icon-color, - var(--spectrum-global-color-static-black) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(:disabled) .spectrum-Icon */ -} -:host([variant='black'][treatment='outline']:not([disabled])) #label { + --highcontrast-button-background-color-down, + var( + --mod-button-background-color-down, + var(--spectrum-button-background-color-down) + ) + ); /* .spectrum-Button:active */ + border-color: var( + --highcontrast-button-border-color-down, + var( + --mod-button-border-color-down, + var(--spectrum-button-border-color-down) + ) + ); color: var( - --spectrum-button-m-secondary-outline-black-texticon-text-color, - var(--spectrum-global-color-static-black) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(:disabled) .spectrum-Button-label */ -} -:host([variant='black'][treatment='outline'][disabled]) { - background-color: var( - --spectrum-button-m-secondary-outline-black-texticon-background-color-disabled, - var(--spectrum-alias-background-color-transparent) + --highcontrast-button-content-color-down, + var( + --mod-button-content-color-down, + var(--spectrum-button-content-color-down) + ) ); - border-color: var( - --spectrum-button-m-secondary-outline-black-texticon-border-color-disabled, - var(--spectrum-global-color-static-transparent-black-200) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:disabled */ } -:host([variant='black'][treatment='outline']:not([variant='secondary']):not([disabled])) { +:host([disabled]) { background-color: var( - --spectrum-button-m-primary-outline-black-texticon-background-color, - var(--spectrum-alias-background-color-transparent) - ); + --highcontrast-button-background-color-disabled, + var( + --mod-button-background-color-disabled, + var(--spectrum-button-background-color-disabled) + ) + ); /* .spectrum-Button:disabled, + * .spectrum-Button.is-disabled */ border-color: var( - --spectrum-button-m-primary-outline-black-texticon-border-color, - var(--spectrum-global-color-static-black) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled) */ -} -:host([variant='black'][treatment='outline']:not([variant='secondary']):not([disabled]):hover) { - background-color: var( - --spectrum-button-m-primary-outline-black-texticon-background-color-hover, - var(--spectrum-global-color-static-transparent-black-300) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled):hover */ -} -:host([variant='black'][treatment='outline']:not([variant='secondary']):not([disabled])[active]) { - background-color: var( - --spectrum-button-m-primary-outline-black-texticon-background-color-down, - var(--spectrum-global-color-static-transparent-black-400) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled):active */ -} -:host([variant='black'][treatment='outline']:not([variant='secondary']):not([disabled]).focus-visible) { - background-color: var( - --spectrum-button-m-primary-outline-black-texticon-background-color-key-focus, - var(--spectrum-global-color-static-transparent-black-300) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled):focus-visible */ -} -:host([variant='black'][treatment='outline']:not([variant='secondary']):not([disabled]):focus-visible) { - background-color: var( - --spectrum-button-m-primary-outline-black-texticon-background-color-key-focus, - var(--spectrum-global-color-static-transparent-black-300) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled):focus-visible */ -} -:host([variant='black'][treatment='outline']:not([variant='secondary']):not([disabled]).is-keyboardFocused) { - background-color: var( - --spectrum-button-m-primary-outline-black-texticon-background-color-key-focus, - var(--spectrum-global-color-static-transparent-black-300) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled).is-keyboardFocused */ -} -:host([variant='black'][treatment='outline'][variant='secondary']:not([disabled])) { - background-color: var( - --spectrum-button-m-secondary-outline-black-texticon-background-color, - var(--spectrum-alias-background-color-transparent) + --highcontrast-button-border-color-disabled, + var( + --mod-button-border-color-disabled, + var(--spectrum-button-border-color-disabled) + ) ); - border-color: var( - --spectrum-button-m-secondary-outline-black-texticon-border-color, - var(--spectrum-global-color-static-transparent-black-200) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled) */ -} -:host([variant='black'][treatment='outline'][variant='secondary']:not([disabled]):hover) { - background-color: var( - --spectrum-button-m-secondary-outline-black-texticon-background-color-hover, - var(--spectrum-global-color-static-transparent-black-300) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled):hover */ -} -:host([variant='black'][treatment='outline'][variant='secondary']:not([disabled])[active]) { - background-color: var( - --spectrum-button-m-secondary-outline-black-texticon-background-color-down, - var(--spectrum-global-color-static-transparent-black-400) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled):active */ -} -:host([variant='black'][treatment='outline'][variant='secondary']:not([disabled]).focus-visible) { - background-color: var( - --spectrum-button-m-secondary-outline-black-texticon-background-color-key-focus, - var(--spectrum-global-color-static-transparent-black-300) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled):focus-visible */ -} -:host([variant='black'][treatment='outline'][variant='secondary']:not([disabled]):focus-visible) { - background-color: var( - --spectrum-button-m-secondary-outline-black-texticon-background-color-key-focus, - var(--spectrum-global-color-static-transparent-black-300) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled):focus-visible */ -} -:host([variant='black'][treatment='outline'][variant='secondary']:not([disabled]).is-keyboardFocused) { - background-color: var( - --spectrum-button-m-secondary-outline-black-texticon-background-color-key-focus, - var(--spectrum-global-color-static-transparent-black-300) - ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled).is-keyboardFocused */ -} -:host([treatment='fill'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled])) { - background-color: var( - --spectrum-button-m-accent-fill-texticon-background-color, - var(--spectrum-semantic-cta-background-color-default) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) */ -} -:host([treatment='fill'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled])) - ::slotted([slot='icon']) { color: var( - --spectrum-button-m-accent-fill-texticon-icon-color, - var(--spectrum-global-color-static-white) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Icon */ -} -:host([treatment='fill'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled])) - #label { - color: var( - --spectrum-button-m-accent-fill-texticon-text-color, - var(--spectrum-global-color-static-white) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Button-label */ -} -:host([treatment='fill'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]):hover) { - background-color: var( - --spectrum-button-m-accent-fill-texticon-background-color-hover, - var(--spectrum-semantic-cta-background-color-hover) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover */ -} -:host([treatment='fill'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled])[active]) { - background-color: var( - --spectrum-button-m-accent-fill-texticon-background-color-down, - var(--spectrum-semantic-cta-background-color-down) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active */ -} -:host([treatment='fill'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) { - background-color: var( - --spectrum-button-m-accent-fill-texticon-background-color-key-focus, - var(--spectrum-semantic-cta-background-color-key-focus) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ -} -:host([treatment='fill'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) { - background-color: var( - --spectrum-button-m-accent-fill-texticon-background-color-key-focus, - var(--spectrum-semantic-cta-background-color-key-focus) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ -} -:host([treatment='fill'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) { - background-color: var( - --spectrum-button-m-accent-fill-texticon-background-color-key-focus, - var(--spectrum-semantic-cta-background-color-key-focus) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused */ -} -:host([treatment='fill'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled])) { - background-color: var( - --spectrum-button-m-negative-fill-texticon-background-color, - var(--spectrum-global-color-static-red-600) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) */ -} -:host([treatment='fill'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled])) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-negative-fill-texticon-icon-color, - var(--spectrum-global-color-static-white) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Icon */ -} -:host([treatment='fill'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled])) - #label { - color: var( - --spectrum-button-m-negative-fill-texticon-text-color, - var(--spectrum-global-color-static-white) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Button-label */ -} -:host([treatment='fill'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]):hover) { - background-color: var( - --spectrum-button-m-negative-fill-texticon-background-color-hover, - var(--spectrum-global-color-static-red-700) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover */ -} -:host([treatment='fill'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled])[active]) { - background-color: var( - --spectrum-button-m-negative-fill-texticon-background-color-down, - var(--spectrum-global-color-static-red-800) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active */ -} -:host([treatment='fill'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) { - background-color: var( - --spectrum-button-m-negative-fill-texticon-background-color-key-focus, - var(--spectrum-global-color-static-red-700) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ -} -:host([treatment='fill'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) { - background-color: var( - --spectrum-button-m-negative-fill-texticon-background-color-key-focus, - var(--spectrum-global-color-static-red-700) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ -} -:host([treatment='fill'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) { - background-color: var( - --spectrum-button-m-negative-fill-texticon-background-color-key-focus, - var(--spectrum-global-color-static-red-700) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused */ -} -:host([treatment='fill'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled])) { - background-color: var( - --spectrum-button-m-primary-fill-texticon-background-color, - var(--spectrum-global-color-gray-800) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) */ -} -:host([treatment='fill'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled])) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-primary-fill-texticon-icon-color, - var(--spectrum-global-color-gray-50) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Icon */ -} -:host([treatment='fill'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled])) - #label { - color: var( - --spectrum-button-m-primary-fill-texticon-text-color, - var(--spectrum-global-color-gray-50) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Button-label */ -} -:host([treatment='fill'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]):hover) { - background-color: var( - --spectrum-button-m-primary-fill-texticon-background-color-hover, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover */ -} -:host([treatment='fill'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled])[active]) { - background-color: var( - --spectrum-button-m-primary-fill-texticon-background-color-down, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active */ -} -:host([treatment='fill'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) { - background-color: var( - --spectrum-button-m-primary-fill-texticon-background-color-key-focus, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ -} -:host([treatment='fill'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) { - background-color: var( - --spectrum-button-m-primary-fill-texticon-background-color-key-focus, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ -} -:host([treatment='fill'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) { - background-color: var( - --spectrum-button-m-primary-fill-texticon-background-color-key-focus, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused */ -} -:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])) { - background-color: var( - --spectrum-button-m-secondary-fill-texticon-background-color, - var(--spectrum-global-color-gray-200) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) */ -} -:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-secondary-fill-texticon-icon-color, - var(--spectrum-global-color-gray-800) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Icon */ -} -:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):hover) { - background-color: var( - --spectrum-button-m-secondary-fill-texticon-background-color-hover, - var(--spectrum-global-color-gray-300) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover */ + --highcontrast-button-content-color-disabled, + var( + --mod-button-content-color-disabled, + var(--spectrum-button-content-color-disabled) + ) + ); } -:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):hover) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-secondary-fill-texticon-icon-color-hover, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover .spectrum-Icon */ +@media (forced-colors: active) { + :host(.focus-visible):after { + box-shadow: 0 0 0 + var( + --mod-button-focus-ring-thickness, + var(--spectrum-button-focus-ring-thickness) + ) + ButtonTExt; + forced-color-adjust: none; + } + :host(:focus-visible):after { + box-shadow: 0 0 0 + var( + --mod-button-focus-ring-thickness, + var(--spectrum-button-focus-ring-thickness) + ) + ButtonTExt; + forced-color-adjust: none; + } + :host([variant='accent'][treatment='fill']) { + background-color: ButtonText; + color: ButtonFace; + } + :host([variant='accent'][treatment='fill'][disabled]) { + background-color: ButtonFace; + color: GrayText; + } + :host([variant='accent'][treatment='fill'].focus-visible), + :host([variant='accent'][treatment='fill']:hover), + :host([variant='accent'][treatment='fill'][active]), + :host([variant='accent'][treatment='fill'][focused]) { + background-color: Highlight; + } + :host([variant='accent'][treatment='fill']:focus-visible), + :host([variant='accent'][treatment='fill']:hover), + :host([variant='accent'][treatment='fill'][active]), + :host([variant='accent'][treatment='fill'][focused]) { + background-color: Highlight; + } + :host([variant='accent'][treatment='fill']) #label { + forced-color-adjust: none; + } } -:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):hover) - #label { - color: var( - --spectrum-button-m-secondary-fill-texticon-text-color-hover, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover .spectrum-Button-label */ +:host([variant='white']) { + --spectrum-button-focus-indicator-color: var( + --mod-static-black-focus-indicator-color, + var(--spectrum-static-black-focus-indicator-color) + ); /* .spectrum-Button--staticWhite */ } -:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])[active]) { - background-color: var( - --spectrum-button-m-secondary-fill-texticon-background-color-down, - var(--spectrum-global-color-gray-400) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active */ +:host([variant='black']) { + --spectrum-button-focus-indicator-color: var( + --mod-static-black-focus-indicator-color, + var(--spectrum-static-black-focus-indicator-color) + ); /* .spectrum-Button--staticBlack */ } -:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])[active]) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-secondary-fill-texticon-icon-color-down, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active .spectrum-Icon */ +:host { + --spectrum-button-background-color-default: var( + --system-spectrum-button-background-color-default + ); /* .spectrum-Button */ + --spectrum-button-background-color-hover: var( + --system-spectrum-button-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-spectrum-button-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-spectrum-button-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-spectrum-button-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-spectrum-button-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-spectrum-button-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-spectrum-button-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-spectrum-button-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-spectrum-button-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-spectrum-button-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-spectrum-button-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-spectrum-button-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-spectrum-button-content-color-disabled + ); } -:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])[active]) - #label { - color: var( - --spectrum-button-m-secondary-fill-texticon-text-color-down, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active .spectrum-Button-label */ +:host([variant='accent']) { + --spectrum-button-background-color-default: var( + --system-spectrum-button-accent-background-color-default + ); /* .spectrum-Button.spectrum-Button--accent */ + --spectrum-button-background-color-hover: var( + --system-spectrum-button-accent-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-spectrum-button-accent-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-spectrum-button-accent-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-spectrum-button-accent-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-spectrum-button-accent-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-spectrum-button-accent-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-spectrum-button-accent-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-spectrum-button-accent-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-spectrum-button-accent-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-spectrum-button-accent-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-spectrum-button-accent-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-spectrum-button-accent-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-accent-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-spectrum-button-accent-content-color-disabled + ); } -:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) { - background-color: var( - --spectrum-button-m-secondary-fill-texticon-background-color-key-focus, - var(--spectrum-global-color-gray-300) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ +:host([variant='accent'][treatment='outline']) { + --spectrum-button-background-color-default: var( + --system-spectrum-button-accent-outline-background-color-default + ); /* .spectrum-Button.spectrum-Button--accent.spectrum-Button--outline */ + --spectrum-button-background-color-hover: var( + --system-spectrum-button-accent-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-spectrum-button-accent-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-spectrum-button-accent-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-spectrum-button-accent-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-spectrum-button-accent-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-spectrum-button-accent-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-spectrum-button-accent-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-spectrum-button-accent-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-spectrum-button-accent-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-spectrum-button-accent-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-spectrum-button-accent-outline-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-spectrum-button-accent-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-accent-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-spectrum-button-accent-outline-content-color-disabled + ); } -:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) { - background-color: var( - --spectrum-button-m-secondary-fill-texticon-background-color-key-focus, - var(--spectrum-global-color-gray-300) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ +:host([variant='negative']) { + --spectrum-button-background-color-default: var( + --system-spectrum-button-negative-background-color-default + ); /* .spectrum-Button.spectrum-Button--negative */ + --spectrum-button-background-color-hover: var( + --system-spectrum-button-negative-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-spectrum-button-negative-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-spectrum-button-negative-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-spectrum-button-negative-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-spectrum-button-negative-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-spectrum-button-negative-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-spectrum-button-negative-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-spectrum-button-negative-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-spectrum-button-negative-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-spectrum-button-negative-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-spectrum-button-negative-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-spectrum-button-negative-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-negative-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-spectrum-button-negative-content-color-disabled + ); } -:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-secondary-fill-texticon-icon-color-key-focus, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Icon */ +:host([variant='negative'][treatment='outline']) { + --spectrum-button-background-color-default: var( + --system-spectrum-button-negative-outline-background-color-default + ); /* .spectrum-Button.spectrum-Button--negative.spectrum-Button--outline */ + --spectrum-button-background-color-hover: var( + --system-spectrum-button-negative-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-spectrum-button-negative-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-spectrum-button-negative-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-spectrum-button-negative-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-spectrum-button-negative-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-spectrum-button-negative-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-spectrum-button-negative-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-spectrum-button-negative-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-spectrum-button-negative-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-spectrum-button-negative-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-spectrum-button-negative-outline-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-spectrum-button-negative-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-negative-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-spectrum-button-negative-outline-content-color-disabled + ); } -:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-secondary-fill-texticon-icon-color-key-focus, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Icon */ +:host([variant='primary']) { + --spectrum-button-background-color-default: var( + --system-spectrum-button-primary-background-color-default + ); /* .spectrum-Button.spectrum-Button--primary */ + --spectrum-button-background-color-hover: var( + --system-spectrum-button-primary-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-spectrum-button-primary-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-spectrum-button-primary-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-spectrum-button-primary-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-spectrum-button-primary-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-spectrum-button-primary-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-spectrum-button-primary-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-spectrum-button-primary-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-spectrum-button-primary-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-spectrum-button-primary-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-spectrum-button-primary-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-spectrum-button-primary-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-primary-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-spectrum-button-primary-content-color-disabled + ); } -:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) - #label { - color: var( - --spectrum-button-m-secondary-fill-texticon-text-color-key-focus, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Button-label */ +:host([variant='primary'][treatment='outline']) { + --spectrum-button-background-color-default: var( + --system-spectrum-button-primary-outline-background-color-default + ); /* .spectrum-Button.spectrum-Button--primary.spectrum-Button--outline */ + --spectrum-button-background-color-hover: var( + --system-spectrum-button-primary-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-spectrum-button-primary-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-spectrum-button-primary-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-spectrum-button-primary-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-spectrum-button-primary-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-spectrum-button-primary-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-spectrum-button-primary-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-spectrum-button-primary-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-spectrum-button-primary-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-spectrum-button-primary-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-spectrum-button-primary-outline-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-spectrum-button-primary-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-primary-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-spectrum-button-primary-outline-content-color-disabled + ); } -:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) - #label { - color: var( - --spectrum-button-m-secondary-fill-texticon-text-color-key-focus, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Button-label */ +:host([variant='secondary']) { + --spectrum-button-background-color-default: var( + --system-spectrum-button-secondary-background-color-default + ); /* .spectrum-Button.spectrum-Button--secondary */ + --spectrum-button-background-color-hover: var( + --system-spectrum-button-secondary-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-spectrum-button-secondary-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-spectrum-button-secondary-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-spectrum-button-secondary-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-spectrum-button-secondary-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-spectrum-button-secondary-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-spectrum-button-secondary-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-spectrum-button-secondary-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-spectrum-button-secondary-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-spectrum-button-secondary-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-spectrum-button-secondary-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-spectrum-button-secondary-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-secondary-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-spectrum-button-secondary-content-color-disabled + ); } -:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) { - background-color: var( - --spectrum-button-m-secondary-fill-texticon-background-color-key-focus, - var(--spectrum-global-color-gray-300) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused */ +:host([variant='secondary'][treatment='outline']) { + --spectrum-button-background-color-default: var( + --system-spectrum-button-secondary-outline-background-color-default + ); /* .spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline */ + --spectrum-button-background-color-hover: var( + --system-spectrum-button-secondary-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-spectrum-button-secondary-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-spectrum-button-secondary-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-spectrum-button-secondary-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-spectrum-button-secondary-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-spectrum-button-secondary-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-spectrum-button-secondary-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-spectrum-button-secondary-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-spectrum-button-secondary-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-spectrum-button-secondary-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-spectrum-button-secondary-outline-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-spectrum-button-secondary-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-secondary-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-spectrum-button-secondary-outline-content-color-disabled + ); } -:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-secondary-fill-texticon-icon-color-key-focus, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused .spectrum-Icon */ +:host([quiet]) { + --spectrum-button-background-color-default: var( + --system-spectrum-button-quiet-background-color-default + ); /* .spectrum-Button.spectrum-Button--quiet */ + --spectrum-button-background-color-hover: var( + --system-spectrum-button-quiet-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-spectrum-button-quiet-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-spectrum-button-quiet-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-spectrum-button-quiet-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-spectrum-button-quiet-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-spectrum-button-quiet-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-spectrum-button-quiet-border-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-spectrum-button-quiet-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-quiet-border-color-disabled + ); } -:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) - #label { - color: var( - --spectrum-button-m-secondary-fill-texticon-text-color-key-focus, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused .spectrum-Button-label */ +:host(.is-selected) { + --spectrum-button-background-color-default: var( + --system-spectrum-button-selected-background-color-default + ); /* .spectrum-Button.is-selected */ + --spectrum-button-background-color-hover: var( + --system-spectrum-button-selected-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-spectrum-button-selected-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-spectrum-button-selected-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-spectrum-button-selected-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-spectrum-button-selected-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-spectrum-button-selected-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-spectrum-button-selected-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-spectrum-button-selected-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-spectrum-button-selected-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-spectrum-button-selected-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-spectrum-button-selected-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-spectrum-button-selected-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-selected-border-color-disabled + ); } -:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])) - #label { - color: var( - --spectrum-button-m-secondary-fill-texticon-text-color, - var(--spectrum-global-color-gray-800) - ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Button-label */ +:host(.is-selected.spectrum-Button--emphasized) { + --spectrum-button-background-color-default: var( + --system-spectrum-button-selected-emphasized-background-color-default + ); /* .spectrum-Button.is-selected.spectrum-Button--emphasized */ + --spectrum-button-background-color-hover: var( + --system-spectrum-button-selected-emphasized-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-spectrum-button-selected-emphasized-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-spectrum-button-selected-emphasized-background-color-focus + ); } -:host([treatment='fill']:not([variant='white']):not([variant='black'])[disabled]) { - background-color: var( - --spectrum-button-m-primary-fill-texticon-background-color-disabled, - var(--spectrum-global-color-gray-200) - ); /* .spectrum-Button.spectrum-Button--fill:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):disabled */ +:host([variant='black'][quiet]) { + --spectrum-button-border-color-default: var( + --system-spectrum-button-staticblack-quiet-border-color-default + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet */ + --spectrum-button-border-color-hover: var( + --system-spectrum-button-staticblack-quiet-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-spectrum-button-staticblack-quiet-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-spectrum-button-staticblack-quiet-border-color-focus + ); + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-staticblack-quiet-border-color-disabled + ); } -:host([treatment='fill'][disabled]) { - border-color: var( - --spectrum-button-m-primary-fill-texticon-border-color-disabled, - transparent - ); /* .spectrum-Button.spectrum-Button--fill:disabled */ +:host([variant='white'][quiet]) { + --spectrum-button-border-color-default: var( + --system-spectrum-button-staticwhite-quiet-border-color-default + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet */ + --spectrum-button-border-color-hover: var( + --system-spectrum-button-staticwhite-quiet-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-spectrum-button-staticwhite-quiet-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-spectrum-button-staticwhite-quiet-border-color-focus + ); + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-staticwhite-quiet-border-color-disabled + ); } -:host([treatment='fill']:not([disabled])) { - border-color: var( - --spectrum-button-m-primary-fill-texticon-border-color, - transparent - ); /* .spectrum-Button.spectrum-Button--fill:not(:disabled) */ +:host([variant='white']) { + --spectrum-button-background-color-default: var( + --system-spectrum-button-staticwhite-background-color-default + ); /* .spectrum-Button.spectrum-Button--staticWhite */ + --spectrum-button-background-color-hover: var( + --system-spectrum-button-staticwhite-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-spectrum-button-staticwhite-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-spectrum-button-staticwhite-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-spectrum-button-staticwhite-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-spectrum-button-staticwhite-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-spectrum-button-staticwhite-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-spectrum-button-staticwhite-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-spectrum-button-staticwhite-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-spectrum-button-staticwhite-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-spectrum-button-staticwhite-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-spectrum-button-staticwhite-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-spectrum-button-staticwhite-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-spectrum-button-staticwhite-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-staticwhite-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-spectrum-button-staticwhite-content-color-disabled + ); } -:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled])) { - background-color: var( - --spectrum-button-m-accent-outline-texticon-background-color, - var(--spectrum-alias-background-color-transparent) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) */ - border-color: var( - --spectrum-button-m-accent-outline-texticon-border-color, - var(--spectrum-semantic-emphasized-border-color-default) +:host([variant='white'][treatment='outline']) { + --spectrum-button-background-color-default: var( + --system-spectrum-button-staticwhite-outline-background-color-default + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline */ + --spectrum-button-background-color-hover: var( + --system-spectrum-button-staticwhite-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-spectrum-button-staticwhite-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-spectrum-button-staticwhite-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-spectrum-button-staticwhite-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-spectrum-button-staticwhite-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-spectrum-button-staticwhite-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-spectrum-button-staticwhite-outline-border-color-focus ); -} -:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled])) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-accent-outline-texticon-icon-color, - var(--spectrum-semantic-emphasized-border-color-default) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Icon */ -} -:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]):hover) { - background-color: var( - --spectrum-button-m-accent-outline-texticon-background-color-hover, - var(--spectrum-alias-transparent-blue-background-color-hover) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover */ - border-color: var( - --spectrum-button-m-accent-outline-texticon-border-color-hover, - var(--spectrum-semantic-emphasized-border-color-hover) + --spectrum-button-content-color-default: var( + --system-spectrum-button-staticwhite-outline-content-color-default ); -} -:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]):hover) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-accent-outline-texticon-icon-color-hover, - var(--spectrum-semantic-emphasized-border-color-hover) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover .spectrum-Icon */ -} -:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]):hover) - #label { - color: var( - --spectrum-button-m-accent-outline-texticon-text-color-hover, - var(--spectrum-semantic-emphasized-border-color-hover) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover .spectrum-Button-label */ -} -:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled])[active]) { - background-color: var( - --spectrum-button-m-accent-outline-texticon-background-color-down, - var(--spectrum-alias-transparent-blue-background-color-down) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active */ - border-color: var( - --spectrum-button-m-accent-outline-texticon-border-color-down, - var(--spectrum-semantic-emphasized-border-color-down) + --spectrum-button-content-color-hover: var( + --system-spectrum-button-staticwhite-outline-content-color-hover ); -} -:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled])[active]) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-accent-outline-texticon-icon-color-down, - var(--spectrum-semantic-emphasized-border-color-down) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active .spectrum-Icon */ -} -:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled])[active]) - #label { - color: var( - --spectrum-button-m-accent-outline-texticon-text-color-down, - var(--spectrum-semantic-emphasized-border-color-down) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active .spectrum-Button-label */ -} -:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) { - background-color: var( - --spectrum-button-m-accent-outline-texticon-background-color-key-focus, - var(--spectrum-alias-transparent-blue-background-color-key-focus) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ - border-color: var( - --spectrum-button-m-accent-outline-texticon-border-color-key-focus, - var(--spectrum-semantic-emphasized-border-color-key-focus) + --spectrum-button-content-color-down: var( + --system-spectrum-button-staticwhite-outline-content-color-down ); -} -:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) { - background-color: var( - --spectrum-button-m-accent-outline-texticon-background-color-key-focus, - var(--spectrum-alias-transparent-blue-background-color-key-focus) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ - border-color: var( - --spectrum-button-m-accent-outline-texticon-border-color-key-focus, - var(--spectrum-semantic-emphasized-border-color-key-focus) + --spectrum-button-content-color-focus: var( + --system-spectrum-button-staticwhite-outline-content-color-focus ); -} -:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-accent-outline-texticon-icon-color-key-focus, - var(--spectrum-semantic-emphasized-border-color-key-focus) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Icon */ -} -:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-accent-outline-texticon-icon-color-key-focus, - var(--spectrum-semantic-emphasized-border-color-key-focus) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Icon */ -} -:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) - #label { - color: var( - --spectrum-button-m-accent-outline-texticon-text-color-key-focus, - var(--spectrum-semantic-emphasized-border-color-key-focus) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Button-label */ -} -:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) - #label { - color: var( - --spectrum-button-m-accent-outline-texticon-text-color-key-focus, - var(--spectrum-semantic-emphasized-border-color-key-focus) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Button-label */ -} -:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) { - background-color: var( - --spectrum-button-m-accent-outline-texticon-background-color-key-focus, - var(--spectrum-alias-transparent-blue-background-color-key-focus) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused */ - border-color: var( - --spectrum-button-m-accent-outline-texticon-border-color-key-focus, - var(--spectrum-semantic-emphasized-border-color-key-focus) + --spectrum-button-focus-indicator-color: var( + --system-spectrum-button-staticwhite-outline-focus-indicator-color ); -} -:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-accent-outline-texticon-icon-color-key-focus, - var(--spectrum-semantic-emphasized-border-color-key-focus) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused .spectrum-Icon */ -} -:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) - #label { - color: var( - --spectrum-button-m-accent-outline-texticon-text-color-key-focus, - var(--spectrum-semantic-emphasized-border-color-key-focus) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused .spectrum-Button-label */ -} -:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled])) - #label { - color: var( - --spectrum-button-m-accent-outline-texticon-text-color, - var(--spectrum-semantic-emphasized-border-color-default) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Button-label */ -} -:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled])) { - background-color: var( - --spectrum-button-m-negative-outline-texticon-background-color, - var(--spectrum-alias-background-color-transparent) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) */ - border-color: var( - --spectrum-button-m-negative-outline-texticon-border-color, - var(--spectrum-global-color-red-500) + --spectrum-button-background-color-disabled: var( + --system-spectrum-button-staticwhite-outline-background-color-disabled ); -} -:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled])) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-negative-outline-texticon-icon-color, - var(--spectrum-global-color-red-500) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Icon */ -} -:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]):hover) { - background-color: var( - --spectrum-button-m-negative-outline-texticon-background-color-hover, - var(--spectrum-alias-transparent-red-background-color-hover) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover */ - border-color: var( - --spectrum-button-m-negative-outline-texticon-border-color-hover, - var(--spectrum-global-color-red-600) + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-staticwhite-outline-border-color-disabled ); -} -:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]):hover) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-negative-outline-texticon-icon-color-hover, - var(--spectrum-global-color-red-600) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover .spectrum-Icon */ -} -:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]):hover) - #label { - color: var( - --spectrum-button-m-negative-outline-texticon-text-color-hover, - var(--spectrum-global-color-red-600) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover .spectrum-Button-label */ -} -:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled])[active]) { - background-color: var( - --spectrum-button-m-negative-outline-texticon-background-color-down, - var(--spectrum-alias-transparent-red-background-color-down) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active */ - border-color: var( - --spectrum-button-m-negative-outline-texticon-border-color-down, - var(--spectrum-global-color-red-700) + --spectrum-button-content-color-disabled: var( + --system-spectrum-button-staticwhite-outline-content-color-disabled ); } -:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled])[active]) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-negative-outline-texticon-icon-color-down, - var(--spectrum-global-color-red-700) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active .spectrum-Icon */ -} -:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled])[active]) - #label { - color: var( - --spectrum-button-m-negative-outline-texticon-text-color-down, - var(--spectrum-global-color-red-700) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active .spectrum-Button-label */ -} -:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) { - background-color: var( - --spectrum-button-m-negative-outline-texticon-background-color-key-focus, - var(--spectrum-alias-transparent-red-background-color-key-focus) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ - border-color: var( - --spectrum-button-m-negative-outline-texticon-border-color-key-focus, - var(--spectrum-global-color-red-600) +:host([variant='white'].is-selected) { + --spectrum-button-background-color-default: var( + --system-spectrum-button-staticwhite-selected-background-color-default + ); /* .spectrum-Button.spectrum-Button--staticWhite.is-selected */ + --spectrum-button-background-color-hover: var( + --system-spectrum-button-staticwhite-selected-background-color-hover ); -} -:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) { - background-color: var( - --spectrum-button-m-negative-outline-texticon-background-color-key-focus, - var(--spectrum-alias-transparent-red-background-color-key-focus) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ - border-color: var( - --spectrum-button-m-negative-outline-texticon-border-color-key-focus, - var(--spectrum-global-color-red-600) + --spectrum-button-background-color-down: var( + --system-spectrum-button-staticwhite-selected-background-color-down ); -} -:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-negative-outline-texticon-icon-color-key-focus, - var(--spectrum-global-color-red-600) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Icon */ -} -:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-negative-outline-texticon-icon-color-key-focus, - var(--spectrum-global-color-red-600) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Icon */ -} -:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) - #label { - color: var( - --spectrum-button-m-negative-outline-texticon-text-color-key-focus, - var(--spectrum-global-color-red-600) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Button-label */ -} -:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) - #label { - color: var( - --spectrum-button-m-negative-outline-texticon-text-color-key-focus, - var(--spectrum-global-color-red-600) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Button-label */ -} -:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) { - background-color: var( - --spectrum-button-m-negative-outline-texticon-background-color-key-focus, - var(--spectrum-alias-transparent-red-background-color-key-focus) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused */ - border-color: var( - --spectrum-button-m-negative-outline-texticon-border-color-key-focus, - var(--spectrum-global-color-red-600) + --spectrum-button-background-color-focus: var( + --system-spectrum-button-staticwhite-selected-background-color-focus ); -} -:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-negative-outline-texticon-icon-color-key-focus, - var(--spectrum-global-color-red-600) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused .spectrum-Icon */ -} -:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) - #label { - color: var( - --spectrum-button-m-negative-outline-texticon-text-color-key-focus, - var(--spectrum-global-color-red-600) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused .spectrum-Button-label */ -} -:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled])) - #label { - color: var( - --spectrum-button-m-negative-outline-texticon-text-color, - var(--spectrum-global-color-red-500) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Button-label */ -} -:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled])) { - background-color: var( - --spectrum-button-m-primary-outline-texticon-background-color, - var(--spectrum-alias-background-color-transparent) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) */ - border-color: var( - --spectrum-button-m-primary-outline-texticon-border-color, - var(--spectrum-global-color-gray-800) + --spectrum-button-content-color-default: var( + --mod-button-static-content-color, + var(--system-spectrum-button-staticwhite-selected-content-color-default) ); -} -:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled])) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-primary-outline-texticon-icon-color, - var(--spectrum-global-color-gray-800) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Icon */ -} -:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]):hover) { - background-color: var( - --spectrum-button-m-primary-outline-texticon-background-color-hover, - var(--spectrum-global-color-gray-300) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover */ - border-color: var( - --spectrum-button-m-primary-outline-texticon-border-color-hover, - var(--spectrum-global-color-gray-900) + --spectrum-button-content-color-hover: var( + --mod-button-static-content-color, + var(--system-spectrum-button-staticwhite-selected-content-color-hover) ); -} -:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]):hover) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-primary-outline-texticon-icon-color-hover, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover .spectrum-Icon */ -} -:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]):hover) - #label { - color: var( - --spectrum-button-m-primary-outline-texticon-text-color-hover, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover .spectrum-Button-label */ -} -:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled])[active]) { - background-color: var( - --spectrum-button-m-primary-outline-texticon-background-color-down, - var(--spectrum-global-color-gray-400) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active */ - border-color: var( - --spectrum-button-m-primary-outline-texticon-border-color-down, - var(--spectrum-global-color-gray-900) + --spectrum-button-content-color-down: var( + --mod-button-static-content-color, + var(--system-spectrum-button-staticwhite-selected-content-color-down) ); -} -:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled])[active]) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-primary-outline-texticon-icon-color-down, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active .spectrum-Icon */ -} -:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled])[active]) - #label { - color: var( - --spectrum-button-m-primary-outline-texticon-text-color-down, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active .spectrum-Button-label */ -} -:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) { - background-color: var( - --spectrum-button-m-primary-outline-texticon-background-color-key-focus, - var(--spectrum-global-color-gray-300) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ - border-color: var( - --spectrum-button-m-primary-outline-texticon-border-color-key-focus, - var(--spectrum-global-color-gray-900) + --spectrum-button-content-color-focus: var( + --mod-button-static-content-color, + var(--system-spectrum-button-staticwhite-selected-content-color-focus) ); -} -:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) { - background-color: var( - --spectrum-button-m-primary-outline-texticon-background-color-key-focus, - var(--spectrum-global-color-gray-300) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ - border-color: var( - --spectrum-button-m-primary-outline-texticon-border-color-key-focus, - var(--spectrum-global-color-gray-900) + --spectrum-button-background-color-disabled: var( + --system-spectrum-button-staticwhite-selected-background-color-disabled ); -} -:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-primary-outline-texticon-icon-color-key-focus, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Icon */ -} -:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-primary-outline-texticon-icon-color-key-focus, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Icon */ -} -:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) - #label { - color: var( - --spectrum-button-m-primary-outline-texticon-text-color-key-focus, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Button-label */ -} -:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) - #label { - color: var( - --spectrum-button-m-primary-outline-texticon-text-color-key-focus, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Button-label */ -} -:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) { - background-color: var( - --spectrum-button-m-primary-outline-texticon-background-color-key-focus, - var(--spectrum-global-color-gray-300) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused */ - border-color: var( - --spectrum-button-m-primary-outline-texticon-border-color-key-focus, - var(--spectrum-global-color-gray-900) + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-staticwhite-selected-border-color-disabled ); } -:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-primary-outline-texticon-icon-color-key-focus, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused .spectrum-Icon */ -} -:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) - #label { - color: var( - --spectrum-button-m-primary-outline-texticon-text-color-key-focus, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused .spectrum-Button-label */ -} -:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled])) - #label { - color: var( - --spectrum-button-m-primary-outline-texticon-text-color, - var(--spectrum-global-color-gray-800) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Button-label */ -} -:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])) { - background-color: var( - --spectrum-button-m-secondary-outline-texticon-background-color, - var(--spectrum-alias-background-color-transparent) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) */ - border-color: var( - --spectrum-button-m-secondary-outline-texticon-border-color, - var(--spectrum-global-color-gray-300) +:host([variant='white'][variant='secondary']) { + --spectrum-button-background-color-default: var( + --system-spectrum-button-staticwhite-secondary-background-color-default + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary */ + --spectrum-button-background-color-hover: var( + --system-spectrum-button-staticwhite-secondary-background-color-hover ); -} -:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-secondary-outline-texticon-icon-color, - var(--spectrum-global-color-gray-800) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Icon */ -} -:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):hover) { - background-color: var( - --spectrum-button-m-secondary-outline-texticon-background-color-hover, - var(--spectrum-global-color-gray-300) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover */ - border-color: var( - --spectrum-button-m-secondary-outline-texticon-border-color-hover, - var(--spectrum-global-color-gray-400) + --spectrum-button-background-color-down: var( + --system-spectrum-button-staticwhite-secondary-background-color-down ); -} -:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):hover) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-secondary-outline-texticon-icon-color-hover, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover .spectrum-Icon */ -} -:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):hover) - #label { - color: var( - --spectrum-button-m-secondary-outline-texticon-text-color-hover, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover .spectrum-Button-label */ -} -:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])[active]) { - background-color: var( - --spectrum-button-m-secondary-outline-texticon-background-color-down, - var(--spectrum-global-color-gray-400) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active */ - border-color: var( - --spectrum-button-m-secondary-outline-texticon-border-color-down, - var(--spectrum-global-color-gray-500) + --spectrum-button-background-color-focus: var( + --system-spectrum-button-staticwhite-secondary-background-color-focus ); -} -:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])[active]) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-secondary-outline-texticon-icon-color-down, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active .spectrum-Icon */ -} -:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])[active]) - #label { - color: var( - --spectrum-button-m-secondary-outline-texticon-text-color-down, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active .spectrum-Button-label */ -} -:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) { - background-color: var( - --spectrum-button-m-secondary-outline-texticon-background-color-key-focus, - var(--spectrum-global-color-gray-300) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ - border-color: var( - --spectrum-button-m-secondary-outline-texticon-border-color-key-focus, - var(--spectrum-global-color-gray-400) + --spectrum-button-border-color-default: var( + --system-spectrum-button-staticwhite-secondary-border-color-default ); -} -:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) { - background-color: var( - --spectrum-button-m-secondary-outline-texticon-background-color-key-focus, - var(--spectrum-global-color-gray-300) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ - border-color: var( - --spectrum-button-m-secondary-outline-texticon-border-color-key-focus, - var(--spectrum-global-color-gray-400) + --spectrum-button-border-color-hover: var( + --system-spectrum-button-staticwhite-secondary-border-color-hover ); -} -:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-secondary-outline-texticon-icon-color-key-focus, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Icon */ -} -:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-secondary-outline-texticon-icon-color-key-focus, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Icon */ -} -:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) - #label { - color: var( - --spectrum-button-m-secondary-outline-texticon-text-color-key-focus, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Button-label */ -} -:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) - #label { - color: var( - --spectrum-button-m-secondary-outline-texticon-text-color-key-focus, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Button-label */ -} -:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) { - background-color: var( - --spectrum-button-m-secondary-outline-texticon-background-color-key-focus, - var(--spectrum-global-color-gray-300) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused */ - border-color: var( - --spectrum-button-m-secondary-outline-texticon-border-color-key-focus, - var(--spectrum-global-color-gray-400) + --spectrum-button-border-color-down: var( + --system-spectrum-button-staticwhite-secondary-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-spectrum-button-staticwhite-secondary-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-spectrum-button-staticwhite-secondary-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-spectrum-button-staticwhite-secondary-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-spectrum-button-staticwhite-secondary-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-spectrum-button-staticwhite-secondary-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-spectrum-button-staticwhite-secondary-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-spectrum-button-staticwhite-secondary-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-staticwhite-secondary-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-spectrum-button-staticwhite-secondary-content-color-disabled ); } -:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) - ::slotted([slot='icon']) { - color: var( - --spectrum-button-m-secondary-outline-texticon-icon-color-key-focus, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused .spectrum-Icon */ +:host([variant='white'][variant='secondary'][treatment='outline']) { + --spectrum-button-background-color-default: var( + --system-spectrum-button-staticwhite-secondary-outline-background-color-default + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline */ + --spectrum-button-background-color-hover: var( + --system-spectrum-button-staticwhite-secondary-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-spectrum-button-staticwhite-secondary-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-spectrum-button-staticwhite-secondary-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-spectrum-button-staticwhite-secondary-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-spectrum-button-staticwhite-secondary-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-spectrum-button-staticwhite-secondary-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-spectrum-button-staticwhite-secondary-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-spectrum-button-staticwhite-secondary-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-spectrum-button-staticwhite-secondary-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-spectrum-button-staticwhite-secondary-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-spectrum-button-staticwhite-secondary-outline-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-spectrum-button-staticwhite-secondary-outline-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-spectrum-button-staticwhite-secondary-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-staticwhite-secondary-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-spectrum-button-staticwhite-secondary-outline-content-color-disabled + ); } -:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) - #label { - color: var( - --spectrum-button-m-secondary-outline-texticon-text-color-key-focus, - var(--spectrum-global-color-gray-900) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused .spectrum-Button-label */ +:host([variant='black']) { + --spectrum-button-background-color-default: var( + --system-spectrum-button-staticblack-background-color-default + ); /* .spectrum-Button.spectrum-Button--staticBlack */ + --spectrum-button-background-color-hover: var( + --system-spectrum-button-staticblack-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-spectrum-button-staticblack-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-spectrum-button-staticblack-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-spectrum-button-staticblack-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-spectrum-button-staticblack-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-spectrum-button-staticblack-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-spectrum-button-staticblack-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-spectrum-button-staticblack-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-spectrum-button-staticblack-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-spectrum-button-staticblack-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-spectrum-button-staticblack-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-spectrum-button-staticblack-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-spectrum-button-staticblack-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-staticblack-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-spectrum-button-staticblack-content-color-disabled + ); } -:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])) - #label { - color: var( - --spectrum-button-m-secondary-outline-texticon-text-color, - var(--spectrum-global-color-gray-800) - ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Button-label */ +:host([variant='black'][treatment='outline']) { + --spectrum-button-background-color-default: var( + --system-spectrum-button-staticblack-outline-background-color-default + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline */ + --spectrum-button-background-color-hover: var( + --system-spectrum-button-staticblack-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-spectrum-button-staticblack-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-spectrum-button-staticblack-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-spectrum-button-staticblack-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-spectrum-button-staticblack-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-spectrum-button-staticblack-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-spectrum-button-staticblack-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-spectrum-button-staticblack-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-spectrum-button-staticblack-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-spectrum-button-staticblack-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-spectrum-button-staticblack-outline-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-spectrum-button-staticblack-outline-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-spectrum-button-staticblack-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-staticblack-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-spectrum-button-staticblack-outline-content-color-disabled + ); } -:host([treatment='outline']:not([variant='white']):not([variant='black'])[disabled]) { - background-color: var( - --spectrum-button-m-primary-outline-texticon-background-color-disabled, - var(--spectrum-alias-background-color-transparent) +:host([variant='black'][variant='secondary']) { + --spectrum-button-background-color-default: var( + --system-spectrum-button-staticblack-secondary-background-color-default + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary */ + --spectrum-button-background-color-hover: var( + --system-spectrum-button-staticblack-secondary-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-spectrum-button-staticblack-secondary-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-spectrum-button-staticblack-secondary-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-spectrum-button-staticblack-secondary-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-spectrum-button-staticblack-secondary-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-spectrum-button-staticblack-secondary-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-spectrum-button-staticblack-secondary-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-spectrum-button-staticblack-secondary-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-spectrum-button-staticblack-secondary-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-spectrum-button-staticblack-secondary-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-spectrum-button-staticblack-secondary-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-spectrum-button-staticblack-secondary-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-spectrum-button-staticblack-secondary-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-staticblack-secondary-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-spectrum-button-staticblack-secondary-content-color-disabled ); - border-color: var( - --spectrum-button-m-primary-outline-texticon-border-color-disabled, - var(--spectrum-global-color-gray-200) - ); /* .spectrum-Button.spectrum-Button--outline:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):disabled */ } -@media (forced-colors: active) { - :host { - --spectrum-button-m-accent-fill-texticon-background-color-down: Highlight; - --spectrum-button-m-accent-fill-texticon-background-color-hover: Highlight; - --spectrum-button-m-accent-fill-texticon-background-color-key-focus: Highlight; - --spectrum-button-m-accent-fill-texticon-background-color: ButtonText; - --spectrum-button-m-accent-fill-texticon-icon-color: ButtonFace; - --spectrum-button-m-accent-fill-texticon-text-color: ButtonFace; - --spectrum-button-m-accent-outline-texticon-background-color: ButtonFace; - --spectrum-button-m-accent-outline-texticon-background-color-down: ButtonFace; - --spectrum-button-m-accent-outline-texticon-background-color-hover: ButtonFace; - --spectrum-button-m-accent-outline-texticon-background-color-key-focus: ButtonFace; - --spectrum-button-m-accent-outline-texticon-border-color: ButtonText; - --spectrum-button-m-accent-outline-texticon-border-color-down: Highlight; - --spectrum-button-m-accent-outline-texticon-border-color-hover: Highlight; - --spectrum-button-m-accent-outline-texticon-border-color-key-focus: Highlight; - --spectrum-button-m-accent-outline-texticon-icon-color: ButtonText; - --spectrum-button-m-accent-outline-texticon-icon-color-down: ButtonText; - --spectrum-button-m-accent-outline-texticon-icon-color-hover: ButtonText; - --spectrum-button-m-accent-outline-texticon-icon-color-key-focus: ButtonText; - --spectrum-button-m-accent-outline-texticon-text-color: ButtonText; - --spectrum-button-m-accent-outline-texticon-text-color-down: ButtonText; - --spectrum-button-m-accent-outline-texticon-text-color-hover: ButtonText; - --spectrum-button-m-accent-outline-texticon-text-color-key-focus: ButtonText; - --spectrum-button-m-primary-fill-texticon-icon-color-disabled: GrayText; - --spectrum-button-m-primary-fill-texticon-text-color-disabled: GrayText; - --spectrum-button-m-primary-fill-white-texticon-icon-color-disabled: GrayText; - --spectrum-button-m-primary-fill-white-texticon-text-color-disabled: GrayText; - --spectrum-button-m-secondary-fill-white-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-secondary-outline-white-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-primary-fill-black-texticon-icon-color-disabled: GrayText; - --spectrum-button-m-primary-fill-black-texticon-text-color-disabled: GrayText; - --spectrum-button-m-secondary-fill-black-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-secondary-outline-black-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-primary-fill-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-primary-outline-texticon-background-color-disabled: ButtonFace; - } - :host(.focus-visible):after, - :host([focused]):after { - box-shadow: 0 0 0 - var(--spectrum-button-primary-fill-texticon-focus-ring-size) - ButtonText; - forced-color-adjust: none; - } - :host(:focus-visible):after, - :host([focused]):after { - box-shadow: 0 0 0 - var(--spectrum-button-primary-fill-texticon-focus-ring-size) - ButtonText; - forced-color-adjust: none; - } - :host([variant='accent']) #label { - forced-color-adjust: none; - } +:host([variant='black'][variant='secondary'][treatment='outline']) { + --spectrum-button-background-color-default: var( + --system-spectrum-button-staticblack-secondary-outline-background-color-default + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline */ + --spectrum-button-background-color-hover: var( + --system-spectrum-button-staticblack-secondary-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-spectrum-button-staticblack-secondary-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-spectrum-button-staticblack-secondary-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-spectrum-button-staticblack-secondary-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-spectrum-button-staticblack-secondary-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-spectrum-button-staticblack-secondary-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-spectrum-button-staticblack-secondary-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-spectrum-button-staticblack-secondary-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-spectrum-button-staticblack-secondary-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-spectrum-button-staticblack-secondary-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-spectrum-button-staticblack-secondary-outline-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-spectrum-button-staticblack-secondary-outline-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-spectrum-button-staticblack-secondary-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-spectrum-button-staticblack-secondary-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-spectrum-button-staticblack-secondary-outline-content-color-disabled + ); } diff --git a/scripts/spectrum-tokens.js b/scripts/spectrum-tokens.js index 6e438c29d9..d329ac2818 100644 --- a/scripts/spectrum-tokens.js +++ b/scripts/spectrum-tokens.js @@ -32,6 +32,7 @@ const tokensRoot = path.join( const tokenPackages = [ 'actionbutton', 'checkbox', + 'button', 'closebutton', 'helptext', 'radio', diff --git a/tools/styles/express/spectrum-core-global.css b/tools/styles/express/spectrum-core-global.css index 6a3c84ae5a..b8bb888694 100644 --- a/tools/styles/express/spectrum-core-global.css +++ b/tools/styles/express/spectrum-core-global.css @@ -963,9 +963,6 @@ governing permissions and limitations under the License. --spectrum-alias-font-family-condensed: var( --spectrum-global-font-font-family-condensed ); - --spectrum-alias-button-text-line-height: var( - --spectrum-global-font-line-height-small - ); --spectrum-alias-component-text-line-height: var( --spectrum-global-font-line-height-small ); @@ -2047,33 +2044,6 @@ governing permissions and limitations under the License. --spectrum-alias-avatar-border-color-selected-key-focus: var( --spectrum-global-color-gray-900 ); - --spectrum-alias-button-primary-background-color-default: var( - --spectrum-alias-button-primary-border-color-default - ); - --spectrum-alias-button-primary-text-color-default: var( - --spectrum-alias-button-primary-text-color-hover - ); - --spectrum-alias-button-primary-icon-color-default: var( - --spectrum-alias-button-primary-text-color-default - ); - --spectrum-alias-button-secondary-background-color-default: var( - --spectrum-alias-button-secondary-border-color-default - ); - --spectrum-alias-button-secondary-text-color-default: var( - --spectrum-alias-button-secondary-text-color-hover - ); - --spectrum-alias-button-secondary-icon-color-default: var( - --spectrum-alias-button-secondary-text-color-default - ); - --spectrum-alias-button-negative-background-color-default: var( - --spectrum-alias-button-negative-border-color-default - ); - --spectrum-alias-button-negative-text-color-default: var( - --spectrum-alias-button-negative-text-color-hover - ); - --spectrum-alias-button-negative-icon-color-default: var( - --spectrum-alias-button-negative-text-color-default - ); --spectrum-alias-input-border-color-default: var( --spectrum-alias-border-color ); @@ -2495,159 +2465,6 @@ governing permissions and limitations under the License. --spectrum-alias-toggle-icon-color-emphasized-selected: var( --spectrum-global-color-gray-75 ); - --spectrum-alias-button-primary-background-color-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-background-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-button-primary-background-color-key-focus: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-background-color: var( - --spectrum-alias-button-primary-background-color-default - ); - --spectrum-alias-button-primary-border-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-border-color-hover: var( - --spectrum-alias-button-primary-background-color-hover - ); - --spectrum-alias-button-primary-border-color-down: var( - --spectrum-alias-button-primary-background-color-down - ); - --spectrum-alias-button-primary-border-color-key-focus: var( - --spectrum-alias-button-primary-background-color-key-focus - ); - --spectrum-alias-button-primary-border-color: var( - --spectrum-alias-button-primary-border-color-default - ); - --spectrum-alias-button-primary-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color: var( - --spectrum-alias-button-primary-text-color-default - ); - --spectrum-alias-button-primary-icon-color-hover: var( - --spectrum-alias-button-primary-text-color-hover - ); - --spectrum-alias-button-primary-icon-color-down: var( - --spectrum-alias-button-primary-text-color-down - ); - --spectrum-alias-button-primary-icon-color-key-focus: var( - --spectrum-alias-button-primary-text-color-key-focus - ); - --spectrum-alias-button-primary-icon-color: var( - --spectrum-alias-button-primary-icon-color-default - ); - --spectrum-alias-button-secondary-background-color-hover: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-background-color-down: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-secondary-background-color-key-focus: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-background-color: var( - --spectrum-alias-button-secondary-background-color-default - ); - --spectrum-alias-button-secondary-border-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-border-color-hover: var( - --spectrum-alias-button-secondary-background-color-hover - ); - --spectrum-alias-button-secondary-border-color-down: var( - --spectrum-alias-button-secondary-background-color-down - ); - --spectrum-alias-button-secondary-border-color-key-focus: var( - --spectrum-alias-button-secondary-background-color-key-focus - ); - --spectrum-alias-button-secondary-border-color: var( - --spectrum-alias-button-secondary-border-color-default - ); - --spectrum-alias-button-secondary-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color: var( - --spectrum-alias-button-secondary-text-color-default - ); - --spectrum-alias-button-secondary-icon-color-hover: var( - --spectrum-alias-button-secondary-text-color-hover - ); - --spectrum-alias-button-secondary-icon-color-down: var( - --spectrum-alias-button-secondary-text-color-down - ); - --spectrum-alias-button-secondary-icon-color-key-focus: var( - --spectrum-alias-button-secondary-text-color-key-focus - ); - --spectrum-alias-button-secondary-icon-color: var( - --spectrum-alias-button-secondary-icon-color-default - ); - --spectrum-alias-button-negative-background-color-hover: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-background-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-button-negative-background-color-key-focus: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-background-color: var( - --spectrum-alias-button-negative-background-color-default - ); - --spectrum-alias-button-negative-border-color-default: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color-hover: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-button-negative-border-color-key-focus: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color: var( - --spectrum-alias-button-negative-border-color-default - ); - --spectrum-alias-button-negative-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color: var( - --spectrum-alias-button-negative-text-color-default - ); - --spectrum-alias-button-negative-icon-color-hover: var( - --spectrum-alias-button-negative-text-color-hover - ); - --spectrum-alias-button-negative-icon-color-down: var( - --spectrum-alias-button-negative-text-color-down - ); - --spectrum-alias-button-negative-icon-color-key-focus: var( - --spectrum-alias-button-negative-text-color-key-focus - ); - --spectrum-alias-button-negative-icon-color: var( - --spectrum-alias-button-negative-icon-color-default - ); --spectrum-alias-input-border-color-disabled: var( --spectrum-alias-border-color-transparent ); diff --git a/tools/styles/express/spectrum-scale-large.css b/tools/styles/express/spectrum-scale-large.css index 7f044473c9..586dc588de 100644 --- a/tools/styles/express/spectrum-scale-large.css +++ b/tools/styles/express/spectrum-scale-large.css @@ -274,15 +274,6 @@ governing permissions and limitations under the License. --spectrum-alias-avatar-size-100: 26px; --spectrum-alias-avatar-size-400: 36px; --spectrum-alias-avatar-size-600: 46px; - --spectrum-button-s-primary-fill-textonly-text-padding-bottom: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-button-m-primary-fill-texticon-padding-left: 17px; - --spectrum-button-l-primary-fill-textonly-text-padding-top: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-button-xl-primary-fill-texticon-padding-left: 27px; - --spectrum-button-m-primary-outline-texticon-padding-left: 17px; --spectrum-dialog-confirm-title-text-size: var( --spectrum-alias-heading-xs-text-size ); diff --git a/tools/styles/express/spectrum-scale-medium.css b/tools/styles/express/spectrum-scale-medium.css index e9e6eace2f..4bb3ce028b 100644 --- a/tools/styles/express/spectrum-scale-medium.css +++ b/tools/styles/express/spectrum-scale-medium.css @@ -278,19 +278,6 @@ governing permissions and limitations under the License. --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250); --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350); --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450); - --spectrum-button-s-primary-fill-textonly-text-padding-bottom: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-button-m-primary-fill-texticon-padding-left: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-button-l-primary-fill-textonly-text-padding-top: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-button-xl-primary-fill-texticon-padding-left: 21px; - --spectrum-button-m-primary-outline-texticon-padding-left: var( - --spectrum-global-dimension-size-175 - ); --spectrum-dialog-confirm-title-text-size: var( --spectrum-alias-heading-s-text-size ); diff --git a/tools/styles/package.json b/tools/styles/package.json index 44c660f816..609b067d5e 100644 --- a/tools/styles/package.json +++ b/tools/styles/package.json @@ -110,8 +110,8 @@ "devDependencies": { "@spectrum-css/commons": "^4.0.2", "@spectrum-css/expressvars": "^2.0.3", - "@spectrum-css/tokens": "^6.3.0", - "@spectrum-css/typography": "^4.0.25", + "@spectrum-css/tokens": "^7.0.0", + "@spectrum-css/typography": "^4.0.26", "@spectrum-css/vars": "^8.0.3" }, "customElements": "custom-elements.json", diff --git a/tools/styles/spectrum-core-global.css b/tools/styles/spectrum-core-global.css index 8f358146e7..e1e4e362b9 100644 --- a/tools/styles/spectrum-core-global.css +++ b/tools/styles/spectrum-core-global.css @@ -963,9 +963,6 @@ governing permissions and limitations under the License. --spectrum-alias-font-family-condensed: var( --spectrum-global-font-font-family-condensed ); - --spectrum-alias-button-text-line-height: var( - --spectrum-global-font-line-height-small - ); --spectrum-alias-component-text-line-height: var( --spectrum-global-font-line-height-small ); @@ -2303,186 +2300,6 @@ governing permissions and limitations under the License. --spectrum-alias-toggle-icon-color-emphasized-selected: var( --spectrum-global-color-gray-75 ); - --spectrum-alias-button-primary-background-color-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-button-primary-background-color-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-background-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-button-primary-background-color-key-focus: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-background-color: var( - --spectrum-alias-button-primary-background-color-default - ); - --spectrum-alias-button-primary-border-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-border-color-hover: var( - --spectrum-alias-button-primary-background-color-hover - ); - --spectrum-alias-button-primary-border-color-down: var( - --spectrum-alias-button-primary-background-color-down - ); - --spectrum-alias-button-primary-border-color-key-focus: var( - --spectrum-alias-button-primary-background-color-key-focus - ); - --spectrum-alias-button-primary-border-color: var( - --spectrum-alias-button-primary-border-color-default - ); - --spectrum-alias-button-primary-text-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color: var( - --spectrum-alias-button-primary-text-color-default - ); - --spectrum-alias-button-primary-icon-color-default: var( - --spectrum-alias-button-primary-text-color-default - ); - --spectrum-alias-button-primary-icon-color-hover: var( - --spectrum-alias-button-primary-text-color-hover - ); - --spectrum-alias-button-primary-icon-color-down: var( - --spectrum-alias-button-primary-text-color-down - ); - --spectrum-alias-button-primary-icon-color-key-focus: var( - --spectrum-alias-button-primary-text-color-key-focus - ); - --spectrum-alias-button-primary-icon-color: var( - --spectrum-alias-button-primary-icon-color-default - ); - --spectrum-alias-button-secondary-background-color-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-button-secondary-background-color-hover: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-background-color-down: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-secondary-background-color-key-focus: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-background-color: var( - --spectrum-alias-button-secondary-background-color-default - ); - --spectrum-alias-button-secondary-border-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-border-color-hover: var( - --spectrum-alias-button-secondary-background-color-hover - ); - --spectrum-alias-button-secondary-border-color-down: var( - --spectrum-alias-button-secondary-background-color-down - ); - --spectrum-alias-button-secondary-border-color-key-focus: var( - --spectrum-alias-button-secondary-background-color-key-focus - ); - --spectrum-alias-button-secondary-border-color: var( - --spectrum-alias-button-secondary-border-color-default - ); - --spectrum-alias-button-secondary-text-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color: var( - --spectrum-alias-button-secondary-text-color-default - ); - --spectrum-alias-button-secondary-icon-color-default: var( - --spectrum-alias-button-secondary-text-color-default - ); - --spectrum-alias-button-secondary-icon-color-hover: var( - --spectrum-alias-button-secondary-text-color-hover - ); - --spectrum-alias-button-secondary-icon-color-down: var( - --spectrum-alias-button-secondary-text-color-down - ); - --spectrum-alias-button-secondary-icon-color-key-focus: var( - --spectrum-alias-button-secondary-text-color-key-focus - ); - --spectrum-alias-button-secondary-icon-color: var( - --spectrum-alias-button-secondary-icon-color-default - ); - --spectrum-alias-button-negative-background-color-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-button-negative-background-color-hover: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-background-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-button-negative-background-color-key-focus: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-background-color: var( - --spectrum-alias-button-negative-background-color-default - ); - --spectrum-alias-button-negative-border-color-default: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color-hover: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-button-negative-border-color-key-focus: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color: var( - --spectrum-alias-button-negative-border-color-default - ); - --spectrum-alias-button-negative-text-color-default: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color: var( - --spectrum-alias-button-negative-text-color-default - ); - --spectrum-alias-button-negative-icon-color-default: var( - --spectrum-alias-button-negative-text-color-default - ); - --spectrum-alias-button-negative-icon-color-hover: var( - --spectrum-alias-button-negative-text-color-hover - ); - --spectrum-alias-button-negative-icon-color-down: var( - --spectrum-alias-button-negative-text-color-down - ); - --spectrum-alias-button-negative-icon-color-key-focus: var( - --spectrum-alias-button-negative-text-color-key-focus - ); - --spectrum-alias-button-negative-icon-color: var( - --spectrum-alias-button-negative-icon-color-default - ); --spectrum-alias-input-border-color-disabled: var( --spectrum-alias-border-color-transparent ); diff --git a/tools/styles/spectrum-scale-large.css b/tools/styles/spectrum-scale-large.css index 719b2255ec..1cd345fed7 100644 --- a/tools/styles/spectrum-scale-large.css +++ b/tools/styles/spectrum-scale-large.css @@ -285,15 +285,6 @@ governing permissions and limitations under the License. --spectrum-alias-avatar-size-100: 26px; --spectrum-alias-avatar-size-400: 36px; --spectrum-alias-avatar-size-600: 46px; - --spectrum-button-s-primary-fill-textonly-text-padding-bottom: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-button-m-primary-fill-texticon-padding-left: 17px; - --spectrum-button-l-primary-fill-textonly-text-padding-top: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-button-xl-primary-fill-texticon-padding-left: 27px; - --spectrum-button-m-primary-outline-texticon-padding-left: 17px; --spectrum-dialog-confirm-title-text-size: var( --spectrum-alias-heading-xs-text-size ); diff --git a/tools/styles/spectrum-scale-medium.css b/tools/styles/spectrum-scale-medium.css index d6ba3a7ada..43088334e3 100644 --- a/tools/styles/spectrum-scale-medium.css +++ b/tools/styles/spectrum-scale-medium.css @@ -283,19 +283,6 @@ governing permissions and limitations under the License. --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250); --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350); --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450); - --spectrum-button-s-primary-fill-textonly-text-padding-bottom: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-button-m-primary-fill-texticon-padding-left: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-button-l-primary-fill-textonly-text-padding-top: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-button-xl-primary-fill-texticon-padding-left: 21px; - --spectrum-button-m-primary-outline-texticon-padding-left: var( - --spectrum-global-dimension-size-175 - ); --spectrum-dialog-confirm-title-text-size: var( --spectrum-alias-heading-s-text-size ); diff --git a/tools/styles/tokens/express/global-vars.css b/tools/styles/tokens/express/global-vars.css index fba6495253..39509b336d 100644 --- a/tools/styles/tokens/express/global-vars.css +++ b/tools/styles/tokens/express/global-vars.css @@ -40,15 +40,15 @@ governing permissions and limitations under the License. --spectrum-accent-color-1300: var(--spectrum-indigo-1300); --spectrum-accent-color-1400: var(--spectrum-indigo-1400); --spectrum-heading-sans-serif-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); - --spectrum-heading-serif-font-weight: var(--spectrum-font-weight-black); - --spectrum-heading-cjk-font-weight: var(--spectrum-font-weight-black); + --spectrum-heading-serif-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-cjk-font-weight: var(--spectrum-black-font-weight); --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); } :host, @@ -308,6 +308,750 @@ governing permissions and limitations under the License. ); } :host, +:root { + --system-spectrum-button-background-color-default: var(--spectrum-gray-200); + --system-spectrum-button-background-color-hover: var(--spectrum-gray-300); + --system-spectrum-button-background-color-down: var(--spectrum-gray-400); + --system-spectrum-button-background-color-focus: var(--spectrum-gray-300); + --system-spectrum-button-border-color-default: transparent; + --system-spectrum-button-border-color-hover: transparent; + --system-spectrum-button-border-color-down: transparent; + --system-spectrum-button-border-color-focus: transparent; + --system-spectrum-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-border-color-disabled: transparent; + --system-spectrum-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-accent-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-spectrum-button-accent-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-spectrum-button-accent-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-spectrum-button-accent-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-spectrum-button-accent-border-color-default: transparent; + --system-spectrum-button-accent-border-color-hover: transparent; + --system-spectrum-button-accent-border-color-down: transparent; + --system-spectrum-button-accent-border-color-focus: transparent; + --system-spectrum-button-accent-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-accent-content-color-hover: var(--spectrum-white); + --system-spectrum-button-accent-content-color-down: var(--spectrum-white); + --system-spectrum-button-accent-content-color-focus: var(--spectrum-white); + --system-spectrum-button-accent-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-accent-border-color-disabled: transparent; + --system-spectrum-button-accent-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-accent-outline-background-color-default: transparent; + --system-spectrum-button-accent-outline-background-color-hover: var( + --spectrum-accent-color-200 + ); + --system-spectrum-button-accent-outline-background-color-down: var( + --spectrum-accent-color-300 + ); + --system-spectrum-button-accent-outline-background-color-focus: var( + --spectrum-accent-color-200 + ); + --system-spectrum-button-accent-outline-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-spectrum-button-accent-outline-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-spectrum-button-accent-outline-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-spectrum-button-accent-outline-border-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-spectrum-button-accent-outline-content-color-default: var( + --spectrum-accent-content-color-default + ); + --system-spectrum-button-accent-outline-content-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-spectrum-button-accent-outline-content-color-down: var( + --spectrum-accent-content-color-down + ); + --system-spectrum-button-accent-outline-content-color-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-spectrum-button-accent-outline-background-color-disabled: transparent; + --system-spectrum-button-accent-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-accent-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-spectrum-button-negative-background-color-hover: var( + --spectrum-negative-background-color-hover + ); + --system-spectrum-button-negative-background-color-down: var( + --spectrum-negative-background-color-down + ); + --system-spectrum-button-negative-background-color-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-spectrum-button-negative-border-color-default: transparent; + --system-spectrum-button-negative-border-color-hover: transparent; + --system-spectrum-button-negative-border-color-down: transparent; + --system-spectrum-button-negative-border-color-focus: transparent; + --system-spectrum-button-negative-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-negative-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-negative-content-color-down: var(--spectrum-white); + --system-spectrum-button-negative-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-negative-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-negative-border-color-disabled: transparent; + --system-spectrum-button-negative-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-negative-outline-background-color-default: transparent; + --system-spectrum-button-negative-outline-background-color-hover: var( + --spectrum-negative-color-200 + ); + --system-spectrum-button-negative-outline-background-color-down: var( + --spectrum-negative-color-300 + ); + --system-spectrum-button-negative-outline-background-color-focus: var( + --spectrum-negative-color-200 + ); + --system-spectrum-button-negative-outline-border-color-default: var( + --spectrum-negative-color-900 + ); + --system-spectrum-button-negative-outline-border-color-hover: var( + --spectrum-negative-color-1000 + ); + --system-spectrum-button-negative-outline-border-color-down: var( + --spectrum-negative-color-1100 + ); + --system-spectrum-button-negative-outline-border-color-focus: var( + --spectrum-negative-color-1000 + ); + --system-spectrum-button-negative-outline-content-color-default: var( + --spectrum-negative-content-color-default + ); + --system-spectrum-button-negative-outline-content-color-hover: var( + --spectrum-negative-content-color-hover + ); + --system-spectrum-button-negative-outline-content-color-down: var( + --spectrum-negative-content-color-down + ); + --system-spectrum-button-negative-outline-content-color-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-spectrum-button-negative-outline-background-color-disabled: transparent; + --system-spectrum-button-negative-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-negative-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-primary-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-spectrum-button-primary-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-spectrum-button-primary-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-spectrum-button-primary-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-spectrum-button-primary-border-color-default: transparent; + --system-spectrum-button-primary-border-color-hover: transparent; + --system-spectrum-button-primary-border-color-down: transparent; + --system-spectrum-button-primary-border-color-focus: transparent; + --system-spectrum-button-primary-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-primary-content-color-hover: var(--spectrum-white); + --system-spectrum-button-primary-content-color-down: var(--spectrum-white); + --system-spectrum-button-primary-content-color-focus: var(--spectrum-white); + --system-spectrum-button-primary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-primary-border-color-disabled: transparent; + --system-spectrum-button-primary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-primary-outline-background-color-default: transparent; + --system-spectrum-button-primary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-primary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-primary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-primary-outline-border-color-default: var( + --spectrum-gray-800 + ); + --system-spectrum-button-primary-outline-border-color-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-border-color-down: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-border-color-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-primary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-primary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-primary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-primary-outline-background-color-disabled: transparent; + --system-spectrum-button-primary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-primary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-secondary-background-color-default: var( + --spectrum-gray-200 + ); + --system-spectrum-button-secondary-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-border-color-default: transparent; + --system-spectrum-button-secondary-border-color-hover: transparent; + --system-spectrum-button-secondary-border-color-down: transparent; + --system-spectrum-button-secondary-border-color-focus: transparent; + --system-spectrum-button-secondary-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-secondary-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-secondary-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-secondary-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-secondary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-secondary-border-color-disabled: transparent; + --system-spectrum-button-secondary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-secondary-outline-background-color-default: transparent; + --system-spectrum-button-secondary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-border-color-default: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-border-color-hover: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-border-color-down: var( + --spectrum-gray-500 + ); + --system-spectrum-button-secondary-outline-border-color-focus: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-secondary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-secondary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-secondary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-secondary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-secondary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-quiet-background-color-default: transparent; + --system-spectrum-button-quiet-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-button-quiet-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-button-quiet-background-color-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-button-quiet-border-color-default: transparent; + --system-spectrum-button-quiet-border-color-hover: transparent; + --system-spectrum-button-quiet-border-color-down: transparent; + --system-spectrum-button-quiet-border-color-focus: transparent; + --system-spectrum-button-quiet-background-color-disabled: transparent; + --system-spectrum-button-quiet-border-color-disabled: transparent; + --system-spectrum-button-selected-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-spectrum-button-selected-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-spectrum-button-selected-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-spectrum-button-selected-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-spectrum-button-selected-border-color-default: transparent; + --system-spectrum-button-selected-border-color-hover: transparent; + --system-spectrum-button-selected-border-color-down: transparent; + --system-spectrum-button-selected-border-color-focus: transparent; + --system-spectrum-button-selected-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-selected-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-selected-content-color-down: var(--spectrum-white); + --system-spectrum-button-selected-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-selected-border-color-disabled: transparent; + --system-spectrum-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-spectrum-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-spectrum-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-spectrum-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-spectrum-button-staticblack-quiet-border-color-default: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-default: transparent; + --system-spectrum-button-staticblack-quiet-border-color-hover: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-hover: transparent; + --system-spectrum-button-staticblack-quiet-border-color-down: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-down: transparent; + --system-spectrum-button-staticblack-quiet-border-color-focus: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-focus: transparent; + --system-spectrum-button-staticblack-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-border-color-default: transparent; + --system-spectrum-button-staticwhite-border-color-hover: transparent; + --system-spectrum-button-staticwhite-border-color-down: transparent; + --system-spectrum-button-staticwhite-border-color-focus: transparent; + --system-spectrum-button-staticwhite-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-outline-border-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-outline-border-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-border-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-border-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-spectrum-button-staticwhite-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-selected-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-selected-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-selected-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-background-color-default: var( + --spectrum-transparent-white-200 + ); + --system-spectrum-button-staticwhite-secondary-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-border-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-hover: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-down: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-focus: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-secondary-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-default: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-down: var( + --spectrum-transparent-white-500 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticblack-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-spectrum-button-staticblack-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-border-color-default: transparent; + --system-spectrum-button-staticblack-border-color-hover: transparent; + --system-spectrum-button-staticblack-border-color-down: transparent; + --system-spectrum-button-staticblack-border-color-focus: transparent; + --system-spectrum-button-staticblack-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-button-staticblack-border-color-disabled: transparent; + --system-spectrum-button-staticblack-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-outline-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-outline-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-outline-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-spectrum-button-staticblack-outline-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-outline-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-spectrum-button-staticblack-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-secondary-background-color-default: var( + --spectrum-transparent-black-200 + ); + --system-spectrum-button-staticblack-secondary-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-border-color-default: transparent; + --system-spectrum-button-staticblack-secondary-border-color-hover: transparent; + --system-spectrum-button-staticblack-secondary-border-color-down: transparent; + --system-spectrum-button-staticblack-secondary-border-color-focus: transparent; + --system-spectrum-button-staticblack-secondary-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-secondary-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-button-staticblack-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-secondary-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-default: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-down: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); +} +:host, :root { --system-spectrum-closebutton-background-color-default: transparent; --system-spectrum-closebutton-background-color-hover: var( diff --git a/tools/styles/tokens/express/medium-vars.css b/tools/styles/tokens/express/medium-vars.css index 8160804928..c16acabeeb 100644 --- a/tools/styles/tokens/express/medium-vars.css +++ b/tools/styles/tokens/express/medium-vars.css @@ -64,6 +64,10 @@ governing permissions and limitations under the License. --spectrum-slider-bottom-to-handle-medium: 6px; --spectrum-slider-bottom-to-handle-large: 9px; --spectrum-slider-bottom-to-handle-extra-large: 12px; + --spectrum-color-loupe-height: 40px; + --spectrum-color-loupe-width: 32px; + --spectrum-color-loupe-bottom-to-color-handle: 6px; + --spectrum-color-loupe-inner-border-width: 3px; --spectrum-corner-radius-75: 3px; --spectrum-corner-radius-100: 6px; --spectrum-corner-radius-200: 12px; diff --git a/tools/styles/tokens/global-vars.css b/tools/styles/tokens/global-vars.css index d18907e8f1..b258a3f02a 100644 --- a/tools/styles/tokens/global-vars.css +++ b/tools/styles/tokens/global-vars.css @@ -99,6 +99,15 @@ governing permissions and limitations under the License. --spectrum-color-area-border-opacity: 0.1; --spectrum-color-slider-border-color: var(--spectrum-gray-900); --spectrum-color-slider-border-opacity: 0.1; + --spectrum-color-loupe-drop-shadow-color: var( + --spectrum-transparent-black-300 + ); + --spectrum-color-loupe-drop-shadow-y: 2px; + --spectrum-color-loupe-drop-shadow-blur: 8px; + --spectrum-color-loupe-inner-border: var(--spectrum-transparent-black-200); + --spectrum-color-loupe-outer-border: var(--spectrum-white); + --spectrum-card-selection-background-color: var(--spectrum-gray-100); + --spectrum-card-selection-background-color-opacity: 0.95; --spectrum-white: rgb(255, 255, 255); --spectrum-transparent-white-100: rgba(255, 255, 255, 0); --spectrum-transparent-white-200: rgba(255, 255, 255, 0.1); @@ -159,6 +168,13 @@ governing permissions and limitations under the License. --spectrum-color-slider-minimum-length: 200px; --spectrum-color-slider-border-width: 1px; --spectrum-color-slider-border-rounding: 4px; + --spectrum-floating-action-button-drop-shadow-blur: 12px; + --spectrum-illustrated-message-maximum-width: 380px; + --spectrum-search-field-minimum-width-multiplier: 3; + --spectrum-color-loupe-outer-border-width: var(--spectrum-border-width-200); + --spectrum-card-minimum-width: 100px; + --spectrum-card-preview-minimum-height: 130px; + --spectrum-card-selection-background-size: 40px; --spectrum-android-elevation: 2dp; --spectrum-spacing-50: 2px; --spectrum-spacing-75: 4px; @@ -177,6 +193,7 @@ governing permissions and limitations under the License. --spectrum-border-width-200: 2px; --spectrum-border-width-400: 4px; --spectrum-field-edge-to-text-quiet: 0px; + --spectrum-field-edge-to-visual-quiet: 0px; --spectrum-field-edge-to-border-quiet: 0px; --spectrum-field-edge-to-alert-icon-quiet: 0px; --spectrum-field-edge-to-validation-icon-quiet: 0px; @@ -238,217 +255,216 @@ governing permissions and limitations under the License. --spectrum-positive-color-1200: var(--spectrum-green-1200); --spectrum-positive-color-1300: var(--spectrum-green-1300); --spectrum-positive-color-1400: var(--spectrum-green-1400); - --spectrum-font-family-default: var(--spectrum-font-family-sans-serif); - --spectrum-font-family-sans-serif: Adobe Clean; - --spectrum-font-family-serif: Adobe Clean Serif; - --spectrum-font-family-code: Source Code Pro; - --spectrum-font-family-cjk: Adobe Clean Han; - --spectrum-font-weight-light: light; - --spectrum-font-weight-regular: regular; - --spectrum-font-weight-medium: medium; - --spectrum-font-weight-bold: bold; - --spectrum-font-weight-extra-bold: extra-bold; - --spectrum-font-weight-black: black; - --spectrum-font-style-italic: italic; - --spectrum-font-style-default: normal; + --spectrum-default-font-family: var(--spectrum-sans-serif-font-family); + --spectrum-sans-serif-font-family: Adobe Clean; + --spectrum-serif-font-family: Adobe Clean Serif; + --spectrum-cjk-font-family: Adobe Clean Han; + --spectrum-light-font-weight: light; + --spectrum-regular-font-weight: regular; + --spectrum-medium-font-weight: medium; + --spectrum-bold-font-weight: bold; + --spectrum-extra-bold-font-weight: extra-bold; + --spectrum-black-font-weight: black; + --spectrum-italic-font-style: italic; + --spectrum-default-font-style: normal; --spectrum-line-height-100: 1.3; --spectrum-line-height-200: 1.5; - --spectrum-line-height-cjk-100: 1.5; - --spectrum-line-height-cjk-200: 1.7; - --spectrum-letter-spacing-cjk: 0.05em; + --spectrum-cjk-line-height-100: 1.5; + --spectrum-cjk-line-height-200: 1.7; + --spectrum-cjk-letter-spacing: 0.05em; --spectrum-heading-sans-serif-font-family: var( - --spectrum-font-family-sans-serif + --spectrum-sans-serif-font-family ); - --spectrum-heading-serif-font-family: var(--spectrum-font-family-serif); - --spectrum-heading-cjk-font-family: var(--spectrum-font-family-cjk); + --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family); + --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family); --spectrum-heading-sans-serif-light-font-weight: var( - --spectrum-font-weight-light + --spectrum-light-font-weight ); --spectrum-heading-sans-serif-light-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-heading-serif-light-font-weight: var( - --spectrum-font-weight-regular + --spectrum-regular-font-weight ); --spectrum-heading-serif-light-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); - --spectrum-heading-cjk-light-font-weight: var(--spectrum-font-weight-light); - --spectrum-heading-cjk-light-font-style: var(--spectrum-font-style-default); + --spectrum-heading-cjk-light-font-weight: var(--spectrum-light-font-weight); + --spectrum-heading-cjk-light-font-style: var(--spectrum-default-font-style); --spectrum-heading-sans-serif-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); - --spectrum-heading-serif-font-style: var(--spectrum-font-style-default); - --spectrum-heading-cjk-font-style: var(--spectrum-font-style-default); + --spectrum-heading-serif-font-style: var(--spectrum-default-font-style); + --spectrum-heading-cjk-font-style: var(--spectrum-default-font-style); --spectrum-heading-sans-serif-heavy-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-heading-sans-serif-heavy-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-heading-serif-heavy-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-heading-serif-heavy-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); - --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-font-weight-black); - --spectrum-heading-cjk-heavy-font-style: var(--spectrum-font-style-default); + --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-font-style: var(--spectrum-default-font-style); --spectrum-heading-sans-serif-light-strong-font-weight: var( - --spectrum-font-weight-bold + --spectrum-bold-font-weight ); --spectrum-heading-sans-serif-light-strong-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-heading-serif-light-strong-font-weight: var( - --spectrum-font-weight-bold + --spectrum-bold-font-weight ); --spectrum-heading-serif-light-strong-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-heading-cjk-light-strong-font-weight: var( - --spectrum-font-weight-extra-bold + --spectrum-extra-bold-font-weight ); --spectrum-heading-cjk-light-strong-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-heading-sans-serif-strong-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-heading-sans-serif-strong-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-heading-serif-strong-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-heading-serif-strong-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-heading-cjk-strong-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-heading-cjk-strong-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-heading-sans-serif-heavy-strong-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-heading-sans-serif-heavy-strong-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-heading-serif-heavy-strong-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-heading-serif-heavy-strong-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-heading-cjk-heavy-strong-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-heading-cjk-heavy-strong-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-heading-sans-serif-light-emphasized-font-weight: var( - --spectrum-font-weight-light + --spectrum-light-font-weight ); --spectrum-heading-sans-serif-light-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-heading-serif-light-emphasized-font-weight: var( - --spectrum-font-weight-regular + --spectrum-regular-font-weight ); --spectrum-heading-serif-light-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-heading-cjk-light-emphasized-font-weight: var( - --spectrum-font-weight-regular + --spectrum-regular-font-weight ); --spectrum-heading-cjk-light-emphasized-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-heading-sans-serif-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-heading-serif-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-heading-cjk-emphasized-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-heading-cjk-emphasized-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-heading-sans-serif-heavy-emphasized-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-heading-sans-serif-heavy-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-heading-serif-heavy-emphasized-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-heading-serif-heavy-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-heading-cjk-heavy-emphasized-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-heading-cjk-heavy-emphasized-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-heading-sans-serif-light-strong-emphasized-font-weight: var( - --spectrum-font-weight-bold + --spectrum-bold-font-weight ); --spectrum-heading-sans-serif-light-strong-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-heading-serif-light-strong-emphasized-font-weight: var( - --spectrum-font-weight-bold + --spectrum-bold-font-weight ); --spectrum-heading-serif-light-strong-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-heading-cjk-light-strong-emphasized-font-weight: var( - --spectrum-font-weight-extra-bold + --spectrum-extra-bold-font-weight ); --spectrum-heading-cjk-light-strong-emphasized-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-heading-sans-serif-strong-emphasized-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-heading-sans-serif-strong-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-heading-serif-strong-emphasized-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-heading-serif-strong-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-heading-cjk-strong-emphasized-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-heading-cjk-strong-emphasized-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-heading-serif-heavy-strong-emphasized-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-heading-serif-heavy-strong-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-heading-cjk-heavy-strong-emphasized-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-heading-cjk-heavy-strong-emphasized-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-heading-size-xxxl: var(--spectrum-font-size-1300); --spectrum-heading-size-xxl: var(--spectrum-font-size-1100); @@ -458,66 +474,74 @@ governing permissions and limitations under the License. --spectrum-heading-size-s: var(--spectrum-font-size-300); --spectrum-heading-size-xs: var(--spectrum-font-size-200); --spectrum-heading-size-xxs: var(--spectrum-font-size-100); + --spectrum-heading-cjk-size-xxxl: var(--spectrum-font-size-1300); + --spectrum-heading-cjk-size-xxl: var(--spectrum-font-size-900); + --spectrum-heading-cjk-size-xl: var(--spectrum-font-size-800); + --spectrum-heading-cjk-size-l: var(--spectrum-font-size-600); + --spectrum-heading-cjk-size-m: var(--spectrum-font-size-400); + --spectrum-heading-cjk-size-s: var(--spectrum-font-size-300); + --spectrum-heading-cjk-size-xs: var(--spectrum-font-size-200); + --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100); --spectrum-heading-line-height: var(--spectrum-line-height-100); - --spectrum-heading-line-height-cjk: var(--spectrum-line-height-cjk-100); + --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100); --spectrum-heading-margin-top-multiplier: 0.88888889; --spectrum-heading-margin-bottom-multiplier: 0.25; --spectrum-body-sans-serif-font-family: var( - --spectrum-font-family-sans-serif - ); - --spectrum-body-serif-font-family: var(--spectrum-font-family-serif); - --spectrum-body-cjk-font-family: var(--spectrum-font-family-cjk); - --spectrum-body-sans-serif-font-weight: var(--spectrum-font-weight-regular); - --spectrum-body-sans-serif-font-style: var(--spectrum-font-style-default); - --spectrum-body-serif-font-weight: var(--spectrum-font-weight-regular); - --spectrum-body-serif-font-style: var(--spectrum-font-style-default); - --spectrum-body-cjk-font-weight: var(--spectrum-font-weight-regular); - --spectrum-body-cjk-font-style: var(--spectrum-font-style-default); + --spectrum-sans-serif-font-family + ); + --spectrum-body-serif-font-family: var(--spectrum-serif-font-family); + --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family); + --spectrum-body-sans-serif-font-weight: var(--spectrum-regular-font-weight); + --spectrum-body-sans-serif-font-style: var(--spectrum-default-font-style); + --spectrum-body-serif-font-weight: var(--spectrum-regular-font-weight); + --spectrum-body-serif-font-style: var(--spectrum-default-font-style); + --spectrum-body-cjk-font-weight: var(--spectrum-regular-font-weight); + --spectrum-body-cjk-font-style: var(--spectrum-default-font-style); --spectrum-body-sans-serif-strong-font-weight: var( - --spectrum-font-weight-bold + --spectrum-bold-font-weight ); --spectrum-body-sans-serif-strong-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); - --spectrum-body-serif-strong-font-weight: var(--spectrum-font-weight-bold); - --spectrum-body-serif-strong-font-style: var(--spectrum-font-style-default); - --spectrum-body-cjk-strong-font-weight: var(--spectrum-font-weight-black); - --spectrum-body-cjk-strong-font-style: var(--spectrum-font-style-default); + --spectrum-body-serif-strong-font-weight: var(--spectrum-bold-font-weight); + --spectrum-body-serif-strong-font-style: var(--spectrum-default-font-style); + --spectrum-body-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-body-cjk-strong-font-style: var(--spectrum-default-font-style); --spectrum-body-sans-serif-emphasized-font-weight: var( - --spectrum-font-weight-regular + --spectrum-regular-font-weight ); --spectrum-body-sans-serif-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-body-serif-emphasized-font-weight: var( - --spectrum-font-weight-regular + --spectrum-regular-font-weight ); --spectrum-body-serif-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-body-cjk-emphasized-font-weight: var( - --spectrum-font-weight-extra-bold + --spectrum-extra-bold-font-weight ); --spectrum-body-cjk-emphasized-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-body-sans-serif-strong-emphasized-font-weight: var( - --spectrum-font-weight-bold + --spectrum-bold-font-weight ); --spectrum-body-sans-serif-strong-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-body-serif-strong-emphasized-font-weight: var( - --spectrum-font-weight-bold + --spectrum-bold-font-weight ); --spectrum-body-serif-strong-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-body-cjk-strong-emphasized-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-body-cjk-strong-emphasized-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-body-size-xxxl: var(--spectrum-font-size-600); --spectrum-body-size-xxl: var(--spectrum-font-size-500); @@ -527,175 +551,175 @@ governing permissions and limitations under the License. --spectrum-body-size-s: var(--spectrum-font-size-100); --spectrum-body-size-xs: var(--spectrum-font-size-75); --spectrum-body-line-height: var(--spectrum-line-height-200); - --spectrum-body-line-height-cjk: var(--spectrum-line-height-cjk-200); + --spectrum-body-cjk-line-height: var(--spectrum-cjk-line-height-200); --spectrum-body-margin-multiplier: 0.75; --spectrum-detail-sans-serif-font-family: var( - --spectrum-font-family-sans-serif - ); - --spectrum-detail-sans-serif-font-weight: var(--spectrum-font-weight-bold); - --spectrum-detail-sans-serif-font-style: var(--spectrum-font-style-default); - --spectrum-detail-serif-font-family: var(--spectrum-font-family-serif); - --spectrum-detail-serif-font-weight: var(--spectrum-font-weight-bold); - --spectrum-detail-serif-font-style: var(--spectrum-font-style-default); - --spectrum-detail-cjk-font-family: var(--spectrum-font-family-cjk); - --spectrum-detail-cjk-font-weight: var(--spectrum-font-weight-extra-bold); - --spectrum-detail-cjk-font-style: var(--spectrum-font-style-default); + --spectrum-sans-serif-font-family + ); + --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family); + --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family); + --spectrum-detail-sans-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-font-style: var(--spectrum-default-font-style); + --spectrum-detail-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-detail-serif-font-style: var(--spectrum-default-font-style); + --spectrum-detail-cjk-font-weight: var(--spectrum-extra-bold-font-weight); + --spectrum-detail-cjk-font-style: var(--spectrum-default-font-style); --spectrum-detail-sans-serif-light-font-weight: var( - --spectrum-font-weight-regular + --spectrum-regular-font-weight ); --spectrum-detail-sans-serif-light-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-detail-serif-light-font-weight: var( - --spectrum-font-weight-regular + --spectrum-regular-font-weight ); --spectrum-detail-serif-light-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); - --spectrum-detail-cjk-light-font-weight: var(--spectrum-font-weight-light); - --spectrum-detail-cjk-light-font-style: var(--spectrum-font-style-default); + --spectrum-detail-cjk-light-font-weight: var(--spectrum-light-font-weight); + --spectrum-detail-cjk-light-font-style: var(--spectrum-default-font-style); --spectrum-detail-sans-serif-strong-font-weight: var( - --spectrum-font-weight-bold + --spectrum-bold-font-weight ); --spectrum-detail-sans-serif-strong-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-detail-serif-strong-font-weight: var( - --spectrum-font-weight-bold + --spectrum-bold-font-weight ); --spectrum-detail-serif-strong-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); - --spectrum-detail-cjk-strong-font-weight: var(--spectrum-font-weight-black); - --spectrum-detail-cjk-strong-font-style: var(--spectrum-font-style-default); + --spectrum-detail-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-detail-cjk-strong-font-style: var(--spectrum-default-font-style); --spectrum-detail-sans-serif-light-strong-font-weight: var( - --spectrum-font-weight-regular + --spectrum-regular-font-weight ); --spectrum-detail-sans-serif-light-strong-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-detail-serif-light-strong-font-weight: var( - --spectrum-font-weight-regular + --spectrum-regular-font-weight ); --spectrum-detail-serif-light-strong-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-detail-cjk-light-strong-font-weight: var( - --spectrum-font-weight-extra-bold + --spectrum-extra-bold-font-weight ); --spectrum-detail-cjk-light-strong-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-detail-sans-serif-emphasized-font-weight: var( - --spectrum-font-weight-bold + --spectrum-bold-font-weight ); --spectrum-detail-sans-serif-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-detail-serif-emphasized-font-weight: var( - --spectrum-font-weight-bold + --spectrum-bold-font-weight ); --spectrum-detail-serif-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-detail-cjk-emphasized-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-detail-cjk-emphasized-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-detail-sans-serif-light-emphasized-font-weight: var( - --spectrum-font-weight-regular + --spectrum-regular-font-weight ); --spectrum-detail-sans-serif-light-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-detail-serif-light-emphasized-font-weight: var( - --spectrum-font-weight-regular + --spectrum-regular-font-weight ); --spectrum-detail-serif-light-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-detail-cjk-light-emphasized-font-weight: var( - --spectrum-font-weight-regular + --spectrum-regular-font-weight ); --spectrum-detail-cjk-light-emphasized-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-detail-sans-serif-strong-emphasized-font-weight: var( - --spectrum-font-weight-bold + --spectrum-bold-font-weight ); --spectrum-detail-sans-serif-strong-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-detail-serif-strong-emphasized-font-weight: var( - --spectrum-font-weight-bold + --spectrum-bold-font-weight ); --spectrum-detail-serif-strong-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-detail-cjk-strong-emphasized-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-detail-cjk-strong-emphasized-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-detail-sans-serif-light-strong-emphasized-font-weight: var( - --spectrum-font-weight-regular + --spectrum-regular-font-weight ); --spectrum-detail-sans-serif-light-strong-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-detail-serif-light-strong-emphasized-font-weight: var( - --spectrum-font-weight-regular + --spectrum-regular-font-weight ); --spectrum-detail-serif-light-strong-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-detail-cjk-light-strong-emphasized-font-weight: var( - --spectrum-font-weight-extra-bold + --spectrum-extra-bold-font-weight ); --spectrum-detail-cjk-light-strong-emphasized-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-detail-size-xl: var(--spectrum-font-size-200); --spectrum-detail-size-l: var(--spectrum-font-size-100); --spectrum-detail-size-m: var(--spectrum-font-size-75); --spectrum-detail-size-s: var(--spectrum-font-size-50); --spectrum-detail-line-height: var(--spectrum-line-height-100); - --spectrum-detail-line-height-cjk: var(--spectrum-line-height-cjk-100); - --spectrum-detail-margin-top-mulitplier: 0.88888889; + --spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-detail-margin-top-multiplier: 0.88888889; --spectrum-detail-margin-bottom-multiplier: 0.25; --spectrum-detail-letter-spacing: 0.06em; - --spectrum-code-font-family: var(--spectrum-font-family-code); - --spectrum-code-font-weight: var(--spectrum-font-weight-regular); - --spectrum-code-font-style: var(--spectrum-font-style-default); - --spectrum-code-cjk-font-family: var(--spectrum-font-family-code); - --spectrum-code-cjk-font-weight: var(--spectrum-font-weight-regular); - --spectrum-code-cjk-font-style: var(--spectrum-font-style-default); - --spectrum-code-strong-font-weight: var(--spectrum-font-weight-bold); - --spectrum-code-strong-font-style: var(--spectrum-font-style-default); - --spectrum-code-cjk-strong-font-weight: var(--spectrum-font-weight-black); - --spectrum-code-cjk-strong-font-style: var(--spectrum-font-style-default); - --spectrum-code-emphasized-font-weight: var(--spectrum-font-weight-regular); - --spectrum-code-emphasized-font-style: var(--spectrum-font-style-italic); + --spectrum-code-font-family: Source Code Pro; + --spectrum-code-cjk-font-family: var(--spectrum-code-font-family); + --spectrum-code-font-weight: var(--spectrum-regular-font-weight); + --spectrum-code-font-style: var(--spectrum-default-font-style); + --spectrum-code-cjk-font-weight: var(--spectrum-regular-font-weight); + --spectrum-code-cjk-font-style: var(--spectrum-default-font-style); + --spectrum-code-strong-font-weight: var(--spectrum-bold-font-weight); + --spectrum-code-strong-font-style: var(--spectrum-default-font-style); + --spectrum-code-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-code-cjk-strong-font-style: var(--spectrum-default-font-style); + --spectrum-code-emphasized-font-weight: var(--spectrum-regular-font-weight); + --spectrum-code-emphasized-font-style: var(--spectrum-italic-font-style); --spectrum-code-cjk-emphasized-font-weight: var( - --spectrum-font-weight-bold + --spectrum-bold-font-weight ); --spectrum-code-cjk-emphasized-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-code-strong-emphasized-font-weight: var( - --spectrum-font-weight-bold + --spectrum-bold-font-weight ); --spectrum-code-strong-emphasized-font-style: var( - --spectrum-font-style-italic + --spectrum-italic-font-style ); --spectrum-code-cjk-strong-emphasized-font-weight: var( - --spectrum-font-weight-black + --spectrum-black-font-weight ); --spectrum-code-cjk-strong-emphasized-font-style: var( - --spectrum-font-style-default + --spectrum-default-font-style ); --spectrum-code-size-xl: var(--spectrum-font-size-400); --spectrum-code-size-l: var(--spectrum-font-size-300); @@ -703,5 +727,5 @@ governing permissions and limitations under the License. --spectrum-code-size-s: var(--spectrum-font-size-100); --spectrum-code-size-xs: var(--spectrum-font-size-75); --spectrum-code-line-height: var(--spectrum-line-height-200); - --spectrum-code-line-height-cjk: var(--spectrum-line-height-cjk-200); + --spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200); } diff --git a/tools/styles/tokens/large-vars.css b/tools/styles/tokens/large-vars.css index a5e9162cf7..45c5a63e66 100644 --- a/tools/styles/tokens/large-vars.css +++ b/tools/styles/tokens/large-vars.css @@ -22,8 +22,8 @@ governing permissions and limitations under the License. --spectrum-field-label-top-to-asterisk-extra-large: 24px; --spectrum-field-label-top-margin-small: 0px; --spectrum-field-label-top-margin-medium: 5px; - --spectrum-field-label-top-margin-large: 5px; - --spectrum-field-label-top-margin-extra-large: 5px; + --spectrum-field-label-top-margin-large: 6px; + --spectrum-field-label-top-margin-extra-large: 6px; --spectrum-field-label-to-component-quiet-small: -10px; --spectrum-field-label-to-component-quiet-medium: -10px; --spectrum-field-label-to-component-quiet-large: -15px; @@ -147,6 +147,11 @@ governing permissions and limitations under the License. --spectrum-color-area-minimum-height: 80px; --spectrum-color-wheel-minimum-width: 240px; --spectrum-color-slider-length: 240px; + --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-s); + --spectrum-illustrated-message-cjk-title-size: var( + --spectrum-heading-cjk-size-s + ); + --spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs); --spectrum-workflow-icon-size-50: 18px; --spectrum-workflow-icon-size-75: 20px; --spectrum-workflow-icon-size-100: 22px; @@ -244,6 +249,7 @@ governing permissions and limitations under the License. --spectrum-field-text-to-validation-icon-medium: 15px; --spectrum-field-text-to-validation-icon-large: 19px; --spectrum-field-text-to-validation-icon-extra-large: 22px; + --spectrum-field-width: 240px; --spectrum-character-count-to-field-quiet-small: -4px; --spectrum-character-count-to-field-quiet-medium: -4px; --spectrum-character-count-to-field-quiet-large: -4px; @@ -251,8 +257,8 @@ governing permissions and limitations under the License. --spectrum-side-label-character-count-to-field: 15px; --spectrum-side-label-character-count-top-margin-small: 5px; --spectrum-side-label-character-count-top-margin-medium: 10px; - --spectrum-side-label-character-count-top-margin-large: 13px; - --spectrum-side-label-character-count-top-margin-extra-large: 17px; + --spectrum-side-label-character-count-top-margin-large: 14px; + --spectrum-side-label-character-count-top-margin-extra-large: 18px; --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 9px; --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px; --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px; diff --git a/tools/styles/tokens/medium-vars.css b/tools/styles/tokens/medium-vars.css index b8c22bae7e..cdc9795838 100644 --- a/tools/styles/tokens/medium-vars.css +++ b/tools/styles/tokens/medium-vars.css @@ -22,8 +22,8 @@ governing permissions and limitations under the License. --spectrum-field-label-top-to-asterisk-extra-large: 19px; --spectrum-field-label-top-margin-small: 0px; --spectrum-field-label-top-margin-medium: 4px; - --spectrum-field-label-top-margin-large: 4px; - --spectrum-field-label-top-margin-extra-large: 4px; + --spectrum-field-label-top-margin-large: 5px; + --spectrum-field-label-top-margin-extra-large: 5px; --spectrum-field-label-to-component-quiet-small: -8px; --spectrum-field-label-to-component-quiet-medium: -8px; --spectrum-field-label-to-component-quiet-large: -12px; @@ -147,6 +147,11 @@ governing permissions and limitations under the License. --spectrum-color-area-minimum-height: 64px; --spectrum-color-wheel-minimum-width: 192px; --spectrum-color-slider-length: 192px; + --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-m); + --spectrum-illustrated-message-cjk-title-size: var( + --spectrum-heading-cjk-size-m + ); + --spectrum-illustrated-message-body-size: var(--spectrum-body-size-s); --spectrum-workflow-icon-size-50: 14px; --spectrum-workflow-icon-size-75: 16px; --spectrum-workflow-icon-size-100: 18px; @@ -244,6 +249,7 @@ governing permissions and limitations under the License. --spectrum-field-text-to-validation-icon-medium: 12px; --spectrum-field-text-to-validation-icon-large: 15px; --spectrum-field-text-to-validation-icon-extra-large: 18px; + --spectrum-field-width: 192px; --spectrum-character-count-to-field-quiet-small: -3px; --spectrum-character-count-to-field-quiet-medium: -3px; --spectrum-character-count-to-field-quiet-large: -3px; @@ -251,8 +257,8 @@ governing permissions and limitations under the License. --spectrum-side-label-character-count-to-field: 12px; --spectrum-side-label-character-count-top-margin-small: 4px; --spectrum-side-label-character-count-top-margin-medium: 8px; - --spectrum-side-label-character-count-top-margin-large: 10px; - --spectrum-side-label-character-count-top-margin-extra-large: 13px; + --spectrum-side-label-character-count-top-margin-large: 11px; + --spectrum-side-label-character-count-top-margin-extra-large: 14px; --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 7px; --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 11px; --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 14px; diff --git a/tools/styles/tokens/spectrum/custom-vars.css b/tools/styles/tokens/spectrum/custom-vars.css index 6553f78eda..4f82836153 100644 --- a/tools/styles/tokens/spectrum/custom-vars.css +++ b/tools/styles/tokens/spectrum/custom-vars.css @@ -37,26 +37,20 @@ governing permissions and limitations under the License. --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-font-family-base: adobe-clean, 'Source Sans Pro', -apple-system, - BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', - 'Lucida Grande', sans-serif; - --spectrum-font-family-serif: adobe-clean-serif, 'Source Serif Pro', Georgia, - serif; - --spectrum-font-family-code: 'Source Code Pro', Monaco, monospace; + --spectrum-sans-serif-font: var(--spectrum-sans-serif-font-family); + --spectrum-sans-font-family-stack: var(--spectrum-sans-serif-font), + adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, + 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-line-height-large: 1.7; - --spectrum-line-height-medium: 1.5; - --spectrum-line-height-small: 1.3; + --spectrum-serif-font: var(--spectrum-serif-font-family); + --spectrum-serif-font-family-stack: var(--spectrum-serif-font), + adobe-clean-serif, 'Source Serif Pro', Georgia, serif; - --spectrum-font-weight-thin: 100; - --spectrum-font-weight-ultra-light: 200; - --spectrum-font-weight-light: 300; - --spectrum-font-weight-regular: 400; - --spectrum-font-weight-medium: 500; - --spectrum-font-weight-semi-bold: 600; - --spectrum-font-weight-bold: 700; - --spectrum-font-weight-extra-bold: 800; - --spectrum-font-weight-black: 900; + --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace; + + --spectrum-cjk-font: var(--spectrum-cjk-font-family); + --spectrum-cjk-font-family-stack: var(--spectrum-cjk-font), + adobe-clean-han-japanese, sans-serif; /* static white / black background color for docs containers */ --spectrum-docs-static-white-background-color: rgb(15, 121, 125); diff --git a/tools/styles/tokens/spectrum/global-vars.css b/tools/styles/tokens/spectrum/global-vars.css index ba7e7fe44d..74de41b76f 100644 --- a/tools/styles/tokens/spectrum/global-vars.css +++ b/tools/styles/tokens/spectrum/global-vars.css @@ -39,14 +39,14 @@ governing permissions and limitations under the License. --spectrum-accent-color-1200: var(--spectrum-blue-1200); --spectrum-accent-color-1300: var(--spectrum-blue-1300); --spectrum-accent-color-1400: var(--spectrum-blue-1400); - --spectrum-heading-sans-serif-font-weight: var(--spectrum-font-weight-bold); - --spectrum-heading-serif-font-weight: var(--spectrum-font-weight-bold); - --spectrum-heading-cjk-font-weight: var(--spectrum-font-weight-extra-bold); + --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-font-weight-bold + --spectrum-bold-font-weight ); --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-font-weight-bold + --spectrum-bold-font-weight ); } :host, @@ -320,6 +320,750 @@ governing permissions and limitations under the License. ); } :host, +:root { + --system-spectrum-button-background-color-default: var(--spectrum-gray-75); + --system-spectrum-button-background-color-hover: var(--spectrum-gray-200); + --system-spectrum-button-background-color-down: var(--spectrum-gray-300); + --system-spectrum-button-background-color-focus: var(--spectrum-gray-200); + --system-spectrum-button-border-color-default: var(--spectrum-gray-400); + --system-spectrum-button-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-button-border-color-down: var(--spectrum-gray-600); + --system-spectrum-button-border-color-focus: var(--spectrum-gray-500); + --system-spectrum-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-background-color-disabled: transparent; + --system-spectrum-button-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-accent-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-spectrum-button-accent-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-spectrum-button-accent-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-spectrum-button-accent-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-spectrum-button-accent-border-color-default: transparent; + --system-spectrum-button-accent-border-color-hover: transparent; + --system-spectrum-button-accent-border-color-down: transparent; + --system-spectrum-button-accent-border-color-focus: transparent; + --system-spectrum-button-accent-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-accent-content-color-hover: var(--spectrum-white); + --system-spectrum-button-accent-content-color-down: var(--spectrum-white); + --system-spectrum-button-accent-content-color-focus: var(--spectrum-white); + --system-spectrum-button-accent-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-accent-border-color-disabled: transparent; + --system-spectrum-button-accent-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-accent-outline-background-color-default: transparent; + --system-spectrum-button-accent-outline-background-color-hover: var( + --spectrum-accent-color-200 + ); + --system-spectrum-button-accent-outline-background-color-down: var( + --spectrum-accent-color-300 + ); + --system-spectrum-button-accent-outline-background-color-focus: var( + --spectrum-accent-color-200 + ); + --system-spectrum-button-accent-outline-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-spectrum-button-accent-outline-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-spectrum-button-accent-outline-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-spectrum-button-accent-outline-border-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-spectrum-button-accent-outline-content-color-default: var( + --spectrum-accent-content-color-default + ); + --system-spectrum-button-accent-outline-content-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-spectrum-button-accent-outline-content-color-down: var( + --spectrum-accent-content-color-down + ); + --system-spectrum-button-accent-outline-content-color-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-spectrum-button-accent-outline-background-color-disabled: transparent; + --system-spectrum-button-accent-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-accent-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-spectrum-button-negative-background-color-hover: var( + --spectrum-negative-background-color-hover + ); + --system-spectrum-button-negative-background-color-down: var( + --spectrum-negative-background-color-down + ); + --system-spectrum-button-negative-background-color-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-spectrum-button-negative-border-color-default: transparent; + --system-spectrum-button-negative-border-color-hover: transparent; + --system-spectrum-button-negative-border-color-down: transparent; + --system-spectrum-button-negative-border-color-focus: transparent; + --system-spectrum-button-negative-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-negative-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-negative-content-color-down: var(--spectrum-white); + --system-spectrum-button-negative-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-negative-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-negative-border-color-disabled: transparent; + --system-spectrum-button-negative-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-negative-outline-background-color-default: transparent; + --system-spectrum-button-negative-outline-background-color-hover: var( + --spectrum-negative-color-200 + ); + --system-spectrum-button-negative-outline-background-color-down: var( + --spectrum-negative-color-300 + ); + --system-spectrum-button-negative-outline-background-color-focus: var( + --spectrum-negative-color-200 + ); + --system-spectrum-button-negative-outline-border-color-default: var( + --spectrum-negative-color-900 + ); + --system-spectrum-button-negative-outline-border-color-hover: var( + --spectrum-negative-color-1000 + ); + --system-spectrum-button-negative-outline-border-color-down: var( + --spectrum-negative-color-1100 + ); + --system-spectrum-button-negative-outline-border-color-focus: var( + --spectrum-negative-color-1000 + ); + --system-spectrum-button-negative-outline-content-color-default: var( + --spectrum-negative-content-color-default + ); + --system-spectrum-button-negative-outline-content-color-hover: var( + --spectrum-negative-content-color-hover + ); + --system-spectrum-button-negative-outline-content-color-down: var( + --spectrum-negative-content-color-down + ); + --system-spectrum-button-negative-outline-content-color-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-spectrum-button-negative-outline-background-color-disabled: transparent; + --system-spectrum-button-negative-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-negative-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-primary-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-spectrum-button-primary-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-spectrum-button-primary-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-spectrum-button-primary-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-spectrum-button-primary-border-color-default: transparent; + --system-spectrum-button-primary-border-color-hover: transparent; + --system-spectrum-button-primary-border-color-down: transparent; + --system-spectrum-button-primary-border-color-focus: transparent; + --system-spectrum-button-primary-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-primary-content-color-hover: var(--spectrum-white); + --system-spectrum-button-primary-content-color-down: var(--spectrum-white); + --system-spectrum-button-primary-content-color-focus: var(--spectrum-white); + --system-spectrum-button-primary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-primary-border-color-disabled: transparent; + --system-spectrum-button-primary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-primary-outline-background-color-default: transparent; + --system-spectrum-button-primary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-primary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-primary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-primary-outline-border-color-default: var( + --spectrum-gray-800 + ); + --system-spectrum-button-primary-outline-border-color-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-border-color-down: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-border-color-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-primary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-primary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-primary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-primary-outline-background-color-disabled: transparent; + --system-spectrum-button-primary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-primary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-secondary-background-color-default: var( + --spectrum-gray-200 + ); + --system-spectrum-button-secondary-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-border-color-default: transparent; + --system-spectrum-button-secondary-border-color-hover: transparent; + --system-spectrum-button-secondary-border-color-down: transparent; + --system-spectrum-button-secondary-border-color-focus: transparent; + --system-spectrum-button-secondary-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-secondary-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-secondary-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-secondary-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-secondary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-secondary-border-color-disabled: transparent; + --system-spectrum-button-secondary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-secondary-outline-background-color-default: transparent; + --system-spectrum-button-secondary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-border-color-default: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-border-color-hover: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-border-color-down: var( + --spectrum-gray-500 + ); + --system-spectrum-button-secondary-outline-border-color-focus: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-secondary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-secondary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-secondary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-secondary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-secondary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-quiet-background-color-default: transparent; + --system-spectrum-button-quiet-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-button-quiet-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-button-quiet-background-color-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-button-quiet-border-color-default: transparent; + --system-spectrum-button-quiet-border-color-hover: transparent; + --system-spectrum-button-quiet-border-color-down: transparent; + --system-spectrum-button-quiet-border-color-focus: transparent; + --system-spectrum-button-quiet-background-color-disabled: transparent; + --system-spectrum-button-quiet-border-color-disabled: transparent; + --system-spectrum-button-selected-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-spectrum-button-selected-background-color-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-spectrum-button-selected-background-color-down: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-spectrum-button-selected-background-color-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-spectrum-button-selected-border-color-default: transparent; + --system-spectrum-button-selected-border-color-hover: transparent; + --system-spectrum-button-selected-border-color-down: transparent; + --system-spectrum-button-selected-border-color-focus: transparent; + --system-spectrum-button-selected-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-selected-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-selected-content-color-down: var(--spectrum-white); + --system-spectrum-button-selected-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-selected-border-color-disabled: transparent; + --system-spectrum-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-spectrum-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-spectrum-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-spectrum-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-spectrum-button-staticblack-quiet-border-color-default: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-default: transparent; + --system-spectrum-button-staticblack-quiet-border-color-hover: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-hover: transparent; + --system-spectrum-button-staticblack-quiet-border-color-down: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-down: transparent; + --system-spectrum-button-staticblack-quiet-border-color-focus: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-focus: transparent; + --system-spectrum-button-staticblack-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-border-color-default: transparent; + --system-spectrum-button-staticwhite-border-color-hover: transparent; + --system-spectrum-button-staticwhite-border-color-down: transparent; + --system-spectrum-button-staticwhite-border-color-focus: transparent; + --system-spectrum-button-staticwhite-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-outline-border-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-outline-border-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-border-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-border-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-spectrum-button-staticwhite-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-selected-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-selected-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-selected-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-background-color-default: var( + --spectrum-transparent-white-200 + ); + --system-spectrum-button-staticwhite-secondary-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-border-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-hover: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-down: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-focus: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-secondary-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-default: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-down: var( + --spectrum-transparent-white-500 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticblack-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-spectrum-button-staticblack-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-border-color-default: transparent; + --system-spectrum-button-staticblack-border-color-hover: transparent; + --system-spectrum-button-staticblack-border-color-down: transparent; + --system-spectrum-button-staticblack-border-color-focus: transparent; + --system-spectrum-button-staticblack-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-button-staticblack-border-color-disabled: transparent; + --system-spectrum-button-staticblack-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-outline-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-outline-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-outline-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-spectrum-button-staticblack-outline-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-outline-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-spectrum-button-staticblack-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-secondary-background-color-default: var( + --spectrum-transparent-black-200 + ); + --system-spectrum-button-staticblack-secondary-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-border-color-default: transparent; + --system-spectrum-button-staticblack-secondary-border-color-hover: transparent; + --system-spectrum-button-staticblack-secondary-border-color-down: transparent; + --system-spectrum-button-staticblack-secondary-border-color-focus: transparent; + --system-spectrum-button-staticblack-secondary-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-secondary-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-button-staticblack-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-secondary-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-default: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-down: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); +} +:host, :root { --system-spectrum-closebutton-background-color-default: transparent; --system-spectrum-closebutton-background-color-hover: var( diff --git a/tools/styles/tokens/spectrum/medium-vars.css b/tools/styles/tokens/spectrum/medium-vars.css index 24c8509759..e4d26cbe55 100644 --- a/tools/styles/tokens/spectrum/medium-vars.css +++ b/tools/styles/tokens/spectrum/medium-vars.css @@ -56,6 +56,10 @@ governing permissions and limitations under the License. --spectrum-slider-bottom-to-handle-medium: 8px; --spectrum-slider-bottom-to-handle-large: 11px; --spectrum-slider-bottom-to-handle-extra-large: 14px; + --spectrum-color-loupe-height: 64px; + --spectrum-color-loupe-width: 48px; + --spectrum-color-loupe-bottom-to-color-handle: 12px; + --spectrum-color-loupe-inner-border-width: var(--spectrum-border-width-200); --spectrum-corner-radius-75: 2px; --spectrum-corner-radius-100: 4px; --spectrum-corner-radius-200: 8px; diff --git a/yarn.lock b/yarn.lock index b0eb05085a..b501680daa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4431,10 +4431,10 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/banner/-/banner-3.0.0-beta.2.tgz#df448a3dcb8ac63448bd628843a2895cec305780" integrity sha512-NqrT03ItWzj+L0dtqjedhop6wKOspBmaowzp9IOY/2kL561kRqYTLKR9vTteZ3cEDVD3ajKA8y+bKIW0eN+X7A== -"@spectrum-css/button@^6.0.21": - version "6.0.21" - resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-6.0.21.tgz#87a266147c60bb23aad61df200d82ee5aa90b44d" - integrity sha512-GhYFKkQ32jtu0dDMlPE3NSq8y0f6hDeodD04adq7q+YKypbvMdj32He+ZuQOfpcb/veGBdqsKYugRnO2mcYW0A== +"@spectrum-css/button@^9.0.0": + version "9.0.0" + resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-9.0.0.tgz#bdbae6e3c7e478ab8509695b09786f9637be130e" + integrity sha512-8sbe+lCMkMBcJdKu1knIUme1rSU8u+RHyOUiiu921Jl69Gt3ydTk5mjQRuytWtU2FgVIAAkSRVaJ8x+JRHwCRg== "@spectrum-css/buttongroup@^6.0.14": version "6.0.14" @@ -4676,10 +4676,10 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-8.0.15.tgz#9a4a163aec1864caa295f68a955c01df08229dc0" integrity sha512-/ituADhERGfBLd9sd200J2NIjnj42muaYvjCa7+afb1hVH8IvKQlszBsfdd08k3tDgw3Q+VCiLFH6yEo3nYzQw== -"@spectrum-css/tokens@^6.3.0": - version "6.3.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/tokens/-/tokens-6.3.0.tgz#79ac1d63d1082ba3fca4e7b7dc711a0d6102b69a" - integrity sha512-4dXI3B3YwWEQ2fN42fn4e9XADz81wVfIq0PSJp1mb//WUYd0flCHvhZSIu8vRU+UxYRCw7AZ3x/Pglokpk3KDw== +"@spectrum-css/tokens@^7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/@spectrum-css/tokens/-/tokens-7.0.0.tgz#895f27ecb2a1a7eeafa95a05fefabd6b9ccae93f" + integrity sha512-bO6JN4xVUIAQdMoRUN6PabCOWANFqQM4l/2qkTT1mmKNK6frmYCuppIfmI3T1EoahDnCVUHTTbqJXgGL7LjrzA== "@spectrum-css/tooltip@^4.0.10": version "4.0.10" @@ -4691,10 +4691,10 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/tray/-/tray-2.0.11.tgz#eca3b6c88273252221779862a3727f667fe841f2" integrity sha512-gQNR+OC7eajCO+Q4G4siZDwdttMfX7jVYApHZB4iuPqYfiMZeG5WLRSU+r+AX48/E388JeAiDeozj/PGwdOceA== -"@spectrum-css/typography@^4.0.25": - version "4.0.25" - resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-4.0.25.tgz#7af5916c8558bc0b4e9442529d5d94c5890aa465" - integrity sha512-lOWC6HiFb+LuECqL3MwAvc84Ufznr/wJruWQfSW3NTSSZ6KUkAH9kpkZDAujUBlv6An5Glnif3MYTw3gKiJGSw== +"@spectrum-css/typography@^4.0.26": + version "4.0.26" + resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-4.0.26.tgz#736e73a9bad2242b566211b476e3450cb186fbd5" + integrity sha512-Xiky4Dme+ZKyt0tN+R/9FZ3JEi4epTcGqIqP8NI7K4/i9n1//wFIF6xigpdjYFbSxw7vh5poul4AVbX/v3MhOQ== "@spectrum-css/underlay@^2.0.36": version "2.0.36"