diff --git a/.changeset/spicy-poets-build.md b/.changeset/spicy-poets-build.md new file mode 100644 index 00000000000..6021793bf92 --- /dev/null +++ b/.changeset/spicy-poets-build.md @@ -0,0 +1,87 @@ +--- +"@spectrum-css/floatingactionbutton": major +"@spectrum-css/opacitycheckerboard": major +"@spectrum-css/illustratedmessage": major +"@spectrum-css/coachindicator": major +"@spectrum-css/contextualhelp": major +"@spectrum-css/progresscircle": major +"@spectrum-css/dropindicator": major +"@spectrum-css/infieldbutton": major +"@spectrum-css/actionbutton": major +"@spectrum-css/pickerbutton": major +"@spectrum-css/actiongroup": major +"@spectrum-css/alertbanner": major +"@spectrum-css/alertdialog": major +"@spectrum-css/buttongroup": major +"@spectrum-css/clearbutton": major +"@spectrum-css/closebutton": major +"@spectrum-css/colorhandle": major +"@spectrum-css/colorslider": major +"@spectrum-css/inlinealert": major +"@spectrum-css/logicbutton": major +"@spectrum-css/progressbar": major +"@spectrum-css/statuslight": major +"@spectrum-css/swatchgroup": major +"@spectrum-css/actionmenu": major +"@spectrum-css/breadcrumb": major +"@spectrum-css/colorloupe": major +"@spectrum-css/colorwheel": major +"@spectrum-css/datepicker": major +"@spectrum-css/fieldgroup": major +"@spectrum-css/fieldlabel": major +"@spectrum-css/pagination": major +"@spectrum-css/typography": major +"@spectrum-css/accordion": major +"@spectrum-css/actionbar": major +"@spectrum-css/assetcard": major +"@spectrum-css/assetlist": major +"@spectrum-css/coachmark": major +"@spectrum-css/colorarea": major +"@spectrum-css/splitview": major +"@spectrum-css/textfield": major +"@spectrum-css/thumbnail": major +"@spectrum-css/calendar": major +"@spectrum-css/checkbox": major +"@spectrum-css/combobox": major +"@spectrum-css/dropzone": major +"@spectrum-css/helptext": major +"@spectrum-css/steplist": major +"@spectrum-css/taggroup": major +"@spectrum-css/treeview": major +"@spectrum-css/underlay": major +"@spectrum-css/commons": major +"@spectrum-css/divider": major +"@spectrum-css/popover": major +"@spectrum-css/sidenav": major +"@spectrum-css/stepper": major +"@spectrum-css/tooltip": major +"@spectrum-css/avatar": major +"@spectrum-css/button": major +"@spectrum-css/dialog": major +"@spectrum-css/miller": major +"@spectrum-css/picker": major +"@spectrum-css/rating": major +"@spectrum-css/search": major +"@spectrum-css/slider": major +"@spectrum-css/swatch": major +"@spectrum-css/switch": major +"@spectrum-css/asset": major +"@spectrum-css/badge": major +"@spectrum-css/modal": major +"@spectrum-css/radio": major +"@spectrum-css/table": major +"@spectrum-css/toast": major +"@spectrum-css/card": major +"@spectrum-css/dial": major +"@spectrum-css/icon": major +"@spectrum-css/link": major +"@spectrum-css/menu": major +"@spectrum-css/tabs": major +"@spectrum-css/tray": major +"@spectrum-css/well": major +"@spectrum-css/tag": major +"@spectrum-css/ui-icons": major +"@spectrum-css/tokens": major +--- + +Pull in the corner radii updates for S2 diff --git a/.storybook/assets/base.css b/.storybook/assets/base.css index 2b43e3ccecf..ce563c25c9e 100644 --- a/.storybook/assets/base.css +++ b/.storybook/assets/base.css @@ -27,6 +27,12 @@ body { background-color: var(--spectrum-background-base-color, rgb(230, 230, 230)); } +nav.sidebar-container, +div.sb-bar { + color: var(--spectrum-neutral-content-color-default); + background-color: var(--spectrum-background-base-color); +} + nav.sidebar-container, div.sb-bar { color: var(--spectrum-neutral-content-color-default); diff --git a/components/assetlist/stories/template.js b/components/assetlist/stories/template.js index b7e38df8da0..96d8f75a80c 100644 --- a/components/assetlist/stories/template.js +++ b/components/assetlist/stories/template.js @@ -24,7 +24,7 @@ export const AssetListItem = ({ isSelected = false, isBranch = false, onclick = () => {}, -}) => html` +} = {}, context = {}) => html`
  • html`asset image thumbnail` @@ -53,7 +53,7 @@ export const AssetListItem = ({ iconName, setName: iconSet, customClasses: [`${rootClass}Thumbnail`], - }) + }, context) )} ${when(label, () => html`${label}`)} ${when(!isSelectable && !isBranch, () => @@ -63,13 +63,13 @@ export const AssetListItem = ({ ariaLabelledby, id: checkboxId, customClasses: [`${rootClass}Selector`], - }))} + }, context))} ${when(isBranch, () => Icon({ iconName: "ChevronRight100", setName: "ui", customClasses: [`${rootClass}ChildIndicator`], - }) + }, context) )}
    • `; diff --git a/components/badge/stories/template.js b/components/badge/stories/template.js index 7f3e0dd8f01..0d0833020fc 100644 --- a/components/badge/stories/template.js +++ b/components/badge/stories/template.js @@ -22,7 +22,7 @@ export const Template = ({ customStyles = {}, customClasses = [], id = getRandomId("badge"), -} = {}) => { +} = {}, context = {}) => { return html`
    html`
    ${label}
    `)}
    diff --git a/components/pickerbutton/metadata/metadata.json b/components/pickerbutton/metadata/metadata.json index c566b84d0e1..c56412da6d0 100644 --- a/components/pickerbutton/metadata/metadata.json +++ b/components/pickerbutton/metadata/metadata.json @@ -140,7 +140,7 @@ "--spectrum-component-height-300", "--spectrum-component-height-75", "--spectrum-corner-radius-100", - "--spectrum-corner-radius-200", + "--spectrum-corner-radius-500", "--spectrum-default-font-style", "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", diff --git a/components/pickerbutton/themes/spectrum-two.css b/components/pickerbutton/themes/spectrum-two.css index 10aa9c27769..1df519607dd 100644 --- a/components/pickerbutton/themes/spectrum-two.css +++ b/components/pickerbutton/themes/spectrum-two.css @@ -32,7 +32,7 @@ --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-50); --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100); - --spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200); + --spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-500); --spectrum-picker-button-icon-color: var(--spectrum-neutral-content-color-default); --spectrum-picker-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); diff --git a/components/pickerbutton/themes/spectrum.css b/components/pickerbutton/themes/spectrum.css index 043a4a779ca..9825d91d86f 100644 --- a/components/pickerbutton/themes/spectrum.css +++ b/components/pickerbutton/themes/spectrum.css @@ -21,5 +21,6 @@ --spectrum-picker-button-background-color-hover: var(--spectrum-gray-200); --spectrum-picker-button-background-color-down: var(--spectrum-gray-300); --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-200); + --spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200); } } diff --git a/components/slider/metadata/metadata.json b/components/slider/metadata/metadata.json index eefadcc8034..4475d130f1d 100644 --- a/components/slider/metadata/metadata.json +++ b/components/slider/metadata/metadata.json @@ -232,7 +232,7 @@ "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-75", - "--spectrum-corner-radius-200", + "--spectrum-corner-radius-500", "--spectrum-corner-radius-75", "--spectrum-disabled-background-color", "--spectrum-disabled-border-color", diff --git a/components/slider/themes/spectrum-two.css b/components/slider/themes/spectrum-two.css index 39c67b48048..1bbf3c05e6e 100644 --- a/components/slider/themes/spectrum-two.css +++ b/components/slider/themes/spectrum-two.css @@ -73,7 +73,7 @@ --spectrum-slider-font-size: var(--spectrum-font-size-75); --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small); --spectrum-slider-control-height: var(--spectrum-component-height-75); - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); + --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small); --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small); @@ -85,7 +85,7 @@ --spectrum-slider-font-size: var(--spectrum-font-size-75); --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium); --spectrum-slider-control-height: var(--spectrum-component-height-100); - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); + --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium); --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); @@ -96,7 +96,7 @@ --spectrum-slider-font-size: var(--spectrum-font-size-100); --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large); --spectrum-slider-control-height: var(--spectrum-component-height-200); - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); + --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large); --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100); --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large); @@ -110,7 +110,7 @@ --spectrum-slider-font-size: var(--spectrum-font-size-200); --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large); --spectrum-slider-control-height: var(--spectrum-component-height-300); - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); + --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large); --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200); --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large); diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css index c710da0f393..ae3c9eefe2f 100644 --- a/components/slider/themes/spectrum.css +++ b/components/slider/themes/spectrum.css @@ -23,5 +23,22 @@ --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-100); --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100); --spectrum-slider-tick-mark-color: var(--spectrum-gray-300); + + &.spectrum-Slider--sizeS { + --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); + } + + &, + &.spectrum-Slider--sizeM { + --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); + } + + &.spectrum-Slider--sizeL { + --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); + } + + &.spectrum-Slider--sizeXL { + --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); + } } } diff --git a/stylelint.config.js b/stylelint.config.js index 8079fc73847..db644078b6a 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -180,7 +180,6 @@ module.exports = { }, }, { - /* Validate that the legacy themes don't introduce any new selectors or custom properties */ files: ["components/*/themes/spectrum.css", "components/*/themes/express.css", "tokens/**/*.css"], rules: { "spectrum-tools/no-unused-custom-properties": null, diff --git a/tokens/dist/css/components/bridge/accordion.css b/tokens/dist/css/components/bridge/accordion.css new file mode 100644 index 00000000000..b3ffbc5528f --- /dev/null +++ b/tokens/dist/css/components/bridge/accordion.css @@ -0,0 +1,54 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-accordion-item-width: var(--system-accordion-item-width); + --spectrum-accordion-disclosure-indicator-to-text-space: var(--system-accordion-disclosure-indicator-to-text-space); + --spectrum-accordion-edge-to-disclosure-indicator-space: var(--system-accordion-edge-to-disclosure-indicator-space); + --spectrum-accordion-edge-to-text-space: var(--system-accordion-edge-to-text-space); + --spectrum-accordion-focus-indicator-gap: var(--system-accordion-focus-indicator-gap); + --spectrum-accordion-focus-indicator-thickness: var(--system-accordion-focus-indicator-thickness); + --spectrum-accordion-corner-radius: var(--system-accordion-corner-radius); + --spectrum-accordion-item-content-area-top-to-content: var(--system-accordion-item-content-area-top-to-content); + --spectrum-accordion-item-content-area-bottom-to-content: var(--system-accordion-item-content-area-bottom-to-content); + --spectrum-accordion-item-header-font: var(--system-accordion-item-header-font); + --spectrum-accordion-item-header-font-weight: var(--system-accordion-item-header-font-weight); + --spectrum-accordion-item-header-font-style: var(--system-accordion-item-header-font-style); + --spectrum-accordion-item-header-line-height: var(--system-accordion-spacious-size-xl-item-header-line-height); + --spectrum-accordion-item-content-font: var(--system-accordion-item-content-font); + --spectrum-accordion-item-content-font-weight: var(--system-accordion-item-content-font-weight); + --spectrum-accordion-item-content-font-style: var(--system-accordion-item-content-font-style); + --spectrum-accordion-item-content-line-height: var(--system-accordion-item-content-line-height); + --spectrum-accordion-background-color-default: var(--system-accordion-background-color-default); + --spectrum-accordion-background-color-hover: var(--system-accordion-background-color-hover); + --spectrum-accordion-background-color-down: var(--system-accordion-background-color-down); + --spectrum-accordion-background-color-key-focus: var(--system-accordion-background-color-key-focus); + --spectrum-accordion-item-header-color-default: var(--system-accordion-item-header-color-default); + --spectrum-accordion-item-header-color-hover: var(--system-accordion-item-header-color-hover); + --spectrum-accordion-item-header-color-down: var(--system-accordion-item-header-color-down); + --spectrum-accordion-item-header-color-key-focus: var(--system-accordion-item-header-color-key-focus); + --spectrum-accordion-item-header-disabled-color: var(--system-accordion-item-header-disabled-color); + --spectrum-accordion-item-content-disabled-color: var(--system-accordion-item-content-disabled-color); + --spectrum-accordion-item-content-color: var(--system-accordion-item-content-color); + --spectrum-accordion-focus-indicator-color: var(--system-accordion-focus-indicator-color); + --spectrum-accordion-divider-color: var(--system-accordion-divider-color); + --spectrum-accordion-item-header-line-height-cjk: var(--system-accordion-item-header-line-height-cjk); + --spectrum-accordion-item-content-line-height-cjk: var(--system-accordion-item-content-line-height-cjk); + --spectrum-accordion-item-height: var(--system-accordion-compact-size-xl-item-height); + --spectrum-accordion-disclosure-indicator-height: var(--system-accordion-size-xl-disclosure-indicator-height); + --spectrum-accordion-component-edge-to-text: var(--system-accordion-size-xl-component-edge-to-text); + --spectrum-accordion-item-header-font-size: var(--system-accordion-size-xl-item-header-font-size); + --spectrum-accordion-item-content-font-size: var(--system-accordion-size-xl-item-content-font-size); + --spectrum-accordion-item-header-top-to-text-space: var(--system-accordion-spacious-size-xl-item-header-top-to-text-space); + --spectrum-accordion-item-header-bottom-to-text-space: var(--system-accordion-spacious-size-xl-item-header-bottom-to-text-space); +} diff --git a/tokens/dist/css/components/bridge/actionbar.css b/tokens/dist/css/components/bridge/actionbar.css new file mode 100644 index 00000000000..97639132c4e --- /dev/null +++ b/tokens/dist/css/components/bridge/actionbar.css @@ -0,0 +1,37 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-actionbar-height: var(--system-action-bar-height); + --spectrum-actionbar-corner-radius: var(--system-action-bar-corner-radius); + --spectrum-actionbar-item-counter-font-size: var(--system-action-bar-item-counter-font-size); + --spectrum-actionbar-item-counter-line-height: var(--system-action-bar-item-counter-line-height); + --spectrum-actionbar-item-counter-color: var(--system-action-bar-item-counter-color); + --spectrum-actionbar-item-counter-line-height-cjk: var(--system-action-bar-item-counter-line-height-cjk); + --spectrum-actionbar-popover-background-color: var(--system-action-bar-popover-background-color); + --spectrum-actionbar-popover-border-color: var(--system-action-bar-popover-border-color); + --spectrum-actionbar-emphasized-background-color: var(--system-action-bar-emphasized-background-color); + --spectrum-actionbar-emphasized-item-counter-color: var(--system-action-bar-emphasized-item-counter-color); + --spectrum-actionbar-spacing-outer-edge: var(--system-action-bar-spacing-outer-edge); + --spectrum-actionbar-spacing-close-button-top: var(--system-action-bar-spacing-close-button-top); + --spectrum-actionbar-spacing-close-button-start: var(--system-action-bar-spacing-close-button-start); + --spectrum-actionbar-spacing-close-button-end: var(--system-action-bar-spacing-close-button-end); + --spectrum-actionbar-spacing-item-counter-top: var(--system-action-bar-spacing-item-counter-top); + --spectrum-actionbar-spacing-item-counter-end: var(--system-action-bar-spacing-item-counter-end); + --spectrum-actionbar-spacing-action-group-top: var(--system-action-bar-spacing-action-group-top); + --spectrum-actionbar-spacing-action-group-end: var(--system-action-bar-spacing-action-group-end); + --spectrum-actionbar-shadow-horizontal: var(--system-action-bar-shadow-horizontal); + --spectrum-actionbar-shadow-vertical: var(--system-action-bar-shadow-vertical); + --spectrum-actionbar-shadow-blur: var(--system-action-bar-shadow-blur); + --spectrum-actionbar-shadow-color: var(--system-action-bar-shadow-color); +} diff --git a/tokens/dist/css/components/bridge/actionbutton.css b/tokens/dist/css/components/bridge/actionbutton.css new file mode 100644 index 00000000000..da630ef0a74 --- /dev/null +++ b/tokens/dist/css/components/bridge/actionbutton.css @@ -0,0 +1,45 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-actionbutton-animation-duration: var(--system-action-button-animation-duration); + --spectrum-actionbutton-border-radius: var(--system-action-button-border-radius); + --spectrum-actionbutton-border-width: var(--system-action-button-border-width); + --spectrum-actionbutton-content-color-default: var(--system-action-button-static-white-selected-emphasized-content-color-default); + --spectrum-actionbutton-content-color-hover: var(--system-action-button-static-white-content-color-hover); + --spectrum-actionbutton-content-color-down: var(--system-action-button-static-white-content-color-down); + --spectrum-actionbutton-content-color-focus: var(--system-action-button-static-white-content-color-focus); + --spectrum-actionbutton-focus-indicator-gap: var(--system-action-button-focus-indicator-gap); + --spectrum-actionbutton-focus-indicator-thickness: var(--system-action-button-focus-indicator-thickness); + --spectrum-actionbutton-focus-indicator-color: var(--system-action-button-static-white-focus-indicator-color); + --spectrum-actionbutton-background-color-default: var(--system-action-button-static-white-selected-emphasized-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--system-action-button-static-white-selected-emphasized-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--system-action-button-static-white-selected-emphasized-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--system-action-button-static-white-selected-emphasized-background-color-focus); + --spectrum-actionbutton-border-color-default: var(--system-action-button-static-white-border-color-default); + --spectrum-actionbutton-border-color-hover: var(--system-action-button-static-white-border-color-hover); + --spectrum-actionbutton-border-color-down: var(--system-action-button-static-white-border-color-down); + --spectrum-actionbutton-border-color-focus: var(--system-action-button-static-white-border-color-focus); + --spectrum-actionbutton-background-color-disabled: var(--system-action-button-static-white-selected-background-color-disabled); + --spectrum-actionbutton-border-color-disabled: var(--system-action-button-static-white-selected-border-color-disabled); + --spectrum-actionbutton-content-color-disabled: var(--system-action-button-static-white-content-color-disabled); + --spectrum-actionbutton-min-width: var(--system-action-button-size-xl-min-width); + --spectrum-actionbutton-height: var(--system-action-button-size-xl-height); + --spectrum-actionbutton-icon-size: var(--system-action-button-size-xl-icon-size); + --spectrum-actionbutton-font-size: var(--system-action-button-size-xl-font-size); + --spectrum-actionbutton-text-to-visual: var(--system-action-button-size-xl-text-to-visual); + --spectrum-actionbutton-edge-to-hold-icon: var(--system-action-button-size-xl-edge-to-hold-icon); + --spectrum-actionbutton-edge-to-visual-size: var(--system-action-button-size-xl-edge-to-visual-size); + --spectrum-actionbutton-edge-to-visual-only-size: var(--system-action-button-size-xl-edge-to-visual-only-size); + --spectrum-actionbutton-edge-to-text-size: var(--system-action-button-size-xl-edge-to-text-size); +} diff --git a/tokens/dist/css/components/bridge/actiongroup.css b/tokens/dist/css/components/bridge/actiongroup.css new file mode 100644 index 00000000000..41b26b903bc --- /dev/null +++ b/tokens/dist/css/components/bridge/actiongroup.css @@ -0,0 +1,23 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-actiongroup-gap-size-compact: var(--system-action-group-gap-size-compact); + --spectrum-actiongroup-horizontal-spacing-compact: var(--system-action-group-horizontal-spacing-compact); + --spectrum-actiongroup-vertical-spacing-compact: var(--system-action-group-vertical-spacing-compact); + --spectrum-actiongroup-button-spacing-reset: var(--system-action-group-button-spacing-reset); + --spectrum-actiongroup-border-radius-reset: var(--system-action-group-border-radius-reset); + --spectrum-actiongroup-border-radius: var(--system-action-group-border-radius); + --spectrum-actiongroup-horizontal-spacing-regular: var(--system-action-group-size-xl-horizontal-spacing-regular); + --spectrum-actiongroup-vertical-spacing-regular: var(--system-action-group-size-xl-vertical-spacing-regular); +} diff --git a/tokens/dist/css/components/bridge/alertbanner.css b/tokens/dist/css/components/bridge/alertbanner.css new file mode 100644 index 00000000000..081d36664c2 --- /dev/null +++ b/tokens/dist/css/components/bridge/alertbanner.css @@ -0,0 +1,31 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-alert-banner-neutral-background: var(--system-alert-banner-neutral-background); + --spectrum-alert-banner-min-height: var(--system-alert-banner-min-height); + --spectrum-alert-banner-max-inline-size: var(--system-alert-banner-max-inline-size); + --spectrum-alert-banner-size: var(--system-alert-banner-size); + --spectrum-alert-banner-font-size: var(--system-alert-banner-font-size); + --spectrum-alert-banner-icon-size: var(--system-alert-banner-icon-size); + --spectrum-alert-banner-icon-to-text: var(--system-alert-banner-icon-to-text); + --spectrum-alert-banner-start-edge: var(--system-alert-banner-start-edge); + --spectrum-alert-banner-text-to-button-horizontal: var(--system-alert-banner-text-to-button-horizontal); + --spectrum-alert-banner-text-to-divider: var(--system-alert-banner-text-to-divider); + --spectrum-alert-banner-top-icon: var(--system-alert-banner-top-icon); + --spectrum-alert-banner-top-text: var(--system-alert-banner-top-text); + --spectrum-alert-banner-bottom-text: var(--system-alert-banner-bottom-text); + --spectrum-alert-banner-informative-background: var(--system-alert-banner-informative-background); + --spectrum-alert-banner-negative-background: var(--system-alert-banner-negative-background); + --spectrum-alert-banner-font-color: var(--system-alert-banner-font-color); +} diff --git a/tokens/dist/css/components/bridge/alertdialog.css b/tokens/dist/css/components/bridge/alertdialog.css new file mode 100644 index 00000000000..ac1f14e9ab5 --- /dev/null +++ b/tokens/dist/css/components/bridge/alertdialog.css @@ -0,0 +1,35 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-alert-dialog-min-width: var(--system-alert-dialog-min-width); + --spectrum-alert-dialog-max-width: var(--system-alert-dialog-max-width); + --spectrum-alert-dialog-icon-size: var(--system-alert-dialog-icon-size); + --spectrum-alert-dialog-warning-icon-color: var(--system-alert-dialog-warning-icon-color); + --spectrum-alert-dialog-error-icon-color: var(--system-alert-dialog-error-icon-color); + --spectrum-alert-dialog-title-font-family: var(--system-alert-dialog-title-font-family); + --spectrum-alert-dialog-title-font-weight: var(--system-alert-dialog-title-font-weight); + --spectrum-alert-dialog-title-font-style: var(--system-alert-dialog-title-font-style); + --spectrum-alert-dialog-title-font-size: var(--system-alert-dialog-title-font-size); + --spectrum-alert-dialog-title-line-height: var(--system-alert-dialog-title-line-height); + --spectrum-alert-dialog-title-color: var(--system-alert-dialog-title-color); + --spectrum-alert-dialog-body-font-family: var(--system-alert-dialog-body-font-family); + --spectrum-alert-dialog-body-font-weight: var(--system-alert-dialog-body-font-weight); + --spectrum-alert-dialog-body-font-style: var(--system-alert-dialog-body-font-style); + --spectrum-alert-dialog-body-font-size: var(--system-alert-dialog-body-font-size); + --spectrum-alert-dialog-body-line-height: var(--system-alert-dialog-body-line-height); + --spectrum-alert-dialog-body-color: var(--system-alert-dialog-body-color); + --spectrum-alert-dialog-title-to-divider: var(--system-alert-dialog-title-to-divider); + --spectrum-alert-dialog-divider-to-description: var(--system-alert-dialog-divider-to-description); + --spectrum-alert-dialog-title-to-icon: var(--system-alert-dialog-title-to-icon); +} diff --git a/tokens/dist/css/components/bridge/asset.css b/tokens/dist/css/components/bridge/asset.css new file mode 100644 index 00000000000..a6cd398166d --- /dev/null +++ b/tokens/dist/css/components/bridge/asset.css @@ -0,0 +1,19 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-asset-transition-duration: var(--system-asset-transition-duration); + --spectrum-asset-folder-background-color: var(--system-asset-folder-background-color); + --spectrum-asset-file-background-color: var(--system-asset-file-background-color); + --spectrum-asset-icon-outline-color: var(--system-asset-icon-outline-color); +} diff --git a/tokens/dist/css/components/bridge/assetcard.css b/tokens/dist/css/components/bridge/assetcard.css new file mode 100644 index 00000000000..5c7939e2a67 --- /dev/null +++ b/tokens/dist/css/components/bridge/assetcard.css @@ -0,0 +1,58 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-assetcard-overlay-background-color-rgb: var(--system-asset-card-overlay-background-color-rgb); + --spectrum-assetcard-overlay-background-color-opacity: var(--system-asset-card-overlay-background-color-opacity); + --spectrum-assetcard-overlay-background-color: var(--system-asset-card-overlay-background-color); + --spectrum-assetcard-asset-size: var(--system-asset-card-asset-size); + --spectrum-assetcard-background-color: var(--system-asset-card-background-color); + --spectrum-assetcard-asset-animation-duration: var(--system-asset-card-asset-animation-duration); + --spectrum-assetcard-asset-container-border-size: var(--system-asset-card-asset-container-border-size); + --spectrum-assetcard-header-margin-block-start: var(--system-asset-card-header-margin-block-start); + --spectrum-assetcard-border-radius: var(--system-asset-card-border-radius); + --spectrum-assetcard-border-color: var(--system-asset-card-border-color); + --spectrum-assetcard-border-color-hover: var(--system-asset-card-border-color-hover); + --spectrum-assetcard-border-color-down: var(--system-asset-card-border-color-down); + --spectrum-assetcard-focus-ring-gap: var(--system-asset-card-focus-ring-gap); + --spectrum-assetcard-focus-indicator-thickness: var(--system-asset-card-focus-indicator-thickness); + --spectrum-assetcard-selectionindicator-background-color-default: var(--system-asset-card-selectionindicator-background-color-default); + --spectrum-assetcard-selectionindicator-box-shadow-color: var(--system-asset-card-selectionindicator-box-shadow-color); + --spectrum-assetcard-selectionindicator-size: var(--system-asset-card-selectionindicator-size); + --spectrum-assetcard-selectionindicator-border-radius: var(--system-asset-card-selectionindicator-border-radius); + --spectrum-assetcard-selectionindicator-offset-y: var(--system-asset-card-selectionindicator-offset-y); + --spectrum-assetcard-selectionindicator-blur: var(--system-asset-card-selectionindicator-blur); + --spectrum-assetcard-selectionindicator-color: var(--system-asset-card-selectionindicator-color); + --spectrum-assetcard-selectionindicator-font-weight: var(--system-asset-card-selectionindicator-font-weight); + --spectrum-assetcard-selectionindicator-font-size: var(--system-asset-card-selectionindicator-font-size); + --spectrum-assetcard-title-text-color: var(--system-asset-card-title-text-color); + --spectrum-assetcard-title-font-family: var(--system-asset-card-lang-ko-title-font-family); + --spectrum-assetcard-title-font-weight: var(--system-asset-card-lang-ko-title-font-weight); + --spectrum-assetcard-title-font-style: var(--system-asset-card-lang-ko-title-font-style); + --spectrum-assetcard-title-line-height: var(--system-asset-card-lang-ko-title-line-height); + --spectrum-assetcard-title-letter-spacing: var(--system-asset-card-lang-ko-title-letter-spacing); + --spectrum-assetcard-header-content-text-color: var(--system-asset-card-header-content-text-color); + --spectrum-assetcard-header-content-font-family: var(--system-asset-card-lang-ko-header-content-font-family); + --spectrum-assetcard-header-content-font-weight: var(--system-asset-card-lang-ko-header-content-font-weight); + --spectrum-assetcard-header-content-font-style: var(--system-asset-card-lang-ko-header-content-font-style); + --spectrum-assetcard-header-content-line-height: var(--system-asset-card-lang-ko-header-content-line-height); + --spectrum-assetcard-header-content-letter-spacing: var(--system-asset-card-lang-ko-header-content-letter-spacing); + --spectrum-assetcard-content-text-color: var(--system-asset-card-content-text-color); + --spectrum-assetcard-content-font-family: var(--system-asset-card-lang-ko-content-font-family); + --spectrum-assetcard-content-font-weight: var(--system-asset-card-lang-ko-content-font-weight); + --spectrum-assetcard-content-font-style: var(--system-asset-card-lang-ko-content-font-style); + --spectrum-assetcard-content-line-height: var(--system-asset-card-lang-ko-content-line-height); + --spectrum-assetcard-content-letter-spacing: var(--system-asset-card-lang-ko-content-letter-spacing); + --spectrum-assetcard-content-margin-block-start: var(--system-asset-card-content-margin-block-start); + --spectrum-assetcard-title-font-size: var(--system-asset-card-lang-ko-title-font-size); +} diff --git a/tokens/dist/css/components/bridge/assetlist.css b/tokens/dist/css/components/bridge/assetlist.css new file mode 100644 index 00000000000..074b29e3f93 --- /dev/null +++ b/tokens/dist/css/components/bridge/assetlist.css @@ -0,0 +1,32 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-assetlist-width: var(--system-asset-list-width); + --spectrum-assetlist-child-indicator-animation: var(--system-asset-list-child-indicator-animation); + --spectrum-assetlist-item-height: var(--system-asset-list-item-height); + --spectrum-assetlist-item-padding-inline-start: var(--system-asset-list-item-padding-inline-start); + --spectrum-assetlist-item-padding-inline-end: var(--system-asset-list-item-padding-inline-end); + --spectrum-assetlist-item-margin-block-end: var(--system-asset-list-item-margin-block-end); + --spectrum-assetlist-item-border-radius: var(--system-asset-list-item-border-radius); + --spectrum-assetlist-item-animation: var(--system-asset-list-item-animation); + --spectrum-assetlist-item-font-size: var(--system-asset-list-item-font-size); + --spectrum-assetlist-item-font-weight: var(--system-asset-list-item-font-weight); + --spectrum-assetlist-item-background-color-down: var(--system-asset-list-item-background-color-down); + --spectrum-assetlist-item-background-color-hover: var(--system-asset-list-item-background-color-hover); + --spectrum-assetlist-thumbnail-width: var(--system-asset-list-thumbnail-width); + --spectrum-assetlist-thumbnail-height: var(--system-asset-list-thumbnail-height); + --spectrum-assetlist-thumbnail-margin-inline-start: var(--system-asset-list-thumbnail-margin-inline-start); + --spectrum-assetlist-item-label-padding-inline-start: var(--system-asset-list-item-label-padding-inline-start); + --spectrum-assetlist-label-color: var(--system-asset-list-label-color); +} diff --git a/tokens/dist/css/components/bridge/avatar.css b/tokens/dist/css/components/bridge/avatar.css new file mode 100644 index 00000000000..11636dea6fd --- /dev/null +++ b/tokens/dist/css/components/bridge/avatar.css @@ -0,0 +1,22 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-avatar-color-opacity: var(--system-avatar-color-opacity); + --spectrum-avatar-inline-size: var(--system-avatar-size-700-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-700-block-size); + --spectrum-avatar-focus-indicator-thickness: var(--system-avatar-focus-indicator-thickness); + --spectrum-avatar-focus-indicator-gap: var(--system-avatar-focus-indicator-gap); + --spectrum-avatar-focus-indicator-color: var(--system-avatar-focus-indicator-color); + --spectrum-avatar-color-opacity-disabled: var(--system-avatar-color-opacity-disabled); +} diff --git a/tokens/dist/css/components/bridge/badge.css b/tokens/dist/css/components/bridge/badge.css new file mode 100644 index 00000000000..e9ab9632e2f --- /dev/null +++ b/tokens/dist/css/components/bridge/badge.css @@ -0,0 +1,49 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-badge-corner-radius: var(--system-badge-corner-radius); + --spectrum-badge-line-height: var(--system-badge-line-height); + --spectrum-badge-line-height-cjk: var(--system-badge-line-height-cjk); + --spectrum-badge-label-icon-color: var(--system-badge-magenta-label-icon-color); + --spectrum-badge-background-color-default: var(--system-badge-background-color-default); + --spectrum-badge-background-color-accent: var(--system-badge-background-color-accent); + --spectrum-badge-background-color-informative: var(--system-badge-background-color-informative); + --spectrum-badge-background-color-negative: var(--system-badge-background-color-negative); + --spectrum-badge-background-color-positive: var(--system-badge-background-color-positive); + --spectrum-badge-background-color-notice: var(--system-badge-background-color-notice); + --spectrum-badge-background-color-gray: var(--system-badge-background-color-gray); + --spectrum-badge-background-color-red: var(--system-badge-background-color-red); + --spectrum-badge-background-color-orange: var(--system-badge-background-color-orange); + --spectrum-badge-background-color-yellow: var(--system-badge-background-color-yellow); + --spectrum-badge-background-color-chartreuse: var(--system-badge-background-color-chartreuse); + --spectrum-badge-background-color-celery: var(--system-badge-background-color-celery); + --spectrum-badge-background-color-green: var(--system-badge-background-color-green); + --spectrum-badge-background-color-seafoam: var(--system-badge-background-color-seafoam); + --spectrum-badge-background-color-cyan: var(--system-badge-background-color-cyan); + --spectrum-badge-background-color-blue: var(--system-badge-background-color-blue); + --spectrum-badge-background-color-indigo: var(--system-badge-background-color-indigo); + --spectrum-badge-background-color-purple: var(--system-badge-background-color-purple); + --spectrum-badge-background-color-fuchsia: var(--system-badge-background-color-fuchsia); + --spectrum-badge-background-color-magenta: var(--system-badge-background-color-magenta); + --spectrum-badge-height: var(--system-badge-size-xl-height); + --spectrum-badge-font-size: var(--system-badge-size-xl-font-size); + --spectrum-badge-label-spacing-vertical-top: var(--system-badge-size-xl-label-spacing-vertical-top); + --spectrum-badge-label-spacing-vertical-bottom: var(--system-badge-size-xl-label-spacing-vertical-bottom); + --spectrum-badge-label-spacing-horizontal: var(--system-badge-size-xl-label-spacing-horizontal); + --spectrum-badge-workflow-icon-size: var(--system-badge-size-xl-workflow-icon-size); + --spectrum-badge-icon-text-spacing: var(--system-badge-size-xl-icon-text-spacing); + --spectrum-badge-icon-spacing-horizontal: var(--system-badge-size-xl-icon-spacing-horizontal); + --spectrum-badge-icon-spacing-vertical-top: var(--system-badge-size-xl-icon-spacing-vertical-top); + --spectrum-badge-icon-only-spacing-horizontal: var(--system-badge-size-xl-icon-only-spacing-horizontal); +} diff --git a/tokens/dist/css/components/bridge/breadcrumb.css b/tokens/dist/css/components/bridge/breadcrumb.css new file mode 100644 index 00000000000..5460bc9f98f --- /dev/null +++ b/tokens/dist/css/components/bridge/breadcrumb.css @@ -0,0 +1,69 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-breadcrumbs-block-size: var(--system-breadcrumbs-block-size); + --spectrum-breadcrumbs-block-size-compact: var(--system-breadcrumbs-block-size-compact); + --spectrum-breadcrumbs-block-size-multiline: var(--system-breadcrumbs-block-size-multiline); + --spectrum-breadcrumbs-line-height: var(--system-breadcrumbs-line-height); + --spectrum-breadcrumbs-font-size: var(--system-breadcrumbs-font-size); + --spectrum-breadcrumbs-font-family: var(--system-breadcrumbs-font-family); + --spectrum-breadcrumbs-font-weight: var(--system-breadcrumbs-font-weight); + --spectrum-breadcrumbs-font-size-current: var(--system-breadcrumbs-font-size-current); + --spectrum-breadcrumbs-font-family-current: var(--system-breadcrumbs-font-family-current); + --spectrum-breadcrumbs-font-weight-current: var(--system-breadcrumbs-font-weight-current); + --spectrum-breadcrumbs-font-size-compact: var(--system-breadcrumbs-font-size-compact); + --spectrum-breadcrumbs-font-family-compact: var(--system-breadcrumbs-font-family-compact); + --spectrum-breadcrumbs-font-weight-compact: var(--system-breadcrumbs-font-weight-compact); + --spectrum-breadcrumbs-font-size-compact-current: var(--system-breadcrumbs-font-size-compact-current); + --spectrum-breadcrumbs-font-family-compact-current: var(--system-breadcrumbs-font-family-compact-current); + --spectrum-breadcrumbs-font-weight-compact-current: var(--system-breadcrumbs-font-weight-compact-current); + --spectrum-breadcrumbs-font-size-multiline: var(--system-breadcrumbs-font-size-multiline); + --spectrum-breadcrumbs-font-family-multiline: var(--system-breadcrumbs-font-family-multiline); + --spectrum-breadcrumbs-font-weight-multiline: var(--system-breadcrumbs-font-weight-multiline); + --spectrum-breadcrumbs-font-size-multiline-current: var(--system-breadcrumbs-font-size-multiline-current); + --spectrum-breadcrumbs-font-family-multiline-current: var(--system-breadcrumbs-font-family-multiline-current); + --spectrum-breadcrumbs-font-weight-multiline-current: var(--system-breadcrumbs-font-weight-multiline-current); + --spectrum-breadcrumbs-text-decoration-thickness: var(--system-breadcrumbs-text-decoration-thickness); + --spectrum-breadcrumbs-text-decoration-gap: var(--system-breadcrumbs-text-decoration-gap); + --spectrum-breadcrumbs-separator-spacing-inline: var(--system-breadcrumbs-separator-spacing-inline); + --spectrum-breadcrumbs-text-spacing-block-start: var(--system-breadcrumbs-text-spacing-block-start); + --spectrum-breadcrumbs-text-spacing-block-end: var(--system-breadcrumbs-text-spacing-block-end); + --spectrum-breadcrumbs-icon-spacing-block: var(--system-breadcrumbs-icon-spacing-block); + --spectrum-breadcrumbs-text-spacing-block-start-compact: var(--system-breadcrumbs-text-spacing-block-start-compact); + --spectrum-breadcrumbs-text-spacing-block-end-compact: var(--system-breadcrumbs-text-spacing-block-end-compact); + --spectrum-breadcrumbs-icon-spacing-block-compact: var(--system-breadcrumbs-icon-spacing-block-compact); + --spectrum-breadcrumbs-text-spacing-block-start-multiline: var(--system-breadcrumbs-text-spacing-block-start-multiline); + --spectrum-breadcrumbs-text-spacing-block-end-multiline: var(--system-breadcrumbs-text-spacing-block-end-multiline); + --spectrum-breadcrumbs-text-spacing-block-between-multiline: var(--system-breadcrumbs-text-spacing-block-between-multiline); + --spectrum-breadcrumbs-icon-spacing-block-start-multiline: var(--system-breadcrumbs-icon-spacing-block-start-multiline); + --spectrum-breadcrumbs-icon-spacing-block-between-multiline: var(--system-breadcrumbs-icon-spacing-block-between-multiline); + --spectrum-breadcrumbs-inline-start: var(--system-breadcrumbs-inline-start); + --spectrum-breadcrumbs-inline-end: var(--system-breadcrumbs-inline-end); + --spectrum-breadcrumbs-action-button-spacing-inline: var(--system-breadcrumbs-action-button-spacing-inline); + --spectrum-breadcrumbs-action-button-spacing-block: var(--system-breadcrumbs-action-button-spacing-block); + --spectrum-breadcrumbs-action-button-spacing-block-compact: var(--system-breadcrumbs-action-button-spacing-block-compact); + --spectrum-breadcrumbs-action-button-spacing-inline-start: var(--system-breadcrumbs-action-button-spacing-inline-start); + --spectrum-breadcrumbs-action-button-spacing-block-multiline: var(--system-breadcrumbs-action-button-spacing-block-multiline); + --spectrum-breadcrumbs-action-button-spacing-block-between-multiline: var(--system-breadcrumbs-action-button-spacing-block-between-multiline); + --spectrum-breadcrumbs-focus-indicator-thickness: var(--system-breadcrumbs-focus-indicator-thickness); + --spectrum-breadcrumbs-focus-indicator-gap: var(--system-breadcrumbs-focus-indicator-gap); + --spectrum-breadcrumbs-item-link-border-radius: var(--system-breadcrumbs-item-link-border-radius); + --spectrum-breadcrumbs-text-color: var(--system-breadcrumbs-text-color); + --spectrum-breadcrumbs-text-color-current: var(--system-breadcrumbs-text-color-current); + --spectrum-breadcrumbs-text-color-disabled: var(--system-breadcrumbs-text-color-disabled); + --spectrum-breadcrumbs-separator-color: var(--system-breadcrumbs-separator-color); + --spectrum-breadcrumbs-action-button-color: var(--system-breadcrumbs-action-button-color); + --spectrum-breadcrumbs-action-button-color-disabled: var(--system-breadcrumbs-action-button-color-disabled); + --spectrum-breadcrumbs-focus-indicator-color: var(--system-breadcrumbs-focus-indicator-color); +} diff --git a/tokens/dist/css/components/bridge/button.css b/tokens/dist/css/components/bridge/button.css new file mode 100644 index 00000000000..933fa2c9474 --- /dev/null +++ b/tokens/dist/css/components/bridge/button.css @@ -0,0 +1,52 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-button-animation-duration: var(--system-button-animation-duration); + --spectrum-button-border-radius: var(--system-button-size-xl-border-radius); + --spectrum-button-border-width: var(--system-button-border-width); + --spectrum-button-line-height: var(--system-button-line-height); + --spectrum-button-focus-ring-gap: var(--system-button-focus-ring-gap); + --spectrum-button-focus-ring-thickness: var(--system-button-focus-ring-thickness); + --spectrum-button-focus-indicator-color: var(--system-button-static-black-secondary-outline-focus-indicator-color); + --spectrum-button-intended-icon-size: var(--system-button-size-xl-intended-icon-size); + --spectrum-button-background-color-default: var(--system-button-static-black-secondary-outline-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-static-black-secondary-outline-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-static-black-secondary-outline-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-static-black-secondary-outline-background-color-focus); + --spectrum-button-border-color-default: var(--system-button-static-black-secondary-outline-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-static-black-secondary-outline-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-static-black-secondary-outline-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-static-black-secondary-outline-border-color-focus); + --spectrum-button-content-color-default: var(--system-button-static-black-secondary-outline-content-color-default); + --spectrum-button-content-color-hover: var(--system-button-static-black-secondary-outline-content-color-hover); + --spectrum-button-content-color-down: var(--system-button-static-black-secondary-outline-content-color-down); + --spectrum-button-content-color-focus: var(--system-button-static-black-secondary-outline-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-button-static-black-secondary-outline-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-button-static-black-secondary-outline-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-button-static-black-secondary-outline-content-color-disabled); + --spectrum-button-static-white-content-color-default: var(--system-button-static-white-selected-static-white-content-color-default); + --spectrum-button-static-white-content-color-hover: var(--system-button-static-white-selected-static-white-content-color-hover); + --spectrum-button-static-white-content-color-down: var(--system-button-static-white-selected-static-white-content-color-down); + --spectrum-button-static-white-content-color-focus: var(--system-button-static-white-selected-static-white-content-color-focus); + --spectrum-button-min-width: var(--system-button-size-xl-min-width); + --spectrum-button-height: var(--system-button-size-xl-height); + --spectrum-button-font-size: var(--system-button-size-xl-font-size); + --spectrum-button-edge-to-visual: var(--system-button-size-xl-edge-to-visual); + --spectrum-button-edge-to-visual-only: var(--system-button-size-xl-edge-to-visual-only); + --spectrum-button-edge-to-text: var(--system-button-size-xl-edge-to-text); + --spectrum-button-padding-label-to-icon: var(--system-button-size-xl-padding-label-to-icon); + --spectrum-button-top-to-text: var(--system-button-size-xl-top-to-text); + --spectrum-button-bottom-to-text: var(--system-button-size-xl-bottom-to-text); + --spectrum-button-top-to-icon: var(--system-button-size-xl-top-to-icon); +} diff --git a/tokens/dist/css/components/bridge/buttongroup.css b/tokens/dist/css/components/bridge/buttongroup.css new file mode 100644 index 00000000000..346282c2cf8 --- /dev/null +++ b/tokens/dist/css/components/bridge/buttongroup.css @@ -0,0 +1,17 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-buttongroup-spacing-horizontal: var(--system-button-group-size-xl-spacing-horizontal); + --spectrum-buttongroup-spacing-vertical: var(--system-button-group-size-xl-spacing-vertical); +} diff --git a/tokens/dist/css/components/bridge/calendar.css b/tokens/dist/css/components/bridge/calendar.css new file mode 100644 index 00000000000..3d933086806 --- /dev/null +++ b/tokens/dist/css/components/bridge/calendar.css @@ -0,0 +1,45 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-calendar-day-width: var(--system-calendar-day-width); + --spectrum-calendar-day-height: var(--system-calendar-day-height); + --spectrum-calendar-border-radius-reset: var(--system-calendar-border-radius-reset); + --spectrum-calendar-border-width-reset: var(--system-calendar-border-width-reset); + --spectrum-calendar-day-border-size: var(--system-calendar-day-border-size); + --spectrum-calendar-margin-y: var(--system-calendar-margin-y); + --spectrum-calendar-margin-x: var(--system-calendar-margin-x); + --spectrum-calendar-day-padding: var(--system-calendar-day-padding); + --spectrum-calendar-width: var(--system-calendar-width); + --spectrum-calendar-title-text-letter-spacing: var(--system-calendar-title-text-letter-spacing); + --spectrum-calendar-title-height: var(--system-calendar-title-height); + --spectrum-calendar-title-text-size: var(--system-calendar-title-text-size); + --spectrum-calendar-day-title-text-font-weight: var(--system-calendar-day-title-text-font-weight); + --spectrum-calendar-day-title-text-color: var(--system-calendar-day-title-text-color); + --spectrum-calendar-day-title-text-size: var(--system-calendar-day-title-text-size); + --spectrum-calendar-day-text-size-han: var(--system-calendar-day-text-size-han); + --spectrum-calendar-day-text-size: var(--system-calendar-day-text-size); + --spectrum-calendar-day-text-color-selected: var(--system-calendar-day-text-color-selected); + --spectrum-calendar-day-text-color-hover: var(--system-calendar-day-text-color-hover); + --spectrum-calendar-day-text-color-cap-selected: var(--system-calendar-day-text-color-cap-selected); + --spectrum-calendar-day-text-font-weight-selected: var(--system-calendar-day-text-font-weight-selected); + --spectrum-calendar-day-text-font-weight-cap-selected: var(--system-calendar-day-text-font-weight-cap-selected); + --spectrum-calendar-day-today-text-color: var(--system-calendar-day-today-text-color); + --spectrum-calendar-day-today-text-font-weight: var(--system-calendar-day-today-text-font-weight); + --spectrum-calendar-day-today-border-color: var(--system-calendar-day-today-border-color); + --spectrum-calendar-day-today-text-color-disabled: var(--system-calendar-day-today-text-color-disabled); + --spectrum-calendar-day-today-border-color-disabled: var(--system-calendar-day-today-border-color-disabled); + --spectrum-calendar-day-text-color-disabled: var(--system-calendar-day-text-color-disabled); + --spectrum-calendar-day-text-color-key-focus: var(--system-calendar-day-text-color-key-focus); + --spectrum-calendar-button-icon-color: var(--system-calendar-button-icon-color); +} diff --git a/tokens/dist/css/components/bridge/card.css b/tokens/dist/css/components/bridge/card.css new file mode 100644 index 00000000000..7e5ce5dca97 --- /dev/null +++ b/tokens/dist/css/components/bridge/card.css @@ -0,0 +1,61 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-card-background-color: var(--system-card-background-color); + --spectrum-card-body-spacing: var(--system-card-body-spacing); + --spectrum-card-title-padding-top: var(--system-card-title-padding-top); + --spectrum-card-title-padding-right: var(--system-card-title-padding-right); + --spectrum-card-content-margin-top: var(--system-card-content-margin-top); + --spectrum-card-content-margin-bottom: var(--system-card-content-margin-bottom); + --spectrum-card-footer-padding-top: var(--system-card-footer-padding-top); + --spectrum-card-subtitle-padding-right: var(--system-card-subtitle-padding-right); + --spectrum-card-border-width: var(--system-card-border-width); + --spectrum-card-corner-radius: var(--system-card-corner-radius); + --spectrum-card-border-color: var(--system-card-border-color); + --spectrum-card-border-color-hover: var(--system-card-border-color-hover); + --spectrum-card-border-color-selected: var(--system-card-border-color-selected); + --spectrum-card-divider-color: var(--system-card-divider-color); + --spectrum-card-title-font-family: var(--system-card-title-font-family); + --spectrum-card-title-font-size: var(--system-card-title-font-size); + --spectrum-card-title-font-weight: var(--system-card-title-font-weight); + --spectrum-card-title-font-style: var(--system-card-title-font-style); + --spectrum-card-title-line-height: var(--system-card-title-line-height); + --spectrum-card-title-font-color: var(--system-card-title-font-color); + --spectrum-card-body-font-family: var(--system-card-body-font-family); + --spectrum-card-body-font-size: var(--system-card-body-font-size); + --spectrum-card-body-font-weight: var(--system-card-body-font-weight); + --spectrum-card-body-font-style: var(--system-card-body-font-style); + --spectrum-card-body-line-height: var(--system-card-body-line-height); + --spectrum-card-body-font-color: var(--system-card-body-font-color); + --spectrum-card-actions-spacing: var(--system-card-actions-spacing); + --spectrum-card-actions-size: var(--system-card-actions-size); + --spectrum-card-actions-border-radius: var(--system-card-actions-border-radius); + --spectrum-card-actions-background-color-rgb: var(--system-card-actions-background-color-rgb); + --spectrum-card-actions-background-color-opacity: var(--system-card-actions-background-color-opacity); + --spectrum-card-actions-drop-shadow-color: var(--system-card-actions-drop-shadow-color); + --spectrum-card-actions-drop-shadow-x: var(--system-card-actions-drop-shadow-x); + --spectrum-card-actions-drop-shadow-y: var(--system-card-actions-drop-shadow-y); + --spectrum-card-actions-drop-shadow-blur: var(--system-card-actions-drop-shadow-blur); + --spectrum-card-focus-indicator-color: var(--system-card-focus-indicator-color); + --spectrum-card-focus-indicator-width: var(--system-card-focus-indicator-width); + --spectrum-card-selected-background-opacity: var(--system-card-selected-background-opacity); + --spectrum-card-preview-border-width-selected: var(--system-card-preview-border-width-selected); + --spectrum-card-preview-background-color: var(--system-card-preview-background-color); + --spectrum-card-preview-background-color-hover: var(--system-card-preview-background-color-hover); + --spectrum-card-horizontal-body-padding: var(--system-card-horizontal-body-padding); + --spectrum-card-horizontal-preview-padding: var(--system-card-horizontal-preview-padding); + --spectrum-card-content-margin-top-quiet: var(--system-card-content-margin-top-quiet); + --spectrum-card-minimum-width-quiet: var(--system-card-minimum-width-quiet); + --spectrum-card-selected-background-color-rgb: var(--system-card-darkest-selected-background-color-rgb); +} diff --git a/tokens/dist/css/components/bridge/checkbox.css b/tokens/dist/css/components/bridge/checkbox.css new file mode 100644 index 00000000000..4197e5a621c --- /dev/null +++ b/tokens/dist/css/components/bridge/checkbox.css @@ -0,0 +1,51 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-checkbox-control-color-default: var(--system-checkbox-control-color-default); + --spectrum-checkbox-control-color-hover: var(--system-checkbox-control-color-hover); + --spectrum-checkbox-control-color-down: var(--system-checkbox-control-color-down); + --spectrum-checkbox-control-color-focus: var(--system-checkbox-control-color-focus); + --spectrum-checkbox-content-color-default: var(--system-checkbox-content-color-default); + --spectrum-checkbox-content-color-hover: var(--system-checkbox-content-color-hover); + --spectrum-checkbox-content-color-down: var(--system-checkbox-content-color-down); + --spectrum-checkbox-content-color-focus: var(--system-checkbox-content-color-focus); + --spectrum-checkbox-focus-indicator-color: var(--system-checkbox-focus-indicator-color); + --spectrum-checkbox-content-color-disabled: var(--system-checkbox-content-color-disabled); + --spectrum-checkbox-control-color-disabled: var(--system-checkbox-control-color-disabled); + --spectrum-checkbox-checkmark-color: var(--system-checkbox-checkmark-color); + --spectrum-checkbox-invalid-color-default: var(--system-checkbox-invalid-color-default); + --spectrum-checkbox-invalid-color-hover: var(--system-checkbox-invalid-color-hover); + --spectrum-checkbox-invalid-color-down: var(--system-checkbox-invalid-color-down); + --spectrum-checkbox-invalid-color-focus: var(--system-checkbox-invalid-color-focus); + --spectrum-checkbox-emphasized-color-default: var(--system-checkbox-emphasized-color-default); + --spectrum-checkbox-emphasized-color-hover: var(--system-checkbox-emphasized-color-hover); + --spectrum-checkbox-emphasized-color-down: var(--system-checkbox-emphasized-color-down); + --spectrum-checkbox-emphasized-color-focus: var(--system-checkbox-emphasized-color-focus); + --spectrum-checkbox-control-selected-color-default: var(--system-checkbox-control-selected-color-default); + --spectrum-checkbox-control-selected-color-hover: var(--system-checkbox-control-selected-color-hover); + --spectrum-checkbox-control-selected-color-down: var(--system-checkbox-control-selected-color-down); + --spectrum-checkbox-control-selected-color-focus: var(--system-checkbox-control-selected-color-focus); + --spectrum-checkbox-line-height: var(--system-checkbox-line-height); + --spectrum-checkbox-line-height-cjk: var(--system-checkbox-line-height-cjk); + --spectrum-checkbox-control-corner-radius: var(--system-checkbox-control-corner-radius); + --spectrum-checkbox-focus-indicator-gap: var(--system-checkbox-focus-indicator-gap); + --spectrum-checkbox-focus-indicator-thickness: var(--system-checkbox-focus-indicator-thickness); + --spectrum-checkbox-border-width: var(--system-checkbox-border-width); + --spectrum-checkbox-animation-duration: var(--system-checkbox-animation-duration); + --spectrum-checkbox-font-size: var(--system-checkbox-size-xl-font-size); + --spectrum-checkbox-height: var(--system-checkbox-size-xl-height); + --spectrum-checkbox-control-size: var(--system-checkbox-size-xl-control-size); + --spectrum-checkbox-top-to-text: var(--system-checkbox-size-xl-top-to-text); + --spectrum-checkbox-text-to-control: var(--system-checkbox-size-xl-text-to-control); +} diff --git a/tokens/dist/css/components/bridge/clearbutton.css b/tokens/dist/css/components/bridge/clearbutton.css new file mode 100644 index 00000000000..49aa4e44816 --- /dev/null +++ b/tokens/dist/css/components/bridge/clearbutton.css @@ -0,0 +1,26 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-clear-button-background-color: var(--system-clear-button-disabled-background-color); + --spectrum-clear-button-background-color-hover: var(--system-clear-button-over-background-background-color-hover); + --spectrum-clear-button-background-color-down: var(--system-clear-button-over-background-background-color-down); + --spectrum-clear-button-background-color-key-focus: var(--system-clear-button-over-background-background-color-key-focus); + --spectrum-clear-button-height: var(--system-clear-button-size-xl-height); + --spectrum-clear-button-width: var(--system-clear-button-size-xl-width); + --spectrum-clear-button-padding: var(--system-clear-button-padding); + --spectrum-clear-button-icon-color: var(--system-clear-button-disabled-icon-color); + --spectrum-clear-button-icon-color-hover: var(--system-clear-button-disabled-icon-color-hover); + --spectrum-clear-button-icon-color-down: var(--system-clear-button-disabled-icon-color-down); + --spectrum-clear-button-icon-color-key-focus: var(--system-clear-button-over-background-icon-color-key-focus); +} diff --git a/tokens/dist/css/components/bridge/closebutton.css b/tokens/dist/css/components/bridge/closebutton.css new file mode 100644 index 00000000000..d3500222a10 --- /dev/null +++ b/tokens/dist/css/components/bridge/closebutton.css @@ -0,0 +1,33 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-closebutton-background-color-default: var(--system-close-button-background-color-default); + --spectrum-closebutton-background-color-hover: var(--system-close-button-background-color-hover); + --spectrum-closebutton-background-color-down: var(--system-close-button-background-color-down); + --spectrum-closebutton-background-color-focus: var(--system-close-button-background-color-focus); + --spectrum-closebutton-icon-color-default: var(--system-close-button-static-black-icon-color-default); + --spectrum-closebutton-icon-color-hover: var(--system-close-button-icon-color-hover); + --spectrum-closebutton-icon-color-down: var(--system-close-button-icon-color-down); + --spectrum-closebutton-icon-color-focus: var(--system-close-button-icon-color-focus); + --spectrum-closebutton-icon-color-disabled: var(--system-close-button-static-black-icon-color-disabled); + --spectrum-closebutton-focus-indicator-thickness: var(--system-close-button-focus-indicator-thickness); + --spectrum-closebutton-focus-indicator-gap: var(--system-close-button-focus-indicator-gap); + --spectrum-closebutton-focus-indicator-color: var(--system-close-button-static-black-focus-indicator-color); + --spectrum-closebutton-animation-duration: var(--system-close-button-animation-duration); + --spectrum-closebutton-size: var(--system-close-button-size-xl-size); + --spectrum-closebutton-static-background-color-default: var(--system-close-button-static-black-static-background-color-default); + --spectrum-closebutton-static-background-color-hover: var(--system-close-button-static-black-static-background-color-hover); + --spectrum-closebutton-static-background-color-down: var(--system-close-button-static-black-static-background-color-down); + --spectrum-closebutton-static-background-color-focus: var(--system-close-button-static-black-static-background-color-focus); +} diff --git a/tokens/dist/css/components/bridge/coachindicator.css b/tokens/dist/css/components/bridge/coachindicator.css new file mode 100644 index 00000000000..0a2f2a4ba8b --- /dev/null +++ b/tokens/dist/css/components/bridge/coachindicator.css @@ -0,0 +1,41 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-coach-indicator-ring-border-size: var(--system-coach-indicator-ring-border-size); + --spectrum-coach-indicator-min-inline-size: var(--system-coach-indicator-min-inline-size); + --spectrum-coach-indicator-min-block-size: var(--system-coach-indicator-min-block-size); + --spectrum-coach-indicator-inline-size: var(--system-coach-indicator-inline-size); + --spectrum-coach-indicator-block-size: var(--system-coach-indicator-block-size); + --spectrum-coach-indicator-ring-inline-size: var(--system-coach-indicator-ring-inline-size); + --spectrum-coach-indicator-ring-block-size: var(--system-coach-indicator-ring-block-size); + --spectrum-coach-indicator-ring-dark-color: var(--system-coach-indicator-ring-dark-color); + --spectrum-coach-indicator-ring-light-color: var(--system-coach-indicator-ring-light-color); + --spectrum-coach-indicator-top: var(--system-coach-indicator-top); + --spectrum-coach-indicator-left: var(--system-coach-indicator-left); + --spectrum-coach-animation-indicator-ring-duration: var(--system-coach-indicator-coach-animation-indicator-ring-duration); + --spectrum-coach-animation-indicator-ring-inner-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple); + --spectrum-coach-animation-indicator-ring-center-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple); + --spectrum-coach-animation-indicator-ring-outer-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple); + --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple: var(--system-coach-indicator-quiet-animation-ring-inner-delay-multiple); + --spectrum-coach-indicator-animation-name: var(--system-coach-indicator-quiet-animation-name); + --spectrum-coach-indicator-inner-animation-delay-multiple: var(--system-coach-indicator-inner-animation-delay-multiple); + --spectrum-coach-indicator-animation-keyframe-0-scale: var(--system-coach-indicator-animation-keyframe-0-scale); + --spectrum-coach-indicator-animation-keyframe-0-opacity: var(--system-coach-indicator-animation-keyframe-0-opacity); + --spectrum-coach-indicator-animation-keyframe-50-scale: var(--system-coach-indicator-animation-keyframe-50-scale); + --spectrum-coach-indicator-animation-keyframe-50-opacity: var(--system-coach-indicator-animation-keyframe-50-opacity); + --spectrum-coach-indicator-animation-keyframe-100-scale: var(--system-coach-indicator-animation-keyframe-100-scale); + --spectrum-coach-indicator-animation-keyframe-100-opacity: var(--system-coach-indicator-animation-keyframe-100-opacity); + --spectrum-coach-indicator-quiet-animation-keyframe-0-scale: var(--system-coach-indicator-quiet-animation-keyframe-0-scale); + --spectrum-coach-indicator-quiet-ring-diameter-size: var(--system-coach-indicator-quiet-quiet-ring-diameter-size); +} diff --git a/tokens/dist/css/components/bridge/coachmark.css b/tokens/dist/css/components/bridge/coachmark.css new file mode 100644 index 00000000000..9077d2aad6a --- /dev/null +++ b/tokens/dist/css/components/bridge/coachmark.css @@ -0,0 +1,46 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-coachmark-min-width: var(--system-coach-mark-min-width); + --spectrum-coachmark-width: var(--system-coach-mark-width); + --spectrum-coachmark-max-width: var(--system-coach-mark-max-width); + --spectrum-coachmark-media-height: var(--system-coach-mark-media-height); + --spectrum-coachmark-media-min-height: var(--system-coach-mark-media-min-height); + --spectrum-coachmark-padding: var(--system-coach-mark-padding); + --spectrum-coachmark-heading-to-action-button: var(--system-coach-mark-heading-to-action-button); + --spectrum-coachmark-header-to-body: var(--system-coach-mark-header-to-body); + --spectrum-coachmark-body-to-footer: var(--system-coach-mark-body-to-footer); + --spectrum-coachmark-title-color: var(--system-coach-mark-title-color); + --spectrum-coachmark-title-font-family: var(--system-coach-mark-title-font-family); + --spectrum-coachmark-title-font-style: var(--system-coach-mark-title-font-style); + --spectrum-coachmark-title-text-font-weight: var(--system-coach-mark-title-text-font-weight); + --spectrum-coachmark-title-font-size: var(--system-coach-mark-title-font-size); + --spectrum-coachmark-title-text-line-height: var(--system-coach-mark-title-text-line-height); + --spectrum-coachmark-content-font-color: var(--system-coach-mark-content-font-color); + --spectrum-coachmark-content-font-weight: var(--system-coach-mark-content-font-weight); + --spectrum-coachmark-content-font-family: var(--system-coach-mark-content-font-family); + --spectrum-coachmark-content-font-style: var(--system-coach-mark-content-font-style); + --spectrum-coachmark-content-line-height: var(--system-coach-mark-content-line-height); + --spectrum-coachmark-content-font-size: var(--system-coach-mark-content-font-size); + --spectrum-coachmark-step-color: var(--system-coach-mark-step-color); + --spectrum-coachmark-step-font-weight: var(--system-coach-mark-step-font-weight); + --spectrum-coachmark-step-font-family: var(--system-coach-mark-step-font-family); + --spectrum-coachmark-step-font-style: var(--system-coach-mark-step-font-style); + --spectrum-coachmark-step-line-height: var(--system-coach-mark-step-line-height); + --spectrum-coachmark-step-font-size: var(--system-coach-mark-step-font-size); + --spectrum-coachmark-step-to-bottom: var(--system-coach-mark-step-to-bottom); + --spectrum-coachmark-popover-border-width: var(--system-coach-mark-popover-border-width); + --spectrum-coachmark-popover-corner-radius: var(--system-coach-mark-popover-corner-radius); + --spectrum-coachmark-buttongroup-spacing-horizontal: var(--system-coach-mark-buttongroup-spacing-horizontal); +} diff --git a/tokens/dist/css/components/bridge/colorarea.css b/tokens/dist/css/components/bridge/colorarea.css new file mode 100644 index 00000000000..63567e41539 --- /dev/null +++ b/tokens/dist/css/components/bridge/colorarea.css @@ -0,0 +1,25 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-colorarea-border-radius: var(--system-color-area-border-radius); + --spectrum-colorarea-border-color-rgb: var(--system-color-area-border-color-rgb); + --spectrum-colorarea-border-color-opacity: var(--system-color-area-border-color-opacity); + --spectrum-colorarea-border-color: var(--system-color-area-border-color); + --spectrum-colorarea-disabled-background-color: var(--system-color-area-disabled-background-color); + --spectrum-colorarea-border-width: var(--system-color-area-border-width); + --spectrum-colorarea-height: var(--system-color-area-height); + --spectrum-colorarea-width: var(--system-color-area-width); + --spectrum-colorarea-min-width: var(--system-color-area-min-width); + --spectrum-colorarea-min-height: var(--system-color-area-min-height); +} diff --git a/tokens/dist/css/components/bridge/colorhandle.css b/tokens/dist/css/components/bridge/colorhandle.css new file mode 100644 index 00000000000..182807a1a44 --- /dev/null +++ b/tokens/dist/css/components/bridge/colorhandle.css @@ -0,0 +1,28 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-colorhandle-size: var(--system-color-handle-size); + --spectrum-colorhandle-focused-size: var(--system-color-handle-focused-size); + --spectrum-colorhandle-hitarea-size: var(--system-color-handle-hitarea-size); + --spectrum-colorhandle-animation-duration: var(--system-color-handle-animation-duration); + --spectrum-colorhandle-animation-easing: var(--system-color-handle-animation-easing); + --spectrum-colorhandle-outer-border-color: var(--system-color-handle-outer-border-color); + --spectrum-colorhandle-outer-border-width: var(--system-color-handle-outer-border-width); + --spectrum-colorhandle-inner-border-color: var(--system-color-handle-inner-border-color); + --spectrum-colorhandle-inner-border-width: var(--system-color-handle-inner-border-width); + --spectrum-colorhandle-border-width: var(--system-color-handle-border-width); + --spectrum-colorhandle-border-color: var(--system-color-handle-border-color); + --spectrum-colorhandle-border-color-disabled: var(--system-color-handle-border-color-disabled); + --spectrum-colorhandle-fill-color-disabled: var(--system-color-handle-fill-color-disabled); +} diff --git a/tokens/dist/css/components/bridge/colorloupe.css b/tokens/dist/css/components/bridge/colorloupe.css new file mode 100644 index 00000000000..5e1a55bd1af --- /dev/null +++ b/tokens/dist/css/components/bridge/colorloupe.css @@ -0,0 +1,29 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-colorloupe-width: var(--system-color-loupe-width); + --spectrum-colorloupe-height: var(--system-color-loupe-height); + --spectrum-colorloupe-offset: var(--system-color-loupe-offset); + --spectrum-colorloupe-animation-distance: var(--system-color-loupe-animation-distance); + --spectrum-colorloupe-drop-shadow-x: var(--system-color-loupe-drop-shadow-x); + --spectrum-colorloupe-drop-shadow-y: var(--system-color-loupe-drop-shadow-y); + --spectrum-colorloupe-drop-shadow-blur: var(--system-color-loupe-drop-shadow-blur); + --spectrum-colorloupe-drop-shadow-color: var(--system-color-loupe-drop-shadow-color); + --spectrum-colorloupe-outer-border-width: var(--system-color-loupe-outer-border-width); + --spectrum-colorloupe-inner-border-width: var(--system-color-loupe-inner-border-width); + --spectrum-colorloupe-outer-border-color: var(--system-color-loupe-outer-border-color); + --spectrum-colorloupe-inner-border-color: var(--system-color-loupe-inner-border-color); + --spectrum-colorloupe-checkerboard-dark-color: var(--system-color-loupe-checkerboard-dark-color); + --spectrum-colorloupe-checkerboard-light-color: var(--system-color-loupe-checkerboard-light-color); +} diff --git a/tokens/dist/css/components/bridge/colorslider.css b/tokens/dist/css/components/bridge/colorslider.css new file mode 100644 index 00000000000..54928bc7f3b --- /dev/null +++ b/tokens/dist/css/components/bridge/colorslider.css @@ -0,0 +1,20 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-color-slider-handle-margin-block: var(--system-color-slider-handle-margin-block); + --spectrum-color-slider-border-color-rgba: var(--system-color-slider-border-color-rgba); + --spectrum-color-slider-checkerboard-size: var(--system-color-slider-checkerboard-size); + --spectrum-color-slider-checkerboard-dark-color: var(--system-color-slider-checkerboard-dark-color); + --spectrum-color-slider-checkerboard-light-color: var(--system-color-slider-checkerboard-light-color); +} diff --git a/tokens/dist/css/components/bridge/colorwheel.css b/tokens/dist/css/components/bridge/colorwheel.css new file mode 100644 index 00000000000..fdb43e19c2b --- /dev/null +++ b/tokens/dist/css/components/bridge/colorwheel.css @@ -0,0 +1,24 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-colorwheel-width: var(--system-color-wheel-width); + --spectrum-colorwheel-min-width: var(--system-color-wheel-min-width); + --spectrum-colorwheel-height: var(--system-color-wheel-height); + --spectrum-colorwheel-border-color: var(--system-color-wheel-border-color); + --spectrum-colorwheel-border-width: var(--system-color-wheel-border-width); + --spectrum-colorwheel-fill-color-disabled: var(--system-color-wheel-fill-color-disabled); + --spectrum-colorwheel-track-width: var(--system-color-wheel-track-width); + --spectrum-colorwheel-colorarea-margin: var(--system-color-wheel-colorarea-margin); + --spectrum-colorwheel-colorhandle-position: var(--system-color-wheel-colorhandle-position); +} diff --git a/tokens/dist/css/components/bridge/combobox.css b/tokens/dist/css/components/bridge/combobox.css new file mode 100644 index 00000000000..9f62e8d96f0 --- /dev/null +++ b/tokens/dist/css/components/bridge/combobox.css @@ -0,0 +1,46 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-combobox-border-color-default: var(--system-combobox-border-color-default); + --spectrum-combobox-border-color-hover: var(--system-combobox-border-color-hover); + --spectrum-combobox-border-color-focus: var(--system-combobox-border-color-focus); + --spectrum-combobox-border-color-focus-hover: var(--system-combobox-border-color-focus-hover); + --spectrum-combobox-border-color-key-focus: var(--system-combobox-border-color-key-focus); + --spectrum-combobox-inline-size: var(--system-combobox-inline-size); + --spectrum-combobox-minimum-width-multiplier: var(--system-combobox-quiet-minimum-width-multiplier); + --spectrum-combobox-focus-indicator-thickness: var(--system-combobox-focus-indicator-thickness); + --spectrum-combobox-focus-indicator-gap: var(--system-combobox-focus-indicator-gap); + --spectrum-combobox-focus-indicator-color: var(--system-combobox-focus-indicator-color); + --spectrum-combobox-border-radius: var(--system-combobox-border-radius); + --spectrum-combobox-border-width: var(--system-combobox-border-width); + --spectrum-combobox-spacing-label-to-combobox: var(--system-combobox-quiet-size-xl-spacing-label-to); + --spectrum-combobox-font-style: var(--system-combobox-font-style); + --spectrum-combobox-line-height: var(--system-combobox-line-height); + --spectrum-combobox-border-color-invalid-default: var(--system-combobox-border-color-invalid-default); + --spectrum-combobox-border-color-invalid-hover: var(--system-combobox-border-color-invalid-hover); + --spectrum-combobox-border-color-invalid-focus: var(--system-combobox-border-color-invalid-focus); + --spectrum-combobox-border-color-invalid-focus-hover: var(--system-combobox-border-color-invalid-focus-hover); + --spectrum-combobox-border-color-invalid-key-focus: var(--system-combobox-border-color-invalid-key-focus); + --spectrum-combobox-block-size: var(--system-combobox-size-xl-block-size); + --spectrum-combobox-icon-size: var(--system-combobox-size-xl-icon-size); + --spectrum-combobox-font-size: var(--system-combobox-size-xl-font-size); + --spectrum-combobox-spacing-inline-icon-to-button: var(--system-combobox-quiet-spacing-inline-icon-to-button); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--system-combobox-size-xl-block-spacing-edge-to-progress-circle); + --spectrum-combobox-block-spacing-edge-to-alert: var(--system-combobox-size-xl-block-spacing-edge-to-alert); + --spectrum-combobox-spacing-edge-to-menu: var(--system-combobox-size-xl-spacing-edge-to-menu); + --spectrum-combobox-spacing-block-start-edge-to-text: var(--system-combobox-size-xl-spacing-block-start-edge-to-text); + --spectrum-combobox-spacing-block-end-edge-to-text: var(--system-combobox-size-xl-spacing-block-end-edge-to-text); + --spectrum-combobox-spacing-inline-start-edge-to-text: var(--system-combobox-quiet-spacing-inline-start-edge-to-text); + --spectrum-combobox-spacing-inline-end-edge-to-text: var(--system-combobox-size-xl-spacing-inline-end-edge-to-text); +} diff --git a/tokens/dist/css/components/bridge/contextualhelp.css b/tokens/dist/css/components/bridge/contextualhelp.css new file mode 100644 index 00000000000..dc8d93331d1 --- /dev/null +++ b/tokens/dist/css/components/bridge/contextualhelp.css @@ -0,0 +1,20 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-contextual-help-padding: var(--system-contextual-help-padding); + --spectrum-contextual-help-link-spacing: var(--system-contextual-help-link-spacing); + --spectrum-contextual-help-heading-size: var(--system-contextual-help-heading-size); + --spectrum-contextual-help-heading-color: var(--system-contextual-help-heading-color); + --spectrum-contextual-help-body-color: var(--system-contextual-help-body-color); +} diff --git a/tokens/dist/css/components/bridge/datepicker.css b/tokens/dist/css/components/bridge/datepicker.css new file mode 100644 index 00000000000..042ea0b8973 --- /dev/null +++ b/tokens/dist/css/components/bridge/datepicker.css @@ -0,0 +1,55 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-datepicker-initial-height: var(--system-date-picker-initial-height); + --spectrum-datepicker-border-radius: var(--system-date-picker-border-radius); + --spectrum-datepicker-border-radius-quiet: var(--system-date-picker-border-radius-quiet); + --spectrum-datepicker-border-width: var(--system-date-picker-border-width); + --spectrum-datepicker-min-width: var(--system-date-picker-min-width); + --spectrum-datepicker-icon-size: var(--system-date-picker-icon-size); + --spectrum-datepicker-pickerbutton-border-color: var(--system-date-picker-pickerbutton-border-color); + --spectrum-datepicker-pickerbutton-border-color-invalid: var(--system-date-picker-pickerbutton-border-color-invalid); + --spectrum-datepicker-pickerbutton-width: var(--system-date-picker-pickerbutton-width); + --spectrum-datepicker-pickerbutton-width-quiet: var(--system-date-picker-pickerbutton-width-quiet); + --spectrum-datepicker-quiet-button-offset: var(--system-date-picker-quiet-button-offset); + --spectrum-datepicker-icon-to-button: var(--system-date-picker-icon-to-button); + --spectrum-datepicker-icon-to-text: var(--system-date-picker-icon-to-text); + --spectrum-datepicker-focus-ring-gap: var(--system-date-picker-focus-ring-gap); + --spectrum-datepicker-focus-thickness: var(--system-date-picker-focus-thickness); + --spectrum-datepicker-focus-animation: var(--system-date-picker-focus-animation); + --spectrum-datepicker-focus-ring-width: var(--system-date-picker-focus-ring-width); + --spectrum-datepicker-focus-ring-color: var(--system-date-picker-focus-ring-color); + --spectrum-datepicker-focus-line-gap: var(--system-date-picker-focus-line-gap); + --spectrum-datepicker-invalid-quiet-color: var(--system-date-picker-invalid-quiet-color); + --spectrum-datepicker-quiet-border-color-hover: var(--system-date-picker-quiet-border-color-hover); + --spectrum-datepicker-border-color-disabled: var(--system-date-picker-border-color-disabled); + --spectrum-datepicker-dash-font-size: var(--system-date-picker-dash-font-size); + --spectrum-datepicker-dash-color: var(--system-date-picker-dash-color); + --spectrum-datepicker-dash-color-disabled: var(--system-date-picker-dash-color-disabled); + --spectrum-datepicker-range-dash-marin-inline-start: var(--system-date-picker-range-dash-marin-inline-start); + --spectrum-datepicker-range-dash-padding-top: var(--system-date-picker-range-dash-padding-top); + --spectrum-datepicker-input-width-base: var(--system-date-picker-input-width-base); + --spectrum-datepicker-input-width: var(--system-date-picker-input-width); + --spectrum-datepicker-input-width-quiet: var(--system-date-picker-input-width-quiet); + --spectrum-datepicker-range-input-width-first: var(--system-date-picker-range-input-width-first); + --spectrum-datepicker-range-input-width-quiet-first: var(--system-date-picker-range-input-width-quiet-first); + --spectrum-datepicker-datetime-input-width-first: var(--system-date-picker-datetime-input-width-first); + --spectrum-datepicker-datetime-input-width: var(--system-date-picker-datetime-input-width); + --spectrum-datepicker-datetime-quiet-input-width-first: var(--system-date-picker-datetime-quiet-input-width-first); + --spectrum-datepicker-datetime-quiet-input-width: var(--system-date-picker-datetime-quiet-input-width); + --spectrum-datepicker-padding-inline-end: var(--system-date-picker-padding-inline-end); + --spectrum-datepicker-padding-inline-end-quiet: var(--system-date-picker-padding-inline-end-quiet); + --spectrum-datepicker-padding-inline-end-invalid: var(--system-date-picker-padding-inline-end-invalid); + --spectrum-datepicker-padding-inline-end-invalid-quiet: var(--system-date-picker-padding-inline-end-invalid-quiet); +} diff --git a/tokens/dist/css/components/bridge/dial.css b/tokens/dist/css/components/bridge/dial.css new file mode 100644 index 00000000000..d378243d669 --- /dev/null +++ b/tokens/dist/css/components/bridge/dial.css @@ -0,0 +1,45 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-dial-background-color-default: var(--system-dial-background-color-default); + --spectrum-dial-handle-marker-color-disabled: var(--system-dial-handle-marker-color-disabled); + --spectrum-dial-border-color-disabled: var(--system-dial-border-color-disabled); + --spectrum-dial-handle-marker-color: var(--system-dial-handle-marker-color); + --spectrum-dial-border-color: var(--system-dial-border-color); + --spectrum-dial-handle-marker-color-down: var(--system-dial-handle-marker-color-down); + --spectrum-dial-border-color-down: var(--system-dial-border-color-down); + --spectrum-dial-handle-marker-color-hover: var(--system-dial-handle-marker-color-hover); + --spectrum-dial-border-color-hover: var(--system-dial-border-color-hover); + --spectrum-dial-handle-marker-color-key-focus: var(--system-dial-handle-marker-color-key-focus); + --spectrum-dial-border-color-key-focus: var(--system-dial-border-color-key-focus); + --spectrum-dial-handle-marker-color-mouse-focus: var(--system-dial-handle-marker-color-mouse-focus); + --spectrum-dial-border-color-mouse-focus: var(--system-dial-border-color-mouse-focus); + --spectrum-dial-min-max-tick-color: var(--system-dial-min-max-tick-color); + --spectrum-dial-label-text-color: var(--system-dial-label-text-color); + --spectrum-dial-label-text-color-disabled: var(--system-dial-label-text-color-disabled); + --spectrum-dial-handle-border-color-disabled: var(--system-dial-handle-border-color-disabled); + --spectrum-dial-container-width: var(--system-dial-container-width); + --spectrum-dial-handle-marker-width: var(--system-dial-handle-marker-width); + --spectrum-dial-handle-marker-height: var(--system-dial-handle-marker-height); + --spectrum-dial-handle-marker-border-radius: var(--system-dial-handle-marker-border-radius); + --spectrum-dial-handle-size: var(--system-dial-handle-size); + --spectrum-dial-min-height: var(--system-dial-min-height); + --spectrum-dial-controls-min-height: var(--system-dial-controls-min-height); + --spectrum-dial-min-max-tick-angles: var(--system-dial-min-max-tick-angles); + --spectrum-dial-width: var(--system-dial-small-width); + --spectrum-dial-height: var(--system-dial-small-height); + --spectrum-dial-handle-border-size: var(--system-dial-handle-border-size); + --spectrum-dial-label-text-size: var(--system-dial-label-text-size); + --spectrum-dial-label-line-height: var(--system-dial-label-line-height); +} diff --git a/tokens/dist/css/components/bridge/dialog.css b/tokens/dist/css/components/bridge/dialog.css new file mode 100644 index 00000000000..08afc961108 --- /dev/null +++ b/tokens/dist/css/components/bridge/dialog.css @@ -0,0 +1,35 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-dialog-fullscreen-header-text-size: var(--system-dialog-fullscreen-header-text-size); + --spectrum-dialog-min-inline-size: var(--system-dialog-min-inline-size); + --spectrum-dialog-confirm-small-width: var(--system-dialog-confirm-small-width); + --spectrum-dialog-confirm-medium-width: var(--system-dialog-confirm-medium-width); + --spectrum-dialog-confirm-large-width: var(--system-dialog-confirm-large-width); + --spectrum-dialog-confirm-divider-block-spacing-start: var(--system-dialog-confirm-divider-block-spacing-start); + --spectrum-dialog-confirm-divider-block-spacing-end: var(--system-dialog-confirm-divider-block-spacing-end); + --spectrum-dialog-confirm-description-text-color: var(--system-dialog-confirm-description-text-color); + --spectrum-dialog-confirm-title-text-color: var(--system-dialog-confirm-title-text-color); + --spectrum-dialog-confirm-description-text-line-height: var(--system-dialog-confirm-description-text-line-height); + --spectrum-dialog-confirm-title-text-line-height: var(--system-dialog-confirm-title-text-line-height); + --spectrum-dialog-heading-font-weight: var(--system-dialog-heading-font-weight); + --spectrum-dialog-confirm-description-padding: var(--system-dialog-confirm-description-padding); + --spectrum-dialog-confirm-description-margin: var(--system-dialog-confirm-description-margin); + --spectrum-dialog-confirm-footer-padding-top: var(--system-dialog-confirm-footer-padding-top); + --spectrum-dialog-confirm-gap-size: var(--system-dialog-confirm-gap-size); + --spectrum-dialog-confirm-buttongroup-padding-top: var(--system-dialog-confirm-buttongroup-padding-top); + --spectrum-dialog-confirm-close-button-size: var(--system-dialog-confirm-close-button-size); + --spectrum-dialog-confirm-close-button-padding: var(--system-dialog-confirm-close-button-padding); + --spectrum-dialog-confirm-divider-height: var(--system-dialog-confirm-divider-height); +} diff --git a/tokens/dist/css/components/bridge/divider.css b/tokens/dist/css/components/bridge/divider.css new file mode 100644 index 00000000000..ef374bf8808 --- /dev/null +++ b/tokens/dist/css/components/bridge/divider.css @@ -0,0 +1,24 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-divider-background-color-small: var(--system-divider-background-color-small); + --spectrum-divider-background-color-medium: var(--system-divider-background-color-medium); + --spectrum-divider-background-color-large: var(--system-divider-background-color-large); + --spectrum-divider-background-color-small-static-white: var(--system-divider-background-color-small-static-white); + --spectrum-divider-background-color-medium-static-white: var(--system-divider-background-color-medium-static-white); + --spectrum-divider-background-color-large-static-white: var(--system-divider-background-color-large-static-white); + --spectrum-divider-background-color-small-static-black: var(--system-divider-background-color-small-static-black); + --spectrum-divider-background-color-medium-static-black: var(--system-divider-background-color-medium-static-black); + --spectrum-divider-background-color-large-static-black: var(--system-divider-background-color-large-static-black); +} diff --git a/tokens/dist/css/components/bridge/dropindicator.css b/tokens/dist/css/components/bridge/dropindicator.css new file mode 100644 index 00000000000..a4238a399bc --- /dev/null +++ b/tokens/dist/css/components/bridge/dropindicator.css @@ -0,0 +1,19 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-dropindicator-border-color: var(--system-drop-indicator-border-color); + --spectrum-dropindicator-circle-color: var(--system-drop-indicator-circle-color); + --spectrum-dropindicator-border-size: var(--system-drop-indicator-border-size); + --spectrum-dropindicator-circle-size: var(--system-drop-indicator-circle-size); +} diff --git a/tokens/dist/css/components/bridge/dropzone.css b/tokens/dist/css/components/bridge/dropzone.css new file mode 100644 index 00000000000..966dae34803 --- /dev/null +++ b/tokens/dist/css/components/bridge/dropzone.css @@ -0,0 +1,50 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-drop-zone-padding: var(--system-drop-zone-padding); + --spectrum-drop-zone-illustration-to-heading: var(--system-drop-zone-illustration-to-heading); + --spectrum-drop-zone-heading-to-body: var(--system-drop-zone-heading-to-body); + --spectrum-drop-zone-border-width: var(--system-drop-zone-border-width); + --spectrum-drop-zone-corner-radius: var(--system-drop-zone-corner-radius); + --spectrum-drop-zone-border-color: var(--system-drop-zone-border-color); + --spectrum-drop-zone-heading-font-family: var(--system-drop-zone-heading-font-family); + --spectrum-drop-zone-heading-font-weight: var(--system-drop-zone-heading-font-weight); + --spectrum-drop-zone-heading-font-style: var(--system-drop-zone-heading-font-style); + --spectrum-drop-zone-heading-font-size: var(--system-drop-zone-heading-font-size); + --spectrum-drop-zone-heading-line-height: var(--system-drop-zone-heading-line-height); + --spectrum-drop-zone-heading-color: var(--system-drop-zone-heading-color); + --spectrum-drop-zone-body-font-family: var(--system-drop-zone-body-font-family); + --spectrum-drop-zone-body-font-weight: var(--system-drop-zone-body-font-weight); + --spectrum-drop-zone-body-font-style: var(--system-drop-zone-body-font-style); + --spectrum-drop-zone-body-font-size: var(--system-drop-zone-body-font-size); + --spectrum-drop-zone-body-line-height: var(--system-drop-zone-body-line-height); + --spectrum-drop-zone-body-color: var(--system-drop-zone-body-color); + --spectrum-drop-zone-background-color: var(--system-drop-zone-background-color); + --spectrum-drop-zone-border-color-hover: var(--system-drop-zone-border-color-hover); + --spectrum-drop-zone-illustration-color: var(--system-drop-zone-illustration-color); + --spectrum-drop-zone-illustration-color-hover: var(--system-drop-zone-illustration-color-hover); + --spectrum-drop-zone-content-height: var(--system-drop-zone-content-height); + --spectrum-drop-zone-content-max-width: var(--system-drop-zone-content-max-width); + --spectrum-drop-zone-content-edge-to-text: var(--system-drop-zone-content-edge-to-text); + --spectrum-drop-zone-content-top-to-text: var(--system-drop-zone-content-top-to-text); + --spectrum-drop-zone-content-bottom-to-text: var(--system-drop-zone-content-bottom-to-text); + --spectrum-drop-zone-content-font-family: var(--system-drop-zone-content-font-family); + --spectrum-drop-zone-content-font-weight: var(--system-drop-zone-content-font-weight); + --spectrum-drop-zone-content-font-style: var(--system-drop-zone-content-font-style); + --spectrum-drop-zone-content-font-size: var(--system-drop-zone-content-font-size); + --spectrum-drop-zone-content-line-height: var(--system-drop-zone-content-line-height); + --spectrum-drop-zone-content-background-color: var(--system-drop-zone-content-background-color); + --spectrum-drop-zone-content-color: var(--system-drop-zone-content-color); + --spectrum-drop-zone-heading-font-size-cjk: var(--system-drop-zone-heading-font-size-cjk); +} diff --git a/tokens/dist/css/components/bridge/fieldgroup.css b/tokens/dist/css/components/bridge/fieldgroup.css new file mode 100644 index 00000000000..bd891baf618 --- /dev/null +++ b/tokens/dist/css/components/bridge/fieldgroup.css @@ -0,0 +1,17 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-fieldgroup-margin: var(--system-field-group-margin); + --spectrum-fieldgroup-readonly-delimiter: var(--system-field-group-readonly-delimiter); +} diff --git a/tokens/dist/css/components/bridge/fieldlabel.css b/tokens/dist/css/components/bridge/fieldlabel.css new file mode 100644 index 00000000000..607a9d1e90c --- /dev/null +++ b/tokens/dist/css/components/bridge/fieldlabel.css @@ -0,0 +1,26 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-fieldlabel-min-height: var(--system-field-label-size-xl-min-height); + --spectrum-fieldlabel-color: var(--system-field-label-color); + --spectrum-field-label-text-to-asterisk: var(--system-field-label-size-xl-text-to-asterisk); + --spectrum-fieldlabel-font-weight: var(--system-field-label-font-weight); + --spectrum-fieldlabel-line-height: var(--system-field-label-line-height); + --spectrum-fieldlabel-line-height-cjk: var(--system-field-label-line-height-cjk); + --spectrum-fieldlabel-top-to-text: var(--system-field-label-size-xl-top-to-text); + --spectrum-fieldlabel-bottom-to-text: var(--system-field-label-size-xl-bottom-to-text); + --spectrum-fieldlabel-font-size: var(--system-field-label-size-xl-font-size); + --spectrum-fieldlabel-side-margin-block-start: var(--system-field-label-size-xl-side-margin-block-start); + --spectrum-fieldlabel-side-padding-right: var(--system-field-label-size-xl-side-padding-right); +} diff --git a/tokens/dist/css/components/bridge/floatingactionbutton.css b/tokens/dist/css/components/bridge/floatingactionbutton.css new file mode 100644 index 00000000000..610f3132db7 --- /dev/null +++ b/tokens/dist/css/components/bridge/floatingactionbutton.css @@ -0,0 +1,31 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-floating-action-button-size: var(--system-floating-action-button-size); + --spectrum-floating-action-button-icon-size: var(--system-floating-action-button-icon-size); + --spectrum-floating-action-button-padding: var(--system-floating-action-button-padding); + --spectrum-floating-action-button-margin: var(--system-floating-action-button-margin); + --spectrum-floating-action-button-drop-shadow-x: var(--system-floating-action-button-drop-shadow-x); + --spectrum-floating-action-button-focus-ring-width: var(--system-floating-action-button-focus-ring-width); + --spectrum-floating-action-button-focus-ring-gap: var(--system-floating-action-button-focus-ring-gap); + --spectrum-floating-action-button-focus-ring-color: var(--system-floating-action-button-focus-ring-color); + --spectrum-floating-action-button-background-color: var(--system-floating-action-button-secondary-background-color); + --spectrum-floating-action-button-background-color-hover: var(--system-floating-action-button-secondary-background-color-hover); + --spectrum-floating-action-button-background-color-down: var(--system-floating-action-button-secondary-background-color-down); + --spectrum-floating-action-button-background-color-key-focus: var(--system-floating-action-button-secondary-background-color-key-focus); + --spectrum-floating-action-button-icon-color: var(--system-floating-action-button-secondary-icon-color); + --spectrum-floating-action-button-icon-color-hover: var(--system-floating-action-button-secondary-icon-color-hover); + --spectrum-floating-action-button-icon-color-down: var(--system-floating-action-button-secondary-icon-color-down); + --spectrum-floating-action-button-icon-color-key-focus: var(--system-floating-action-button-secondary-icon-color-key-focus); +} diff --git a/tokens/dist/css/components/bridge/helptext.css b/tokens/dist/css/components/bridge/helptext.css new file mode 100644 index 00000000000..eb01d743f8a --- /dev/null +++ b/tokens/dist/css/components/bridge/helptext.css @@ -0,0 +1,27 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-helptext-line-height: var(--system-help-text-line-height); + --spectrum-helptext-content-color-default: var(--system-help-text-disabled-content-color-default); + --spectrum-helptext-icon-color-default: var(--system-help-text-disabled-icon-color-default); + --spectrum-helptext-disabled-content-color: var(--system-help-text-disabled-content-color); + --spectrum-helptext-line-height-cjk: var(--system-help-text-lang-ko-line-height-cjk); + --spectrum-helptext-min-height: var(--system-help-text-size-xl-min-height); + --spectrum-helptext-icon-size: var(--system-help-text-size-xl-icon-size); + --spectrum-helptext-font-size: var(--system-help-text-size-xl-font-size); + --spectrum-helptext-text-to-visual: var(--system-help-text-size-xl-text-to-visual); + --spectrum-helptext-top-to-workflow-icon: var(--system-help-text-size-xl-top-to-workflow-icon); + --spectrum-helptext-top-to-text: var(--system-help-text-size-xl-top-to-text); + --spectrum-helptext-bottom-to-text: var(--system-help-text-size-xl-bottom-to-text); +} diff --git a/tokens/dist/css/components/bridge/icon.css b/tokens/dist/css/components/bridge/icon.css new file mode 100644 index 00000000000..a0a87a8fc78 --- /dev/null +++ b/tokens/dist/css/components/bridge/icon.css @@ -0,0 +1,23 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-icon-size-xxs: var(--system-icon-size-xxs); + --spectrum-icon-size-xs: var(--system-icon-size-xs); + --spectrum-icon-size-s: var(--system-icon-size-s); + --spectrum-icon-size-m: var(--system-icon-size-m); + --spectrum-icon-size-l: var(--system-icon-size-l); + --spectrum-icon-size-xl: var(--system-icon-size-xl); + --spectrum-icon-size-xxl: var(--system-icon-size-xxl); + --spectrum-icon-size: var(--system-ui-icon-asterisk-300-icon-size); +} diff --git a/tokens/dist/css/components/bridge/illustratedmessage.css b/tokens/dist/css/components/bridge/illustratedmessage.css new file mode 100644 index 00000000000..b27fedcfd1c --- /dev/null +++ b/tokens/dist/css/components/bridge/illustratedmessage.css @@ -0,0 +1,33 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-illustrated-message-description-max-inline-size: var(--system-illustrated-message-description-max-inline-size); + --spectrum-illustrated-message-heading-max-inline-size: var(--system-illustrated-message-heading-max-inline-size); + --spectrum-illustrated-message-title-to-heading: var(--system-illustrated-message-title-to-heading); + --spectrum-illustrated-message-heading-to-description: var(--system-illustrated-message-heading-to-description); + --spectrum-illustrated-message-illustration-color: var(--system-illustrated-message-illustration-color); + --spectrum-illustrated-message-illustration-accent-color: var(--system-illustrated-message-illustration-accent-color); + --spectrum-illustrated-message-title-font-family: var(--system-illustrated-message-title-font-family); + --spectrum-illustrated-message-title-font-weight: var(--system-illustrated-message-title-font-weight); + --spectrum-illustrated-message-title-font-style: var(--system-illustrated-message-title-font-style); + --spectrum-illustrated-message-title-font-size: var(--system-illustrated-message-lang-ko-title-font-size); + --spectrum-illustrated-message-title-line-height: var(--system-illustrated-message-title-line-height); + --spectrum-illustrated-message-title-color: var(--system-illustrated-message-title-color); + --spectrum-illustrated-message-description-font-family: var(--system-illustrated-message-description-font-family); + --spectrum-illustrated-message-description-font-weight: var(--system-illustrated-message-description-font-weight); + --spectrum-illustrated-message-description-font-style: var(--system-illustrated-message-description-font-style); + --spectrum-illustrated-message-description-font-size: var(--system-illustrated-message-description-font-size); + --spectrum-illustrated-message-description-line-height: var(--system-illustrated-message-description-line-height); + --spectrum-illustrated-message-description-color: var(--system-illustrated-message-description-color); +} diff --git a/tokens/dist/css/components/bridge/infieldbutton.css b/tokens/dist/css/components/bridge/infieldbutton.css new file mode 100644 index 00000000000..81de6523215 --- /dev/null +++ b/tokens/dist/css/components/bridge/infieldbutton.css @@ -0,0 +1,41 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-infield-button-border-width: var(--system-infield-button-quiet-border-width); + --spectrum-infield-button-border-color: var(--system-infield-button-quiet-disabled-border-color); + --spectrum-infield-button-border-radius: var(--system-infield-button-border-radius); + --spectrum-infield-button-border-radius-reset: var(--system-infield-button-border-radius-reset); + --spectrum-infield-button-stacked-top-border-radius-start-start: var(--system-infield-button-stacked-top-border-radius-start-start); + --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--system-infield-button-stacked-bottom-border-radius-end-start); + --spectrum-infield-button-background-color: var(--system-infield-button-quiet-disabled-background-color); + --spectrum-infield-button-background-color-hover: var(--system-infield-button-quiet-background-color-hover); + --spectrum-infield-button-background-color-down: var(--system-infield-button-quiet-background-color-down); + --spectrum-infield-button-background-color-key-focus: var(--system-infield-button-quiet-background-color-key-focus); + --spectrum-infield-button-height: var(--system-infield-button-size-xl-height); + --spectrum-infield-button-width: var(--system-infield-button-bottom-size-xl-width); + --spectrum-infield-button-stacked-border-radius-reset: var(--system-infield-button-stacked-border-radius-reset); + --spectrum-infield-button-edge-to-fill: var(--system-infield-button-edge-to-fill); + --spectrum-infield-button-inner-edge-to-fill: var(--system-infield-button-inner-edge-to-fill); + --spectrum-infield-button-fill-padding: var(--system-infield-button-fill-padding); + --spectrum-infield-button-stacked-fill-padding-inline: var(--system-infield-button-size-xl-stacked-fill-padding-inline); + --spectrum-infield-button-stacked-fill-padding-outer: var(--system-infield-button-size-xl-stacked-fill-padding-outer); + --spectrum-infield-button-stacked-fill-padding-inner: var(--system-infield-button-size-xl-stacked-fill-padding-inner); + --spectrum-infield-button-animation-duration: var(--system-infield-button-animation-duration); + --spectrum-infield-button-icon-color: var(--system-infield-button-disabled-icon-color); + --spectrum-infield-button-icon-color-hover: var(--system-infield-button-disabled-icon-color-hover); + --spectrum-infield-button-icon-color-down: var(--system-infield-button-disabled-icon-color-down); + --spectrum-infield-button-icon-color-key-focus: var(--system-infield-button-disabled-icon-color-key-focus); + --spectrum-infield-button-fill-justify-content: var(--system-infield-button-fill-justify-content); + --spectrum-infield-border-color: var(--system-infield-button-quiet-infield-border-color); +} diff --git a/tokens/dist/css/components/bridge/inlinealert.css b/tokens/dist/css/components/bridge/inlinealert.css new file mode 100644 index 00000000000..fbd2855f743 --- /dev/null +++ b/tokens/dist/css/components/bridge/inlinealert.css @@ -0,0 +1,41 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-inlinealert-heading-font-family: var(--system-in-line-alert-heading-font-family); + --spectrum-inlinealert-heading-font-weight: var(--system-in-line-alert-heading-font-weight); + --spectrum-inlinealert-heading-font-style: var(--system-in-line-alert-heading-font-style); + --spectrum-inlinealert-heading-font-size: var(--system-in-line-alert-heading-font-size); + --spectrum-inlinealert-heading-line-height: var(--system-in-line-alert-heading-line-height); + --spectrum-inlinealert-content-font-family: var(--system-in-line-alert-content-font-family); + --spectrum-inlinealert-content-font-weight: var(--system-in-line-alert-content-font-weight); + --spectrum-inlinealert-content-font-style: var(--system-in-line-alert-content-font-style); + --spectrum-inlinealert-content-font-size: var(--system-in-line-alert-content-font-size); + --spectrum-inlinealert-content-line-height: var(--system-in-line-alert-content-line-height); + --spectrum-inlinealert-border-width: var(--system-in-line-alert-border-width); + --spectrum-inlinealert-border-radius: var(--system-in-line-alert-border-radius); + --spectrum-inlinealert-icon-size: var(--system-in-line-alert-icon-size); + --spectrum-inlinealert-min-inline-size: var(--system-in-line-alert-min-inline-size); + --spectrum-inlinealert-header-min-block-size: var(--system-in-line-alert-header-min-block-size); + --spectrum-inlinealert-spacing-edge-to-text: var(--system-in-line-alert-spacing-edge-to-text); + --spectrum-inlinealert-spacing-header-to-icon: var(--system-in-line-alert-spacing-header-to-icon); + --spectrum-inlinealert-spacing-header-content-button: var(--system-in-line-alert-spacing-header-content-button); + --spectrum-inlinealert-background-color: var(--system-in-line-alert-background-color); + --spectrum-inlinealert-border-and-icon-color: var(--system-in-line-alert-border-and-icon-color); + --spectrum-inlinealert-header-color: var(--system-in-line-alert-header-color); + --spectrum-inlinealert-content-color: var(--system-in-line-alert-content-color); + --spectrum-inlinealert-border-and-icon-color-info: var(--system-in-line-alert-border-and-icon-color-info); + --spectrum-inlinealert-border-and-icon-color-positive: var(--system-in-line-alert-border-and-icon-color-positive); + --spectrum-inlinealert-border-and-icon-color-notice: var(--system-in-line-alert-border-and-icon-color-notice); + --spectrum-inlinealert-border-and-icon-color-negative: var(--system-in-line-alert-border-and-icon-color-negative); +} diff --git a/tokens/dist/css/components/bridge/link.css b/tokens/dist/css/components/bridge/link.css new file mode 100644 index 00000000000..06acf616f07 --- /dev/null +++ b/tokens/dist/css/components/bridge/link.css @@ -0,0 +1,26 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-link-animation-duration: var(--system-link-animation-duration); + --spectrum-link-text-color-primary-default: var(--system-link-text-color-primary-default); + --spectrum-link-text-color-primary-hover: var(--system-link-text-color-primary-hover); + --spectrum-link-text-color-primary-active: var(--system-link-text-color-primary-active); + --spectrum-link-text-color-primary-focus: var(--system-link-text-color-primary-focus); + --spectrum-link-text-color-secondary-default: var(--system-link-text-color-secondary-default); + --spectrum-link-text-color-secondary-hover: var(--system-link-text-color-secondary-hover); + --spectrum-link-text-color-secondary-active: var(--system-link-text-color-secondary-active); + --spectrum-link-text-color-secondary-focus: var(--system-link-text-color-secondary-focus); + --spectrum-link-text-color-white: var(--system-link-text-color-white); + --spectrum-link-text-color-black: var(--system-link-text-color-black); +} diff --git a/tokens/dist/css/components/bridge/logicbutton.css b/tokens/dist/css/components/bridge/logicbutton.css new file mode 100644 index 00000000000..361470ba404 --- /dev/null +++ b/tokens/dist/css/components/bridge/logicbutton.css @@ -0,0 +1,39 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-logic-button-height: var(--system-logic-button-height); + --spectrum-logic-button-padding: var(--system-logic-button-padding); + --spectrum-logic-button-font-size: var(--system-logic-button-font-size); + --spectrum-logic-button-font-weight: var(--system-logic-button-font-weight); + --spectrum-logic-button-border-width: var(--system-logic-button-border-width); + --spectrum-logic-button-border-radius: var(--system-logic-button-border-radius); + --spectrum-logic-button-focus-indicator-width: var(--system-logic-button-focus-indicator-width); + --spectrum-logic-button-focus-indicator-gap: var(--system-logic-button-focus-indicator-gap); + --spectrum-logic-button-focus-indicator-color: var(--system-logic-button-focus-indicator-color); + --spectrum-logic-button-and-text-color: var(--system-logic-button-and-text-color); + --spectrum-logic-button-and-background-color-default: var(--system-logic-button-and-background-color-default); + --spectrum-logic-button-and-background-color-hover: var(--system-logic-button-and-background-color-hover); + --spectrum-logic-button-and-border-color-hover: var(--system-logic-button-and-border-color-hover); + --spectrum-logic-button-or-text-color: var(--system-logic-button-or-text-color); + --spectrum-logic-button-and-background-color-default-disabled: var(--system-logic-button-and-background-color-default-disabled); + --spectrum-logic-button-and-border-color-disabled: var(--system-logic-button-and-border-color-disabled); + --spectrum-logic-button-and-text-color-disabled: var(--system-logic-button-and-text-color-disabled); + --spectrum-logic-button-and-background-color-hover-disabled: var(--system-logic-button-and-background-color-hover-disabled); + --spectrum-logic-button-and-border-color-hover-disabled: var(--system-logic-button-and-border-color-hover-disabled); + --spectrum-logic-button-or-background-color-disabled: var(--system-logic-button-or-background-color-disabled); + --spectrum-logic-button-or-border-color-disabled: var(--system-logic-button-or-border-color-disabled); + --spectrum-logic-button-or-text-color-disabled: var(--system-logic-button-or-text-color-disabled); + --spectrum-logic-button-or-background-color-hover-disabled: var(--system-logic-button-or-background-color-hover-disabled); + --spectrum-logic-button-or-border-color-hover-disabled: var(--system-logic-button-or-border-color-hover-disabled); +} diff --git a/tokens/dist/css/components/bridge/menu.css b/tokens/dist/css/components/bridge/menu.css new file mode 100644 index 00000000000..f88595f6718 --- /dev/null +++ b/tokens/dist/css/components/bridge/menu.css @@ -0,0 +1,83 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-menu-item-top-to-action: var(--system-menu-item-top-to-action); + --spectrum-menu-item-top-to-checkbox: var(--system-menu-item-top-to-checkbox); + --spectrum-menu-item-label-line-height: var(--system-menu-item-label-line-height); + --spectrum-menu-item-label-line-height-cjk: var(--system-menu-item-label-line-height-cjk); + --spectrum-menu-item-label-to-description-spacing: var(--system-menu-item-label-to-description-spacing); + --spectrum-menu-item-focus-indicator-width: var(--system-menu-item-focus-indicator-width); + --spectrum-menu-item-focus-indicator-color: var(--system-menu-item-focus-indicator-color); + --spectrum-menu-item-label-to-value-area-min-spacing: var(--system-menu-item-label-to-value-area-min-spacing); + --spectrum-menu-item-label-content-color-default: var(--system-menu-item-label-content-color-default); + --spectrum-menu-item-label-content-color-hover: var(--system-menu-item-label-content-color-hover); + --spectrum-menu-item-label-content-color-down: var(--system-menu-item-label-content-color-down); + --spectrum-menu-item-label-content-color-focus: var(--system-menu-item-label-content-color-focus); + --spectrum-menu-item-label-icon-color-default: var(--system-menu-item-label-icon-color-default); + --spectrum-menu-item-label-icon-color-hover: var(--system-menu-item-label-icon-color-hover); + --spectrum-menu-item-label-icon-color-down: var(--system-menu-item-label-icon-color-down); + --spectrum-menu-item-label-icon-color-focus: var(--system-menu-item-label-icon-color-focus); + --spectrum-menu-item-label-content-color-disabled: var(--system-menu-item-label-content-color-disabled); + --spectrum-menu-item-label-icon-color-disabled: var(--system-menu-item-label-icon-color-disabled); + --spectrum-menu-item-description-line-height: var(--system-menu-item-description-line-height); + --spectrum-menu-item-description-line-height-cjk: var(--system-menu-item-description-line-height-cjk); + --spectrum-menu-item-description-color-default: var(--system-menu-item-description-color-default); + --spectrum-menu-item-description-color-hover: var(--system-menu-item-description-color-hover); + --spectrum-menu-item-description-color-down: var(--system-menu-item-description-color-down); + --spectrum-menu-item-description-color-focus: var(--system-menu-item-description-color-focus); + --spectrum-menu-item-description-color-disabled: var(--system-menu-item-description-color-disabled); + --spectrum-menu-section-header-line-height: var(--system-menu-section-header-line-height); + --spectrum-menu-section-header-line-height-cjk: var(--system-menu-section-header-line-height-cjk); + --spectrum-menu-section-header-font-weight: var(--system-menu-section-header-font-weight); + --spectrum-menu-section-header-color: var(--system-menu-section-header-color); + --spectrum-menu-collapsible-icon-color: var(--system-menu-collapsible-icon-color); + --spectrum-menu-checkmark-icon-color-default: var(--system-menu-checkmark-icon-color-default); + --spectrum-menu-checkmark-icon-color-hover: var(--system-menu-checkmark-icon-color-hover); + --spectrum-menu-checkmark-icon-color-down: var(--system-menu-checkmark-icon-color-down); + --spectrum-menu-checkmark-icon-color-focus: var(--system-menu-checkmark-icon-color-focus); + --spectrum-menu-drillin-icon-color-default: var(--system-menu-drillin-icon-color-default); + --spectrum-menu-drillin-icon-color-hover: var(--system-menu-drillin-icon-color-hover); + --spectrum-menu-drillin-icon-color-down: var(--system-menu-drillin-icon-color-down); + --spectrum-menu-drillin-icon-color-focus: var(--system-menu-drillin-icon-color-focus); + --spectrum-menu-item-value-color-default: var(--system-menu-item-value-color-default); + --spectrum-menu-item-value-color-hover: var(--system-menu-item-value-color-hover); + --spectrum-menu-item-value-color-down: var(--system-menu-item-value-color-down); + --spectrum-menu-item-value-color-focus: var(--system-menu-item-value-color-focus); + --spectrum-menu-checkmark-display-hidden: var(--system-menu-checkmark-display-hidden); + --spectrum-menu-checkmark-display-shown: var(--system-menu-checkmark-display-shown); + --spectrum-menu-checkmark-display: var(--system-menu-checkmark-display); + --spectrum-menu-item-collapsible-has-icon-submenu-item-padding-x-start: var(--system-menu-item-collapsible-has-icon-sub-item-padding-x-start); + --spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: var(--system-menu-item-collapsible-no-icon-sub-item-padding-x-start); + --spectrum-menu-item-background-color-default: var(--system-menu-item-background-color-default); + --spectrum-menu-item-background-color-hover: var(--system-menu-item-background-color-hover); + --spectrum-menu-item-background-color-down: var(--system-menu-item-background-color-down); + --spectrum-menu-item-background-color-key-focus: var(--system-menu-item-background-color-key-focus); + --spectrum-menu-item-min-height: var(--system-menu-size-xl-item-min-height); + --spectrum-menu-item-icon-height: var(--system-menu-size-xl-item-icon-height); + --spectrum-menu-item-icon-width: var(--system-menu-size-xl-item-icon-width); + --spectrum-menu-item-label-font-size: var(--system-menu-size-xl-item-label-font-size); + --spectrum-menu-item-label-text-to-visual: var(--system-menu-size-xl-item-label-text-to-visual); + --spectrum-menu-item-label-inline-edge-to-content: var(--system-menu-size-xl-item-label-inline-edge-to-content); + --spectrum-menu-item-top-edge-to-text: var(--system-menu-size-xl-item-top-edge-to-text); + --spectrum-menu-item-bottom-edge-to-text: var(--system-menu-size-xl-item-bottom-edge-to-text); + --spectrum-menu-item-text-to-control: var(--system-menu-size-xl-item-text-to-control); + --spectrum-menu-item-description-font-size: var(--system-menu-size-xl-item-description-font-size); + --spectrum-menu-section-header-font-size: var(--system-menu-size-xl-section-header-font-size); + --spectrum-menu-section-header-min-width: var(--system-menu-size-xl-section-header-min-width); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--system-menu-size-xl-item-selectable-edge-to-text-not-selected); + --spectrum-menu-item-checkmark-height: var(--system-menu-size-xl-item-checkmark-height); + --spectrum-menu-item-checkmark-width: var(--system-menu-size-xl-item-checkmark-width); + --spectrum-menu-item-top-to-checkmark: var(--system-menu-size-xl-item-top-to-checkmark); + --spectrum-menu-back-icon-margin: var(--system-menu-size-xl-back-icon-margin); +} diff --git a/tokens/dist/css/components/bridge/miller.css b/tokens/dist/css/components/bridge/miller.css new file mode 100644 index 00000000000..34041ff26ed --- /dev/null +++ b/tokens/dist/css/components/bridge/miller.css @@ -0,0 +1,19 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-millercolumns-inline-size: var(--system-miller-columns-inline-size); + --spectrum-millercolumns-padding: var(--system-miller-columns-padding); + --spectrum-millercolumns-margin-inline-start: var(--system-miller-columns-margin-inline-start); + --spectrum-millercolumns-margin-inline-end: var(--system-miller-columns-margin-inline-end); +} diff --git a/tokens/dist/css/components/bridge/modal.css b/tokens/dist/css/components/bridge/modal.css new file mode 100644 index 00000000000..a389ba45a1d --- /dev/null +++ b/tokens/dist/css/components/bridge/modal.css @@ -0,0 +1,25 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-modal-confirm-exit-animation-delay: var(--system-modal-confirm-exit-animation-delay); + --spectrum-modal-fullscreen-margin: var(--system-modal-fullscreen-margin); + --spectrum-modal-max-height: var(--system-modal-max-height); + --spectrum-modal-max-width: var(--system-modal-max-width); + --spectrum-modal-background-color: var(--system-modal-background-color); + --spectrum-modal-confirm-border-radius: var(--system-modal-confirm-border-radius); + --spectrum-modal-confirm-exit-animation-duration: var(--system-modal-confirm-exit-animation-duration); + --spectrum-modal-confirm-entry-animation-duration: var(--system-modal-confirm-entry-animation-duration); + --spectrum-modal-confirm-entry-animation-delay: var(--system-modal-confirm-entry-animation-delay); + --spectrum-modal-transition-animation-duration: var(--system-modal-transition-animation-duration); +} diff --git a/tokens/dist/css/components/bridge/opacitycheckerboard.css b/tokens/dist/css/components/bridge/opacitycheckerboard.css new file mode 100644 index 00000000000..fb043b02938 --- /dev/null +++ b/tokens/dist/css/components/bridge/opacitycheckerboard.css @@ -0,0 +1,19 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-opacity-checkerboard-dark: var(--system-opacity-checkerboard-dark); + --spectrum-opacity-checkerboard-light: var(--system-opacity-checkerboard-light); + --spectrum-opacity-checkerboard-size: var(--system-opacity-checkerboard-size); + --spectrum-opacity-checkerboard-position: var(--system-opacity-checkerboard-position); +} diff --git a/tokens/dist/css/components/bridge/pagination.css b/tokens/dist/css/components/bridge/pagination.css new file mode 100644 index 00000000000..98b73d229a8 --- /dev/null +++ b/tokens/dist/css/components/bridge/pagination.css @@ -0,0 +1,20 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-pagination-counter-margin-inline-start: var(--system-pagination-counter-margin-inline-start); + --spectrum-pagination-page-button-inline-spacing: var(--system-pagination-page-button-inline-spacing); + --spectrum-pagination-counter-color: var(--system-pagination-counter-color); + --spectrum-pagination-counter-font-size: var(--system-pagination-counter-font-size); + --spectrum-pagination-counter-line-height: var(--system-pagination-counter-line-height); +} diff --git a/tokens/dist/css/components/bridge/picker.css b/tokens/dist/css/components/bridge/picker.css new file mode 100644 index 00000000000..eee0d4ba66a --- /dev/null +++ b/tokens/dist/css/components/bridge/picker.css @@ -0,0 +1,76 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-picker-background-color-default: var(--system-picker-background-color-default); + --spectrum-picker-background-color-default-open: var(--system-picker-background-color-default-open); + --spectrum-picker-background-color-active: var(--system-picker-background-color-active); + --spectrum-picker-background-color-hover: var(--system-picker-background-color-hover); + --spectrum-picker-background-color-hover-open: var(--system-picker-background-color-hover-open); + --spectrum-picker-background-color-key-focus: var(--system-picker-background-color-key-focus); + --spectrum-picker-border-color-default: var(--system-picker-border-color-default); + --spectrum-picker-border-color-default-open: var(--system-picker-border-color-default-open); + --spectrum-picker-border-color-hover: var(--system-picker-border-color-hover); + --spectrum-picker-border-color-hover-open: var(--system-picker-border-color-hover-open); + --spectrum-picker-border-color-active: var(--system-picker-border-color-active); + --spectrum-picker-border-color-key-focus: var(--system-picker-border-color-key-focus); + --spectrum-picker-border-width: var(--system-picker-border-width); + --spectrum-picker-font-size: var(--system-picker-size-xl-font-size); + --spectrum-picker-font-weight: var(--system-picker-font-weight); + --spectrum-picker-placeholder-font-style: var(--system-picker-placeholder-font-style); + --spectrum-picker-line-height: var(--system-picker-line-height); + --spectrum-picker-block-size: var(--system-picker-size-xl-block-size); + --spectrum-picker-inline-size: var(--system-picker-inline-size); + --spectrum-picker-border-radius: var(--system-picker-border-radius); + --spectrum-picker-spacing-top-to-text: var(--system-picker-size-xl-spacing-top-to-text); + --spectrum-picker-spacing-bottom-to-text: var(--system-picker-size-xl-spacing-bottom-to-text); + --spectrum-picker-spacing-edge-to-text: var(--system-picker-size-xl-spacing-edge-to-text); + --spectrum-picker-spacing-edge-to-text-quiet: var(--system-picker-spacing-edge-to-text-quiet); + --spectrum-picker-spacing-label-to-picker: var(--system-picker-spacing-label-to); + --spectrum-picker-spacing-text-to-icon: var(--system-picker-size-xl-spacing-text-to-icon); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--system-picker-size-xl-spacing-text-to-icon-inline-end); + --spectrum-picker-spacing-icon-to-disclosure-icon: var(--system-picker-size-xl-spacing-icon-to-disclosure-icon); + --spectrum-picker-spacing-label-to-picker-quiet: var(--system-picker-size-xl-spacing-label-to-quiet); + --spectrum-picker-spacing-top-to-alert-icon: var(--system-picker-size-xl-spacing-top-to-alert-icon); + --spectrum-picker-spacing-top-to-progress-circle: var(--system-picker-size-xl-spacing-top-to-progress-circle); + --spectrum-picker-spacing-top-to-disclosure-icon: var(--system-picker-size-xl-spacing-top-to-disclosure-icon); + --spectrum-picker-spacing-edge-to-disclosure-icon: var(--system-picker-size-xl-spacing-edge-to-disclosure-icon); + --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var(--system-picker-spacing-edge-to-disclosure-icon-quiet); + --spectrum-picker-animation-duration: var(--system-picker-animation-duration); + --spectrum-picker-font-color-default: var(--system-picker-font-color-default); + --spectrum-picker-font-color-default-open: var(--system-picker-font-color-default-open); + --spectrum-picker-font-color-hover: var(--system-picker-font-color-hover); + --spectrum-picker-font-color-hover-open: var(--system-picker-font-color-hover-open); + --spectrum-picker-font-color-active: var(--system-picker-font-color-active); + --spectrum-picker-font-color-key-focus: var(--system-picker-font-color-key-focus); + --spectrum-picker-icon-color-default: var(--system-picker-icon-color-default); + --spectrum-picker-icon-color-default-open: var(--system-picker-icon-color-default-open); + --spectrum-picker-icon-color-hover: var(--system-picker-icon-color-hover); + --spectrum-picker-icon-color-hover-open: var(--system-picker-icon-color-hover-open); + --spectrum-picker-icon-color-active: var(--system-picker-icon-color-active); + --spectrum-picker-icon-color-key-focus: var(--system-picker-icon-color-key-focus); + --spectrum-picker-border-color-error-default: var(--system-picker-border-color-error-default); + --spectrum-picker-border-color-error-default-open: var(--system-picker-border-color-error-default-open); + --spectrum-picker-border-color-error-hover: var(--system-picker-border-color-error-hover); + --spectrum-picker-border-color-error-hover-open: var(--system-picker-border-color-error-hover-open); + --spectrum-picker-border-color-error-active: var(--system-picker-border-color-error-active); + --spectrum-picker-border-color-error-key-focus: var(--system-picker-border-color-error-key-focus); + --spectrum-picker-icon-color-error: var(--system-picker-icon-color-error); + --spectrum-picker-background-color-disabled: var(--system-picker-background-color-disabled); + --spectrum-picker-font-color-disabled: var(--system-picker-font-color-disabled); + --spectrum-picker-icon-color-disabled: var(--system-picker-icon-color-disabled); + --spectrum-picker-focus-indicator-gap: var(--system-picker-focus-indicator-gap); + --spectrum-picker-focus-indicator-thickness: var(--system-picker-focus-indicator-thickness); + --spectrum-picker-focus-indicator-color: var(--system-picker-focus-indicator-color); + --spectrum-picker-spacing-picker-to-popover: var(--system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover); +} diff --git a/tokens/dist/css/components/bridge/pickerbutton.css b/tokens/dist/css/components/bridge/pickerbutton.css new file mode 100644 index 00000000000..86b3b25be77 --- /dev/null +++ b/tokens/dist/css/components/bridge/pickerbutton.css @@ -0,0 +1,54 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-picker-button-background-color: var(--system-picker-button-background-color); + --spectrum-picker-button-background-color-hover: var(--system-picker-button-background-color-hover); + --spectrum-picker-button-background-color-down: var(--system-picker-button-background-color-down); + --spectrum-picker-button-background-color-key-focus: var(--system-picker-button-background-color-key-focus); + --spectrum-picker-button-border-color: var(--system-picker-button-border-color); + --spectrum-picker-button-border-radius: var(--system-picker-button-border-radius); + --spectrum-picker-button-border-radius-rounded-sided: var(--system-picker-button-border-radius-rounded-sided); + --spectrum-picker-button-border-radius-sided: var(--system-picker-button-border-radius-sided); + --spectrum-picker-button-border-width: var(--system-picker-button-border-width); + --spectrum-picker-button-height: var(--system-picker-button-size-xl-height); + --spectrum-picker-button-width: var(--system-picker-button-size-xl-width); + --spectrum-picker-button-gap: var(--system-picker-button-gap); + --spectrum-picker-button-padding: var(--system-picker-button-padding); + --spectrum-picker-button-label-padding: var(--system-picker-button-size-xl-label-padding); + --spectrum-picker-button-fill-padding: var(--system-picker-button-size-xl-fill-padding); + --spectrum-picker-button-border-radius-rounded: var(--system-picker-button-border-radius-rounded); + --spectrum-picker-button-icon-color: var(--system-picker-button-icon-color); + --spectrum-picker-button-icon-color-hover: var(--system-picker-button-icon-color-hover); + --spectrum-picker-button-icon-color-down: var(--system-picker-button-icon-color-down); + --spectrum-picker-button-icon-color-key-focus: var(--system-picker-button-icon-color-key-focus); + --spectrum-picker-button-font-color: var(--system-picker-button-font-color); + --spectrum-picker-button-font-color-hover: var(--system-picker-button-font-color-hover); + --spectrum-picker-button-font-color-down: var(--system-picker-button-font-color-down); + --spectrum-picker-button-font-color-key-focus: var(--system-picker-button-font-color-key-focus); + --spectrum-picker-button-font-family: var(--system-picker-button-font-family); + --spectrum-picker-button-font-style: var(--system-picker-button-font-style); + --spectrum-picker-button-font-weight: var(--system-picker-button-font-weight); + --spectrum-picker-button-font-size: var(--system-picker-button-size-xl-font-size); + --spectrum-picker-button-background-animation-duration: var(--system-picker-button-background-animation-duration); + --spectrum-picker-button-background-color-disabled: var(--system-picker-button-background-color-disabled); + --spectrum-picker-button-background-color-hover-disabled: var(--system-picker-button-background-color-hover-disabled); + --spectrum-picker-button-background-color-down-disabled: var(--system-picker-button-background-color-down-disabled); + --spectrum-picker-button-border-color-disabled: var(--system-picker-button-border-color-disabled); + --spectrum-picker-button-font-color-disabled: var(--system-picker-button-font-color-disabled); + --spectrum-picker-button-font-color-hover-disabled: var(--system-picker-button-font-color-hover-disabled); + --spectrum-picker-button-font-color-down-disabled: var(--system-picker-button-font-color-down-disabled); + --spectrum-picker-button-icon-color-disabled: var(--system-picker-button-icon-color-disabled); + --spectrum-picker-button-icon-color-hover-disabled: var(--system-picker-button-icon-color-hover-disabled); + --spectrum-picker-button-icon-color-down-disabled: var(--system-picker-button-icon-color-down-disabled); +} diff --git a/tokens/dist/css/components/bridge/popover.css b/tokens/dist/css/components/bridge/popover.css new file mode 100644 index 00000000000..68f32f8f20a --- /dev/null +++ b/tokens/dist/css/components/bridge/popover.css @@ -0,0 +1,29 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-popover-border-width: var(--system-popover-border-width); + --spectrum-popover-animation-distance: var(--system-popover-animation-distance); + --spectrum-popover-background-color: var(--system-popover-background-color); + --spectrum-popover-border-color: var(--system-popover-border-color); + --spectrum-popover-content-area-spacing-vertical: var(--system-popover-content-area-spacing-vertical); + --spectrum-popover-shadow-horizontal: var(--system-popover-shadow-horizontal); + --spectrum-popover-shadow-vertical: var(--system-popover-shadow-vertical); + --spectrum-popover-shadow-blur: var(--system-popover-shadow-blur); + --spectrum-popover-shadow-color: var(--system-popover-shadow-color); + --spectrum-popover-corner-radius: var(--system-popover-corner-radius); + --spectrum-popover-pointer-width: var(--system-popover-pointer-width); + --spectrum-popover-pointer-height: var(--system-popover-pointer-height); + --spectrum-popover-pointer-edge-offset: var(--system-popover-pointer-edge-offset); + --spectrum-popover-pointer-edge-spacing: var(--system-popover-pointer-edge-spacing); +} diff --git a/tokens/dist/css/components/bridge/progressbar.css b/tokens/dist/css/components/bridge/progressbar.css new file mode 100644 index 00000000000..d9ebe8a1c74 --- /dev/null +++ b/tokens/dist/css/components/bridge/progressbar.css @@ -0,0 +1,45 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--system-progress-bar-animation-ease-in-out-indeterminate); + --spectrum-progressbar-animation-duration-indeterminate: var(--system-progress-bar-animation-duration-indeterminate); + --spectrum-progressbar-corner-radius: var(--system-progress-bar-corner-radius); + --spectrum-progressbar-fill-size-indeterminate: var(--system-progress-bar-fill-size-indeterminate); + --spectrum-progressbar-size-2400: var(--system-progress-bar-size-2400); + --spectrum-progressbar-size-2500: var(--system-progress-bar-size-2500); + --spectrum-progressbar-size-2800: var(--system-progress-bar-size-2800); + --spectrum-progressbar-font-size: var(--system-meter-size-l-progressbar-font-size); + --spectrum-progressbar-line-height-cjk: var(--system-progress-bar-line-height-cjk); + --spectrum-progressbar-min-size: var(--system-progress-bar-min-size); + --spectrum-progressbar-max-size: var(--system-progress-bar-max-size); + --spectrum-progressbar-thickness: var(--system-meter-size-l-progressbar-thickness); + --spectrum-progressbar-line-height: var(--system-progress-bar-line-height); + --spectrum-progressbar-spacing-label-to-progressbar: var(--system-progress-bar-spacing-label-to); + --spectrum-progressbar-spacing-top-to-text: var(--system-meter-size-l-progressbar-spacing-top-to-text); + --spectrum-progressbar-spacing-label-to-text: var(--system-progress-bar-spacing-label-to-text); + --spectrum-progressbar-text-color: var(--system-progress-bar-text-color); + --spectrum-progressbar-track-color: var(--system-progress-bar-track-color); + --spectrum-progressbar-fill-color: var(--system-progress-bar-fill-color); + --spectrum-progressbar-fill-color-positive: var(--system-progress-bar-fill-color-positive); + --spectrum-progressbar-fill-color-notice: var(--system-progress-bar-fill-color-notice); + --spectrum-progressbar-fill-color-negative: var(--system-progress-bar-fill-color-negative); + --spectrum-progressbar-label-and-value-white: var(--system-progress-bar-label-and-value-white); + --spectrum-progressbar-track-color-white: var(--system-progress-bar-track-color-white); + --spectrum-progressbar-fill-color-white: var(--system-progress-bar-fill-color-white); + --spectrum-progressbar-size-default: var(--system-meter-size-l-progressbar-size-default); + --spectrum-meter-min-width: var(--system-meter-min-width); + --spectrum-meter-max-width: var(--system-meter-max-width); + --spectrum-meter-inline-size: var(--system-meter-inline-size); + --spectrum-meter-top-to-text: var(--system-meter-top-to-text); +} diff --git a/tokens/dist/css/components/bridge/progresscircle.css b/tokens/dist/css/components/bridge/progresscircle.css new file mode 100644 index 00000000000..1b89a2af272 --- /dev/null +++ b/tokens/dist/css/components/bridge/progresscircle.css @@ -0,0 +1,22 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-progress-circle-track-border-color: var(--system-progress-circle-track-border-color); + --spectrum-progress-circle-fill-border-color: var(--system-progress-circle-fill-border-color); + --spectrum-progress-circle-track-border-color-over-background: var(--system-progress-circle-track-border-color-over-background); + --spectrum-progress-circle-fill-border-color-over-background: var(--system-progress-circle-fill-border-color-over-background); + --spectrum-progress-circle-size: var(--system-progress-circle-large-size); + --spectrum-progress-circle-thickness: var(--system-progress-circle-large-thickness); + --spectrum-progress-circle-track-border-style: var(--system-progress-circle-track-border-style); +} diff --git a/tokens/dist/css/components/bridge/radio.css b/tokens/dist/css/components/bridge/radio.css new file mode 100644 index 00000000000..1520f59d93d --- /dev/null +++ b/tokens/dist/css/components/bridge/radio.css @@ -0,0 +1,48 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-radio-button-border-color-default: var(--system-radio-button-border-color-default); + --spectrum-radio-button-border-color-hover: var(--system-radio-button-border-color-hover); + --spectrum-radio-button-border-color-down: var(--system-radio-button-border-color-down); + --spectrum-radio-button-border-color-focus: var(--system-radio-button-border-color-focus); + --spectrum-radio-neutral-content-color: var(--system-radio-neutral-content-color); + --spectrum-radio-neutral-content-color-hover: var(--system-radio-neutral-content-color-hover); + --spectrum-radio-neutral-content-color-down: var(--system-radio-neutral-content-color-down); + --spectrum-radio-neutral-content-color-focus: var(--system-radio-neutral-content-color-focus); + --spectrum-radio-focus-indicator-thickness: var(--system-radio-focus-indicator-thickness); + --spectrum-radio-focus-indicator-gap: var(--system-radio-focus-indicator-gap); + --spectrum-radio-focus-indicator-color: var(--system-radio-focus-indicator-color); + --spectrum-radio-disabled-content-color: var(--system-radio-disabled-content-color); + --spectrum-radio-disabled-border-color: var(--system-radio-disabled-border-color); + --spectrum-radio-emphasized-accent-color: var(--system-radio-emphasized-accent-color); + --spectrum-radio-emphasized-accent-color-hover: var(--system-radio-emphasized-accent-color-hover); + --spectrum-radio-emphasized-accent-color-down: var(--system-radio-emphasized-accent-color-down); + --spectrum-radio-emphasized-accent-color-focus: var(--system-radio-emphasized-accent-color-focus); + --spectrum-radio-border-width: var(--system-radio-border-width); + --spectrum-radio-button-background-color: var(--system-radio-button-background-color); + --spectrum-radio-button-checked-border-color-default: var(--system-radio-emphasized-button-checked-border-color-default); + --spectrum-radio-button-checked-border-color-hover: var(--system-radio-emphasized-button-checked-border-color-hover); + --spectrum-radio-button-checked-border-color-down: var(--system-radio-emphasized-button-checked-border-color-down); + --spectrum-radio-button-checked-border-color-focus: var(--system-radio-emphasized-button-checked-border-color-focus); + --spectrum-radio-text-to-control: var(--system-radio-size-xl-text-to-control); + --spectrum-radio-label-top-to-text: var(--system-radio-size-xl-label-top-to-text); + --spectrum-radio-label-bottom-to-text: var(--system-radio-size-xl-label-bottom-to-text); + --spectrum-radio-font-size: var(--system-radio-size-xl-font-size); + --spectrum-radio-line-height: var(--system-radio-line-height); + --spectrum-radio-animation-duration: var(--system-radio-animation-duration); + --spectrum-radio-height: var(--system-radio-size-xl-height); + --spectrum-radio-button-control-size: var(--system-radio-size-xl-button-control-size); + --spectrum-radio-button-top-to-control: var(--system-radio-size-xl-button-top-to-control); + --spectrum-radio-line-height-cjk: var(--system-radio-lang-ko-line-height-cjk); +} diff --git a/tokens/dist/css/components/bridge/rating.css b/tokens/dist/css/components/bridge/rating.css new file mode 100644 index 00000000000..488d535c0dc --- /dev/null +++ b/tokens/dist/css/components/bridge/rating.css @@ -0,0 +1,34 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-rating-icon-color-default: var(--system-rating-icon-color-default); + --spectrum-rating-icon-color-hover: var(--system-rating-icon-color-hover); + --spectrum-rating-icon-color-down: var(--system-rating-icon-color-down); + --spectrum-rating-icon-color-key-focus: var(--system-rating-icon-color-key-focus); + --spectrum-rating-icon-height: var(--system-rating-icon-height); + --spectrum-rating-icon-width: var(--system-rating-icon-width); + --spectrum-rating-border-radius: var(--system-rating-border-radius); + --spectrum-rating-focus-indicator-thickness: var(--system-rating-focus-indicator-thickness); + --spectrum-rating-focus-indicator-color: var(--system-rating-focus-indicator-color); + --spectrum-rating-focus-indicator-gap: var(--system-rating-focus-indicator-gap); + --spectrum-rating-icon-spacing-vertical-top: var(--system-rating-icon-spacing-vertical-top); + --spectrum-rating-indicator-border-radius: var(--system-rating-indicator-border-radius); + --spectrum-rating-indicator-height: var(--system-rating-indicator-height); + --spectrum-rating-emphasized-icon-color-default: var(--system-rating-emphasized-icon-color-default); + --spectrum-rating-emphasized-icon-color-hover: var(--system-rating-emphasized-icon-color-hover); + --spectrum-rating-emphasized-icon-color-down: var(--system-rating-emphasized-icon-color-down); + --spectrum-rating-emphasized-icon-color-key-focus: var(--system-rating-emphasized-icon-color-key-focus); + --spectrum-rating-icon-color-disabled: var(--system-rating-icon-color-disabled); + --spectrum-rating-icon-count: var(--system-rating-icon-count); +} diff --git a/tokens/dist/css/components/bridge/search.css b/tokens/dist/css/components/bridge/search.css new file mode 100644 index 00000000000..c7a5251c428 --- /dev/null +++ b/tokens/dist/css/components/bridge/search.css @@ -0,0 +1,47 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-search-border-color-default: var(--system-search-border-color-default); + --spectrum-search-border-color-hover: var(--system-search-border-color-hover); + --spectrum-search-border-color-focus: var(--system-search-border-color-focus); + --spectrum-search-border-color-focus-hover: var(--system-search-border-color-focus-hover); + --spectrum-search-border-color-key-focus: var(--system-search-border-color-key-focus); + --spectrum-search-inline-size: var(--system-search-inline-size); + --spectrum-search-min-inline-multiplier: var(--system-search-min-inline-multiplier); + --spectrum-search-to-help-text: var(--system-search-to-help-text); + --spectrum-search-top-to-text: var(--system-search-top-to-text); + --spectrum-search-bottom-to-text: var(--system-search-bottom-to-text); + --spectrum-search-focus-indicator-thickness: var(--system-search-focus-indicator-thickness); + --spectrum-search-focus-indicator-gap: var(--system-search-focus-indicator-gap); + --spectrum-search-focus-indicator-color: var(--system-search-focus-indicator-color); + --spectrum-search-font-family: var(--system-search-font-family); + --spectrum-search-font-weight: var(--system-search-font-weight); + --spectrum-search-font-style: var(--system-search-font-style); + --spectrum-search-line-height: var(--system-search-line-height); + --spectrum-search-color-default: var(--system-search-color-default); + --spectrum-search-color-hover: var(--system-search-color-hover); + --spectrum-search-color-focus: var(--system-search-color-focus); + --spectrum-search-color-focus-hover: var(--system-search-color-focus-hover); + --spectrum-search-color-key-focus: var(--system-search-color-key-focus); + --spectrum-search-border-width: var(--system-search-border-width); + --spectrum-search-background-color: var(--system-search-quiet-background-color); + --spectrum-search-color-disabled: var(--system-search-color-disabled); + --spectrum-search-background-color-disabled: var(--system-search-quiet-background-color-disabled); + --spectrum-search-border-color-disabled: var(--system-search-quiet-border-color-disabled); + --spectrum-search-border-radius: var(--system-search-quiet-border-radius); + --spectrum-search-edge-to-visual: var(--system-search-quiet-edge-to-visual); + --spectrum-search-block-size: var(--system-search-size-xl-block-size); + --spectrum-search-icon-size: var(--system-search-size-xl-icon-size); + --spectrum-search-text-to-icon: var(--system-search-size-xl-text-to-icon); +} diff --git a/tokens/dist/css/components/bridge/sidenav.css b/tokens/dist/css/components/bridge/sidenav.css new file mode 100644 index 00000000000..7da91b8ceff --- /dev/null +++ b/tokens/dist/css/components/bridge/sidenav.css @@ -0,0 +1,70 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-sidenav-focus-ring-size: var(--system-side-nav-focus-ring-size); + --spectrum-sidenav-focus-ring-gap: var(--system-side-nav-focus-ring-gap); + --spectrum-sidenav-focus-ring-color: var(--system-side-nav-focus-ring-color); + --spectrum-sidenav-min-height: var(--system-side-nav-min-height); + --spectrum-sidenav-width: var(--system-side-nav-width); + --spectrum-sidenav-min-width: var(--system-side-nav-min-width); + --spectrum-sidenav-max-width: var(--system-side-nav-max-width); + --spectrum-sidenav-border-radius: var(--system-side-nav-border-radius); + --spectrum-sidenav-icon-size: var(--system-side-nav-icon-size); + --spectrum-sidenav-icon-spacing: var(--system-side-nav-icon-spacing); + --spectrum-sidenav-inline-padding: var(--system-side-nav-inline-padding); + --spectrum-sidenav-gap: var(--system-side-nav-gap); + --spectrum-sidenav-top-to-icon: var(--system-side-nav-top-to-icon); + --spectrum-sidenav-top-to-label: var(--system-side-nav-top-to-label); + --spectrum-sidenav-bottom-to-label: var(--system-side-nav-bottom-to-label); + --spectrum-sidenav-start-to-content-second-level: var(--system-side-nav-start-to-content-second-level); + --spectrum-sidenav-start-to-content-third-level: var(--system-side-nav-start-to-content-third-level); + --spectrum-sidenav-start-to-content-with-icon-second-level: var(--system-side-nav-start-to-content-with-icon-second-level); + --spectrum-sidenav-start-to-content-with-icon-third-level: var(--system-side-nav-start-to-content-with-icon-third-level); + --spectrum-sidenav-heading-top-margin: var(--system-side-nav-heading-top-margin); + --spectrum-sidenav-heading-bottom-margin: var(--system-side-nav-heading-bottom-margin); + --spectrum-sidenav-background-disabled: var(--system-side-nav-background-disabled); + --spectrum-sidenav-background-default: var(--system-side-nav-background-default); + --spectrum-sidenav-background-hover: var(--system-side-nav-background-hover); + --spectrum-sidenav-item-background-down: var(--system-side-nav-item-background-down); + --spectrum-sidenav-background-key-focus: var(--system-side-nav-background-key-focus); + --spectrum-sidenav-item-background-default-selected: var(--system-side-nav-item-background-default-selected); + --spectrum-sidenav-background-hover-selected: var(--system-side-nav-background-hover-selected); + --spectrum-sidenav-item-background-down-selected: var(--system-side-nav-item-background-down-selected); + --spectrum-sidenav-background-key-focus-selected: var(--system-side-nav-background-key-focus-selected); + --spectrum-sidenav-header-color: var(--system-side-nav-header-color); + --spectrum-sidenav-content-disabled-color: var(--system-side-nav-content-disabled-color); + --spectrum-sidenav-content-color-default: var(--system-side-nav-content-color-default); + --spectrum-sidenav-content-color-hover: var(--system-side-nav-content-color-hover); + --spectrum-sidenav-content-color-down: var(--system-side-nav-content-color-down); + --spectrum-sidenav-content-color-key-focus: var(--system-side-nav-content-color-key-focus); + --spectrum-sidenav-content-color-default-selected: var(--system-side-nav-content-color-default-selected); + --spectrum-sidenav-content-color-hover-selected: var(--system-side-nav-content-color-hover-selected); + --spectrum-sidenav-content-color-down-selected: var(--system-side-nav-content-color-down-selected); + --spectrum-sidenav-content-color-key-focus-selected: var(--system-side-nav-content-color-key-focus-selected); + --spectrum-sidenav-text-font-family: var(--system-side-nav-text-font-family); + --spectrum-sidenav-text-font-weight: var(--system-side-nav-text-font-weight); + --spectrum-sidenav-text-font-style: var(--system-side-nav-text-font-style); + --spectrum-sidenav-text-font-size: var(--system-side-nav-text-font-size); + --spectrum-sidenav-text-line-height: var(--system-side-nav-lang-ko-text-line-height); + --spectrum-sidenav-top-level-font-family: var(--system-side-nav-top-level-font-family); + --spectrum-sidenav-top-level-font-weight: var(--system-side-nav-top-level-font-weight); + --spectrum-sidenav-top-level-font-style: var(--system-side-nav-top-level-font-style); + --spectrum-sidenav-top-level-font-size: var(--system-side-nav-top-level-font-size); + --spectrum-sidenav-top-level-line-height: var(--system-side-nav-lang-ko-top-level-line-height); + --spectrum-sidenav-header-font-family: var(--system-side-nav-header-font-family); + --spectrum-sidenav-header-font-weight: var(--system-side-nav-header-font-weight); + --spectrum-sidenav-header-font-style: var(--system-side-nav-header-font-style); + --spectrum-sidenav-header-font-size: var(--system-side-nav-header-font-size); + --spectrum-sidenav-header-line-height: var(--system-side-nav-lang-ko-header-line-height); +} diff --git a/tokens/dist/css/components/bridge/slider.css b/tokens/dist/css/components/bridge/slider.css new file mode 100644 index 00000000000..0a65a631702 --- /dev/null +++ b/tokens/dist/css/components/bridge/slider.css @@ -0,0 +1,64 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-slider-track-color: var(--system-slider-track-color); + --spectrum-slider-track-fill-color: var(--system-slider-track-fill-color); + --spectrum-slider-ramp-track-color: var(--system-slider-ramp-track-color); + --spectrum-slider-ramp-track-color-disabled: var(--system-slider-ramp-track-color-disabled); + --spectrum-slider-handle-background-color: var(--system-slider-handle-background-color); + --spectrum-slider-handle-background-color-disabled: var(--system-slider-handle-background-color-disabled); + --spectrum-slider-ramp-handle-background-color: var(--system-slider-ramp-handle-background-color); + --spectrum-slider-ticks-handle-background-color: var(--system-slider-ticks-handle-background-color); + --spectrum-slider-handle-border-color: var(--system-slider-handle-border-color); + --spectrum-slider-handle-disabled-background-color: var(--system-slider-handle-disabled-background-color); + --spectrum-slider-tick-mark-color: var(--system-slider-tick-mark-color); + --spectrum-slider-handle-border-color-hover: var(--system-slider-handle-border-color-hover); + --spectrum-slider-handle-border-color-down: var(--system-slider-handle-border-color-down); + --spectrum-slider-handle-border-color-key-focus: var(--system-slider-handle-border-color-key-focus); + --spectrum-slider-handle-focus-ring-color-key-focus: var(--system-slider-handle-focus-ring-color-key-focus); + --spectrum-slider-value-inline-size: var(--system-slider-size-xl-value-inline-size); + --spectrum-slider-cjk-line-height: var(--system-slider-cjk-line-height); + --spectrum-slider-min-size: var(--system-slider-min-size); + --spectrum-slider-track-corner-radius: var(--system-slider-track-corner-radius); + --spectrum-slider-label-margin-start: var(--system-slider-label-margin-start); + --spectrum-slider-handle-border-width: var(--system-slider-handle-border-width); + --spectrum-slider-handle-margin-left: var(--system-slider-handle-margin-left); + --spectrum-slider-controls-margin: var(--system-slider-controls-margin); + --spectrum-slider-track-margin-offset: var(--system-slider-track-margin-offset); + --spectrum-slider-track-middle-handleoffset: var(--system-slider-track-middle-handleoffset); + --spectrum-slider-input-top-size: var(--system-slider-input-top-size); + --spectrum-slider-track-fill-thickness: var(--system-slider-track-fill-thickness); + --spectrum-slider-tick-mark-width: var(--system-slider-tick-mark-width); + --spectrum-slider-tick-mark-border-radius: var(--system-slider-tick-mark-border-radius); + --spectrum-slider-tick-handle-background-color: var(--system-slider-tick-handle-background-color); + --spectrum-slider-track-color-disabled: var(--system-slider-track-color-disabled); + --spectrum-slider-track-fill-color-disabled: var(--system-slider-track-fill-color-disabled); + --spectrum-slider-handle-border-color-disabled: var(--system-slider-handle-border-color-disabled); + --spectrum-slider-label-text-color: var(--system-slider-label-text-color); + --spectrum-slider-tick-label-color: var(--system-slider-tick-label-color); + --spectrum-slider-label-text-color-disabled: var(--system-slider-label-text-color-disabled); + --spectrum-slider-tick-mark-color-disabled: var(--system-slider-tick-mark-color-disabled); + --spectrum-slider-ramp-handle-border-color-active: var(--system-slider-ramp-handle-border-color-active); + --spectrum-slider-input-left: var(--system-slider-input-left); + --spectrum-slider-track-handleoffset: var(--system-slider-track-handleoffset); + --spectrum-slider-range-track-reset: var(--system-slider-range-track-reset); + --spectrum-slider-font-size: var(--system-slider-size-xl-font-size); + --spectrum-slider-handle-size: var(--system-slider-size-xl-handle-size); + --spectrum-slider-control-height: var(--system-slider-size-xl-control-height); + --spectrum-slider-handle-border-radius: var(--system-slider-size-xl-handle-border-radius); + --spectrum-slider-handle-border-width-down: var(--system-slider-size-xl-handle-border-width-down); + --spectrum-slider-label-top-to-text: var(--system-slider-size-xl-label-top-to-text); + --spectrum-slider-control-to-field-label: var(--system-slider-size-xl-control-to-field-label); + --spectrum-slider-value-side-padding-inline: var(--system-slider-size-xl-value-side-padding-inline); +} diff --git a/tokens/dist/css/components/bridge/splitview.css b/tokens/dist/css/components/bridge/splitview.css new file mode 100644 index 00000000000..995fd5f593d --- /dev/null +++ b/tokens/dist/css/components/bridge/splitview.css @@ -0,0 +1,31 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-splitview-vertical-width: var(--system-split-view-vertical-width); + --spectrum-splitview-vertical-gripper-width: var(--system-split-view-vertical-gripper-width); + --spectrum-splitview-vertical-gripper-outer-width: var(--system-split-view-vertical-gripper-outer-width); + --spectrum-splitview-vertical-gripper-reset: var(--system-split-view-vertical-gripper-reset); + --spectrum-splitview-background-color: var(--system-split-view-background-color); + --spectrum-splitview-content-color: var(--system-split-view-content-color); + --spectrum-splitview-handle-background-color: var(--system-split-view-handle-background-color); + --spectrum-splitview-handle-background-color-hover: var(--system-split-view-handle-background-color-hover); + --spectrum-splitview-handle-background-color-down: var(--system-split-view-handle-background-color-down); + --spectrum-splitview-handle-background-color-focus: var(--system-split-view-handle-background-color-focus); + --spectrum-splitview-handle-width: var(--system-split-view-handle-width); + --spectrum-splitview-gripper-border-radius: var(--system-split-view-gripper-border-radius); + --spectrum-splitview-gripper-width: var(--system-split-view-gripper-width); + --spectrum-splitview-gripper-height: var(--system-split-view-gripper-height); + --spectrum-splitview-gripper-border-width-horizontal: var(--system-split-view-gripper-border-width-horizontal); + --spectrum-splitview-gripper-border-width-vertical: var(--system-split-view-gripper-border-width-vertical); +} diff --git a/tokens/dist/css/components/bridge/statuslight.css b/tokens/dist/css/components/bridge/statuslight.css new file mode 100644 index 00000000000..59c1b4c27b4 --- /dev/null +++ b/tokens/dist/css/components/bridge/statuslight.css @@ -0,0 +1,49 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-statuslight-corner-radius: var(--system-status-light-corner-radius); + --spectrum-statuslight-font-weight: var(--system-status-light-font-weight); + --spectrum-statuslight-border-width: var(--system-status-light-border-width); + --spectrum-statuslight-height: var(--system-status-light-size-xl-height); + --spectrum-statuslight-dot-size: var(--system-status-light-size-xl-dot-size); + --spectrum-statuslight-line-height: var(--system-status-light-line-height); + --spectrum-statuslight-line-height-cjk: var(--system-status-light-line-height-cjk); + --spectrum-statuslight-font-size: var(--system-status-light-size-xl-font-size); + --spectrum-statuslight-spacing-dot-to-label: var(--system-status-light-size-xl-spacing-dot-to-label); + --spectrum-statuslight-spacing-top-to-dot: var(--system-status-light-size-xl-spacing-top-to-dot); + --spectrum-statuslight-spacing-top-to-label: var(--system-status-light-size-xl-spacing-top-to-label); + --spectrum-statuslight-spacing-bottom-to-label: var(--system-status-light-size-xl-spacing-bottom-to-label); + --spectrum-statuslight-content-color-default: var(--system-status-light-content-color-default); + --spectrum-statuslight-subdued-content-color-default: var(--system-status-light-subdued-content-color-default); + --spectrum-statuslight-semantic-neutral-color: var(--system-status-light-semantic-neutral-color); + --spectrum-statuslight-semantic-accent-color: var(--system-status-light-semantic-accent-color); + --spectrum-statuslight-semantic-negative-color: var(--system-status-light-semantic-negative-color); + --spectrum-statuslight-semantic-info-color: var(--system-status-light-semantic-info-color); + --spectrum-statuslight-semantic-notice-color: var(--system-status-light-semantic-notice-color); + --spectrum-statuslight-semantic-positive-color: var(--system-status-light-semantic-positive-color); + --spectrum-statuslight-nonsemantic-gray-color: var(--system-status-light-nonsemantic-gray-color); + --spectrum-statuslight-nonsemantic-red-color: var(--system-status-light-nonsemantic-red-color); + --spectrum-statuslight-nonsemantic-orange-color: var(--system-status-light-nonsemantic-orange-color); + --spectrum-statuslight-nonsemantic-yellow-color: var(--system-status-light-nonsemantic-yellow-color); + --spectrum-statuslight-nonsemantic-chartreuse-color: var(--system-status-light-nonsemantic-chartreuse-color); + --spectrum-statuslight-nonsemantic-celery-color: var(--system-status-light-nonsemantic-celery-color); + --spectrum-statuslight-nonsemantic-green-color: var(--system-status-light-nonsemantic-green-color); + --spectrum-statuslight-nonsemantic-seafoam-color: var(--system-status-light-nonsemantic-seafoam-color); + --spectrum-statuslight-nonsemantic-cyan-color: var(--system-status-light-nonsemantic-cyan-color); + --spectrum-statuslight-nonsemantic-blue-color: var(--system-status-light-nonsemantic-blue-color); + --spectrum-statuslight-nonsemantic-indigo-color: var(--system-status-light-nonsemantic-indigo-color); + --spectrum-statuslight-nonsemantic-purple-color: var(--system-status-light-nonsemantic-purple-color); + --spectrum-statuslight-nonsemantic-fuchsia-color: var(--system-status-light-nonsemantic-fuchsia-color); + --spectrum-statuslight-nonsemantic-magenta-color: var(--system-status-light-nonsemantic-magenta-color); +} diff --git a/tokens/dist/css/components/bridge/steplist.css b/tokens/dist/css/components/bridge/steplist.css new file mode 100644 index 00000000000..7fba3d88da8 --- /dev/null +++ b/tokens/dist/css/components/bridge/steplist.css @@ -0,0 +1,32 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-steplist-step-width: var(--system-steplist-step-width); + --spectrum-steplist-marker-diameter: var(--system-steplist-marker-diameter); + --spectrum-steplist-marker-hitArea: var(--system-steplist-marker-hit-area); + --spectrum-steplist-segment-height: var(--system-steplist-segment-height); + --spectrum-steplist-topPadding: var(--system-steplist-top-padding); + --spectrum-steplist-small-topPadding: var(--system-steplist-small-top-padding); + --spectrum-steplist-sidePadding: var(--system-steplist-side-padding); + --spectrum-steplist-label-labelOffset: var(--system-steplist-label-label-offset); + --spectrum-steplist-label-text-size: var(--system-steplist-label-text-size); + --spectrum-steplist-current-label-text-color: var(--system-steplist-current-label-text-color); + --spectrum-steplist-current-marker-color: var(--system-steplist-current-marker-color); + --spectrum-steplist-complete-label-text-color: var(--system-steplist-complete-label-text-color); + --spectrum-steplist-incomplete-label-color: var(--system-steplist-incomplete-label-color); + --spectrum-steplist-complete-marker-background-color: var(--system-steplist-complete-marker-background-color); + --spectrum-steplist-incomplete-marker-border-color: var(--system-steplist-incomplete-marker-border-color); + --spectrum-steplist-incomplete-segment-border-block-end-color: var(--system-steplist-incomplete-segment-border-block-end-color); + --spectrum-steplist-complete-segment-border-block-end-color: var(--system-steplist-complete-segment-border-block-end-color); +} diff --git a/tokens/dist/css/components/bridge/stepper.css b/tokens/dist/css/components/bridge/stepper.css new file mode 100644 index 00000000000..99eb7c70b29 --- /dev/null +++ b/tokens/dist/css/components/bridge/stepper.css @@ -0,0 +1,50 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-stepper-border-width: var(--system-stepper-border-width); + --spectrum-stepper-border-color: var(--system-stepper-border-color); + --spectrum-stepper-border-color-hover: var(--system-stepper-border-color-hover); + --spectrum-stepper-border-color-focus: var(--system-stepper-border-color-focus); + --spectrum-stepper-border-color-focus-hover: var(--system-stepper-border-color-focus-hover); + --spectrum-stepper-border-color-keyboard-focus: var(--system-stepper-border-color-keyboard-focus); + --spectrum-stepper-border-radius: var(--system-stepper-border-radius); + --spectrum-stepper-min-width-multiplier: var(--system-stepper-min-width-multiplier); + --spectrum-stepper-animation-duration: var(--system-stepper-animation-duration); + --spectrum-stepper-buttons-border-style: var(--system-stepper-buttons-border-style); + --spectrum-stepper-buttons-border-width: var(--system-stepper-buttons-border-width); + --spectrum-stepper-buttons-border-color: var(--system-stepper-buttons-border-color); + --spectrum-stepper-buttons-background-color: var(--system-stepper-buttons-background-color); + --spectrum-stepper-buttons-border-color-hover: var(--system-stepper-buttons-border-color-hover); + --spectrum-stepper-buttons-border-color-focus: var(--system-stepper-buttons-border-color-focus); + --spectrum-stepper-buttons-border-color-keyboard-focus: var(--system-stepper-buttons-border-color-keyboard-focus); + --spectrum-stepper-button-padding: var(--system-stepper-button-padding); + --spectrum-stepper-button-border-radius-reset: var(--system-stepper-button-border-radius-reset); + --spectrum-stepper-button-border-width: var(--system-stepper-button-border-width); + --spectrum-stepper-button-background-color-focus: var(--system-stepper-button-background-color-focus); + --spectrum-stepper-button-background-color-keyboard-focus: var(--system-stepper-button-background-color-keyboard-focus); + --spectrum-stepper-border-color-invalid: var(--system-stepper-border-color-invalid); + --spectrum-stepper-border-color-hover-invalid: var(--system-stepper-border-color-hover-invalid); + --spectrum-stepper-border-color-focus-invalid: var(--system-stepper-border-color-focus-invalid); + --spectrum-stepper-border-color-focus-hover-invalid: var(--system-stepper-border-color-focus-hover-invalid); + --spectrum-stepper-border-color-keyboard-focus-invalid: var(--system-stepper-border-color-keyboard-focus-invalid); + --spectrum-stepper-focus-indicator-width: var(--system-stepper-focus-indicator-width); + --spectrum-stepper-focus-indicator-gap: var(--system-stepper-focus-indicator-gap); + --spectrum-stepper-focus-indicator-color: var(--system-stepper-focus-indicator-color); + --spectrum-stepper-button-border-color-quiet: var(--system-stepper-button-border-color-quiet); + --spectrum-stepper-button-border-color-disabled: var(--system-stepper-button-border-color-disabled); + --spectrum-stepper-button-border-width-disabled: var(--system-stepper-button-border-width-disabled); + --spectrum-stepper-buttons-background-color-disabled: var(--system-stepper-buttons-background-color-disabled); + --spectrum-stepper-button-width: var(--system-stepper-size-xl-button-width); + --spectrum-stepper-height: var(--system-stepper-size-xl-height); +} diff --git a/tokens/dist/css/components/bridge/swatch.css b/tokens/dist/css/components/bridge/swatch.css new file mode 100644 index 00000000000..0e509818ff5 --- /dev/null +++ b/tokens/dist/css/components/bridge/swatch.css @@ -0,0 +1,35 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-swatch-border-radius: var(--system-swatch-border-radius); + --spectrum-swatch-focus-indicator-border-radius: var(--system-swatch-focus-indicator-border-radius); + --spectrum-swatch-border-thickness: var(--system-swatch-border-thickness); + --spectrum-swatch-border-thickness-selected: var(--system-swatch-border-thickness-selected); + --spectrum-swatch-focus-indicator-thickness: var(--system-swatch-focus-indicator-thickness); + --spectrum-swatch-focus-indicator-gap: var(--system-swatch-focus-indicator-gap); + --spectrum-swatch-border-color-opacity: var(--system-swatch-border-color-opacity); + --spectrum-swatch-border-color-light-opacity: var(--system-swatch-border-color-light-opacity); + --spectrum-swatch-border-color: var(--system-swatch-border-color); + --spectrum-swatch-icon-border-color: var(--system-swatch-icon-border-color); + --spectrum-swatch-border-color-light: var(--system-swatch-border-color-light); + --spectrum-swatch-border-color-selected: var(--system-swatch-border-color-selected); + --spectrum-swatch-inner-border-color-selected: var(--system-swatch-inner-border-color-selected); + --spectrum-swatch-disabled-icon-color: var(--system-swatch-disabled-icon-color); + --spectrum-swatch-dash-icon-color: var(--system-swatch-dash-icon-color); + --spectrum-swatch-slash-icon-color: var(--system-swatch-slash-icon-color); + --spectrum-swatch-focus-indicator-color: var(--system-swatch-focus-indicator-color); + --spectrum-swatch-size: var(--system-swatch-size-l-size); + --spectrum-swatch-disabled-icon-size: var(--system-swatch-size-l-disabled-icon-size); + --spectrum-swatch-slash-thickness: var(--system-swatch-size-l-slash-thickness); +} diff --git a/tokens/dist/css/components/bridge/swatchgroup.css b/tokens/dist/css/components/bridge/swatchgroup.css new file mode 100644 index 00000000000..19ab740f6e8 --- /dev/null +++ b/tokens/dist/css/components/bridge/swatchgroup.css @@ -0,0 +1,18 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-swatchgroup-spacing-compact: var(--system-swatch-group-spacing-compact); + --spectrum-swatchgroup-spacing-regular: var(--system-swatch-group-spacing-regular); + --spectrum-swatchgroup-spacing-spacious: var(--system-swatch-group-spacing-spacious); +} diff --git a/tokens/dist/css/components/bridge/switch.css b/tokens/dist/css/components/bridge/switch.css new file mode 100644 index 00000000000..ee33c66759b --- /dev/null +++ b/tokens/dist/css/components/bridge/switch.css @@ -0,0 +1,46 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-switch-handle-border-color-default: var(--system-switch-handle-border-color-default); + --spectrum-switch-handle-border-color-hover: var(--system-switch-handle-border-color-hover); + --spectrum-switch-handle-border-color-down: var(--system-switch-handle-border-color-down); + --spectrum-switch-handle-border-color-focus: var(--system-switch-handle-border-color-focus); + --spectrum-switch-handle-border-color-selected-default: var(--system-switch-emphasized-handle-border-color-selected-default); + --spectrum-switch-handle-border-color-selected-hover: var(--system-switch-emphasized-handle-border-color-selected-hover); + --spectrum-switch-handle-border-color-selected-down: var(--system-switch-emphasized-handle-border-color-selected-down); + --spectrum-switch-handle-border-color-selected-focus: var(--system-switch-emphasized-handle-border-color-selected-focus); + --spectrum-switch-label-color-default: var(--system-switch-disabled-label-color-default); + --spectrum-switch-label-color-hover: var(--system-switch-label-color-hover); + --spectrum-switch-label-color-down: var(--system-switch-label-color-down); + --spectrum-switch-label-color-focus: var(--system-switch-label-color-focus); + --spectrum-switch-label-color-disabled: var(--system-switch-label-color-disabled); + --spectrum-switch-background-color: var(--system-switch-background-color); + --spectrum-switch-background-color-disabled: var(--system-switch-background-color-disabled); + --spectrum-switch-background-color-selected-disabled: var(--system-switch-background-color-selected-disabled); + --spectrum-switch-background-color-selected-default: var(--system-switch-emphasized-background-color-selected-default); + --spectrum-switch-background-color-selected-hover: var(--system-switch-emphasized-background-color-selected-hover); + --spectrum-switch-background-color-selected-down: var(--system-switch-emphasized-background-color-selected-down); + --spectrum-switch-background-color-selected-focus: var(--system-switch-emphasized-background-color-selected-focus); + --spectrum-switch-focus-indicator-thickness: var(--system-switch-focus-indicator-thickness); + --spectrum-switch-focus-indicator-color: var(--system-switch-focus-indicator-color); + --spectrum-switch-handle-background-color: var(--system-switch-handle-background-color); + --spectrum-switch-handle-border-color-disabled: var(--system-switch-handle-border-color-disabled); + --spectrum-switch-min-height: var(--system-switch-size-xl-min-height); + --spectrum-switch-control-width: var(--system-switch-size-xl-control-width); + --spectrum-switch-control-height: var(--system-switch-size-xl-control-height); + --spectrum-switch-control-label-spacing: var(--system-switch-size-xl-control-label-spacing); + --spectrum-switch-spacing-top-to-control: var(--system-switch-size-xl-spacing-top-to-control); + --spectrum-switch-spacing-top-to-label: var(--system-switch-size-xl-spacing-top-to-label); + --spectrum-switch-font-size: var(--system-switch-size-xl-font-size); +} diff --git a/tokens/dist/css/components/bridge/table.css b/tokens/dist/css/components/bridge/table.css new file mode 100644 index 00000000000..1c420b68c05 --- /dev/null +++ b/tokens/dist/css/components/bridge/table.css @@ -0,0 +1,76 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-table-header-top-to-text: var(--system-table-size-xl-header-top-to-text); + --spectrum-table-header-bottom-to-text: var(--system-table-size-xl-header-bottom-to-text); + --spectrum-table-min-header-height: var(--system-table-size-xl-min-header-height); + --spectrum-table-min-row-height: var(--system-table-spacious-size-xl-min-row-height); + --spectrum-table-row-top-to-text: var(--system-table-spacious-size-xl-row-top-to-text); + --spectrum-table-row-bottom-to-text: var(--system-table-spacious-size-xl-row-bottom-to-text); + --spectrum-table-cell-inline-space: var(--system-table-cell-inline-space); + --spectrum-table-border-radius: var(--system-table-quiet-border-radius); + --spectrum-table-border-width: var(--system-table-border-width); + --spectrum-table-outer-border-inline-width: var(--system-table-quiet-outer-border-inline-width); + --spectrum-table-icon-to-text: var(--system-table-size-xl-icon-to-text); + --spectrum-table-default-vertical-align: var(--system-table-default-vertical-align); + --spectrum-table-header-vertical-align: var(--system-table-header-vertical-align); + --spectrum-table-header-font-weight: var(--system-table-header-font-weight); + --spectrum-table-row-font-family: var(--system-table-row-font-family); + --spectrum-table-row-font-weight: var(--system-table-row-font-weight); + --spectrum-table-row-font-style: var(--system-table-row-font-style); + --spectrum-table-row-font-size: var(--system-table-size-xl-row-font-size); + --spectrum-table-row-line-height: var(--system-table-row-line-height); + --spectrum-table-border-color: var(--system-table-border-color); + --spectrum-table-divider-color: var(--system-table-divider-color); + --spectrum-table-header-background-color: var(--system-table-quiet-header-background-color); + --spectrum-table-header-text-color: var(--system-table-header-text-color); + --spectrum-table-row-background-color: var(--system-table-quiet-row-background-color); + --spectrum-table-row-text-color: var(--system-table-row-text-color); + --spectrum-table-selected-row-background-color: var(--system-table-selected-row-background-color); + --spectrum-table-selected-row-background-color-non-emphasized: var(--system-table-selected-row-background-color-non-emphasized); + --spectrum-table-row-background-color-hover: var(--system-table-row-background-color-hover); + --spectrum-table-row-active-color: var(--system-table-row-active-color); + --spectrum-table-selected-row-background-color-focus: var(--system-table-selected-row-background-color-focus); + --spectrum-table-selected-row-background-color-non-emphasized-focus: var(--system-table-selected-row-background-color-non-emphasized-focus); + --spectrum-table-icon-color-default: var(--system-table-icon-color-default); + --spectrum-table-icon-color-hover: var(--system-table-icon-color-hover); + --spectrum-table-icon-color-active: var(--system-table-icon-color-active); + --spectrum-table-icon-color-focus: var(--system-table-icon-color-focus); + --spectrum-table-icon-color-focus-hover: var(--system-table-icon-color-focus-hover); + --spectrum-table-icon-color-key-focus: var(--system-table-icon-color-key-focus); + --spectrum-table-header-checkbox-block-spacing: var(--system-table-size-xl-header-checkbox-block-spacing); + --spectrum-table-row-checkbox-block-spacing: var(--system-table-spacious-size-xl-row-checkbox-block-spacing); + --spectrum-table-focus-indicator-thickness: var(--system-table-focus-indicator-thickness); + --spectrum-table-focus-indicator-color: var(--system-table-focus-indicator-color); + --spectrum-table-drop-zone-background-color: var(--system-table-drop-zone-background-color); + --spectrum-table-drop-zone-outline-color: var(--system-table-drop-zone-outline-color); + --spectrum-table-transition-duration: var(--system-table-transition-duration); + --spectrum-table-summary-row-font-weight: var(--system-table-summary-row-font-weight); + --spectrum-table-summary-row-background-color: var(--system-table-summary-row-background-color); + --spectrum-table-section-header-min-height: var(--system-table-size-xl-section-header-min-height); + --spectrum-table-section-header-block-start-spacing: var(--system-table-size-xl-section-header-block-start-spacing); + --spectrum-table-section-header-block-end-spacing: var(--system-table-size-xl-section-header-block-end-spacing); + --spectrum-table-section-header-font-weight: var(--system-table-section-header-font-weight); + --spectrum-table-section-header-background-color: var(--system-table-section-header-background-color); + --spectrum-table-collapsible-tier-indent: var(--system-table-collapsible-tier-indent); + --spectrum-table-collapsible-disclosure-inline-spacing: var(--system-table-collapsible-disclosure-inline-spacing); + --spectrum-table-disclosure-icon-size: var(--system-table-size-xl-disclosure-icon-size); + --spectrum-table-collapsible-icon-animation-duration: var(--system-table-collapsible-icon-animation-duration); + --spectrum-table-thumbnail-to-text: var(--system-table-size-xl-thumbnail-to-text); + --spectrum-table-thumbnail-block-spacing: var(--system-table-spacious-size-xl-thumbnail-block-spacing); + --spectrum-table-thumbnail-size: var(--system-table-spacious-size-xl-thumbnail-size); + --spectrum-table-cell-background-color: var(--system-table-cell-background-color); + --spectrum-table-selected-cell-background-color: var(--system-table-emphasized-selected-cell-background-color); + --spectrum-table-selected-cell-background-color-focus: var(--system-table-emphasized-selected-cell-background-color-focus); +} diff --git a/tokens/dist/css/components/bridge/tabs.css b/tokens/dist/css/components/bridge/tabs.css new file mode 100644 index 00000000000..6136c3e50a5 --- /dev/null +++ b/tokens/dist/css/components/bridge/tabs.css @@ -0,0 +1,45 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-tabs-font-weight: var(--system-tabs-font-weight); + --spectrum-tabs-item-height: var(--system-tabs-size-xl-item-height); + --spectrum-tabs-item-horizontal-spacing: var(--system-tabs-size-xl-item-horizontal-spacing); + --spectrum-tabs-item-vertical-spacing: var(--system-tabs-size-xl-item-vertical-spacing); + --spectrum-tabs-start-to-edge: var(--system-tabs-size-xl-start-to-edge); + --spectrum-tabs-top-to-text: var(--system-tabs-size-xl-top-to-text); + --spectrum-tabs-bottom-to-text: var(--system-tabs-size-xl-bottom-to-text); + --spectrum-tabs-icon-size: var(--system-tabs-size-xl-icon-size); + --spectrum-tabs-icon-to-text: var(--system-tabs-size-xl-icon-to-text); + --spectrum-tabs-top-to-icon: var(--system-tabs-size-xl-top-to-icon); + --spectrum-tabs-color: var(--system-tabs-color); + --spectrum-tabs-color-selected: var(--system-tabs-emphasized-color-selected); + --spectrum-tabs-color-hover: var(--system-tabs-emphasized-color-hover); + --spectrum-tabs-color-key-focus: var(--system-tabs-emphasized-color-key-focus); + --spectrum-tabs-color-disabled: var(--system-tabs-color-disabled); + --spectrum-tabs-font-family: var(--system-tabs-font-family); + --spectrum-tabs-font-style: var(--system-tabs-font-style); + --spectrum-tabs-font-size: var(--system-tabs-size-xl-font-size); + --spectrum-tabs-line-height: var(--system-tabs-line-height); + --spectrum-tabs-focus-indicator-width: var(--system-tabs-focus-indicator-width); + --spectrum-tabs-focus-indicator-border-radius: var(--system-tabs-focus-indicator-border-radius); + --spectrum-tabs-focus-indicator-gap: var(--system-tabs-size-xl-focus-indicator-gap); + --spectrum-tabs-focus-indicator-color: var(--system-tabs-focus-indicator-color); + --spectrum-tabs-selection-indicator-color: var(--system-tabs-emphasized-selection-indicator-color); + --spectrum-tabs-list-background-direction: var(--system-tabs-list-background-direction); + --spectrum-tabs-divider-background-color: var(--system-tabs-divider-background-color); + --spectrum-tabs-divider-size: var(--system-tabs-divider-size); + --spectrum-tabs-divider-border-radius: var(--system-tabs-divider-border-radius); + --spectrum-tabs-animation-duration: var(--system-tabs-animation-duration); + --spectrum-tabs-animation-ease: var(--system-tabs-animation-ease); +} diff --git a/tokens/dist/css/components/bridge/tag.css b/tokens/dist/css/components/bridge/tag.css new file mode 100644 index 00000000000..c5f6fe42ee9 --- /dev/null +++ b/tokens/dist/css/components/bridge/tag.css @@ -0,0 +1,101 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-tag-border-color: var(--system-tag-border-color); + --spectrum-tag-border-color-hover: var(--system-tag-border-color-hover); + --spectrum-tag-border-color-active: var(--system-tag-border-color-active); + --spectrum-tag-border-color-focus: var(--system-tag-border-color-focus); + --spectrum-tag-size-small-corner-radius: var(--system-tag-size-small-corner-radius); + --spectrum-tag-size-medium-corner-radius: var(--system-tag-size-medium-corner-radius); + --spectrum-tag-size-large-corner-radius: var(--system-tag-size-large-corner-radius); + --spectrum-tag-background-color: var(--system-tag-background-color); + --spectrum-tag-background-color-hover: var(--system-tag-background-color-hover); + --spectrum-tag-background-color-active: var(--system-tag-background-color-active); + --spectrum-tag-background-color-focus: var(--system-tag-background-color-focus); + --spectrum-tag-content-color: var(--system-tag-content-color); + --spectrum-tag-content-color-hover: var(--system-tag-content-color-hover); + --spectrum-tag-content-color-active: var(--system-tag-content-color-active); + --spectrum-tag-content-color-focus: var(--system-tag-content-color-focus); + --spectrum-tag-border-color-selected: var(--system-tag-border-color-selected); + --spectrum-tag-border-color-selected-hover: var(--system-tag-border-color-selected-hover); + --spectrum-tag-border-color-selected-active: var(--system-tag-border-color-selected-active); + --spectrum-tag-border-color-selected-focus: var(--system-tag-border-color-selected-focus); + --spectrum-tag-border-color-disabled: var(--system-tag-border-color-disabled); + --spectrum-tag-background-color-disabled: var(--system-tag-background-color-disabled); + --spectrum-tag-size-small-spacing-inline-start: var(--system-tag-size-small-spacing-inline-start); + --spectrum-tag-size-small-label-spacing-inline-end: var(--system-tag-size-small-label-spacing-inline-end); + --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--system-tag-size-small-clear-button-spacing-inline-end); + --spectrum-tag-size-medium-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); + --spectrum-tag-size-medium-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); + --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); + --spectrum-tag-size-large-spacing-inline-start: var(--system-tag-size-large-spacing-inline-start); + --spectrum-tag-size-large-label-spacing-inline-end: var(--system-tag-size-large-label-spacing-inline-end); + --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--system-tag-size-large-clear-button-spacing-inline-end); + --spectrum-avatar-opacity-disabled: var(--system-tag-avatar-opacity-disabled); + --spectrum-tag-animation-duration: var(--system-tag-animation-duration); + --spectrum-tag-border-width: var(--system-tag-border-width); + --spectrum-tag-focus-ring-thickness: var(--system-tag-focus-ring-thickness); + --spectrum-tag-focus-ring-gap: var(--system-tag-focus-ring-gap); + --spectrum-tag-focus-ring-color: var(--system-tag-focus-ring-color); + --spectrum-tag-label-line-height: var(--system-tag-label-line-height); + --spectrum-tag-label-font-weight: var(--system-tag-label-font-weight); + --spectrum-tag-content-color-selected: var(--system-tag-content-color-selected); + --spectrum-tag-background-color-selected: var(--system-tag-background-color-selected); + --spectrum-tag-background-color-selected-hover: var(--system-tag-background-color-selected-hover); + --spectrum-tag-background-color-selected-active: var(--system-tag-background-color-selected-active); + --spectrum-tag-background-color-selected-focus: var(--system-tag-background-color-selected-focus); + --spectrum-tag-border-color-invalid: var(--system-tag-border-color-invalid); + --spectrum-tag-border-color-invalid-hover: var(--system-tag-border-color-invalid-hover); + --spectrum-tag-border-color-invalid-active: var(--system-tag-border-color-invalid-active); + --spectrum-tag-border-color-invalid-focus: var(--system-tag-border-color-invalid-focus); + --spectrum-tag-content-color-invalid: var(--system-tag-content-color-invalid); + --spectrum-tag-content-color-invalid-hover: var(--system-tag-content-color-invalid-hover); + --spectrum-tag-content-color-invalid-active: var(--system-tag-content-color-invalid-active); + --spectrum-tag-content-color-invalid-focus: var(--system-tag-content-color-invalid-focus); + --spectrum-tag-border-color-invalid-selected: var(--system-tag-border-color-invalid-selected); + --spectrum-tag-border-color-invalid-selected-hover: var(--system-tag-border-color-invalid-selected-hover); + --spectrum-tag-border-color-invalid-selected-focus: var(--system-tag-border-color-invalid-selected-focus); + --spectrum-tag-border-color-invalid-selected-active: var(--system-tag-border-color-invalid-selected-active); + --spectrum-tag-background-color-invalid-selected: var(--system-tag-background-color-invalid-selected); + --spectrum-tag-background-color-invalid-selected-hover: var(--system-tag-background-color-invalid-selected-hover); + --spectrum-tag-background-color-invalid-selected-active: var(--system-tag-background-color-invalid-selected-active); + --spectrum-tag-background-color-invalid-selected-focus: var(--system-tag-background-color-invalid-selected-focus); + --spectrum-tag-content-color-invalid-selected: var(--system-tag-content-color-invalid-selected); + --spectrum-tag-border-color-emphasized: var(--system-tag-border-color-emphasized); + --spectrum-tag-border-color-emphasized-hover: var(--system-tag-border-color-emphasized-hover); + --spectrum-tag-border-color-emphasized-active: var(--system-tag-border-color-emphasized-active); + --spectrum-tag-border-color-emphasized-focus: var(--system-tag-border-color-emphasized-focus); + --spectrum-tag-background-color-emphasized: var(--system-tag-background-color-emphasized); + --spectrum-tag-background-color-emphasized-hover: var(--system-tag-background-color-emphasized-hover); + --spectrum-tag-background-color-emphasized-active: var(--system-tag-background-color-emphasized-active); + --spectrum-tag-background-color-emphasized-focus: var(--system-tag-background-color-emphasized-focus); + --spectrum-tag-content-color-emphasized: var(--system-tag-content-color-emphasized); + --spectrum-tag-content-color-disabled: var(--system-tag-content-color-disabled); + --spectrum-tag-icon-spacing-inline-end: var(--system-tag-size-l-icon-spacing-inline-end); + --spectrum-tag-icon-size: var(--system-tag-size-l-icon-size); + --spectrum-tag-icon-spacing-block-start: var(--system-tag-size-l-icon-spacing-block-start); + --spectrum-tag-icon-spacing-block-end: var(--system-tag-size-l-icon-spacing-block-end); + --spectrum-tag-avatar-spacing-block-start: var(--system-tag-size-l-avatar-spacing-block-start); + --spectrum-tag-avatar-spacing-block-end: var(--system-tag-size-l-avatar-spacing-block-end); + --spectrum-tag-avatar-spacing-inline-end: var(--system-tag-size-l-avatar-spacing-inline-end); + --spectrum-tag-label-spacing-block: var(--system-tag-size-l-label-spacing-block); + --spectrum-tag-clear-button-spacing-inline-start: var(--system-tag-size-l-clear-button-spacing-inline-start); + --spectrum-tag-height: var(--system-tag-size-l-height); + --spectrum-tag-font-size: var(--system-tag-size-l-font-size); + --spectrum-tag-clear-button-spacing-block: var(--system-tag-size-l-clear-button-spacing-block); + --spectrum-tag-corner-radius: var(--system-tag-size-l-corner-radius); + --spectrum-tag-spacing-inline-start: var(--system-tag-size-l-spacing-inline-start); + --spectrum-tag-label-spacing-inline-end: var(--system-tag-size-l-label-spacing-inline-end); + --spectrum-tag-clear-button-spacing-inline-end: var(--system-tag-size-l-clear-button-spacing-inline-end); +} diff --git a/tokens/dist/css/components/bridge/taggroup.css b/tokens/dist/css/components/bridge/taggroup.css new file mode 100644 index 00000000000..2d720801181 --- /dev/null +++ b/tokens/dist/css/components/bridge/taggroup.css @@ -0,0 +1,17 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-tag-group-item-margin-block: var(--system-tag-group-item-margin-block); + --spectrum-tag-group-item-margin-inline: var(--system-tag-group-item-margin-inline); +} diff --git a/tokens/dist/css/components/bridge/textfield.css b/tokens/dist/css/components/bridge/textfield.css new file mode 100644 index 00000000000..7a5d82b4406 --- /dev/null +++ b/tokens/dist/css/components/bridge/textfield.css @@ -0,0 +1,81 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-textfield-border-color: var(--system-textfield-border-color); + --spectrum-textfield-border-color-hover: var(--system-textfield-border-color-hover); + --spectrum-textfield-border-color-focus: var(--system-textfield-border-color-focus); + --spectrum-textfield-border-color-focus-hover: var(--system-textfield-border-color-focus-hover); + --spectrum-textfield-border-color-keyboard-focus: var(--system-textfield-border-color-keyboard-focus); + --spectrum-textfield-border-width: var(--system-textfield-border-width); + --spectrum-texfield-animation-duration: var(--system-textfield-texfield-animation-duration); + --spectrum-textfield-width: var(--system-textfield-width); + --spectrum-textfield-min-width: var(--system-textfield-min-width); + --spectrum-textfield-corner-radius: var(--system-textfield-corner-radius); + --spectrum-textfield-spacing-inline-quiet: var(--system-textfield-spacing-inline-quiet); + --spectrum-textfield-spacing-block-start: var(--system-textfield-spacing-block-start); + --spectrum-textfield-spacing-block-end: var(--system-textfield-spacing-block-end); + --spectrum-textfield-spacing-block-quiet: var(--system-textfield-spacing-block-quiet); + --spectrum-textfield-label-spacing-block: var(--system-textfield-label-spacing-block); + --spectrum-textfield-helptext-spacing-block: var(--system-textfield-helptext-spacing-block); + --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var(--system-textfield-icon-spacing-inline-end-quiet-invalid); + --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var(--system-textfield-icon-spacing-inline-end-quiet-valid); + --spectrum-textfield-font-family: var(--system-textfield-font-family); + --spectrum-textfield-font-weight: var(--system-textfield-font-weight); + --spectrum-textfield-character-count-font-family: var(--system-textfield-character-count-font-family); + --spectrum-textfield-character-count-font-weight: var(--system-textfield-character-count-font-weight); + --spectrum-textfield-character-count-spacing-inline: var(--system-textfield-character-count-spacing-inline); + --spectrum-textfield-character-count-spacing-inline-side: var(--system-textfield-character-count-spacing-inline-side); + --spectrum-textfield-focus-indicator-width: var(--system-textfield-focus-indicator-width); + --spectrum-textfield-focus-indicator-gap: var(--system-textfield-focus-indicator-gap); + --spectrum-textfield-background-color: var(--system-textfield-background-color); + --spectrum-textfield-text-color-default: var(--system-textfield-text-color-default); + --spectrum-textfield-text-color-hover: var(--system-textfield-text-color-hover); + --spectrum-textfield-text-color-focus: var(--system-textfield-text-color-focus); + --spectrum-textfield-text-color-focus-hover: var(--system-textfield-text-color-focus-hover); + --spectrum-textfield-text-color-keyboard-focus: var(--system-textfield-text-color-keyboard-focus); + --spectrum-textfield-text-color-readonly: var(--system-textfield-text-color-readonly); + --spectrum-textfield-background-color-disabled: var(--system-textfield-background-color-disabled); + --spectrum-textfield-border-color-disabled: var(--system-textfield-border-color-disabled); + --spectrum-textfield-text-color-disabled: var(--system-textfield-text-color-disabled); + --spectrum-textfield-border-color-invalid-default: var(--system-textfield-border-color-invalid-default); + --spectrum-textfield-border-color-invalid-hover: var(--system-textfield-border-color-invalid-hover); + --spectrum-textfield-border-color-invalid-focus: var(--system-textfield-border-color-invalid-focus); + --spectrum-textfield-border-color-invalid-focus-hover: var(--system-textfield-border-color-invalid-focus-hover); + --spectrum-textfield-border-color-invalid-keyboard-focus: var(--system-textfield-border-color-invalid-keyboard-focus); + --spectrum-textfield-icon-color-invalid: var(--system-textfield-icon-color-invalid); + --spectrum-textfield-text-color-invalid: var(--system-textfield-text-color-invalid); + --spectrum-textfield-text-color-valid: var(--system-textfield-text-color-valid); + --spectrum-textfield-icon-color-valid: var(--system-textfield-icon-color-valid); + --spectrum-textfield-focus-indicator-color: var(--system-textfield-focus-indicator-color); + --spectrum-text-area-min-inline-size: var(--system-textfield-text-area-min-inline-size); + --spectrum-text-area-min-block-size: var(--system-textfield-text-area-min-block-size); + --spectrum-textfield-height: var(--system-textfield-size-xl-height); + --spectrum-textfield-label-spacing-block-quiet: var(--system-textfield-size-xl-label-spacing-block-quiet); + --spectrum-textfield-label-spacing-inline-side-label: var(--system-textfield-size-xl-label-spacing-inline-side-label); + --spectrum-textfield-placeholder-font-size: var(--system-textfield-size-xl-placeholder-font-size); + --spectrum-textfield-spacing-inline: var(--system-textfield-size-xl-spacing-inline); + --spectrum-textfield-icon-size-invalid: var(--system-textfield-size-xl-icon-size-invalid); + --spectrum-textfield-icon-size-valid: var(--system-textfield-size-xl-icon-size-valid); + --spectrum-textfield-icon-spacing-inline-end-invalid: var(--system-textfield-size-xl-icon-spacing-inline-end-invalid); + --spectrum-textfield-icon-spacing-inline-end-valid: var(--system-textfield-size-xl-icon-spacing-inline-end-valid); + --spectrum-textfield-icon-spacing-block-invalid: var(--system-textfield-size-xl-icon-spacing-block-invalid); + --spectrum-textfield-icon-spacing-block-valid: var(--system-textfield-size-xl-icon-spacing-block-valid); + --spectrum-textfield-icon-spacing-inline-start-invalid: var(--system-textfield-size-xl-icon-spacing-inline-start-invalid); + --spectrum-textfield-icon-spacing-inline-start-valid: var(--system-textfield-size-xl-icon-spacing-inline-start-valid); + --spectrum-textfield-character-count-font-size: var(--system-textfield-size-xl-character-count-font-size); + --spectrum-textfield-character-count-spacing-block: var(--system-textfield-size-xl-character-count-spacing-block); + --spectrum-textfield-character-count-spacing-block-quiet: var(--system-textfield-size-xl-character-count-spacing-block-quiet); + --spectrum-textfield-character-count-spacing-block-side: var(--system-textfield-size-xl-character-count-spacing-block-side); + --spectrum-text-area-min-block-size-quiet: var(--system-textfield-size-xl-text-area-min-block-size-quiet); +} diff --git a/tokens/dist/css/components/bridge/thumbnail.css b/tokens/dist/css/components/bridge/thumbnail.css new file mode 100644 index 00000000000..2348d45cbb1 --- /dev/null +++ b/tokens/dist/css/components/bridge/thumbnail.css @@ -0,0 +1,29 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-thumbnail-size: var(--system-thumbnail-size-1000-size); + --spectrum-thumbnail-border-radius: var(--system-thumbnail-border-radius); + --spectrum-thumbnail-border-width: var(--system-thumbnail-border-width); + --spectrum-thumbnail-border-color-rgba: var(--system-thumbnail-border-color-rgba); + --spectrum-thumbnail-layer-border-width-inner: var(--system-thumbnail-layer-border-width-inner); + --spectrum-thumbnail-layer-border-color-inner: var(--system-thumbnail-layer-border-color-inner); + --spectrum-thumbnail-layer-border-width-outer: var(--system-thumbnail-layer-border-width-outer); + --spectrum-thumbnail-layer-border-color-outer: var(--system-thumbnail-layer-border-color-outer); + --spectrum-thumbnail-border-width-selected: var(--system-thumbnail-border-width-selected); + --spectrum-thumbnail-border-color-selected: var(--system-thumbnail-border-color-selected); + --spectrum-thumbnail-focus-indicator-thickness: var(--system-thumbnail-focus-indicator-thickness); + --spectrum-thumbnail-focus-indicator-gap: var(--system-thumbnail-focus-indicator-gap); + --spectrum-thumbnail-focus-indicator-color: var(--system-thumbnail-focus-indicator-color); + --spectrum-thumbnail-color-opacity-disabled: var(--system-thumbnail-color-opacity-disabled); +} diff --git a/tokens/dist/css/components/bridge/toast.css b/tokens/dist/css/components/bridge/toast.css new file mode 100644 index 00000000000..729fe9a7c74 --- /dev/null +++ b/tokens/dist/css/components/bridge/toast.css @@ -0,0 +1,41 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-toast-background-color-default: var(--system-toast-background-color-default); + --spectrum-toast-font-weight: var(--system-toast-font-weight); + --spectrum-toast-font-size: var(--system-toast-font-size); + --spectrum-toast-corner-radius: var(--system-toast-corner-radius); + --spectrum-toast-block-size: var(--system-toast-block-size); + --spectrum-toast-max-inline-size: var(--system-toast-max-inline-size); + --spectrum-toast-border-width: var(--system-toast-border-width); + --spectrum-toast-line-height: var(--system-toast-line-height); + --spectrum-toast-line-height-cjk: var(--system-toast-line-height-cjk); + --spectrum-toast-spacing-icon-to-text: var(--system-toast-spacing-icon-to-text); + --spectrum-toast-spacing-start-edge-to-text-and-icon: var(--system-toast-spacing-start-edge-to-text-and-icon); + --spectrum-toast-spacing-text-and-action-button-to-divider: var(--system-toast-spacing-text-and-action-button-to-divider); + --spectrum-toast-spacing-top-edge-to-divider: var(--system-toast-spacing-top-edge-to-divider); + --spectrum-toast-spacing-bottom-edge-to-divider: var(--system-toast-spacing-bottom-edge-to-divider); + --spectrum-toast-spacing-top-edge-to-icon: var(--system-toast-spacing-top-edge-to-icon); + --spectrum-toast-spacing-text-to-action-button-horizontal: var(--system-toast-spacing-text-to-action-button-horizontal); + --spectrum-toast-spacing-close-button: var(--system-toast-spacing-close-button); + --spectrum-toast-spacing-block-start: var(--system-toast-spacing-block-start); + --spectrum-toast-spacing-block-end: var(--system-toast-spacing-block-end); + --spectrum-toast-spacing-top-edge-to-text: var(--system-toast-spacing-top-edge-to-text); + --spectrum-toast-spacing-bottom-edge-to-text: var(--system-toast-spacing-bottom-edge-to-text); + --spectrum-toast-negative-background-color-default: var(--system-toast-negative-background-color-default); + --spectrum-toast-positive-background-color-default: var(--system-toast-positive-background-color-default); + --spectrum-toast-informative-background-color-default: var(--system-toast-informative-background-color-default); + --spectrum-toast-text-and-icon-color: var(--system-toast-text-and-icon-color); + --spectrum-toast-divider-color: var(--system-toast-divider-color); +} diff --git a/tokens/dist/css/components/bridge/tooltip.css b/tokens/dist/css/components/bridge/tooltip.css new file mode 100644 index 00000000000..761094319c1 --- /dev/null +++ b/tokens/dist/css/components/bridge/tooltip.css @@ -0,0 +1,44 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-tooltip-backgound-color-default-neutral: var(--system-tooltip-backgound-color-default-neutral); + --spectrum-tooltip-animation-duration: var(--system-tooltip-animation-duration); + --spectrum-tooltip-margin: var(--system-tooltip-margin); + --spectrum-tooltip-height: var(--system-tooltip-height); + --spectrum-tooltip-max-inline-size: var(--system-tooltip-max-inline-size); + --spectrum-tooltip-border-radius: var(--system-tooltip-border-radius); + --spectrum-tooltip-icon-width: var(--system-tooltip-icon-width); + --spectrum-tooltip-icon-height: var(--system-tooltip-icon-height); + --spectrum-tooltip-font-size: var(--system-tooltip-font-size); + --spectrum-tooltip-line-height: var(--system-tooltip-line-height); + --spectrum-tooltip-cjk-line-height: var(--system-tooltip-cjk-line-height); + --spectrum-tooltip-font-weight: var(--system-tooltip-font-weight); + --spectrum-tooltip-spacing-inline: var(--system-tooltip-spacing-inline); + --spectrum-tooltip-spacing-block-start: var(--system-tooltip-spacing-block-start); + --spectrum-tooltip-spacing-block-end: var(--system-tooltip-spacing-block-end); + --spectrum-tooltip-icon-spacing-inline-start: var(--system-tooltip-icon-spacing-inline-start); + --spectrum-tooltip-icon-spacing-inline-end: var(--system-tooltip-icon-spacing-inline-end); + --spectrum-tooltip-icon-spacing-block-start: var(--system-tooltip-icon-spacing-block-start); + --spectrum-tooltip-background-color-informative: var(--system-tooltip-background-color-informative); + --spectrum-tooltip-background-color-positive: var(--system-tooltip-background-color-positive); + --spectrum-tooltip-background-color-negative: var(--system-tooltip-background-color-negative); + --spectrum-tooltip-content-color: var(--system-tooltip-content-color); + --spectrum-tooltip-tip-inline-size: var(--system-tooltip-tip-inline-size); + --spectrum-tooltip-tip-block-size: var(--system-tooltip-tip-block-size); + --spectrum-tooltip-tip-square-size: var(--system-tooltip-tip-square-size); + --spectrum-tooltip-tip-height-percentage: var(--system-tooltip-tip-height-percentage); + --spectrum-tooltip-tip-antialiasing-inset: var(--system-tooltip-tip-antialiasing-inset); + --spectrum-tooltip-pointer-corner-spacing: var(--system-tooltip-pointer-corner-spacing); + --spectrum-tooltip-background-color-default: var(--system-tooltip-background-color-default); +} diff --git a/tokens/dist/css/components/bridge/tray.css b/tokens/dist/css/components/bridge/tray.css new file mode 100644 index 00000000000..6955ab346b6 --- /dev/null +++ b/tokens/dist/css/components/bridge/tray.css @@ -0,0 +1,23 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-tray-exit-animation-delay: var(--system-tray-exit-animation-delay); + --spectrum-tray-entry-animation-delay: var(--system-tray-entry-animation-delay); + --spectrum-tray-max-inline-size: var(--system-tray-max-inline-size); + --spectrum-tray-spacing-edge-to-tray-safe-zone: var(--system-tray-spacing-edge-to-safe-zone); + --spectrum-tray-entry-animation-duration: var(--system-tray-entry-animation-duration); + --spectrum-tray-exit-animation-duration: var(--system-tray-exit-animation-duration); + --spectrum-tray-corner-radius: var(--system-tray-corner-radius); + --spectrum-tray-background-color: var(--system-tray-background-color); +} diff --git a/tokens/dist/css/components/bridge/treeview.css b/tokens/dist/css/components/bridge/treeview.css new file mode 100644 index 00000000000..0711b546c56 --- /dev/null +++ b/tokens/dist/css/components/bridge/treeview.css @@ -0,0 +1,49 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-treeview-line-height: var(--system-tree-view-line-height); + --spectrum-treeview-margin-block: var(--system-tree-view-margin-block); + --spectrum-treeview-font-size: var(--system-tree-view-size-xl-font-size); + --spectrum-treeview-item-min-block-size: var(--system-tree-view-size-xl-item-min-block-size); + --spectrum-treeview-item-indentation: var(--system-tree-view-size-xl-item-indentation); + --spectrum-treeview-item-padding-inline-start: var(--system-tree-view-size-xl-item-padding-inline-start); + --spectrum-treeview-item-padding-inline-end: var(--system-tree-view-size-xl-item-padding-inline-end); + --spectrum-treeview-section-spacing: var(--system-tree-view-section-spacing); + --spectrum-treeview-heading-font-weight: var(--system-tree-view-heading-font-weight); + --spectrum-treeview-heading-bottom-to-text: var(--system-tree-view-size-xl-heading-bottom-to-text); + --spectrum-treeview-heading-color: var(--system-tree-view-heading-color); + --spectrum-treeview-item-border-size: var(--system-tree-view-item-border-size); + --spectrum-treeview-item-border-size-selected: var(--system-tree-view-item-border-size-selected); + --spectrum-treeview-item-border-radius: var(--system-tree-view-detached-item-border-radius); + --spectrum-treeview-item-border-color-selected: var(--system-tree-view-item-border-color-selected); + --spectrum-treeview-item-border-color-focus: var(--system-tree-view-item-border-color-focus); + --spectrum-treeview-item-background-color-hover: var(--system-tree-view-item-background-color-hover); + --spectrum-treeview-item-background-color-focus: var(--system-tree-view-item-background-color-focus); + --spectrum-treeview-item-border-color-quiet-selected: var(--system-tree-view-item-border-color-quiet-selected); + --spectrum-treeview-item-icon-gap: var(--system-tree-view-item-icon-gap); + --spectrum-treeview-item-icon-color: var(--system-tree-view-item-icon-color); + --spectrum-treeview-item-icon-color-hover: var(--system-tree-view-item-icon-color-hover); + --spectrum-treeview-item-icon-color-focus: var(--system-tree-view-item-icon-color-focus); + --spectrum-treeview-item-icon-color-selected: var(--system-tree-view-item-icon-color-selected); + --spectrum-treeview-item-icon-color-disabled: var(--system-tree-view-item-icon-color-disabled); + --spectrum-treeview-item-text-color: var(--system-tree-view-item-text-color); + --spectrum-treeview-item-text-color-selected: var(--system-tree-view-item-text-color-selected); + --spectrum-treeview-item-text-color-disabled: var(--system-tree-view-item-text-color-disabled); + --spectrum-treeview-item-text-color-focus: var(--system-tree-view-item-text-color-focus); + --spectrum-treeview-item-text-color-hover: var(--system-tree-view-item-text-color-hover); + --spectrum-treeview-indicator-margin-inline-start: var(--system-tree-view-size-xl-indicator-margin-inline-start); + --spectrum-treeview-indicator-padding: var(--system-tree-view-size-xl-indicator-padding); + --spectrum-treeview-item-min-block-size-thumbnail-offset: var(--system-tree-view-size-xl-item-min-block-size-thumbnail-offset); + --spectrum-treeview-indicator-animation-duration: var(--system-tree-view-indicator-animation-duration); +} diff --git a/tokens/dist/css/components/bridge/typography.css b/tokens/dist/css/components/bridge/typography.css new file mode 100644 index 00000000000..52ab03ae342 --- /dev/null +++ b/tokens/dist/css/components/bridge/typography.css @@ -0,0 +1,42 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-font-family-ar: var(--system-font-family-ar); + --spectrum-font-family-he: var(--system-font-family-he); + --spectrum-font-family: var(--system-font-family); + --spectrum-font-style: var(--system-font-style); + --spectrum-font-size: var(--system-font-size); + --spectrum-heading-sans-serif-font-family: var(--system-heading-sans-serif-font-family); + --spectrum-heading-serif-font-family: var(--system-heading-serif-font-family); + --spectrum-heading-cjk-font-family: var(--system-heading-cjk-font-family); + --spectrum-heading-cjk-letter-spacing: var(--system-heading-cjk-letter-spacing); + --spectrum-heading-font-color: var(--system-heading-font-color); + --spectrum-heading-font-size: var(--system-heading-size-xxxl-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xxxl-cjk-font-size); + --spectrum-body-sans-serif-font-family: var(--system-body-sans-serif-font-family); + --spectrum-body-serif-font-family: var(--system-body-serif-font-family); + --spectrum-body-cjk-font-family: var(--system-body-cjk-font-family); + --spectrum-body-cjk-letter-spacing: var(--system-body-cjk-letter-spacing); + --spectrum-body-font-color: var(--system-body-font-color); + --spectrum-body-font-size: var(--system-body-size-xxxl-font-size); + --spectrum-detail-sans-serif-font-family: var(--system-detail-sans-serif-font-family); + --spectrum-detail-serif-font-family: var(--system-detail-serif-font-family); + --spectrum-detail-cjk-font-family: var(--system-detail-cjk-font-family); + --spectrum-detail-font-color: var(--system-detail-font-color); + --spectrum-detail-font-size: var(--system-detail-size-xl-font-size); + --spectrum-code-font-family: var(--system-code-font-family); + --spectrum-code-cjk-letter-spacing: var(--system-code-cjk-letter-spacing); + --spectrum-code-font-color: var(--system-code-font-color); + --spectrum-code-font-size: var(--system-code-size-xl-font-size); +} diff --git a/tokens/dist/css/components/bridge/underlay.css b/tokens/dist/css/components/bridge/underlay.css new file mode 100644 index 00000000000..db74f623c87 --- /dev/null +++ b/tokens/dist/css/components/bridge/underlay.css @@ -0,0 +1,22 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-underlay-background-entry-animation-delay: var(--system-underlay-background-entry-animation-delay); + --spectrum-underlay-background-exit-animation-ease: var(--system-underlay-background-exit-animation-ease); + --spectrum-underlay-background-entry-animation-ease: var(--system-underlay-background-entry-animation-ease); + --spectrum-underlay-background-entry-animation-duration: var(--system-underlay-background-entry-animation-duration); + --spectrum-underlay-background-exit-animation-duration: var(--system-underlay-background-exit-animation-duration); + --spectrum-underlay-background-exit-animation-delay: var(--system-underlay-background-exit-animation-delay); + --spectrum-underlay-background-color: var(--system-underlay-background-color); +} diff --git a/tokens/dist/css/components/bridge/well.css b/tokens/dist/css/components/bridge/well.css new file mode 100644 index 00000000000..d640cef2c57 --- /dev/null +++ b/tokens/dist/css/components/bridge/well.css @@ -0,0 +1,23 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --spectrum-well-border-width: var(--system-well-border-width); + --spectrum-well-border-color: var(--system-well-border-color); + --spectrum-well-border-radius: var(--system-well-border-radius); + --spectrum-well-content-color: var(--system-well-content-color); + --spectrum-well-background-color: var(--system-well-background-color); + --spectrum-well-padding: var(--system-well-padding); + --spectrum-well-margin-top: var(--system-well-margin-top); + --spectrum-well-minimum-width: var(--system-well-minimum-width); +} diff --git a/tokens/dist/css/components/express/actionbutton.css b/tokens/dist/css/components/express/actionbutton.css new file mode 100644 index 00000000000..985eb16585b --- /dev/null +++ b/tokens/dist/css/components/express/actionbutton.css @@ -0,0 +1,191 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-action-button-animation-duration: var(--spectrum-animation-duration-100); + --system-action-button-border-radius: var(--spectrum-corner-radius-100); + --system-action-button-border-width: var(--spectrum-border-width-100); + --system-action-button-content-color-default: var(--spectrum-neutral-content-color-default); + --system-action-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-action-button-content-color-down: var(--spectrum-neutral-content-color-down); + --system-action-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-action-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-action-button-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-action-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-action-button-background-color-default: var(--spectrum-gray-200); + --system-action-button-background-color-hover: var(--spectrum-gray-300); + --system-action-button-background-color-down: var(--spectrum-gray-400); + --system-action-button-background-color-focus: var(--spectrum-gray-300); + --system-action-button-border-color-default: transparent; + --system-action-button-border-color-hover: transparent; + --system-action-button-border-color-down: transparent; + --system-action-button-border-color-focus: transparent; + --system-action-button-background-color-disabled: var(--spectrum-disabled-background-color); + --system-action-button-border-color-disabled: transparent; + --system-action-button-content-color-disabled: var(--spectrum-disabled-content-color); + --system-action-button-min-width: calc(var(--spectrum-component-edge-to-visual-only-100) * 2 + var(--spectrum-workflow-icon-size-100)); + --system-action-button-height: var(--spectrum-component-height-100); + --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); + --system-action-button-font-size: var(--spectrum-font-size-100); + --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); + --system-action-button-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --system-action-button-quiet-background-color-default: transparent; + --system-action-button-quiet-background-color-hover: var(--spectrum-gray-300); + --system-action-button-quiet-background-color-down: var(--spectrum-gray-400); + --system-action-button-quiet-background-color-focus: var(--spectrum-gray-300); + --system-action-button-quiet-background-color-disabled: transparent; + --system-action-button-quiet-border-color-default: transparent; + --system-action-button-quiet-border-color-hover: transparent; + --system-action-button-quiet-border-color-down: transparent; + --system-action-button-quiet-border-color-focus: transparent; + --system-action-button-quiet-border-color-disabled: transparent; + --system-action-button-selected-background-color-default: var(--spectrum-neutral-background-color-selected-default); + --system-action-button-selected-background-color-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-action-button-selected-background-color-down: var(--spectrum-neutral-background-color-selected-down); + --system-action-button-selected-background-color-focus: var(--spectrum-neutral-background-color-selected-key-focus); + --system-action-button-selected-content-color-default: var(--spectrum-gray-50); + --system-action-button-selected-content-color-hover: var(--spectrum-gray-50); + --system-action-button-selected-content-color-down: var(--spectrum-gray-50); + --system-action-button-selected-content-color-focus: var(--spectrum-gray-50); + --system-action-button-selected-border-color-default: transparent; + --system-action-button-selected-border-color-hover: transparent; + --system-action-button-selected-border-color-down: transparent; + --system-action-button-selected-border-color-focus: transparent; + --system-action-button-selected-border-color-disabled: transparent; + --system-action-button-selected-background-color-disabled: var(--spectrum-disabled-background-color); + --system-action-button-selected-emphasized-background-color-default: var(--spectrum-accent-background-color-default); + --system-action-button-selected-emphasized-background-color-hover: var(--spectrum-accent-background-color-hover); + --system-action-button-selected-emphasized-background-color-down: var(--spectrum-accent-background-color-down); + --system-action-button-selected-emphasized-background-color-focus: var(--spectrum-accent-background-color-key-focus); + --system-action-button-selected-emphasized-content-color-default: var(--spectrum-white); + --system-action-button-selected-emphasized-content-color-hover: var(--spectrum-white); + --system-action-button-selected-emphasized-content-color-down: var(--spectrum-white); + --system-action-button-selected-emphasized-content-color-focus: var(--spectrum-white); + --system-action-button-static-black-quiet-border-color-default: transparent; + --system-action-button-static-white-quiet-border-color-default: transparent; + --system-action-button-static-black-quiet-border-color-hover: transparent; + --system-action-button-static-white-quiet-border-color-hover: transparent; + --system-action-button-static-black-quiet-border-color-down: transparent; + --system-action-button-static-white-quiet-border-color-down: transparent; + --system-action-button-static-black-quiet-border-color-focus: transparent; + --system-action-button-static-white-quiet-border-color-focus: transparent; + --system-action-button-static-black-quiet-border-color-disabled: transparent; + --system-action-button-static-white-quiet-border-color-disabled: transparent; + --system-action-button-static-black-background-color-default: var(--spectrum-transparent-black-200); + --system-action-button-static-black-background-color-hover: var(--spectrum-transparent-black-300); + --system-action-button-static-black-background-color-down: var(--spectrum-transparent-black-400); + --system-action-button-static-black-background-color-focus: var(--spectrum-transparent-black-300); + --system-action-button-static-black-background-color-disabled: transparent; + --system-action-button-static-black-border-color-default: transparent; + --system-action-button-static-black-border-color-hover: transparent; + --system-action-button-static-black-border-color-down: transparent; + --system-action-button-static-black-border-color-focus: transparent; + --system-action-button-static-black-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --system-action-button-static-black-content-color-default: var(--spectrum-black); + --system-action-button-static-black-content-color-hover: var(--spectrum-black); + --system-action-button-static-black-content-color-down: var(--spectrum-black); + --system-action-button-static-black-content-color-focus: var(--spectrum-black); + --system-action-button-static-black-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-action-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-action-button-static-black-selected-background-color-default: var(--spectrum-transparent-black-800); + --system-action-button-static-black-selected-background-color-hover: var(--spectrum-transparent-black-900); + --system-action-button-static-black-selected-background-color-down: var(--spectrum-transparent-black-900); + --system-action-button-static-black-selected-background-color-focus: var(--spectrum-transparent-black-900); + --system-action-button-static-black-selected-background-color-disabled: var(--spectrum-transparent-black-200); + --system-action-button-static-black-selected-border-color-disabled: transparent; + --system-action-button-static-black-selected-content-color-default: var(--spectrum-white); + --system-action-button-static-black-selected-emphasized-background-color-default: var(--spectrum-transparent-black-900); + --system-action-button-static-black-selected-emphasized-background-color-hover: var(--spectrum-transparent-black-1000); + --system-action-button-static-black-selected-emphasized-background-color-down: var(--spectrum-transparent-black-1000); + --system-action-button-static-black-selected-emphasized-background-color-focus: var(--spectrum-transparent-black-1000); + --system-action-button-static-black-selected-emphasized-content-color-default: var(--spectrum-gray-50); + --system-action-button-static-black-selected-emphasized-content-color-hover: var(--spectrum-gray-900); + --system-action-button-static-black-selected-emphasized-content-color-down: var(--spectrum-gray-900); + --system-action-button-static-black-selected-emphasized-content-color-focus: var(--spectrum-gray-900); + --system-action-button-static-white-background-color-default: var(--spectrum-transparent-white-200); + --system-action-button-static-white-background-color-hover: var(--spectrum-transparent-white-300); + --system-action-button-static-white-background-color-down: var(--spectrum-transparent-white-400); + --system-action-button-static-white-background-color-focus: var(--spectrum-transparent-white-300); + --system-action-button-static-white-background-color-disabled: transparent; + --system-action-button-static-white-border-color-default: transparent; + --system-action-button-static-white-border-color-hover: transparent; + --system-action-button-static-white-border-color-down: transparent; + --system-action-button-static-white-border-color-focus: transparent; + --system-action-button-static-white-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --system-action-button-static-white-content-color-default: var(--spectrum-white); + --system-action-button-static-white-content-color-hover: var(--spectrum-white); + --system-action-button-static-white-content-color-down: var(--spectrum-white); + --system-action-button-static-white-content-color-focus: var(--spectrum-white); + --system-action-button-static-white-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-action-button-static-white-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-action-button-static-white-selected-background-color-default: var(--spectrum-transparent-white-800); + --system-action-button-static-white-selected-background-color-hover: var(--spectrum-transparent-white-900); + --system-action-button-static-white-selected-background-color-down: var(--spectrum-transparent-white-900); + --system-action-button-static-white-selected-background-color-focus: var(--spectrum-transparent-white-900); + --system-action-button-static-white-selected-background-color-disabled: var(--spectrum-transparent-white-200); + --system-action-button-static-white-selected-border-color-disabled: transparent; + --system-action-button-static-white-selected-content-color-default: var(--spectrum-black); + --system-action-button-static-white-selected-emphasized-background-color-default: var(--spectrum-transparent-white-900); + --system-action-button-static-white-selected-emphasized-background-color-hover: var(--spectrum-transparent-white-1000); + --system-action-button-static-white-selected-emphasized-background-color-down: var(--spectrum-transparent-white-1000); + --system-action-button-static-white-selected-emphasized-background-color-focus: var(--spectrum-transparent-white-1000); + --system-action-button-static-white-selected-emphasized-content-color-default: var(--spectrum-gray-50); + --system-action-button-size-xs-min-width: calc(var(--spectrum-component-edge-to-visual-only-50) * 2 + var(--spectrum-workflow-icon-size-50)); + --system-action-button-size-xs-height: var(--spectrum-component-height-50); + --system-action-button-size-xs-icon-size: var(--spectrum-workflow-icon-size-50); + --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); + --system-action-button-size-xs-text-to-visual: var(--spectrum-text-to-visual-50); + --system-action-button-size-xs-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small); + --system-action-button-size-xs-edge-to-visual-size: var(--spectrum-component-edge-to-visual-50); + --system-action-button-size-xs-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-50); + --system-action-button-size-xs-edge-to-text-size: var(--spectrum-component-edge-to-text-50); + --system-action-button-size-s-min-width: calc(var(--spectrum-component-edge-to-visual-only-75) * 2 + var(--spectrum-workflow-icon-size-75)); + --system-action-button-size-s-height: var(--spectrum-component-height-75); + --system-action-button-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-action-button-size-s-font-size: var(--spectrum-font-size-75); + --system-action-button-size-s-text-to-visual: var(--spectrum-text-to-visual-75); + --system-action-button-size-s-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small); + --system-action-button-size-s-edge-to-visual-size: var(--spectrum-component-edge-to-visual-75); + --system-action-button-size-s-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-75); + --system-action-button-size-s-edge-to-text-size: var(--spectrum-component-edge-to-text-75); + --system-action-button-size-m-min-width: calc(var(--spectrum-component-edge-to-visual-only-100) * 2 + var(--spectrum-workflow-icon-size-100)); + --system-action-button-size-m-height: var(--spectrum-component-height-100); + --system-action-button-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-action-button-size-m-font-size: var(--spectrum-font-size-100); + --system-action-button-size-m-text-to-visual: var(--spectrum-text-to-visual-100); + --system-action-button-size-m-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --system-action-button-edge-to-visual-size: var(--spectrum-component-edge-to-visual-100); + --system-action-button-size-m-edge-to-visual-size: var(--spectrum-component-edge-to-visual-100); + --system-action-button-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-100); + --system-action-button-size-m-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-100); + --system-action-button-edge-to-text-size: var(--spectrum-component-edge-to-text-100); + --system-action-button-size-m-edge-to-text-size: var(--spectrum-component-edge-to-text-100); + --system-action-button-size-l-min-width: calc(var(--spectrum-component-edge-to-visual-only-200) * 2 + var(--spectrum-workflow-icon-size-200)); + --system-action-button-size-l-height: var(--spectrum-component-height-200); + --system-action-button-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-action-button-size-l-font-size: var(--spectrum-font-size-200); + --system-action-button-size-l-text-to-visual: var(--spectrum-text-to-visual-200); + --system-action-button-size-l-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large); + --system-action-button-size-l-edge-to-visual-size: var(--spectrum-component-edge-to-visual-200); + --system-action-button-size-l-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-200); + --system-action-button-size-l-edge-to-text-size: var(--spectrum-component-edge-to-text-200); + --system-action-button-size-xl-min-width: calc(var(--spectrum-component-edge-to-visual-only-300) * 2 + var(--spectrum-workflow-icon-size-300)); + --system-action-button-size-xl-height: var(--spectrum-component-height-300); + --system-action-button-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-action-button-size-xl-text-to-visual: var(--spectrum-text-to-visual-300); + --system-action-button-size-xl-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large); + --system-action-button-size-xl-edge-to-visual-size: var(--spectrum-component-edge-to-visual-300); + --system-action-button-size-xl-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-300); + --system-action-button-size-xl-edge-to-text-size: var(--spectrum-component-edge-to-text-300); +} diff --git a/tokens/dist/css/components/express/actiongroup.css b/tokens/dist/css/components/express/actiongroup.css new file mode 100644 index 00000000000..952b6c6a704 --- /dev/null +++ b/tokens/dist/css/components/express/actiongroup.css @@ -0,0 +1,33 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-action-group-gap-size-compact: var(--spectrum-spacing-50); + --system-action-group-horizontal-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); + --system-action-group-vertical-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); + --system-action-group-button-spacing-reset: 0; + --system-action-group-border-radius-reset: 0; + --system-action-group-border-radius: var(--spectrum-corner-radius-100); + --system-action-group-size-xs-horizontal-spacing-regular: var(--spectrum-spacing-75); + --system-action-group-size-s-horizontal-spacing-regular: var(--spectrum-spacing-75); + --system-action-group-size-xs-vertical-spacing-regular: var(--spectrum-spacing-75); + --system-action-group-size-s-vertical-spacing-regular: var(--spectrum-spacing-75); + --system-action-group-horizontal-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-m-horizontal-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-l-horizontal-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-xl-horizontal-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-m-vertical-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-l-vertical-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-xl-vertical-spacing-regular: var(--spectrum-spacing-100); +} diff --git a/tokens/dist/css/components/express/alertbanner.css b/tokens/dist/css/components/express/alertbanner.css new file mode 100644 index 00000000000..b566d56d879 --- /dev/null +++ b/tokens/dist/css/components/express/alertbanner.css @@ -0,0 +1,31 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-alert-banner-neutral-background: var(--spectrum-neutral-background-color-default); + --system-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height); + --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); + --system-alert-banner-size: auto; + --system-alert-banner-font-size: var(--spectrum-font-size-100); + --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); + --system-alert-banner-start-edge: var(--spectrum-spacing-300); + --system-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300); + --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); + --system-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon); + --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); + --system-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text); + --system-alert-banner-informative-background: var(--spectrum-informative-background-color-default); + --system-alert-banner-negative-background: var(--spectrum-negative-background-color-default); + --system-alert-banner-font-color: var(--spectrum-white); +} diff --git a/tokens/dist/css/components/express/assetcard.css b/tokens/dist/css/components/express/assetcard.css new file mode 100644 index 00000000000..4f1d3143661 --- /dev/null +++ b/tokens/dist/css/components/express/assetcard.css @@ -0,0 +1,105 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-asset-card-overlay-background-color-rgb: 109, 115, 246; + --system-asset-card-overlay-background-color-opacity: 0.2; + --system-asset-card-overlay-background-color: rgba(var(--system-asset-card-overlay-background-color-rgb), var(--system-asset-card-overlay-background-color-opacity)); + --system-asset-card-asset-size: 224px; + --system-asset-card-background-color: var(--spectrum-gray-200); + --system-asset-card-asset-animation-duration: var(--spectrum-animation-duration-100); + --system-asset-card-asset-container-border-size: 1px; + --system-asset-card-header-margin-block-start: var(--spectrum-spacing-300); + --system-asset-card-border-radius: var(--spectrum-corner-radius-100); + --system-asset-card-border-color: transparent; + --system-asset-card-border-color-hover: var(--spectrum-gray-500); + --system-asset-card-border-color-down: var(--spectrum-gray-600); + --system-asset-card-focus-ring-gap: 5px; + --system-asset-card-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-asset-card-selectionindicator-background-color-default: rgba(var(--spectrum-gray-100-rgb), 0.9); + --system-asset-card-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-200); + --system-asset-card-selectionindicator-size: var(--spectrum-card-selection-background-size); + --system-asset-card-selectionindicator-border-radius: var(--spectrum-corner-radius-100); + --system-asset-card-selectionindicator-offset-y: 4px; + --system-asset-card-selectionindicator-blur: 6px; + --system-asset-card-selectionindicator-color: var(--spectrum-white); + --system-asset-card-selectionindicator-font-weight: var(--spectrum-bold-font-weight); + --system-asset-card-selectionindicator-font-size: var(--spectrum-font-size-400); + --system-asset-card-title-text-color: var(--spectrum-gray-900); + --system-asset-card-title-font-family: var(--spectrum-sans-font-family-stack); + --system-asset-card-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-asset-card-title-font-style: var(--spectrum-default-font-style); + --system-asset-card-title-line-height: var(--spectrum-line-height-100); + --system-asset-card-title-letter-spacing: 0; + --system-asset-card-header-content-text-color: var(--spectrum-gray-900); + --system-asset-card-header-content-font-family: var(--spectrum-sans-font-family-stack); + --system-asset-card-header-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-asset-card-header-content-font-style: var(--spectrum-default-font-style); + --system-asset-card-header-content-line-height: var(--spectrum-line-height-200); + --system-asset-card-header-content-letter-spacing: 0; + --system-asset-card-content-text-color: var(--spectrum-gray-700); + --system-asset-card-content-font-family: var(--spectrum-sans-font-family-stack); + --system-asset-card-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-asset-card-content-font-style: var(--spectrum-default-font-style); + --system-asset-card-content-line-height: var(--spectrum-line-height-200); + --system-asset-card-content-letter-spacing: 0; + --system-asset-card-content-margin-block-start: var(--spectrum-spacing-75); + --system-asset-card-lang-zh-title-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ja-title-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ko-title-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-zh-title-font-style: var(--spectrum-heading-cjk-font-style); + --system-asset-card-lang-ja-title-font-style: var(--spectrum-heading-cjk-font-style); + --system-asset-card-lang-ko-title-font-style: var(--spectrum-heading-cjk-font-style); + --system-asset-card-lang-zh-title-font-weight: var(--spectrum-heading-cjk-font-weight); + --system-asset-card-lang-ja-title-font-weight: var(--spectrum-heading-cjk-font-weight); + --system-asset-card-lang-ko-title-font-weight: var(--spectrum-heading-cjk-font-weight); + --system-asset-card-lang-zh-title-font-size: var(--spectrum-heading-cjk-size-xs); + --system-asset-card-lang-ja-title-font-size: var(--spectrum-heading-cjk-size-xs); + --system-asset-card-lang-ko-title-font-size: var(--spectrum-heading-cjk-size-xs); + --system-asset-card-lang-zh-title-line-height: var(--spectrum-heading-cjk-line-height); + --system-asset-card-lang-ja-title-line-height: var(--spectrum-heading-cjk-line-height); + --system-asset-card-lang-ko-title-line-height: var(--spectrum-heading-cjk-line-height); + --system-asset-card-lang-zh-title-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ja-title-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ko-title-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-zh-header-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ja-header-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ko-header-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-zh-header-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ja-header-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ko-header-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-zh-header-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ja-header-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ko-header-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-zh-header-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ja-header-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ko-header-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-zh-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ja-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ko-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-zh-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ja-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ko-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-zh-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ja-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ko-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-zh-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ja-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ko-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-zh-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ja-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ko-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-zh-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ja-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ko-content-letter-spacing: var(--spectrum-cjk-letter-spacing); +} diff --git a/tokens/dist/css/components/express/button.css b/tokens/dist/css/components/express/button.css new file mode 100644 index 00000000000..2c107d2c49d --- /dev/null +++ b/tokens/dist/css/components/express/button.css @@ -0,0 +1,382 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-button-animation-duration: var(--spectrum-animation-duration-100); + --system-button-border-radius: var(--spectrum-corner-radius-100); + --system-button-border-width: var(--spectrum-border-width-200); + --system-button-line-height: 1.2; + --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-button-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); + --system-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-50); + --system-button-background-color-default: var(--spectrum-gray-200); + --system-button-background-color-hover: var(--spectrum-gray-300); + --system-button-background-color-down: var(--spectrum-gray-400); + --system-button-background-color-focus: var(--spectrum-gray-300); + --system-button-border-color-default: transparent; + --system-button-border-color-hover: transparent; + --system-button-border-color-down: transparent; + --system-button-border-color-focus: transparent; + --system-button-content-color-default: var(--spectrum-neutral-content-color-default); + --system-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-button-content-color-down: var(--spectrum-neutral-content-color-down); + --system-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-button-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-border-color-disabled: transparent; + --system-button-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-accent-background-color-default: var(--spectrum-accent-background-color-default); + --system-button-accent-background-color-hover: var(--spectrum-accent-background-color-hover); + --system-button-accent-background-color-down: var(--spectrum-accent-background-color-down); + --system-button-accent-background-color-focus: var(--spectrum-accent-background-color-key-focus); + --system-button-accent-border-color-default: transparent; + --system-button-accent-border-color-hover: transparent; + --system-button-accent-border-color-down: transparent; + --system-button-accent-border-color-focus: transparent; + --system-button-accent-content-color-default: var(--spectrum-white); + --system-button-accent-content-color-hover: var(--spectrum-white); + --system-button-accent-content-color-down: var(--spectrum-white); + --system-button-accent-content-color-focus: var(--spectrum-white); + --system-button-accent-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-accent-border-color-disabled: transparent; + --system-button-accent-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-accent-outline-background-color-default: transparent; + --system-button-accent-outline-background-color-hover: var(--spectrum-accent-color-200); + --system-button-accent-outline-background-color-down: var(--spectrum-accent-color-300); + --system-button-accent-outline-background-color-focus: var(--spectrum-accent-color-200); + --system-button-accent-outline-border-color-default: var(--spectrum-accent-color-900); + --system-button-accent-outline-border-color-hover: var(--spectrum-accent-color-1000); + --system-button-accent-outline-border-color-down: var(--spectrum-accent-color-1100); + --system-button-accent-outline-border-color-focus: var(--spectrum-accent-color-1000); + --system-button-accent-outline-content-color-default: var(--spectrum-accent-content-color-default); + --system-button-accent-outline-content-color-hover: var(--spectrum-accent-content-color-hover); + --system-button-accent-outline-content-color-down: var(--spectrum-accent-content-color-down); + --system-button-accent-outline-content-color-focus: var(--spectrum-accent-content-color-key-focus); + --system-button-accent-outline-background-color-disabled: transparent; + --system-button-accent-outline-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-accent-outline-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-negative-background-color-default: var(--spectrum-negative-background-color-default); + --system-button-negative-background-color-hover: var(--spectrum-negative-background-color-hover); + --system-button-negative-background-color-down: var(--spectrum-negative-background-color-down); + --system-button-negative-background-color-focus: var(--spectrum-negative-background-color-key-focus); + --system-button-negative-border-color-default: transparent; + --system-button-negative-border-color-hover: transparent; + --system-button-negative-border-color-down: transparent; + --system-button-negative-border-color-focus: transparent; + --system-button-negative-content-color-default: var(--spectrum-white); + --system-button-negative-content-color-hover: var(--spectrum-white); + --system-button-negative-content-color-down: var(--spectrum-white); + --system-button-negative-content-color-focus: var(--spectrum-white); + --system-button-negative-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-negative-border-color-disabled: transparent; + --system-button-negative-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-negative-outline-background-color-default: transparent; + --system-button-negative-outline-background-color-hover: var(--spectrum-negative-color-200); + --system-button-negative-outline-background-color-down: var(--spectrum-negative-color-300); + --system-button-negative-outline-background-color-focus: var(--spectrum-negative-color-200); + --system-button-negative-outline-border-color-default: var(--spectrum-negative-color-900); + --system-button-negative-outline-border-color-hover: var(--spectrum-negative-color-1000); + --system-button-negative-outline-border-color-down: var(--spectrum-negative-color-1100); + --system-button-negative-outline-border-color-focus: var(--spectrum-negative-color-1000); + --system-button-negative-outline-content-color-default: var(--spectrum-negative-content-color-default); + --system-button-negative-outline-content-color-hover: var(--spectrum-negative-content-color-hover); + --system-button-negative-outline-content-color-down: var(--spectrum-negative-content-color-down); + --system-button-negative-outline-content-color-focus: var(--spectrum-negative-content-color-key-focus); + --system-button-negative-outline-background-color-disabled: transparent; + --system-button-negative-outline-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-negative-outline-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-primary-background-color-default: var(--spectrum-neutral-background-color-default); + --system-button-primary-background-color-hover: var(--spectrum-neutral-background-color-hover); + --system-button-primary-background-color-down: var(--spectrum-neutral-background-color-down); + --system-button-primary-background-color-focus: var(--spectrum-neutral-background-color-key-focus); + --system-button-primary-border-color-default: transparent; + --system-button-primary-border-color-hover: transparent; + --system-button-primary-border-color-down: transparent; + --system-button-primary-border-color-focus: transparent; + --system-button-primary-content-color-default: var(--spectrum-white); + --system-button-primary-content-color-hover: var(--spectrum-white); + --system-button-primary-content-color-down: var(--spectrum-white); + --system-button-primary-content-color-focus: var(--spectrum-white); + --system-button-primary-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-primary-border-color-disabled: transparent; + --system-button-primary-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-primary-outline-background-color-default: transparent; + --system-button-primary-outline-background-color-hover: var(--spectrum-gray-300); + --system-button-primary-outline-background-color-down: var(--spectrum-gray-400); + --system-button-primary-outline-background-color-focus: var(--spectrum-gray-300); + --system-button-primary-outline-border-color-default: var(--spectrum-gray-800); + --system-button-primary-outline-border-color-hover: var(--spectrum-gray-900); + --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); + --system-button-primary-outline-border-color-focus: var(--spectrum-gray-900); + --system-button-primary-outline-content-color-default: var(--spectrum-neutral-content-color-default); + --system-button-primary-outline-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-button-primary-outline-content-color-down: var(--spectrum-neutral-content-color-down); + --system-button-primary-outline-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-button-primary-outline-background-color-disabled: transparent; + --system-button-primary-outline-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-primary-outline-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-secondary-background-color-default: var(--spectrum-gray-200); + --system-button-secondary-background-color-hover: var(--spectrum-gray-300); + --system-button-secondary-background-color-down: var(--spectrum-gray-400); + --system-button-secondary-background-color-focus: var(--spectrum-gray-300); + --system-button-secondary-border-color-default: transparent; + --system-button-secondary-border-color-hover: transparent; + --system-button-secondary-border-color-down: transparent; + --system-button-secondary-border-color-focus: transparent; + --system-button-secondary-content-color-default: var(--spectrum-neutral-content-color-default); + --system-button-secondary-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-button-secondary-content-color-down: var(--spectrum-neutral-content-color-down); + --system-button-secondary-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-button-secondary-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-secondary-border-color-disabled: transparent; + --system-button-secondary-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-secondary-outline-background-color-default: transparent; + --system-button-secondary-outline-background-color-hover: var(--spectrum-gray-300); + --system-button-secondary-outline-background-color-down: var(--spectrum-gray-400); + --system-button-secondary-outline-background-color-focus: var(--spectrum-gray-300); + --system-button-secondary-outline-border-color-default: var(--spectrum-gray-300); + --system-button-secondary-outline-border-color-hover: var(--spectrum-gray-400); + --system-button-secondary-outline-border-color-down: var(--spectrum-gray-500); + --system-button-secondary-outline-border-color-focus: var(--spectrum-gray-400); + --system-button-secondary-outline-content-color-default: var(--spectrum-neutral-content-color-default); + --system-button-secondary-outline-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-button-secondary-outline-content-color-down: var(--spectrum-neutral-content-color-down); + --system-button-secondary-outline-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-button-secondary-outline-background-color-disabled: transparent; + --system-button-secondary-outline-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-secondary-outline-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-quiet-background-color-default: transparent; + --system-button-quiet-background-color-hover: var(--spectrum-gray-100); + --system-button-quiet-background-color-down: var(--spectrum-gray-200); + --system-button-quiet-background-color-focus: var(--spectrum-gray-100); + --system-button-quiet-border-color-default: transparent; + --system-button-quiet-border-color-hover: transparent; + --system-button-quiet-border-color-down: transparent; + --system-button-quiet-border-color-focus: transparent; + --system-button-quiet-background-color-disabled: transparent; + --system-button-quiet-border-color-disabled: transparent; + --system-button-selected-background-color-default: var(--spectrum-neutral-background-color-default); + --system-button-selected-background-color-hover: var(--spectrum-neutral-background-color-hover); + --system-button-selected-background-color-down: var(--spectrum-neutral-background-color-down); + --system-button-selected-background-color-focus: var(--spectrum-neutral-background-color-key-focus); + --system-button-selected-border-color-default: transparent; + --system-button-selected-border-color-hover: transparent; + --system-button-selected-border-color-down: transparent; + --system-button-selected-border-color-focus: transparent; + --system-button-selected-content-color-default: var(--spectrum-white); + --system-button-selected-content-color-hover: var(--spectrum-white); + --system-button-selected-content-color-down: var(--spectrum-white); + --system-button-selected-content-color-focus: var(--spectrum-white); + --system-button-selected-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-selected-border-color-disabled: transparent; + --system-button-selected-emphasized-background-color-default: var(--spectrum-accent-background-color-default); + --system-button-selected-emphasized-background-color-hover: var(--spectrum-accent-background-color-hover); + --system-button-selected-emphasized-background-color-down: var(--spectrum-accent-background-color-down); + --system-button-selected-emphasized-background-color-focus: var(--spectrum-accent-background-color-key-focus); + --system-button-static-black-quiet-border-color-default: transparent; + --system-button-static-white-quiet-border-color-default: transparent; + --system-button-static-black-quiet-border-color-hover: transparent; + --system-button-static-white-quiet-border-color-hover: transparent; + --system-button-static-black-quiet-border-color-down: transparent; + --system-button-static-white-quiet-border-color-down: transparent; + --system-button-static-black-quiet-border-color-focus: transparent; + --system-button-static-white-quiet-border-color-focus: transparent; + --system-button-static-black-quiet-border-color-disabled: transparent; + --system-button-static-white-quiet-border-color-disabled: transparent; + --system-button-static-white-background-color-default: var(--spectrum-transparent-white-800); + --system-button-static-white-background-color-hover: var(--spectrum-transparent-white-900); + --system-button-static-white-background-color-down: var(--spectrum-transparent-white-900); + --system-button-static-white-background-color-focus: var(--spectrum-transparent-white-900); + --system-button-static-white-border-color-default: transparent; + --system-button-static-white-border-color-hover: transparent; + --system-button-static-white-border-color-down: transparent; + --system-button-static-white-border-color-focus: transparent; + --system-button-static-white-content-color-default: var(--spectrum-black); + --system-button-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-button-static-white-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --system-button-static-white-border-color-disabled: transparent; + --system-button-static-white-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-button-static-white-outline-background-color-default: transparent; + --system-button-static-white-outline-background-color-hover: var(--spectrum-transparent-white-300); + --system-button-static-white-outline-background-color-down: var(--spectrum-transparent-white-400); + --system-button-static-white-outline-background-color-focus: var(--spectrum-transparent-white-300); + --system-button-static-white-outline-border-color-default: var(--spectrum-transparent-white-800); + --system-button-static-white-outline-border-color-hover: var(--spectrum-transparent-white-900); + --system-button-static-white-outline-border-color-down: var(--spectrum-transparent-white-900); + --system-button-static-white-outline-border-color-focus: var(--spectrum-transparent-white-900); + --system-button-static-white-outline-content-color-default: var(--spectrum-white); + --system-button-static-white-outline-content-color-hover: var(--spectrum-white); + --system-button-static-white-outline-content-color-down: var(--spectrum-white); + --system-button-static-white-outline-content-color-focus: var(--spectrum-white); + --system-button-static-white-outline-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-button-static-white-outline-background-color-disabled: transparent; + --system-button-static-white-outline-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --system-button-static-white-outline-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-button-static-white-selected-background-color-default: var(--spectrum-transparent-white-800); + --system-button-static-white-selected-background-color-hover: var(--spectrum-transparent-white-900); + --system-button-static-white-selected-background-color-down: var(--spectrum-transparent-white-900); + --system-button-static-white-selected-background-color-focus: var(--spectrum-transparent-white-900); + --system-button-static-white-selected-static-white-content-color-default: var(--spectrum-black); + --system-button-static-white-selected-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-selected-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-selected-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-selected-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --system-button-static-white-selected-border-color-disabled: transparent; + --system-button-static-white-secondary-background-color-default: var(--spectrum-transparent-white-200); + --system-button-static-white-secondary-background-color-hover: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-background-color-down: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-background-color-focus: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-border-color-default: transparent; + --system-button-static-white-secondary-border-color-hover: transparent; + --system-button-static-white-secondary-border-color-down: transparent; + --system-button-static-white-secondary-border-color-focus: transparent; + --system-button-static-white-secondary-content-color-default: var(--spectrum-white); + --system-button-static-white-secondary-content-color-hover: var(--spectrum-white); + --system-button-static-white-secondary-content-color-down: var(--spectrum-white); + --system-button-static-white-secondary-content-color-focus: var(--spectrum-white); + --system-button-static-white-secondary-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-button-static-white-secondary-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --system-button-static-white-secondary-border-color-disabled: transparent; + --system-button-static-white-secondary-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-button-static-white-secondary-outline-background-color-default: transparent; + --system-button-static-white-secondary-outline-background-color-hover: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-outline-background-color-down: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-outline-background-color-focus: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-outline-border-color-default: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-outline-border-color-hover: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-outline-border-color-down: var(--spectrum-transparent-white-500); + --system-button-static-white-secondary-outline-border-color-focus: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-outline-content-color-default: var(--spectrum-white); + --system-button-static-white-secondary-outline-content-color-hover: var(--spectrum-white); + --system-button-static-white-secondary-outline-content-color-down: var(--spectrum-white); + --system-button-static-white-secondary-outline-content-color-focus: var(--spectrum-white); + --system-button-static-white-secondary-outline-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-button-static-white-secondary-outline-background-color-disabled: transparent; + --system-button-static-white-secondary-outline-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --system-button-static-white-secondary-outline-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-button-static-black-background-color-default: var(--spectrum-transparent-black-800); + --system-button-static-black-background-color-hover: var(--spectrum-transparent-black-900); + --system-button-static-black-background-color-down: var(--spectrum-transparent-black-900); + --system-button-static-black-background-color-focus: var(--spectrum-transparent-black-900); + --system-button-static-black-border-color-default: transparent; + --system-button-static-black-border-color-hover: transparent; + --system-button-static-black-border-color-down: transparent; + --system-button-static-black-border-color-focus: transparent; + --system-button-static-black-content-color-default: var(--spectrum-white); + --system-button-static-black-content-color-hover: var(--spectrum-white); + --system-button-static-black-content-color-down: var(--spectrum-white); + --system-button-static-black-content-color-focus: var(--spectrum-white); + --system-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-button-static-black-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --system-button-static-black-border-color-disabled: transparent; + --system-button-static-black-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-button-static-black-outline-background-color-default: transparent; + --system-button-static-black-outline-background-color-hover: var(--spectrum-transparent-black-300); + --system-button-static-black-outline-background-color-down: var(--spectrum-transparent-black-400); + --system-button-static-black-outline-background-color-focus: var(--spectrum-transparent-black-300); + --system-button-static-black-outline-border-color-default: var(--spectrum-transparent-black-400); + --system-button-static-black-outline-border-color-hover: var(--spectrum-transparent-black-500); + --system-button-static-black-outline-border-color-down: var(--spectrum-transparent-black-600); + --system-button-static-black-outline-border-color-focus: var(--spectrum-transparent-black-500); + --system-button-static-black-outline-content-color-default: var(--spectrum-black); + --system-button-static-black-outline-content-color-hover: var(--spectrum-black); + --system-button-static-black-outline-content-color-down: var(--spectrum-black); + --system-button-static-black-outline-content-color-focus: var(--spectrum-black); + --system-button-static-black-outline-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-button-static-black-outline-background-color-disabled: transparent; + --system-button-static-black-outline-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --system-button-static-black-outline-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-button-static-black-secondary-background-color-default: var(--spectrum-transparent-black-200); + --system-button-static-black-secondary-background-color-hover: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-background-color-down: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-background-color-focus: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-border-color-default: transparent; + --system-button-static-black-secondary-border-color-hover: transparent; + --system-button-static-black-secondary-border-color-down: transparent; + --system-button-static-black-secondary-border-color-focus: transparent; + --system-button-static-black-secondary-content-color-default: var(--spectrum-black); + --system-button-static-black-secondary-content-color-hover: var(--spectrum-black); + --system-button-static-black-secondary-content-color-down: var(--spectrum-black); + --system-button-static-black-secondary-content-color-focus: var(--spectrum-black); + --system-button-static-black-secondary-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-button-static-black-secondary-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --system-button-static-black-secondary-border-color-disabled: transparent; + --system-button-static-black-secondary-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-button-static-black-secondary-outline-background-color-default: transparent; + --system-button-static-black-secondary-outline-background-color-hover: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-outline-background-color-down: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-outline-background-color-focus: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-outline-border-color-default: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-outline-border-color-hover: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-outline-border-color-down: var(--spectrum-transparent-black-500); + --system-button-static-black-secondary-outline-border-color-focus: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-outline-content-color-default: var(--spectrum-black); + --system-button-static-black-secondary-outline-content-color-hover: var(--spectrum-black); + --system-button-static-black-secondary-outline-content-color-down: var(--spectrum-black); + --system-button-static-black-secondary-outline-content-color-focus: var(--spectrum-black); + --system-button-static-black-secondary-outline-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-button-static-black-secondary-outline-background-color-disabled: transparent; + --system-button-static-black-secondary-outline-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --system-button-static-black-secondary-outline-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-button-size-s-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-s-border-radius: var(--spectrum-component-pill-edge-to-text-75); + --system-button-size-s-height: var(--spectrum-component-height-75); + --system-button-size-s-font-size: var(--spectrum-font-size-75); + --system-button-size-s-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--system-button-border-width)); + --system-button-size-s-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75); + --system-button-size-s-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--system-button-border-width)); + --system-button-size-s-padding-label-to-icon: var(--spectrum-text-to-visual-75); + --system-button-size-s-top-to-text: var(--spectrum-button-top-to-text-small); + --system-button-size-s-bottom-to-text: var(--spectrum-button-bottom-to-text-small); + --system-button-size-s-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75); + --system-button-size-s-intended-icon-size: var(--spectrum-workflow-icon-size-75); + --system-button-size-m-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-m-border-radius: var(--spectrum-component-pill-edge-to-text-100); + --system-button-size-m-height: var(--spectrum-component-height-100); + --system-button-size-m-font-size: var(--spectrum-font-size-100); + --system-button-size-m-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--system-button-border-width)); + --system-button-size-m-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100); + --system-button-size-m-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--system-button-border-width)); + --system-button-size-m-padding-label-to-icon: var(--spectrum-text-to-visual-100); + --system-button-size-m-top-to-text: var(--spectrum-button-top-to-text-medium); + --system-button-size-m-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); + --system-button-size-m-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); + --system-button-size-m-intended-icon-size: var(--spectrum-workflow-icon-size-100); + --system-button-size-l-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-l-border-radius: var(--spectrum-component-pill-edge-to-text-200); + --system-button-size-l-height: var(--spectrum-component-height-200); + --system-button-size-l-font-size: var(--spectrum-font-size-200); + --system-button-size-l-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--system-button-border-width)); + --system-button-size-l-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200); + --system-button-size-l-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--system-button-border-width)); + --system-button-size-l-padding-label-to-icon: var(--spectrum-text-to-visual-200); + --system-button-size-l-top-to-text: var(--spectrum-button-top-to-text-large); + --system-button-size-l-bottom-to-text: var(--spectrum-button-bottom-to-text-large); + --system-button-size-l-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200); + --system-button-size-l-intended-icon-size: var(--spectrum-workflow-icon-size-200); + --system-button-size-xl-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-xl-border-radius: var(--spectrum-component-pill-edge-to-text-300); + --system-button-size-xl-height: var(--spectrum-component-height-300); + --system-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-button-size-xl-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--system-button-border-width)); + --system-button-size-xl-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300); + --system-button-size-xl-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--system-button-border-width)); + --system-button-size-xl-padding-label-to-icon: var(--spectrum-text-to-visual-300); + --system-button-size-xl-top-to-text: var(--spectrum-button-top-to-text-extra-large); + --system-button-size-xl-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large); + --system-button-size-xl-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300); + --system-button-size-xl-intended-icon-size: var(--spectrum-workflow-icon-size-300); +} diff --git a/tokens/dist/css/components/express/checkbox.css b/tokens/dist/css/components/express/checkbox.css new file mode 100644 index 00000000000..aab4579bf8d --- /dev/null +++ b/tokens/dist/css/components/express/checkbox.css @@ -0,0 +1,71 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-checkbox-control-color-default: var(--spectrum-gray-800); + --system-checkbox-control-color-hover: var(--spectrum-gray-900); + --system-checkbox-control-color-down: var(--spectrum-gray-900); + --system-checkbox-control-color-focus: var(--spectrum-gray-900); + --system-checkbox-content-color-default: var(--spectrum-neutral-content-color-default); + --system-checkbox-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-checkbox-content-color-down: var(--spectrum-neutral-content-color-down); + --system-checkbox-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-checkbox-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-checkbox-content-color-disabled: var(--spectrum-disabled-content-color); + --system-checkbox-control-color-disabled: var(--spectrum-disabled-content-color); + --system-checkbox-checkmark-color: var(--spectrum-gray-75); + --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); + --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); + --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); + --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); + --system-checkbox-emphasized-color-default: var(--spectrum-accent-color-900); + --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); + --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); + --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); + --system-checkbox-control-selected-color-default: var(--spectrum-neutral-background-color-selected-default); + --system-checkbox-control-selected-color-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-checkbox-control-selected-color-down: var(--spectrum-neutral-background-color-selected-down); + --system-checkbox-control-selected-color-focus: var(--spectrum-neutral-background-color-selected-key-focus); + --system-checkbox-line-height: var(--spectrum-line-height-100); + --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); + --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-checkbox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-checkbox-border-width: var(--spectrum-border-width-200); + --system-checkbox-animation-duration: var(--spectrum-animation-duration-100); + --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); + --system-checkbox-size-s-height: var(--spectrum-component-height-75); + --system-checkbox-size-s-control-size: var(--spectrum-checkbox-control-size-small); + --system-checkbox-size-s-top-to-text: var(--spectrum-component-top-to-text-75); + --system-checkbox-size-s-text-to-control: var(--spectrum-text-to-control-75); + --system-checkbox-font-size: var(--spectrum-font-size-100); + --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); + --system-checkbox-height: var(--spectrum-component-height-100); + --system-checkbox-size-m-height: var(--spectrum-component-height-100); + --system-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); + --system-checkbox-size-m-control-size: var(--spectrum-checkbox-control-size-medium); + --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); + --system-checkbox-size-m-top-to-text: var(--spectrum-component-top-to-text-100); + --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); + --system-checkbox-size-m-text-to-control: var(--spectrum-text-to-control-100); + --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); + --system-checkbox-size-l-height: var(--spectrum-component-height-200); + --system-checkbox-size-l-control-size: var(--spectrum-checkbox-control-size-large); + --system-checkbox-size-l-top-to-text: var(--spectrum-component-top-to-text-200); + --system-checkbox-size-l-text-to-control: var(--spectrum-text-to-control-200); + --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); + --system-checkbox-size-xl-height: var(--spectrum-component-height-300); + --system-checkbox-size-xl-control-size: var(--spectrum-checkbox-control-size-extra-large); + --system-checkbox-size-xl-top-to-text: var(--spectrum-component-top-to-text-300); + --system-checkbox-size-xl-text-to-control: var(--spectrum-text-to-control-300); +} diff --git a/tokens/dist/css/components/express/clearbutton.css b/tokens/dist/css/components/express/clearbutton.css new file mode 100644 index 00000000000..20d97265318 --- /dev/null +++ b/tokens/dist/css/components/express/clearbutton.css @@ -0,0 +1,48 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-clear-button-background-color: var(--spectrum-gray-200); + --system-clear-button-background-color-hover: var(--spectrum-gray-300); + --system-clear-button-background-color-down: var(--spectrum-gray-400); + --system-clear-button-background-color-key-focus: var(--spectrum-gray-300); + --system-clear-button-height: var(--spectrum-component-height-100); + --system-clear-button-width: var(--spectrum-component-height-100); + --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-clear-button-icon-color: var(--spectrum-neutral-content-color-default); + --system-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-clear-button-size-s-height: var(--spectrum-component-height-75); + --system-clear-button-size-s-width: var(--spectrum-component-height-75); + --system-clear-button-size-l-height: var(--spectrum-component-height-200); + --system-clear-button-size-l-width: var(--spectrum-component-height-200); + --system-clear-button-size-xl-height: var(--spectrum-component-height-300); + --system-clear-button-size-xl-width: var(--spectrum-component-height-300); + --system-clear-button-quiet-background-color: var(--spectrum-clear-button-background-color-quiet, transparent); + --system-clear-button-quiet-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent); + --system-clear-button-quiet-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent); + --system-clear-button-quiet-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent); + --system-clear-button-over-background-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white)); + --system-clear-button-over-background-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white)); + --system-clear-button-over-background-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white)); + --system-clear-button-over-background-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white)); + --system-clear-button-over-background-background-color: var(--spectrum-clear-button-background-color-over-background, transparent); + --system-clear-button-over-background-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); + --system-clear-button-over-background-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); + --system-clear-button-over-background-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); + --system-clear-button-disabled-icon-color: var(--spectrum-disabled-content-color); + --system-clear-button-disabled-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); + --system-clear-button-disabled-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); + --system-clear-button-disabled-background-color: transparent; +} diff --git a/tokens/dist/css/components/express/closebutton.css b/tokens/dist/css/components/express/closebutton.css new file mode 100644 index 00000000000..2fd7d965bd8 --- /dev/null +++ b/tokens/dist/css/components/express/closebutton.css @@ -0,0 +1,47 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-close-button-background-color-default: transparent; + --system-close-button-background-color-hover: var(--spectrum-gray-300); + --system-close-button-background-color-down: var(--spectrum-gray-400); + --system-close-button-background-color-focus: var(--spectrum-gray-300); + --system-close-button-icon-color-default: var(--spectrum-neutral-content-color-default); + --system-close-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-close-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-close-button-icon-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-close-button-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-close-button-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-close-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-close-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-close-button-animation-duration: var(--spectrum-animation-duration-100); + --system-close-button-size-s-size: var(--spectrum-component-height-75); + --system-close-button-size: var(--spectrum-component-height-100); + --system-close-button-size-m-size: var(--spectrum-component-height-100); + --system-close-button-size-l-size: var(--spectrum-component-height-200); + --system-close-button-size-xl-size: var(--spectrum-component-height-300); + --system-close-button-static-white-static-background-color-default: transparent; + --system-close-button-static-white-static-background-color-hover: var(--spectrum-transparent-white-300); + --system-close-button-static-white-static-background-color-down: var(--spectrum-transparent-white-400); + --system-close-button-static-white-static-background-color-focus: var(--spectrum-transparent-white-300); + --system-close-button-static-white-icon-color-default: var(--spectrum-white); + --system-close-button-static-white-icon-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-close-button-static-white-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-close-button-static-black-static-background-color-default: transparent; + --system-close-button-static-black-static-background-color-hover: var(--spectrum-transparent-black-300); + --system-close-button-static-black-static-background-color-down: var(--spectrum-transparent-black-400); + --system-close-button-static-black-static-background-color-focus: var(--spectrum-transparent-black-300); + --system-close-button-static-black-icon-color-default: var(--spectrum-black); + --system-close-button-static-black-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-close-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); +} diff --git a/tokens/dist/css/components/express/combobox.css b/tokens/dist/css/components/express/combobox.css new file mode 100644 index 00000000000..f9fdf20f60b --- /dev/null +++ b/tokens/dist/css/components/express/combobox.css @@ -0,0 +1,98 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-combobox-border-color-default: var(--spectrum-gray-400); + --system-combobox-border-color-hover: var(--spectrum-gray-500); + --system-combobox-border-color-focus: var(--spectrum-gray-900); + --system-combobox-border-color-focus-hover: var(--spectrum-gray-800); + --system-combobox-border-color-key-focus: var(--spectrum-gray-900); + --system-combobox-inline-size: var(--spectrum-field-width); + --system-combobox-minimum-width-multiplier: var(--spectrum-combo-box-minimum-width-multiplier); + --system-combobox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-combobox-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-combobox-border-radius: var(--spectrum-corner-radius-100); + --system-combobox-border-width: var(--spectrum-border-width-100); + --system-combobox-spacing-label-to: var(--spectrum-field-label-to-component); + --system-combobox-font-style: var(--spectrum-default-font-style); + --system-combobox-line-height: var(--spectrum-line-height-100); + --system-combobox-border-color-invalid-default: var(--spectrum-negative-border-color-default); + --system-combobox-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); + --system-combobox-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); + --system-combobox-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); + --system-combobox-border-color-invalid-key-focus: var(--spectrum-negative-border-color-key-focus); + --system-combobox-size-s-block-size: var(--spectrum-component-height-75); + --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-combobox-size-s-font-size: var(--spectrum-font-size-75); + --system-combobox-size-s-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-small); + --system-combobox-size-s-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); + --system-combobox-size-s-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-small); + --system-combobox-size-s-spacing-edge-to-menu: var(--spectrum-component-to-menu-small); + --system-combobox-size-s-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75); + --system-combobox-size-s-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75); + --system-combobox-size-s-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-75); + --system-combobox-size-s-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-75); + --system-combobox-block-size: var(--spectrum-component-height-100); + --system-combobox-size-m-block-size: var(--spectrum-component-height-100); + --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-font-size: var(--spectrum-font-size-100); + --system-combobox-size-m-font-size: var(--spectrum-font-size-100); + --system-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); + --system-combobox-size-m-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); + --system-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); + --system-combobox-size-m-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); + --system-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); + --system-combobox-size-m-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); + --system-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); + --system-combobox-size-m-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); + --system-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); + --system-combobox-size-m-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); + --system-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --system-combobox-size-m-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --system-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-combobox-size-m-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-combobox-size-m-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-combobox-size-l-block-size: var(--spectrum-component-height-200); + --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-combobox-size-l-font-size: var(--spectrum-font-size-200); + --system-combobox-size-l-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-large); + --system-combobox-size-l-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); + --system-combobox-size-l-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-large); + --system-combobox-size-l-spacing-edge-to-menu: var(--spectrum-component-to-menu-large); + --system-combobox-size-l-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200); + --system-combobox-size-l-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200); + --system-combobox-size-l-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-200); + --system-combobox-size-l-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-200); + --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); + --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); + --system-combobox-size-xl-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-extra-large); + --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); + --system-combobox-size-xl-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-extra-large); + --system-combobox-size-xl-spacing-edge-to-menu: var(--spectrum-component-to-menu-extra-large); + --system-combobox-size-xl-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300); + --system-combobox-size-xl-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300); + --system-combobox-size-xl-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-300); + --system-combobox-size-xl-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-300); + --system-combobox-quiet-minimum-width-multiplier: var(--spectrum-combo-box-quiet-minimum-width-multiplier); + --system-combobox-quiet-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-quiet); + --system-combobox-quiet-spacing-inline-start-edge-to-text: var(--spectrum-field-edge-to-text-quiet); + --system-combobox-quiet-size-s-spacing-label-to: var(--spectrum-field-label-to-component-quiet-small); + --system-combobox-quiet-spacing-label-to: var(--spectrum-field-label-to-component-quiet-medium); + --system-combobox-quiet-size-m-spacing-label-to: var(--spectrum-field-label-to-component-quiet-medium); + --system-combobox-quiet-size-l-spacing-label-to: var(--spectrum-field-label-to-component-quiet-large); + --system-combobox-quiet-size-xl-spacing-label-to: var(--spectrum-field-label-to-component-quiet-extra-large); +} diff --git a/tokens/dist/css/components/express/datepicker.css b/tokens/dist/css/components/express/datepicker.css new file mode 100644 index 00000000000..31c3d84fd55 --- /dev/null +++ b/tokens/dist/css/components/express/datepicker.css @@ -0,0 +1,55 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-date-picker-initial-height: var(--spectrum-component-height-75); + --system-date-picker-border-radius: var(--spectrum-corner-radius-100); + --system-date-picker-border-radius-quiet: 0; + --system-date-picker-border-width: var(--spectrum-border-width-100); + --system-date-picker-min-width: var(--spectrum-field-width); + --system-date-picker-icon-size: var(--spectrum-workflow-icon-size-100); + --system-date-picker-pickerbutton-border-color: var(--spectrum-gray-500); + --system-date-picker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default); + --system-date-picker-pickerbutton-width: calc(var(--spectrum-field-edge-to-disclosure-icon-100) * 2 + var(--spectrum-workflow-icon-size-100)); + --system-date-picker-pickerbutton-width-quiet: calc(var(--system-date-picker-pickerbutton-width) - var(--system-date-picker-quiet-button-offset)); + --system-date-picker-quiet-button-offset: var(--spectrum-text-to-visual-100); + --system-date-picker-icon-to-button: var(--spectrum-text-to-visual-100); + --system-date-picker-icon-to-text: var(--spectrum-component-edge-to-text-100); + --system-date-picker-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-date-picker-focus-thickness: var(--spectrum-focus-indicator-thickness); + --system-date-picker-focus-animation: var(--spectrum-animation-duration-100); + --system-date-picker-focus-ring-width: var(--spectrum-border-width-100); + --system-date-picker-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-date-picker-focus-line-gap: var(--spectrum-spacing-75); + --system-date-picker-invalid-quiet-color: var(--spectrum-negative-border-color-default); + --system-date-picker-quiet-border-color-hover: var(--spectrum-gray-500); + --system-date-picker-border-color-disabled: var(--spectrum-disabled-border-color); + --system-date-picker-dash-font-size: var(--spectrum-font-size-100); + --system-date-picker-dash-color: var(--spectrum-neutral-content-color-default); + --system-date-picker-dash-color-disabled: var(--spectrum-disabled-content-color); + --system-date-picker-range-dash-marin-inline-start: calc(var(--system-date-picker-dash-font-size) * -0.5); + --system-date-picker-range-dash-padding-top: 0; + --system-date-picker-input-width-base: calc(var(--system-date-picker-range-input-width-first) + var(--system-date-picker-icon-size)); + --system-date-picker-input-width: calc(var(--system-date-picker-input-width-base) + var(--system-date-picker-initial-height)); + --system-date-picker-input-width-quiet: calc(var(--system-date-picker-range-input-width-quiet-first) + var(--system-date-picker-icon-size) + var(--system-date-picker-initial-height)); + --system-date-picker-range-input-width-first: calc(var(--spectrum-datepicker-initial-width) - var(--spectrum-datepicker-generic-padding) * 2); + --system-date-picker-range-input-width-quiet-first: calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second)); + --system-date-picker-datetime-input-width-first: calc(var(--system-date-picker-input-width-base) + var(--spectrum-datepicker-datetime-width-first)); + --system-date-picker-datetime-input-width: calc(var(--system-date-picker-datetime-input-width-first) + var(--system-date-picker-icon-size) + var(--system-date-picker-initial-height)); + --system-date-picker-datetime-quiet-input-width-first: calc(var(--system-date-picker-input-width-base) + var(--spectrum-datepicker-input-datetime-width)); + --system-date-picker-datetime-quiet-input-width: calc(var(--system-date-picker-datetime-quiet-input-width-first) + var(--system-date-picker-icon-size) + var(--system-date-picker-initial-height)); + --system-date-picker-padding-inline-end: calc(var(--system-date-picker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--system-date-picker-border-width) * 2); + --system-date-picker-padding-inline-end-quiet: calc(var(--system-date-picker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--system-date-picker-quiet-button-offset)); + --system-date-picker-padding-inline-end-invalid: calc(var(--system-date-picker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--system-date-picker-icon-to-button) + var(--system-date-picker-icon-size) - var(--system-date-picker-border-width) * 2); + --system-date-picker-padding-inline-end-invalid-quiet: calc(var(--system-date-picker-pickerbutton-width-quiet) + var(--system-date-picker-icon-size) + var(--system-date-picker-icon-to-text)); +} diff --git a/tokens/dist/css/components/express/infieldbutton.css b/tokens/dist/css/components/express/infieldbutton.css new file mode 100644 index 00000000000..7b74455edd4 --- /dev/null +++ b/tokens/dist/css/components/express/infieldbutton.css @@ -0,0 +1,79 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-infield-button-border-width: 0; + --system-infield-button-border-color: transparent; + --system-infield-button-border-radius: var(--spectrum-corner-radius-75); + --system-infield-button-border-radius-reset: var(--spectrum-corner-radius-75); + --system-infield-button-stacked-top-border-radius-start-start: var(--spectrum-corner-radius-75); + --system-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-corner-radius-75); + --system-infield-button-background-color: var(--spectrum-gray-200); + --system-infield-button-background-color-hover: var(--spectrum-gray-300); + --system-infield-button-background-color-down: var(--spectrum-gray-400); + --system-infield-button-background-color-key-focus: var(--spectrum-gray-300); + --system-infield-button-height: var(--spectrum-component-height-100); + --system-infield-button-width: var(--spectrum-component-height-100); + --system-infield-button-stacked-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); + --system-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill); + --system-infield-button-inner-edge-to-fill: var(--spectrum-in-field-button-stacked-inner-edge-to-fill); + --system-infield-button-fill-padding: 0px; + --system-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium); + --system-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); + --system-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium); + --system-infield-button-animation-duration: var(--spectrum-animation-duration-100); + --system-infield-button-icon-color: var(--spectrum-neutral-content-color-default); + --system-infield-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-infield-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-infield-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-infield-button-fill-justify-content: center; + --system-infield-button-disabled-background-color: var(--spectrum-disabled-background-color); + --system-infield-button-disabled-background-color-hover: var(--spectrum-disabled-background-color); + --system-infield-button-disabled-background-color-down: var(--spectrum-disabled-background-color); + --system-infield-button-disabled-border-color: var(--spectrum-disabled-background-color); + --system-infield-button-disabled-icon-color: var(--spectrum-disabled-content-color); + --system-infield-button-disabled-icon-color-hover: var(--spectrum-disabled-content-color); + --system-infield-button-disabled-icon-color-down: var(--spectrum-disabled-content-color); + --system-infield-button-disabled-icon-color-key-focus: var(--spectrum-disabled-content-color); + --system-infield-button-size-s-height: var(--spectrum-component-height-75); + --system-infield-button-size-s-width: var(--spectrum-component-height-75); + --system-infield-button-size-s-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small); + --system-infield-button-size-s-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); + --system-infield-button-size-s-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small); + --system-infield-button-size-l-height: var(--spectrum-component-height-200); + --system-infield-button-size-l-width: var(--spectrum-component-height-200); + --system-infield-button-size-l-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large); + --system-infield-button-size-l-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); + --system-infield-button-size-l-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large); + --system-infield-button-size-xl-height: var(--spectrum-component-height-300); + --system-infield-button-size-xl-width: var(--spectrum-component-height-300); + --system-infield-button-size-xl-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large); + --system-infield-button-size-xl-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); + --system-infield-button-size-xl-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large); + --system-infield-button-top-width: var(--spectrum-in-field-button-width-stacked-medium); + --system-infield-button-bottom-width: var(--spectrum-in-field-button-width-stacked-medium); + --system-infield-button-top-size-s-width: var(--spectrum-in-field-button-width-stacked-small); + --system-infield-button-bottom-size-s-width: var(--spectrum-in-field-button-width-stacked-small); + --system-infield-button-top-size-l-width: var(--spectrum-in-field-button-width-stacked-large); + --system-infield-button-bottom-size-l-width: var(--spectrum-in-field-button-width-stacked-large); + --system-infield-button-top-size-xl-width: var(--spectrum-in-field-button-width-stacked-extra-large); + --system-infield-button-bottom-size-xl-width: var(--spectrum-in-field-button-width-stacked-extra-large); + --system-infield-button-quiet-background-color: transparent; + --system-infield-button-quiet-background-color-hover: transparent; + --system-infield-button-quiet-background-color-down: transparent; + --system-infield-button-quiet-background-color-key-focus: transparent; + --system-infield-button-quiet-infield-border-color: transparent; + --system-infield-button-quiet-border-width: 0; + --system-infield-button-quiet-disabled-background-color: transparent; + --system-infield-button-quiet-disabled-border-color: transparent; +} diff --git a/tokens/dist/css/components/express/picker.css b/tokens/dist/css/components/express/picker.css new file mode 100644 index 00000000000..9cea4da7da4 --- /dev/null +++ b/tokens/dist/css/components/express/picker.css @@ -0,0 +1,118 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-picker-background-color-default: var(--spectrum-gray-200); + --system-picker-background-color-default-open: var(--spectrum-gray-300); + --system-picker-background-color-active: var(--spectrum-gray-400); + --system-picker-background-color-hover: var(--spectrum-gray-300); + --system-picker-background-color-hover-open: var(--spectrum-gray-300); + --system-picker-background-color-key-focus: var(--spectrum-gray-300); + --system-picker-border-color-default: transparent; + --system-picker-border-color-default-open: transparent; + --system-picker-border-color-hover: transparent; + --system-picker-border-color-hover-open: transparent; + --system-picker-border-color-active: transparent; + --system-picker-border-color-key-focus: transparent; + --system-picker-border-width: 0px; + --system-picker-font-size: var(--spectrum-font-size-100); + --system-picker-font-weight: var(--spectrum-regular-font-weight); + --system-picker-placeholder-font-style: var(--spectrum-default-font-style); + --system-picker-line-height: var(--spectrum-line-height-100); + --system-picker-block-size: var(--spectrum-component-height-100); + --system-picker-inline-size: var(--spectrum-field-width); + --system-picker-border-radius: var(--spectrum-corner-radius-100); + --system-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-100); + --system-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-picker-spacing-edge-to-text-quiet: var(--spectrum-field-edge-to-text-quiet); + --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); + --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); + --system-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-medium); + --system-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-medium); + --system-picker-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-medium); + --system-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-medium); + --system-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); + --system-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100); + --system-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100); + --system-picker-spacing-edge-to-disclosure-icon-quiet: var(--spectrum-picker-end-edge-to-disclousure-icon-quiet); + --system-picker-animation-duration: var(--spectrum-animation-duration-100); + --system-picker-font-color-default: var(--spectrum-neutral-content-color-default); + --system-picker-font-color-default-open: var(--spectrum-neutral-content-color-focus); + --system-picker-font-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-font-color-hover-open: var(--spectrum-neutral-content-color-focus-hover); + --system-picker-font-color-active: var(--spectrum-neutral-content-color-down); + --system-picker-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-picker-icon-color-default: var(--spectrum-neutral-content-color-default); + --system-picker-icon-color-default-open: var(--spectrum-neutral-content-color-focus); + --system-picker-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-icon-color-hover-open: var(--spectrum-neutral-content-color-focus-hover); + --system-picker-icon-color-active: var(--spectrum-neutral-content-color-down); + --system-picker-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-picker-border-color-error-default: var(--spectrum-negative-border-color-default); + --system-picker-border-color-error-default-open: var(--spectrum-negative-border-color-focus); + --system-picker-border-color-error-hover: var(--spectrum-negative-border-color-hover); + --system-picker-border-color-error-hover-open: var(--spectrum-negative-border-color-focus-hover); + --system-picker-border-color-error-active: var(--spectrum-negative-border-color-down); + --system-picker-border-color-error-key-focus: var(--spectrum-negative-border-color-key-focus); + --system-picker-icon-color-error: var(--spectrum-negative-visual-color); + --system-picker-background-color-disabled: var(--spectrum-disabled-background-color); + --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-picker-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-picker-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-medium); + --system-picker-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-size-s-block-size: var(--spectrum-component-height-75); + --system-picker-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-picker-size-s-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-picker-size-s-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75); + --system-picker-size-s-spacing-text-to-icon: var(--spectrum-text-to-visual-75); + --system-picker-size-s-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-small); + --system-picker-size-s-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small); + --system-picker-size-s-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-small); + --system-picker-size-s-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-small); + --system-picker-size-s-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); + --system-picker-size-s-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75); + --system-picker-size-s-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75); + --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-small); + --system-picker-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-size-l-block-size: var(--spectrum-component-height-200); + --system-picker-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200); + --system-picker-size-l-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --system-picker-size-l-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200); + --system-picker-size-l-spacing-text-to-icon: var(--spectrum-text-to-visual-200); + --system-picker-size-l-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-large); + --system-picker-size-l-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large); + --system-picker-size-l-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-large); + --system-picker-size-l-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-large); + --system-picker-size-l-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); + --system-picker-size-l-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200); + --system-picker-size-l-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200); + --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-large); + --system-picker-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-size-xl-block-size: var(--spectrum-component-height-300); + --system-picker-size-xl-spacing-top-to-text: var(--spectrum-component-top-to-text-300); + --system-picker-size-xl-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --system-picker-size-xl-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300); + --system-picker-size-xl-spacing-text-to-icon: var(--spectrum-text-to-visual-300); + --system-picker-size-xl-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-extra-large); + --system-picker-size-xl-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large); + --system-picker-size-xl-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); + --system-picker-size-xl-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-extra-large); + --system-picker-size-xl-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); + --system-picker-size-xl-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300); + --system-picker-size-xl-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300); + --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-extra-large); +} diff --git a/tokens/dist/css/components/express/pickerbutton.css b/tokens/dist/css/components/express/pickerbutton.css new file mode 100644 index 00000000000..75ec274ef85 --- /dev/null +++ b/tokens/dist/css/components/express/pickerbutton.css @@ -0,0 +1,69 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-picker-button-background-color: var(--spectrum-gray-200); + --system-picker-button-background-color-hover: var(--spectrum-gray-300); + --system-picker-button-background-color-down: var(--spectrum-gray-400); + --system-picker-button-background-color-key-focus: var(--spectrum-gray-300); + --system-picker-button-border-color: none; + --system-picker-button-border-radius: var(--spectrum-corner-radius-75); + --system-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); + --system-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); + --system-picker-button-border-width: 0px; + --system-picker-button-height: var(--spectrum-component-height-100); + --system-picker-button-width: var(--spectrum-component-height-100); + --system-picker-button-gap: var(--spectrum-text-to-visual-50); + --system-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); + --system-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100); + --system-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200); + --system-picker-button-icon-color: var(--spectrum-neutral-content-color-default); + --system-picker-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-picker-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-picker-button-font-color: var(--spectrum-neutral-content-color-default); + --system-picker-button-font-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-button-font-color-down: var(--spectrum-neutral-content-color-down); + --system-picker-button-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); + --system-picker-button-font-style: var(--spectrum-default-font-style); + --system-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-picker-button-font-size: var(--spectrum-font-size-100); + --system-picker-button-background-animation-duration: var(--spectrum-animation-duration-100); + --system-picker-button-background-color-disabled: var(--spectrum-disabled-background-color); + --system-picker-button-background-color-hover-disabled: var(--spectrum-disabled-background-color); + --system-picker-button-background-color-down-disabled: var(--spectrum-disabled-background-color); + --system-picker-button-border-color-disabled: var(--spectrum-disabled-background-color); + --system-picker-button-font-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-font-color-hover-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-font-color-down-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-icon-color-hover-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-icon-color-down-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-size-s-height: var(--spectrum-component-height-75); + --system-picker-button-size-s-width: var(--spectrum-component-height-75); + --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); + --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-button-size-s-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75); + --system-picker-button-size-l-height: var(--spectrum-component-height-200); + --system-picker-button-size-l-width: var(--spectrum-component-height-200); + --system-picker-button-size-l-label-padding: var(--spectrum-text-to-visual-200); + --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-button-size-l-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200); + --system-picker-button-size-xl-height: var(--spectrum-component-height-300); + --system-picker-button-size-xl-width: var(--spectrum-component-height-300); + --system-picker-button-size-xl-label-padding: var(--spectrum-text-to-visual-300); + --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-button-size-xl-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300); +} diff --git a/tokens/dist/css/components/express/popover.css b/tokens/dist/css/components/express/popover.css new file mode 100644 index 00000000000..1f10191f096 --- /dev/null +++ b/tokens/dist/css/components/express/popover.css @@ -0,0 +1,29 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-popover-border-width: 0; + --system-popover-animation-distance: var(--spectrum-spacing-100); + --system-popover-background-color: var(--spectrum-background-layer-2-color); + --system-popover-border-color: var(--spectrum-gray-400); + --system-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area); + --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-popover-shadow-color: var(--spectrum-drop-shadow-color); + --system-popover-corner-radius: var(--spectrum-corner-radius-100); + --system-popover-pointer-width: var(--spectrum-popover-tip-width); + --system-popover-pointer-height: var(--spectrum-popover-tip-height); + --system-popover-pointer-edge-offset: calc(var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / 2); + --system-popover-pointer-edge-spacing: calc(var(--system-popover-pointer-edge-offset) - var(--spectrum-popover-tip-width) / 2); +} diff --git a/tokens/dist/css/components/express/radio.css b/tokens/dist/css/components/express/radio.css new file mode 100644 index 00000000000..7ec9e01fb04 --- /dev/null +++ b/tokens/dist/css/components/express/radio.css @@ -0,0 +1,82 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-radio-button-border-color-default: var(--spectrum-gray-800); + --system-radio-button-border-color-hover: var(--spectrum-gray-900); + --system-radio-button-border-color-down: var(--spectrum-gray-900); + --system-radio-button-border-color-focus: var(--spectrum-gray-900); + --system-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); + --system-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down); + --system-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-radio-disabled-content-color: var(--spectrum-disabled-content-color); + --system-radio-disabled-border-color: var(--spectrum-disabled-content-color); + --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); + --system-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000); + --system-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); + --system-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); + --system-radio-border-width: var(--spectrum-border-width-200); + --system-radio-button-background-color: var(--spectrum-gray-50); + --system-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); + --system-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down); + --system-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus); + --system-radio-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-radio-font-size: var(--spectrum-font-size-100); + --system-radio-line-height: var(--spectrum-line-height-100); + --system-radio-animation-duration: var(--spectrum-animation-duration-100); + --system-radio-height: var(--spectrum-component-height-100); + --system-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); + --system-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); + --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-size-s-height: var(--spectrum-component-height-75); + --system-radio-size-s-button-control-size: var(--spectrum-radio-button-control-size-small); + --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); + --system-radio-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-radio-size-s-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-radio-size-s-button-top-to-control: var(--spectrum-radio-button-top-to-control-small); + --system-radio-size-s-font-size: var(--spectrum-font-size-75); + --system-radio-size-m-height: var(--spectrum-component-height-100); + --system-radio-size-m-button-control-size: var(--spectrum-radio-button-control-size-medium); + --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-size-m-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-radio-size-m-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-radio-size-m-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); + --system-radio-size-m-font-size: var(--spectrum-font-size-100); + --system-radio-size-l-height: var(--spectrum-component-height-200); + --system-radio-size-l-button-control-size: var(--spectrum-radio-button-control-size-large); + --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); + --system-radio-size-l-label-top-to-text: var(--spectrum-component-top-to-text-200); + --system-radio-size-l-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --system-radio-size-l-button-top-to-control: var(--spectrum-radio-button-top-to-control-large); + --system-radio-size-l-font-size: var(--spectrum-font-size-200); + --system-radio-size-xl-height: var(--spectrum-component-height-300); + --system-radio-size-xl-button-control-size: var(--spectrum-radio-button-control-size-extra-large); + --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); + --system-radio-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-300); + --system-radio-size-xl-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --system-radio-size-xl-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large); + --system-radio-size-xl-font-size: var(--spectrum-font-size-300); + --system-radio-emphasized-button-checked-border-color-default: var(--spectrum-accent-color-900); + --system-radio-emphasized-button-checked-border-color-hover: var(--spectrum-accent-color-1000); + --system-radio-emphasized-button-checked-border-color-down: var(--spectrum-accent-color-1100); + --system-radio-emphasized-button-checked-border-color-focus: var(--spectrum-accent-color-1000); +} diff --git a/tokens/dist/css/components/express/rating.css b/tokens/dist/css/components/express/rating.css new file mode 100644 index 00000000000..1f5e34b38b0 --- /dev/null +++ b/tokens/dist/css/components/express/rating.css @@ -0,0 +1,34 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-rating-icon-color-default: var(--spectrum-neutral-content-color-default); + --system-rating-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-rating-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-rating-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-rating-icon-height: var(--spectrum-workflow-icon-size-100); + --system-rating-icon-width: var(--spectrum-workflow-icon-size-100); + --system-rating-border-radius: var(--spectrum-corner-radius-100); + --system-rating-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-rating-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-rating-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-rating-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100); + --system-rating-indicator-border-radius: var(--spectrum-corner-radius-75); + --system-rating-indicator-height: var(--spectrum-border-width-200); + --system-rating-emphasized-icon-color-default: var(--spectrum-accent-content-color-default); + --system-rating-emphasized-icon-color-hover: var(--spectrum-accent-content-color-hover); + --system-rating-emphasized-icon-color-down: var(--spectrum-accent-content-color-down); + --system-rating-emphasized-icon-color-key-focus: var(--spectrum-accent-content-color-key-focus); + --system-rating-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-rating-icon-count: var(--system-rating-icon-count); +} diff --git a/tokens/dist/css/components/express/search.css b/tokens/dist/css/components/express/search.css new file mode 100644 index 00000000000..2fe1a0ac9eb --- /dev/null +++ b/tokens/dist/css/components/express/search.css @@ -0,0 +1,72 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-search-border-color-default: var(--spectrum-gray-400); + --system-search-border-color-hover: var(--spectrum-gray-500); + --system-search-border-color-focus: var(--spectrum-gray-800); + --system-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-search-border-color-key-focus: var(--spectrum-gray-900); + --system-search-inline-size: var(--spectrum-field-width); + --system-search-min-inline-multiplier: var(--spectrum-search-field-minimum-width-multiplier); + --system-search-to-help-text: var(--spectrum-help-text-to-component); + --system-search-top-to-text: var(--spectrum-component-top-to-text-100); + --system-search-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-search-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-search-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-search-font-family: var(--spectrum-sans-font-family-stack); + --system-search-font-weight: var(--spectrum-regular-font-weight); + --system-search-font-style: var(--spectrum-default-font-style); + --system-search-line-height: var(--spectrum-line-height-100); + --system-search-color-default: var(--spectrum-neutral-content-color-default); + --system-search-color-hover: var(--spectrum-neutral-content-color-hover); + --system-search-color-focus: var(--spectrum-neutral-content-color-focus); + --system-search-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); + --system-search-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-search-border-width: var(--spectrum-border-width-100); + --system-search-background-color: var(--spectrum-gray-50); + --system-search-color-disabled: var(--spectrum-disabled-content-color); + --system-search-background-color-disabled: var(--spectrum-disabled-background-color); + --system-search-border-color-disabled: var(--spectrum-disabled-background-color); + --system-search-size-s-border-radius: calc(var(--spectrum-component-height-75) / 2); + --system-search-size-s-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-75); + --system-search-size-s-block-size: var(--spectrum-component-height-75); + --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); + --system-search-border-radius: calc(var(--spectrum-component-height-100) / 2); + --system-search-size-m-border-radius: calc(var(--spectrum-component-height-100) / 2); + --system-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100); + --system-search-size-m-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100); + --system-search-block-size: var(--spectrum-component-height-100); + --system-search-size-m-block-size: var(--spectrum-component-height-100); + --system-search-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-l-border-radius: calc(var(--spectrum-component-height-200) / 2); + --system-search-size-l-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200); + --system-search-size-l-block-size: var(--spectrum-component-height-200); + --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); + --system-search-size-xl-border-radius: calc(var(--spectrum-component-height-300) / 2); + --system-search-size-xl-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300); + --system-search-size-xl-block-size: var(--spectrum-component-height-300); + --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); + --system-search-quiet-background-color: transparent; + --system-search-quiet-background-color-disabled: transparent; + --system-search-quiet-border-color-disabled: var(--spectrum-disabled-border-color); + --system-search-quiet-border-radius: 0; + --system-search-quiet-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet); +} diff --git a/tokens/dist/css/components/express/slider.css b/tokens/dist/css/components/express/slider.css new file mode 100644 index 00000000000..a47d2f4108b --- /dev/null +++ b/tokens/dist/css/components/express/slider.css @@ -0,0 +1,98 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-slider-track-color: var(--spectrum-gray-200); + --system-slider-track-fill-color: var(--spectrum-gray-600); + --system-slider-ramp-track-color: var(--spectrum-gray-300); + --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); + --system-slider-handle-background-color: var(--spectrum-gray-50); + --system-slider-handle-background-color-disabled: var(--spectrum-gray-50); + --system-slider-ramp-handle-background-color: var(--spectrum-gray-50); + --system-slider-ticks-handle-background-color: var(--spectrum-gray-50); + --system-slider-handle-border-color: var(--spectrum-gray-800); + --system-slider-handle-disabled-background-color: var(--spectrum-gray-50); + --system-slider-tick-mark-color: var(--spectrum-gray-200); + --system-slider-handle-border-color-hover: var(--spectrum-gray-900); + --system-slider-handle-border-color-down: var(--spectrum-gray-900); + --system-slider-handle-border-color-key-focus: var(--spectrum-gray-900); + --system-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); + --system-slider-value-inline-size: 18px; + --system-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-slider-min-size: var(--spectrum-spacing-900); + --system-slider-track-corner-radius: var(--spectrum-corner-radius-75); + --system-slider-label-margin-start: var(--spectrum-spacing-300); + --system-slider-handle-border-width: var(--spectrum-border-width-200); + --system-slider-handle-margin-left: calc(var(--system-slider-handle-size) / -2); + --system-slider-controls-margin: calc(var(--system-slider-handle-size) / 2); + --system-slider-track-margin-offset: calc(var(--system-slider-controls-margin) * -1); + --system-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + var(--system-slider-handle-size) / 2); + --system-slider-input-top-size: calc(var(--system-slider-handle-size) / -2 / 4); + --system-slider-track-fill-thickness: var(--spectrum-slider-track-thickness); + --system-slider-tick-mark-width: var(--spectrum-border-width-200); + --system-slider-tick-mark-border-radius: 2px; + --system-slider-tick-handle-background-color: var(--spectrum-gray-75); + --system-slider-track-color-disabled: var(--spectrum-disabled-background-color); + --system-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color); + --system-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color); + --system-slider-label-text-color: var(--spectrum-neutral-content-color-default); + --system-slider-tick-label-color: var(--spectrum-neutral-content-color-default); + --system-slider-label-text-color-disabled: var(--spectrum-disabled-content-color); + --system-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color); + --system-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); + --system-slider-input-left: calc(var(--system-slider-handle-margin-left) / 4); + --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); + --system-slider-range-track-reset: 0; + --system-slider-size-s-font-size: var(--spectrum-font-size-75); + --system-slider-size-s-handle-size: var(--spectrum-slider-handle-size-small); + --system-slider-size-s-control-height: var(--spectrum-component-height-75); + --system-slider-size-s-handle-border-radius: var(--spectrum-corner-radius-200); + --system-slider-size-s-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small); + --system-slider-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-slider-size-s-control-to-field-label: var(--spectrum-slider-control-to-field-label-small); + --system-slider-size-s-value-side-padding-inline: var(--spectrum-spacing-100); + --system-slider-font-size: var(--spectrum-font-size-75); + --system-slider-size-m-font-size: var(--spectrum-font-size-75); + --system-slider-handle-size: var(--spectrum-slider-handle-size-medium); + --system-slider-size-m-handle-size: var(--spectrum-slider-handle-size-medium); + --system-slider-control-height: var(--spectrum-component-height-100); + --system-slider-size-m-control-height: var(--spectrum-component-height-100); + --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); + --system-slider-size-m-handle-border-radius: var(--spectrum-corner-radius-200); + --system-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium); + --system-slider-size-m-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium); + --system-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-slider-size-m-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); + --system-slider-size-m-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); + --system-slider-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-m-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-l-font-size: var(--spectrum-font-size-100); + --system-slider-size-l-handle-size: var(--spectrum-slider-handle-size-large); + --system-slider-size-l-control-height: var(--spectrum-component-height-200); + --system-slider-size-l-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); + --system-slider-size-l-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large); + --system-slider-size-l-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-slider-size-l-control-to-field-label: var(--spectrum-slider-control-to-field-label-large); + --system-slider-size-l-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-l-value-inline-size: 18px; + --system-slider-size-xl-font-size: var(--spectrum-font-size-200); + --system-slider-size-xl-handle-size: var(--spectrum-slider-handle-size-extra-large); + --system-slider-size-xl-control-height: var(--spectrum-component-height-300); + --system-slider-size-xl-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); + --system-slider-size-xl-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large); + --system-slider-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-200); + --system-slider-size-xl-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large); + --system-slider-size-xl-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-xl-value-inline-size: 22px; +} diff --git a/tokens/dist/css/components/express/stepper.css b/tokens/dist/css/components/express/stepper.css new file mode 100644 index 00000000000..8fd5f836e26 --- /dev/null +++ b/tokens/dist/css/components/express/stepper.css @@ -0,0 +1,58 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-stepper-border-width: var(--spectrum-border-width-200); + --system-stepper-border-color: var(--spectrum-gray-400); + --system-stepper-border-color-hover: var(--spectrum-gray-500); + --system-stepper-border-color-focus: var(--spectrum-gray-800); + --system-stepper-border-color-focus-hover: var(--spectrum-gray-900); + --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-stepper-border-radius: var(--spectrum-corner-radius-100); + --system-stepper-min-width-multiplier: var(--spectrum-text-field-minimum-width-multiplier); + --system-stepper-animation-duration: var(--spectrum-animation-duration-100); + --system-stepper-buttons-border-style: solid; + --system-stepper-buttons-border-width: var(--spectrum-border-width-200); + --system-stepper-buttons-border-color: transparent; + --system-stepper-buttons-background-color: var(--spectrum-gray-50); + --system-stepper-buttons-border-color-hover: transparent; + --system-stepper-buttons-border-color-focus: transparent; + --system-stepper-buttons-border-color-keyboard-focus: transparent; + --system-stepper-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-stepper-button-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); + --system-stepper-button-border-width: 0; + --system-stepper-button-background-color-focus: var(--spectrum-gray-400); + --system-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-300); + --system-stepper-border-color-invalid: transparent; + --system-stepper-border-color-hover-invalid: transparent; + --system-stepper-border-color-focus-invalid: transparent; + --system-stepper-border-color-focus-hover-invalid: transparent; + --system-stepper-border-color-keyboard-focus-invalid: transparent; + --system-stepper-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-stepper-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-stepper-button-border-color-quiet: transparent; + --system-stepper-button-border-color-disabled: var(--spectrum-gray-200); + --system-stepper-button-border-width-disabled: 0; + --system-stepper-buttons-background-color-disabled: var(--spectrum-disabled-background-color); + --system-stepper-size-s-button-width: var(--spectrum-in-field-button-width-stacked-small); + --system-stepper-size-s-height: var(--spectrum-component-height-75); + --system-stepper-button-width: var(--spectrum-in-field-button-width-stacked-medium); + --system-stepper-size-m-button-width: var(--spectrum-in-field-button-width-stacked-medium); + --system-stepper-height: var(--spectrum-component-height-100); + --system-stepper-size-m-height: var(--spectrum-component-height-100); + --system-stepper-size-l-button-width: var(--spectrum-in-field-button-width-stacked-large); + --system-stepper-size-l-height: var(--spectrum-component-height-200); + --system-stepper-size-xl-button-width: var(--spectrum-in-field-button-width-stacked-extra-large); + --system-stepper-size-xl-height: var(--spectrum-component-height-300); +} diff --git a/tokens/dist/css/components/express/switch.css b/tokens/dist/css/components/express/switch.css new file mode 100644 index 00000000000..73f6204bdfc --- /dev/null +++ b/tokens/dist/css/components/express/switch.css @@ -0,0 +1,76 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-switch-handle-border-color-default: var(--spectrum-gray-800); + --system-switch-handle-border-color-hover: var(--spectrum-gray-900); + --system-switch-handle-border-color-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-focus: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-default: var(--spectrum-gray-800); + --system-switch-handle-border-color-selected-hover: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-focus: var(--spectrum-gray-900); + --system-switch-label-color-default: var(--spectrum-neutral-content-color-default); + --system-switch-label-color-hover: var(--spectrum-neutral-content-color-hover); + --system-switch-label-color-down: var(--spectrum-neutral-content-color-down); + --system-switch-label-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-switch-label-color-disabled: var(--spectrum-disabled-content-color); + --system-switch-background-color: var(--spectrum-gray-300); + --system-switch-background-color-disabled: var(--spectrum-gray-300); + --system-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color); + --system-switch-background-color-selected-default: var(--spectrum-neutral-background-color-selected-default); + --system-switch-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-switch-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); + --system-switch-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); + --system-switch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-switch-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-switch-handle-background-color: var(--spectrum-gray-75); + --system-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color); + --system-switch-disabled-label-color-default: var(--spectrum-disabled-content-color); + --system-switch-emphasized-background-color-selected-default: var(--spectrum-accent-color-900); + --system-switch-emphasized-background-color-selected-hover: var(--spectrum-accent-color-1000); + --system-switch-emphasized-background-color-selected-down: var(--spectrum-accent-color-1100); + --system-switch-emphasized-background-color-selected-focus: var(--spectrum-accent-color-1000); + --system-switch-emphasized-handle-border-color-selected-default: var(--spectrum-accent-color-900); + --system-switch-emphasized-handle-border-color-selected-hover: var(--spectrum-accent-color-1000); + --system-switch-emphasized-handle-border-color-selected-down: var(--spectrum-accent-color-1100); + --system-switch-emphasized-handle-border-color-selected-focus: var(--spectrum-accent-color-1000); + --system-switch-size-s-min-height: var(--spectrum-component-height-75); + --system-switch-size-s-control-width: var(--spectrum-switch-control-width-small); + --system-switch-size-s-control-height: var(--spectrum-switch-control-height-small); + --system-switch-size-s-control-label-spacing: var(--spectrum-text-to-control-75); + --system-switch-size-s-spacing-top-to-control: var(--spectrum-switch-top-to-control-small); + --system-switch-size-s-spacing-top-to-label: var(--spectrum-component-top-to-text-75); + --system-switch-size-s-font-size: var(--spectrum-font-size-75); + --system-switch-size-m-min-height: var(--spectrum-component-height-100); + --system-switch-size-m-control-width: var(--spectrum-switch-control-width-medium); + --system-switch-size-m-control-height: var(--spectrum-switch-control-height-medium); + --system-switch-size-m-control-label-spacing: var(--spectrum-text-to-control-100); + --system-switch-size-m-spacing-top-to-control: var(--spectrum-switch-top-to-control-medium); + --system-switch-size-m-spacing-top-to-label: var(--spectrum-component-top-to-text-100); + --system-switch-size-m-font-size: var(--spectrum-font-size-100); + --system-switch-size-l-min-height: var(--spectrum-component-height-200); + --system-switch-size-l-control-width: var(--spectrum-switch-control-width-large); + --system-switch-size-l-control-height: var(--spectrum-switch-control-height-large); + --system-switch-size-l-control-label-spacing: var(--spectrum-text-to-control-200); + --system-switch-size-l-spacing-top-to-control: var(--spectrum-switch-top-to-control-large); + --system-switch-size-l-spacing-top-to-label: var(--spectrum-component-top-to-text-200); + --system-switch-size-l-font-size: var(--spectrum-font-size-200); + --system-switch-size-xl-min-height: var(--spectrum-component-height-300); + --system-switch-size-xl-control-width: var(--spectrum-switch-control-width-extra-large); + --system-switch-size-xl-control-height: var(--spectrum-switch-control-height-extra-large); + --system-switch-size-xl-control-label-spacing: var(--spectrum-text-to-control-300); + --system-switch-size-xl-spacing-top-to-control: var(--spectrum-switch-top-to-control-extra-large); + --system-switch-size-xl-spacing-top-to-label: var(--spectrum-component-top-to-text-300); + --system-switch-size-xl-font-size: var(--spectrum-font-size-300); +} diff --git a/tokens/dist/css/components/express/tabs.css b/tokens/dist/css/components/express/tabs.css new file mode 100644 index 00000000000..72d597dd766 --- /dev/null +++ b/tokens/dist/css/components/express/tabs.css @@ -0,0 +1,82 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-tabs-font-weight: var(--spectrum-bold-font-weight); + --system-tabs-item-height: var(--spectrum-tab-item-height-medium); + --system-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium); + --system-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-medium); + --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); + --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); + --system-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-medium); + --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); + --system-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-medium); + --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); + --system-tabs-color-selected: var(--spectrum-neutral-subdued-content-color-down); + --system-tabs-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-tabs-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-tabs-color-disabled: var(--spectrum-gray-500); + --system-tabs-font-family: var(--spectrum-sans-font-family-stack); + --system-tabs-font-style: var(--spectrum-default-font-style); + --system-tabs-font-size: var(--spectrum-font-size-100); + --system-tabs-line-height: var(--spectrum-line-height-100); + --system-tabs-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --system-tabs-focus-indicator-border-radius: var(--spectrum-corner-radius-100); + --system-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-medium); + --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-tabs-selection-indicator-color: var(--spectrum-neutral-subdued-content-color-down); + --system-tabs-list-background-direction: top; + --system-tabs-divider-background-color: var(--spectrum-gray-300); + --system-tabs-divider-size: var(--spectrum-border-width-200); + --system-tabs-divider-border-radius: 1px; + --system-tabs-animation-duration: var(--spectrum-animation-duration-100); + --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); + --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); + --system-tabs-size-s-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-small); + --system-tabs-size-s-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-small); + --system-tabs-size-s-start-to-edge: var(--spectrum-tab-item-start-to-edge-small); + --system-tabs-size-s-top-to-text: var(--spectrum-tab-item-top-to-text-small); + --system-tabs-size-s-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-small); + --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); + --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); + --system-tabs-size-s-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-small); + --system-tabs-size-s-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-small); + --system-tabs-size-s-font-size: var(--spectrum-font-size-75); + --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); + --system-tabs-size-l-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-large); + --system-tabs-size-l-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-large); + --system-tabs-size-l-start-to-edge: var(--spectrum-tab-item-start-to-edge-large); + --system-tabs-size-l-top-to-text: var(--spectrum-tab-item-top-to-text-large); + --system-tabs-size-l-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-large); + --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); + --system-tabs-size-l-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-large); + --system-tabs-size-l-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-large); + --system-tabs-size-l-font-size: var(--spectrum-font-size-200); + --system-tabs-size-xl-item-height: var(--spectrum-tab-item-height-extra-large); + --system-tabs-size-xl-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-extra-large); + --system-tabs-size-xl-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-extra-large); + --system-tabs-size-xl-start-to-edge: var(--spectrum-tab-item-start-to-edge-extra-large); + --system-tabs-size-xl-top-to-text: var(--spectrum-tab-item-top-to-text-extra-large); + --system-tabs-size-xl-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-extra-large); + --system-tabs-size-xl-icon-size: var(--spectrum-workflow-icon-size-200); + --system-tabs-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); + --system-tabs-size-xl-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-extra-large); + --system-tabs-size-xl-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-extra-large); + --system-tabs-size-xl-font-size: var(--spectrum-font-size-300); + --system-tabs-emphasized-color-selected: var(--spectrum-accent-content-color-default); + --system-tabs-emphasized-color-hover: var(--spectrum-accent-content-color-hover); + --system-tabs-emphasized-color-key-focus: var(--spectrum-accent-content-color-key-focus); + --system-tabs-emphasized-selection-indicator-color: var(--spectrum-accent-content-color-default); +} diff --git a/tokens/dist/css/components/express/tag.css b/tokens/dist/css/components/express/tag.css new file mode 100644 index 00000000000..4715acd23bb --- /dev/null +++ b/tokens/dist/css/components/express/tag.css @@ -0,0 +1,161 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-tag-border-color: var(--spectrum-gray-300); + --system-tag-border-color-hover: var(--spectrum-gray-400); + --system-tag-border-color-active: var(--spectrum-gray-500); + --system-tag-border-color-focus: var(--spectrum-gray-400); + --system-tag-size-small-corner-radius: var(--spectrum-component-height-75); + --system-tag-size-medium-corner-radius: var(--spectrum-component-height-100); + --system-tag-size-large-corner-radius: var(--spectrum-component-height-200); + --system-tag-background-color: transparent; + --system-tag-background-color-hover: var(--spectrum-gray-300); + --system-tag-background-color-active: var(--spectrum-gray-400); + --system-tag-background-color-focus: var(--spectrum-gray-300); + --system-tag-content-color: var(--spectrum-neutral-content-color-default); + --system-tag-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-tag-content-color-active: var(--spectrum-neutral-content-color-down); + --system-tag-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-tag-border-color-selected: var(--spectrum-neutral-background-color-default); + --system-tag-border-color-selected-hover: var(--spectrum-neutral-background-color-hover); + --system-tag-border-color-selected-active: var(--spectrum-neutral-background-color-down); + --system-tag-border-color-selected-focus: var(--spectrum-neutral-background-color-key-focus); + --system-tag-border-color-disabled: var(--spectrum-disabled-border-color); + --system-tag-background-color-disabled: transparent; + --system-tag-size-small-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-75); + --system-tag-size-small-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-75); + --system-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-75); + --system-tag-size-medium-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-100); + --system-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-100); + --system-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-100); + --system-tag-size-large-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-200); + --system-tag-size-large-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-200); + --system-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-200); + --system-tag-avatar-opacity-disabled: 0.3; + --system-tag-animation-duration: var(--spectrum-animation-duration-100); + --system-tag-border-width: var(--spectrum-border-width-100); + --system-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); + --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-tag-label-line-height: var(--spectrum-line-height-100); + --system-tag-label-font-weight: var(--spectrum-regular-font-weight); + --system-tag-content-color-selected: var(--spectrum-gray-50); + --system-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default); + --system-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down); + --system-tag-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); + --system-tag-border-color-invalid: var(--spectrum-negative-color-900); + --system-tag-border-color-invalid-hover: var(--spectrum-negative-color-1000); + --system-tag-border-color-invalid-active: var(--spectrum-negative-color-1100); + --system-tag-border-color-invalid-focus: var(--spectrum-negative-color-1000); + --system-tag-content-color-invalid: var(--spectrum-negative-content-color-default); + --system-tag-content-color-invalid-hover: var(--spectrum-negative-content-color-hover); + --system-tag-content-color-invalid-active: var(--spectrum-negative-content-color-down); + --system-tag-content-color-invalid-focus: var(--spectrum-negative-content-color-key-focus); + --system-tag-border-color-invalid-selected: var(--spectrum-negative-background-color-default); + --system-tag-border-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); + --system-tag-border-color-invalid-selected-focus: var(--spectrum-negative-background-color-down); + --system-tag-border-color-invalid-selected-active: var(--spectrum-negative-background-color-key-focus); + --system-tag-background-color-invalid-selected: var(--spectrum-negative-background-color-default); + --system-tag-background-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); + --system-tag-background-color-invalid-selected-active: var(--spectrum-negative-background-color-down); + --system-tag-background-color-invalid-selected-focus: var(--spectrum-negative-background-color-key-focus); + --system-tag-content-color-invalid-selected: var(--spectrum-white); + --system-tag-border-color-emphasized: var(--spectrum-accent-background-color-default); + --system-tag-border-color-emphasized-hover: var(--spectrum-accent-background-color-hover); + --system-tag-border-color-emphasized-active: var(--spectrum-accent-background-color-down); + --system-tag-border-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); + --system-tag-background-color-emphasized: var(--spectrum-accent-background-color-default); + --system-tag-background-color-emphasized-hover: var(--spectrum-accent-background-color-hover); + --system-tag-background-color-emphasized-active: var(--spectrum-accent-background-color-down); + --system-tag-background-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); + --system-tag-content-color-emphasized: var(--spectrum-white); + --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); + --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + --system-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); + --system-tag-height: var(--spectrum-component-height-100); + --system-tag-font-size: var(--spectrum-font-size-100); + --system-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); + --system-tag-size-s-height: var(--spectrum-component-height-75); + --system-tag-size-s-font-size: var(--spectrum-font-size-75); + --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tag-size-s-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-75); + --system-tag-size-s-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-small); + --system-tag-size-s-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); + --system-tag-size-s-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75); + --system-tag-size-s-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tag-size-s-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small); + --system-tag-size-s-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small); + --system-tag-size-s-avatar-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tag-size-s-label-spacing-block: var(--spectrum-component-top-to-text-75); + --system-tag-size-s-corner-radius: var(--system-tag-size-small-corner-radius); + --system-tag-size-s-spacing-inline-start: var(--system-tag-size-small-spacing-inline-start); + --system-tag-size-s-label-spacing-inline-end: var(--system-tag-size-small-label-spacing-inline-end); + --system-tag-size-s-clear-button-spacing-inline-end: var(--system-tag-size-small-clear-button-spacing-inline-end); + --system-scope-tag-height: var(--spectrum-component-height-100); + --system-tag-size-m-height: var(--spectrum-component-height-100); + --system-scope-tag-font-size: var(--spectrum-font-size-100); + --system-tag-size-m-font-size: var(--spectrum-font-size-100); + --system-scope-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-scope-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); + --system-tag-size-m-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); + --system-scope-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); + --system-tag-size-m-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); + --system-scope-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-size-m-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); + --system-scope-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-size-m-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); + --system-scope-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-size-m-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-scope-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-size-m-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); + --system-scope-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-size-m-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); + --system-scope-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-size-m-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-scope-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + --system-tag-size-m-label-spacing-block: var(--spectrum-component-top-to-text-100); + --system-scope-tag-corner-radius: var(--system-tag-size-medium-corner-radius); + --system-tag-size-m-corner-radius: var(--system-tag-size-medium-corner-radius); + --system-scope-tag-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); + --system-tag-size-m-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); + --system-scope-tag-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); + --system-tag-size-m-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); + --system-scope-tag-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); + --system-tag-size-m-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); + --system-tag-size-l-height: var(--spectrum-component-height-200); + --system-tag-size-l-font-size: var(--spectrum-font-size-200); + --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-tag-size-l-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-200); + --system-tag-size-l-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-large); + --system-tag-size-l-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-200); + --system-tag-size-l-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-200); + --system-tag-size-l-icon-spacing-inline-end: var(--spectrum-text-to-visual-200); + --system-tag-size-l-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-large); + --system-tag-size-l-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-large); + --system-tag-size-l-avatar-spacing-inline-end: var(--spectrum-text-to-visual-200); + --system-tag-size-l-label-spacing-block: var(--spectrum-component-top-to-text-200); + --system-tag-size-l-corner-radius: var(--system-tag-size-large-corner-radius); + --system-tag-size-l-spacing-inline-start: var(--system-tag-size-large-spacing-inline-start); + --system-tag-size-l-label-spacing-inline-end: var(--system-tag-size-large-label-spacing-inline-end); + --system-tag-size-l-clear-button-spacing-inline-end: var(--system-tag-size-large-clear-button-spacing-inline-end); +} diff --git a/tokens/dist/css/components/express/textfield.css b/tokens/dist/css/components/express/textfield.css new file mode 100644 index 00000000000..9db134539c7 --- /dev/null +++ b/tokens/dist/css/components/express/textfield.css @@ -0,0 +1,153 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-textfield-border-color: var(--spectrum-gray-400); + --system-textfield-border-color-hover: var(--spectrum-gray-500); + --system-textfield-border-color-focus: var(--spectrum-gray-800); + --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); + --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-textfield-border-width: var(--spectrum-border-width-200); + --system-textfield-texfield-animation-duration: var(--spectrum-animation-duration-100); + --system-textfield-width: 240px; + --system-textfield-min-width: var(--spectrum-text-field-minimum-width-multiplier); + --system-textfield-corner-radius: var(--spectrum-corner-radius-100); + --system-textfield-spacing-inline-quiet: var(--spectrum-field-edge-to-text-quiet); + --system-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100); + --system-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-100); + --system-textfield-spacing-block-quiet: var(--spectrum-field-edge-to-border-quiet); + --system-textfield-label-spacing-block: var(--spectrum-field-label-to-component); + --system-textfield-helptext-spacing-block: var(--spectrum-help-text-to-component); + --system-textfield-icon-spacing-inline-end-quiet-invalid: var(--spectrum-field-edge-to-alert-icon-quiet); + --system-textfield-icon-spacing-inline-end-quiet-valid: var(--spectrum-field-edge-to-validation-icon-quiet); + --system-textfield-font-family: var(--spectrum-sans-font-family-stack); + --system-textfield-font-weight: var(--spectrum-regular-font-weight); + --system-textfield-character-count-font-family: var(--spectrum-sans-font-family-stack); + --system-textfield-character-count-font-weight: var(--spectrum-regular-font-weight); + --system-textfield-character-count-spacing-inline: var(--spectrum-spacing-200); + --system-textfield-character-count-spacing-inline-side: var(--spectrum-side-label-character-count-to-field); + --system-textfield-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-textfield-background-color: var(--spectrum-gray-50); + --system-textfield-text-color-default: var(--spectrum-neutral-content-color-default); + --system-textfield-text-color-hover: var(--spectrum-neutral-content-color-hover); + --system-textfield-text-color-focus: var(--spectrum-neutral-content-color-focus); + --system-textfield-text-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); + --system-textfield-text-color-keyboard-focus: var(--spectrum-neutral-content-color-key-focus); + --system-textfield-text-color-readonly: var(--spectrum-neutral-content-color-default); + --system-textfield-background-color-disabled: var(--spectrum-disabled-background-color); + --system-textfield-border-color-disabled: var(--spectrum-disabled-border-color); + --system-textfield-text-color-disabled: var(--spectrum-disabled-content-color); + --system-textfield-border-color-invalid-default: var(--spectrum-negative-border-color-default); + --system-textfield-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); + --system-textfield-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); + --system-textfield-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); + --system-textfield-border-color-invalid-keyboard-focus: var(--spectrum-negative-border-color-key-focus); + --system-textfield-icon-color-invalid: var(--spectrum-negative-visual-color); + --system-textfield-text-color-invalid: var(--spectrum-neutral-content-color-default); + --system-textfield-text-color-valid: var(--spectrum-neutral-content-color-default); + --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); + --system-textfield-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-textfield-text-area-min-inline-size: var(--spectrum-text-area-minimum-width); + --system-textfield-text-area-min-block-size: var(--spectrum-text-area-minimum-height); + --system-textfield-size-s-height: var(--spectrum-component-height-75); + --system-textfield-size-s-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-small); + --system-textfield-size-s-label-spacing-inline-side-label: var(--spectrum-spacing-100); + --system-textfield-size-s-placeholder-font-size: var(--spectrum-font-size-75); + --system-textfield-size-s-spacing-inline: var(--spectrum-component-edge-to-text-75); + --system-textfield-size-s-icon-size-invalid: var(--spectrum-workflow-icon-size-75); + --system-textfield-size-s-icon-size-valid: var(--spectrum-checkmark-icon-size-75); + --system-textfield-size-s-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-small); + --system-textfield-size-s-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-small); + --system-textfield-size-s-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small); + --system-textfield-size-s-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-small); + --system-textfield-size-s-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-small); + --system-textfield-size-s-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-small); + --system-textfield-size-s-character-count-font-size: var(--spectrum-font-size-75); + --system-textfield-size-s-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); + --system-textfield-size-s-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-small); + --system-textfield-size-s-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-small); + --system-textfield-size-s-text-area-min-block-size-quiet: var(--spectrum-component-height-75); + --system-textfield-height: var(--spectrum-component-height-100); + --system-textfield-size-m-height: var(--spectrum-component-height-100); + --system-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium); + --system-textfield-size-m-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium); + --system-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --system-textfield-size-m-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); + --system-textfield-size-m-placeholder-font-size: var(--spectrum-font-size-100); + --system-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100); + --system-textfield-size-m-spacing-inline: var(--spectrum-component-edge-to-text-100); + --system-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100); + --system-textfield-size-m-icon-size-invalid: var(--spectrum-workflow-icon-size-100); + --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); + --system-textfield-size-m-icon-size-valid: var(--spectrum-checkmark-icon-size-100); + --system-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); + --system-textfield-size-m-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); + --system-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); + --system-textfield-size-m-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); + --system-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); + --system-textfield-size-m-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); + --system-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); + --system-textfield-size-m-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); + --system-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); + --system-textfield-size-m-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); + --system-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); + --system-textfield-size-m-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); + --system-textfield-character-count-font-size: var(--spectrum-font-size-75); + --system-textfield-size-m-character-count-font-size: var(--spectrum-font-size-75); + --system-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); + --system-textfield-size-m-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); + --system-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium); + --system-textfield-size-m-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium); + --system-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium); + --system-textfield-size-m-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium); + --system-textfield-text-area-min-block-size-quiet: var(--spectrum-component-height-100); + --system-textfield-size-m-text-area-min-block-size-quiet: var(--spectrum-component-height-100); + --system-textfield-size-l-height: var(--spectrum-component-height-200); + --system-textfield-size-l-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-large); + --system-textfield-size-l-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --system-textfield-size-l-placeholder-font-size: var(--spectrum-font-size-200); + --system-textfield-size-l-spacing-inline: var(--spectrum-component-edge-to-text-200); + --system-textfield-size-l-icon-size-invalid: var(--spectrum-workflow-icon-size-200); + --system-textfield-size-l-icon-size-valid: var(--spectrum-checkmark-icon-size-200); + --system-textfield-size-l-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-large); + --system-textfield-size-l-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-large); + --system-textfield-size-l-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large); + --system-textfield-size-l-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-large); + --system-textfield-size-l-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-large); + --system-textfield-size-l-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-large); + --system-textfield-size-l-character-count-font-size: var(--spectrum-font-size-100); + --system-textfield-size-l-character-count-spacing-block: var(--spectrum-component-bottom-to-text-100); + --system-textfield-size-l-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-large); + --system-textfield-size-l-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-large); + --system-textfield-size-l-text-area-min-block-size-quiet: var(--spectrum-component-height-200); + --system-textfield-size-xl-height: var(--spectrum-component-height-300); + --system-textfield-size-xl-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); + --system-textfield-size-xl-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --system-textfield-size-xl-placeholder-font-size: var(--spectrum-font-size-300); + --system-textfield-size-xl-spacing-inline: var(--spectrum-component-edge-to-text-200); + --system-textfield-size-xl-icon-size-invalid: var(--spectrum-workflow-icon-size-300); + --system-textfield-size-xl-icon-size-valid: var(--spectrum-checkmark-icon-size-300); + --system-textfield-size-xl-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-extra-large); + --system-textfield-size-xl-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-extra-large); + --system-textfield-size-xl-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large); + --system-textfield-size-xl-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-extra-large); + --system-textfield-size-xl-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-extra-large); + --system-textfield-size-xl-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-extra-large); + --system-textfield-size-xl-character-count-font-size: var(--spectrum-font-size-200); + --system-textfield-size-xl-character-count-spacing-block: var(--spectrum-component-bottom-to-text-200); + --system-textfield-size-xl-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-extra-large); + --system-textfield-size-xl-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-extra-large); + --system-textfield-size-xl-text-area-min-block-size-quiet: var(--spectrum-component-height-300); +} diff --git a/tokens/dist/css/components/express/toast.css b/tokens/dist/css/components/express/toast.css new file mode 100644 index 00000000000..4bde6151126 --- /dev/null +++ b/tokens/dist/css/components/express/toast.css @@ -0,0 +1,41 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-toast-background-color-default: var(--spectrum-neutral-background-color-default); + --system-toast-font-weight: var(--spectrum-regular-font-weight); + --system-toast-font-size: var(--spectrum-font-size-100); + --system-toast-corner-radius: var(--spectrum-corner-radius-100); + --system-toast-block-size: var(--spectrum-toast-height); + --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); + --system-toast-border-width: var(--spectrum-border-width-100); + --system-toast-line-height: var(--spectrum-line-height-100); + --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); + --system-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300); + --system-toast-spacing-text-and-action-button-to-divider: var(--spectrum-spacing-300); + --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon); + --system-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-300); + --system-toast-spacing-close-button: var(--spectrum-spacing-100); + --system-toast-spacing-block-start: var(--spectrum-spacing-100); + --system-toast-spacing-block-end: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); + --system-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text); + --system-toast-negative-background-color-default: var(--spectrum-negative-background-color-default); + --system-toast-positive-background-color-default: var(--spectrum-positive-background-color-default); + --system-toast-informative-background-color-default: var(--spectrum-informative-background-color-default); + --system-toast-text-and-icon-color: var(--spectrum-white); + --system-toast-divider-color: var(--spectrum-transparent-white-300); +} diff --git a/tokens/dist/css/components/express/tooltip.css b/tokens/dist/css/components/express/tooltip.css new file mode 100644 index 00000000000..557cba4ed11 --- /dev/null +++ b/tokens/dist/css/components/express/tooltip.css @@ -0,0 +1,44 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--express { + --system-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-background-color-default); + --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); + --system-tooltip-margin: 0px; + --system-tooltip-height: var(--spectrum-component-height-75); + --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); + --system-tooltip-border-radius: var(--spectrum-corner-radius-100); + --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); + --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); + --system-tooltip-font-size: var(--spectrum-font-size-75); + --system-tooltip-line-height: var(--spectrum-line-height-100); + --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-tooltip-font-weight: var(--spectrum-regular-font-weight); + --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); + --system-tooltip-spacing-block-start: var(--spectrum-component-top-to-text-75); + --system-tooltip-spacing-block-end: var(--spectrum-component-bottom-to-text-75); + --system-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); + --system-tooltip-background-color-informative: var(--spectrum-informative-background-color-default); + --system-tooltip-background-color-positive: var(--spectrum-positive-background-color-default); + --system-tooltip-background-color-negative: var(--spectrum-negative-background-color-default); + --system-tooltip-content-color: var(--spectrum-white); + --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); + --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); + --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); + --system-tooltip-tip-height-percentage: 50%; + --system-tooltip-tip-antialiasing-inset: 0.5px; + --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); + --system-tooltip-background-color-default: var(--system-tooltip-backgound-color-default-neutral); +} diff --git a/tokens/dist/css/components/spectrum-two/accordion.css b/tokens/dist/css/components/spectrum-two/accordion.css new file mode 100644 index 00000000000..e0cba00ec43 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/accordion.css @@ -0,0 +1,112 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-accordion-item-width: var(--spectrum-accordion-minimum-width); + --system-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text); + --system-accordion-edge-to-disclosure-indicator-space: var(--spectrum-accordion-edge-to-disclosure-indicator); + --system-accordion-edge-to-text-space: var(--spectrum-accordion-edge-to-text); + --system-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-accordion-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-accordion-corner-radius: var(--spectrum-corner-radius-100); + --system-accordion-item-content-area-top-to-content: var(--spectrum-accordion-content-area-top-to-content); + --system-accordion-item-content-area-bottom-to-content: var(--spectrum-accordion-content-area-bottom-to-content); + --system-accordion-item-header-font: var(--spectrum-sans-font-family-stack); + --system-accordion-item-header-font-weight: var(--spectrum-bold-font-weight); + --system-accordion-item-header-font-style: var(--spectrum-default-font-style); + --system-accordion-item-header-line-height: 1.25; + --system-accordion-item-content-font: var(--spectrum-sans-font-family-stack); + --system-accordion-item-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-accordion-item-content-font-style: var(--spectrum-body-sans-serif-font-style); + --system-accordion-item-content-line-height: var(--spectrum-line-height-100); + --system-accordion-background-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-default)); + --system-accordion-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-hover)); + --system-accordion-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-down)); + --system-accordion-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus)); + --system-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default); + --system-accordion-item-header-color-hover: var(--spectrum-neutral-content-color-hover); + --system-accordion-item-header-color-down: var(--spectrum-neutral-content-color-down); + --system-accordion-item-header-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-accordion-item-header-disabled-color: var(--spectrum-disabled-content-color); + --system-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color); + --system-accordion-item-content-color: var(--spectrum-body-color); + --system-accordion-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-accordion-divider-color: var(--spectrum-gray-200); + --system-accordion-item-header-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-accordion-item-content-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-accordion-size-s-item-height: var(--spectrum-component-height-100); + --system-accordion-size-s-disclosure-indicator-height: var(--spectrum-component-height-75); + --system-accordion-size-s-component-edge-to-text: var(--spectrum-component-edge-to-text-50); + --system-accordion-size-s-item-header-font-size: var(--spectrum-font-size-200); + --system-accordion-size-s-item-content-font-size: var(--spectrum-body-size-xs); + --system-accordion-size-s-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-small); + --system-accordion-size-s-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-small); + --system-accordion-item-height: var(--spectrum-component-height-200); + --system-accordion-size-m-item-height: var(--spectrum-component-height-200); + --system-accordion-disclosure-indicator-height: var(--spectrum-component-height-100); + --system-accordion-size-m-disclosure-indicator-height: var(--spectrum-component-height-100); + --system-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-75); + --system-accordion-size-m-component-edge-to-text: var(--spectrum-component-edge-to-text-75); + --system-accordion-item-header-font-size: var(--spectrum-font-size-300); + --system-accordion-size-m-item-header-font-size: var(--spectrum-font-size-300); + --system-accordion-item-content-font-size: var(--spectrum-body-size-s); + --system-accordion-size-m-item-content-font-size: var(--spectrum-body-size-s); + --system-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium); + --system-accordion-size-m-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium); + --system-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium); + --system-accordion-size-m-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium); + --system-accordion-size-l-item-height: var(--spectrum-component-height-300); + --system-accordion-size-l-disclosure-indicator-height: var(--spectrum-component-height-200); + --system-accordion-size-l-component-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-accordion-size-l-item-header-font-size: var(--spectrum-font-size-500); + --system-accordion-size-l-item-content-font-size: var(--spectrum-body-size-m); + --system-accordion-size-l-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-large); + --system-accordion-size-l-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-large); + --system-accordion-size-xl-item-height: var(--spectrum-component-height-400); + --system-accordion-size-xl-disclosure-indicator-height: var(--spectrum-component-height-300); + --system-accordion-size-xl-component-edge-to-text: var(--spectrum-component-edge-to-text-200); + --system-accordion-size-xl-item-header-font-size: var(--spectrum-font-size-700); + --system-accordion-size-xl-item-content-font-size: var(--spectrum-body-size-l); + --system-accordion-size-xl-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-extra-large); + --system-accordion-size-xl-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-extra-large); + --system-accordion-compact-size-s-item-height: var(--spectrum-component-height-75); + --system-accordion-compact-size-s-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small); + --system-accordion-compact-size-s-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small); + --system-accordion-compact-item-height: var(--spectrum-component-height-100); + --system-accordion-compact-size-m-item-height: var(--spectrum-component-height-100); + --system-accordion-compact-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium); + --system-accordion-compact-size-m-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium); + --system-accordion-compact-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium); + --system-accordion-compact-size-m-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium); + --system-accordion-compact-size-l-item-height: var(--spectrum-component-height-200); + --system-accordion-compact-size-l-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large); + --system-accordion-compact-size-l-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large); + --system-accordion-compact-size-xl-item-height: var(--spectrum-component-height-300); + --system-accordion-compact-size-xl-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large); + --system-accordion-compact-size-xl-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large); + --system-accordion-spacious-size-s-item-header-line-height: 1.25; + --system-accordion-spacious-size-s-item-header-top-to-text-space: var(--spectrum-accordion-small-top-to-text-spacious); + --system-accordion-spacious-size-s-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small); + --system-accordion-spacious-item-header-line-height: 1.278; + --system-accordion-spacious-size-m-item-header-line-height: 1.278; + --system-accordion-spacious-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium); + --system-accordion-spacious-size-m-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium); + --system-accordion-spacious-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium); + --system-accordion-spacious-size-m-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium); + --system-accordion-spacious-size-l-item-header-line-height: 1.273; + --system-accordion-spacious-size-l-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-large); + --system-accordion-spacious-size-l-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-large); + --system-accordion-spacious-size-xl-item-header-line-height: 1.25; + --system-accordion-spacious-size-xl-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-extra-large); + --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-extra-large); +} diff --git a/tokens/dist/css/components/spectrum-two/actionbar.css b/tokens/dist/css/components/spectrum-two/actionbar.css new file mode 100644 index 00000000000..ccd75fe9d4d --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/actionbar.css @@ -0,0 +1,37 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-action-bar-height: var(--spectrum-action-bar-height); + --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); + --system-action-bar-item-counter-line-height: var(--spectrum-line-height-100); + --system-action-bar-item-counter-color: var(--spectrum-neutral-content-color-default); + --system-action-bar-item-counter-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-action-bar-popover-background-color: var(--spectrum-gray-25); + --system-action-bar-popover-border-color: var(--spectrum-gray-400); + --system-action-bar-emphasized-background-color: var(--spectrum-informative-background-color-default); + --system-action-bar-emphasized-item-counter-color: var(--spectrum-white); + --system-action-bar-spacing-outer-edge: var(--spectrum-spacing-300); + --system-action-bar-spacing-close-button-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-start: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-end: var(--spectrum-spacing-75); + --system-action-bar-spacing-item-counter-top: var(--spectrum-action-bar-top-to-item-counter); + --system-action-bar-spacing-item-counter-end: var(--spectrum-spacing-400); + --system-action-bar-spacing-action-group-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-action-group-end: var(--spectrum-spacing-100); + --system-action-bar-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color); +} diff --git a/tokens/dist/css/components/spectrum-two/actionbutton.css b/tokens/dist/css/components/spectrum-two/actionbutton.css new file mode 100644 index 00000000000..2eb70e5c4fb --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/actionbutton.css @@ -0,0 +1,191 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-action-button-animation-duration: var(--spectrum-animation-duration-100); + --system-action-button-border-radius: var(--spectrum-corner-radius-100); + --system-action-button-border-width: var(--spectrum-border-width-100); + --system-action-button-content-color-default: var(--spectrum-neutral-content-color-default); + --system-action-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-action-button-content-color-down: var(--spectrum-neutral-content-color-down); + --system-action-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-action-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-action-button-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-action-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-action-button-background-color-default: var(--spectrum-gray-50); + --system-action-button-background-color-hover: var(--spectrum-gray-100); + --system-action-button-background-color-down: var(--spectrum-gray-200); + --system-action-button-background-color-focus: var(--spectrum-gray-100); + --system-action-button-border-color-default: var(--spectrum-gray-400); + --system-action-button-border-color-hover: var(--spectrum-gray-500); + --system-action-button-border-color-down: var(--spectrum-gray-600); + --system-action-button-border-color-focus: var(--spectrum-gray-500); + --system-action-button-background-color-disabled: transparent; + --system-action-button-border-color-disabled: var(--spectrum-disabled-border-color); + --system-action-button-content-color-disabled: var(--spectrum-disabled-content-color); + --system-action-button-quiet-background-color-default: transparent; + --system-action-button-quiet-background-color-hover: var(--spectrum-gray-100); + --system-action-button-quiet-background-color-down: var(--spectrum-gray-200); + --system-action-button-quiet-background-color-focus: var(--spectrum-gray-100); + --system-action-button-quiet-background-color-disabled: transparent; + --system-action-button-quiet-border-color-default: transparent; + --system-action-button-quiet-border-color-hover: transparent; + --system-action-button-quiet-border-color-down: transparent; + --system-action-button-quiet-border-color-focus: transparent; + --system-action-button-quiet-border-color-disabled: transparent; + --system-action-button-selected-background-color-default: var(--spectrum-neutral-background-color-selected-default); + --system-action-button-selected-background-color-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-action-button-selected-background-color-down: var(--spectrum-neutral-background-color-selected-down); + --system-action-button-selected-background-color-focus: var(--spectrum-neutral-background-color-selected-key-focus); + --system-action-button-selected-content-color-default: var(--spectrum-gray-50); + --system-action-button-selected-content-color-hover: var(--spectrum-gray-50); + --system-action-button-selected-content-color-down: var(--spectrum-gray-50); + --system-action-button-selected-content-color-focus: var(--spectrum-gray-50); + --system-action-button-selected-border-color-default: transparent; + --system-action-button-selected-border-color-hover: transparent; + --system-action-button-selected-border-color-down: transparent; + --system-action-button-selected-border-color-focus: transparent; + --system-action-button-selected-border-color-disabled: transparent; + --system-action-button-selected-background-color-disabled: var(--spectrum-disabled-background-color); + --system-action-button-selected-emphasized-background-color-default: var(--spectrum-accent-background-color-default); + --system-action-button-selected-emphasized-background-color-hover: var(--spectrum-accent-background-color-hover); + --system-action-button-selected-emphasized-background-color-down: var(--spectrum-accent-background-color-down); + --system-action-button-selected-emphasized-background-color-focus: var(--spectrum-accent-background-color-key-focus); + --system-action-button-selected-emphasized-content-color-default: var(--spectrum-white); + --system-action-button-selected-emphasized-content-color-hover: var(--spectrum-white); + --system-action-button-selected-emphasized-content-color-down: var(--spectrum-white); + --system-action-button-selected-emphasized-content-color-focus: var(--spectrum-white); + --system-action-button-static-black-quiet-border-color-default: transparent; + --system-action-button-static-white-quiet-border-color-default: transparent; + --system-action-button-static-black-quiet-border-color-hover: transparent; + --system-action-button-static-white-quiet-border-color-hover: transparent; + --system-action-button-static-black-quiet-border-color-down: transparent; + --system-action-button-static-white-quiet-border-color-down: transparent; + --system-action-button-static-black-quiet-border-color-focus: transparent; + --system-action-button-static-white-quiet-border-color-focus: transparent; + --system-action-button-static-black-quiet-border-color-disabled: transparent; + --system-action-button-static-white-quiet-border-color-disabled: transparent; + --system-action-button-static-black-background-color-default: transparent; + --system-action-button-static-black-background-color-hover: var(--spectrum-transparent-black-400); + --system-action-button-static-black-background-color-down: var(--spectrum-transparent-black-500); + --system-action-button-static-black-background-color-focus: var(--spectrum-transparent-black-400); + --system-action-button-static-black-background-color-disabled: transparent; + --system-action-button-static-black-border-color-default: var(--spectrum-transparent-black-500); + --system-action-button-static-black-border-color-hover: var(--spectrum-transparent-black-600); + --system-action-button-static-black-border-color-down: var(--spectrum-transparent-black-700); + --system-action-button-static-black-border-color-focus: var(--spectrum-transparent-black-600); + --system-action-button-static-black-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --system-action-button-static-black-content-color-default: var(--spectrum-black); + --system-action-button-static-black-content-color-hover: var(--spectrum-black); + --system-action-button-static-black-content-color-down: var(--spectrum-black); + --system-action-button-static-black-content-color-focus: var(--spectrum-black); + --system-action-button-static-black-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-action-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-action-button-static-black-selected-background-color-default: var(--spectrum-transparent-black-900); + --system-action-button-static-black-selected-background-color-hover: var(--spectrum-transparent-black-1000); + --system-action-button-static-black-selected-background-color-down: var(--spectrum-transparent-black-1000); + --system-action-button-static-black-selected-background-color-focus: var(--spectrum-transparent-black-1000); + --system-action-button-static-black-selected-background-color-disabled: var(--spectrum-transparent-black-300); + --system-action-button-static-black-selected-border-color-disabled: transparent; + --system-action-button-static-black-selected-content-color-default: var(--spectrum-white); + --system-action-button-static-black-selected-emphasized-background-color-default: var(--spectrum-transparent-black-900); + --system-action-button-static-black-selected-emphasized-background-color-hover: var(--spectrum-transparent-black-1000); + --system-action-button-static-black-selected-emphasized-background-color-down: var(--spectrum-transparent-black-1000); + --system-action-button-static-black-selected-emphasized-background-color-focus: var(--spectrum-transparent-black-1000); + --system-action-button-static-black-selected-emphasized-content-color-default: var(--spectrum-gray-50); + --system-action-button-static-black-selected-emphasized-content-color-hover: var(--spectrum-gray-900); + --system-action-button-static-black-selected-emphasized-content-color-down: var(--spectrum-gray-900); + --system-action-button-static-black-selected-emphasized-content-color-focus: var(--spectrum-gray-900); + --system-action-button-static-white-background-color-default: transparent; + --system-action-button-static-white-background-color-hover: var(--spectrum-transparent-white-400); + --system-action-button-static-white-background-color-down: var(--spectrum-transparent-white-500); + --system-action-button-static-white-background-color-focus: var(--spectrum-transparent-white-400); + --system-action-button-static-white-background-color-disabled: transparent; + --system-action-button-static-white-border-color-default: var(--spectrum-transparent-white-500); + --system-action-button-static-white-border-color-hover: var(--spectrum-transparent-white-600); + --system-action-button-static-white-border-color-down: var(--spectrum-transparent-white-700); + --system-action-button-static-white-border-color-focus: var(--spectrum-transparent-white-600); + --system-action-button-static-white-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --system-action-button-static-white-content-color-default: var(--spectrum-white); + --system-action-button-static-white-content-color-hover: var(--spectrum-white); + --system-action-button-static-white-content-color-down: var(--spectrum-white); + --system-action-button-static-white-content-color-focus: var(--spectrum-white); + --system-action-button-static-white-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-action-button-static-white-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-action-button-static-white-selected-background-color-default: var(--spectrum-transparent-white-900); + --system-action-button-static-white-selected-background-color-hover: var(--spectrum-transparent-white-1000); + --system-action-button-static-white-selected-background-color-down: var(--spectrum-transparent-white-1000); + --system-action-button-static-white-selected-background-color-focus: var(--spectrum-transparent-white-1000); + --system-action-button-static-white-selected-background-color-disabled: var(--spectrum-transparent-white-300); + --system-action-button-static-white-selected-border-color-disabled: transparent; + --system-action-button-static-white-selected-content-color-default: var(--spectrum-black); + --system-action-button-static-white-selected-emphasized-background-color-default: var(--spectrum-transparent-white-900); + --system-action-button-static-white-selected-emphasized-background-color-hover: var(--spectrum-transparent-white-1000); + --system-action-button-static-white-selected-emphasized-background-color-down: var(--spectrum-transparent-white-1000); + --system-action-button-static-white-selected-emphasized-background-color-focus: var(--spectrum-transparent-white-1000); + --system-action-button-static-white-selected-emphasized-content-color-default: var(--spectrum-gray-50); + --system-action-button-size-xs-min-width: calc(var(--spectrum-component-edge-to-visual-only-50) * 2 + var(--spectrum-workflow-icon-size-50)); + --system-action-button-size-xs-height: var(--spectrum-component-height-50); + --system-action-button-size-xs-icon-size: var(--spectrum-workflow-icon-size-50); + --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); + --system-action-button-size-xs-text-to-visual: var(--spectrum-text-to-visual-50); + --system-action-button-size-xs-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small); + --system-action-button-size-xs-edge-to-visual-size: var(--spectrum-component-edge-to-visual-50); + --system-action-button-size-xs-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-50); + --system-action-button-size-xs-edge-to-text-size: var(--spectrum-component-edge-to-text-50); + --system-action-button-size-s-min-width: calc(var(--spectrum-component-edge-to-visual-only-75) * 2 + var(--spectrum-workflow-icon-size-75)); + --system-action-button-size-s-height: var(--spectrum-component-height-75); + --system-action-button-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-action-button-size-s-font-size: var(--spectrum-font-size-75); + --system-action-button-size-s-text-to-visual: var(--spectrum-text-to-visual-75); + --system-action-button-size-s-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small); + --system-action-button-size-s-edge-to-visual-size: var(--spectrum-component-edge-to-visual-75); + --system-action-button-size-s-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-75); + --system-action-button-size-s-edge-to-text-size: var(--spectrum-component-edge-to-text-75); + --system-action-button-min-width: calc(var(--spectrum-component-edge-to-visual-only-100) * 2 + var(--spectrum-workflow-icon-size-100)); + --system-action-button-size-m-min-width: calc(var(--spectrum-component-edge-to-visual-only-100) * 2 + var(--spectrum-workflow-icon-size-100)); + --system-action-button-height: var(--spectrum-component-height-100); + --system-action-button-size-m-height: var(--spectrum-component-height-100); + --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); + --system-action-button-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-action-button-font-size: var(--spectrum-font-size-100); + --system-action-button-size-m-font-size: var(--spectrum-font-size-100); + --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); + --system-action-button-size-m-text-to-visual: var(--spectrum-text-to-visual-100); + --system-action-button-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --system-action-button-size-m-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --system-action-button-edge-to-visual-size: var(--spectrum-component-edge-to-visual-100); + --system-action-button-size-m-edge-to-visual-size: var(--spectrum-component-edge-to-visual-100); + --system-action-button-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-100); + --system-action-button-size-m-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-100); + --system-action-button-edge-to-text-size: var(--spectrum-component-edge-to-text-100); + --system-action-button-size-m-edge-to-text-size: var(--spectrum-component-edge-to-text-100); + --system-action-button-size-l-min-width: calc(var(--spectrum-component-edge-to-visual-only-200) * 2 + var(--spectrum-workflow-icon-size-200)); + --system-action-button-size-l-height: var(--spectrum-component-height-200); + --system-action-button-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-action-button-size-l-font-size: var(--spectrum-font-size-200); + --system-action-button-size-l-text-to-visual: var(--spectrum-text-to-visual-200); + --system-action-button-size-l-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large); + --system-action-button-size-l-edge-to-visual-size: var(--spectrum-component-edge-to-visual-200); + --system-action-button-size-l-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-200); + --system-action-button-size-l-edge-to-text-size: var(--spectrum-component-edge-to-text-200); + --system-action-button-size-xl-min-width: calc(var(--spectrum-component-edge-to-visual-only-300) * 2 + var(--spectrum-workflow-icon-size-300)); + --system-action-button-size-xl-height: var(--spectrum-component-height-300); + --system-action-button-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-action-button-size-xl-text-to-visual: var(--spectrum-text-to-visual-300); + --system-action-button-size-xl-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large); + --system-action-button-size-xl-edge-to-visual-size: var(--spectrum-component-edge-to-visual-300); + --system-action-button-size-xl-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-300); + --system-action-button-size-xl-edge-to-text-size: var(--spectrum-component-edge-to-text-300); +} diff --git a/tokens/dist/css/components/spectrum-two/actiongroup.css b/tokens/dist/css/components/spectrum-two/actiongroup.css new file mode 100644 index 00000000000..a25ab31c862 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/actiongroup.css @@ -0,0 +1,33 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-action-group-gap-size-compact: 0; + --system-action-group-horizontal-spacing-compact: -1px; + --system-action-group-vertical-spacing-compact: -1px; + --system-action-group-button-spacing-reset: 0; + --system-action-group-border-radius-reset: 0; + --system-action-group-border-radius: var(--spectrum-corner-radius-100); + --system-action-group-size-xs-horizontal-spacing-regular: var(--spectrum-spacing-75); + --system-action-group-size-s-horizontal-spacing-regular: var(--spectrum-spacing-75); + --system-action-group-size-xs-vertical-spacing-regular: var(--spectrum-spacing-75); + --system-action-group-size-s-vertical-spacing-regular: var(--spectrum-spacing-75); + --system-action-group-horizontal-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-m-horizontal-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-l-horizontal-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-xl-horizontal-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-m-vertical-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-l-vertical-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-xl-vertical-spacing-regular: var(--spectrum-spacing-100); +} diff --git a/tokens/dist/css/components/spectrum-two/alertbanner.css b/tokens/dist/css/components/spectrum-two/alertbanner.css new file mode 100644 index 00000000000..43e4cefddf8 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/alertbanner.css @@ -0,0 +1,31 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default); + --system-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height); + --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); + --system-alert-banner-size: auto; + --system-alert-banner-font-size: var(--spectrum-font-size-100); + --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); + --system-alert-banner-start-edge: var(--spectrum-spacing-300); + --system-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300); + --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); + --system-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon); + --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); + --system-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text); + --system-alert-banner-informative-background: var(--spectrum-informative-background-color-default); + --system-alert-banner-negative-background: var(--spectrum-negative-background-color-default); + --system-alert-banner-font-color: var(--spectrum-white); +} diff --git a/tokens/dist/css/components/spectrum-two/alertdialog.css b/tokens/dist/css/components/spectrum-two/alertdialog.css new file mode 100644 index 00000000000..d7a9b26727f --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/alertdialog.css @@ -0,0 +1,35 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); + --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); + --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-dialog-warning-icon-color: var(--spectrum-notice-visual-color); + --system-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color); + --system-alert-dialog-title-font-family: var(--spectrum-sans-font-family-stack); + --system-alert-dialog-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-alert-dialog-title-font-style: var(--spectrum-heading-sans-serif-font-style); + --system-alert-dialog-title-font-size: var(--spectrum-alert-dialog-title-size); + --system-alert-dialog-title-line-height: var(--spectrum-heading-line-height); + --system-alert-dialog-title-color: var(--spectrum-heading-color); + --system-alert-dialog-body-font-family: var(--spectrum-sans-font-family-stack); + --system-alert-dialog-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-alert-dialog-body-font-style: var(--spectrum-body-sans-serif-font-style); + --system-alert-dialog-body-font-size: var(--spectrum-alert-dialog-description-size); + --system-alert-dialog-body-line-height: var(--spectrum-line-height-100); + --system-alert-dialog-body-color: var(--spectrum-body-color); + --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200); + --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300); + --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300); +} diff --git a/tokens/dist/css/components/spectrum-two/asset.css b/tokens/dist/css/components/spectrum-two/asset.css new file mode 100644 index 00000000000..4fc04f382d8 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/asset.css @@ -0,0 +1,19 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-asset-transition-duration: var(--spectrum-animation-duration-100); + --system-asset-folder-background-color: var(--spectrum-gray-200); + --system-asset-file-background-color: var(--spectrum-gray-25); + --system-asset-icon-outline-color: var(--spectrum-gray-500); +} diff --git a/tokens/dist/css/components/spectrum-two/assetcard.css b/tokens/dist/css/components/spectrum-two/assetcard.css new file mode 100644 index 00000000000..cd3ebbe2729 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/assetcard.css @@ -0,0 +1,105 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-asset-card-overlay-background-color-rgb: 27, 127, 245; + --system-asset-card-overlay-background-color-opacity: 0.1; + --system-asset-card-overlay-background-color: rgba(var(--system-asset-card-overlay-background-color-rgb), var(--system-asset-card-overlay-background-color-opacity)); + --system-asset-card-asset-size: 224px; + --system-asset-card-background-color: var(--spectrum-gray-75); + --system-asset-card-asset-animation-duration: var(--spectrum-animation-duration-100); + --system-asset-card-asset-container-border-size: 1px; + --system-asset-card-header-margin-block-start: var(--spectrum-spacing-300); + --system-asset-card-border-radius: var(--spectrum-corner-radius-100); + --system-asset-card-border-color: transparent; + --system-asset-card-border-color-hover: var(--spectrum-gray-500); + --system-asset-card-border-color-down: var(--spectrum-gray-600); + --system-asset-card-focus-ring-gap: 5px; + --system-asset-card-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-asset-card-selectionindicator-background-color-default: rgba(var(--spectrum-gray-75-rgb), 0.9); + --system-asset-card-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300); + --system-asset-card-selectionindicator-size: var(--spectrum-card-selection-background-size); + --system-asset-card-selectionindicator-border-radius: var(--spectrum-corner-radius-100); + --system-asset-card-selectionindicator-offset-y: 4px; + --system-asset-card-selectionindicator-blur: 6px; + --system-asset-card-selectionindicator-color: var(--spectrum-white); + --system-asset-card-selectionindicator-font-weight: var(--spectrum-bold-font-weight); + --system-asset-card-selectionindicator-font-size: var(--spectrum-font-size-400); + --system-asset-card-title-text-color: var(--spectrum-gray-900); + --system-asset-card-title-font-family: var(--spectrum-sans-font-family-stack); + --system-asset-card-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-asset-card-title-font-style: var(--spectrum-default-font-style); + --system-asset-card-title-line-height: var(--spectrum-line-height-100); + --system-asset-card-title-letter-spacing: 0; + --system-asset-card-header-content-text-color: var(--spectrum-gray-900); + --system-asset-card-header-content-font-family: var(--spectrum-sans-font-family-stack); + --system-asset-card-header-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-asset-card-header-content-font-style: var(--spectrum-default-font-style); + --system-asset-card-header-content-line-height: var(--spectrum-line-height-200); + --system-asset-card-header-content-letter-spacing: 0; + --system-asset-card-content-text-color: var(--spectrum-gray-700); + --system-asset-card-content-font-family: var(--spectrum-sans-font-family-stack); + --system-asset-card-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-asset-card-content-font-style: var(--spectrum-default-font-style); + --system-asset-card-content-line-height: var(--spectrum-line-height-200); + --system-asset-card-content-letter-spacing: 0; + --system-asset-card-content-margin-block-start: var(--spectrum-spacing-75); + --system-asset-card-lang-zh-title-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ja-title-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ko-title-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-zh-title-font-style: var(--spectrum-heading-cjk-font-style); + --system-asset-card-lang-ja-title-font-style: var(--spectrum-heading-cjk-font-style); + --system-asset-card-lang-ko-title-font-style: var(--spectrum-heading-cjk-font-style); + --system-asset-card-lang-zh-title-font-weight: var(--spectrum-heading-cjk-font-weight); + --system-asset-card-lang-ja-title-font-weight: var(--spectrum-heading-cjk-font-weight); + --system-asset-card-lang-ko-title-font-weight: var(--spectrum-heading-cjk-font-weight); + --system-asset-card-lang-zh-title-font-size: var(--spectrum-heading-cjk-size-xs); + --system-asset-card-lang-ja-title-font-size: var(--spectrum-heading-cjk-size-xs); + --system-asset-card-lang-ko-title-font-size: var(--spectrum-heading-cjk-size-xs); + --system-asset-card-lang-zh-title-line-height: var(--spectrum-heading-cjk-line-height); + --system-asset-card-lang-ja-title-line-height: var(--spectrum-heading-cjk-line-height); + --system-asset-card-lang-ko-title-line-height: var(--spectrum-heading-cjk-line-height); + --system-asset-card-lang-zh-title-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ja-title-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ko-title-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-zh-header-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ja-header-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ko-header-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-zh-header-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ja-header-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ko-header-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-zh-header-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ja-header-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ko-header-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-zh-header-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ja-header-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ko-header-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-zh-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ja-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ko-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-zh-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ja-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ko-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-zh-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ja-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ko-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-zh-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ja-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ko-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-zh-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ja-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ko-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-zh-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ja-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ko-content-letter-spacing: var(--spectrum-cjk-letter-spacing); +} diff --git a/tokens/dist/css/components/spectrum-two/assetlist.css b/tokens/dist/css/components/spectrum-two/assetlist.css new file mode 100644 index 00000000000..a1e37e1ba23 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/assetlist.css @@ -0,0 +1,32 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-asset-list-width: 272px; + --system-asset-list-child-indicator-animation: var(--spectrum-animation-duration-100); + --system-asset-list-item-height: var(--spectrum-spacing-600); + --system-asset-list-item-padding-inline-start: var(--spectrum-spacing-300); + --system-asset-list-item-padding-inline-end: var(--spectrum-spacing-300); + --system-asset-list-item-margin-block-end: var(--spectrum-spacing-75); + --system-asset-list-item-border-radius: var(--spectrum-spacing-75); + --system-asset-list-item-animation: var(--spectrum-animation-duration-100); + --system-asset-list-item-font-size: var(--spectrum-font-size-100); + --system-asset-list-item-font-weight: var(--spectrum-regular-font-weight); + --system-asset-list-item-background-color-down: var(--spectrum-gray-200); + --system-asset-list-item-background-color-hover: var(--spectrum-gray-100); + --system-asset-list-thumbnail-width: var(--spectrum-spacing-400); + --system-asset-list-thumbnail-height: var(--spectrum-spacing-400); + --system-asset-list-thumbnail-margin-inline-start: var(--spectrum-spacing-100); + --system-asset-list-item-label-padding-inline-start: var(--spectrum-spacing-100); + --system-asset-list-label-color: var(--spectrum-neutral-content-color-default); +} diff --git a/tokens/dist/css/components/spectrum-two/avatar.css b/tokens/dist/css/components/spectrum-two/avatar.css new file mode 100644 index 00000000000..a6f76e79cf1 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/avatar.css @@ -0,0 +1,40 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-avatar-color-opacity: 1; + --system-avatar-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-block-size: var(--spectrum-avatar-size-100); + --system-avatar-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-avatar-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-avatar-color-opacity-disabled: var(--spectrum-avatar-opacity-disabled); + --system-avatar-size-50-inline-size: var(--spectrum-avatar-size-50); + --system-avatar-size-50-block-size: var(--spectrum-avatar-size-50); + --system-avatar-size-75-inline-size: var(--spectrum-avatar-size-75); + --system-avatar-size-75-block-size: var(--spectrum-avatar-size-75); + --system-avatar-size-100-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-size-100-block-size: var(--spectrum-avatar-size-100); + --system-avatar-size-200-inline-size: var(--spectrum-avatar-size-200); + --system-avatar-size-200-block-size: var(--spectrum-avatar-size-200); + --system-avatar-size-300-inline-size: var(--spectrum-avatar-size-300); + --system-avatar-size-300-block-size: var(--spectrum-avatar-size-300); + --system-avatar-size-400-inline-size: var(--spectrum-avatar-size-400); + --system-avatar-size-400-block-size: var(--spectrum-avatar-size-400); + --system-avatar-size-500-inline-size: var(--spectrum-avatar-size-500); + --system-avatar-size-500-block-size: var(--spectrum-avatar-size-500); + --system-avatar-size-600-inline-size: var(--spectrum-avatar-size-600); + --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600); + --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700); + --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700); +} diff --git a/tokens/dist/css/components/spectrum-two/badge.css b/tokens/dist/css/components/spectrum-two/badge.css new file mode 100644 index 00000000000..b0eee4c4c78 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/badge.css @@ -0,0 +1,93 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-badge-corner-radius: var(--spectrum-corner-radius-100); + --system-badge-line-height: var(--spectrum-line-height-100); + --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-badge-label-icon-color: var(--spectrum-white); + --system-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --system-badge-background-color-accent: var(--spectrum-accent-background-color-default); + --system-badge-background-color-informative: var(--spectrum-informative-background-color-default); + --system-badge-background-color-negative: var(--spectrum-negative-background-color-default); + --system-badge-background-color-positive: var(--spectrum-positive-background-color-default); + --system-badge-background-color-notice: var(--spectrum-notice-background-color-default); + --system-badge-background-color-gray: var(--spectrum-gray-background-color-default); + --system-badge-background-color-red: var(--spectrum-red-background-color-default); + --system-badge-background-color-orange: var(--spectrum-orange-background-color-default); + --system-badge-background-color-yellow: var(--spectrum-yellow-background-color-default); + --system-badge-background-color-chartreuse: var(--spectrum-chartreuse-background-color-default); + --system-badge-background-color-celery: var(--spectrum-celery-background-color-default); + --system-badge-background-color-green: var(--spectrum-green-background-color-default); + --system-badge-background-color-seafoam: var(--spectrum-seafoam-background-color-default); + --system-badge-background-color-cyan: var(--spectrum-cyan-background-color-default); + --system-badge-background-color-blue: var(--spectrum-blue-background-color-default); + --system-badge-background-color-indigo: var(--spectrum-indigo-background-color-default); + --system-badge-background-color-purple: var(--spectrum-purple-background-color-default); + --system-badge-background-color-fuchsia: var(--spectrum-fuchsia-background-color-default); + --system-badge-background-color-magenta: var(--spectrum-magenta-background-color-default); + --system-badge-height: var(--spectrum-component-height-100); + --system-badge-font-size: var(--spectrum-font-size-100); + --system-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-100); + --system-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-100); + --system-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-100); + --system-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); + --system-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); + --system-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-100); + --system-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100); + --system-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-100); + --system-badge-orange-label-icon-color: var(--spectrum-black); + --system-badge-yellow-label-icon-color: var(--spectrum-black); + --system-badge-chartreuse-label-icon-color: var(--spectrum-black); + --system-badge-celery-label-icon-color: var(--spectrum-black); + --system-badge-gray-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-red-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-green-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-seafoam-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-cyan-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-blue-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-indigo-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-purple-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-fuchsia-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-magenta-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-size-s-height: var(--spectrum-component-height-75); + --system-badge-size-s-font-size: var(--spectrum-font-size-75); + --system-badge-size-s-label-spacing-vertical-top: var(--spectrum-component-top-to-text-75); + --system-badge-size-s-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-75); + --system-badge-size-s-label-spacing-horizontal: var(--spectrum-component-edge-to-text-75); + --system-badge-size-s-workflow-icon-size: var(--spectrum-workflow-icon-size-75); + --system-badge-size-s-icon-text-spacing: var(--spectrum-text-to-visual-75); + --system-badge-size-s-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-75); + --system-badge-size-s-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-75); + --system-badge-size-s-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-75); + --system-badge-size-l-height: var(--spectrum-component-height-100); + --system-badge-size-l-font-size: var(--spectrum-font-size-200); + --system-badge-size-l-label-spacing-vertical-top: var(--spectrum-component-top-to-text-200); + --system-badge-size-l-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-200); + --system-badge-size-l-label-spacing-horizontal: var(--spectrum-component-edge-to-text-200); + --system-badge-size-l-workflow-icon-size: var(--spectrum-workflow-icon-size-200); + --system-badge-size-l-icon-text-spacing: var(--spectrum-text-to-visual-200); + --system-badge-size-l-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-200); + --system-badge-size-l-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-200); + --system-badge-size-l-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-200); + --system-badge-size-xl-height: var(--spectrum-component-height-100); + --system-badge-size-xl-font-size: var(--spectrum-font-size-300); + --system-badge-size-xl-label-spacing-vertical-top: var(--spectrum-component-top-to-text-300); + --system-badge-size-xl-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-300); + --system-badge-size-xl-label-spacing-horizontal: var(--spectrum-component-edge-to-text-300); + --system-badge-size-xl-workflow-icon-size: var(--spectrum-workflow-icon-size-300); + --system-badge-size-xl-icon-text-spacing: var(--spectrum-text-to-visual-300); + --system-badge-size-xl-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-300); + --system-badge-size-xl-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-300); + --system-badge-size-xl-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-300); +} diff --git a/tokens/dist/css/components/spectrum-two/breadcrumb.css b/tokens/dist/css/components/spectrum-two/breadcrumb.css new file mode 100644 index 00000000000..d6bb942df85 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/breadcrumb.css @@ -0,0 +1,69 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); + --system-breadcrumbs-block-size-compact: var(--spectrum-breadcrumbs-height-compact); + --system-breadcrumbs-block-size-multiline: var(--spectrum-breadcrumbs-height-multiline); + --system-breadcrumbs-line-height: var(--spectrum-line-height-100); + --system-breadcrumbs-font-size: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); + --system-breadcrumbs-font-size-current: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family-current: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); + --system-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); + --system-breadcrumbs-font-family-compact: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight-compact: var(--spectrum-regular-font-weight); + --system-breadcrumbs-font-size-compact-current: var(--spectrum-font-size-100); + --system-breadcrumbs-font-family-compact-current: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight-compact-current: var(--spectrum-bold-font-weight); + --system-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); + --system-breadcrumbs-font-family-multiline: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight-multiline: var(--spectrum-regular-font-weight); + --system-breadcrumbs-font-size-multiline-current: var(--spectrum-font-size-300); + --system-breadcrumbs-font-family-multiline-current: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight-multiline-current: var(--spectrum-bold-font-weight); + --system-breadcrumbs-text-decoration-thickness: var(--spectrum-text-underline-thickness); + --system-breadcrumbs-text-decoration-gap: var(--spectrum-text-underline-gap); + --system-breadcrumbs-separator-spacing-inline: var(--spectrum-text-to-visual-100); + --system-breadcrumbs-text-spacing-block-start: var(--spectrum-breadcrumbs-top-to-text); + --system-breadcrumbs-text-spacing-block-end: var(--spectrum-breadcrumbs-bottom-to-text); + --system-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-icon); + --system-breadcrumbs-text-spacing-block-start-compact: var(--spectrum-breadcrumbs-top-to-text-compact); + --system-breadcrumbs-text-spacing-block-end-compact: var(--spectrum-breadcrumbs-bottom-to-text-compact); + --system-breadcrumbs-icon-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-separator-icon-compact); + --system-breadcrumbs-text-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-text-multiline); + --system-breadcrumbs-text-spacing-block-end-multiline: var(--spectrum-breadcrumbs-bottom-to-text-multiline); + --system-breadcrumbs-text-spacing-block-between-multiline: var(--spectrum-breadcrumbs-top-text-to-bottom-text); + --system-breadcrumbs-icon-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-separator-icon-multiline); + --system-breadcrumbs-icon-spacing-block-between-multiline: var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline); + --system-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text); + --system-breadcrumbs-inline-end: var(--spectrum-breadcrumbs-end-edge-to-text); + --system-breadcrumbs-action-button-spacing-inline: var(--spectrum-breadcrumbs-truncated-menu-to-separator-icon); + --system-breadcrumbs-action-button-spacing-block: var(--spectrum-breadcrumbs-top-to-truncated-menu); + --system-breadcrumbs-action-button-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); + --system-breadcrumbs-action-button-spacing-inline-start: var(--spectrum-breadcrumbs-start-edge-to-truncated-menu); + --system-breadcrumbs-action-button-spacing-block-multiline: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); + --system-breadcrumbs-action-button-spacing-block-between-multiline: var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text); + --system-breadcrumbs-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-breadcrumbs-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-breadcrumbs-item-link-border-radius: var(--spectrum-corner-radius-100); + --system-breadcrumbs-text-color: var(--spectrum-neutral-subdued-content-color-default); + --system-breadcrumbs-text-color-current: var(--spectrum-neutral-content-color-default); + --system-breadcrumbs-text-color-disabled: var(--spectrum-disabled-content-color); + --system-breadcrumbs-separator-color: var(--spectrum-neutral-content-color-default); + --system-breadcrumbs-action-button-color: var(--spectrum-neutral-subdued-content-color-default); + --system-breadcrumbs-action-button-color-disabled: var(--spectrum-disabled-content-color); + --system-breadcrumbs-focus-indicator-color: var(--spectrum-focus-indicator-color); +} diff --git a/tokens/dist/css/components/spectrum-two/button.css b/tokens/dist/css/components/spectrum-two/button.css new file mode 100644 index 00000000000..a9f2e2499c5 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/button.css @@ -0,0 +1,382 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-button-animation-duration: var(--spectrum-animation-duration-100); + --system-button-border-radius: var(--spectrum-corner-radius-100); + --system-button-border-width: var(--spectrum-border-width-200); + --system-button-line-height: 1.2; + --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-button-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); + --system-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-50); + --system-button-background-color-default: var(--spectrum-gray-50); + --system-button-background-color-hover: var(--spectrum-gray-100); + --system-button-background-color-down: var(--spectrum-gray-200); + --system-button-background-color-focus: var(--spectrum-gray-100); + --system-button-border-color-default: var(--spectrum-gray-400); + --system-button-border-color-hover: var(--spectrum-gray-500); + --system-button-border-color-down: var(--spectrum-gray-600); + --system-button-border-color-focus: var(--spectrum-gray-500); + --system-button-content-color-default: var(--spectrum-neutral-content-color-default); + --system-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-button-content-color-down: var(--spectrum-neutral-content-color-down); + --system-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-button-background-color-disabled: transparent; + --system-button-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-accent-background-color-default: var(--spectrum-accent-background-color-default); + --system-button-accent-background-color-hover: var(--spectrum-accent-background-color-hover); + --system-button-accent-background-color-down: var(--spectrum-accent-background-color-down); + --system-button-accent-background-color-focus: var(--spectrum-accent-background-color-key-focus); + --system-button-accent-border-color-default: transparent; + --system-button-accent-border-color-hover: transparent; + --system-button-accent-border-color-down: transparent; + --system-button-accent-border-color-focus: transparent; + --system-button-accent-content-color-default: var(--spectrum-white); + --system-button-accent-content-color-hover: var(--spectrum-white); + --system-button-accent-content-color-down: var(--spectrum-white); + --system-button-accent-content-color-focus: var(--spectrum-white); + --system-button-accent-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-accent-border-color-disabled: transparent; + --system-button-accent-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-accent-outline-background-color-default: transparent; + --system-button-accent-outline-background-color-hover: var(--spectrum-accent-color-200); + --system-button-accent-outline-background-color-down: var(--spectrum-accent-color-300); + --system-button-accent-outline-background-color-focus: var(--spectrum-accent-color-200); + --system-button-accent-outline-border-color-default: var(--spectrum-accent-color-900); + --system-button-accent-outline-border-color-hover: var(--spectrum-accent-color-1000); + --system-button-accent-outline-border-color-down: var(--spectrum-accent-color-1100); + --system-button-accent-outline-border-color-focus: var(--spectrum-accent-color-1000); + --system-button-accent-outline-content-color-default: var(--spectrum-accent-content-color-default); + --system-button-accent-outline-content-color-hover: var(--spectrum-accent-content-color-hover); + --system-button-accent-outline-content-color-down: var(--spectrum-accent-content-color-down); + --system-button-accent-outline-content-color-focus: var(--spectrum-accent-content-color-key-focus); + --system-button-accent-outline-background-color-disabled: transparent; + --system-button-accent-outline-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-accent-outline-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-negative-background-color-default: var(--spectrum-negative-background-color-default); + --system-button-negative-background-color-hover: var(--spectrum-negative-background-color-hover); + --system-button-negative-background-color-down: var(--spectrum-negative-background-color-down); + --system-button-negative-background-color-focus: var(--spectrum-negative-background-color-key-focus); + --system-button-negative-border-color-default: transparent; + --system-button-negative-border-color-hover: transparent; + --system-button-negative-border-color-down: transparent; + --system-button-negative-border-color-focus: transparent; + --system-button-negative-content-color-default: var(--spectrum-white); + --system-button-negative-content-color-hover: var(--spectrum-white); + --system-button-negative-content-color-down: var(--spectrum-white); + --system-button-negative-content-color-focus: var(--spectrum-white); + --system-button-negative-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-negative-border-color-disabled: transparent; + --system-button-negative-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-negative-outline-background-color-default: transparent; + --system-button-negative-outline-background-color-hover: var(--spectrum-negative-color-200); + --system-button-negative-outline-background-color-down: var(--spectrum-negative-color-300); + --system-button-negative-outline-background-color-focus: var(--spectrum-negative-color-200); + --system-button-negative-outline-border-color-default: var(--spectrum-negative-color-900); + --system-button-negative-outline-border-color-hover: var(--spectrum-negative-color-1000); + --system-button-negative-outline-border-color-down: var(--spectrum-negative-color-1100); + --system-button-negative-outline-border-color-focus: var(--spectrum-negative-color-1000); + --system-button-negative-outline-content-color-default: var(--spectrum-negative-content-color-default); + --system-button-negative-outline-content-color-hover: var(--spectrum-negative-content-color-hover); + --system-button-negative-outline-content-color-down: var(--spectrum-negative-content-color-down); + --system-button-negative-outline-content-color-focus: var(--spectrum-negative-content-color-key-focus); + --system-button-negative-outline-background-color-disabled: transparent; + --system-button-negative-outline-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-negative-outline-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-primary-background-color-default: var(--spectrum-neutral-background-color-default); + --system-button-primary-background-color-hover: var(--spectrum-neutral-background-color-hover); + --system-button-primary-background-color-down: var(--spectrum-neutral-background-color-down); + --system-button-primary-background-color-focus: var(--spectrum-neutral-background-color-key-focus); + --system-button-primary-border-color-default: transparent; + --system-button-primary-border-color-hover: transparent; + --system-button-primary-border-color-down: transparent; + --system-button-primary-border-color-focus: transparent; + --system-button-primary-content-color-default: var(--spectrum-gray-25); + --system-button-primary-content-color-hover: var(--spectrum-gray-25); + --system-button-primary-content-color-down: var(--spectrum-gray-25); + --system-button-primary-content-color-focus: var(--spectrum-gray-25); + --system-button-primary-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-primary-border-color-disabled: transparent; + --system-button-primary-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-primary-outline-background-color-default: transparent; + --system-button-primary-outline-background-color-hover: var(--spectrum-gray-200); + --system-button-primary-outline-background-color-down: var(--spectrum-gray-400); + --system-button-primary-outline-background-color-focus: var(--spectrum-gray-200); + --system-button-primary-outline-border-color-default: var(--spectrum-gray-800); + --system-button-primary-outline-border-color-hover: var(--spectrum-gray-900); + --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); + --system-button-primary-outline-border-color-focus: var(--spectrum-gray-900); + --system-button-primary-outline-content-color-default: var(--spectrum-neutral-content-color-default); + --system-button-primary-outline-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-button-primary-outline-content-color-down: var(--spectrum-neutral-content-color-down); + --system-button-primary-outline-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-button-primary-outline-background-color-disabled: transparent; + --system-button-primary-outline-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-primary-outline-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-secondary-background-color-default: var(--spectrum-gray-100); + --system-button-secondary-background-color-hover: var(--spectrum-gray-200); + --system-button-secondary-background-color-down: var(--spectrum-gray-400); + --system-button-secondary-background-color-focus: var(--spectrum-gray-200); + --system-button-secondary-border-color-default: transparent; + --system-button-secondary-border-color-hover: transparent; + --system-button-secondary-border-color-down: transparent; + --system-button-secondary-border-color-focus: transparent; + --system-button-secondary-content-color-default: var(--spectrum-neutral-content-color-default); + --system-button-secondary-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-button-secondary-content-color-down: var(--spectrum-neutral-content-color-down); + --system-button-secondary-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-button-secondary-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-secondary-border-color-disabled: transparent; + --system-button-secondary-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-secondary-outline-background-color-default: transparent; + --system-button-secondary-outline-background-color-hover: var(--spectrum-gray-200); + --system-button-secondary-outline-background-color-down: var(--spectrum-gray-400); + --system-button-secondary-outline-background-color-focus: var(--spectrum-gray-200); + --system-button-secondary-outline-border-color-default: var(--spectrum-gray-200); + --system-button-secondary-outline-border-color-hover: var(--spectrum-gray-400); + --system-button-secondary-outline-border-color-down: var(--spectrum-gray-500); + --system-button-secondary-outline-border-color-focus: var(--spectrum-gray-400); + --system-button-secondary-outline-content-color-default: var(--spectrum-neutral-content-color-default); + --system-button-secondary-outline-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-button-secondary-outline-content-color-down: var(--spectrum-neutral-content-color-down); + --system-button-secondary-outline-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-button-secondary-outline-background-color-disabled: transparent; + --system-button-secondary-outline-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-secondary-outline-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-quiet-background-color-default: transparent; + --system-button-quiet-background-color-hover: var(--spectrum-gray-100); + --system-button-quiet-background-color-down: var(--spectrum-gray-200); + --system-button-quiet-background-color-focus: var(--spectrum-gray-100); + --system-button-quiet-border-color-default: transparent; + --system-button-quiet-border-color-hover: transparent; + --system-button-quiet-border-color-down: transparent; + --system-button-quiet-border-color-focus: transparent; + --system-button-quiet-background-color-disabled: transparent; + --system-button-quiet-border-color-disabled: transparent; + --system-button-selected-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --system-button-selected-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); + --system-button-selected-background-color-down: var(--spectrum-neutral-subdued-background-color-down); + --system-button-selected-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); + --system-button-selected-border-color-default: transparent; + --system-button-selected-border-color-hover: transparent; + --system-button-selected-border-color-down: transparent; + --system-button-selected-border-color-focus: transparent; + --system-button-selected-content-color-default: var(--spectrum-white); + --system-button-selected-content-color-hover: var(--spectrum-white); + --system-button-selected-content-color-down: var(--spectrum-white); + --system-button-selected-content-color-focus: var(--spectrum-white); + --system-button-selected-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-selected-border-color-disabled: transparent; + --system-button-selected-emphasized-background-color-default: var(--spectrum-accent-background-color-default); + --system-button-selected-emphasized-background-color-hover: var(--spectrum-accent-background-color-hover); + --system-button-selected-emphasized-background-color-down: var(--spectrum-accent-background-color-down); + --system-button-selected-emphasized-background-color-focus: var(--spectrum-accent-background-color-key-focus); + --system-button-static-black-quiet-border-color-default: transparent; + --system-button-static-white-quiet-border-color-default: transparent; + --system-button-static-black-quiet-border-color-hover: transparent; + --system-button-static-white-quiet-border-color-hover: transparent; + --system-button-static-black-quiet-border-color-down: transparent; + --system-button-static-white-quiet-border-color-down: transparent; + --system-button-static-black-quiet-border-color-focus: transparent; + --system-button-static-white-quiet-border-color-focus: transparent; + --system-button-static-black-quiet-border-color-disabled: transparent; + --system-button-static-white-quiet-border-color-disabled: transparent; + --system-button-static-white-background-color-default: var(--spectrum-transparent-white-900); + --system-button-static-white-background-color-hover: var(--spectrum-transparent-white-1000); + --system-button-static-white-background-color-down: var(--spectrum-transparent-white-1000); + --system-button-static-white-background-color-focus: var(--spectrum-transparent-white-1000); + --system-button-static-white-border-color-default: transparent; + --system-button-static-white-border-color-hover: transparent; + --system-button-static-white-border-color-down: transparent; + --system-button-static-white-border-color-focus: transparent; + --system-button-static-white-content-color-default: var(--spectrum-black); + --system-button-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-button-static-white-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --system-button-static-white-border-color-disabled: transparent; + --system-button-static-white-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-button-static-white-outline-background-color-default: transparent; + --system-button-static-white-outline-background-color-hover: var(--spectrum-transparent-white-400); + --system-button-static-white-outline-background-color-down: var(--spectrum-transparent-white-500); + --system-button-static-white-outline-background-color-focus: var(--spectrum-transparent-white-400); + --system-button-static-white-outline-border-color-default: var(--spectrum-transparent-white-900); + --system-button-static-white-outline-border-color-hover: var(--spectrum-transparent-white-1000); + --system-button-static-white-outline-border-color-down: var(--spectrum-transparent-white-1000); + --system-button-static-white-outline-border-color-focus: var(--spectrum-transparent-white-1000); + --system-button-static-white-outline-content-color-default: var(--spectrum-white); + --system-button-static-white-outline-content-color-hover: var(--spectrum-white); + --system-button-static-white-outline-content-color-down: var(--spectrum-white); + --system-button-static-white-outline-content-color-focus: var(--spectrum-white); + --system-button-static-white-outline-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-button-static-white-outline-background-color-disabled: transparent; + --system-button-static-white-outline-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --system-button-static-white-outline-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-button-static-white-selected-background-color-default: var(--spectrum-transparent-white-900); + --system-button-static-white-selected-background-color-hover: var(--spectrum-transparent-white-1000); + --system-button-static-white-selected-background-color-down: var(--spectrum-transparent-white-1000); + --system-button-static-white-selected-background-color-focus: var(--spectrum-transparent-white-1000); + --system-button-static-white-selected-static-white-content-color-default: var(--spectrum-black); + --system-button-static-white-selected-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-selected-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-selected-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-selected-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --system-button-static-white-selected-border-color-disabled: transparent; + --system-button-static-white-secondary-background-color-default: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-background-color-hover: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-background-color-down: var(--spectrum-transparent-white-500); + --system-button-static-white-secondary-background-color-focus: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-border-color-default: transparent; + --system-button-static-white-secondary-border-color-hover: transparent; + --system-button-static-white-secondary-border-color-down: transparent; + --system-button-static-white-secondary-border-color-focus: transparent; + --system-button-static-white-secondary-content-color-default: var(--spectrum-white); + --system-button-static-white-secondary-content-color-hover: var(--spectrum-white); + --system-button-static-white-secondary-content-color-down: var(--spectrum-white); + --system-button-static-white-secondary-content-color-focus: var(--spectrum-white); + --system-button-static-white-secondary-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-button-static-white-secondary-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --system-button-static-white-secondary-border-color-disabled: transparent; + --system-button-static-white-secondary-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-button-static-white-secondary-outline-background-color-default: transparent; + --system-button-static-white-secondary-outline-background-color-hover: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-outline-background-color-down: var(--spectrum-transparent-white-500); + --system-button-static-white-secondary-outline-background-color-focus: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-outline-border-color-default: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-outline-border-color-hover: var(--spectrum-transparent-white-500); + --system-button-static-white-secondary-outline-border-color-down: var(--spectrum-transparent-white-600); + --system-button-static-white-secondary-outline-border-color-focus: var(--spectrum-transparent-white-500); + --system-button-static-white-secondary-outline-content-color-default: var(--spectrum-white); + --system-button-static-white-secondary-outline-content-color-hover: var(--spectrum-white); + --system-button-static-white-secondary-outline-content-color-down: var(--spectrum-white); + --system-button-static-white-secondary-outline-content-color-focus: var(--spectrum-white); + --system-button-static-white-secondary-outline-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-button-static-white-secondary-outline-background-color-disabled: transparent; + --system-button-static-white-secondary-outline-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --system-button-static-white-secondary-outline-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-button-static-black-background-color-default: var(--spectrum-transparent-black-900); + --system-button-static-black-background-color-hover: var(--spectrum-transparent-black-1000); + --system-button-static-black-background-color-down: var(--spectrum-transparent-black-1000); + --system-button-static-black-background-color-focus: var(--spectrum-transparent-black-1000); + --system-button-static-black-border-color-default: transparent; + --system-button-static-black-border-color-hover: transparent; + --system-button-static-black-border-color-down: transparent; + --system-button-static-black-border-color-focus: transparent; + --system-button-static-black-content-color-default: var(--spectrum-white); + --system-button-static-black-content-color-hover: var(--spectrum-white); + --system-button-static-black-content-color-down: var(--spectrum-white); + --system-button-static-black-content-color-focus: var(--spectrum-white); + --system-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-button-static-black-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --system-button-static-black-border-color-disabled: transparent; + --system-button-static-black-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-button-static-black-outline-background-color-default: transparent; + --system-button-static-black-outline-background-color-hover: var(--spectrum-transparent-black-400); + --system-button-static-black-outline-background-color-down: var(--spectrum-transparent-black-500); + --system-button-static-black-outline-background-color-focus: var(--spectrum-transparent-black-400); + --system-button-static-black-outline-border-color-default: var(--spectrum-transparent-black-500); + --system-button-static-black-outline-border-color-hover: var(--spectrum-transparent-black-600); + --system-button-static-black-outline-border-color-down: var(--spectrum-transparent-black-700); + --system-button-static-black-outline-border-color-focus: var(--spectrum-transparent-black-600); + --system-button-static-black-outline-content-color-default: var(--spectrum-black); + --system-button-static-black-outline-content-color-hover: var(--spectrum-black); + --system-button-static-black-outline-content-color-down: var(--spectrum-black); + --system-button-static-black-outline-content-color-focus: var(--spectrum-black); + --system-button-static-black-outline-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-button-static-black-outline-background-color-disabled: transparent; + --system-button-static-black-outline-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --system-button-static-black-outline-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-button-static-black-secondary-background-color-default: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-background-color-hover: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-background-color-down: var(--spectrum-transparent-black-500); + --system-button-static-black-secondary-background-color-focus: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-border-color-default: transparent; + --system-button-static-black-secondary-border-color-hover: transparent; + --system-button-static-black-secondary-border-color-down: transparent; + --system-button-static-black-secondary-border-color-focus: transparent; + --system-button-static-black-secondary-content-color-default: var(--spectrum-black); + --system-button-static-black-secondary-content-color-hover: var(--spectrum-black); + --system-button-static-black-secondary-content-color-down: var(--spectrum-black); + --system-button-static-black-secondary-content-color-focus: var(--spectrum-black); + --system-button-static-black-secondary-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-button-static-black-secondary-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --system-button-static-black-secondary-border-color-disabled: transparent; + --system-button-static-black-secondary-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-button-static-black-secondary-outline-background-color-default: transparent; + --system-button-static-black-secondary-outline-background-color-hover: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-outline-background-color-down: var(--spectrum-transparent-black-500); + --system-button-static-black-secondary-outline-background-color-focus: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-outline-border-color-default: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-outline-border-color-hover: var(--spectrum-transparent-black-500); + --system-button-static-black-secondary-outline-border-color-down: var(--spectrum-transparent-black-600); + --system-button-static-black-secondary-outline-border-color-focus: var(--spectrum-transparent-black-500); + --system-button-static-black-secondary-outline-content-color-default: var(--spectrum-black); + --system-button-static-black-secondary-outline-content-color-hover: var(--spectrum-black); + --system-button-static-black-secondary-outline-content-color-down: var(--spectrum-black); + --system-button-static-black-secondary-outline-content-color-focus: var(--spectrum-black); + --system-button-static-black-secondary-outline-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-button-static-black-secondary-outline-background-color-disabled: transparent; + --system-button-static-black-secondary-outline-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --system-button-static-black-secondary-outline-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-button-size-s-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-s-border-radius: var(--spectrum-component-pill-edge-to-text-75); + --system-button-size-s-height: var(--spectrum-component-height-75); + --system-button-size-s-font-size: var(--spectrum-font-size-75); + --system-button-size-s-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--system-button-border-width)); + --system-button-size-s-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75); + --system-button-size-s-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--system-button-border-width)); + --system-button-size-s-padding-label-to-icon: var(--spectrum-text-to-visual-75); + --system-button-size-s-top-to-text: var(--spectrum-button-top-to-text-small); + --system-button-size-s-bottom-to-text: var(--spectrum-button-bottom-to-text-small); + --system-button-size-s-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75); + --system-button-size-s-intended-icon-size: var(--spectrum-workflow-icon-size-75); + --system-button-size-m-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-m-border-radius: var(--spectrum-component-pill-edge-to-text-100); + --system-button-size-m-height: var(--spectrum-component-height-100); + --system-button-size-m-font-size: var(--spectrum-font-size-100); + --system-button-size-m-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--system-button-border-width)); + --system-button-size-m-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100); + --system-button-size-m-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--system-button-border-width)); + --system-button-size-m-padding-label-to-icon: var(--spectrum-text-to-visual-100); + --system-button-size-m-top-to-text: var(--spectrum-button-top-to-text-medium); + --system-button-size-m-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); + --system-button-size-m-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); + --system-button-size-m-intended-icon-size: var(--spectrum-workflow-icon-size-100); + --system-button-size-l-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-l-border-radius: var(--spectrum-component-pill-edge-to-text-200); + --system-button-size-l-height: var(--spectrum-component-height-200); + --system-button-size-l-font-size: var(--spectrum-font-size-200); + --system-button-size-l-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--system-button-border-width)); + --system-button-size-l-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200); + --system-button-size-l-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--system-button-border-width)); + --system-button-size-l-padding-label-to-icon: var(--spectrum-text-to-visual-200); + --system-button-size-l-top-to-text: var(--spectrum-button-top-to-text-large); + --system-button-size-l-bottom-to-text: var(--spectrum-button-bottom-to-text-large); + --system-button-size-l-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200); + --system-button-size-l-intended-icon-size: var(--spectrum-workflow-icon-size-200); + --system-button-size-xl-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-xl-border-radius: var(--spectrum-component-pill-edge-to-text-300); + --system-button-size-xl-height: var(--spectrum-component-height-300); + --system-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-button-size-xl-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--system-button-border-width)); + --system-button-size-xl-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300); + --system-button-size-xl-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--system-button-border-width)); + --system-button-size-xl-padding-label-to-icon: var(--spectrum-text-to-visual-300); + --system-button-size-xl-top-to-text: var(--spectrum-button-top-to-text-extra-large); + --system-button-size-xl-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large); + --system-button-size-xl-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300); + --system-button-size-xl-intended-icon-size: var(--spectrum-workflow-icon-size-300); +} diff --git a/tokens/dist/css/components/spectrum-two/buttongroup.css b/tokens/dist/css/components/spectrum-two/buttongroup.css new file mode 100644 index 00000000000..8a9a33b052a --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/buttongroup.css @@ -0,0 +1,25 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-s-spacing-horizontal: var(--spectrum-spacing-200); + --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200); + --system-button-group-size-m-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-l-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-size-l-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-xl-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300); +} diff --git a/tokens/dist/css/components/spectrum-two/calendar.css b/tokens/dist/css/components/spectrum-two/calendar.css new file mode 100644 index 00000000000..9fef1f80e24 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/calendar.css @@ -0,0 +1,45 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-calendar-day-width: var(--spectrum-component-height-100); + --system-calendar-day-height: var(--spectrum-component-height-100); + --system-calendar-border-radius-reset: 0; + --system-calendar-border-width-reset: 0; + --system-calendar-day-border-size: var(--spectrum-border-width-200); + --system-calendar-margin-y: 24px; + --system-calendar-margin-x: 32px; + --system-calendar-day-padding: 4px; + --system-calendar-width: calc((var(--system-calendar-day-width) + var(--system-calendar-day-padding) * 2) * 7); + --system-calendar-title-text-letter-spacing: 0.06em; + --system-calendar-title-height: 32px; + --system-calendar-title-text-size: var(--spectrum-font-size-300); + --system-calendar-day-title-text-font-weight: var(--spectrum-bold-font-weight); + --system-calendar-day-title-text-color: var(--spectrum-gray-700); + --system-calendar-day-title-text-size: var(--spectrum-font-size-50); + --system-calendar-day-text-size-han: var(--spectrum-font-size-50); + --system-calendar-day-text-size: var(--spectrum-font-size-100); + --system-calendar-day-text-color-selected: var(--spectrum-gray-900); + --system-calendar-day-text-color-hover: var(--spectrum-gray-900); + --system-calendar-day-text-color-cap-selected: var(--spectrum-gray-900); + --system-calendar-day-text-font-weight-selected: var(--spectrum-bold-font-weight); + --system-calendar-day-text-font-weight-cap-selected: var(--spectrum-bold-font-weight); + --system-calendar-day-today-text-color: var(--spectrum-gray-800); + --system-calendar-day-today-text-font-weight: var(--spectrum-bold-font-weight); + --system-calendar-day-today-border-color: var(--spectrum-gray-800); + --system-calendar-day-today-text-color-disabled: var(--spectrum-gray-500); + --system-calendar-day-today-border-color-disabled: var(--spectrum-gray-400); + --system-calendar-day-text-color-disabled: var(--spectrum-disabled-content-color); + --system-calendar-day-text-color-key-focus: var(--spectrum-gray-900); + --system-calendar-button-icon-color: var(--spectrum-gray-700); +} diff --git a/tokens/dist/css/components/spectrum-two/card.css b/tokens/dist/css/components/spectrum-two/card.css new file mode 100644 index 00000000000..d824f134b52 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/card.css @@ -0,0 +1,60 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-card-background-color: var(--spectrum-background-layer-2-color); + --system-card-body-spacing: var(--spectrum-spacing-400); + --system-card-title-padding-top: var(--spectrum-spacing-300); + --system-card-title-padding-right: var(--spectrum-spacing-400); + --system-card-content-margin-top: var(--spectrum-spacing-100); + --system-card-content-margin-bottom: var(--spectrum-spacing-300); + --system-card-footer-padding-top: var(--spectrum-spacing-100); + --system-card-subtitle-padding-right: var(--spectrum-spacing-100); + --system-card-border-width: var(--spectrum-border-width-100); + --system-card-corner-radius: var(--spectrum-corner-radius-100); + --system-card-border-color: var(--spectrum-gray-100); + --system-card-border-color-hover: var(--spectrum-gray-200); + --system-card-border-color-selected: var(--spectrum-blue-700); + --system-card-divider-color: var(--spectrum-gray-200); + --system-card-title-font-family: var(--spectrum-sans-font-family-stack); + --system-card-title-font-size: var(--spectrum-heading-size-xxs); + --system-card-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-card-title-font-style: var(--spectrum-heading-sans-serif-font-style); + --system-card-title-line-height: var(--spectrum-heading-line-height); + --system-card-title-font-color: var(--spectrum-heading-color); + --system-card-body-font-family: var(--spectrum-sans-font-family-stack); + --system-card-body-font-size: var(--spectrum-body-size-s); + --system-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-card-body-font-style: var(--spectrum-body-sans-serif-font-style); + --system-card-body-line-height: var(--spectrum-body-line-height); + --system-card-body-font-color: var(--spectrum-body-color); + --system-card-actions-spacing: var(--spectrum-spacing-300); + --system-card-actions-size: var(--spectrum-card-selection-background-size); + --system-card-actions-border-radius: var(--spectrum-corner-radius-100); + --system-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); + --system-card-actions-background-color-opacity: var(--spectrum-card-selection-background-color-opacity); + --system-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); + --system-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); + --system-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-card-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-card-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --system-card-selected-background-opacity: 0.1; + --system-card-preview-border-width-selected: var(--spectrum-border-width-100); + --system-card-preview-background-color: var(--spectrum-gray-100); + --system-card-preview-background-color-hover: var(--spectrum-gray-200); + --system-card-horizontal-body-padding: var(--spectrum-spacing-300); + --system-card-horizontal-preview-padding: var(--spectrum-spacing-200); + --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); + --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); +} diff --git a/tokens/dist/css/components/spectrum-two/checkbox.css b/tokens/dist/css/components/spectrum-two/checkbox.css new file mode 100644 index 00000000000..b2c967d1786 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/checkbox.css @@ -0,0 +1,71 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-checkbox-control-color-default: var(--spectrum-gray-600); + --system-checkbox-control-color-hover: var(--spectrum-gray-700); + --system-checkbox-control-color-down: var(--spectrum-gray-800); + --system-checkbox-control-color-focus: var(--spectrum-gray-700); + --system-checkbox-content-color-default: var(--spectrum-neutral-content-color-default); + --system-checkbox-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-checkbox-content-color-down: var(--spectrum-neutral-content-color-down); + --system-checkbox-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-checkbox-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-checkbox-content-color-disabled: var(--spectrum-disabled-content-color); + --system-checkbox-control-color-disabled: var(--spectrum-disabled-content-color); + --system-checkbox-checkmark-color: var(--spectrum-gray-50); + --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); + --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); + --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); + --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); + --system-checkbox-emphasized-color-default: var(--spectrum-accent-color-900); + --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); + --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); + --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); + --system-checkbox-control-selected-color-default: var(--spectrum-neutral-background-color-selected-default); + --system-checkbox-control-selected-color-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-checkbox-control-selected-color-down: var(--spectrum-neutral-background-color-selected-down); + --system-checkbox-control-selected-color-focus: var(--spectrum-neutral-background-color-selected-key-focus); + --system-checkbox-line-height: var(--spectrum-line-height-100); + --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); + --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-checkbox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-checkbox-border-width: var(--spectrum-border-width-200); + --system-checkbox-animation-duration: var(--spectrum-animation-duration-100); + --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); + --system-checkbox-size-s-height: var(--spectrum-component-height-75); + --system-checkbox-size-s-control-size: var(--spectrum-checkbox-control-size-small); + --system-checkbox-size-s-top-to-text: var(--spectrum-component-top-to-text-75); + --system-checkbox-size-s-text-to-control: var(--spectrum-text-to-control-75); + --system-checkbox-font-size: var(--spectrum-font-size-100); + --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); + --system-checkbox-height: var(--spectrum-component-height-100); + --system-checkbox-size-m-height: var(--spectrum-component-height-100); + --system-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); + --system-checkbox-size-m-control-size: var(--spectrum-checkbox-control-size-medium); + --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); + --system-checkbox-size-m-top-to-text: var(--spectrum-component-top-to-text-100); + --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); + --system-checkbox-size-m-text-to-control: var(--spectrum-text-to-control-100); + --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); + --system-checkbox-size-l-height: var(--spectrum-component-height-200); + --system-checkbox-size-l-control-size: var(--spectrum-checkbox-control-size-large); + --system-checkbox-size-l-top-to-text: var(--spectrum-component-top-to-text-200); + --system-checkbox-size-l-text-to-control: var(--spectrum-text-to-control-200); + --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); + --system-checkbox-size-xl-height: var(--spectrum-component-height-300); + --system-checkbox-size-xl-control-size: var(--spectrum-checkbox-control-size-extra-large); + --system-checkbox-size-xl-top-to-text: var(--spectrum-component-top-to-text-300); + --system-checkbox-size-xl-text-to-control: var(--spectrum-text-to-control-300); +} diff --git a/tokens/dist/css/components/spectrum-two/clearbutton.css b/tokens/dist/css/components/spectrum-two/clearbutton.css new file mode 100644 index 00000000000..9e7ace949bf --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/clearbutton.css @@ -0,0 +1,48 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-clear-button-background-color: transparent; + --system-clear-button-background-color-hover: transparent; + --system-clear-button-background-color-down: transparent; + --system-clear-button-background-color-key-focus: transparent; + --system-clear-button-height: var(--spectrum-component-height-100); + --system-clear-button-width: var(--spectrum-component-height-100); + --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-clear-button-icon-color: var(--spectrum-neutral-content-color-default); + --system-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-clear-button-size-s-height: var(--spectrum-component-height-75); + --system-clear-button-size-s-width: var(--spectrum-component-height-75); + --system-clear-button-size-l-height: var(--spectrum-component-height-200); + --system-clear-button-size-l-width: var(--spectrum-component-height-200); + --system-clear-button-size-xl-height: var(--spectrum-component-height-300); + --system-clear-button-size-xl-width: var(--spectrum-component-height-300); + --system-clear-button-quiet-background-color: var(--spectrum-clear-button-background-color-quiet, transparent); + --system-clear-button-quiet-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent); + --system-clear-button-quiet-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent); + --system-clear-button-quiet-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent); + --system-clear-button-over-background-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white)); + --system-clear-button-over-background-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white)); + --system-clear-button-over-background-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white)); + --system-clear-button-over-background-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white)); + --system-clear-button-over-background-background-color: var(--spectrum-clear-button-background-color-over-background, transparent); + --system-clear-button-over-background-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); + --system-clear-button-over-background-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-500)); + --system-clear-button-over-background-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); + --system-clear-button-disabled-icon-color: var(--spectrum-disabled-content-color); + --system-clear-button-disabled-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); + --system-clear-button-disabled-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); + --system-clear-button-disabled-background-color: transparent; +} diff --git a/tokens/dist/css/components/spectrum-two/closebutton.css b/tokens/dist/css/components/spectrum-two/closebutton.css new file mode 100644 index 00000000000..89a74c36f73 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/closebutton.css @@ -0,0 +1,47 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-close-button-background-color-default: transparent; + --system-close-button-background-color-hover: var(--spectrum-gray-100); + --system-close-button-background-color-down: var(--spectrum-gray-200); + --system-close-button-background-color-focus: var(--spectrum-gray-100); + --system-close-button-icon-color-default: var(--spectrum-neutral-content-color-default); + --system-close-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-close-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-close-button-icon-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-close-button-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-close-button-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-close-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-close-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-close-button-animation-duration: var(--spectrum-animation-duration-100); + --system-close-button-size-s-size: var(--spectrum-component-height-75); + --system-close-button-size: var(--spectrum-component-height-100); + --system-close-button-size-m-size: var(--spectrum-component-height-100); + --system-close-button-size-l-size: var(--spectrum-component-height-200); + --system-close-button-size-xl-size: var(--spectrum-component-height-300); + --system-close-button-static-white-static-background-color-default: transparent; + --system-close-button-static-white-static-background-color-hover: var(--spectrum-transparent-white-400); + --system-close-button-static-white-static-background-color-down: var(--spectrum-transparent-white-500); + --system-close-button-static-white-static-background-color-focus: var(--spectrum-transparent-white-400); + --system-close-button-static-white-icon-color-default: var(--spectrum-white); + --system-close-button-static-white-icon-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-close-button-static-white-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-close-button-static-black-static-background-color-default: transparent; + --system-close-button-static-black-static-background-color-hover: var(--spectrum-transparent-black-400); + --system-close-button-static-black-static-background-color-down: var(--spectrum-transparent-black-500); + --system-close-button-static-black-static-background-color-focus: var(--spectrum-transparent-black-400); + --system-close-button-static-black-icon-color-default: var(--spectrum-black); + --system-close-button-static-black-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-close-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); +} diff --git a/tokens/dist/css/components/spectrum-two/coachindicator.css b/tokens/dist/css/components/spectrum-two/coachindicator.css new file mode 100644 index 00000000000..a6dee180ec8 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/coachindicator.css @@ -0,0 +1,42 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); + --system-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); + --system-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); + --system-coach-indicator-inline-size: var(--system-coach-indicator-min-inline-size); + --system-coach-indicator-block-size: var(--system-coach-indicator-min-block-size); + --system-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter); + --system-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter); + --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); + --system-coach-indicator-ring-light-color: var(--spectrum-gray-25); + --system-coach-indicator-top: calc(var(--system-coach-indicator-block-size) / 3 - var(--system-coach-indicator-ring-border-size)); + --system-coach-indicator-left: calc(var(--system-coach-indicator-inline-size) / 3 - var(--system-coach-indicator-ring-border-size)); + --system-coach-indicator-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000); + --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; + --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; + --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; + --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; + --system-coach-indicator-animation-name: pulse; + --system-coach-indicator-inner-animation-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple); + --system-coach-indicator-animation-keyframe-0-scale: 1; + --system-coach-indicator-animation-keyframe-0-opacity: 0; + --system-coach-indicator-animation-keyframe-50-scale: 1.5; + --system-coach-indicator-animation-keyframe-50-opacity: 1; + --system-coach-indicator-animation-keyframe-100-scale: 2; + --system-coach-indicator-animation-keyframe-100-opacity: 0; + --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; + --system-coach-indicator-quiet-quiet-ring-diameter-size: var(--spectrum-coach-indicator-quiet-ring-diameter); + --system-coach-indicator-quiet-animation-name: pulse-quiet; +} diff --git a/tokens/dist/css/components/spectrum-two/coachmark.css b/tokens/dist/css/components/spectrum-two/coachmark.css new file mode 100644 index 00000000000..51e560446b7 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/coachmark.css @@ -0,0 +1,46 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); + --system-coach-mark-width: var(--spectrum-coach-mark-width); + --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); + --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); + --system-coach-mark-media-min-height: var(--spectrum-coach-mark-media-minimum-height); + --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); + --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); + --system-coach-mark-header-to-body: var(--spectrum-spacing-200); + --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); + --system-coach-mark-title-color: var(--spectrum-heading-color); + --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-title-font-style: var(--spectrum-heading-serif-font-style); + --system-coach-mark-title-text-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); + --system-coach-mark-title-text-line-height: var(--spectrum-heading-line-height); + --system-coach-mark-content-font-color: var(--spectrum-body-color); + --system-coach-mark-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-content-font-style: var(--spectrum-body-sans-serif-font-style); + --system-coach-mark-content-line-height: var(--spectrum-body-line-height); + --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); + --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); + --system-coach-mark-step-font-weight: var(--spectrum-body-medium-font-weight); + --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-step-font-style: var(--spectrum-body-sans-serif-font-style); + --system-coach-mark-step-line-height: var(--spectrum-body-line-height); + --system-coach-mark-step-font-size: var(--spectrum-coach-mark-pagination-body-size); + --system-coach-mark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge); + --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); + --system-coach-mark-popover-corner-radius: var(--spectrum-corner-radius-100); + --system-coach-mark-buttongroup-spacing-horizontal: var(--spectrum-spacing-100); +} diff --git a/tokens/dist/css/components/spectrum-two/colorarea.css b/tokens/dist/css/components/spectrum-two/colorarea.css new file mode 100644 index 00000000000..f4ad33dc05c --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/colorarea.css @@ -0,0 +1,25 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-color-area-border-radius: var(--spectrum-color-area-border-rounding); + --system-color-area-border-color-rgb: 0, 0, 0; + --system-color-area-border-color-opacity: 0.1; + --system-color-area-border-color: rgba(var(--system-color-area-border-color-rgb), var(--system-color-area-border-color-opacity)); + --system-color-area-disabled-background-color: var(--spectrum-disabled-background-color); + --system-color-area-border-width: var(--spectrum-color-area-border-width); + --system-color-area-height: var(--spectrum-color-area-height); + --system-color-area-width: var(--spectrum-color-area-width); + --system-color-area-min-width: var(--spectrum-color-area-minimum-width); + --system-color-area-min-height: var(--spectrum-color-area-minimum-height); +} diff --git a/tokens/dist/css/components/spectrum-two/colorhandle.css b/tokens/dist/css/components/spectrum-two/colorhandle.css new file mode 100644 index 00000000000..6395259ba09 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/colorhandle.css @@ -0,0 +1,28 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-color-handle-size: var(--spectrum-color-handle-size); + --system-color-handle-focused-size: var(--spectrum-color-handle-size-key-focus); + --system-color-handle-hitarea-size: var(--spectrum-color-control-track-width); + --system-color-handle-animation-duration: var(--spectrum-animation-duration-100); + --system-color-handle-animation-easing: ease-in-out; + --system-color-handle-outer-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity)); + --system-color-handle-outer-border-width: var(--spectrum-color-handle-outer-border-width); + --system-color-handle-inner-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity)); + --system-color-handle-inner-border-width: var(--spectrum-color-handle-inner-border-width); + --system-color-handle-border-width: var(--spectrum-color-handle-border-width); + --system-color-handle-border-color: var(--spectrum-white); + --system-color-handle-border-color-disabled: var(--spectrum-disabled-content-color); + --system-color-handle-fill-color-disabled: var(--spectrum-disabled-background-color); +} diff --git a/tokens/dist/css/components/spectrum-two/colorloupe.css b/tokens/dist/css/components/spectrum-two/colorloupe.css new file mode 100644 index 00000000000..993b41e3275 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/colorloupe.css @@ -0,0 +1,29 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-color-loupe-width: var(--spectrum-color-loupe-width); + --system-color-loupe-height: var(--spectrum-color-loupe-height); + --system-color-loupe-offset: var(--spectrum-color-loupe-bottom-to-color-handle); + --system-color-loupe-animation-distance: 8px; + --system-color-loupe-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-color-loupe-drop-shadow-y: var(--spectrum-color-loupe-drop-shadow-y); + --system-color-loupe-drop-shadow-blur: var(--spectrum-color-loupe-drop-shadow-blur); + --system-color-loupe-drop-shadow-color: var(--spectrum-color-loupe-drop-shadow-color); + --system-color-loupe-outer-border-width: var(--spectrum-color-loupe-outer-border-width); + --system-color-loupe-inner-border-width: var(--spectrum-color-loupe-inner-border-width); + --system-color-loupe-outer-border-color: var(--spectrum-color-loupe-outer-border); + --system-color-loupe-inner-border-color: var(--spectrum-color-loupe-inner-border); + --system-color-loupe-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark); + --system-color-loupe-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light); +} diff --git a/tokens/dist/css/components/spectrum-two/colorslider.css b/tokens/dist/css/components/spectrum-two/colorslider.css new file mode 100644 index 00000000000..a836725e4de --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/colorslider.css @@ -0,0 +1,20 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-color-slider-handle-margin-block: var(--spectrum-component-top-to-text-75); + --system-color-slider-border-color-rgba: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity)); + --system-color-slider-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size); + --system-color-slider-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark); + --system-color-slider-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light); +} diff --git a/tokens/dist/css/components/spectrum-two/colorwheel.css b/tokens/dist/css/components/spectrum-two/colorwheel.css new file mode 100644 index 00000000000..b9d23ff5b2c --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/colorwheel.css @@ -0,0 +1,24 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-color-wheel-width: var(--spectrum-color-wheel-width); + --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); + --system-color-wheel-height: var(--spectrum-color-wheel-width); + --system-color-wheel-border-color: var(--spectrum-transparent-black-200); + --system-color-wheel-border-width: var(--spectrum-border-width-100); + --system-color-wheel-fill-color-disabled: var(--spectrum-disabled-background-color); + --system-color-wheel-track-width: var(--spectrum-color-control-track-width); + --system-color-wheel-colorarea-margin: var(--spectrum-color-wheel-color-area-margin); + --system-color-wheel-colorhandle-position: calc(var(--system-color-wheel-width) / 2 - var(--system-color-wheel-track-width) / 2); +} diff --git a/tokens/dist/css/components/spectrum-two/combobox.css b/tokens/dist/css/components/spectrum-two/combobox.css new file mode 100644 index 00000000000..ede225cad1c --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/combobox.css @@ -0,0 +1,98 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-combobox-border-color-default: var(--spectrum-gray-500); + --system-combobox-border-color-hover: var(--spectrum-gray-600); + --system-combobox-border-color-focus: var(--spectrum-gray-500); + --system-combobox-border-color-focus-hover: var(--spectrum-gray-600); + --system-combobox-border-color-key-focus: var(--spectrum-gray-600); + --system-combobox-inline-size: var(--spectrum-field-width); + --system-combobox-minimum-width-multiplier: var(--spectrum-combo-box-minimum-width-multiplier); + --system-combobox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-combobox-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-combobox-border-radius: var(--spectrum-corner-radius-100); + --system-combobox-border-width: var(--spectrum-border-width-100); + --system-combobox-spacing-label-to: var(--spectrum-field-label-to-component); + --system-combobox-font-style: var(--spectrum-default-font-style); + --system-combobox-line-height: var(--spectrum-line-height-100); + --system-combobox-border-color-invalid-default: var(--spectrum-negative-border-color-default); + --system-combobox-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); + --system-combobox-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); + --system-combobox-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); + --system-combobox-border-color-invalid-key-focus: var(--spectrum-negative-border-color-key-focus); + --system-combobox-size-s-block-size: var(--spectrum-component-height-75); + --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-combobox-size-s-font-size: var(--spectrum-font-size-75); + --system-combobox-size-s-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-small); + --system-combobox-size-s-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); + --system-combobox-size-s-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-small); + --system-combobox-size-s-spacing-edge-to-menu: var(--spectrum-component-to-menu-small); + --system-combobox-size-s-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75); + --system-combobox-size-s-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75); + --system-combobox-size-s-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-75); + --system-combobox-size-s-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-75); + --system-combobox-block-size: var(--spectrum-component-height-100); + --system-combobox-size-m-block-size: var(--spectrum-component-height-100); + --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-font-size: var(--spectrum-font-size-100); + --system-combobox-size-m-font-size: var(--spectrum-font-size-100); + --system-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); + --system-combobox-size-m-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); + --system-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); + --system-combobox-size-m-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); + --system-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); + --system-combobox-size-m-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); + --system-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); + --system-combobox-size-m-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); + --system-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); + --system-combobox-size-m-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); + --system-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --system-combobox-size-m-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --system-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-combobox-size-m-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-combobox-size-m-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-combobox-size-l-block-size: var(--spectrum-component-height-200); + --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-combobox-size-l-font-size: var(--spectrum-font-size-200); + --system-combobox-size-l-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-large); + --system-combobox-size-l-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); + --system-combobox-size-l-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-large); + --system-combobox-size-l-spacing-edge-to-menu: var(--spectrum-component-to-menu-large); + --system-combobox-size-l-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200); + --system-combobox-size-l-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200); + --system-combobox-size-l-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-200); + --system-combobox-size-l-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-200); + --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); + --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); + --system-combobox-size-xl-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-extra-large); + --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); + --system-combobox-size-xl-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-extra-large); + --system-combobox-size-xl-spacing-edge-to-menu: var(--spectrum-component-to-menu-extra-large); + --system-combobox-size-xl-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300); + --system-combobox-size-xl-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300); + --system-combobox-size-xl-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-300); + --system-combobox-size-xl-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-300); + --system-combobox-quiet-minimum-width-multiplier: var(--spectrum-combo-box-quiet-minimum-width-multiplier); + --system-combobox-quiet-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-quiet); + --system-combobox-quiet-spacing-inline-start-edge-to-text: var(--spectrum-field-edge-to-text-quiet); + --system-combobox-quiet-size-s-spacing-label-to: var(--spectrum-field-label-to-component-quiet-small); + --system-combobox-quiet-spacing-label-to: var(--spectrum-field-label-to-component-quiet-medium); + --system-combobox-quiet-size-m-spacing-label-to: var(--spectrum-field-label-to-component-quiet-medium); + --system-combobox-quiet-size-l-spacing-label-to: var(--spectrum-field-label-to-component-quiet-large); + --system-combobox-quiet-size-xl-spacing-label-to: var(--spectrum-field-label-to-component-quiet-extra-large); +} diff --git a/tokens/dist/css/components/spectrum-two/contextualhelp.css b/tokens/dist/css/components/spectrum-two/contextualhelp.css new file mode 100644 index 00000000000..7acb0f0a7d5 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/contextualhelp.css @@ -0,0 +1,20 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-contextual-help-padding: var(--spectrum-spacing-400); + --system-contextual-help-link-spacing: var(--spectrum-spacing-300); + --system-contextual-help-heading-size: var(--spectrum-contextual-help-title-size); + --system-contextual-help-heading-color: var(--spectrum-heading-color); + --system-contextual-help-body-color: var(--spectrum-body-color); +} diff --git a/tokens/dist/css/components/spectrum-two/datepicker.css b/tokens/dist/css/components/spectrum-two/datepicker.css new file mode 100644 index 00000000000..49e30e7da4f --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/datepicker.css @@ -0,0 +1,55 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-date-picker-initial-height: var(--spectrum-component-height-100); + --system-date-picker-border-radius: var(--spectrum-corner-radius-100); + --system-date-picker-border-radius-quiet: 0; + --system-date-picker-border-width: var(--spectrum-border-width-100); + --system-date-picker-min-width: var(--spectrum-field-width); + --system-date-picker-icon-size: var(--spectrum-workflow-icon-size-100); + --system-date-picker-pickerbutton-border-color: var(--spectrum-gray-500); + --system-date-picker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default); + --system-date-picker-pickerbutton-width: calc(var(--spectrum-field-edge-to-disclosure-icon-100) * 2 + var(--spectrum-workflow-icon-size-100)); + --system-date-picker-pickerbutton-width-quiet: calc(var(--system-date-picker-pickerbutton-width) - var(--system-date-picker-quiet-button-offset)); + --system-date-picker-quiet-button-offset: var(--spectrum-text-to-visual-100); + --system-date-picker-icon-to-button: var(--spectrum-text-to-visual-100); + --system-date-picker-icon-to-text: var(--spectrum-component-edge-to-text-100); + --system-date-picker-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-date-picker-focus-thickness: var(--spectrum-focus-indicator-thickness); + --system-date-picker-focus-animation: var(--spectrum-animation-duration-100); + --system-date-picker-focus-ring-width: var(--spectrum-border-width-100); + --system-date-picker-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-date-picker-focus-line-gap: var(--spectrum-spacing-75); + --system-date-picker-invalid-quiet-color: var(--spectrum-negative-border-color-default); + --system-date-picker-quiet-border-color-hover: var(--spectrum-gray-500); + --system-date-picker-border-color-disabled: var(--spectrum-disabled-border-color); + --system-date-picker-dash-font-size: var(--spectrum-font-size-100); + --system-date-picker-dash-color: var(--spectrum-neutral-content-color-default); + --system-date-picker-dash-color-disabled: var(--spectrum-disabled-content-color); + --system-date-picker-range-dash-marin-inline-start: calc(var(--system-date-picker-dash-font-size) * -0.5); + --system-date-picker-range-dash-padding-top: 0; + --system-date-picker-input-width-base: calc(var(--system-date-picker-range-input-width-first) + var(--system-date-picker-icon-size)); + --system-date-picker-input-width: calc(var(--system-date-picker-input-width-base) + var(--system-date-picker-initial-height)); + --system-date-picker-input-width-quiet: calc(var(--system-date-picker-range-input-width-quiet-first) + var(--system-date-picker-icon-size) + var(--system-date-picker-initial-height)); + --system-date-picker-range-input-width-first: calc(var(--spectrum-datepicker-initial-width) - var(--spectrum-datepicker-generic-padding) * 2); + --system-date-picker-range-input-width-quiet-first: calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second)); + --system-date-picker-datetime-input-width-first: calc(var(--system-date-picker-input-width-base) + var(--spectrum-datepicker-datetime-width-first)); + --system-date-picker-datetime-input-width: calc(var(--system-date-picker-datetime-input-width-first) + var(--system-date-picker-icon-size) + var(--system-date-picker-initial-height)); + --system-date-picker-datetime-quiet-input-width-first: calc(var(--system-date-picker-input-width-base) + var(--spectrum-datepicker-input-datetime-width)); + --system-date-picker-datetime-quiet-input-width: calc(var(--system-date-picker-datetime-quiet-input-width-first) + var(--system-date-picker-icon-size) + var(--system-date-picker-initial-height)); + --system-date-picker-padding-inline-end: calc(var(--system-date-picker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--system-date-picker-border-width) * 2); + --system-date-picker-padding-inline-end-quiet: calc(var(--system-date-picker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--system-date-picker-quiet-button-offset)); + --system-date-picker-padding-inline-end-invalid: calc(var(--system-date-picker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--system-date-picker-icon-to-button) + var(--system-date-picker-icon-size) - var(--system-date-picker-border-width) * 2); + --system-date-picker-padding-inline-end-invalid-quiet: calc(var(--system-date-picker-pickerbutton-width-quiet) + var(--system-date-picker-icon-size) + var(--system-date-picker-icon-to-text)); +} diff --git a/tokens/dist/css/components/spectrum-two/dial.css b/tokens/dist/css/components/spectrum-two/dial.css new file mode 100644 index 00000000000..4ccea4a6565 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/dial.css @@ -0,0 +1,47 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-dial-background-color-default: var(--spectrum-gray-75); + --system-dial-handle-marker-color-disabled: var(--spectrum-gray-200); + --system-dial-border-color-disabled: var(--spectrum-gray-200); + --system-dial-handle-marker-color: var(--spectrum-gray-700); + --system-dial-border-color: var(--spectrum-gray-700); + --system-dial-handle-marker-color-down: var(--spectrum-gray-800); + --system-dial-border-color-down: var(--spectrum-gray-800); + --system-dial-handle-marker-color-hover: var(--spectrum-gray-800); + --system-dial-border-color-hover: var(--spectrum-gray-800); + --system-dial-handle-marker-color-key-focus: var(--spectrum-gray-25); + --system-dial-border-color-key-focus: var(--spectrum-gray-25); + --system-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700); + --system-dial-border-color-mouse-focus: var(--spectrum-gray-700); + --system-dial-min-max-tick-color: var(--spectrum-gray-600); + --system-dial-label-text-color: var(--spectrum-gray-700); + --system-dial-label-text-color-disabled: var(--spectrum-gray-700); + --system-dial-handle-border-color-disabled: var(--spectrum-gray-400); + --system-dial-container-width: 48px; + --system-dial-handle-marker-width: 12px; + --system-dial-handle-marker-height: 2px; + --system-dial-handle-marker-border-radius: 1px; + --system-dial-handle-size: 100%; + --system-dial-min-height: 0; + --system-dial-controls-min-height: 0; + --system-dial-min-max-tick-angles: 45deg; + --system-dial-width: 32px; + --system-dial-height: 32px; + --system-dial-handle-border-size: var(--spectrum-border-width-200); + --system-dial-label-text-size: var(--spectrum-font-size-75); + --system-dial-label-line-height: var(--spectrum-line-height-200); + --system-dial-small-width: 24px; + --system-dial-small-height: 24px; +} diff --git a/tokens/dist/css/components/spectrum-two/dialog.css b/tokens/dist/css/components/spectrum-two/dialog.css new file mode 100644 index 00000000000..d9a7b5371b9 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/dialog.css @@ -0,0 +1,35 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-dialog-fullscreen-header-text-size: 28px; + --system-dialog-min-inline-size: 288px; + --system-dialog-confirm-small-width: 400px; + --system-dialog-confirm-medium-width: 480px; + --system-dialog-confirm-large-width: 640px; + --system-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300); + --system-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200); + --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); + --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); + --system-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100); + --system-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100); + --system-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); + --system-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1); + --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); + --system-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100); + --system-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); + --system-dialog-confirm-close-button-size: var(--spectrum-component-height-100); + --system-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300)); + --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); +} diff --git a/tokens/dist/css/components/spectrum-two/divider.css b/tokens/dist/css/components/spectrum-two/divider.css new file mode 100644 index 00000000000..42eafdbc55e --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/divider.css @@ -0,0 +1,24 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-divider-background-color-small: var(--spectrum-gray-200); + --system-divider-background-color-medium: var(--spectrum-gray-200); + --system-divider-background-color-large: var(--spectrum-gray-800); + --system-divider-background-color-small-static-white: var(--spectrum-transparent-white-400); + --system-divider-background-color-medium-static-white: var(--spectrum-transparent-white-400); + --system-divider-background-color-large-static-white: var(--spectrum-transparent-white-900); + --system-divider-background-color-small-static-black: var(--spectrum-transparent-black-400); + --system-divider-background-color-medium-static-black: var(--spectrum-transparent-black-400); + --system-divider-background-color-large-static-black: var(--spectrum-transparent-black-900); +} diff --git a/tokens/dist/css/components/spectrum-two/dropindicator.css b/tokens/dist/css/components/spectrum-two/dropindicator.css new file mode 100644 index 00000000000..ebf1a8b3b41 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/dropindicator.css @@ -0,0 +1,19 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-drop-indicator-border-color: var(--spectrum-dropindicator-color); + --system-drop-indicator-circle-color: var(--spectrum-dropindicator-color); + --system-drop-indicator-border-size: var(--spectrum-border-width-200); + --system-drop-indicator-circle-size: 12px; +} diff --git a/tokens/dist/css/components/spectrum-two/dropzone.css b/tokens/dist/css/components/spectrum-two/dropzone.css new file mode 100644 index 00000000000..fe923eec038 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/dropzone.css @@ -0,0 +1,50 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-drop-zone-padding: var(--spectrum-spacing-400); + --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); + --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); + --system-drop-zone-border-width: var(--spectrum-border-width-200); + --system-drop-zone-corner-radius: var(--spectrum-corner-radius-100); + --system-drop-zone-border-color: var(--spectrum-gray-200); + --system-drop-zone-heading-font-family: var(--spectrum-sans-font-family-stack); + --system-drop-zone-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-drop-zone-heading-font-style: var(--spectrum-heading-sans-serif-font-style); + --system-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); + --system-drop-zone-heading-line-height: var(--spectrum-heading-line-height); + --system-drop-zone-heading-color: var(--spectrum-heading-color); + --system-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); + --system-drop-zone-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-drop-zone-body-font-style: var(--spectrum-body-sans-serif-font-style); + --system-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); + --system-drop-zone-body-line-height: var(--spectrum-body-line-height); + --system-drop-zone-body-color: var(--spectrum-body-color); + --system-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb); + --system-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); + --system-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); + --system-drop-zone-illustration-color-hover: var(--spectrum-accent-visual-color); + --system-drop-zone-content-height: var(--spectrum-component-height-300); + --system-drop-zone-content-max-width: var(--spectrum-drop-zone-content-maximum-width); + --system-drop-zone-content-edge-to-text: var(--spectrum-component-edge-to-text-300); + --system-drop-zone-content-top-to-text: var(--spectrum-component-top-to-text-300); + --system-drop-zone-content-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --system-drop-zone-content-font-family: var(--spectrum-sans-font-family-stack); + --system-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); + --system-drop-zone-content-font-style: var(--spectrum-default-font-style); + --system-drop-zone-content-font-size: var(--spectrum-font-size-300); + --system-drop-zone-content-line-height: var(--spectrum-line-height-100); + --system-drop-zone-content-background-color: var(--spectrum-accent-visual-color); + --system-drop-zone-content-color: var(--spectrum-white); + --system-drop-zone-heading-font-size-cjk: var(--spectrum-drop-zone-cjk-title-size); +} diff --git a/tokens/dist/css/components/spectrum-two/fieldgroup.css b/tokens/dist/css/components/spectrum-two/fieldgroup.css new file mode 100644 index 00000000000..2a677f66960 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/fieldgroup.css @@ -0,0 +1,17 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-field-group-margin: var(--spectrum-spacing-300); + --system-field-group-readonly-delimiter: "\002c"; +} diff --git a/tokens/dist/css/components/spectrum-two/fieldlabel.css b/tokens/dist/css/components/spectrum-two/fieldlabel.css new file mode 100644 index 00000000000..43c4b464125 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/fieldlabel.css @@ -0,0 +1,54 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-field-label-color: var(--spectrum-neutral-subdued-content-color-default); + --system-field-label-font-weight: var(--spectrum-regular-font-weight); + --system-field-label-line-height: var(--spectrum-line-height-100); + --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-field-label-size-s-min-height: var(--spectrum-component-height-75); + --system-field-label-size-s-top-to-text: var(--spectrum-component-top-to-text-75); + --system-field-label-size-s-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-field-label-size-s-font-size: var(--spectrum-font-size-75); + --system-field-label-size-s-side-margin-block-start: var(--spectrum-field-label-top-margin-small); + --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); + --system-field-label-size-s-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small); + --system-field-label-min-height: var(--spectrum-component-height-75); + --system-field-label-size-m-min-height: var(--spectrum-component-height-75); + --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-field-label-size-m-top-to-text: var(--spectrum-component-top-to-text-75); + --system-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-field-label-size-m-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-field-label-font-size: var(--spectrum-font-size-75); + --system-field-label-size-m-font-size: var(--spectrum-font-size-75); + --system-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); + --system-field-label-size-m-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); + --system-field-label-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); + --system-field-label-size-m-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); + --system-field-label-size-l-min-height: var(--spectrum-component-height-100); + --system-field-label-size-l-top-to-text: var(--spectrum-component-top-to-text-100); + --system-field-label-size-l-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-field-label-size-l-font-size: var(--spectrum-font-size-100); + --system-field-label-size-l-side-margin-block-start: var(--spectrum-field-label-top-margin-large); + --system-field-label-size-l-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-l-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large); + --system-field-label-size-xl-min-height: var(--spectrum-component-height-200); + --system-field-label-size-xl-top-to-text: var(--spectrum-component-top-to-text-200); + --system-field-label-size-xl-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --system-field-label-size-xl-font-size: var(--spectrum-font-size-200); + --system-field-label-size-xl-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large); + --system-field-label-size-xl-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-xl-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large); +} diff --git a/tokens/dist/css/components/spectrum-two/floatingactionbutton.css b/tokens/dist/css/components/spectrum-two/floatingactionbutton.css new file mode 100644 index 00000000000..1f280633bee --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/floatingactionbutton.css @@ -0,0 +1,39 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-floating-action-button-size: var(--spectrum-component-height-200); + --system-floating-action-button-icon-size: var(--spectrum-workflow-icon-size-200); + --system-floating-action-button-padding: var(--spectrum-component-pill-edge-to-visual-only-200); + --system-floating-action-button-margin: var(--spectrum-spacing-200); + --system-floating-action-button-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-floating-action-button-focus-ring-width: var(--spectrum-focus-indicator-thickness); + --system-floating-action-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-floating-action-button-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-floating-action-button-background-color: var(--spectrum-accent-background-color-default); + --system-floating-action-button-background-color-hover: var(--spectrum-accent-background-color-hover); + --system-floating-action-button-background-color-down: var(--spectrum-accent-background-color-down); + --system-floating-action-button-background-color-key-focus: var(--spectrum-accent-background-color-key-focus); + --system-floating-action-button-icon-color: var(--spectrum-white); + --system-floating-action-button-icon-color-hover: var(--spectrum-white); + --system-floating-action-button-icon-color-down: var(--spectrum-white); + --system-floating-action-button-icon-color-key-focus: var(--spectrum-white); + --system-floating-action-button-secondary-background-color: var(--spectrum-background-layer-2-color); + --system-floating-action-button-secondary-background-color-hover: var(--spectrum-background-layer-2-color); + --system-floating-action-button-secondary-background-color-down: var(--spectrum-background-layer-2-color); + --system-floating-action-button-secondary-background-color-key-focus: var(--spectrum-background-layer-2-color); + --system-floating-action-button-secondary-icon-color: var(--spectrum-neutral-subdued-content-color-default); + --system-floating-action-button-secondary-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-floating-action-button-secondary-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); + --system-floating-action-button-secondary-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); +} diff --git a/tokens/dist/css/components/spectrum-two/helptext.css b/tokens/dist/css/components/spectrum-two/helptext.css new file mode 100644 index 00000000000..7fbdda3885c --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/helptext.css @@ -0,0 +1,56 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-help-text-line-height: var(--spectrum-line-height-100); + --system-help-text-content-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-help-text-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-help-text-disabled-content-color: var(--spectrum-disabled-content-color); + --system-help-text-neutral-content-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-help-text-neutral-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-help-text-negative-content-color-default: var(--spectrum-negative-color-900); + --system-help-text-negative-icon-color-default: var(--spectrum-negative-color-900); + --system-help-text-disabled-content-color-default: var(--system-help-text-disabled-content-color); + --system-help-text-disabled-icon-color-default: var(--system-help-text-disabled-content-color); + --system-help-text-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-help-text-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-help-text-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-help-text-size-s-min-height: var(--spectrum-component-height-75); + --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-help-text-size-s-font-size: var(--spectrum-font-size-75); + --system-help-text-size-s-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-s-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-small); + --system-help-text-size-s-top-to-text: var(--spectrum-component-top-to-text-75); + --system-help-text-size-s-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-help-text-size-m-min-height: var(--spectrum-component-height-75); + --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-help-text-size-m-font-size: var(--spectrum-font-size-75); + --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-m-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-medium); + --system-help-text-size-m-top-to-text: var(--spectrum-component-top-to-text-75); + --system-help-text-size-m-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-help-text-size-l-min-height: var(--spectrum-component-height-100); + --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-help-text-size-l-font-size: var(--spectrum-font-size-100); + --system-help-text-size-l-text-to-visual: var(--spectrum-text-to-visual-100); + --system-help-text-size-l-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-large); + --system-help-text-size-l-top-to-text: var(--spectrum-component-top-to-text-100); + --system-help-text-size-l-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-help-text-size-xl-min-height: var(--spectrum-component-height-200); + --system-help-text-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-help-text-size-xl-font-size: var(--spectrum-font-size-200); + --system-help-text-size-xl-text-to-visual: var(--spectrum-text-to-visual-200); + --system-help-text-size-xl-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-extra-large); + --system-help-text-size-xl-top-to-text: var(--spectrum-component-top-to-text-200); + --system-help-text-size-xl-bottom-to-text: var(--spectrum-component-bottom-to-text-200); +} diff --git a/tokens/dist/css/components/spectrum-two/icon.css b/tokens/dist/css/components/spectrum-two/icon.css new file mode 100644 index 00000000000..e20b6e9eac8 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/icon.css @@ -0,0 +1,109 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs); + --system-icon-size-xs: var(--spectrum-workflow-icon-size-50); + --system-icon-size-s: var(--spectrum-workflow-icon-size-75); + --system-icon-size-m: var(--spectrum-workflow-icon-size-100); + --system-icon-size-l: var(--spectrum-workflow-icon-size-200); + --system-icon-size-xl: var(--spectrum-workflow-icon-size-300); + --system-icon-size-xxl: var(--spectrum-workflow-icon-size-xxl); + --system-ui-icon-chevron-right-50-icon-size: var(--spectrum-chevron-icon-size-50); + --system-ui-icon-chevron-down-50-icon-size: var(--spectrum-chevron-icon-size-50); + --system-ui-icon-chevron-right-75-icon-size: var(--spectrum-chevron-icon-size-75); + --system-ui-icon-chevron-down-75-icon-size: var(--spectrum-chevron-icon-size-75); + --system-ui-icon-chevron-right-100-icon-size: var(--spectrum-chevron-icon-size-100); + --system-ui-icon-chevron-right-200-icon-size: var(--spectrum-chevron-icon-size-200); + --system-ui-icon-chevron-right-300-icon-size: var(--spectrum-chevron-icon-size-300); + --system-ui-icon-chevron-right-400-icon-size: var(--spectrum-chevron-icon-size-400); + --system-ui-icon-chevron-right-500-icon-size: var(--spectrum-chevron-icon-size-500); + --system-ui-icon-chevron-down-100-icon-size: var(--spectrum-chevron-icon-size-100); + --system-ui-icon-chevron-down-200-icon-size: var(--spectrum-chevron-icon-size-200); + --system-ui-icon-chevron-down-300-icon-size: var(--spectrum-chevron-icon-size-300); + --system-ui-icon-chevron-down-400-icon-size: var(--spectrum-chevron-icon-size-400); + --system-ui-icon-chevron-down-500-icon-size: var(--spectrum-chevron-icon-size-500); + --system-ui-icon-chevron-left-50-icon-size: var(--spectrum-chevron-icon-size-50); + --system-ui-icon-chevron-left-75-icon-size: var(--spectrum-chevron-icon-size-75); + --system-ui-icon-chevron-left-100-icon-size: var(--spectrum-chevron-icon-size-100); + --system-ui-icon-chevron-left-200-icon-size: var(--spectrum-chevron-icon-size-200); + --system-ui-icon-chevron-left-300-icon-size: var(--spectrum-chevron-icon-size-300); + --system-ui-icon-chevron-left-400-icon-size: var(--spectrum-chevron-icon-size-400); + --system-ui-icon-chevron-left-500-icon-size: var(--spectrum-chevron-icon-size-500); + --system-ui-icon-chevron-up-50-icon-size: var(--spectrum-chevron-icon-size-50); + --system-ui-icon-chevron-up-75-icon-size: var(--spectrum-chevron-icon-size-75); + --system-ui-icon-chevron-up-100-icon-size: var(--spectrum-chevron-icon-size-100); + --system-ui-icon-chevron-up-200-icon-size: var(--spectrum-chevron-icon-size-200); + --system-ui-icon-chevron-up-300-icon-size: var(--spectrum-chevron-icon-size-300); + --system-ui-icon-chevron-up-400-icon-size: var(--spectrum-chevron-icon-size-400); + --system-ui-icon-chevron-up-500-icon-size: var(--spectrum-chevron-icon-size-500); + --system-ui-icon-arrow-right-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-right-100-icon-size: var(--spectrum-arrow-icon-size-100); + --system-ui-icon-arrow-right-200-icon-size: var(--spectrum-arrow-icon-size-200); + --system-ui-icon-arrow-right-300-icon-size: var(--spectrum-arrow-icon-size-300); + --system-ui-icon-arrow-right-400-icon-size: var(--spectrum-arrow-icon-size-400); + --system-ui-icon-arrow-right-500-icon-size: var(--spectrum-arrow-icon-size-500); + --system-ui-icon-arrow-right-600-icon-size: var(--spectrum-arrow-icon-size-600); + --system-ui-icon-arrow-down-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-down-100-icon-size: var(--spectrum-arrow-icon-size-100); + --system-ui-icon-arrow-down-200-icon-size: var(--spectrum-arrow-icon-size-200); + --system-ui-icon-arrow-down-300-icon-size: var(--spectrum-arrow-icon-size-300); + --system-ui-icon-arrow-down-400-icon-size: var(--spectrum-arrow-icon-size-400); + --system-ui-icon-arrow-down-500-icon-size: var(--spectrum-arrow-icon-size-500); + --system-ui-icon-arrow-down-600-icon-size: var(--spectrum-arrow-icon-size-600); + --system-ui-icon-arrow-left-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-left-100-icon-size: var(--spectrum-arrow-icon-size-100); + --system-ui-icon-arrow-left-200-icon-size: var(--spectrum-arrow-icon-size-200); + --system-ui-icon-arrow-left-300-icon-size: var(--spectrum-arrow-icon-size-300); + --system-ui-icon-arrow-left-400-icon-size: var(--spectrum-arrow-icon-size-400); + --system-ui-icon-arrow-left-500-icon-size: var(--spectrum-arrow-icon-size-500); + --system-ui-icon-arrow-left-600-icon-size: var(--spectrum-arrow-icon-size-600); + --system-ui-icon-arrow-up-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-up-100-icon-size: var(--spectrum-arrow-icon-size-100); + --system-ui-icon-arrow-up-200-icon-size: var(--spectrum-arrow-icon-size-200); + --system-ui-icon-arrow-up-300-icon-size: var(--spectrum-arrow-icon-size-300); + --system-ui-icon-arrow-up-400-icon-size: var(--spectrum-arrow-icon-size-400); + --system-ui-icon-arrow-up-500-icon-size: var(--spectrum-arrow-icon-size-500); + --system-ui-icon-arrow-up-600-icon-size: var(--spectrum-arrow-icon-size-600); + --system-ui-icon-checkmark-50-icon-size: var(--spectrum-checkmark-icon-size-50); + --system-ui-icon-checkmark-75-icon-size: var(--spectrum-checkmark-icon-size-75); + --system-ui-icon-checkmark-100-icon-size: var(--spectrum-checkmark-icon-size-100); + --system-ui-icon-checkmark-200-icon-size: var(--spectrum-checkmark-icon-size-200); + --system-ui-icon-checkmark-300-icon-size: var(--spectrum-checkmark-icon-size-300); + --system-ui-icon-checkmark-400-icon-size: var(--spectrum-checkmark-icon-size-400); + --system-ui-icon-checkmark-500-icon-size: var(--spectrum-checkmark-icon-size-500); + --system-ui-icon-checkmark-600-icon-size: var(--spectrum-checkmark-icon-size-600); + --system-ui-icon-dash-50-icon-size: var(--spectrum-dash-icon-size-50); + --system-ui-icon-dash-75-icon-size: var(--spectrum-dash-icon-size-75); + --system-ui-icon-dash-100-icon-size: var(--spectrum-dash-icon-size-100); + --system-ui-icon-dash-200-icon-size: var(--spectrum-dash-icon-size-200); + --system-ui-icon-dash-300-icon-size: var(--spectrum-dash-icon-size-300); + --system-ui-icon-dash-400-icon-size: var(--spectrum-dash-icon-size-400); + --system-ui-icon-dash-500-icon-size: var(--spectrum-dash-icon-size-500); + --system-ui-icon-dash-600-icon-size: var(--spectrum-dash-icon-size-600); + --system-ui-icon-cross-75-icon-size: var(--spectrum-cross-icon-size-75); + --system-ui-icon-cross-100-icon-size: var(--spectrum-cross-icon-size-100); + --system-ui-icon-cross-200-icon-size: var(--spectrum-cross-icon-size-200); + --system-ui-icon-cross-300-icon-size: var(--spectrum-cross-icon-size-300); + --system-ui-icon-cross-400-icon-size: var(--spectrum-cross-icon-size-400); + --system-ui-icon-cross-500-icon-size: var(--spectrum-cross-icon-size-500); + --system-ui-icon-cross-600-icon-size: var(--spectrum-cross-icon-size-600); + --system-ui-icon-corner-triangle-75-icon-size: var(--spectrum-corner-triangle-icon-size-75); + --system-ui-icon-corner-triangle-100-icon-size: var(--spectrum-corner-triangle-icon-size-100); + --system-ui-icon-corner-triangle-200-icon-size: var(--spectrum-corner-triangle-icon-size-200); + --system-ui-icon-corner-triangle-300-icon-size: var(--spectrum-corner-triangle-icon-size-300); + --system-ui-icon-asterisk-75-icon-size: var(--spectrum-asterisk-icon-size-75); + --system-ui-icon-asterisk-100-icon-size: var(--spectrum-asterisk-icon-size-100); + --system-ui-icon-asterisk-200-icon-size: var(--spectrum-asterisk-icon-size-200); + --system-ui-icon-asterisk-300-icon-size: var(--spectrum-asterisk-icon-size-300); +} diff --git a/tokens/dist/css/components/spectrum-two/illustratedmessage.css b/tokens/dist/css/components/spectrum-two/illustratedmessage.css new file mode 100644 index 00000000000..2736829343a --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/illustratedmessage.css @@ -0,0 +1,36 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-illustrated-message-description-max-inline-size: var(--spectrum-illustrated-message-maximum-width); + --system-illustrated-message-heading-max-inline-size: var(--spectrum-illustrated-message-maximum-width); + --system-illustrated-message-title-to-heading: var(--spectrum-spacing-400); + --system-illustrated-message-heading-to-description: var(--spectrum-spacing-75); + --system-illustrated-message-illustration-color: var(--spectrum-neutral-visual-color); + --system-illustrated-message-illustration-accent-color: var(--spectrum-accent-visual-color); + --system-illustrated-message-title-font-family: var(--spectrum-sans-font-family-stack); + --system-illustrated-message-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-illustrated-message-title-font-style: var(--spectrum-heading-sans-serif-font-style); + --system-illustrated-message-title-font-size: var(--spectrum-illustrated-message-title-size); + --system-illustrated-message-title-line-height: var(--spectrum-heading-line-height); + --system-illustrated-message-title-color: var(--spectrum-heading-color); + --system-illustrated-message-description-font-family: var(--spectrum-sans-font-family-stack); + --system-illustrated-message-description-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-illustrated-message-description-font-style: var(--spectrum-body-sans-serif-font-style); + --system-illustrated-message-description-font-size: var(--spectrum-illustrated-message-body-size); + --system-illustrated-message-description-line-height: var(--spectrum-body-line-height); + --system-illustrated-message-description-color: var(--spectrum-body-color); + --system-illustrated-message-lang-ja-title-font-size: var(--spectrum-illustrated-message-cjk-title-size); + --system-illustrated-message-lang-zh-title-font-size: var(--spectrum-illustrated-message-cjk-title-size); + --system-illustrated-message-lang-ko-title-font-size: var(--spectrum-illustrated-message-cjk-title-size); +} diff --git a/tokens/dist/css/components/spectrum-two/infieldbutton.css b/tokens/dist/css/components/spectrum-two/infieldbutton.css new file mode 100644 index 00000000000..48b940207f9 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/infieldbutton.css @@ -0,0 +1,79 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-infield-button-border-width: var(--spectrum-border-width-100); + --system-infield-button-border-color: inherit; + --system-infield-button-border-radius: var(--spectrum-corner-radius-100); + --system-infield-button-border-radius-reset: 0; + --system-infield-button-stacked-top-border-radius-start-start: var(--system-infield-button-border-radius-reset); + --system-infield-button-stacked-bottom-border-radius-end-start: var(--system-infield-button-border-radius-reset); + --system-infield-button-background-color: var(--spectrum-gray-50); + --system-infield-button-background-color-hover: var(--spectrum-gray-100); + --system-infield-button-background-color-down: var(--spectrum-gray-200); + --system-infield-button-background-color-key-focus: var(--spectrum-gray-100); + --system-infield-button-height: var(--spectrum-component-height-100); + --system-infield-button-width: var(--spectrum-component-height-100); + --system-infield-button-stacked-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); + --system-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill); + --system-infield-button-inner-edge-to-fill: var(--spectrum-in-field-button-stacked-inner-edge-to-fill); + --system-infield-button-fill-padding: 0px; + --system-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium); + --system-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); + --system-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium); + --system-infield-button-animation-duration: var(--spectrum-animation-duration-100); + --system-infield-button-icon-color: var(--spectrum-neutral-content-color-default); + --system-infield-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-infield-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-infield-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-infield-button-fill-justify-content: center; + --system-infield-button-disabled-background-color: var(--spectrum-disabled-background-color); + --system-infield-button-disabled-background-color-hover: var(--spectrum-disabled-background-color); + --system-infield-button-disabled-background-color-down: var(--spectrum-disabled-background-color); + --system-infield-button-disabled-border-color: var(--spectrum-disabled-background-color); + --system-infield-button-disabled-icon-color: var(--spectrum-disabled-content-color); + --system-infield-button-disabled-icon-color-hover: var(--spectrum-disabled-content-color); + --system-infield-button-disabled-icon-color-down: var(--spectrum-disabled-content-color); + --system-infield-button-disabled-icon-color-key-focus: var(--spectrum-disabled-content-color); + --system-infield-button-size-s-height: var(--spectrum-component-height-75); + --system-infield-button-size-s-width: var(--spectrum-component-height-75); + --system-infield-button-size-s-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small); + --system-infield-button-size-s-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); + --system-infield-button-size-s-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small); + --system-infield-button-size-l-height: var(--spectrum-component-height-200); + --system-infield-button-size-l-width: var(--spectrum-component-height-200); + --system-infield-button-size-l-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large); + --system-infield-button-size-l-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); + --system-infield-button-size-l-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large); + --system-infield-button-size-xl-height: var(--spectrum-component-height-300); + --system-infield-button-size-xl-width: var(--spectrum-component-height-300); + --system-infield-button-size-xl-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large); + --system-infield-button-size-xl-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); + --system-infield-button-size-xl-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large); + --system-infield-button-top-width: var(--spectrum-in-field-button-width-stacked-medium); + --system-infield-button-bottom-width: var(--spectrum-in-field-button-width-stacked-medium); + --system-infield-button-top-size-s-width: var(--spectrum-in-field-button-width-stacked-small); + --system-infield-button-bottom-size-s-width: var(--spectrum-in-field-button-width-stacked-small); + --system-infield-button-top-size-l-width: var(--spectrum-in-field-button-width-stacked-large); + --system-infield-button-bottom-size-l-width: var(--spectrum-in-field-button-width-stacked-large); + --system-infield-button-top-size-xl-width: var(--spectrum-in-field-button-width-stacked-extra-large); + --system-infield-button-bottom-size-xl-width: var(--spectrum-in-field-button-width-stacked-extra-large); + --system-infield-button-quiet-background-color: transparent; + --system-infield-button-quiet-background-color-hover: transparent; + --system-infield-button-quiet-background-color-down: transparent; + --system-infield-button-quiet-background-color-key-focus: transparent; + --system-infield-button-quiet-infield-border-color: transparent; + --system-infield-button-quiet-border-width: 0; + --system-infield-button-quiet-disabled-background-color: transparent; + --system-infield-button-quiet-disabled-border-color: transparent; +} diff --git a/tokens/dist/css/components/spectrum-two/inlinealert.css b/tokens/dist/css/components/spectrum-two/inlinealert.css new file mode 100644 index 00000000000..7e078c9548b --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/inlinealert.css @@ -0,0 +1,41 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-in-line-alert-heading-font-family: var(--spectrum-sans-font-family-stack); + --system-in-line-alert-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-in-line-alert-heading-font-style: var(--spectrum-heading-sans-serif-font-style); + --system-in-line-alert-heading-font-size: var(--spectrum-heading-size-xxs); + --system-in-line-alert-heading-line-height: var(--spectrum-heading-line-height); + --system-in-line-alert-content-font-family: var(--spectrum-sans-font-family-stack); + --system-in-line-alert-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-in-line-alert-content-font-style: var(--spectrum-body-sans-serif-font-style); + --system-in-line-alert-content-font-size: var(--spectrum-body-size-s); + --system-in-line-alert-content-line-height: var(--spectrum-body-line-height); + --system-in-line-alert-border-width: var(--spectrum-border-width-200); + --system-in-line-alert-border-radius: var(--spectrum-corner-radius-100); + --system-in-line-alert-icon-size: var(--spectrum-workflow-icon-size-100); + --system-in-line-alert-min-inline-size: var(--spectrum-in-line-alert-minimum-width); + --system-in-line-alert-header-min-block-size: var(--spectrum-component-height-50); + --system-in-line-alert-spacing-edge-to-text: var(--spectrum-spacing-400); + --system-in-line-alert-spacing-header-to-icon: var(--spectrum-spacing-400); + --system-in-line-alert-spacing-header-content-button: var(--spectrum-spacing-300); + --system-in-line-alert-background-color: var(--spectrum-background-layer-2-color); + --system-in-line-alert-border-and-icon-color: var(--spectrum-neutral-visual-color); + --system-in-line-alert-header-color: var(--spectrum-heading-color); + --system-in-line-alert-content-color: var(--spectrum-body-color); + --system-in-line-alert-border-and-icon-color-info: var(--spectrum-informative-visual-color); + --system-in-line-alert-border-and-icon-color-positive: var(--spectrum-positive-visual-color); + --system-in-line-alert-border-and-icon-color-notice: var(--spectrum-notice-visual-color); + --system-in-line-alert-border-and-icon-color-negative: var(--spectrum-negative-visual-color); +} diff --git a/tokens/dist/css/components/spectrum-two/link.css b/tokens/dist/css/components/spectrum-two/link.css new file mode 100644 index 00000000000..ecefeaddd98 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/link.css @@ -0,0 +1,26 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-link-animation-duration: var(--spectrum-animation-duration-100); + --system-link-text-color-primary-default: var(--spectrum-accent-content-color-default); + --system-link-text-color-primary-hover: var(--spectrum-accent-content-color-hover); + --system-link-text-color-primary-active: var(--spectrum-accent-content-color-down); + --system-link-text-color-primary-focus: var(--spectrum-accent-content-color-key-focus); + --system-link-text-color-secondary-default: var(--spectrum-neutral-content-color-default); + --system-link-text-color-secondary-hover: var(--spectrum-neutral-content-color-hover); + --system-link-text-color-secondary-active: var(--spectrum-neutral-content-color-down); + --system-link-text-color-secondary-focus: var(--spectrum-neutral-content-color-key-focus); + --system-link-text-color-white: var(--spectrum-white); + --system-link-text-color-black: var(--spectrum-black); +} diff --git a/tokens/dist/css/components/spectrum-two/logicbutton.css b/tokens/dist/css/components/spectrum-two/logicbutton.css new file mode 100644 index 00000000000..10baa7be303 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/logicbutton.css @@ -0,0 +1,39 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-logic-button-height: 24px; + --system-logic-button-padding: var(--spectrum-component-edge-to-text-50); + --system-logic-button-font-size: var(--spectrum-font-size-100); + --system-logic-button-font-weight: var(--spectrum-bold-font-weight); + --system-logic-button-border-width: var(--spectrum-border-width-200); + --system-logic-button-border-radius: var(--spectrum-corner-radius-100); + --system-logic-button-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --system-logic-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-logic-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-logic-button-and-text-color: var(--spectrum-white); + --system-logic-button-and-background-color-default: var(--spectrum-logic-button-and-background-color); + --system-logic-button-and-background-color-hover: var(--spectrum-blue-1100); + --system-logic-button-and-border-color-hover: var(--spectrum-blue-1100); + --system-logic-button-or-text-color: var(--spectrum-white); + --system-logic-button-and-background-color-default-disabled: var(--spectrum-gray-100); + --system-logic-button-and-border-color-disabled: var(--spectrum-gray-100); + --system-logic-button-and-text-color-disabled: var(--spectrum-gray-500); + --system-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-100); + --system-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-100); + --system-logic-button-or-background-color-disabled: var(--spectrum-gray-100); + --system-logic-button-or-border-color-disabled: var(--spectrum-gray-100); + --system-logic-button-or-text-color-disabled: var(--spectrum-gray-500); + --system-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-100); + --system-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-100); +} diff --git a/tokens/dist/css/components/spectrum-two/menu.css b/tokens/dist/css/components/spectrum-two/menu.css new file mode 100644 index 00000000000..0840f6e30c4 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/menu.css @@ -0,0 +1,151 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-menu-item-top-to-action: var(--spectrum-spacing-50); + --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); + --system-menu-item-label-line-height: var(--spectrum-line-height-100); + --system-menu-item-label-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-menu-item-label-to-description-spacing: var(--spectrum-menu-item-label-to-description); + --system-menu-item-focus-indicator-width: var(--spectrum-border-width-200); + --system-menu-item-focus-indicator-color: var(--spectrum-blue-800); + --system-menu-item-label-to-value-area-min-spacing: var(--spectrum-spacing-100); + --system-menu-item-label-content-color-default: var(--spectrum-neutral-content-color-default); + --system-menu-item-label-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-menu-item-label-content-color-down: var(--spectrum-neutral-content-color-down); + --system-menu-item-label-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-menu-item-label-icon-color-default: var(--spectrum-neutral-content-color-default); + --system-menu-item-label-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-menu-item-label-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-menu-item-label-icon-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-menu-item-label-content-color-disabled: var(--spectrum-disabled-content-color); + --system-menu-item-label-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-menu-item-description-line-height: var(--spectrum-line-height-100); + --system-menu-item-description-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-menu-item-description-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-menu-item-description-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-menu-item-description-color-down: var(--spectrum-neutral-subdued-content-color-down); + --system-menu-item-description-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-menu-item-description-color-disabled: var(--spectrum-disabled-content-color); + --system-menu-section-header-line-height: var(--spectrum-line-height-100); + --system-menu-section-header-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-menu-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-menu-section-header-color: var(--spectrum-gray-900); + --system-menu-collapsible-icon-color: var(--spectrum-gray-900); + --system-menu-checkmark-icon-color-default: var(--spectrum-accent-color-900); + --system-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); + --system-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); + --system-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); + --system-menu-drillin-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-menu-drillin-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-menu-drillin-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); + --system-menu-drillin-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-menu-item-value-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-menu-item-value-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-menu-item-value-color-down: var(--spectrum-neutral-subdued-content-color-down); + --system-menu-item-value-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-menu-checkmark-display-hidden: none; + --system-menu-checkmark-display-shown: block; + --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown); + --system-menu-item-collapsible-has-icon-sub-item-padding-x-start: calc(var(--system-menu-item-label-inline-edge-to-content) + var(--system-menu-item-checkmark-width) + var(--system-menu-item-text-to-control) + var(--system-menu-item-icon-width) + var(--system-menu-item-label-text-to-visual) + var(--system-menu-item-focus-indicator-width)); + --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc(var(--system-menu-item-label-inline-edge-to-content) + var(--system-menu-item-checkmark-width) + var(--system-menu-item-label-text-to-visual) + var(--system-menu-item-focus-indicator-width)); + --system-menu-item-background-color-default: var(--spectrum-gray-25); + --system-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000), var(--spectrum-transparent-black-200-opacity)); + --system-menu-item-background-color-down: rgba(var(--spectrum-gray-1000), var(--spectrum-transparent-black-200-opacity)); + --system-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000), var(--spectrum-transparent-black-200-opacity)); + --system-menu-size-s-item-min-height: var(--spectrum-component-height-75); + --system-menu-size-s-item-icon-height: var(--spectrum-workflow-icon-size-75); + --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75); + --system-menu-size-s-item-label-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-item-label-text-to-visual: var(--spectrum-text-to-visual-75); + --system-menu-size-s-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75); + --system-menu-size-s-item-top-edge-to-text: var(--spectrum-component-top-to-text-75); + --system-menu-size-s-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75); + --system-menu-size-s-item-text-to-control: var(--spectrum-text-to-control-75); + --system-menu-size-s-item-description-font-size: var(--spectrum-font-size-50); + --system-menu-size-s-section-header-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-section-header-min-width: var(--spectrum-component-height-75); + --system-menu-size-s-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small); + --system-menu-size-s-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small); + --system-menu-size-s-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small); + --system-menu-size-s-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small); + --system-menu-size-s-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small); + --system-menu-item-min-height: var(--spectrum-component-height-100); + --system-menu-size-m-item-min-height: var(--spectrum-component-height-100); + --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-height: var(--spectrum-workflow-icon-size-100); + --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-width: var(--spectrum-workflow-icon-size-100); + --system-menu-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); + --system-menu-size-m-item-label-text-to-visual: var(--spectrum-text-to-visual-100); + --system-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100); + --system-menu-size-m-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100); + --system-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100); + --system-menu-size-m-item-top-edge-to-text: var(--spectrum-component-top-to-text-100); + --system-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --system-menu-size-m-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); + --system-menu-size-m-item-text-to-control: var(--spectrum-text-to-control-100); + --system-menu-item-description-font-size: var(--spectrum-font-size-75); + --system-menu-size-m-item-description-font-size: var(--spectrum-font-size-75); + --system-menu-section-header-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-section-header-font-size: var(--spectrum-font-size-100); + --system-menu-section-header-min-width: var(--spectrum-component-height-100); + --system-menu-size-m-section-header-min-width: var(--spectrum-component-height-100); + --system-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); + --system-menu-size-m-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); + --system-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium); + --system-menu-size-m-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium); + --system-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium); + --system-menu-size-m-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium); + --system-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium); + --system-menu-size-m-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium); + --system-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); + --system-menu-size-m-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); + --system-menu-size-l-item-min-height: var(--spectrum-component-height-200); + --system-menu-size-l-item-icon-height: var(--spectrum-workflow-icon-size-200); + --system-menu-size-l-item-icon-width: var(--spectrum-workflow-icon-size-200); + --system-menu-size-l-item-label-font-size: var(--spectrum-font-size-200); + --system-menu-size-l-item-label-text-to-visual: var(--spectrum-text-to-visual-200); + --system-menu-size-l-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200); + --system-menu-size-l-item-top-edge-to-text: var(--spectrum-component-top-to-text-200); + --system-menu-size-l-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200); + --system-menu-size-l-item-text-to-control: var(--spectrum-text-to-control-200); + --system-menu-size-l-item-description-font-size: var(--spectrum-font-size-100); + --system-menu-size-l-section-header-font-size: var(--spectrum-font-size-200); + --system-menu-size-l-section-header-min-width: var(--spectrum-component-height-200); + --system-menu-size-l-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large); + --system-menu-size-l-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large); + --system-menu-size-l-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large); + --system-menu-size-l-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large); + --system-menu-size-l-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large); + --system-menu-size-xl-item-min-height: var(--spectrum-component-height-300); + --system-menu-size-xl-item-icon-height: var(--spectrum-workflow-icon-size-300); + --system-menu-size-xl-item-icon-width: var(--spectrum-workflow-icon-size-300); + --system-menu-size-xl-item-label-font-size: var(--spectrum-font-size-300); + --system-menu-size-xl-item-label-text-to-visual: var(--spectrum-text-to-visual-300); + --system-menu-size-xl-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300); + --system-menu-size-xl-item-top-edge-to-text: var(--spectrum-component-top-to-text-300); + --system-menu-size-xl-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300); + --system-menu-size-xl-item-text-to-control: var(--spectrum-text-to-control-300); + --system-menu-size-xl-item-description-font-size: var(--spectrum-font-size-200); + --system-menu-size-xl-section-header-font-size: var(--spectrum-font-size-300); + --system-menu-size-xl-section-header-min-width: var(--spectrum-component-height-300); + --system-menu-size-xl-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large); + --system-menu-size-xl-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large); + --system-menu-size-xl-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large); + --system-menu-size-xl-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large); + --system-menu-size-xl-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large); +} diff --git a/tokens/dist/css/components/spectrum-two/miller.css b/tokens/dist/css/components/spectrum-two/miller.css new file mode 100644 index 00000000000..7c08786e2ef --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/miller.css @@ -0,0 +1,19 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-miller-columns-inline-size: 272px; + --system-miller-columns-padding: var(--spectrum-spacing-100); + --system-miller-columns-margin-inline-start: var(--spectrum-spacing-100); + --system-miller-columns-margin-inline-end: var(--spectrum-spacing-100); +} diff --git a/tokens/dist/css/components/spectrum-two/modal.css b/tokens/dist/css/components/spectrum-two/modal.css new file mode 100644 index 00000000000..aec731d57cf --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/modal.css @@ -0,0 +1,25 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-modal-confirm-exit-animation-delay: var(--spectrum-animation-duration-0); + --system-modal-fullscreen-margin: 32px; + --system-modal-max-height: 90vh; + --system-modal-max-width: 90%; + --system-modal-background-color: var(--spectrum-background-layer-2-color); + --system-modal-confirm-border-radius: var(--spectrum-corner-radius-100); + --system-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100); + --system-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500); + --system-modal-confirm-entry-animation-delay: var(--spectrum-animation-duration-200); + --system-modal-transition-animation-duration: var(--spectrum-animation-duration-100); +} diff --git a/tokens/dist/css/components/spectrum-two/opacitycheckerboard.css b/tokens/dist/css/components/spectrum-two/opacitycheckerboard.css new file mode 100644 index 00000000000..22d1600fe25 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/opacitycheckerboard.css @@ -0,0 +1,19 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-opacity-checkerboard-dark: var(--spectrum-opacity-checkerboard-square-dark); + --system-opacity-checkerboard-light: var(--spectrum-opacity-checkerboard-square-light); + --system-opacity-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size); + --system-opacity-checkerboard-position: left top; +} diff --git a/tokens/dist/css/components/spectrum-two/pagination.css b/tokens/dist/css/components/spectrum-two/pagination.css new file mode 100644 index 00000000000..94d23993591 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/pagination.css @@ -0,0 +1,20 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-pagination-counter-margin-inline-start: var(--spectrum-pagination-item-inline-spacing); + --system-pagination-page-button-inline-spacing: var(--spectrum-pagination-item-inline-spacing); + --system-pagination-counter-color: var(--spectrum-neutral-subdued-content-color-default); + --system-pagination-counter-font-size: var(--spectrum-font-size-100); + --system-pagination-counter-line-height: var(--spectrum-line-height-100); +} diff --git a/tokens/dist/css/components/spectrum-two/picker.css b/tokens/dist/css/components/spectrum-two/picker.css new file mode 100644 index 00000000000..bac1b836078 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/picker.css @@ -0,0 +1,118 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-picker-background-color-default: var(--spectrum-gray-50); + --system-picker-background-color-default-open: var(--spectrum-gray-100); + --system-picker-background-color-active: var(--spectrum-gray-200); + --system-picker-background-color-hover: var(--spectrum-gray-100); + --system-picker-background-color-hover-open: var(--spectrum-gray-100); + --system-picker-background-color-key-focus: var(--spectrum-gray-100); + --system-picker-border-color-default: var(--spectrum-gray-500); + --system-picker-border-color-default-open: var(--spectrum-gray-500); + --system-picker-border-color-hover: var(--spectrum-gray-600); + --system-picker-border-color-hover-open: var(--spectrum-gray-600); + --system-picker-border-color-active: var(--spectrum-gray-700); + --system-picker-border-color-key-focus: var(--spectrum-gray-600); + --system-picker-border-width: var(--spectrum-border-width-100); + --system-picker-font-size: var(--spectrum-font-size-100); + --system-picker-font-weight: var(--spectrum-regular-font-weight); + --system-picker-placeholder-font-style: var(--spectrum-default-font-style); + --system-picker-line-height: var(--spectrum-line-height-100); + --system-picker-block-size: var(--spectrum-component-height-100); + --system-picker-inline-size: var(--spectrum-field-width); + --system-picker-border-radius: var(--spectrum-corner-radius-100); + --system-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-100); + --system-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-picker-spacing-edge-to-text-quiet: var(--spectrum-field-edge-to-text-quiet); + --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); + --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); + --system-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-medium); + --system-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-medium); + --system-picker-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-medium); + --system-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-medium); + --system-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); + --system-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100); + --system-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100); + --system-picker-spacing-edge-to-disclosure-icon-quiet: var(--spectrum-picker-end-edge-to-disclousure-icon-quiet); + --system-picker-animation-duration: var(--spectrum-animation-duration-100); + --system-picker-font-color-default: var(--spectrum-neutral-content-color-default); + --system-picker-font-color-default-open: var(--spectrum-neutral-content-color-focus); + --system-picker-font-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-font-color-hover-open: var(--spectrum-neutral-content-color-focus-hover); + --system-picker-font-color-active: var(--spectrum-neutral-content-color-down); + --system-picker-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-picker-icon-color-default: var(--spectrum-neutral-content-color-default); + --system-picker-icon-color-default-open: var(--spectrum-neutral-content-color-focus); + --system-picker-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-icon-color-hover-open: var(--spectrum-neutral-content-color-focus-hover); + --system-picker-icon-color-active: var(--spectrum-neutral-content-color-down); + --system-picker-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-picker-border-color-error-default: var(--spectrum-negative-border-color-default); + --system-picker-border-color-error-default-open: var(--spectrum-negative-border-color-focus); + --system-picker-border-color-error-hover: var(--spectrum-negative-border-color-hover); + --system-picker-border-color-error-hover-open: var(--spectrum-negative-border-color-focus-hover); + --system-picker-border-color-error-active: var(--spectrum-negative-border-color-down); + --system-picker-border-color-error-key-focus: var(--spectrum-negative-border-color-key-focus); + --system-picker-icon-color-error: var(--spectrum-negative-visual-color); + --system-picker-background-color-disabled: var(--spectrum-disabled-background-color); + --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-picker-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-picker-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-medium); + --system-picker-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-size-s-block-size: var(--spectrum-component-height-75); + --system-picker-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-picker-size-s-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-picker-size-s-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75); + --system-picker-size-s-spacing-text-to-icon: var(--spectrum-text-to-visual-75); + --system-picker-size-s-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-small); + --system-picker-size-s-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small); + --system-picker-size-s-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-small); + --system-picker-size-s-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-small); + --system-picker-size-s-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); + --system-picker-size-s-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75); + --system-picker-size-s-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75); + --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-small); + --system-picker-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-size-l-block-size: var(--spectrum-component-height-200); + --system-picker-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200); + --system-picker-size-l-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --system-picker-size-l-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200); + --system-picker-size-l-spacing-text-to-icon: var(--spectrum-text-to-visual-200); + --system-picker-size-l-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-large); + --system-picker-size-l-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large); + --system-picker-size-l-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-large); + --system-picker-size-l-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-large); + --system-picker-size-l-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); + --system-picker-size-l-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200); + --system-picker-size-l-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200); + --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-large); + --system-picker-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-size-xl-block-size: var(--spectrum-component-height-300); + --system-picker-size-xl-spacing-top-to-text: var(--spectrum-component-top-to-text-300); + --system-picker-size-xl-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --system-picker-size-xl-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300); + --system-picker-size-xl-spacing-text-to-icon: var(--spectrum-text-to-visual-300); + --system-picker-size-xl-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-extra-large); + --system-picker-size-xl-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large); + --system-picker-size-xl-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); + --system-picker-size-xl-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-extra-large); + --system-picker-size-xl-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); + --system-picker-size-xl-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300); + --system-picker-size-xl-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300); + --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-extra-large); +} diff --git a/tokens/dist/css/components/spectrum-two/pickerbutton.css b/tokens/dist/css/components/spectrum-two/pickerbutton.css new file mode 100644 index 00000000000..1682ce65f2a --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/pickerbutton.css @@ -0,0 +1,69 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-picker-button-background-color: var(--spectrum-gray-50); + --system-picker-button-background-color-hover: var(--spectrum-gray-100); + --system-picker-button-background-color-down: var(--spectrum-gray-200); + --system-picker-button-background-color-key-focus: var(--spectrum-gray-100); + --system-picker-button-border-color: inherit; + --system-picker-button-border-radius: var(--spectrum-corner-radius-100); + --system-picker-button-border-radius-rounded-sided: 0; + --system-picker-button-border-radius-sided: 0; + --system-picker-button-border-width: var(--spectrum-border-width-100); + --system-picker-button-height: var(--spectrum-component-height-100); + --system-picker-button-width: var(--spectrum-component-height-100); + --system-picker-button-gap: var(--spectrum-text-to-visual-50); + --system-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); + --system-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100); + --system-picker-button-border-radius-rounded: var(--spectrum-corner-radius-500); + --system-picker-button-icon-color: var(--spectrum-neutral-content-color-default); + --system-picker-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-picker-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-picker-button-font-color: var(--spectrum-neutral-content-color-default); + --system-picker-button-font-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-button-font-color-down: var(--spectrum-neutral-content-color-down); + --system-picker-button-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); + --system-picker-button-font-style: var(--spectrum-default-font-style); + --system-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-picker-button-font-size: var(--spectrum-font-size-100); + --system-picker-button-background-animation-duration: var(--spectrum-animation-duration-100); + --system-picker-button-background-color-disabled: var(--spectrum-disabled-background-color); + --system-picker-button-background-color-hover-disabled: var(--spectrum-disabled-background-color); + --system-picker-button-background-color-down-disabled: var(--spectrum-disabled-background-color); + --system-picker-button-border-color-disabled: var(--spectrum-disabled-background-color); + --system-picker-button-font-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-font-color-hover-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-font-color-down-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-icon-color-hover-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-icon-color-down-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-size-s-height: var(--spectrum-component-height-75); + --system-picker-button-size-s-width: var(--spectrum-component-height-75); + --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); + --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-button-size-s-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75); + --system-picker-button-size-l-height: var(--spectrum-component-height-200); + --system-picker-button-size-l-width: var(--spectrum-component-height-200); + --system-picker-button-size-l-label-padding: var(--spectrum-text-to-visual-200); + --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-button-size-l-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200); + --system-picker-button-size-xl-height: var(--spectrum-component-height-300); + --system-picker-button-size-xl-width: var(--spectrum-component-height-300); + --system-picker-button-size-xl-label-padding: var(--spectrum-text-to-visual-300); + --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-button-size-xl-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300); +} diff --git a/tokens/dist/css/components/spectrum-two/popover.css b/tokens/dist/css/components/spectrum-two/popover.css new file mode 100644 index 00000000000..0c67b7006af --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/popover.css @@ -0,0 +1,29 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-popover-border-width: var(--spectrum-border-width-100); + --system-popover-animation-distance: var(--spectrum-spacing-100); + --system-popover-background-color: var(--spectrum-background-layer-2-color); + --system-popover-border-color: var(--spectrum-gray-400); + --system-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area); + --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-popover-shadow-color: var(--spectrum-drop-shadow-color); + --system-popover-corner-radius: var(--spectrum-corner-radius-100); + --system-popover-pointer-width: var(--spectrum-popover-tip-width); + --system-popover-pointer-height: var(--spectrum-popover-tip-height); + --system-popover-pointer-edge-offset: calc(var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / 2); + --system-popover-pointer-edge-spacing: calc(var(--system-popover-pointer-edge-offset) - var(--spectrum-popover-tip-width) / 2); +} diff --git a/tokens/dist/css/components/spectrum-two/progressbar.css b/tokens/dist/css/components/spectrum-two/progressbar.css new file mode 100644 index 00000000000..e866a140bfe --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/progressbar.css @@ -0,0 +1,68 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-progress-bar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out); + --system-progress-bar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000); + --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-progress-bar-fill-size-indeterminate: 70%; + --system-progress-bar-size-2400: 192px; + --system-progress-bar-size-2500: 200px; + --system-progress-bar-size-2800: 224px; + --system-progress-bar-font-size: var(--spectrum-font-size-75); + --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width); + --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width); + --system-progress-bar-thickness: var(--spectrum-progress-bar-thickness-medium); + --system-progress-bar-line-height: var(--spectrum-line-height-100); + --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); + --system-progress-bar-spacing-top-to-text: var(--spectrum-component-top-to-text-100); + --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); + --system-progress-bar-text-color: var(--spectrum-neutral-content-color-default); + --system-progress-bar-track-color: var(--spectrum-gray-200); + --system-progress-bar-fill-color: var(--spectrum-accent-color-900); + --system-progress-bar-fill-color-positive: var(--spectrum-positive-visual-color); + --system-progress-bar-fill-color-notice: var(--spectrum-notice-visual-color); + --system-progress-bar-fill-color-negative: var(--spectrum-negative-visual-color); + --system-progress-bar-label-and-value-white: var(--spectrum-white); + --system-progress-bar-track-color-white: var(--spectrum-transparent-white-400); + --system-progress-bar-fill-color-white: var(--spectrum-white); + --system-progress-bar-size-s-size-default: var(--system-progress-bar-size-2400); + --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); + --system-progress-bar-size-s-thickness: var(--spectrum-progress-bar-thickness-small); + --system-progress-bar-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-progress-bar-size-m-size-default: var(--system-progress-bar-size-2400); + --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); + --system-progress-bar-size-m-thickness: var(--spectrum-progress-bar-thickness-large); + --system-progress-bar-size-m-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-progress-bar-size-l-size-default: var(--system-progress-bar-size-2500); + --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); + --system-progress-bar-size-l-thickness: var(--spectrum-progress-bar-thickness-large); + --system-progress-bar-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200); + --system-progress-bar-size-xl-size-default: var(--system-progress-bar-size-2800); + --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); + --system-progress-bar-size-xl-thickness: var(--spectrum-progress-bar-thickness-extra-large); + --system-progress-bar-size-xl-spacing-top-to-text: var(--spectrum-component-top-to-text-300); + --system-meter-min-width: var(--spectrum-meter-minimum-width); + --system-meter-max-width: var(--spectrum-meter-maximum-width); + --system-meter-inline-size: var(--spectrum-meter-width); + --system-meter-top-to-text: var(--spectrum-component-top-to-text); + --system-meter-size-s-progressbar-thickness: var(--spectrum-meter-thickness-small); + --system-meter-size-s-progressbar-size-default: var(--system-progress-bar-size-2400); + --system-meter-size-s-progressbar-font-size: var(--spectrum-font-size-75); + --system-meter-size-s-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-meter-size-l-progressbar-thickness: var(--spectrum-meter-thickness-large); + --system-meter-size-l-progressbar-size-default: var(--system-progress-bar-size-2500); + --system-meter-size-l-progressbar-font-size: var(--spectrum-font-size-100); + --system-meter-size-l-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); +} diff --git a/tokens/dist/css/components/spectrum-two/progresscircle.css b/tokens/dist/css/components/spectrum-two/progresscircle.css new file mode 100644 index 00000000000..1595e9b2bc2 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/progresscircle.css @@ -0,0 +1,28 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-progress-circle-track-border-color: var(--spectrum-gray-200); + --system-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default); + --system-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-400); + --system-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-1000); + --system-progress-circle-size: var(--spectrum-progress-circle-size-medium); + --system-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); + --system-progress-circle-track-border-style: solid; + --system-progress-circle-small-size: var(--spectrum-progress-circle-size-small); + --system-progress-circle-small-thickness: var(--spectrum-progress-circle-thickness-small); + --system-progress-circle-medium-size: var(--spectrum-progress-circle-size-medium); + --system-progress-circle-medium-thickness: var(--spectrum-progress-circle-thickness-medium); + --system-progress-circle-large-size: var(--spectrum-progress-circle-size-large); + --system-progress-circle-large-thickness: var(--spectrum-progress-circle-thickness-large); +} diff --git a/tokens/dist/css/components/spectrum-two/radio.css b/tokens/dist/css/components/spectrum-two/radio.css new file mode 100644 index 00000000000..bd8b7c1da17 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/radio.css @@ -0,0 +1,82 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-radio-button-border-color-default: var(--spectrum-gray-600); + --system-radio-button-border-color-hover: var(--spectrum-gray-700); + --system-radio-button-border-color-down: var(--spectrum-gray-800); + --system-radio-button-border-color-focus: var(--spectrum-gray-700); + --system-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); + --system-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down); + --system-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-radio-disabled-content-color: var(--spectrum-disabled-content-color); + --system-radio-disabled-border-color: var(--spectrum-disabled-content-color); + --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); + --system-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000); + --system-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); + --system-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); + --system-radio-border-width: var(--spectrum-border-width-200); + --system-radio-button-background-color: var(--spectrum-gray-50); + --system-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); + --system-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down); + --system-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus); + --system-radio-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-radio-font-size: var(--spectrum-font-size-100); + --system-radio-line-height: var(--spectrum-line-height-100); + --system-radio-animation-duration: var(--spectrum-animation-duration-100); + --system-radio-height: var(--spectrum-component-height-100); + --system-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); + --system-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); + --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-size-s-height: var(--spectrum-component-height-75); + --system-radio-size-s-button-control-size: var(--spectrum-radio-button-control-size-small); + --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); + --system-radio-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-radio-size-s-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-radio-size-s-button-top-to-control: var(--spectrum-radio-button-top-to-control-small); + --system-radio-size-s-font-size: var(--spectrum-font-size-75); + --system-radio-size-m-height: var(--spectrum-component-height-100); + --system-radio-size-m-button-control-size: var(--spectrum-radio-button-control-size-medium); + --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-size-m-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-radio-size-m-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-radio-size-m-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); + --system-radio-size-m-font-size: var(--spectrum-font-size-100); + --system-radio-size-l-height: var(--spectrum-component-height-200); + --system-radio-size-l-button-control-size: var(--spectrum-radio-button-control-size-large); + --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); + --system-radio-size-l-label-top-to-text: var(--spectrum-component-top-to-text-200); + --system-radio-size-l-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --system-radio-size-l-button-top-to-control: var(--spectrum-radio-button-top-to-control-large); + --system-radio-size-l-font-size: var(--spectrum-font-size-200); + --system-radio-size-xl-height: var(--spectrum-component-height-300); + --system-radio-size-xl-button-control-size: var(--spectrum-radio-button-control-size-extra-large); + --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); + --system-radio-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-300); + --system-radio-size-xl-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --system-radio-size-xl-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large); + --system-radio-size-xl-font-size: var(--spectrum-font-size-300); + --system-radio-emphasized-button-checked-border-color-default: var(--spectrum-accent-color-900); + --system-radio-emphasized-button-checked-border-color-hover: var(--spectrum-accent-color-1000); + --system-radio-emphasized-button-checked-border-color-down: var(--spectrum-accent-color-1100); + --system-radio-emphasized-button-checked-border-color-focus: var(--spectrum-accent-color-1000); +} diff --git a/tokens/dist/css/components/spectrum-two/rating.css b/tokens/dist/css/components/spectrum-two/rating.css new file mode 100644 index 00000000000..58be31b7f65 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/rating.css @@ -0,0 +1,34 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); + --system-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-rating-icon-height: var(--spectrum-workflow-icon-size-100); + --system-rating-icon-width: var(--spectrum-workflow-icon-size-100); + --system-rating-border-radius: var(--spectrum-corner-radius-100); + --system-rating-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-rating-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-rating-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-rating-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100); + --system-rating-indicator-border-radius: var(--spectrum-corner-radius-75); + --system-rating-indicator-height: var(--spectrum-border-width-200); + --system-rating-emphasized-icon-color-default: var(--spectrum-accent-content-color-default); + --system-rating-emphasized-icon-color-hover: var(--spectrum-accent-content-color-hover); + --system-rating-emphasized-icon-color-down: var(--spectrum-accent-content-color-down); + --system-rating-emphasized-icon-color-key-focus: var(--spectrum-accent-content-color-key-focus); + --system-rating-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-rating-icon-count: var(--system-rating-icon-count); +} diff --git a/tokens/dist/css/components/spectrum-two/search.css b/tokens/dist/css/components/spectrum-two/search.css new file mode 100644 index 00000000000..2ef6586ef92 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/search.css @@ -0,0 +1,72 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-search-border-color-default: var(--spectrum-gray-500); + --system-search-border-color-hover: var(--spectrum-gray-600); + --system-search-border-color-focus: var(--spectrum-gray-800); + --system-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-search-border-color-key-focus: var(--spectrum-gray-900); + --system-search-inline-size: var(--spectrum-field-width); + --system-search-min-inline-multiplier: var(--spectrum-search-field-minimum-width-multiplier); + --system-search-to-help-text: var(--spectrum-help-text-to-component); + --system-search-top-to-text: var(--spectrum-component-top-to-text-100); + --system-search-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-search-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-search-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-search-font-family: var(--spectrum-sans-font-family-stack); + --system-search-font-weight: var(--spectrum-regular-font-weight); + --system-search-font-style: var(--spectrum-default-font-style); + --system-search-line-height: var(--spectrum-line-height-100); + --system-search-color-default: var(--spectrum-neutral-content-color-default); + --system-search-color-hover: var(--spectrum-neutral-content-color-hover); + --system-search-color-focus: var(--spectrum-neutral-content-color-focus); + --system-search-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); + --system-search-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-search-border-width: var(--spectrum-border-width-100); + --system-search-background-color: var(--spectrum-gray-25); + --system-search-color-disabled: var(--spectrum-disabled-content-color); + --system-search-background-color-disabled: var(--spectrum-disabled-background-color); + --system-search-border-color-disabled: var(--spectrum-disabled-background-color); + --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-s-edge-to-visual: var(--spectrum-component-edge-to-visual-75); + --system-search-size-s-block-size: var(--spectrum-component-height-75); + --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); + --system-search-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); + --system-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); + --system-search-size-m-edge-to-visual: var(--spectrum-component-edge-to-visual-100); + --system-search-block-size: var(--spectrum-component-height-100); + --system-search-size-m-block-size: var(--spectrum-component-height-100); + --system-search-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-l-edge-to-visual: var(--spectrum-component-edge-to-visual-200); + --system-search-size-l-block-size: var(--spectrum-component-height-200); + --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); + --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-xl-edge-to-visual: var(--spectrum-component-edge-to-visual-300); + --system-search-size-xl-block-size: var(--spectrum-component-height-300); + --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); + --system-search-quiet-background-color: transparent; + --system-search-quiet-background-color-disabled: transparent; + --system-search-quiet-border-color-disabled: var(--spectrum-disabled-border-color); + --system-search-quiet-border-radius: 0; + --system-search-quiet-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet); +} diff --git a/tokens/dist/css/components/spectrum-two/sidenav.css b/tokens/dist/css/components/spectrum-two/sidenav.css new file mode 100644 index 00000000000..39a44886eee --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/sidenav.css @@ -0,0 +1,79 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-side-nav-focus-ring-size: var(--spectrum-focus-indicator-thickness); + --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-side-nav-min-height: var(--spectrum-component-height-100); + --system-side-nav-width: 100%; + --system-side-nav-min-width: var(--spectrum-side-navigation-minimum-width); + --system-side-nav-max-width: var(--spectrum-side-navigation-maximum-width); + --system-side-nav-border-radius: var(--spectrum-corner-radius-100); + --system-side-nav-icon-size: var(--spectrum-workflow-icon-size-100); + --system-side-nav-icon-spacing: var(--spectrum-text-to-visual-100); + --system-side-nav-inline-padding: var(--spectrum-component-edge-to-text-100); + --system-side-nav-gap: var(--spectrum-side-navigation-item-to-item); + --system-side-nav-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); + --system-side-nav-top-to-label: var(--spectrum-component-top-to-text-100); + --system-side-nav-bottom-to-label: var(--spectrum-side-navigation-bottom-to-text); + --system-side-nav-start-to-content-second-level: var(--spectrum-side-navigation-second-level-edge-to-text); + --system-side-nav-start-to-content-third-level: var(--spectrum-side-navigation-third-level-edge-to-text); + --system-side-nav-start-to-content-with-icon-second-level: var(--spectrum-side-navigation-with-icon-second-level-edge-to-text); + --system-side-nav-start-to-content-with-icon-third-level: var(--spectrum-side-navigation-with-icon-third-level-edge-to-text); + --system-side-nav-heading-top-margin: var(--spectrum-side-navigation-item-to-header); + --system-side-nav-heading-bottom-margin: var(--spectrum-side-navigation-header-to-item); + --system-side-nav-background-disabled: transparent; + --system-side-nav-background-default: transparent; + --system-side-nav-background-hover: var(--spectrum-gray-100); + --system-side-nav-item-background-down: var(--spectrum-gray-200); + --system-side-nav-background-key-focus: var(--spectrum-gray-100); + --system-side-nav-item-background-default-selected: var(--spectrum-gray-100); + --system-side-nav-background-hover-selected: var(--spectrum-gray-200); + --system-side-nav-item-background-down-selected: var(--spectrum-gray-200); + --system-side-nav-background-key-focus-selected: var(--spectrum-gray-100); + --system-side-nav-header-color: var(--spectrum-gray-600); + --system-side-nav-content-disabled-color: var(--spectrum-disabled-content-color); + --system-side-nav-content-color-default: var(--spectrum-neutral-content-color-default); + --system-side-nav-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-side-nav-content-color-down: var(--spectrum-neutral-content-color-down); + --system-side-nav-content-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-side-nav-content-color-default-selected: var(--spectrum-neutral-content-color-default); + --system-side-nav-content-color-hover-selected: var(--spectrum-neutral-content-color-hover); + --system-side-nav-content-color-down-selected: var(--spectrum-neutral-content-color-down); + --system-side-nav-content-color-key-focus-selected: var(--spectrum-neutral-content-color-key-focus); + --system-side-nav-text-font-family: var(--spectrum-sans-font-family-stack); + --system-side-nav-text-font-weight: var(--spectrum-regular-font-weight); + --system-side-nav-text-font-style: var(--spectrum-default-font-style); + --system-side-nav-text-font-size: var(--spectrum-font-size-100); + --system-side-nav-text-line-height: var(--spectrum-line-height-100); + --system-side-nav-top-level-font-family: var(--spectrum-sans-font-family-stack); + --system-side-nav-top-level-font-weight: var(--spectrum-bold-font-weight); + --system-side-nav-top-level-font-style: var(--spectrum-default-font-style); + --system-side-nav-top-level-font-size: var(--spectrum-font-size-100); + --system-side-nav-top-level-line-height: var(--spectrum-line-height-100); + --system-side-nav-header-font-family: var(--spectrum-sans-font-family-stack); + --system-side-nav-header-font-weight: var(--spectrum-medium-font-weight); + --system-side-nav-header-font-style: var(--spectrum-default-font-style); + --system-side-nav-header-font-size: var(--spectrum-font-size-75); + --system-side-nav-header-line-height: var(--spectrum-line-height-100); + --system-side-nav-lang-ja-text-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-zh-text-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-ko-text-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-ja-top-level-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-zh-top-level-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-ko-top-level-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-ja-header-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-zh-header-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-ko-header-line-height: var(--spectrum-cjk-line-height-100); +} diff --git a/tokens/dist/css/components/spectrum-two/slider.css b/tokens/dist/css/components/spectrum-two/slider.css new file mode 100644 index 00000000000..a09ae262537 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/slider.css @@ -0,0 +1,98 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-slider-track-color: var(--spectrum-gray-200); + --system-slider-track-fill-color: var(--spectrum-gray-700); + --system-slider-ramp-track-color: var(--spectrum-gray-400); + --system-slider-ramp-track-color-disabled: var(--spectrum-gray-100); + --system-slider-handle-background-color: transparent; + --system-slider-handle-background-color-disabled: transparent; + --system-slider-ramp-handle-background-color: var(--spectrum-gray-75); + --system-slider-ticks-handle-background-color: var(--spectrum-gray-75); + --system-slider-handle-border-color: var(--spectrum-gray-700); + --system-slider-handle-disabled-background-color: var(--spectrum-gray-75); + --system-slider-tick-mark-color: var(--spectrum-gray-200); + --system-slider-handle-border-color-hover: var(--spectrum-gray-800); + --system-slider-handle-border-color-down: var(--spectrum-gray-800); + --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800); + --system-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); + --system-slider-value-inline-size: 18px; + --system-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-slider-min-size: var(--spectrum-spacing-900); + --system-slider-track-corner-radius: var(--spectrum-corner-radius-75); + --system-slider-label-margin-start: var(--spectrum-spacing-300); + --system-slider-handle-border-width: var(--spectrum-border-width-200); + --system-slider-handle-margin-left: calc(var(--system-slider-handle-size) / -2); + --system-slider-controls-margin: calc(var(--system-slider-handle-size) / 2); + --system-slider-track-margin-offset: calc(var(--system-slider-controls-margin) * -1); + --system-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + var(--system-slider-handle-size) / 2); + --system-slider-input-top-size: calc(var(--system-slider-handle-size) / -2 / 4); + --system-slider-track-fill-thickness: var(--spectrum-slider-track-thickness); + --system-slider-tick-mark-width: var(--spectrum-border-width-200); + --system-slider-tick-mark-border-radius: 2px; + --system-slider-tick-handle-background-color: var(--spectrum-gray-75); + --system-slider-track-color-disabled: var(--spectrum-disabled-background-color); + --system-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color); + --system-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color); + --system-slider-label-text-color: var(--spectrum-neutral-content-color-default); + --system-slider-tick-label-color: var(--spectrum-neutral-content-color-default); + --system-slider-label-text-color-disabled: var(--spectrum-disabled-content-color); + --system-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color); + --system-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); + --system-slider-input-left: calc(var(--system-slider-handle-margin-left) / 4); + --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); + --system-slider-range-track-reset: 0; + --system-slider-size-s-font-size: var(--spectrum-font-size-75); + --system-slider-size-s-handle-size: var(--spectrum-slider-handle-size-small); + --system-slider-size-s-control-height: var(--spectrum-component-height-75); + --system-slider-size-s-handle-border-radius: var(--spectrum-corner-radius-500); + --system-slider-size-s-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small); + --system-slider-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-slider-size-s-control-to-field-label: var(--spectrum-slider-control-to-field-label-small); + --system-slider-size-s-value-side-padding-inline: var(--spectrum-spacing-100); + --system-slider-font-size: var(--spectrum-font-size-75); + --system-slider-size-m-font-size: var(--spectrum-font-size-75); + --system-slider-handle-size: var(--spectrum-slider-handle-size-medium); + --system-slider-size-m-handle-size: var(--spectrum-slider-handle-size-medium); + --system-slider-control-height: var(--spectrum-component-height-100); + --system-slider-size-m-control-height: var(--spectrum-component-height-100); + --system-slider-handle-border-radius: var(--spectrum-corner-radius-500); + --system-slider-size-m-handle-border-radius: var(--spectrum-corner-radius-500); + --system-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium); + --system-slider-size-m-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium); + --system-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-slider-size-m-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); + --system-slider-size-m-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); + --system-slider-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-m-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-l-font-size: var(--spectrum-font-size-100); + --system-slider-size-l-handle-size: var(--spectrum-slider-handle-size-large); + --system-slider-size-l-control-height: var(--spectrum-component-height-200); + --system-slider-size-l-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); + --system-slider-size-l-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large); + --system-slider-size-l-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-slider-size-l-control-to-field-label: var(--spectrum-slider-control-to-field-label-large); + --system-slider-size-l-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-l-value-inline-size: 18px; + --system-slider-size-xl-font-size: var(--spectrum-font-size-200); + --system-slider-size-xl-handle-size: var(--spectrum-slider-handle-size-extra-large); + --system-slider-size-xl-control-height: var(--spectrum-component-height-300); + --system-slider-size-xl-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); + --system-slider-size-xl-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large); + --system-slider-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-200); + --system-slider-size-xl-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large); + --system-slider-size-xl-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-xl-value-inline-size: 22px; +} diff --git a/tokens/dist/css/components/spectrum-two/splitview.css b/tokens/dist/css/components/spectrum-two/splitview.css new file mode 100644 index 00000000000..029ceeb7f06 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/splitview.css @@ -0,0 +1,31 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-split-view-vertical-width: 100%; + --system-split-view-vertical-gripper-width: 50%; + --system-split-view-vertical-gripper-outer-width: 100%; + --system-split-view-vertical-gripper-reset: 0; + --system-split-view-background-color: var(--spectrum-gray-75); + --system-split-view-content-color: var(--spectrum-body-color); + --system-split-view-handle-background-color: var(--spectrum-gray-200); + --system-split-view-handle-background-color-hover: var(--spectrum-gray-400); + --system-split-view-handle-background-color-down: var(--spectrum-gray-800); + --system-split-view-handle-background-color-focus: var(--spectrum-focus-indicator-color); + --system-split-view-handle-width: var(--spectrum-border-width-200); + --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); + --system-split-view-gripper-width: var(--spectrum-border-width-400); + --system-split-view-gripper-height: 16px; + --system-split-view-gripper-border-width-horizontal: 3px; + --system-split-view-gripper-border-width-vertical: var(--spectrum-border-width-400); +} diff --git a/tokens/dist/css/components/spectrum-two/statuslight.css b/tokens/dist/css/components/spectrum-two/statuslight.css new file mode 100644 index 00000000000..a2931b9c590 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/statuslight.css @@ -0,0 +1,77 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-status-light-corner-radius: 50%; + --system-status-light-font-weight: 400; + --system-status-light-border-width: var(--spectrum-border-width-100); + --system-status-light-height: var(--spectrum-component-height-100); + --system-status-light-dot-size: var(--spectrum-status-light-dot-size-medium); + --system-status-light-line-height: var(--spectrum-line-height-100); + --system-status-light-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-status-light-font-size: var(--spectrum-font-size-100); + --system-status-light-spacing-dot-to-label: var(--spectrum-text-to-visual-100); + --system-status-light-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium); + --system-status-light-spacing-top-to-label: var(--spectrum-component-top-to-text-100); + --system-status-light-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100); + --system-status-light-content-color-default: var(--spectrum-neutral-content-color-default); + --system-status-light-subdued-content-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-status-light-semantic-neutral-color: var(--spectrum-neutral-visual-color); + --system-status-light-semantic-accent-color: var(--spectrum-accent-visual-color); + --system-status-light-semantic-negative-color: var(--spectrum-negative-visual-color); + --system-status-light-semantic-info-color: var(--spectrum-informative-visual-color); + --system-status-light-semantic-notice-color: var(--spectrum-notice-visual-color); + --system-status-light-semantic-positive-color: var(--spectrum-positive-visual-color); + --system-status-light-nonsemantic-gray-color: var(--spectrum-gray-visual-color); + --system-status-light-nonsemantic-red-color: var(--spectrum-red-visual-color); + --system-status-light-nonsemantic-orange-color: var(--spectrum-orange-visual-color); + --system-status-light-nonsemantic-yellow-color: var(--spectrum-yellow-visual-color); + --system-status-light-nonsemantic-chartreuse-color: var(--spectrum-chartreuse-visual-color); + --system-status-light-nonsemantic-celery-color: var(--spectrum-celery-visual-color); + --system-status-light-nonsemantic-green-color: var(--spectrum-green-visual-color); + --system-status-light-nonsemantic-seafoam-color: var(--spectrum-seafoam-visual-color); + --system-status-light-nonsemantic-cyan-color: var(--spectrum-cyan-visual-color); + --system-status-light-nonsemantic-blue-color: var(--spectrum-blue-visual-color); + --system-status-light-nonsemantic-indigo-color: var(--spectrum-indigo-visual-color); + --system-status-light-nonsemantic-purple-color: var(--spectrum-purple-visual-color); + --system-status-light-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-visual-color); + --system-status-light-nonsemantic-magenta-color: var(--spectrum-magenta-visual-color); + --system-status-light-size-s-height: var(--spectrum-component-height-75); + --system-status-light-size-s-dot-size: var(--spectrum-status-light-dot-size-small); + --system-status-light-size-s-font-size: var(--spectrum-font-size-75); + --system-status-light-size-s-spacing-dot-to-label: var(--spectrum-text-to-visual-75); + --system-status-light-size-s-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-small); + --system-status-light-size-s-spacing-top-to-label: var(--spectrum-component-top-to-text-75); + --system-status-light-size-s-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75); + --system-status-light-size-m-height: var(--spectrum-component-height-100); + --system-status-light-size-m-dot-size: var(--spectrum-status-light-dot-size-medium); + --system-status-light-size-m-font-size: var(--spectrum-font-size-100); + --system-status-light-size-m-spacing-dot-to-label: var(--spectrum-text-to-visual-100); + --system-status-light-size-m-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium); + --system-status-light-size-m-spacing-top-to-label: var(--spectrum-component-top-to-text-100); + --system-status-light-size-m-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100); + --system-status-light-size-l-height: var(--spectrum-component-height-200); + --system-status-light-size-l-dot-size: var(--spectrum-status-light-dot-size-large); + --system-status-light-size-l-font-size: var(--spectrum-font-size-200); + --system-status-light-size-l-spacing-dot-to-label: var(--spectrum-text-to-visual-200); + --system-status-light-size-l-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-large); + --system-status-light-size-l-spacing-top-to-label: var(--spectrum-component-top-to-text-200); + --system-status-light-size-l-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-200); + --system-status-light-size-xl-height: var(--spectrum-component-height-300); + --system-status-light-size-xl-dot-size: var(--spectrum-status-light-dot-size-extra-large); + --system-status-light-size-xl-font-size: var(--spectrum-font-size-300); + --system-status-light-size-xl-spacing-dot-to-label: var(--spectrum-text-to-visual-300); + --system-status-light-size-xl-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-extra-large); + --system-status-light-size-xl-spacing-top-to-label: var(--spectrum-component-top-to-text-300); + --system-status-light-size-xl-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300); +} diff --git a/tokens/dist/css/components/spectrum-two/steplist.css b/tokens/dist/css/components/spectrum-two/steplist.css new file mode 100644 index 00000000000..c7ab4cd2f9f --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/steplist.css @@ -0,0 +1,32 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-steplist-step-width: 80px; + --system-steplist-marker-diameter: 8px; + --system-steplist-marker-hit-area: 20px; + --system-steplist-segment-height: 2px; + --system-steplist-top-padding: 22px; + --system-steplist-small-top-padding: 11px; + --system-steplist-side-padding: 60px; + --system-steplist-label-label-offset: 10px; + --system-steplist-label-text-size: 12px; + --system-steplist-current-label-text-color: var(--spectrum-gray-800); + --system-steplist-current-marker-color: var(--spectrum-gray-800); + --system-steplist-complete-label-text-color: var(--spectrum-gray-700); + --system-steplist-incomplete-label-color: var(--spectrum-gray-600); + --system-steplist-complete-marker-background-color: var(--spectrum-gray-600); + --system-steplist-incomplete-marker-border-color: var(--spectrum-gray-200); + --system-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-200); + --system-steplist-complete-segment-border-block-end-color: var(--spectrum-gray-600); +} diff --git a/tokens/dist/css/components/spectrum-two/stepper.css b/tokens/dist/css/components/spectrum-two/stepper.css new file mode 100644 index 00000000000..6f32e60a25a --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/stepper.css @@ -0,0 +1,58 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-stepper-border-width: var(--spectrum-border-width-100); + --system-stepper-border-color: var(--spectrum-gray-500); + --system-stepper-border-color-hover: var(--spectrum-gray-600); + --system-stepper-border-color-focus: var(--spectrum-gray-800); + --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); + --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-stepper-border-radius: var(--spectrum-corner-radius-100); + --system-stepper-min-width-multiplier: var(--spectrum-text-field-minimum-width-multiplier); + --system-stepper-animation-duration: var(--spectrum-animation-duration-100); + --system-stepper-buttons-border-style: none; + --system-stepper-buttons-border-width: 0; + --system-stepper-buttons-border-color: var(--spectrum-gray-500); + --system-stepper-buttons-background-color: var(--spectrum-gray-25); + --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); + --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); + --system-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-stepper-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-stepper-button-border-radius-reset: 0px; + --system-stepper-button-border-width: var(--spectrum-border-width-100); + --system-stepper-button-background-color-focus: var(--spectrum-gray-300); + --system-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-100); + --system-stepper-border-color-invalid: var(--spectrum-negative-border-color-default); + --system-stepper-border-color-hover-invalid: var(--spectrum-negative-border-color-hover); + --system-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus); + --system-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); + --system-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); + --system-stepper-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-stepper-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-stepper-button-border-color-quiet: transparent; + --system-stepper-button-border-color-disabled: var(--spectrum-gray-100); + --system-stepper-button-border-width-disabled: var(--spectrum-border-width-100); + --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); + --system-stepper-size-s-button-width: var(--spectrum-in-field-button-width-stacked-small); + --system-stepper-size-s-height: var(--spectrum-component-height-75); + --system-stepper-button-width: var(--spectrum-in-field-button-width-stacked-medium); + --system-stepper-size-m-button-width: var(--spectrum-in-field-button-width-stacked-medium); + --system-stepper-height: var(--spectrum-component-height-100); + --system-stepper-size-m-height: var(--spectrum-component-height-100); + --system-stepper-size-l-button-width: var(--spectrum-in-field-button-width-stacked-large); + --system-stepper-size-l-height: var(--spectrum-component-height-200); + --system-stepper-size-xl-button-width: var(--spectrum-in-field-button-width-stacked-extra-large); + --system-stepper-size-xl-height: var(--spectrum-component-height-300); +} diff --git a/tokens/dist/css/components/spectrum-two/swatch.css b/tokens/dist/css/components/spectrum-two/swatch.css new file mode 100644 index 00000000000..e7418ebf2c5 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/swatch.css @@ -0,0 +1,47 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-swatch-border-radius: var(--spectrum-corner-radius-100); + --system-swatch-focus-indicator-border-radius: var(--spectrum-corner-radius-200); + --system-swatch-border-thickness: var(--spectrum-border-width-100); + --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); + --system-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-swatch-border-color-opacity: 0.51; + --system-swatch-border-color-light-opacity: 0.2; + --system-swatch-border-color: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-opacity)); + --system-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-opacity)); + --system-swatch-border-color-light: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-light-opacity)); + --system-swatch-border-color-selected: var(--spectrum-gray-900); + --system-swatch-inner-border-color-selected: var(--spectrum-gray-25); + --system-swatch-disabled-icon-color: var(--spectrum-gray-25); + --system-swatch-dash-icon-color: var(--spectrum-gray-800); + --system-swatch-slash-icon-color: var(--spectrum-red-900); + --system-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); + --system-swatch-size-xs-disabled-icon-size: var(--spectrum-workflow-icon-size-50); + --system-swatch-size-xs-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small); + --system-swatch-size-s-size: var(--spectrum-swatch-size-small); + --system-swatch-size-s-disabled-icon-size: var(--spectrum-workflow-icon-size-75); + --system-swatch-size-s-slash-thickness: var(--spectrum-swatch-slash-thickness-small); + --system-swatch-size: var(--spectrum-swatch-size-medium); + --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); + --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); + --system-swatch-size-m-disabled-icon-size: var(--spectrum-workflow-icon-size-100); + --system-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); + --system-swatch-size-m-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); + --system-swatch-size-l-size: var(--spectrum-swatch-size-large); + --system-swatch-size-l-disabled-icon-size: var(--spectrum-workflow-icon-size-200); + --system-swatch-size-l-slash-thickness: var(--spectrum-swatch-slash-thickness-large); +} diff --git a/tokens/dist/css/components/spectrum-two/swatchgroup.css b/tokens/dist/css/components/spectrum-two/swatchgroup.css new file mode 100644 index 00000000000..36429f033b2 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/swatchgroup.css @@ -0,0 +1,18 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); + --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); + --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); +} diff --git a/tokens/dist/css/components/spectrum-two/switch.css b/tokens/dist/css/components/spectrum-two/switch.css new file mode 100644 index 00000000000..2d9f3dde88e --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/switch.css @@ -0,0 +1,76 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-switch-handle-border-color-default: var(--spectrum-gray-600); + --system-switch-handle-border-color-hover: var(--spectrum-gray-700); + --system-switch-handle-border-color-down: var(--spectrum-gray-800); + --system-switch-handle-border-color-focus: var(--spectrum-gray-700); + --system-switch-handle-border-color-selected-default: var(--spectrum-gray-700); + --system-switch-handle-border-color-selected-hover: var(--spectrum-gray-800); + --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-focus: var(--spectrum-gray-800); + --system-switch-label-color-default: var(--spectrum-neutral-content-color-default); + --system-switch-label-color-hover: var(--spectrum-neutral-content-color-hover); + --system-switch-label-color-down: var(--spectrum-neutral-content-color-down); + --system-switch-label-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-switch-label-color-disabled: var(--spectrum-disabled-content-color); + --system-switch-background-color: var(--spectrum-gray-200); + --system-switch-background-color-disabled: var(--spectrum-gray-200); + --system-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color); + --system-switch-background-color-selected-default: var(--spectrum-neutral-background-color-selected-default); + --system-switch-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-switch-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); + --system-switch-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); + --system-switch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-switch-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-switch-handle-background-color: var(--spectrum-gray-50); + --system-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color); + --system-switch-disabled-label-color-default: var(--spectrum-disabled-content-color); + --system-switch-emphasized-background-color-selected-default: var(--spectrum-accent-color-900); + --system-switch-emphasized-background-color-selected-hover: var(--spectrum-accent-color-1000); + --system-switch-emphasized-background-color-selected-down: var(--spectrum-accent-color-1100); + --system-switch-emphasized-background-color-selected-focus: var(--spectrum-accent-color-1000); + --system-switch-emphasized-handle-border-color-selected-default: var(--spectrum-accent-color-900); + --system-switch-emphasized-handle-border-color-selected-hover: var(--spectrum-accent-color-1000); + --system-switch-emphasized-handle-border-color-selected-down: var(--spectrum-accent-color-1100); + --system-switch-emphasized-handle-border-color-selected-focus: var(--spectrum-accent-color-1000); + --system-switch-size-s-min-height: var(--spectrum-component-height-75); + --system-switch-size-s-control-width: var(--spectrum-switch-control-width-small); + --system-switch-size-s-control-height: var(--spectrum-switch-control-height-small); + --system-switch-size-s-control-label-spacing: var(--spectrum-text-to-control-75); + --system-switch-size-s-spacing-top-to-control: var(--spectrum-switch-top-to-control-small); + --system-switch-size-s-spacing-top-to-label: var(--spectrum-component-top-to-text-75); + --system-switch-size-s-font-size: var(--spectrum-font-size-75); + --system-switch-size-m-min-height: var(--spectrum-component-height-100); + --system-switch-size-m-control-width: var(--spectrum-switch-control-width-medium); + --system-switch-size-m-control-height: var(--spectrum-switch-control-height-medium); + --system-switch-size-m-control-label-spacing: var(--spectrum-text-to-control-100); + --system-switch-size-m-spacing-top-to-control: var(--spectrum-switch-top-to-control-medium); + --system-switch-size-m-spacing-top-to-label: var(--spectrum-component-top-to-text-100); + --system-switch-size-m-font-size: var(--spectrum-font-size-100); + --system-switch-size-l-min-height: var(--spectrum-component-height-200); + --system-switch-size-l-control-width: var(--spectrum-switch-control-width-large); + --system-switch-size-l-control-height: var(--spectrum-switch-control-height-large); + --system-switch-size-l-control-label-spacing: var(--spectrum-text-to-control-200); + --system-switch-size-l-spacing-top-to-control: var(--spectrum-switch-top-to-control-large); + --system-switch-size-l-spacing-top-to-label: var(--spectrum-component-top-to-text-200); + --system-switch-size-l-font-size: var(--spectrum-font-size-200); + --system-switch-size-xl-min-height: var(--spectrum-component-height-300); + --system-switch-size-xl-control-width: var(--spectrum-switch-control-width-extra-large); + --system-switch-size-xl-control-height: var(--spectrum-switch-control-height-extra-large); + --system-switch-size-xl-control-label-spacing: var(--spectrum-text-to-control-300); + --system-switch-size-xl-spacing-top-to-control: var(--spectrum-switch-top-to-control-extra-large); + --system-switch-size-xl-spacing-top-to-label: var(--spectrum-component-top-to-text-300); + --system-switch-size-xl-font-size: var(--spectrum-font-size-300); +} diff --git a/tokens/dist/css/components/spectrum-two/table.css b/tokens/dist/css/components/spectrum-two/table.css new file mode 100644 index 00000000000..0c55fe8c40f --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/table.css @@ -0,0 +1,181 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-medium); + --system-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-medium); + --system-table-min-header-height: var(--spectrum-component-height-100); + --system-table-min-row-height: var(--spectrum-table-row-height-medium-regular); + --system-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-regular); + --system-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-regular); + --system-table-cell-inline-space: var(--spectrum-table-edge-to-content); + --system-table-border-radius: var(--spectrum-corner-radius-100); + --system-table-border-width: var(--spectrum-table-border-divider-width); + --system-table-outer-border-inline-width: var(--spectrum-table-border-divider-width); + --system-table-icon-to-text: var(--spectrum-text-to-visual-100); + --system-table-default-vertical-align: top; + --system-table-header-vertical-align: middle; + --system-table-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-row-font-family: var(--spectrum-sans-font-family-stack); + --system-table-row-font-weight: var(--spectrum-regular-font-weight); + --system-table-row-font-style: var(--spectrum-default-font-style); + --system-table-row-font-size: var(--spectrum-font-size-100); + --system-table-row-line-height: var(--spectrum-line-height-100); + --system-table-border-color: var(--spectrum-gray-200); + --system-table-divider-color: var(--spectrum-gray-200); + --system-table-header-background-color: var(--spectrum-transparent-white-25); + --system-table-header-text-color: var(--spectrum-body-color); + --system-table-row-background-color: var(--spectrum-gray-25); + --system-table-row-text-color: var(--spectrum-neutral-content-color-default); + --system-table-selected-row-background-color: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity)); + --system-table-selected-row-background-color-non-emphasized: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized)); + --system-table-row-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-hover-opacity)); + --system-table-row-active-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-down-opacity)); + --system-table-selected-row-background-color-focus: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity-hover)); + --system-table-selected-row-background-color-non-emphasized-focus: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover)); + --system-table-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-table-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-table-icon-color-active: var(--spectrum-neutral-subdued-content-color-down); + --system-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-focus); + --system-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-focus-hover); + --system-table-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-medium); + --system-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-regular); + --system-table-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-table-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-table-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity)); + --system-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); + --system-table-transition-duration: var(--spectrum-animation-duration-100); + --system-table-summary-row-font-weight: var(--spectrum-bold-font-weight); + --system-table-summary-row-background-color: var(--spectrum-gray-100); + --system-table-section-header-min-height: var(--spectrum-table-section-header-row-height-medium); + --system-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-100); + --system-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-100); + --system-table-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-section-header-background-color: var(--spectrum-gray-100); + --system-table-collapsible-tier-indent: var(--spectrum-spacing-300); + --system-table-collapsible-disclosure-inline-spacing: 0px; + --system-table-disclosure-icon-size: var(--spectrum-component-height-100); + --system-table-collapsible-icon-animation-duration: var(--spectrum-animation-duration-100); + --system-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --system-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-regular); + --system-table-thumbnail-size: var(--spectrum-thumbnail-size-300); + --system-table-cell-background-color: var(--system-table-row-background-color); + --system-table-selected-cell-background-color: var(--system-table-selected-row-background-color-non-emphasized); + --system-table-selected-cell-background-color-focus: var(--system-table-selected-row-background-color-non-emphasized-focus); + --system-table-size-s-min-header-height: var(--spectrum-component-height-100); + --system-table-size-s-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-small); + --system-table-size-s-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-small); + --system-table-size-s-min-row-height: var(--spectrum-table-row-height-small-regular); + --system-table-size-s-row-top-to-text: var(--spectrum-table-row-top-to-text-small-regular); + --system-table-size-s-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-regular); + --system-table-size-s-icon-to-text: var(--spectrum-text-to-visual-100); + --system-table-size-s-row-font-size: var(--spectrum-font-size-75); + --system-table-size-s-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-small); + --system-table-size-s-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-regular); + --system-table-size-s-section-header-min-height: var(--spectrum-table-section-header-row-height-small); + --system-table-size-s-section-header-block-start-spacing: var(--spectrum-component-top-to-text-75); + --system-table-size-s-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-75); + --system-table-size-s-disclosure-icon-size: var(--spectrum-component-height-75); + --system-table-size-s-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-regular); + --system-table-size-s-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --system-table-size-s-thumbnail-size: var(--spectrum-thumbnail-size-200); + --system-table-size-l-min-header-height: var(--spectrum-component-height-200); + --system-table-size-l-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-large); + --system-table-size-l-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-large); + --system-table-size-l-min-row-height: var(--spectrum-table-row-height-large-regular); + --system-table-size-l-row-top-to-text: var(--spectrum-table-row-top-to-text-large-regular); + --system-table-size-l-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-regular); + --system-table-size-l-icon-to-text: var(--spectrum-text-to-visual-200); + --system-table-size-l-row-font-size: var(--spectrum-font-size-200); + --system-table-size-l-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-large); + --system-table-size-l-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-regular); + --system-table-size-l-section-header-min-height: var(--spectrum-table-section-header-row-height-large); + --system-table-size-l-section-header-block-start-spacing: var(--spectrum-component-top-to-text-200); + --system-table-size-l-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-200); + --system-table-size-l-disclosure-icon-size: var(--spectrum-component-height-200); + --system-table-size-l-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-regular); + --system-table-size-l-thumbnail-to-text: var(--spectrum-text-to-visual-200); + --system-table-size-l-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-size-xl-min-header-height: var(--spectrum-component-height-300); + --system-table-size-xl-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-extra-large); + --system-table-size-xl-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-extra-large); + --system-table-size-xl-min-row-height: var(--spectrum-table-row-height-extra-large-regular); + --system-table-size-xl-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-regular); + --system-table-size-xl-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-regular); + --system-table-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); + --system-table-size-xl-row-font-size: var(--spectrum-font-size-300); + --system-table-size-xl-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-extra-large); + --system-table-size-xl-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-regular); + --system-table-size-xl-section-header-min-height: var(--spectrum-table-section-header-row-height-extra-large); + --system-table-size-xl-section-header-block-start-spacing: var(--spectrum-component-top-to-text-300); + --system-table-size-xl-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-300); + --system-table-size-xl-disclosure-icon-size: var(--spectrum-component-height-300); + --system-table-size-xl-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-regular); + --system-table-size-xl-thumbnail-to-text: var(--spectrum-text-to-visual-300); + --system-table-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-700); + --system-table-compact-min-row-height: var(--spectrum-table-row-height-medium-compact); + --system-table-compact-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-compact); + --system-table-compact-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-compact); + --system-table-compact-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-compact); + --system-table-compact-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-compact); + --system-table-compact-thumbnail-size: var(--spectrum-thumbnail-size-200); + --system-table-compact-size-s-min-row-height: var(--spectrum-table-row-height-small-compact); + --system-table-compact-size-s-row-top-to-text: var(--spectrum-table-row-top-to-text-small-compact); + --system-table-compact-size-s-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-compact); + --system-table-compact-size-s-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-compact); + --system-table-compact-size-s-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-compact); + --system-table-compact-size-s-thumbnail-size: var(--spectrum-thumbnail-size-50); + --system-table-compact-size-l-min-row-height: var(--spectrum-table-row-height-large-compact); + --system-table-compact-size-l-row-top-to-text: var(--spectrum-table-row-top-to-text-large-compact); + --system-table-compact-size-l-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-compact); + --system-table-compact-size-l-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-compact); + --system-table-compact-size-l-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-compact); + --system-table-compact-size-l-thumbnail-size: var(--spectrum-thumbnail-size-300); + --system-table-compact-size-xl-min-row-height: var(--spectrum-table-row-height-extra-large-compact); + --system-table-compact-size-xl-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-compact); + --system-table-compact-size-xl-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-compact); + --system-table-compact-size-xl-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-compact); + --system-table-compact-size-xl-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact); + --system-table-compact-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-spacious-min-row-height: var(--spectrum-table-row-height-medium-spacious); + --system-table-spacious-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-spacious); + --system-table-spacious-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-spacious); + --system-table-spacious-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-spacious); + --system-table-spacious-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious); + --system-table-spacious-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-spacious-size-s-min-row-height: var(--spectrum-table-row-height-small-spacious); + --system-table-spacious-size-s-row-top-to-text: var(--spectrum-table-row-top-to-text-small-spacious); + --system-table-spacious-size-s-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-spacious); + --system-table-spacious-size-s-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-spacious); + --system-table-spacious-size-s-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-spacious); + --system-table-spacious-size-s-thumbnail-size: var(--spectrum-thumbnail-size-300); + --system-table-spacious-size-l-min-row-height: var(--spectrum-table-row-height-large-spacious); + --system-table-spacious-size-l-row-top-to-text: var(--spectrum-table-row-top-to-text-large-spacious); + --system-table-spacious-size-l-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-spacious); + --system-table-spacious-size-l-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-spacious); + --system-table-spacious-size-l-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-spacious); + --system-table-spacious-size-l-thumbnail-size: var(--spectrum-thumbnail-size-700); + --system-table-spacious-size-xl-min-row-height: var(--spectrum-table-row-height-extra-large-spacious); + --system-table-spacious-size-xl-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-spacious); + --system-table-spacious-size-xl-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-spacious); + --system-table-spacious-size-xl-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-spacious); + --system-table-spacious-size-xl-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious); + --system-table-spacious-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-800); + --system-table-emphasized-selected-cell-background-color: var(--system-table-selected-row-background-color); + --system-table-emphasized-selected-cell-background-color-focus: var(--system-table-selected-row-background-color-focus); + --system-table-quiet-border-radius: 0px; + --system-table-quiet-outer-border-inline-width: 0px; + --system-table-quiet-header-background-color: var(--spectrum-transparent-white-25); + --system-table-quiet-row-background-color: var(--spectrum-transparent-white-25); +} diff --git a/tokens/dist/css/components/spectrum-two/tabs.css b/tokens/dist/css/components/spectrum-two/tabs.css new file mode 100644 index 00000000000..2d64e856ad1 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/tabs.css @@ -0,0 +1,82 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-tabs-font-weight: var(--spectrum-default-font-weight); + --system-tabs-item-height: var(--spectrum-tab-item-height-medium); + --system-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium); + --system-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-medium); + --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); + --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); + --system-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-medium); + --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); + --system-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-medium); + --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); + --system-tabs-color-selected: var(--spectrum-neutral-subdued-content-color-down); + --system-tabs-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-tabs-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-tabs-color-disabled: var(--spectrum-gray-500); + --system-tabs-font-family: var(--spectrum-sans-font-family-stack); + --system-tabs-font-style: var(--spectrum-default-font-style); + --system-tabs-font-size: var(--spectrum-font-size-100); + --system-tabs-line-height: var(--spectrum-line-height-100); + --system-tabs-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --system-tabs-focus-indicator-border-radius: var(--spectrum-corner-radius-100); + --system-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-medium); + --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-tabs-selection-indicator-color: var(--spectrum-neutral-subdued-content-color-down); + --system-tabs-list-background-direction: top; + --system-tabs-divider-background-color: var(--spectrum-gray-200); + --system-tabs-divider-size: var(--spectrum-border-width-200); + --system-tabs-divider-border-radius: 1px; + --system-tabs-animation-duration: var(--spectrum-animation-duration-100); + --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); + --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); + --system-tabs-size-s-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-small); + --system-tabs-size-s-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-small); + --system-tabs-size-s-start-to-edge: var(--spectrum-tab-item-start-to-edge-small); + --system-tabs-size-s-top-to-text: var(--spectrum-tab-item-top-to-text-small); + --system-tabs-size-s-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-small); + --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); + --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); + --system-tabs-size-s-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-small); + --system-tabs-size-s-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-small); + --system-tabs-size-s-font-size: var(--spectrum-font-size-75); + --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); + --system-tabs-size-l-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-large); + --system-tabs-size-l-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-large); + --system-tabs-size-l-start-to-edge: var(--spectrum-tab-item-start-to-edge-large); + --system-tabs-size-l-top-to-text: var(--spectrum-tab-item-top-to-text-large); + --system-tabs-size-l-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-large); + --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); + --system-tabs-size-l-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-large); + --system-tabs-size-l-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-large); + --system-tabs-size-l-font-size: var(--spectrum-font-size-200); + --system-tabs-size-xl-item-height: var(--spectrum-tab-item-height-extra-large); + --system-tabs-size-xl-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-extra-large); + --system-tabs-size-xl-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-extra-large); + --system-tabs-size-xl-start-to-edge: var(--spectrum-tab-item-start-to-edge-extra-large); + --system-tabs-size-xl-top-to-text: var(--spectrum-tab-item-top-to-text-extra-large); + --system-tabs-size-xl-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-extra-large); + --system-tabs-size-xl-icon-size: var(--spectrum-workflow-icon-size-200); + --system-tabs-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); + --system-tabs-size-xl-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-extra-large); + --system-tabs-size-xl-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-extra-large); + --system-tabs-size-xl-font-size: var(--spectrum-font-size-300); + --system-tabs-emphasized-color-selected: var(--spectrum-accent-content-color-default); + --system-tabs-emphasized-color-hover: var(--spectrum-accent-content-color-hover); + --system-tabs-emphasized-color-key-focus: var(--spectrum-accent-content-color-key-focus); + --system-tabs-emphasized-selection-indicator-color: var(--spectrum-accent-content-color-default); +} diff --git a/tokens/dist/css/components/spectrum-two/tag.css b/tokens/dist/css/components/spectrum-two/tag.css new file mode 100644 index 00000000000..e203642e8cf --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/tag.css @@ -0,0 +1,161 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-tag-border-color: var(--spectrum-gray-700); + --system-tag-border-color-hover: var(--spectrum-gray-800); + --system-tag-border-color-active: var(--spectrum-gray-900); + --system-tag-border-color-focus: var(--spectrum-gray-800); + --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-background-color: var(--spectrum-gray-50); + --system-tag-background-color-hover: var(--spectrum-gray-50); + --system-tag-background-color-active: var(--spectrum-gray-100); + --system-tag-background-color-focus: var(--spectrum-gray-50); + --system-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); + --system-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down); + --system-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default); + --system-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover); + --system-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down); + --system-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus); + --system-tag-border-color-disabled: transparent; + --system-tag-background-color-disabled: var(--spectrum-disabled-background-color); + --system-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75); + --system-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75); + --system-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75); + --system-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100); + --system-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100); + --system-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100); + --system-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200); + --system-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200); + --system-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200); + --system-tag-avatar-opacity-disabled: 0.3; + --system-tag-animation-duration: var(--spectrum-animation-duration-100); + --system-tag-border-width: var(--spectrum-border-width-100); + --system-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); + --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-tag-label-line-height: var(--spectrum-line-height-100); + --system-tag-label-font-weight: var(--spectrum-regular-font-weight); + --system-tag-content-color-selected: var(--spectrum-gray-25); + --system-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default); + --system-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down); + --system-tag-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); + --system-tag-border-color-invalid: var(--spectrum-negative-color-900); + --system-tag-border-color-invalid-hover: var(--spectrum-negative-color-1000); + --system-tag-border-color-invalid-active: var(--spectrum-negative-color-1100); + --system-tag-border-color-invalid-focus: var(--spectrum-negative-color-1000); + --system-tag-content-color-invalid: var(--spectrum-negative-content-color-default); + --system-tag-content-color-invalid-hover: var(--spectrum-negative-content-color-hover); + --system-tag-content-color-invalid-active: var(--spectrum-negative-content-color-down); + --system-tag-content-color-invalid-focus: var(--spectrum-negative-content-color-key-focus); + --system-tag-border-color-invalid-selected: var(--spectrum-negative-background-color-default); + --system-tag-border-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); + --system-tag-border-color-invalid-selected-focus: var(--spectrum-negative-background-color-down); + --system-tag-border-color-invalid-selected-active: var(--spectrum-negative-background-color-key-focus); + --system-tag-background-color-invalid-selected: var(--spectrum-negative-background-color-default); + --system-tag-background-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); + --system-tag-background-color-invalid-selected-active: var(--spectrum-negative-background-color-down); + --system-tag-background-color-invalid-selected-focus: var(--spectrum-negative-background-color-key-focus); + --system-tag-content-color-invalid-selected: var(--spectrum-white); + --system-tag-border-color-emphasized: var(--spectrum-accent-background-color-default); + --system-tag-border-color-emphasized-hover: var(--spectrum-accent-background-color-hover); + --system-tag-border-color-emphasized-active: var(--spectrum-accent-background-color-down); + --system-tag-border-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); + --system-tag-background-color-emphasized: var(--spectrum-accent-background-color-default); + --system-tag-background-color-emphasized-hover: var(--spectrum-accent-background-color-hover); + --system-tag-background-color-emphasized-active: var(--spectrum-accent-background-color-down); + --system-tag-background-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); + --system-tag-content-color-emphasized: var(--spectrum-white); + --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); + --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + --system-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); + --system-tag-height: var(--spectrum-component-height-100); + --system-tag-font-size: var(--spectrum-font-size-100); + --system-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); + --system-tag-size-s-height: var(--spectrum-component-height-75); + --system-tag-size-s-font-size: var(--spectrum-font-size-75); + --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tag-size-s-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-75); + --system-tag-size-s-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-small); + --system-tag-size-s-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); + --system-tag-size-s-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75); + --system-tag-size-s-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tag-size-s-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small); + --system-tag-size-s-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small); + --system-tag-size-s-avatar-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tag-size-s-label-spacing-block: var(--spectrum-component-top-to-text-75); + --system-tag-size-s-corner-radius: var(--system-tag-size-small-corner-radius); + --system-tag-size-s-spacing-inline-start: var(--system-tag-size-small-spacing-inline-start); + --system-tag-size-s-label-spacing-inline-end: var(--system-tag-size-small-label-spacing-inline-end); + --system-tag-size-s-clear-button-spacing-inline-end: var(--system-tag-size-small-clear-button-spacing-inline-end); + --system-scope-tag-height: var(--spectrum-component-height-100); + --system-tag-size-m-height: var(--spectrum-component-height-100); + --system-scope-tag-font-size: var(--spectrum-font-size-100); + --system-tag-size-m-font-size: var(--spectrum-font-size-100); + --system-scope-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-scope-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); + --system-tag-size-m-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); + --system-scope-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); + --system-tag-size-m-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); + --system-scope-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-size-m-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); + --system-scope-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-size-m-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); + --system-scope-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-size-m-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-scope-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-size-m-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); + --system-scope-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-size-m-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); + --system-scope-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-size-m-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-scope-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + --system-tag-size-m-label-spacing-block: var(--spectrum-component-top-to-text-100); + --system-scope-tag-corner-radius: var(--system-tag-size-medium-corner-radius); + --system-tag-size-m-corner-radius: var(--system-tag-size-medium-corner-radius); + --system-scope-tag-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); + --system-tag-size-m-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); + --system-scope-tag-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); + --system-tag-size-m-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); + --system-scope-tag-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); + --system-tag-size-m-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); + --system-tag-size-l-height: var(--spectrum-component-height-200); + --system-tag-size-l-font-size: var(--spectrum-font-size-200); + --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-tag-size-l-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-200); + --system-tag-size-l-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-large); + --system-tag-size-l-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-200); + --system-tag-size-l-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-200); + --system-tag-size-l-icon-spacing-inline-end: var(--spectrum-text-to-visual-200); + --system-tag-size-l-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-large); + --system-tag-size-l-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-large); + --system-tag-size-l-avatar-spacing-inline-end: var(--spectrum-text-to-visual-200); + --system-tag-size-l-label-spacing-block: var(--spectrum-component-top-to-text-200); + --system-tag-size-l-corner-radius: var(--system-tag-size-large-corner-radius); + --system-tag-size-l-spacing-inline-start: var(--system-tag-size-large-spacing-inline-start); + --system-tag-size-l-label-spacing-inline-end: var(--system-tag-size-large-label-spacing-inline-end); + --system-tag-size-l-clear-button-spacing-inline-end: var(--system-tag-size-large-clear-button-spacing-inline-end); +} diff --git a/tokens/dist/css/components/spectrum-two/taggroup.css b/tokens/dist/css/components/spectrum-two/taggroup.css new file mode 100644 index 00000000000..8ad0c698bc1 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/taggroup.css @@ -0,0 +1,17 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-tag-group-item-margin-block: var(--spectrum-spacing-75); + --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); +} diff --git a/tokens/dist/css/components/spectrum-two/textfield.css b/tokens/dist/css/components/spectrum-two/textfield.css new file mode 100644 index 00000000000..bb6f01f6c51 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/textfield.css @@ -0,0 +1,153 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-textfield-border-color: var(--spectrum-gray-500); + --system-textfield-border-color-hover: var(--spectrum-gray-600); + --system-textfield-border-color-focus: var(--spectrum-gray-800); + --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); + --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-textfield-border-width: var(--spectrum-border-width-100); + --system-textfield-texfield-animation-duration: var(--spectrum-animation-duration-100); + --system-textfield-width: 240px; + --system-textfield-min-width: var(--spectrum-text-field-minimum-width-multiplier); + --system-textfield-corner-radius: var(--spectrum-corner-radius-100); + --system-textfield-spacing-inline-quiet: var(--spectrum-field-edge-to-text-quiet); + --system-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100); + --system-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-100); + --system-textfield-spacing-block-quiet: var(--spectrum-field-edge-to-border-quiet); + --system-textfield-label-spacing-block: var(--spectrum-field-label-to-component); + --system-textfield-helptext-spacing-block: var(--spectrum-help-text-to-component); + --system-textfield-icon-spacing-inline-end-quiet-invalid: var(--spectrum-field-edge-to-alert-icon-quiet); + --system-textfield-icon-spacing-inline-end-quiet-valid: var(--spectrum-field-edge-to-validation-icon-quiet); + --system-textfield-font-family: var(--spectrum-sans-font-family-stack); + --system-textfield-font-weight: var(--spectrum-regular-font-weight); + --system-textfield-character-count-font-family: var(--spectrum-sans-font-family-stack); + --system-textfield-character-count-font-weight: var(--spectrum-regular-font-weight); + --system-textfield-character-count-spacing-inline: var(--spectrum-spacing-200); + --system-textfield-character-count-spacing-inline-side: var(--spectrum-side-label-character-count-to-field); + --system-textfield-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-textfield-background-color: var(--spectrum-gray-25); + --system-textfield-text-color-default: var(--spectrum-neutral-content-color-default); + --system-textfield-text-color-hover: var(--spectrum-neutral-content-color-hover); + --system-textfield-text-color-focus: var(--spectrum-neutral-content-color-focus); + --system-textfield-text-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); + --system-textfield-text-color-keyboard-focus: var(--spectrum-neutral-content-color-key-focus); + --system-textfield-text-color-readonly: var(--spectrum-neutral-content-color-default); + --system-textfield-background-color-disabled: var(--spectrum-disabled-background-color); + --system-textfield-border-color-disabled: var(--spectrum-disabled-border-color); + --system-textfield-text-color-disabled: var(--spectrum-disabled-content-color); + --system-textfield-border-color-invalid-default: var(--spectrum-negative-border-color-default); + --system-textfield-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); + --system-textfield-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); + --system-textfield-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); + --system-textfield-border-color-invalid-keyboard-focus: var(--spectrum-negative-border-color-key-focus); + --system-textfield-icon-color-invalid: var(--spectrum-negative-visual-color); + --system-textfield-text-color-invalid: var(--spectrum-neutral-content-color-default); + --system-textfield-text-color-valid: var(--spectrum-neutral-content-color-default); + --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); + --system-textfield-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-textfield-text-area-min-inline-size: var(--spectrum-text-area-minimum-width); + --system-textfield-text-area-min-block-size: var(--spectrum-text-area-minimum-height); + --system-textfield-size-s-height: var(--spectrum-component-height-75); + --system-textfield-size-s-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-small); + --system-textfield-size-s-label-spacing-inline-side-label: var(--spectrum-spacing-100); + --system-textfield-size-s-placeholder-font-size: var(--spectrum-font-size-75); + --system-textfield-size-s-spacing-inline: var(--spectrum-component-edge-to-text-75); + --system-textfield-size-s-icon-size-invalid: var(--spectrum-workflow-icon-size-75); + --system-textfield-size-s-icon-size-valid: var(--spectrum-checkmark-icon-size-75); + --system-textfield-size-s-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-small); + --system-textfield-size-s-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-small); + --system-textfield-size-s-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small); + --system-textfield-size-s-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-small); + --system-textfield-size-s-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-small); + --system-textfield-size-s-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-small); + --system-textfield-size-s-character-count-font-size: var(--spectrum-font-size-75); + --system-textfield-size-s-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); + --system-textfield-size-s-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-small); + --system-textfield-size-s-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-small); + --system-textfield-size-s-text-area-min-block-size-quiet: var(--spectrum-component-height-75); + --system-textfield-height: var(--spectrum-component-height-100); + --system-textfield-size-m-height: var(--spectrum-component-height-100); + --system-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium); + --system-textfield-size-m-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium); + --system-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --system-textfield-size-m-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); + --system-textfield-size-m-placeholder-font-size: var(--spectrum-font-size-100); + --system-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100); + --system-textfield-size-m-spacing-inline: var(--spectrum-component-edge-to-text-100); + --system-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100); + --system-textfield-size-m-icon-size-invalid: var(--spectrum-workflow-icon-size-100); + --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); + --system-textfield-size-m-icon-size-valid: var(--spectrum-checkmark-icon-size-100); + --system-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); + --system-textfield-size-m-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); + --system-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); + --system-textfield-size-m-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); + --system-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); + --system-textfield-size-m-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); + --system-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); + --system-textfield-size-m-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); + --system-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); + --system-textfield-size-m-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); + --system-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); + --system-textfield-size-m-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); + --system-textfield-character-count-font-size: var(--spectrum-font-size-75); + --system-textfield-size-m-character-count-font-size: var(--spectrum-font-size-75); + --system-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); + --system-textfield-size-m-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); + --system-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium); + --system-textfield-size-m-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium); + --system-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium); + --system-textfield-size-m-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium); + --system-textfield-text-area-min-block-size-quiet: var(--spectrum-component-height-100); + --system-textfield-size-m-text-area-min-block-size-quiet: var(--spectrum-component-height-100); + --system-textfield-size-l-height: var(--spectrum-component-height-200); + --system-textfield-size-l-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-large); + --system-textfield-size-l-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --system-textfield-size-l-placeholder-font-size: var(--spectrum-font-size-200); + --system-textfield-size-l-spacing-inline: var(--spectrum-component-edge-to-text-200); + --system-textfield-size-l-icon-size-invalid: var(--spectrum-workflow-icon-size-200); + --system-textfield-size-l-icon-size-valid: var(--spectrum-checkmark-icon-size-200); + --system-textfield-size-l-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-large); + --system-textfield-size-l-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-large); + --system-textfield-size-l-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large); + --system-textfield-size-l-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-large); + --system-textfield-size-l-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-large); + --system-textfield-size-l-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-large); + --system-textfield-size-l-character-count-font-size: var(--spectrum-font-size-100); + --system-textfield-size-l-character-count-spacing-block: var(--spectrum-component-bottom-to-text-100); + --system-textfield-size-l-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-large); + --system-textfield-size-l-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-large); + --system-textfield-size-l-text-area-min-block-size-quiet: var(--spectrum-component-height-200); + --system-textfield-size-xl-height: var(--spectrum-component-height-300); + --system-textfield-size-xl-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); + --system-textfield-size-xl-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --system-textfield-size-xl-placeholder-font-size: var(--spectrum-font-size-300); + --system-textfield-size-xl-spacing-inline: var(--spectrum-component-edge-to-text-200); + --system-textfield-size-xl-icon-size-invalid: var(--spectrum-workflow-icon-size-300); + --system-textfield-size-xl-icon-size-valid: var(--spectrum-checkmark-icon-size-300); + --system-textfield-size-xl-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-extra-large); + --system-textfield-size-xl-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-extra-large); + --system-textfield-size-xl-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large); + --system-textfield-size-xl-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-extra-large); + --system-textfield-size-xl-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-extra-large); + --system-textfield-size-xl-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-extra-large); + --system-textfield-size-xl-character-count-font-size: var(--spectrum-font-size-200); + --system-textfield-size-xl-character-count-spacing-block: var(--spectrum-component-bottom-to-text-200); + --system-textfield-size-xl-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-extra-large); + --system-textfield-size-xl-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-extra-large); + --system-textfield-size-xl-text-area-min-block-size-quiet: var(--spectrum-component-height-300); +} diff --git a/tokens/dist/css/components/spectrum-two/thumbnail.css b/tokens/dist/css/components/spectrum-two/thumbnail.css new file mode 100644 index 00000000000..78ef8fa1a14 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/thumbnail.css @@ -0,0 +1,41 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); + --system-thumbnail-border-width: var(--spectrum-border-width-100); + --system-thumbnail-border-color-rgba: rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-color-opacity)); + --system-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400); + --system-thumbnail-layer-border-color-inner: var(--spectrum-white); + --system-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100); + --system-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); + --system-thumbnail-border-width-selected: var(--spectrum-border-width-200); + --system-thumbnail-border-color-selected: var(--spectrum-accent-color-800); + --system-thumbnail-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-thumbnail-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled); + --system-thumbnail-size-50-size: var(--spectrum-thumbnail-size-50); + --system-thumbnail-size-75-size: var(--spectrum-thumbnail-size-75); + --system-thumbnail-size-100-size: var(--spectrum-thumbnail-size-100); + --system-thumbnail-size-200-size: var(--spectrum-thumbnail-size-200); + --system-thumbnail-size-300-size: var(--spectrum-thumbnail-size-300); + --system-thumbnail-size-400-size: var(--spectrum-thumbnail-size-400); + --system-thumbnail-size-500-size: var(--spectrum-thumbnail-size-500); + --system-thumbnail-size-600-size: var(--spectrum-thumbnail-size-600); + --system-thumbnail-size-700-size: var(--spectrum-thumbnail-size-700); + --system-thumbnail-size-800-size: var(--spectrum-thumbnail-size-800); + --system-thumbnail-size-900-size: var(--spectrum-thumbnail-size-900); + --system-thumbnail-size-1000-size: var(--spectrum-thumbnail-size-1000); +} diff --git a/tokens/dist/css/components/spectrum-two/toast.css b/tokens/dist/css/components/spectrum-two/toast.css new file mode 100644 index 00000000000..fd1f04a1d88 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/toast.css @@ -0,0 +1,41 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --system-toast-font-weight: var(--spectrum-regular-font-weight); + --system-toast-font-size: var(--spectrum-font-size-100); + --system-toast-corner-radius: var(--spectrum-corner-radius-100); + --system-toast-block-size: var(--spectrum-toast-height); + --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); + --system-toast-border-width: var(--spectrum-border-width-100); + --system-toast-line-height: var(--spectrum-line-height-100); + --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); + --system-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300); + --system-toast-spacing-text-and-action-button-to-divider: var(--spectrum-spacing-300); + --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon); + --system-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-300); + --system-toast-spacing-close-button: var(--spectrum-spacing-100); + --system-toast-spacing-block-start: var(--spectrum-spacing-100); + --system-toast-spacing-block-end: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); + --system-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text); + --system-toast-negative-background-color-default: var(--spectrum-negative-background-color-default); + --system-toast-positive-background-color-default: var(--spectrum-positive-background-color-default); + --system-toast-informative-background-color-default: var(--spectrum-informative-background-color-default); + --system-toast-text-and-icon-color: var(--spectrum-white); + --system-toast-divider-color: var(--spectrum-transparent-white-400); +} diff --git a/tokens/dist/css/components/spectrum-two/tooltip.css b/tokens/dist/css/components/spectrum-two/tooltip.css new file mode 100644 index 00000000000..b4bfeb21e7f --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/tooltip.css @@ -0,0 +1,44 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default); + --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); + --system-tooltip-margin: 0px; + --system-tooltip-height: var(--spectrum-component-height-75); + --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); + --system-tooltip-border-radius: var(--spectrum-corner-radius-100); + --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); + --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); + --system-tooltip-font-size: var(--spectrum-font-size-75); + --system-tooltip-line-height: var(--spectrum-line-height-100); + --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-tooltip-font-weight: var(--spectrum-regular-font-weight); + --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); + --system-tooltip-spacing-block-start: var(--spectrum-component-top-to-text-75); + --system-tooltip-spacing-block-end: var(--spectrum-component-bottom-to-text-75); + --system-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); + --system-tooltip-background-color-informative: var(--spectrum-informative-background-color-default); + --system-tooltip-background-color-positive: var(--spectrum-positive-background-color-default); + --system-tooltip-background-color-negative: var(--spectrum-negative-background-color-default); + --system-tooltip-content-color: var(--spectrum-white); + --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); + --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); + --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); + --system-tooltip-tip-height-percentage: 50%; + --system-tooltip-tip-antialiasing-inset: 0.5px; + --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); + --system-tooltip-background-color-default: var(--system-tooltip-backgound-color-default-neutral); +} diff --git a/tokens/dist/css/components/spectrum-two/tray.css b/tokens/dist/css/components/spectrum-two/tray.css new file mode 100644 index 00000000000..2794021cc4f --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/tray.css @@ -0,0 +1,23 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-tray-exit-animation-delay: 0ms; + --system-tray-entry-animation-delay: 160ms; + --system-tray-max-inline-size: 375px; + --system-tray-spacing-edge-to-safe-zone: 64px; + --system-tray-entry-animation-duration: var(--spectrum-animation-duration-500); + --system-tray-exit-animation-duration: var(--spectrum-animation-duration-100); + --system-tray-corner-radius: var(--spectrum-corner-radius-100); + --system-tray-background-color: var(--spectrum-background-layer-2-color); +} diff --git a/tokens/dist/css/components/spectrum-two/treeview.css b/tokens/dist/css/components/spectrum-two/treeview.css new file mode 100644 index 00000000000..a51776a8ce1 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/treeview.css @@ -0,0 +1,77 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-tree-view-line-height: var(--spectrum-line-height-200); + --system-tree-view-margin-block: 1em; + --system-tree-view-font-size: var(--spectrum-font-size-100); + --system-tree-view-item-min-block-size: var(--spectrum-component-height-100); + --system-tree-view-item-indentation: var(--spectrum-treeview-item-indentation-medium); + --system-tree-view-item-padding-inline-start: var(--spectrum-component-height-100); + --system-tree-view-item-padding-inline-end: var(--spectrum-component-edge-to-text-100); + --system-tree-view-section-spacing: var(--spectrum-treeview-item-indentation-medium); + --system-tree-view-heading-font-weight: var(--spectrum-bold-font-weight); + --system-tree-view-heading-bottom-to-text: var(--spectrum-component-edge-to-text-100); + --system-tree-view-heading-color: var(--spectrum-heading-color); + --system-tree-view-item-border-size: var(--spectrum-border-width-200); + --system-tree-view-item-border-size-selected: 1px; + --system-tree-view-item-border-radius: 0px; + --system-tree-view-item-border-color-selected: var(--spectrum-blue-800); + --system-tree-view-item-border-color-focus: var(--spectrum-blue-700); + --system-tree-view-item-background-color-hover: var(--spectrum-gray-100); + --system-tree-view-item-background-color-focus: var(--spectrum-gray-100); + --system-tree-view-item-border-color-quiet-selected: transparent; + --system-tree-view-item-icon-gap: var(--spectrum-text-to-visual-75); + --system-tree-view-item-icon-color: var(--spectrum-gray-700); + --system-tree-view-item-icon-color-hover: var(--spectrum-gray-900); + --system-tree-view-item-icon-color-focus: var(--spectrum-gray-900); + --system-tree-view-item-icon-color-selected: var(--spectrum-gray-900); + --system-tree-view-item-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-tree-view-item-text-color: var(--spectrum-neutral-content-color-default); + --system-tree-view-item-text-color-selected: var(--spectrum-gray-900); + --system-tree-view-item-text-color-disabled: var(--spectrum-gray-500); + --system-tree-view-item-text-color-focus: var(--spectrum-gray-900); + --system-tree-view-item-text-color-hover: var(--spectrum-gray-900); + --system-tree-view-indicator-margin-inline-start: calc(var(--spectrum-component-height-100) * -1); + --system-tree-view-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-medium); + --system-tree-view-item-min-block-size-thumbnail-offset: var(--spectrum-treeview-item-min-block-size-thumbnail-offset-medium, 0px); + --system-tree-view-indicator-animation-duration: var(--spectrum-animation-duration-100); + --system-tree-view-size-s-font-size: var(--spectrum-font-size-75); + --system-tree-view-size-s-item-min-block-size: var(--spectrum-component-height-75); + --system-tree-view-size-s-item-indentation: var(--spectrum-treeview-item-indentation-small); + --system-tree-view-size-s-heading-bottom-to-text: var(--spectrum-component-edge-to-text-75); + --system-tree-view-size-s-item-padding-inline-start: var(--spectrum-component-height-75); + --system-tree-view-size-s-indicator-margin-inline-start: calc(var(--spectrum-component-height-75) * -1); + --system-tree-view-size-s-item-padding-inline-end: var(--spectrum-component-edge-to-text-75); + --system-tree-view-size-s-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-small); + --system-tree-view-size-s-item-min-block-size-thumbnail-offset: 6px; + --system-tree-view-size-l-font-size: var(--spectrum-font-size-200); + --system-tree-view-size-l-item-indentation: var(--spectrum-treeview-item-indentation-large); + --system-tree-view-size-l-item-min-block-size: var(--spectrum-component-height-200); + --system-tree-view-size-l-heading-bottom-to-text: var(--spectrum-component-edge-to-text-200); + --system-tree-view-size-l-item-padding-inline-start: var(--spectrum-component-height-200); + --system-tree-view-size-l-indicator-margin-inline-start: calc(var(--spectrum-component-height-200) * -1); + --system-tree-view-size-l-item-padding-inline-end: var(--spectrum-component-edge-to-text-200); + --system-tree-view-size-l-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-large); + --system-tree-view-size-l-item-min-block-size-thumbnail-offset: 0px; + --system-tree-view-size-xl-font-size: var(--spectrum-font-size-300); + --system-tree-view-size-xl-item-indentation: var(--spectrum-treeview-item-indentation-extra-large); + --system-tree-view-size-xl-item-min-block-size: var(--spectrum-component-height-300); + --system-tree-view-size-xl-heading-bottom-to-text: var(--spectrum-component-edge-to-text-300); + --system-tree-view-size-xl-item-padding-inline-start: var(--spectrum-component-height-300); + --system-tree-view-size-xl-indicator-margin-inline-start: calc(var(--spectrum-component-height-300) * -1); + --system-tree-view-size-xl-item-padding-inline-end: var(--spectrum-component-edge-to-text-300); + --system-tree-view-size-xl-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large); + --system-tree-view-size-xl-item-min-block-size-thumbnail-offset: 0px; + --system-tree-view-detached-item-border-radius: var(--spectrum-corner-radius-100); +} diff --git a/tokens/dist/css/components/spectrum-two/typography.css b/tokens/dist/css/components/spectrum-two/typography.css new file mode 100644 index 00000000000..f22b6f5cbb2 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/typography.css @@ -0,0 +1,74 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --system-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --system-font-family: var(--spectrum-sans-font-family-stack); + --system-font-style: var(--spectrum-default-font-style); + --system-font-size: var(--spectrum-font-size-100); + --system-heading-sans-serif-font-family: var(--spectrum-sans-font-family-stack); + --system-heading-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-heading-font-color: var(--spectrum-heading-color); + --system-heading-size-xxs-font-size: var(--spectrum-heading-size-xxs); + --system-heading-size-xxs-cjk-font-size: var(--spectrum-heading-cjk-size-xxs); + --system-heading-size-xs-font-size: var(--spectrum-heading-size-xs); + --system-heading-size-xs-cjk-font-size: var(--spectrum-heading-cjk-size-xs); + --system-heading-size-s-font-size: var(--spectrum-heading-size-s); + --system-heading-size-s-cjk-font-size: var(--spectrum-heading-cjk-size-s); + --system-heading-font-size: var(--spectrum-heading-size-m); + --system-heading-size-m-font-size: var(--spectrum-heading-size-m); + --system-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --system-heading-size-m-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --system-heading-size-l-font-size: var(--spectrum-heading-size-l); + --system-heading-size-l-cjk-font-size: var(--spectrum-heading-cjk-size-l); + --system-heading-size-xl-font-size: var(--spectrum-heading-size-xl); + --system-heading-size-xl-cjk-font-size: var(--spectrum-heading-cjk-size-xl); + --system-heading-size-xxl-font-size: var(--spectrum-heading-size-xxl); + --system-heading-size-xxl-cjk-font-size: var(--spectrum-heading-cjk-size-xxl); + --system-heading-size-xxxl-font-size: var(--spectrum-heading-size-xxxl); + --system-heading-size-xxxl-cjk-font-size: var(--spectrum-heading-cjk-size-xxxl); + --system-body-sans-serif-font-family: var(--spectrum-sans-font-family-stack); + --system-body-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-body-font-color: var(--spectrum-body-color); + --system-body-size-xs-font-size: var(--spectrum-body-size-xs); + --system-body-size-s-font-size: var(--spectrum-body-size-s); + --system-body-font-size: var(--spectrum-body-size-m); + --system-body-size-m-font-size: var(--spectrum-body-size-m); + --system-body-size-l-font-size: var(--spectrum-body-size-l); + --system-body-size-xl-font-size: var(--spectrum-body-size-xl); + --system-body-size-xxl-font-size: var(--spectrum-body-size-xxl); + --system-body-size-xxxl-font-size: var(--spectrum-body-size-xxxl); + --system-detail-sans-serif-font-family: var(--spectrum-sans-font-family-stack); + --system-detail-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-detail-font-color: var(--spectrum-detail-color); + --system-detail-size-s-font-size: var(--spectrum-detail-size-s); + --system-detail-font-size: var(--spectrum-detail-size-m); + --system-detail-size-m-font-size: var(--spectrum-detail-size-m); + --system-detail-size-l-font-size: var(--spectrum-detail-size-l); + --system-detail-size-xl-font-size: var(--spectrum-detail-size-xl); + --system-code-font-family: var(--spectrum-code-font-family-stack); + --system-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-code-font-color: var(--spectrum-code-color); + --system-code-size-xs-font-size: var(--spectrum-code-size-xs); + --system-code-size-s-font-size: var(--spectrum-code-size-s); + --system-code-font-size: var(--spectrum-code-size-m); + --system-code-size-m-font-size: var(--spectrum-code-size-m); + --system-code-size-l-font-size: var(--spectrum-code-size-l); + --system-code-size-xl-font-size: var(--spectrum-code-size-xl); +} diff --git a/tokens/dist/css/components/spectrum-two/underlay.css b/tokens/dist/css/components/spectrum-two/underlay.css new file mode 100644 index 00000000000..de955ab1499 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/underlay.css @@ -0,0 +1,22 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0); + --system-underlay-background-exit-animation-ease: var(--spectrum-animation-ease-in); + --system-underlay-background-entry-animation-ease: var(--spectrum-animation-ease-out); + --system-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600); + --system-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-300); + --system-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200); + --system-underlay-background-color: rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)); +} diff --git a/tokens/dist/css/components/spectrum-two/well.css b/tokens/dist/css/components/spectrum-two/well.css new file mode 100644 index 00000000000..975e6a28fa0 --- /dev/null +++ b/tokens/dist/css/components/spectrum-two/well.css @@ -0,0 +1,23 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum { + --system-well-border-width: var(--spectrum-border-width-100); + --system-well-border-color: rgba(var(--spectrum-gray-1000), 0.05); + --system-well-border-radius: var(--spectrum-spacing-75); + --system-well-content-color: var(--spectrum-body-color); + --system-well-background-color: rgba(var(--spectrum-gray-800-rgb), 0.02); + --system-well-padding: var(--spectrum-spacing-300); + --system-well-margin-top: var(--spectrum-spacing-75); + --system-well-minimum-width: var(--spectrum-well-min-width); +} diff --git a/tokens/dist/css/components/spectrum/accordion.css b/tokens/dist/css/components/spectrum/accordion.css new file mode 100644 index 00000000000..6d7c0c391b1 --- /dev/null +++ b/tokens/dist/css/components/spectrum/accordion.css @@ -0,0 +1,112 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-accordion-item-width: var(--spectrum-accordion-minimum-width); + --system-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text); + --system-accordion-edge-to-disclosure-indicator-space: var(--spectrum-accordion-edge-to-disclosure-indicator); + --system-accordion-edge-to-text-space: var(--spectrum-accordion-edge-to-text); + --system-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-accordion-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-accordion-corner-radius: var(--spectrum-corner-radius-100); + --system-accordion-item-content-area-top-to-content: var(--spectrum-accordion-content-area-top-to-content); + --system-accordion-item-content-area-bottom-to-content: var(--spectrum-accordion-content-area-bottom-to-content); + --system-accordion-item-header-font: var(--spectrum-sans-font-family-stack); + --system-accordion-item-header-font-weight: var(--spectrum-bold-font-weight); + --system-accordion-item-header-font-style: var(--spectrum-default-font-style); + --system-accordion-item-header-line-height: 1.25; + --system-accordion-item-content-font: var(--spectrum-sans-font-family-stack); + --system-accordion-item-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-accordion-item-content-font-style: var(--spectrum-body-sans-serif-font-style); + --system-accordion-item-content-line-height: var(--spectrum-line-height-100); + --system-accordion-background-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-default)); + --system-accordion-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-hover)); + --system-accordion-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-down)); + --system-accordion-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus)); + --system-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default); + --system-accordion-item-header-color-hover: var(--spectrum-neutral-content-color-hover); + --system-accordion-item-header-color-down: var(--spectrum-neutral-content-color-down); + --system-accordion-item-header-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-accordion-item-header-disabled-color: var(--spectrum-disabled-content-color); + --system-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color); + --system-accordion-item-content-color: var(--spectrum-body-color); + --system-accordion-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-accordion-divider-color: var(--spectrum-gray-300); + --system-accordion-item-header-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-accordion-item-content-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-accordion-size-s-item-height: var(--spectrum-component-height-100); + --system-accordion-size-s-disclosure-indicator-height: var(--spectrum-component-height-75); + --system-accordion-size-s-component-edge-to-text: var(--spectrum-component-edge-to-text-50); + --system-accordion-size-s-item-header-font-size: var(--spectrum-font-size-200); + --system-accordion-size-s-item-content-font-size: var(--spectrum-body-size-xs); + --system-accordion-size-s-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-small); + --system-accordion-size-s-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-small); + --system-accordion-item-height: var(--spectrum-component-height-200); + --system-accordion-size-m-item-height: var(--spectrum-component-height-200); + --system-accordion-disclosure-indicator-height: var(--spectrum-component-height-100); + --system-accordion-size-m-disclosure-indicator-height: var(--spectrum-component-height-100); + --system-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-75); + --system-accordion-size-m-component-edge-to-text: var(--spectrum-component-edge-to-text-75); + --system-accordion-item-header-font-size: var(--spectrum-font-size-300); + --system-accordion-size-m-item-header-font-size: var(--spectrum-font-size-300); + --system-accordion-item-content-font-size: var(--spectrum-body-size-s); + --system-accordion-size-m-item-content-font-size: var(--spectrum-body-size-s); + --system-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium); + --system-accordion-size-m-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium); + --system-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium); + --system-accordion-size-m-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium); + --system-accordion-size-l-item-height: var(--spectrum-component-height-300); + --system-accordion-size-l-disclosure-indicator-height: var(--spectrum-component-height-200); + --system-accordion-size-l-component-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-accordion-size-l-item-header-font-size: var(--spectrum-font-size-500); + --system-accordion-size-l-item-content-font-size: var(--spectrum-body-size-m); + --system-accordion-size-l-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-large); + --system-accordion-size-l-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-large); + --system-accordion-size-xl-item-height: var(--spectrum-component-height-400); + --system-accordion-size-xl-disclosure-indicator-height: var(--spectrum-component-height-300); + --system-accordion-size-xl-component-edge-to-text: var(--spectrum-component-edge-to-text-200); + --system-accordion-size-xl-item-header-font-size: var(--spectrum-font-size-700); + --system-accordion-size-xl-item-content-font-size: var(--spectrum-body-size-l); + --system-accordion-size-xl-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-extra-large); + --system-accordion-size-xl-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-extra-large); + --system-accordion-compact-size-s-item-height: var(--spectrum-component-height-75); + --system-accordion-compact-size-s-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small); + --system-accordion-compact-size-s-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small); + --system-accordion-compact-item-height: var(--spectrum-component-height-100); + --system-accordion-compact-size-m-item-height: var(--spectrum-component-height-100); + --system-accordion-compact-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium); + --system-accordion-compact-size-m-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium); + --system-accordion-compact-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium); + --system-accordion-compact-size-m-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium); + --system-accordion-compact-size-l-item-height: var(--spectrum-component-height-200); + --system-accordion-compact-size-l-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large); + --system-accordion-compact-size-l-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large); + --system-accordion-compact-size-xl-item-height: var(--spectrum-component-height-300); + --system-accordion-compact-size-xl-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large); + --system-accordion-compact-size-xl-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large); + --system-accordion-spacious-size-s-item-header-line-height: 1.25; + --system-accordion-spacious-size-s-item-header-top-to-text-space: var(--spectrum-accordion-small-top-to-text-spacious); + --system-accordion-spacious-size-s-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small); + --system-accordion-spacious-item-header-line-height: 1.278; + --system-accordion-spacious-size-m-item-header-line-height: 1.278; + --system-accordion-spacious-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium); + --system-accordion-spacious-size-m-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium); + --system-accordion-spacious-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium); + --system-accordion-spacious-size-m-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium); + --system-accordion-spacious-size-l-item-header-line-height: 1.273; + --system-accordion-spacious-size-l-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-large); + --system-accordion-spacious-size-l-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-large); + --system-accordion-spacious-size-xl-item-header-line-height: 1.25; + --system-accordion-spacious-size-xl-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-extra-large); + --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-extra-large); +} diff --git a/tokens/dist/css/components/spectrum/actionbar.css b/tokens/dist/css/components/spectrum/actionbar.css new file mode 100644 index 00000000000..cf0bbdb6367 --- /dev/null +++ b/tokens/dist/css/components/spectrum/actionbar.css @@ -0,0 +1,37 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-action-bar-height: var(--spectrum-action-bar-height); + --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); + --system-action-bar-item-counter-line-height: var(--spectrum-line-height-100); + --system-action-bar-item-counter-color: var(--spectrum-neutral-content-color-default); + --system-action-bar-item-counter-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-action-bar-popover-background-color: var(--spectrum-gray-50); + --system-action-bar-popover-border-color: var(--spectrum-gray-400); + --system-action-bar-emphasized-background-color: var(--spectrum-informative-background-color-default); + --system-action-bar-emphasized-item-counter-color: var(--spectrum-white); + --system-action-bar-spacing-outer-edge: var(--spectrum-spacing-300); + --system-action-bar-spacing-close-button-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-start: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-end: var(--spectrum-spacing-75); + --system-action-bar-spacing-item-counter-top: var(--spectrum-action-bar-top-to-item-counter); + --system-action-bar-spacing-item-counter-end: var(--spectrum-spacing-400); + --system-action-bar-spacing-action-group-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-action-group-end: var(--spectrum-spacing-100); + --system-action-bar-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color); +} diff --git a/tokens/dist/css/components/spectrum/actionbutton.css b/tokens/dist/css/components/spectrum/actionbutton.css new file mode 100644 index 00000000000..8ecd8236158 --- /dev/null +++ b/tokens/dist/css/components/spectrum/actionbutton.css @@ -0,0 +1,191 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-action-button-animation-duration: var(--spectrum-animation-duration-100); + --system-action-button-border-radius: var(--spectrum-corner-radius-100); + --system-action-button-border-width: var(--spectrum-border-width-100); + --system-action-button-content-color-default: var(--spectrum-neutral-content-color-default); + --system-action-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-action-button-content-color-down: var(--spectrum-neutral-content-color-down); + --system-action-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-action-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-action-button-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-action-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-action-button-background-color-default: var(--spectrum-gray-75); + --system-action-button-background-color-hover: var(--spectrum-gray-200); + --system-action-button-background-color-down: var(--spectrum-gray-300); + --system-action-button-background-color-focus: var(--spectrum-gray-200); + --system-action-button-border-color-default: var(--spectrum-gray-400); + --system-action-button-border-color-hover: var(--spectrum-gray-500); + --system-action-button-border-color-down: var(--spectrum-gray-600); + --system-action-button-border-color-focus: var(--spectrum-gray-500); + --system-action-button-background-color-disabled: transparent; + --system-action-button-border-color-disabled: var(--spectrum-disabled-border-color); + --system-action-button-content-color-disabled: var(--spectrum-disabled-content-color); + --system-action-button-min-width: calc(var(--spectrum-component-edge-to-visual-only-100) * 2 + var(--spectrum-workflow-icon-size-100)); + --system-action-button-height: var(--spectrum-component-height-100); + --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); + --system-action-button-font-size: var(--spectrum-font-size-100); + --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); + --system-action-button-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --system-action-button-quiet-background-color-default: transparent; + --system-action-button-quiet-background-color-hover: var(--spectrum-gray-200); + --system-action-button-quiet-background-color-down: var(--spectrum-gray-300); + --system-action-button-quiet-background-color-focus: var(--spectrum-gray-200); + --system-action-button-quiet-background-color-disabled: transparent; + --system-action-button-quiet-border-color-default: transparent; + --system-action-button-quiet-border-color-hover: transparent; + --system-action-button-quiet-border-color-down: transparent; + --system-action-button-quiet-border-color-focus: transparent; + --system-action-button-quiet-border-color-disabled: transparent; + --system-action-button-selected-background-color-default: var(--spectrum-neutral-background-color-selected-default); + --system-action-button-selected-background-color-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-action-button-selected-background-color-down: var(--spectrum-neutral-background-color-selected-down); + --system-action-button-selected-background-color-focus: var(--spectrum-neutral-background-color-selected-key-focus); + --system-action-button-selected-content-color-default: var(--spectrum-gray-50); + --system-action-button-selected-content-color-hover: var(--spectrum-gray-50); + --system-action-button-selected-content-color-down: var(--spectrum-gray-50); + --system-action-button-selected-content-color-focus: var(--spectrum-gray-50); + --system-action-button-selected-border-color-default: transparent; + --system-action-button-selected-border-color-hover: transparent; + --system-action-button-selected-border-color-down: transparent; + --system-action-button-selected-border-color-focus: transparent; + --system-action-button-selected-border-color-disabled: transparent; + --system-action-button-selected-background-color-disabled: var(--spectrum-disabled-background-color); + --system-action-button-selected-emphasized-background-color-default: var(--spectrum-accent-background-color-default); + --system-action-button-selected-emphasized-background-color-hover: var(--spectrum-accent-background-color-hover); + --system-action-button-selected-emphasized-background-color-down: var(--spectrum-accent-background-color-down); + --system-action-button-selected-emphasized-background-color-focus: var(--spectrum-accent-background-color-key-focus); + --system-action-button-selected-emphasized-content-color-default: var(--spectrum-white); + --system-action-button-selected-emphasized-content-color-hover: var(--spectrum-white); + --system-action-button-selected-emphasized-content-color-down: var(--spectrum-white); + --system-action-button-selected-emphasized-content-color-focus: var(--spectrum-white); + --system-action-button-static-black-quiet-border-color-default: transparent; + --system-action-button-static-white-quiet-border-color-default: transparent; + --system-action-button-static-black-quiet-border-color-hover: transparent; + --system-action-button-static-white-quiet-border-color-hover: transparent; + --system-action-button-static-black-quiet-border-color-down: transparent; + --system-action-button-static-white-quiet-border-color-down: transparent; + --system-action-button-static-black-quiet-border-color-focus: transparent; + --system-action-button-static-white-quiet-border-color-focus: transparent; + --system-action-button-static-black-quiet-border-color-disabled: transparent; + --system-action-button-static-white-quiet-border-color-disabled: transparent; + --system-action-button-static-black-background-color-default: transparent; + --system-action-button-static-black-background-color-hover: var(--spectrum-transparent-black-300); + --system-action-button-static-black-background-color-down: var(--spectrum-transparent-black-400); + --system-action-button-static-black-background-color-focus: var(--spectrum-transparent-black-300); + --system-action-button-static-black-background-color-disabled: transparent; + --system-action-button-static-black-border-color-default: var(--spectrum-transparent-black-400); + --system-action-button-static-black-border-color-hover: var(--spectrum-transparent-black-500); + --system-action-button-static-black-border-color-down: var(--spectrum-transparent-black-600); + --system-action-button-static-black-border-color-focus: var(--spectrum-transparent-black-500); + --system-action-button-static-black-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --system-action-button-static-black-content-color-default: var(--spectrum-black); + --system-action-button-static-black-content-color-hover: var(--spectrum-black); + --system-action-button-static-black-content-color-down: var(--spectrum-black); + --system-action-button-static-black-content-color-focus: var(--spectrum-black); + --system-action-button-static-black-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-action-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-action-button-static-black-selected-background-color-default: var(--spectrum-transparent-black-800); + --system-action-button-static-black-selected-background-color-hover: var(--spectrum-transparent-black-900); + --system-action-button-static-black-selected-background-color-down: var(--spectrum-transparent-black-900); + --system-action-button-static-black-selected-background-color-focus: var(--spectrum-transparent-black-900); + --system-action-button-static-black-selected-background-color-disabled: var(--spectrum-transparent-black-200); + --system-action-button-static-black-selected-border-color-disabled: transparent; + --system-action-button-static-black-selected-content-color-default: var(--spectrum-white); + --system-action-button-static-black-selected-emphasized-background-color-default: var(--spectrum-transparent-black-900); + --system-action-button-static-black-selected-emphasized-background-color-hover: var(--spectrum-transparent-black-1000); + --system-action-button-static-black-selected-emphasized-background-color-down: var(--spectrum-transparent-black-1000); + --system-action-button-static-black-selected-emphasized-background-color-focus: var(--spectrum-transparent-black-1000); + --system-action-button-static-black-selected-emphasized-content-color-default: var(--spectrum-gray-50); + --system-action-button-static-black-selected-emphasized-content-color-hover: var(--spectrum-gray-900); + --system-action-button-static-black-selected-emphasized-content-color-down: var(--spectrum-gray-900); + --system-action-button-static-black-selected-emphasized-content-color-focus: var(--spectrum-gray-900); + --system-action-button-static-white-background-color-default: transparent; + --system-action-button-static-white-background-color-hover: var(--spectrum-transparent-white-300); + --system-action-button-static-white-background-color-down: var(--spectrum-transparent-white-400); + --system-action-button-static-white-background-color-focus: var(--spectrum-transparent-white-300); + --system-action-button-static-white-background-color-disabled: transparent; + --system-action-button-static-white-border-color-default: var(--spectrum-transparent-white-400); + --system-action-button-static-white-border-color-hover: var(--spectrum-transparent-white-500); + --system-action-button-static-white-border-color-down: var(--spectrum-transparent-white-600); + --system-action-button-static-white-border-color-focus: var(--spectrum-transparent-white-500); + --system-action-button-static-white-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --system-action-button-static-white-content-color-default: var(--spectrum-white); + --system-action-button-static-white-content-color-hover: var(--spectrum-white); + --system-action-button-static-white-content-color-down: var(--spectrum-white); + --system-action-button-static-white-content-color-focus: var(--spectrum-white); + --system-action-button-static-white-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-action-button-static-white-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-action-button-static-white-selected-background-color-default: var(--spectrum-transparent-white-800); + --system-action-button-static-white-selected-background-color-hover: var(--spectrum-transparent-white-900); + --system-action-button-static-white-selected-background-color-down: var(--spectrum-transparent-white-900); + --system-action-button-static-white-selected-background-color-focus: var(--spectrum-transparent-white-900); + --system-action-button-static-white-selected-background-color-disabled: var(--spectrum-transparent-white-200); + --system-action-button-static-white-selected-border-color-disabled: transparent; + --system-action-button-static-white-selected-content-color-default: var(--spectrum-black); + --system-action-button-static-white-selected-emphasized-background-color-default: var(--spectrum-transparent-white-900); + --system-action-button-static-white-selected-emphasized-background-color-hover: var(--spectrum-transparent-white-1000); + --system-action-button-static-white-selected-emphasized-background-color-down: var(--spectrum-transparent-white-1000); + --system-action-button-static-white-selected-emphasized-background-color-focus: var(--spectrum-transparent-white-1000); + --system-action-button-static-white-selected-emphasized-content-color-default: var(--spectrum-gray-50); + --system-action-button-size-xs-min-width: calc(var(--spectrum-component-edge-to-visual-only-50) * 2 + var(--spectrum-workflow-icon-size-50)); + --system-action-button-size-xs-height: var(--spectrum-component-height-50); + --system-action-button-size-xs-icon-size: var(--spectrum-workflow-icon-size-50); + --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); + --system-action-button-size-xs-text-to-visual: var(--spectrum-text-to-visual-50); + --system-action-button-size-xs-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small); + --system-action-button-size-xs-edge-to-visual-size: var(--spectrum-component-edge-to-visual-50); + --system-action-button-size-xs-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-50); + --system-action-button-size-xs-edge-to-text-size: var(--spectrum-component-edge-to-text-50); + --system-action-button-size-s-min-width: calc(var(--spectrum-component-edge-to-visual-only-75) * 2 + var(--spectrum-workflow-icon-size-75)); + --system-action-button-size-s-height: var(--spectrum-component-height-75); + --system-action-button-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-action-button-size-s-font-size: var(--spectrum-font-size-75); + --system-action-button-size-s-text-to-visual: var(--spectrum-text-to-visual-75); + --system-action-button-size-s-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small); + --system-action-button-size-s-edge-to-visual-size: var(--spectrum-component-edge-to-visual-75); + --system-action-button-size-s-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-75); + --system-action-button-size-s-edge-to-text-size: var(--spectrum-component-edge-to-text-75); + --system-action-button-size-m-min-width: calc(var(--spectrum-component-edge-to-visual-only-100) * 2 + var(--spectrum-workflow-icon-size-100)); + --system-action-button-size-m-height: var(--spectrum-component-height-100); + --system-action-button-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-action-button-size-m-font-size: var(--spectrum-font-size-100); + --system-action-button-size-m-text-to-visual: var(--spectrum-text-to-visual-100); + --system-action-button-size-m-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --system-action-button-edge-to-visual-size: var(--spectrum-component-edge-to-visual-100); + --system-action-button-size-m-edge-to-visual-size: var(--spectrum-component-edge-to-visual-100); + --system-action-button-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-100); + --system-action-button-size-m-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-100); + --system-action-button-edge-to-text-size: var(--spectrum-component-edge-to-text-100); + --system-action-button-size-m-edge-to-text-size: var(--spectrum-component-edge-to-text-100); + --system-action-button-size-l-min-width: calc(var(--spectrum-component-edge-to-visual-only-200) * 2 + var(--spectrum-workflow-icon-size-200)); + --system-action-button-size-l-height: var(--spectrum-component-height-200); + --system-action-button-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-action-button-size-l-font-size: var(--spectrum-font-size-200); + --system-action-button-size-l-text-to-visual: var(--spectrum-text-to-visual-200); + --system-action-button-size-l-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large); + --system-action-button-size-l-edge-to-visual-size: var(--spectrum-component-edge-to-visual-200); + --system-action-button-size-l-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-200); + --system-action-button-size-l-edge-to-text-size: var(--spectrum-component-edge-to-text-200); + --system-action-button-size-xl-min-width: calc(var(--spectrum-component-edge-to-visual-only-300) * 2 + var(--spectrum-workflow-icon-size-300)); + --system-action-button-size-xl-height: var(--spectrum-component-height-300); + --system-action-button-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-action-button-size-xl-text-to-visual: var(--spectrum-text-to-visual-300); + --system-action-button-size-xl-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large); + --system-action-button-size-xl-edge-to-visual-size: var(--spectrum-component-edge-to-visual-300); + --system-action-button-size-xl-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-300); + --system-action-button-size-xl-edge-to-text-size: var(--spectrum-component-edge-to-text-300); +} diff --git a/tokens/dist/css/components/spectrum/actiongroup.css b/tokens/dist/css/components/spectrum/actiongroup.css new file mode 100644 index 00000000000..f5fd41dd551 --- /dev/null +++ b/tokens/dist/css/components/spectrum/actiongroup.css @@ -0,0 +1,33 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-action-group-gap-size-compact: 0; + --system-action-group-horizontal-spacing-compact: -1px; + --system-action-group-vertical-spacing-compact: -1px; + --system-action-group-button-spacing-reset: 0; + --system-action-group-border-radius-reset: 0; + --system-action-group-border-radius: var(--spectrum-corner-radius-100); + --system-action-group-size-xs-horizontal-spacing-regular: var(--spectrum-spacing-75); + --system-action-group-size-s-horizontal-spacing-regular: var(--spectrum-spacing-75); + --system-action-group-size-xs-vertical-spacing-regular: var(--spectrum-spacing-75); + --system-action-group-size-s-vertical-spacing-regular: var(--spectrum-spacing-75); + --system-action-group-horizontal-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-m-horizontal-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-l-horizontal-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-xl-horizontal-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-m-vertical-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-l-vertical-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-xl-vertical-spacing-regular: var(--spectrum-spacing-100); +} diff --git a/tokens/dist/css/components/spectrum/alertbanner.css b/tokens/dist/css/components/spectrum/alertbanner.css new file mode 100644 index 00000000000..003e9949ca8 --- /dev/null +++ b/tokens/dist/css/components/spectrum/alertbanner.css @@ -0,0 +1,31 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default); + --system-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height); + --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); + --system-alert-banner-size: auto; + --system-alert-banner-font-size: var(--spectrum-font-size-100); + --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); + --system-alert-banner-start-edge: var(--spectrum-spacing-300); + --system-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300); + --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); + --system-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon); + --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); + --system-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text); + --system-alert-banner-informative-background: var(--spectrum-informative-background-color-default); + --system-alert-banner-negative-background: var(--spectrum-negative-background-color-default); + --system-alert-banner-font-color: var(--spectrum-white); +} diff --git a/tokens/dist/css/components/spectrum/alertdialog.css b/tokens/dist/css/components/spectrum/alertdialog.css new file mode 100644 index 00000000000..5363639573b --- /dev/null +++ b/tokens/dist/css/components/spectrum/alertdialog.css @@ -0,0 +1,35 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); + --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); + --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-dialog-warning-icon-color: var(--spectrum-notice-visual-color); + --system-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color); + --system-alert-dialog-title-font-family: var(--spectrum-sans-font-family-stack); + --system-alert-dialog-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-alert-dialog-title-font-style: var(--spectrum-heading-sans-serif-font-style); + --system-alert-dialog-title-font-size: var(--spectrum-alert-dialog-title-size); + --system-alert-dialog-title-line-height: var(--spectrum-heading-line-height); + --system-alert-dialog-title-color: var(--spectrum-heading-color); + --system-alert-dialog-body-font-family: var(--spectrum-sans-font-family-stack); + --system-alert-dialog-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-alert-dialog-body-font-style: var(--spectrum-body-sans-serif-font-style); + --system-alert-dialog-body-font-size: var(--spectrum-alert-dialog-description-size); + --system-alert-dialog-body-line-height: var(--spectrum-line-height-100); + --system-alert-dialog-body-color: var(--spectrum-body-color); + --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200); + --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300); + --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300); +} diff --git a/tokens/dist/css/components/spectrum/asset.css b/tokens/dist/css/components/spectrum/asset.css new file mode 100644 index 00000000000..a3a3d82353f --- /dev/null +++ b/tokens/dist/css/components/spectrum/asset.css @@ -0,0 +1,19 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-asset-transition-duration: var(--spectrum-animation-duration-100); + --system-asset-folder-background-color: var(--spectrum-gray-300); + --system-asset-file-background-color: var(--spectrum-gray-50); + --system-asset-icon-outline-color: var(--spectrum-gray-500); +} diff --git a/tokens/dist/css/components/spectrum/assetcard.css b/tokens/dist/css/components/spectrum/assetcard.css new file mode 100644 index 00000000000..870ec83921b --- /dev/null +++ b/tokens/dist/css/components/spectrum/assetcard.css @@ -0,0 +1,105 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-asset-card-overlay-background-color-rgb: 27, 127, 245; + --system-asset-card-overlay-background-color-opacity: 0.1; + --system-asset-card-overlay-background-color: rgba(var(--system-asset-card-overlay-background-color-rgb), var(--system-asset-card-overlay-background-color-opacity)); + --system-asset-card-asset-size: 224px; + --system-asset-card-background-color: var(--spectrum-gray-200); + --system-asset-card-asset-animation-duration: var(--spectrum-animation-duration-100); + --system-asset-card-asset-container-border-size: 1px; + --system-asset-card-header-margin-block-start: var(--spectrum-spacing-300); + --system-asset-card-border-radius: var(--spectrum-corner-radius-100); + --system-asset-card-border-color: transparent; + --system-asset-card-border-color-hover: var(--spectrum-gray-500); + --system-asset-card-border-color-down: var(--spectrum-gray-600); + --system-asset-card-focus-ring-gap: 5px; + --system-asset-card-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-asset-card-selectionindicator-background-color-default: rgba(var(--spectrum-gray-100-rgb), 0.9); + --system-asset-card-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-200); + --system-asset-card-selectionindicator-size: var(--spectrum-card-selection-background-size); + --system-asset-card-selectionindicator-border-radius: var(--spectrum-corner-radius-100); + --system-asset-card-selectionindicator-offset-y: 4px; + --system-asset-card-selectionindicator-blur: 6px; + --system-asset-card-selectionindicator-color: var(--spectrum-white); + --system-asset-card-selectionindicator-font-weight: var(--spectrum-bold-font-weight); + --system-asset-card-selectionindicator-font-size: var(--spectrum-font-size-400); + --system-asset-card-title-text-color: var(--spectrum-gray-900); + --system-asset-card-title-font-family: var(--spectrum-sans-font-family-stack); + --system-asset-card-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-asset-card-title-font-style: var(--spectrum-default-font-style); + --system-asset-card-title-line-height: var(--spectrum-line-height-100); + --system-asset-card-title-letter-spacing: 0; + --system-asset-card-header-content-text-color: var(--spectrum-gray-900); + --system-asset-card-header-content-font-family: var(--spectrum-sans-font-family-stack); + --system-asset-card-header-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-asset-card-header-content-font-style: var(--spectrum-default-font-style); + --system-asset-card-header-content-line-height: var(--spectrum-line-height-200); + --system-asset-card-header-content-letter-spacing: 0; + --system-asset-card-content-text-color: var(--spectrum-gray-700); + --system-asset-card-content-font-family: var(--spectrum-sans-font-family-stack); + --system-asset-card-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-asset-card-content-font-style: var(--spectrum-default-font-style); + --system-asset-card-content-line-height: var(--spectrum-line-height-200); + --system-asset-card-content-letter-spacing: 0; + --system-asset-card-content-margin-block-start: var(--spectrum-spacing-75); + --system-asset-card-lang-zh-title-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ja-title-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ko-title-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-zh-title-font-style: var(--spectrum-heading-cjk-font-style); + --system-asset-card-lang-ja-title-font-style: var(--spectrum-heading-cjk-font-style); + --system-asset-card-lang-ko-title-font-style: var(--spectrum-heading-cjk-font-style); + --system-asset-card-lang-zh-title-font-weight: var(--spectrum-heading-cjk-font-weight); + --system-asset-card-lang-ja-title-font-weight: var(--spectrum-heading-cjk-font-weight); + --system-asset-card-lang-ko-title-font-weight: var(--spectrum-heading-cjk-font-weight); + --system-asset-card-lang-zh-title-font-size: var(--spectrum-heading-cjk-size-xs); + --system-asset-card-lang-ja-title-font-size: var(--spectrum-heading-cjk-size-xs); + --system-asset-card-lang-ko-title-font-size: var(--spectrum-heading-cjk-size-xs); + --system-asset-card-lang-zh-title-line-height: var(--spectrum-heading-cjk-line-height); + --system-asset-card-lang-ja-title-line-height: var(--spectrum-heading-cjk-line-height); + --system-asset-card-lang-ko-title-line-height: var(--spectrum-heading-cjk-line-height); + --system-asset-card-lang-zh-title-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ja-title-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ko-title-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-zh-header-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ja-header-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ko-header-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-zh-header-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ja-header-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ko-header-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-zh-header-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ja-header-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ko-header-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-zh-header-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ja-header-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ko-header-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-zh-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ja-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ko-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-zh-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ja-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ko-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-zh-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ja-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ko-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-zh-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ja-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ko-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-zh-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ja-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ko-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-zh-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ja-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ko-content-letter-spacing: var(--spectrum-cjk-letter-spacing); +} diff --git a/tokens/dist/css/components/spectrum/assetlist.css b/tokens/dist/css/components/spectrum/assetlist.css new file mode 100644 index 00000000000..c78aedb0dcd --- /dev/null +++ b/tokens/dist/css/components/spectrum/assetlist.css @@ -0,0 +1,32 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-asset-list-width: 272px; + --system-asset-list-child-indicator-animation: var(--spectrum-animation-duration-100); + --system-asset-list-item-height: var(--spectrum-spacing-600); + --system-asset-list-item-padding-inline-start: var(--spectrum-spacing-300); + --system-asset-list-item-padding-inline-end: var(--spectrum-spacing-300); + --system-asset-list-item-margin-block-end: var(--spectrum-spacing-75); + --system-asset-list-item-border-radius: var(--spectrum-spacing-75); + --system-asset-list-item-animation: var(--spectrum-animation-duration-100); + --system-asset-list-item-font-size: var(--spectrum-font-size-100); + --system-asset-list-item-font-weight: var(--spectrum-regular-font-weight); + --system-asset-list-item-background-color-down: var(--spectrum-gray-300); + --system-asset-list-item-background-color-hover: var(--spectrum-gray-200); + --system-asset-list-thumbnail-width: var(--spectrum-spacing-400); + --system-asset-list-thumbnail-height: var(--spectrum-spacing-400); + --system-asset-list-thumbnail-margin-inline-start: var(--spectrum-spacing-100); + --system-asset-list-item-label-padding-inline-start: var(--spectrum-spacing-100); + --system-asset-list-label-color: var(--spectrum-neutral-content-color-default); +} diff --git a/tokens/dist/css/components/spectrum/avatar.css b/tokens/dist/css/components/spectrum/avatar.css new file mode 100644 index 00000000000..4892b4ee546 --- /dev/null +++ b/tokens/dist/css/components/spectrum/avatar.css @@ -0,0 +1,40 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-avatar-color-opacity: 1; + --system-avatar-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-block-size: var(--spectrum-avatar-size-100); + --system-avatar-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-avatar-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-avatar-color-opacity-disabled: var(--spectrum-avatar-opacity-disabled); + --system-avatar-size-50-inline-size: var(--spectrum-avatar-size-50); + --system-avatar-size-50-block-size: var(--spectrum-avatar-size-50); + --system-avatar-size-75-inline-size: var(--spectrum-avatar-size-75); + --system-avatar-size-75-block-size: var(--spectrum-avatar-size-75); + --system-avatar-size-100-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-size-100-block-size: var(--spectrum-avatar-size-100); + --system-avatar-size-200-inline-size: var(--spectrum-avatar-size-200); + --system-avatar-size-200-block-size: var(--spectrum-avatar-size-200); + --system-avatar-size-300-inline-size: var(--spectrum-avatar-size-300); + --system-avatar-size-300-block-size: var(--spectrum-avatar-size-300); + --system-avatar-size-400-inline-size: var(--spectrum-avatar-size-400); + --system-avatar-size-400-block-size: var(--spectrum-avatar-size-400); + --system-avatar-size-500-inline-size: var(--spectrum-avatar-size-500); + --system-avatar-size-500-block-size: var(--spectrum-avatar-size-500); + --system-avatar-size-600-inline-size: var(--spectrum-avatar-size-600); + --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600); + --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700); + --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700); +} diff --git a/tokens/dist/css/components/spectrum/badge.css b/tokens/dist/css/components/spectrum/badge.css new file mode 100644 index 00000000000..3716e3c1d00 --- /dev/null +++ b/tokens/dist/css/components/spectrum/badge.css @@ -0,0 +1,93 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-badge-corner-radius: var(--spectrum-corner-radius-100); + --system-badge-line-height: var(--spectrum-line-height-100); + --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-badge-label-icon-color: var(--spectrum-white); + --system-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --system-badge-background-color-accent: var(--spectrum-accent-background-color-default); + --system-badge-background-color-informative: var(--spectrum-informative-background-color-default); + --system-badge-background-color-negative: var(--spectrum-negative-background-color-default); + --system-badge-background-color-positive: var(--spectrum-positive-background-color-default); + --system-badge-background-color-notice: var(--spectrum-notice-background-color-default); + --system-badge-background-color-gray: var(--spectrum-gray-background-color-default); + --system-badge-background-color-red: var(--spectrum-red-background-color-default); + --system-badge-background-color-orange: var(--spectrum-orange-background-color-default); + --system-badge-background-color-yellow: var(--spectrum-yellow-background-color-default); + --system-badge-background-color-chartreuse: var(--spectrum-chartreuse-background-color-default); + --system-badge-background-color-celery: var(--spectrum-celery-background-color-default); + --system-badge-background-color-green: var(--spectrum-green-background-color-default); + --system-badge-background-color-seafoam: var(--spectrum-seafoam-background-color-default); + --system-badge-background-color-cyan: var(--spectrum-cyan-background-color-default); + --system-badge-background-color-blue: var(--spectrum-blue-background-color-default); + --system-badge-background-color-indigo: var(--spectrum-indigo-background-color-default); + --system-badge-background-color-purple: var(--spectrum-purple-background-color-default); + --system-badge-background-color-fuchsia: var(--spectrum-fuchsia-background-color-default); + --system-badge-background-color-magenta: var(--spectrum-magenta-background-color-default); + --system-badge-height: var(--spectrum-component-height-100); + --system-badge-font-size: var(--spectrum-font-size-100); + --system-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-100); + --system-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-100); + --system-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-100); + --system-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); + --system-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); + --system-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-100); + --system-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100); + --system-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-100); + --system-badge-orange-label-icon-color: var(--spectrum-black); + --system-badge-yellow-label-icon-color: var(--spectrum-black); + --system-badge-chartreuse-label-icon-color: var(--spectrum-black); + --system-badge-celery-label-icon-color: var(--spectrum-black); + --system-badge-gray-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-red-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-green-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-seafoam-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-cyan-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-blue-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-indigo-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-purple-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-fuchsia-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-magenta-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-size-s-height: var(--spectrum-component-height-75); + --system-badge-size-s-font-size: var(--spectrum-font-size-75); + --system-badge-size-s-label-spacing-vertical-top: var(--spectrum-component-top-to-text-75); + --system-badge-size-s-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-75); + --system-badge-size-s-label-spacing-horizontal: var(--spectrum-component-edge-to-text-75); + --system-badge-size-s-workflow-icon-size: var(--spectrum-workflow-icon-size-75); + --system-badge-size-s-icon-text-spacing: var(--spectrum-text-to-visual-75); + --system-badge-size-s-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-75); + --system-badge-size-s-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-75); + --system-badge-size-s-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-75); + --system-badge-size-l-height: var(--spectrum-component-height-100); + --system-badge-size-l-font-size: var(--spectrum-font-size-200); + --system-badge-size-l-label-spacing-vertical-top: var(--spectrum-component-top-to-text-200); + --system-badge-size-l-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-200); + --system-badge-size-l-label-spacing-horizontal: var(--spectrum-component-edge-to-text-200); + --system-badge-size-l-workflow-icon-size: var(--spectrum-workflow-icon-size-200); + --system-badge-size-l-icon-text-spacing: var(--spectrum-text-to-visual-200); + --system-badge-size-l-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-200); + --system-badge-size-l-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-200); + --system-badge-size-l-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-200); + --system-badge-size-xl-height: var(--spectrum-component-height-100); + --system-badge-size-xl-font-size: var(--spectrum-font-size-300); + --system-badge-size-xl-label-spacing-vertical-top: var(--spectrum-component-top-to-text-300); + --system-badge-size-xl-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-300); + --system-badge-size-xl-label-spacing-horizontal: var(--spectrum-component-edge-to-text-300); + --system-badge-size-xl-workflow-icon-size: var(--spectrum-workflow-icon-size-300); + --system-badge-size-xl-icon-text-spacing: var(--spectrum-text-to-visual-300); + --system-badge-size-xl-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-300); + --system-badge-size-xl-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-300); + --system-badge-size-xl-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-300); +} diff --git a/tokens/dist/css/components/spectrum/breadcrumb.css b/tokens/dist/css/components/spectrum/breadcrumb.css new file mode 100644 index 00000000000..a1f3c8844fd --- /dev/null +++ b/tokens/dist/css/components/spectrum/breadcrumb.css @@ -0,0 +1,69 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); + --system-breadcrumbs-block-size-compact: var(--spectrum-breadcrumbs-height-compact); + --system-breadcrumbs-block-size-multiline: var(--spectrum-breadcrumbs-height-multiline); + --system-breadcrumbs-line-height: var(--spectrum-line-height-100); + --system-breadcrumbs-font-size: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); + --system-breadcrumbs-font-size-current: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family-current: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); + --system-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); + --system-breadcrumbs-font-family-compact: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight-compact: var(--spectrum-regular-font-weight); + --system-breadcrumbs-font-size-compact-current: var(--spectrum-font-size-100); + --system-breadcrumbs-font-family-compact-current: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight-compact-current: var(--spectrum-bold-font-weight); + --system-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); + --system-breadcrumbs-font-family-multiline: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight-multiline: var(--spectrum-regular-font-weight); + --system-breadcrumbs-font-size-multiline-current: var(--spectrum-font-size-300); + --system-breadcrumbs-font-family-multiline-current: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight-multiline-current: var(--spectrum-bold-font-weight); + --system-breadcrumbs-text-decoration-thickness: var(--spectrum-text-underline-thickness); + --system-breadcrumbs-text-decoration-gap: var(--spectrum-text-underline-gap); + --system-breadcrumbs-separator-spacing-inline: var(--spectrum-text-to-visual-100); + --system-breadcrumbs-text-spacing-block-start: var(--spectrum-breadcrumbs-top-to-text); + --system-breadcrumbs-text-spacing-block-end: var(--spectrum-breadcrumbs-bottom-to-text); + --system-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-icon); + --system-breadcrumbs-text-spacing-block-start-compact: var(--spectrum-breadcrumbs-top-to-text-compact); + --system-breadcrumbs-text-spacing-block-end-compact: var(--spectrum-breadcrumbs-bottom-to-text-compact); + --system-breadcrumbs-icon-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-separator-icon-compact); + --system-breadcrumbs-text-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-text-multiline); + --system-breadcrumbs-text-spacing-block-end-multiline: var(--spectrum-breadcrumbs-bottom-to-text-multiline); + --system-breadcrumbs-text-spacing-block-between-multiline: var(--spectrum-breadcrumbs-top-text-to-bottom-text); + --system-breadcrumbs-icon-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-separator-icon-multiline); + --system-breadcrumbs-icon-spacing-block-between-multiline: var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline); + --system-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text); + --system-breadcrumbs-inline-end: var(--spectrum-breadcrumbs-end-edge-to-text); + --system-breadcrumbs-action-button-spacing-inline: var(--spectrum-breadcrumbs-truncated-menu-to-separator-icon); + --system-breadcrumbs-action-button-spacing-block: var(--spectrum-breadcrumbs-top-to-truncated-menu); + --system-breadcrumbs-action-button-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); + --system-breadcrumbs-action-button-spacing-inline-start: var(--spectrum-breadcrumbs-start-edge-to-truncated-menu); + --system-breadcrumbs-action-button-spacing-block-multiline: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); + --system-breadcrumbs-action-button-spacing-block-between-multiline: var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text); + --system-breadcrumbs-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-breadcrumbs-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-breadcrumbs-item-link-border-radius: var(--spectrum-corner-radius-100); + --system-breadcrumbs-text-color: var(--spectrum-neutral-subdued-content-color-default); + --system-breadcrumbs-text-color-current: var(--spectrum-neutral-content-color-default); + --system-breadcrumbs-text-color-disabled: var(--spectrum-disabled-content-color); + --system-breadcrumbs-separator-color: var(--spectrum-neutral-content-color-default); + --system-breadcrumbs-action-button-color: var(--spectrum-neutral-subdued-content-color-default); + --system-breadcrumbs-action-button-color-disabled: var(--spectrum-disabled-content-color); + --system-breadcrumbs-focus-indicator-color: var(--spectrum-focus-indicator-color); +} diff --git a/tokens/dist/css/components/spectrum/button.css b/tokens/dist/css/components/spectrum/button.css new file mode 100644 index 00000000000..b24c710e1f8 --- /dev/null +++ b/tokens/dist/css/components/spectrum/button.css @@ -0,0 +1,382 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-button-animation-duration: var(--spectrum-animation-duration-100); + --system-button-border-radius: var(--spectrum-corner-radius-100); + --system-button-border-width: var(--spectrum-border-width-200); + --system-button-line-height: 1.2; + --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-button-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); + --system-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-50); + --system-button-background-color-default: var(--spectrum-gray-75); + --system-button-background-color-hover: var(--spectrum-gray-200); + --system-button-background-color-down: var(--spectrum-gray-300); + --system-button-background-color-focus: var(--spectrum-gray-200); + --system-button-border-color-default: var(--spectrum-gray-400); + --system-button-border-color-hover: var(--spectrum-gray-500); + --system-button-border-color-down: var(--spectrum-gray-600); + --system-button-border-color-focus: var(--spectrum-gray-500); + --system-button-content-color-default: var(--spectrum-neutral-content-color-default); + --system-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-button-content-color-down: var(--spectrum-neutral-content-color-down); + --system-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-button-background-color-disabled: transparent; + --system-button-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-accent-background-color-default: var(--spectrum-accent-background-color-default); + --system-button-accent-background-color-hover: var(--spectrum-accent-background-color-hover); + --system-button-accent-background-color-down: var(--spectrum-accent-background-color-down); + --system-button-accent-background-color-focus: var(--spectrum-accent-background-color-key-focus); + --system-button-accent-border-color-default: transparent; + --system-button-accent-border-color-hover: transparent; + --system-button-accent-border-color-down: transparent; + --system-button-accent-border-color-focus: transparent; + --system-button-accent-content-color-default: var(--spectrum-white); + --system-button-accent-content-color-hover: var(--spectrum-white); + --system-button-accent-content-color-down: var(--spectrum-white); + --system-button-accent-content-color-focus: var(--spectrum-white); + --system-button-accent-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-accent-border-color-disabled: transparent; + --system-button-accent-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-accent-outline-background-color-default: transparent; + --system-button-accent-outline-background-color-hover: var(--spectrum-accent-color-200); + --system-button-accent-outline-background-color-down: var(--spectrum-accent-color-300); + --system-button-accent-outline-background-color-focus: var(--spectrum-accent-color-200); + --system-button-accent-outline-border-color-default: var(--spectrum-accent-color-900); + --system-button-accent-outline-border-color-hover: var(--spectrum-accent-color-1000); + --system-button-accent-outline-border-color-down: var(--spectrum-accent-color-1100); + --system-button-accent-outline-border-color-focus: var(--spectrum-accent-color-1000); + --system-button-accent-outline-content-color-default: var(--spectrum-accent-content-color-default); + --system-button-accent-outline-content-color-hover: var(--spectrum-accent-content-color-hover); + --system-button-accent-outline-content-color-down: var(--spectrum-accent-content-color-down); + --system-button-accent-outline-content-color-focus: var(--spectrum-accent-content-color-key-focus); + --system-button-accent-outline-background-color-disabled: transparent; + --system-button-accent-outline-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-accent-outline-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-negative-background-color-default: var(--spectrum-negative-background-color-default); + --system-button-negative-background-color-hover: var(--spectrum-negative-background-color-hover); + --system-button-negative-background-color-down: var(--spectrum-negative-background-color-down); + --system-button-negative-background-color-focus: var(--spectrum-negative-background-color-key-focus); + --system-button-negative-border-color-default: transparent; + --system-button-negative-border-color-hover: transparent; + --system-button-negative-border-color-down: transparent; + --system-button-negative-border-color-focus: transparent; + --system-button-negative-content-color-default: var(--spectrum-white); + --system-button-negative-content-color-hover: var(--spectrum-white); + --system-button-negative-content-color-down: var(--spectrum-white); + --system-button-negative-content-color-focus: var(--spectrum-white); + --system-button-negative-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-negative-border-color-disabled: transparent; + --system-button-negative-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-negative-outline-background-color-default: transparent; + --system-button-negative-outline-background-color-hover: var(--spectrum-negative-color-200); + --system-button-negative-outline-background-color-down: var(--spectrum-negative-color-300); + --system-button-negative-outline-background-color-focus: var(--spectrum-negative-color-200); + --system-button-negative-outline-border-color-default: var(--spectrum-negative-color-900); + --system-button-negative-outline-border-color-hover: var(--spectrum-negative-color-1000); + --system-button-negative-outline-border-color-down: var(--spectrum-negative-color-1100); + --system-button-negative-outline-border-color-focus: var(--spectrum-negative-color-1000); + --system-button-negative-outline-content-color-default: var(--spectrum-negative-content-color-default); + --system-button-negative-outline-content-color-hover: var(--spectrum-negative-content-color-hover); + --system-button-negative-outline-content-color-down: var(--spectrum-negative-content-color-down); + --system-button-negative-outline-content-color-focus: var(--spectrum-negative-content-color-key-focus); + --system-button-negative-outline-background-color-disabled: transparent; + --system-button-negative-outline-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-negative-outline-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-primary-background-color-default: var(--spectrum-neutral-background-color-default); + --system-button-primary-background-color-hover: var(--spectrum-neutral-background-color-hover); + --system-button-primary-background-color-down: var(--spectrum-neutral-background-color-down); + --system-button-primary-background-color-focus: var(--spectrum-neutral-background-color-key-focus); + --system-button-primary-border-color-default: transparent; + --system-button-primary-border-color-hover: transparent; + --system-button-primary-border-color-down: transparent; + --system-button-primary-border-color-focus: transparent; + --system-button-primary-content-color-default: var(--spectrum-white); + --system-button-primary-content-color-hover: var(--spectrum-white); + --system-button-primary-content-color-down: var(--spectrum-white); + --system-button-primary-content-color-focus: var(--spectrum-white); + --system-button-primary-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-primary-border-color-disabled: transparent; + --system-button-primary-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-primary-outline-background-color-default: transparent; + --system-button-primary-outline-background-color-hover: var(--spectrum-gray-300); + --system-button-primary-outline-background-color-down: var(--spectrum-gray-400); + --system-button-primary-outline-background-color-focus: var(--spectrum-gray-300); + --system-button-primary-outline-border-color-default: var(--spectrum-gray-800); + --system-button-primary-outline-border-color-hover: var(--spectrum-gray-900); + --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); + --system-button-primary-outline-border-color-focus: var(--spectrum-gray-900); + --system-button-primary-outline-content-color-default: var(--spectrum-neutral-content-color-default); + --system-button-primary-outline-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-button-primary-outline-content-color-down: var(--spectrum-neutral-content-color-down); + --system-button-primary-outline-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-button-primary-outline-background-color-disabled: transparent; + --system-button-primary-outline-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-primary-outline-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-secondary-background-color-default: var(--spectrum-gray-200); + --system-button-secondary-background-color-hover: var(--spectrum-gray-300); + --system-button-secondary-background-color-down: var(--spectrum-gray-400); + --system-button-secondary-background-color-focus: var(--spectrum-gray-300); + --system-button-secondary-border-color-default: transparent; + --system-button-secondary-border-color-hover: transparent; + --system-button-secondary-border-color-down: transparent; + --system-button-secondary-border-color-focus: transparent; + --system-button-secondary-content-color-default: var(--spectrum-neutral-content-color-default); + --system-button-secondary-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-button-secondary-content-color-down: var(--spectrum-neutral-content-color-down); + --system-button-secondary-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-button-secondary-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-secondary-border-color-disabled: transparent; + --system-button-secondary-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-secondary-outline-background-color-default: transparent; + --system-button-secondary-outline-background-color-hover: var(--spectrum-gray-300); + --system-button-secondary-outline-background-color-down: var(--spectrum-gray-400); + --system-button-secondary-outline-background-color-focus: var(--spectrum-gray-300); + --system-button-secondary-outline-border-color-default: var(--spectrum-gray-300); + --system-button-secondary-outline-border-color-hover: var(--spectrum-gray-400); + --system-button-secondary-outline-border-color-down: var(--spectrum-gray-500); + --system-button-secondary-outline-border-color-focus: var(--spectrum-gray-400); + --system-button-secondary-outline-content-color-default: var(--spectrum-neutral-content-color-default); + --system-button-secondary-outline-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-button-secondary-outline-content-color-down: var(--spectrum-neutral-content-color-down); + --system-button-secondary-outline-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-button-secondary-outline-background-color-disabled: transparent; + --system-button-secondary-outline-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-secondary-outline-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-quiet-background-color-default: transparent; + --system-button-quiet-background-color-hover: var(--spectrum-gray-100); + --system-button-quiet-background-color-down: var(--spectrum-gray-200); + --system-button-quiet-background-color-focus: var(--spectrum-gray-100); + --system-button-quiet-border-color-default: transparent; + --system-button-quiet-border-color-hover: transparent; + --system-button-quiet-border-color-down: transparent; + --system-button-quiet-border-color-focus: transparent; + --system-button-quiet-background-color-disabled: transparent; + --system-button-quiet-border-color-disabled: transparent; + --system-button-selected-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --system-button-selected-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); + --system-button-selected-background-color-down: var(--spectrum-neutral-subdued-background-color-down); + --system-button-selected-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); + --system-button-selected-border-color-default: transparent; + --system-button-selected-border-color-hover: transparent; + --system-button-selected-border-color-down: transparent; + --system-button-selected-border-color-focus: transparent; + --system-button-selected-content-color-default: var(--spectrum-white); + --system-button-selected-content-color-hover: var(--spectrum-white); + --system-button-selected-content-color-down: var(--spectrum-white); + --system-button-selected-content-color-focus: var(--spectrum-white); + --system-button-selected-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-selected-border-color-disabled: transparent; + --system-button-selected-emphasized-background-color-default: var(--spectrum-accent-background-color-default); + --system-button-selected-emphasized-background-color-hover: var(--spectrum-accent-background-color-hover); + --system-button-selected-emphasized-background-color-down: var(--spectrum-accent-background-color-down); + --system-button-selected-emphasized-background-color-focus: var(--spectrum-accent-background-color-key-focus); + --system-button-static-black-quiet-border-color-default: transparent; + --system-button-static-white-quiet-border-color-default: transparent; + --system-button-static-black-quiet-border-color-hover: transparent; + --system-button-static-white-quiet-border-color-hover: transparent; + --system-button-static-black-quiet-border-color-down: transparent; + --system-button-static-white-quiet-border-color-down: transparent; + --system-button-static-black-quiet-border-color-focus: transparent; + --system-button-static-white-quiet-border-color-focus: transparent; + --system-button-static-black-quiet-border-color-disabled: transparent; + --system-button-static-white-quiet-border-color-disabled: transparent; + --system-button-static-white-background-color-default: var(--spectrum-transparent-white-800); + --system-button-static-white-background-color-hover: var(--spectrum-transparent-white-900); + --system-button-static-white-background-color-down: var(--spectrum-transparent-white-900); + --system-button-static-white-background-color-focus: var(--spectrum-transparent-white-900); + --system-button-static-white-border-color-default: transparent; + --system-button-static-white-border-color-hover: transparent; + --system-button-static-white-border-color-down: transparent; + --system-button-static-white-border-color-focus: transparent; + --system-button-static-white-content-color-default: var(--spectrum-black); + --system-button-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-button-static-white-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --system-button-static-white-border-color-disabled: transparent; + --system-button-static-white-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-button-static-white-outline-background-color-default: transparent; + --system-button-static-white-outline-background-color-hover: var(--spectrum-transparent-white-300); + --system-button-static-white-outline-background-color-down: var(--spectrum-transparent-white-400); + --system-button-static-white-outline-background-color-focus: var(--spectrum-transparent-white-300); + --system-button-static-white-outline-border-color-default: var(--spectrum-transparent-white-800); + --system-button-static-white-outline-border-color-hover: var(--spectrum-transparent-white-900); + --system-button-static-white-outline-border-color-down: var(--spectrum-transparent-white-900); + --system-button-static-white-outline-border-color-focus: var(--spectrum-transparent-white-900); + --system-button-static-white-outline-content-color-default: var(--spectrum-white); + --system-button-static-white-outline-content-color-hover: var(--spectrum-white); + --system-button-static-white-outline-content-color-down: var(--spectrum-white); + --system-button-static-white-outline-content-color-focus: var(--spectrum-white); + --system-button-static-white-outline-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-button-static-white-outline-background-color-disabled: transparent; + --system-button-static-white-outline-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --system-button-static-white-outline-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-button-static-white-selected-background-color-default: var(--spectrum-transparent-white-800); + --system-button-static-white-selected-background-color-hover: var(--spectrum-transparent-white-900); + --system-button-static-white-selected-background-color-down: var(--spectrum-transparent-white-900); + --system-button-static-white-selected-background-color-focus: var(--spectrum-transparent-white-900); + --system-button-static-white-selected-static-white-content-color-default: var(--spectrum-black); + --system-button-static-white-selected-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-selected-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-selected-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-selected-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --system-button-static-white-selected-border-color-disabled: transparent; + --system-button-static-white-secondary-background-color-default: var(--spectrum-transparent-white-200); + --system-button-static-white-secondary-background-color-hover: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-background-color-down: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-background-color-focus: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-border-color-default: transparent; + --system-button-static-white-secondary-border-color-hover: transparent; + --system-button-static-white-secondary-border-color-down: transparent; + --system-button-static-white-secondary-border-color-focus: transparent; + --system-button-static-white-secondary-content-color-default: var(--spectrum-white); + --system-button-static-white-secondary-content-color-hover: var(--spectrum-white); + --system-button-static-white-secondary-content-color-down: var(--spectrum-white); + --system-button-static-white-secondary-content-color-focus: var(--spectrum-white); + --system-button-static-white-secondary-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-button-static-white-secondary-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --system-button-static-white-secondary-border-color-disabled: transparent; + --system-button-static-white-secondary-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-button-static-white-secondary-outline-background-color-default: transparent; + --system-button-static-white-secondary-outline-background-color-hover: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-outline-background-color-down: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-outline-background-color-focus: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-outline-border-color-default: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-outline-border-color-hover: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-outline-border-color-down: var(--spectrum-transparent-white-500); + --system-button-static-white-secondary-outline-border-color-focus: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-outline-content-color-default: var(--spectrum-white); + --system-button-static-white-secondary-outline-content-color-hover: var(--spectrum-white); + --system-button-static-white-secondary-outline-content-color-down: var(--spectrum-white); + --system-button-static-white-secondary-outline-content-color-focus: var(--spectrum-white); + --system-button-static-white-secondary-outline-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-button-static-white-secondary-outline-background-color-disabled: transparent; + --system-button-static-white-secondary-outline-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --system-button-static-white-secondary-outline-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-button-static-black-background-color-default: var(--spectrum-transparent-black-800); + --system-button-static-black-background-color-hover: var(--spectrum-transparent-black-900); + --system-button-static-black-background-color-down: var(--spectrum-transparent-black-900); + --system-button-static-black-background-color-focus: var(--spectrum-transparent-black-900); + --system-button-static-black-border-color-default: transparent; + --system-button-static-black-border-color-hover: transparent; + --system-button-static-black-border-color-down: transparent; + --system-button-static-black-border-color-focus: transparent; + --system-button-static-black-content-color-default: var(--spectrum-white); + --system-button-static-black-content-color-hover: var(--spectrum-white); + --system-button-static-black-content-color-down: var(--spectrum-white); + --system-button-static-black-content-color-focus: var(--spectrum-white); + --system-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-button-static-black-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --system-button-static-black-border-color-disabled: transparent; + --system-button-static-black-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-button-static-black-outline-background-color-default: transparent; + --system-button-static-black-outline-background-color-hover: var(--spectrum-transparent-black-300); + --system-button-static-black-outline-background-color-down: var(--spectrum-transparent-black-400); + --system-button-static-black-outline-background-color-focus: var(--spectrum-transparent-black-300); + --system-button-static-black-outline-border-color-default: var(--spectrum-transparent-black-400); + --system-button-static-black-outline-border-color-hover: var(--spectrum-transparent-black-500); + --system-button-static-black-outline-border-color-down: var(--spectrum-transparent-black-600); + --system-button-static-black-outline-border-color-focus: var(--spectrum-transparent-black-500); + --system-button-static-black-outline-content-color-default: var(--spectrum-black); + --system-button-static-black-outline-content-color-hover: var(--spectrum-black); + --system-button-static-black-outline-content-color-down: var(--spectrum-black); + --system-button-static-black-outline-content-color-focus: var(--spectrum-black); + --system-button-static-black-outline-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-button-static-black-outline-background-color-disabled: transparent; + --system-button-static-black-outline-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --system-button-static-black-outline-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-button-static-black-secondary-background-color-default: var(--spectrum-transparent-black-200); + --system-button-static-black-secondary-background-color-hover: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-background-color-down: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-background-color-focus: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-border-color-default: transparent; + --system-button-static-black-secondary-border-color-hover: transparent; + --system-button-static-black-secondary-border-color-down: transparent; + --system-button-static-black-secondary-border-color-focus: transparent; + --system-button-static-black-secondary-content-color-default: var(--spectrum-black); + --system-button-static-black-secondary-content-color-hover: var(--spectrum-black); + --system-button-static-black-secondary-content-color-down: var(--spectrum-black); + --system-button-static-black-secondary-content-color-focus: var(--spectrum-black); + --system-button-static-black-secondary-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-button-static-black-secondary-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --system-button-static-black-secondary-border-color-disabled: transparent; + --system-button-static-black-secondary-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-button-static-black-secondary-outline-background-color-default: transparent; + --system-button-static-black-secondary-outline-background-color-hover: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-outline-background-color-down: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-outline-background-color-focus: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-outline-border-color-default: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-outline-border-color-hover: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-outline-border-color-down: var(--spectrum-transparent-black-500); + --system-button-static-black-secondary-outline-border-color-focus: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-outline-content-color-default: var(--spectrum-black); + --system-button-static-black-secondary-outline-content-color-hover: var(--spectrum-black); + --system-button-static-black-secondary-outline-content-color-down: var(--spectrum-black); + --system-button-static-black-secondary-outline-content-color-focus: var(--spectrum-black); + --system-button-static-black-secondary-outline-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-button-static-black-secondary-outline-background-color-disabled: transparent; + --system-button-static-black-secondary-outline-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --system-button-static-black-secondary-outline-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-button-size-s-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-s-border-radius: var(--spectrum-component-pill-edge-to-text-75); + --system-button-size-s-height: var(--spectrum-component-height-75); + --system-button-size-s-font-size: var(--spectrum-font-size-75); + --system-button-size-s-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--system-button-border-width)); + --system-button-size-s-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75); + --system-button-size-s-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--system-button-border-width)); + --system-button-size-s-padding-label-to-icon: var(--spectrum-text-to-visual-75); + --system-button-size-s-top-to-text: var(--spectrum-button-top-to-text-small); + --system-button-size-s-bottom-to-text: var(--spectrum-button-bottom-to-text-small); + --system-button-size-s-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75); + --system-button-size-s-intended-icon-size: var(--spectrum-workflow-icon-size-75); + --system-button-size-m-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-m-border-radius: var(--spectrum-component-pill-edge-to-text-100); + --system-button-size-m-height: var(--spectrum-component-height-100); + --system-button-size-m-font-size: var(--spectrum-font-size-100); + --system-button-size-m-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--system-button-border-width)); + --system-button-size-m-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100); + --system-button-size-m-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--system-button-border-width)); + --system-button-size-m-padding-label-to-icon: var(--spectrum-text-to-visual-100); + --system-button-size-m-top-to-text: var(--spectrum-button-top-to-text-medium); + --system-button-size-m-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); + --system-button-size-m-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); + --system-button-size-m-intended-icon-size: var(--spectrum-workflow-icon-size-100); + --system-button-size-l-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-l-border-radius: var(--spectrum-component-pill-edge-to-text-200); + --system-button-size-l-height: var(--spectrum-component-height-200); + --system-button-size-l-font-size: var(--spectrum-font-size-200); + --system-button-size-l-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--system-button-border-width)); + --system-button-size-l-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200); + --system-button-size-l-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--system-button-border-width)); + --system-button-size-l-padding-label-to-icon: var(--spectrum-text-to-visual-200); + --system-button-size-l-top-to-text: var(--spectrum-button-top-to-text-large); + --system-button-size-l-bottom-to-text: var(--spectrum-button-bottom-to-text-large); + --system-button-size-l-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200); + --system-button-size-l-intended-icon-size: var(--spectrum-workflow-icon-size-200); + --system-button-size-xl-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-xl-border-radius: var(--spectrum-component-pill-edge-to-text-300); + --system-button-size-xl-height: var(--spectrum-component-height-300); + --system-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-button-size-xl-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--system-button-border-width)); + --system-button-size-xl-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300); + --system-button-size-xl-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--system-button-border-width)); + --system-button-size-xl-padding-label-to-icon: var(--spectrum-text-to-visual-300); + --system-button-size-xl-top-to-text: var(--spectrum-button-top-to-text-extra-large); + --system-button-size-xl-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large); + --system-button-size-xl-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300); + --system-button-size-xl-intended-icon-size: var(--spectrum-workflow-icon-size-300); +} diff --git a/tokens/dist/css/components/spectrum/buttongroup.css b/tokens/dist/css/components/spectrum/buttongroup.css new file mode 100644 index 00000000000..5496637f625 --- /dev/null +++ b/tokens/dist/css/components/spectrum/buttongroup.css @@ -0,0 +1,25 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-s-spacing-horizontal: var(--spectrum-spacing-200); + --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200); + --system-button-group-size-m-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-l-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-size-l-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-xl-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300); +} diff --git a/tokens/dist/css/components/spectrum/calendar.css b/tokens/dist/css/components/spectrum/calendar.css new file mode 100644 index 00000000000..3a82f852269 --- /dev/null +++ b/tokens/dist/css/components/spectrum/calendar.css @@ -0,0 +1,45 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-calendar-day-width: var(--spectrum-component-height-100); + --system-calendar-day-height: var(--spectrum-component-height-100); + --system-calendar-border-radius-reset: 0; + --system-calendar-border-width-reset: 0; + --system-calendar-day-border-size: var(--spectrum-border-width-200); + --system-calendar-margin-y: 24px; + --system-calendar-margin-x: 32px; + --system-calendar-day-padding: 4px; + --system-calendar-width: calc((var(--system-calendar-day-width) + var(--system-calendar-day-padding) * 2) * 7); + --system-calendar-title-text-letter-spacing: 0.06em; + --system-calendar-title-height: 32px; + --system-calendar-title-text-size: var(--spectrum-font-size-300); + --system-calendar-day-title-text-font-weight: var(--spectrum-bold-font-weight); + --system-calendar-day-title-text-color: var(--spectrum-gray-700); + --system-calendar-day-title-text-size: var(--spectrum-font-size-50); + --system-calendar-day-text-size-han: var(--spectrum-font-size-50); + --system-calendar-day-text-size: var(--spectrum-font-size-100); + --system-calendar-day-text-color-selected: var(--spectrum-gray-900); + --system-calendar-day-text-color-hover: var(--spectrum-gray-900); + --system-calendar-day-text-color-cap-selected: var(--spectrum-gray-900); + --system-calendar-day-text-font-weight-selected: var(--spectrum-bold-font-weight); + --system-calendar-day-text-font-weight-cap-selected: var(--spectrum-bold-font-weight); + --system-calendar-day-today-text-color: var(--spectrum-gray-800); + --system-calendar-day-today-text-font-weight: var(--spectrum-bold-font-weight); + --system-calendar-day-today-border-color: var(--spectrum-gray-800); + --system-calendar-day-today-text-color-disabled: var(--spectrum-gray-500); + --system-calendar-day-today-border-color-disabled: var(--spectrum-gray-400); + --system-calendar-day-text-color-disabled: var(--spectrum-disabled-content-color); + --system-calendar-day-text-color-key-focus: var(--spectrum-gray-900); + --system-calendar-button-icon-color: var(--spectrum-gray-700); +} diff --git a/tokens/dist/css/components/spectrum/card.css b/tokens/dist/css/components/spectrum/card.css new file mode 100644 index 00000000000..d3c33daa493 --- /dev/null +++ b/tokens/dist/css/components/spectrum/card.css @@ -0,0 +1,63 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-card-background-color: var(--spectrum-background-layer-2-color); + --system-card-body-spacing: var(--spectrum-spacing-400); + --system-card-title-padding-top: var(--spectrum-spacing-300); + --system-card-title-padding-right: var(--spectrum-spacing-400); + --system-card-content-margin-top: var(--spectrum-spacing-100); + --system-card-content-margin-bottom: var(--spectrum-spacing-300); + --system-card-footer-padding-top: var(--spectrum-spacing-100); + --system-card-subtitle-padding-right: var(--spectrum-spacing-100); + --system-card-border-width: var(--spectrum-border-width-100); + --system-card-corner-radius: var(--spectrum-corner-radius-100); + --system-card-border-color: var(--spectrum-gray-200); + --system-card-border-color-hover: var(--spectrum-gray-300); + --system-card-border-color-selected: var(--spectrum-blue-700); + --system-card-divider-color: var(--spectrum-gray-300); + --system-card-title-font-family: var(--spectrum-sans-font-family-stack); + --system-card-title-font-size: var(--spectrum-heading-size-xxs); + --system-card-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-card-title-font-style: var(--spectrum-heading-sans-serif-font-style); + --system-card-title-line-height: var(--spectrum-heading-line-height); + --system-card-title-font-color: var(--spectrum-heading-color); + --system-card-body-font-family: var(--spectrum-sans-font-family-stack); + --system-card-body-font-size: var(--spectrum-body-size-s); + --system-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-card-body-font-style: var(--spectrum-body-sans-serif-font-style); + --system-card-body-line-height: var(--spectrum-body-line-height); + --system-card-body-font-color: var(--spectrum-body-color); + --system-card-actions-spacing: var(--spectrum-spacing-300); + --system-card-actions-size: var(--spectrum-card-selection-background-size); + --system-card-actions-border-radius: var(--spectrum-corner-radius-100); + --system-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); + --system-card-actions-background-color-opacity: var(--spectrum-card-selection-background-color-opacity); + --system-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); + --system-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); + --system-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-card-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-card-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --system-card-selected-background-opacity: 0.1; + --system-card-preview-border-width-selected: var(--spectrum-border-width-100); + --system-card-preview-background-color: var(--spectrum-background-base-color); + --system-card-preview-background-color-hover: var(--spectrum-gray-300); + --system-card-horizontal-body-padding: var(--spectrum-spacing-300); + --system-card-horizontal-preview-padding: var(--spectrum-spacing-200); + --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); + --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); + --system-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); + --system-card-dark-selected-background-color-rgb: var(--spectrum-blue-500-rgb); + --system-card-darkest-selected-background-color-rgb: var(--spectrum-blue-600-rgb); +} diff --git a/tokens/dist/css/components/spectrum/checkbox.css b/tokens/dist/css/components/spectrum/checkbox.css new file mode 100644 index 00000000000..0c1fa3b6d8e --- /dev/null +++ b/tokens/dist/css/components/spectrum/checkbox.css @@ -0,0 +1,71 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-checkbox-control-color-default: var(--spectrum-gray-600); + --system-checkbox-control-color-hover: var(--spectrum-gray-700); + --system-checkbox-control-color-down: var(--spectrum-gray-800); + --system-checkbox-control-color-focus: var(--spectrum-gray-700); + --system-checkbox-content-color-default: var(--spectrum-neutral-content-color-default); + --system-checkbox-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-checkbox-content-color-down: var(--spectrum-neutral-content-color-down); + --system-checkbox-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-checkbox-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-checkbox-content-color-disabled: var(--spectrum-disabled-content-color); + --system-checkbox-control-color-disabled: var(--spectrum-disabled-content-color); + --system-checkbox-checkmark-color: var(--spectrum-gray-75); + --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); + --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); + --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); + --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); + --system-checkbox-emphasized-color-default: var(--spectrum-accent-color-900); + --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); + --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); + --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); + --system-checkbox-control-selected-color-default: var(--spectrum-neutral-background-color-selected-default); + --system-checkbox-control-selected-color-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-checkbox-control-selected-color-down: var(--spectrum-neutral-background-color-selected-down); + --system-checkbox-control-selected-color-focus: var(--spectrum-neutral-background-color-selected-key-focus); + --system-checkbox-line-height: var(--spectrum-line-height-100); + --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); + --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-checkbox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-checkbox-border-width: var(--spectrum-border-width-200); + --system-checkbox-animation-duration: var(--spectrum-animation-duration-100); + --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); + --system-checkbox-size-s-height: var(--spectrum-component-height-75); + --system-checkbox-size-s-control-size: var(--spectrum-checkbox-control-size-small); + --system-checkbox-size-s-top-to-text: var(--spectrum-component-top-to-text-75); + --system-checkbox-size-s-text-to-control: var(--spectrum-text-to-control-75); + --system-checkbox-font-size: var(--spectrum-font-size-100); + --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); + --system-checkbox-height: var(--spectrum-component-height-100); + --system-checkbox-size-m-height: var(--spectrum-component-height-100); + --system-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); + --system-checkbox-size-m-control-size: var(--spectrum-checkbox-control-size-medium); + --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); + --system-checkbox-size-m-top-to-text: var(--spectrum-component-top-to-text-100); + --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); + --system-checkbox-size-m-text-to-control: var(--spectrum-text-to-control-100); + --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); + --system-checkbox-size-l-height: var(--spectrum-component-height-200); + --system-checkbox-size-l-control-size: var(--spectrum-checkbox-control-size-large); + --system-checkbox-size-l-top-to-text: var(--spectrum-component-top-to-text-200); + --system-checkbox-size-l-text-to-control: var(--spectrum-text-to-control-200); + --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); + --system-checkbox-size-xl-height: var(--spectrum-component-height-300); + --system-checkbox-size-xl-control-size: var(--spectrum-checkbox-control-size-extra-large); + --system-checkbox-size-xl-top-to-text: var(--spectrum-component-top-to-text-300); + --system-checkbox-size-xl-text-to-control: var(--spectrum-text-to-control-300); +} diff --git a/tokens/dist/css/components/spectrum/clearbutton.css b/tokens/dist/css/components/spectrum/clearbutton.css new file mode 100644 index 00000000000..0440d7c6295 --- /dev/null +++ b/tokens/dist/css/components/spectrum/clearbutton.css @@ -0,0 +1,48 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-clear-button-background-color: transparent; + --system-clear-button-background-color-hover: transparent; + --system-clear-button-background-color-down: transparent; + --system-clear-button-background-color-key-focus: transparent; + --system-clear-button-height: var(--spectrum-component-height-100); + --system-clear-button-width: var(--spectrum-component-height-100); + --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-clear-button-icon-color: var(--spectrum-neutral-content-color-default); + --system-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-clear-button-size-s-height: var(--spectrum-component-height-75); + --system-clear-button-size-s-width: var(--spectrum-component-height-75); + --system-clear-button-size-l-height: var(--spectrum-component-height-200); + --system-clear-button-size-l-width: var(--spectrum-component-height-200); + --system-clear-button-size-xl-height: var(--spectrum-component-height-300); + --system-clear-button-size-xl-width: var(--spectrum-component-height-300); + --system-clear-button-quiet-background-color: var(--spectrum-clear-button-background-color-quiet, transparent); + --system-clear-button-quiet-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent); + --system-clear-button-quiet-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent); + --system-clear-button-quiet-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent); + --system-clear-button-over-background-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white)); + --system-clear-button-over-background-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white)); + --system-clear-button-over-background-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white)); + --system-clear-button-over-background-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white)); + --system-clear-button-over-background-background-color: var(--spectrum-clear-button-background-color-over-background, transparent); + --system-clear-button-over-background-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); + --system-clear-button-over-background-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); + --system-clear-button-over-background-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); + --system-clear-button-disabled-icon-color: var(--spectrum-disabled-content-color); + --system-clear-button-disabled-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); + --system-clear-button-disabled-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); + --system-clear-button-disabled-background-color: transparent; +} diff --git a/tokens/dist/css/components/spectrum/closebutton.css b/tokens/dist/css/components/spectrum/closebutton.css new file mode 100644 index 00000000000..769feaf7f63 --- /dev/null +++ b/tokens/dist/css/components/spectrum/closebutton.css @@ -0,0 +1,47 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-close-button-background-color-default: transparent; + --system-close-button-background-color-hover: var(--spectrum-gray-200); + --system-close-button-background-color-down: var(--spectrum-gray-300); + --system-close-button-background-color-focus: var(--spectrum-gray-200); + --system-close-button-icon-color-default: var(--spectrum-neutral-content-color-default); + --system-close-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-close-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-close-button-icon-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-close-button-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-close-button-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-close-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-close-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-close-button-animation-duration: var(--spectrum-animation-duration-100); + --system-close-button-size-s-size: var(--spectrum-component-height-75); + --system-close-button-size: var(--spectrum-component-height-100); + --system-close-button-size-m-size: var(--spectrum-component-height-100); + --system-close-button-size-l-size: var(--spectrum-component-height-200); + --system-close-button-size-xl-size: var(--spectrum-component-height-300); + --system-close-button-static-white-static-background-color-default: transparent; + --system-close-button-static-white-static-background-color-hover: var(--spectrum-transparent-white-300); + --system-close-button-static-white-static-background-color-down: var(--spectrum-transparent-white-400); + --system-close-button-static-white-static-background-color-focus: var(--spectrum-transparent-white-300); + --system-close-button-static-white-icon-color-default: var(--spectrum-white); + --system-close-button-static-white-icon-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-close-button-static-white-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-close-button-static-black-static-background-color-default: transparent; + --system-close-button-static-black-static-background-color-hover: var(--spectrum-transparent-black-300); + --system-close-button-static-black-static-background-color-down: var(--spectrum-transparent-black-400); + --system-close-button-static-black-static-background-color-focus: var(--spectrum-transparent-black-300); + --system-close-button-static-black-icon-color-default: var(--spectrum-black); + --system-close-button-static-black-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-close-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); +} diff --git a/tokens/dist/css/components/spectrum/coachindicator.css b/tokens/dist/css/components/spectrum/coachindicator.css new file mode 100644 index 00000000000..9a2fca01828 --- /dev/null +++ b/tokens/dist/css/components/spectrum/coachindicator.css @@ -0,0 +1,42 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); + --system-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); + --system-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); + --system-coach-indicator-inline-size: var(--system-coach-indicator-min-inline-size); + --system-coach-indicator-block-size: var(--system-coach-indicator-min-block-size); + --system-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter); + --system-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter); + --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); + --system-coach-indicator-ring-light-color: var(--spectrum-gray-50); + --system-coach-indicator-top: calc(var(--system-coach-indicator-block-size) / 3 - var(--system-coach-indicator-ring-border-size)); + --system-coach-indicator-left: calc(var(--system-coach-indicator-inline-size) / 3 - var(--system-coach-indicator-ring-border-size)); + --system-coach-indicator-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000); + --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; + --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; + --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; + --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; + --system-coach-indicator-animation-name: pulse; + --system-coach-indicator-inner-animation-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple); + --system-coach-indicator-animation-keyframe-0-scale: 1; + --system-coach-indicator-animation-keyframe-0-opacity: 0; + --system-coach-indicator-animation-keyframe-50-scale: 1.5; + --system-coach-indicator-animation-keyframe-50-opacity: 1; + --system-coach-indicator-animation-keyframe-100-scale: 2; + --system-coach-indicator-animation-keyframe-100-opacity: 0; + --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; + --system-coach-indicator-quiet-quiet-ring-diameter-size: var(--spectrum-coach-indicator-quiet-ring-diameter); + --system-coach-indicator-quiet-animation-name: pulse-quiet; +} diff --git a/tokens/dist/css/components/spectrum/coachmark.css b/tokens/dist/css/components/spectrum/coachmark.css new file mode 100644 index 00000000000..cfccca55991 --- /dev/null +++ b/tokens/dist/css/components/spectrum/coachmark.css @@ -0,0 +1,46 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); + --system-coach-mark-width: var(--spectrum-coach-mark-width); + --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); + --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); + --system-coach-mark-media-min-height: var(--spectrum-coach-mark-media-minimum-height); + --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); + --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); + --system-coach-mark-header-to-body: var(--spectrum-spacing-200); + --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); + --system-coach-mark-title-color: var(--spectrum-heading-color); + --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-title-font-style: var(--spectrum-heading-serif-font-style); + --system-coach-mark-title-text-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); + --system-coach-mark-title-text-line-height: var(--spectrum-heading-line-height); + --system-coach-mark-content-font-color: var(--spectrum-body-color); + --system-coach-mark-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-content-font-style: var(--spectrum-body-sans-serif-font-style); + --system-coach-mark-content-line-height: var(--spectrum-body-line-height); + --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); + --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); + --system-coach-mark-step-font-weight: var(--spectrum-body-medium-font-weight); + --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-step-font-style: var(--spectrum-body-sans-serif-font-style); + --system-coach-mark-step-line-height: var(--spectrum-body-line-height); + --system-coach-mark-step-font-size: var(--spectrum-coach-mark-pagination-body-size); + --system-coach-mark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge); + --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); + --system-coach-mark-popover-corner-radius: var(--spectrum-corner-radius-100); + --system-coach-mark-buttongroup-spacing-horizontal: var(--spectrum-spacing-100); +} diff --git a/tokens/dist/css/components/spectrum/colorarea.css b/tokens/dist/css/components/spectrum/colorarea.css new file mode 100644 index 00000000000..2a154b271fa --- /dev/null +++ b/tokens/dist/css/components/spectrum/colorarea.css @@ -0,0 +1,25 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-color-area-border-radius: var(--spectrum-color-area-border-rounding); + --system-color-area-border-color-rgb: 0, 0, 0; + --system-color-area-border-color-opacity: 0.1; + --system-color-area-border-color: rgba(var(--system-color-area-border-color-rgb), var(--system-color-area-border-color-opacity)); + --system-color-area-disabled-background-color: var(--spectrum-disabled-background-color); + --system-color-area-border-width: var(--spectrum-color-area-border-width); + --system-color-area-height: var(--spectrum-color-area-height); + --system-color-area-width: var(--spectrum-color-area-width); + --system-color-area-min-width: var(--spectrum-color-area-minimum-width); + --system-color-area-min-height: var(--spectrum-color-area-minimum-height); +} diff --git a/tokens/dist/css/components/spectrum/colorhandle.css b/tokens/dist/css/components/spectrum/colorhandle.css new file mode 100644 index 00000000000..f72d73b9e7b --- /dev/null +++ b/tokens/dist/css/components/spectrum/colorhandle.css @@ -0,0 +1,28 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-color-handle-size: var(--spectrum-color-handle-size); + --system-color-handle-focused-size: var(--spectrum-color-handle-size-key-focus); + --system-color-handle-hitarea-size: var(--spectrum-color-control-track-width); + --system-color-handle-animation-duration: var(--spectrum-animation-duration-100); + --system-color-handle-animation-easing: ease-in-out; + --system-color-handle-outer-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity)); + --system-color-handle-outer-border-width: var(--spectrum-color-handle-outer-border-width); + --system-color-handle-inner-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity)); + --system-color-handle-inner-border-width: var(--spectrum-color-handle-inner-border-width); + --system-color-handle-border-width: var(--spectrum-color-handle-border-width); + --system-color-handle-border-color: var(--spectrum-white); + --system-color-handle-border-color-disabled: var(--spectrum-disabled-content-color); + --system-color-handle-fill-color-disabled: var(--spectrum-disabled-background-color); +} diff --git a/tokens/dist/css/components/spectrum/colorloupe.css b/tokens/dist/css/components/spectrum/colorloupe.css new file mode 100644 index 00000000000..adbeb35e323 --- /dev/null +++ b/tokens/dist/css/components/spectrum/colorloupe.css @@ -0,0 +1,29 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-color-loupe-width: var(--spectrum-color-loupe-width); + --system-color-loupe-height: var(--spectrum-color-loupe-height); + --system-color-loupe-offset: var(--spectrum-color-loupe-bottom-to-color-handle); + --system-color-loupe-animation-distance: 8px; + --system-color-loupe-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-color-loupe-drop-shadow-y: var(--spectrum-color-loupe-drop-shadow-y); + --system-color-loupe-drop-shadow-blur: var(--spectrum-color-loupe-drop-shadow-blur); + --system-color-loupe-drop-shadow-color: var(--spectrum-color-loupe-drop-shadow-color); + --system-color-loupe-outer-border-width: var(--spectrum-color-loupe-outer-border-width); + --system-color-loupe-inner-border-width: var(--spectrum-color-loupe-inner-border-width); + --system-color-loupe-outer-border-color: var(--spectrum-color-loupe-outer-border); + --system-color-loupe-inner-border-color: var(--spectrum-color-loupe-inner-border); + --system-color-loupe-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark); + --system-color-loupe-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light); +} diff --git a/tokens/dist/css/components/spectrum/colorslider.css b/tokens/dist/css/components/spectrum/colorslider.css new file mode 100644 index 00000000000..e77fc2b0de5 --- /dev/null +++ b/tokens/dist/css/components/spectrum/colorslider.css @@ -0,0 +1,20 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-color-slider-handle-margin-block: var(--spectrum-component-top-to-text-75); + --system-color-slider-border-color-rgba: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity)); + --system-color-slider-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size); + --system-color-slider-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark); + --system-color-slider-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light); +} diff --git a/tokens/dist/css/components/spectrum/colorwheel.css b/tokens/dist/css/components/spectrum/colorwheel.css new file mode 100644 index 00000000000..60e1ba33539 --- /dev/null +++ b/tokens/dist/css/components/spectrum/colorwheel.css @@ -0,0 +1,24 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-color-wheel-width: var(--spectrum-color-wheel-width); + --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); + --system-color-wheel-height: var(--spectrum-color-wheel-width); + --system-color-wheel-border-color: var(--spectrum-transparent-black-200); + --system-color-wheel-border-width: var(--spectrum-border-width-100); + --system-color-wheel-fill-color-disabled: var(--spectrum-disabled-background-color); + --system-color-wheel-track-width: var(--spectrum-color-control-track-width); + --system-color-wheel-colorarea-margin: var(--spectrum-color-wheel-color-area-margin); + --system-color-wheel-colorhandle-position: calc(var(--system-color-wheel-width) / 2 - var(--system-color-wheel-track-width) / 2); +} diff --git a/tokens/dist/css/components/spectrum/combobox.css b/tokens/dist/css/components/spectrum/combobox.css new file mode 100644 index 00000000000..74d408cd551 --- /dev/null +++ b/tokens/dist/css/components/spectrum/combobox.css @@ -0,0 +1,98 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-combobox-border-color-default: var(--spectrum-gray-500); + --system-combobox-border-color-hover: var(--spectrum-gray-600); + --system-combobox-border-color-focus: var(--spectrum-gray-500); + --system-combobox-border-color-focus-hover: var(--spectrum-gray-600); + --system-combobox-border-color-key-focus: var(--spectrum-gray-600); + --system-combobox-inline-size: var(--spectrum-field-width); + --system-combobox-minimum-width-multiplier: var(--spectrum-combo-box-minimum-width-multiplier); + --system-combobox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-combobox-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-combobox-border-radius: var(--spectrum-corner-radius-100); + --system-combobox-border-width: var(--spectrum-border-width-100); + --system-combobox-spacing-label-to: var(--spectrum-field-label-to-component); + --system-combobox-font-style: var(--spectrum-default-font-style); + --system-combobox-line-height: var(--spectrum-line-height-100); + --system-combobox-border-color-invalid-default: var(--spectrum-negative-border-color-default); + --system-combobox-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); + --system-combobox-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); + --system-combobox-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); + --system-combobox-border-color-invalid-key-focus: var(--spectrum-negative-border-color-key-focus); + --system-combobox-size-s-block-size: var(--spectrum-component-height-75); + --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-combobox-size-s-font-size: var(--spectrum-font-size-75); + --system-combobox-size-s-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-small); + --system-combobox-size-s-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); + --system-combobox-size-s-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-small); + --system-combobox-size-s-spacing-edge-to-menu: var(--spectrum-component-to-menu-small); + --system-combobox-size-s-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75); + --system-combobox-size-s-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75); + --system-combobox-size-s-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-75); + --system-combobox-size-s-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-75); + --system-combobox-block-size: var(--spectrum-component-height-100); + --system-combobox-size-m-block-size: var(--spectrum-component-height-100); + --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-font-size: var(--spectrum-font-size-100); + --system-combobox-size-m-font-size: var(--spectrum-font-size-100); + --system-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); + --system-combobox-size-m-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); + --system-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); + --system-combobox-size-m-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); + --system-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); + --system-combobox-size-m-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); + --system-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); + --system-combobox-size-m-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); + --system-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); + --system-combobox-size-m-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); + --system-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --system-combobox-size-m-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --system-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-combobox-size-m-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-combobox-size-m-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-combobox-size-l-block-size: var(--spectrum-component-height-200); + --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-combobox-size-l-font-size: var(--spectrum-font-size-200); + --system-combobox-size-l-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-large); + --system-combobox-size-l-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); + --system-combobox-size-l-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-large); + --system-combobox-size-l-spacing-edge-to-menu: var(--spectrum-component-to-menu-large); + --system-combobox-size-l-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200); + --system-combobox-size-l-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200); + --system-combobox-size-l-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-200); + --system-combobox-size-l-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-200); + --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); + --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); + --system-combobox-size-xl-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-extra-large); + --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); + --system-combobox-size-xl-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-extra-large); + --system-combobox-size-xl-spacing-edge-to-menu: var(--spectrum-component-to-menu-extra-large); + --system-combobox-size-xl-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300); + --system-combobox-size-xl-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300); + --system-combobox-size-xl-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-300); + --system-combobox-size-xl-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-300); + --system-combobox-quiet-minimum-width-multiplier: var(--spectrum-combo-box-quiet-minimum-width-multiplier); + --system-combobox-quiet-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-quiet); + --system-combobox-quiet-spacing-inline-start-edge-to-text: var(--spectrum-field-edge-to-text-quiet); + --system-combobox-quiet-size-s-spacing-label-to: var(--spectrum-field-label-to-component-quiet-small); + --system-combobox-quiet-spacing-label-to: var(--spectrum-field-label-to-component-quiet-medium); + --system-combobox-quiet-size-m-spacing-label-to: var(--spectrum-field-label-to-component-quiet-medium); + --system-combobox-quiet-size-l-spacing-label-to: var(--spectrum-field-label-to-component-quiet-large); + --system-combobox-quiet-size-xl-spacing-label-to: var(--spectrum-field-label-to-component-quiet-extra-large); +} diff --git a/tokens/dist/css/components/spectrum/contextualhelp.css b/tokens/dist/css/components/spectrum/contextualhelp.css new file mode 100644 index 00000000000..b5b58f8af50 --- /dev/null +++ b/tokens/dist/css/components/spectrum/contextualhelp.css @@ -0,0 +1,20 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-contextual-help-padding: var(--spectrum-spacing-400); + --system-contextual-help-link-spacing: var(--spectrum-spacing-300); + --system-contextual-help-heading-size: var(--spectrum-contextual-help-title-size); + --system-contextual-help-heading-color: var(--spectrum-heading-color); + --system-contextual-help-body-color: var(--spectrum-body-color); +} diff --git a/tokens/dist/css/components/spectrum/datepicker.css b/tokens/dist/css/components/spectrum/datepicker.css new file mode 100644 index 00000000000..b1decd5fd4a --- /dev/null +++ b/tokens/dist/css/components/spectrum/datepicker.css @@ -0,0 +1,55 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-date-picker-initial-height: var(--spectrum-component-height-100); + --system-date-picker-border-radius: var(--spectrum-corner-radius-100); + --system-date-picker-border-radius-quiet: 0; + --system-date-picker-border-width: var(--spectrum-border-width-100); + --system-date-picker-min-width: var(--spectrum-field-width); + --system-date-picker-icon-size: var(--spectrum-workflow-icon-size-100); + --system-date-picker-pickerbutton-border-color: var(--spectrum-gray-500); + --system-date-picker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default); + --system-date-picker-pickerbutton-width: calc(var(--spectrum-field-edge-to-disclosure-icon-100) * 2 + var(--spectrum-workflow-icon-size-100)); + --system-date-picker-pickerbutton-width-quiet: calc(var(--system-date-picker-pickerbutton-width) - var(--system-date-picker-quiet-button-offset)); + --system-date-picker-quiet-button-offset: var(--spectrum-text-to-visual-100); + --system-date-picker-icon-to-button: var(--spectrum-text-to-visual-100); + --system-date-picker-icon-to-text: var(--spectrum-component-edge-to-text-100); + --system-date-picker-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-date-picker-focus-thickness: var(--spectrum-focus-indicator-thickness); + --system-date-picker-focus-animation: var(--spectrum-animation-duration-100); + --system-date-picker-focus-ring-width: var(--spectrum-border-width-100); + --system-date-picker-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-date-picker-focus-line-gap: var(--spectrum-spacing-75); + --system-date-picker-invalid-quiet-color: var(--spectrum-negative-border-color-default); + --system-date-picker-quiet-border-color-hover: var(--spectrum-gray-500); + --system-date-picker-border-color-disabled: var(--spectrum-disabled-border-color); + --system-date-picker-dash-font-size: var(--spectrum-font-size-100); + --system-date-picker-dash-color: var(--spectrum-neutral-content-color-default); + --system-date-picker-dash-color-disabled: var(--spectrum-disabled-content-color); + --system-date-picker-range-dash-marin-inline-start: calc(var(--system-date-picker-dash-font-size) * -0.5); + --system-date-picker-range-dash-padding-top: 0; + --system-date-picker-input-width-base: calc(var(--system-date-picker-range-input-width-first) + var(--system-date-picker-icon-size)); + --system-date-picker-input-width: calc(var(--system-date-picker-input-width-base) + var(--system-date-picker-initial-height)); + --system-date-picker-input-width-quiet: calc(var(--system-date-picker-range-input-width-quiet-first) + var(--system-date-picker-icon-size) + var(--system-date-picker-initial-height)); + --system-date-picker-range-input-width-first: calc(var(--spectrum-datepicker-initial-width) - var(--spectrum-datepicker-generic-padding) * 2); + --system-date-picker-range-input-width-quiet-first: calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second)); + --system-date-picker-datetime-input-width-first: calc(var(--system-date-picker-input-width-base) + var(--spectrum-datepicker-datetime-width-first)); + --system-date-picker-datetime-input-width: calc(var(--system-date-picker-datetime-input-width-first) + var(--system-date-picker-icon-size) + var(--system-date-picker-initial-height)); + --system-date-picker-datetime-quiet-input-width-first: calc(var(--system-date-picker-input-width-base) + var(--spectrum-datepicker-input-datetime-width)); + --system-date-picker-datetime-quiet-input-width: calc(var(--system-date-picker-datetime-quiet-input-width-first) + var(--system-date-picker-icon-size) + var(--system-date-picker-initial-height)); + --system-date-picker-padding-inline-end: calc(var(--system-date-picker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--system-date-picker-border-width) * 2); + --system-date-picker-padding-inline-end-quiet: calc(var(--system-date-picker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--system-date-picker-quiet-button-offset)); + --system-date-picker-padding-inline-end-invalid: calc(var(--system-date-picker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--system-date-picker-icon-to-button) + var(--system-date-picker-icon-size) - var(--system-date-picker-border-width) * 2); + --system-date-picker-padding-inline-end-invalid-quiet: calc(var(--system-date-picker-pickerbutton-width-quiet) + var(--system-date-picker-icon-size) + var(--system-date-picker-icon-to-text)); +} diff --git a/tokens/dist/css/components/spectrum/dial.css b/tokens/dist/css/components/spectrum/dial.css new file mode 100644 index 00000000000..c9b2c3bc0ea --- /dev/null +++ b/tokens/dist/css/components/spectrum/dial.css @@ -0,0 +1,47 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-dial-background-color-default: var(--spectrum-gray-100); + --system-dial-handle-marker-color-disabled: var(--spectrum-gray-300); + --system-dial-border-color-disabled: var(--spectrum-gray-300); + --system-dial-handle-marker-color: var(--spectrum-gray-700); + --system-dial-border-color: var(--spectrum-gray-700); + --system-dial-handle-marker-color-down: var(--spectrum-gray-800); + --system-dial-border-color-down: var(--spectrum-gray-800); + --system-dial-handle-marker-color-hover: var(--spectrum-gray-800); + --system-dial-border-color-hover: var(--spectrum-gray-800); + --system-dial-handle-marker-color-key-focus: var(--spectrum-gray-50); + --system-dial-border-color-key-focus: var(--spectrum-gray-50); + --system-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700); + --system-dial-border-color-mouse-focus: var(--spectrum-gray-700); + --system-dial-min-max-tick-color: var(--spectrum-gray-600); + --system-dial-label-text-color: var(--spectrum-gray-700); + --system-dial-label-text-color-disabled: var(--spectrum-gray-700); + --system-dial-handle-border-color-disabled: var(--spectrum-gray-400); + --system-dial-container-width: 48px; + --system-dial-handle-marker-width: 12px; + --system-dial-handle-marker-height: 2px; + --system-dial-handle-marker-border-radius: 1px; + --system-dial-handle-size: 100%; + --system-dial-min-height: 0; + --system-dial-controls-min-height: 0; + --system-dial-min-max-tick-angles: 45deg; + --system-dial-width: 32px; + --system-dial-height: 32px; + --system-dial-handle-border-size: var(--spectrum-border-width-200); + --system-dial-label-text-size: var(--spectrum-font-size-75); + --system-dial-label-line-height: var(--spectrum-line-height-200); + --system-dial-small-width: 24px; + --system-dial-small-height: 24px; +} diff --git a/tokens/dist/css/components/spectrum/dialog.css b/tokens/dist/css/components/spectrum/dialog.css new file mode 100644 index 00000000000..e84cc8b8513 --- /dev/null +++ b/tokens/dist/css/components/spectrum/dialog.css @@ -0,0 +1,35 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-dialog-fullscreen-header-text-size: 28px; + --system-dialog-min-inline-size: 288px; + --system-dialog-confirm-small-width: 400px; + --system-dialog-confirm-medium-width: 480px; + --system-dialog-confirm-large-width: 640px; + --system-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300); + --system-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200); + --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); + --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); + --system-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100); + --system-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100); + --system-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); + --system-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1); + --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); + --system-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100); + --system-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); + --system-dialog-confirm-close-button-size: var(--spectrum-component-height-100); + --system-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300)); + --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); +} diff --git a/tokens/dist/css/components/spectrum/divider.css b/tokens/dist/css/components/spectrum/divider.css new file mode 100644 index 00000000000..baa804102e0 --- /dev/null +++ b/tokens/dist/css/components/spectrum/divider.css @@ -0,0 +1,24 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-divider-background-color-small: var(--spectrum-gray-300); + --system-divider-background-color-medium: var(--spectrum-gray-300); + --system-divider-background-color-large: var(--spectrum-gray-800); + --system-divider-background-color-small-static-white: var(--spectrum-transparent-white-300); + --system-divider-background-color-medium-static-white: var(--spectrum-transparent-white-300); + --system-divider-background-color-large-static-white: var(--spectrum-transparent-white-800); + --system-divider-background-color-small-static-black: var(--spectrum-transparent-black-300); + --system-divider-background-color-medium-static-black: var(--spectrum-transparent-black-300); + --system-divider-background-color-large-static-black: var(--spectrum-transparent-black-800); +} diff --git a/tokens/dist/css/components/spectrum/dropindicator.css b/tokens/dist/css/components/spectrum/dropindicator.css new file mode 100644 index 00000000000..5bf66397ebb --- /dev/null +++ b/tokens/dist/css/components/spectrum/dropindicator.css @@ -0,0 +1,19 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-drop-indicator-border-color: var(--spectrum-dropindicator-color); + --system-drop-indicator-circle-color: var(--spectrum-dropindicator-color); + --system-drop-indicator-border-size: var(--spectrum-border-width-200); + --system-drop-indicator-circle-size: 12px; +} diff --git a/tokens/dist/css/components/spectrum/dropzone.css b/tokens/dist/css/components/spectrum/dropzone.css new file mode 100644 index 00000000000..817c3892bf2 --- /dev/null +++ b/tokens/dist/css/components/spectrum/dropzone.css @@ -0,0 +1,50 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-drop-zone-padding: var(--spectrum-spacing-400); + --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); + --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); + --system-drop-zone-border-width: var(--spectrum-border-width-200); + --system-drop-zone-corner-radius: var(--spectrum-corner-radius-100); + --system-drop-zone-border-color: var(--spectrum-gray-300); + --system-drop-zone-heading-font-family: var(--spectrum-sans-font-family-stack); + --system-drop-zone-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-drop-zone-heading-font-style: var(--spectrum-heading-sans-serif-font-style); + --system-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); + --system-drop-zone-heading-line-height: var(--spectrum-heading-line-height); + --system-drop-zone-heading-color: var(--spectrum-heading-color); + --system-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); + --system-drop-zone-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-drop-zone-body-font-style: var(--spectrum-body-sans-serif-font-style); + --system-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); + --system-drop-zone-body-line-height: var(--spectrum-body-line-height); + --system-drop-zone-body-color: var(--spectrum-body-color); + --system-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb); + --system-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); + --system-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); + --system-drop-zone-illustration-color-hover: var(--spectrum-accent-visual-color); + --system-drop-zone-content-height: var(--spectrum-component-height-300); + --system-drop-zone-content-max-width: var(--spectrum-drop-zone-content-maximum-width); + --system-drop-zone-content-edge-to-text: var(--spectrum-component-edge-to-text-300); + --system-drop-zone-content-top-to-text: var(--spectrum-component-top-to-text-300); + --system-drop-zone-content-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --system-drop-zone-content-font-family: var(--spectrum-sans-font-family-stack); + --system-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); + --system-drop-zone-content-font-style: var(--spectrum-default-font-style); + --system-drop-zone-content-font-size: var(--spectrum-font-size-300); + --system-drop-zone-content-line-height: var(--spectrum-line-height-100); + --system-drop-zone-content-background-color: var(--spectrum-accent-visual-color); + --system-drop-zone-content-color: var(--spectrum-white); + --system-drop-zone-heading-font-size-cjk: var(--spectrum-drop-zone-cjk-title-size); +} diff --git a/tokens/dist/css/components/spectrum/fieldgroup.css b/tokens/dist/css/components/spectrum/fieldgroup.css new file mode 100644 index 00000000000..8eac87e1543 --- /dev/null +++ b/tokens/dist/css/components/spectrum/fieldgroup.css @@ -0,0 +1,17 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-field-group-margin: var(--spectrum-spacing-300); + --system-field-group-readonly-delimiter: "\002c"; +} diff --git a/tokens/dist/css/components/spectrum/fieldlabel.css b/tokens/dist/css/components/spectrum/fieldlabel.css new file mode 100644 index 00000000000..0b51eff909e --- /dev/null +++ b/tokens/dist/css/components/spectrum/fieldlabel.css @@ -0,0 +1,54 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-field-label-min-height: var(--spectrum-component-height-75); + --system-field-label-color: var(--spectrum-neutral-subdued-content-color-default); + --system-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); + --system-field-label-font-weight: var(--spectrum-regular-font-weight); + --system-field-label-line-height: var(--spectrum-line-height-100); + --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-field-label-size-s-min-height: var(--spectrum-component-height-75); + --system-field-label-size-s-top-to-text: var(--spectrum-component-top-to-text-75); + --system-field-label-size-s-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-field-label-size-s-font-size: var(--spectrum-font-size-75); + --system-field-label-size-s-side-margin-block-start: var(--spectrum-field-label-top-margin-small); + --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); + --system-field-label-size-s-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small); + --system-field-label-size-m-min-height: var(--spectrum-component-height-75); + --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-field-label-size-m-top-to-text: var(--spectrum-component-top-to-text-75); + --system-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-field-label-size-m-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-field-label-font-size: var(--spectrum-font-size-75); + --system-field-label-size-m-font-size: var(--spectrum-font-size-75); + --system-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); + --system-field-label-size-m-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); + --system-field-label-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-m-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); + --system-field-label-size-l-min-height: var(--spectrum-component-height-100); + --system-field-label-size-l-top-to-text: var(--spectrum-component-top-to-text-100); + --system-field-label-size-l-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-field-label-size-l-font-size: var(--spectrum-font-size-100); + --system-field-label-size-l-side-margin-block-start: var(--spectrum-field-label-top-margin-large); + --system-field-label-size-l-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-l-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large); + --system-field-label-size-xl-min-height: var(--spectrum-component-height-200); + --system-field-label-size-xl-top-to-text: var(--spectrum-component-top-to-text-200); + --system-field-label-size-xl-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --system-field-label-size-xl-font-size: var(--spectrum-font-size-200); + --system-field-label-size-xl-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large); + --system-field-label-size-xl-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-xl-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large); +} diff --git a/tokens/dist/css/components/spectrum/floatingactionbutton.css b/tokens/dist/css/components/spectrum/floatingactionbutton.css new file mode 100644 index 00000000000..c7b67f85aaf --- /dev/null +++ b/tokens/dist/css/components/spectrum/floatingactionbutton.css @@ -0,0 +1,39 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-floating-action-button-size: var(--spectrum-component-height-200); + --system-floating-action-button-icon-size: var(--spectrum-workflow-icon-size-200); + --system-floating-action-button-padding: var(--spectrum-component-pill-edge-to-visual-only-200); + --system-floating-action-button-margin: var(--spectrum-spacing-200); + --system-floating-action-button-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-floating-action-button-focus-ring-width: var(--spectrum-focus-indicator-thickness); + --system-floating-action-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-floating-action-button-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-floating-action-button-background-color: var(--spectrum-accent-background-color-default); + --system-floating-action-button-background-color-hover: var(--spectrum-accent-background-color-hover); + --system-floating-action-button-background-color-down: var(--spectrum-accent-background-color-down); + --system-floating-action-button-background-color-key-focus: var(--spectrum-accent-background-color-key-focus); + --system-floating-action-button-icon-color: var(--spectrum-white); + --system-floating-action-button-icon-color-hover: var(--spectrum-white); + --system-floating-action-button-icon-color-down: var(--spectrum-white); + --system-floating-action-button-icon-color-key-focus: var(--spectrum-white); + --system-floating-action-button-secondary-background-color: var(--spectrum-background-layer-2-color); + --system-floating-action-button-secondary-background-color-hover: var(--spectrum-background-layer-2-color); + --system-floating-action-button-secondary-background-color-down: var(--spectrum-background-layer-2-color); + --system-floating-action-button-secondary-background-color-key-focus: var(--spectrum-background-layer-2-color); + --system-floating-action-button-secondary-icon-color: var(--spectrum-neutral-subdued-content-color-default); + --system-floating-action-button-secondary-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-floating-action-button-secondary-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); + --system-floating-action-button-secondary-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); +} diff --git a/tokens/dist/css/components/spectrum/helptext.css b/tokens/dist/css/components/spectrum/helptext.css new file mode 100644 index 00000000000..ee03817e219 --- /dev/null +++ b/tokens/dist/css/components/spectrum/helptext.css @@ -0,0 +1,56 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-help-text-line-height: var(--spectrum-line-height-100); + --system-help-text-content-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-help-text-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-help-text-disabled-content-color: var(--spectrum-disabled-content-color); + --system-help-text-neutral-content-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-help-text-neutral-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-help-text-negative-content-color-default: var(--spectrum-negative-color-900); + --system-help-text-negative-icon-color-default: var(--spectrum-negative-color-900); + --system-help-text-disabled-content-color-default: var(--system-help-text-disabled-content-color); + --system-help-text-disabled-icon-color-default: var(--system-help-text-disabled-content-color); + --system-help-text-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-help-text-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-help-text-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-help-text-size-s-min-height: var(--spectrum-component-height-75); + --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-help-text-size-s-font-size: var(--spectrum-font-size-75); + --system-help-text-size-s-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-s-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-small); + --system-help-text-size-s-top-to-text: var(--spectrum-component-top-to-text-75); + --system-help-text-size-s-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-help-text-size-m-min-height: var(--spectrum-component-height-75); + --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-help-text-size-m-font-size: var(--spectrum-font-size-75); + --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-m-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-medium); + --system-help-text-size-m-top-to-text: var(--spectrum-component-top-to-text-75); + --system-help-text-size-m-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-help-text-size-l-min-height: var(--spectrum-component-height-100); + --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-help-text-size-l-font-size: var(--spectrum-font-size-100); + --system-help-text-size-l-text-to-visual: var(--spectrum-text-to-visual-100); + --system-help-text-size-l-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-large); + --system-help-text-size-l-top-to-text: var(--spectrum-component-top-to-text-100); + --system-help-text-size-l-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-help-text-size-xl-min-height: var(--spectrum-component-height-200); + --system-help-text-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-help-text-size-xl-font-size: var(--spectrum-font-size-200); + --system-help-text-size-xl-text-to-visual: var(--spectrum-text-to-visual-200); + --system-help-text-size-xl-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-extra-large); + --system-help-text-size-xl-top-to-text: var(--spectrum-component-top-to-text-200); + --system-help-text-size-xl-bottom-to-text: var(--spectrum-component-bottom-to-text-200); +} diff --git a/tokens/dist/css/components/spectrum/icon.css b/tokens/dist/css/components/spectrum/icon.css new file mode 100644 index 00000000000..1330d4340fb --- /dev/null +++ b/tokens/dist/css/components/spectrum/icon.css @@ -0,0 +1,109 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs); + --system-icon-size-xs: var(--spectrum-workflow-icon-size-50); + --system-icon-size-s: var(--spectrum-workflow-icon-size-75); + --system-icon-size-m: var(--spectrum-workflow-icon-size-100); + --system-icon-size-l: var(--spectrum-workflow-icon-size-200); + --system-icon-size-xl: var(--spectrum-workflow-icon-size-300); + --system-icon-size-xxl: var(--spectrum-workflow-icon-size-xxl); + --system-ui-icon-chevron-right-50-icon-size: var(--spectrum-chevron-icon-size-50); + --system-ui-icon-chevron-down-50-icon-size: var(--spectrum-chevron-icon-size-50); + --system-ui-icon-chevron-right-75-icon-size: var(--spectrum-chevron-icon-size-75); + --system-ui-icon-chevron-down-75-icon-size: var(--spectrum-chevron-icon-size-75); + --system-ui-icon-chevron-right-100-icon-size: var(--spectrum-chevron-icon-size-100); + --system-ui-icon-chevron-down-100-icon-size: var(--spectrum-chevron-icon-size-100); + --system-ui-icon-chevron-right-200-icon-size: var(--spectrum-chevron-icon-size-200); + --system-ui-icon-chevron-down-200-icon-size: var(--spectrum-chevron-icon-size-200); + --system-ui-icon-chevron-right-300-icon-size: var(--spectrum-chevron-icon-size-300); + --system-ui-icon-chevron-down-300-icon-size: var(--spectrum-chevron-icon-size-300); + --system-ui-icon-chevron-right-400-icon-size: var(--spectrum-chevron-icon-size-400); + --system-ui-icon-chevron-down-400-icon-size: var(--spectrum-chevron-icon-size-400); + --system-ui-icon-chevron-right-500-icon-size: var(--spectrum-chevron-icon-size-500); + --system-ui-icon-chevron-down-500-icon-size: var(--spectrum-chevron-icon-size-500); + --system-ui-icon-chevron-left-50-icon-size: var(--spectrum-chevron-icon-size-50); + --system-ui-icon-chevron-left-75-icon-size: var(--spectrum-chevron-icon-size-75); + --system-ui-icon-chevron-left-100-icon-size: var(--spectrum-chevron-icon-size-100); + --system-ui-icon-chevron-left-200-icon-size: var(--spectrum-chevron-icon-size-200); + --system-ui-icon-chevron-left-300-icon-size: var(--spectrum-chevron-icon-size-300); + --system-ui-icon-chevron-left-400-icon-size: var(--spectrum-chevron-icon-size-400); + --system-ui-icon-chevron-left-500-icon-size: var(--spectrum-chevron-icon-size-500); + --system-ui-icon-chevron-up-50-icon-size: var(--spectrum-chevron-icon-size-50); + --system-ui-icon-chevron-up-75-icon-size: var(--spectrum-chevron-icon-size-75); + --system-ui-icon-chevron-up-100-icon-size: var(--spectrum-chevron-icon-size-100); + --system-ui-icon-chevron-up-200-icon-size: var(--spectrum-chevron-icon-size-200); + --system-ui-icon-chevron-up-300-icon-size: var(--spectrum-chevron-icon-size-300); + --system-ui-icon-chevron-up-400-icon-size: var(--spectrum-chevron-icon-size-400); + --system-ui-icon-chevron-up-500-icon-size: var(--spectrum-chevron-icon-size-500); + --system-ui-icon-arrow-right-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-right-100-icon-size: var(--spectrum-arrow-icon-size-100); + --system-ui-icon-arrow-right-200-icon-size: var(--spectrum-arrow-icon-size-200); + --system-ui-icon-arrow-right-300-icon-size: var(--spectrum-arrow-icon-size-300); + --system-ui-icon-arrow-right-400-icon-size: var(--spectrum-arrow-icon-size-400); + --system-ui-icon-arrow-right-500-icon-size: var(--spectrum-arrow-icon-size-500); + --system-ui-icon-arrow-right-600-icon-size: var(--spectrum-arrow-icon-size-600); + --system-ui-icon-arrow-down-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-down-100-icon-size: var(--spectrum-arrow-icon-size-100); + --system-ui-icon-arrow-down-200-icon-size: var(--spectrum-arrow-icon-size-200); + --system-ui-icon-arrow-down-300-icon-size: var(--spectrum-arrow-icon-size-300); + --system-ui-icon-arrow-down-400-icon-size: var(--spectrum-arrow-icon-size-400); + --system-ui-icon-arrow-down-500-icon-size: var(--spectrum-arrow-icon-size-500); + --system-ui-icon-arrow-down-600-icon-size: var(--spectrum-arrow-icon-size-600); + --system-ui-icon-arrow-left-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-left-100-icon-size: var(--spectrum-arrow-icon-size-100); + --system-ui-icon-arrow-left-200-icon-size: var(--spectrum-arrow-icon-size-200); + --system-ui-icon-arrow-left-300-icon-size: var(--spectrum-arrow-icon-size-300); + --system-ui-icon-arrow-left-400-icon-size: var(--spectrum-arrow-icon-size-400); + --system-ui-icon-arrow-left-500-icon-size: var(--spectrum-arrow-icon-size-500); + --system-ui-icon-arrow-left-600-icon-size: var(--spectrum-arrow-icon-size-600); + --system-ui-icon-arrow-up-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-up-100-icon-size: var(--spectrum-arrow-icon-size-100); + --system-ui-icon-arrow-up-200-icon-size: var(--spectrum-arrow-icon-size-200); + --system-ui-icon-arrow-up-300-icon-size: var(--spectrum-arrow-icon-size-300); + --system-ui-icon-arrow-up-400-icon-size: var(--spectrum-arrow-icon-size-400); + --system-ui-icon-arrow-up-500-icon-size: var(--spectrum-arrow-icon-size-500); + --system-ui-icon-arrow-up-600-icon-size: var(--spectrum-arrow-icon-size-600); + --system-ui-icon-checkmark-50-icon-size: var(--spectrum-checkmark-icon-size-50); + --system-ui-icon-checkmark-75-icon-size: var(--spectrum-checkmark-icon-size-75); + --system-ui-icon-checkmark-100-icon-size: var(--spectrum-checkmark-icon-size-100); + --system-ui-icon-checkmark-200-icon-size: var(--spectrum-checkmark-icon-size-200); + --system-ui-icon-checkmark-300-icon-size: var(--spectrum-checkmark-icon-size-300); + --system-ui-icon-checkmark-400-icon-size: var(--spectrum-checkmark-icon-size-400); + --system-ui-icon-checkmark-500-icon-size: var(--spectrum-checkmark-icon-size-500); + --system-ui-icon-checkmark-600-icon-size: var(--spectrum-checkmark-icon-size-600); + --system-ui-icon-dash-50-icon-size: var(--spectrum-dash-icon-size-50); + --system-ui-icon-dash-75-icon-size: var(--spectrum-dash-icon-size-75); + --system-ui-icon-dash-100-icon-size: var(--spectrum-dash-icon-size-100); + --system-ui-icon-dash-200-icon-size: var(--spectrum-dash-icon-size-200); + --system-ui-icon-dash-300-icon-size: var(--spectrum-dash-icon-size-300); + --system-ui-icon-dash-400-icon-size: var(--spectrum-dash-icon-size-400); + --system-ui-icon-dash-500-icon-size: var(--spectrum-dash-icon-size-500); + --system-ui-icon-dash-600-icon-size: var(--spectrum-dash-icon-size-600); + --system-ui-icon-cross-75-icon-size: var(--spectrum-cross-icon-size-75); + --system-ui-icon-cross-100-icon-size: var(--spectrum-cross-icon-size-100); + --system-ui-icon-cross-200-icon-size: var(--spectrum-cross-icon-size-200); + --system-ui-icon-cross-300-icon-size: var(--spectrum-cross-icon-size-300); + --system-ui-icon-cross-400-icon-size: var(--spectrum-cross-icon-size-400); + --system-ui-icon-cross-500-icon-size: var(--spectrum-cross-icon-size-500); + --system-ui-icon-cross-600-icon-size: var(--spectrum-cross-icon-size-600); + --system-ui-icon-corner-triangle-75-icon-size: var(--spectrum-corner-triangle-icon-size-75); + --system-ui-icon-corner-triangle-100-icon-size: var(--spectrum-corner-triangle-icon-size-100); + --system-ui-icon-corner-triangle-200-icon-size: var(--spectrum-corner-triangle-icon-size-200); + --system-ui-icon-corner-triangle-300-icon-size: var(--spectrum-corner-triangle-icon-size-300); + --system-ui-icon-asterisk-75-icon-size: var(--spectrum-asterisk-icon-size-75); + --system-ui-icon-asterisk-100-icon-size: var(--spectrum-asterisk-icon-size-100); + --system-ui-icon-asterisk-200-icon-size: var(--spectrum-asterisk-icon-size-200); + --system-ui-icon-asterisk-300-icon-size: var(--spectrum-asterisk-icon-size-300); +} diff --git a/tokens/dist/css/components/spectrum/illustratedmessage.css b/tokens/dist/css/components/spectrum/illustratedmessage.css new file mode 100644 index 00000000000..ccf7dc03978 --- /dev/null +++ b/tokens/dist/css/components/spectrum/illustratedmessage.css @@ -0,0 +1,36 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-illustrated-message-description-max-inline-size: var(--spectrum-illustrated-message-maximum-width); + --system-illustrated-message-heading-max-inline-size: var(--spectrum-illustrated-message-maximum-width); + --system-illustrated-message-title-to-heading: var(--spectrum-spacing-400); + --system-illustrated-message-heading-to-description: var(--spectrum-spacing-75); + --system-illustrated-message-illustration-color: var(--spectrum-neutral-visual-color); + --system-illustrated-message-illustration-accent-color: var(--spectrum-accent-visual-color); + --system-illustrated-message-title-font-family: var(--spectrum-sans-font-family-stack); + --system-illustrated-message-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-illustrated-message-title-font-style: var(--spectrum-heading-sans-serif-font-style); + --system-illustrated-message-title-font-size: var(--spectrum-illustrated-message-title-size); + --system-illustrated-message-title-line-height: var(--spectrum-heading-line-height); + --system-illustrated-message-title-color: var(--spectrum-heading-color); + --system-illustrated-message-description-font-family: var(--spectrum-sans-font-family-stack); + --system-illustrated-message-description-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-illustrated-message-description-font-style: var(--spectrum-body-sans-serif-font-style); + --system-illustrated-message-description-font-size: var(--spectrum-illustrated-message-body-size); + --system-illustrated-message-description-line-height: var(--spectrum-body-line-height); + --system-illustrated-message-description-color: var(--spectrum-body-color); + --system-illustrated-message-lang-ja-title-font-size: var(--spectrum-illustrated-message-cjk-title-size); + --system-illustrated-message-lang-zh-title-font-size: var(--spectrum-illustrated-message-cjk-title-size); + --system-illustrated-message-lang-ko-title-font-size: var(--spectrum-illustrated-message-cjk-title-size); +} diff --git a/tokens/dist/css/components/spectrum/index.css b/tokens/dist/css/components/spectrum/index.css new file mode 100644 index 00000000000..c5ee843e09b --- /dev/null +++ b/tokens/dist/css/components/spectrum/index.css @@ -0,0 +1,3555 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-accordion-item-width: var(--spectrum-accordion-minimum-width); + --system-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text); + --system-accordion-edge-to-disclosure-indicator-space: var(--spectrum-accordion-edge-to-disclosure-indicator); + --system-accordion-edge-to-text-space: var(--spectrum-accordion-edge-to-text); + --system-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-accordion-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-accordion-corner-radius: var(--spectrum-corner-radius-100); + --system-accordion-item-content-area-top-to-content: var(--spectrum-accordion-content-area-top-to-content); + --system-accordion-item-content-area-bottom-to-content: var(--spectrum-accordion-content-area-bottom-to-content); + --system-accordion-item-header-font: var(--spectrum-sans-font-family-stack); + --system-accordion-item-header-font-weight: var(--spectrum-bold-font-weight); + --system-accordion-item-header-font-style: var(--spectrum-default-font-style); + --system-accordion-item-header-line-height: 1.25; + --system-accordion-item-content-font: var(--spectrum-sans-font-family-stack); + --system-accordion-item-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-accordion-item-content-font-style: var(--spectrum-body-sans-serif-font-style); + --system-accordion-item-content-line-height: var(--spectrum-line-height-100); + --system-accordion-background-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-default)); + --system-accordion-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-hover)); + --system-accordion-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-down)); + --system-accordion-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus)); + --system-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default); + --system-accordion-item-header-color-hover: var(--spectrum-neutral-content-color-hover); + --system-accordion-item-header-color-down: var(--spectrum-neutral-content-color-down); + --system-accordion-item-header-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-accordion-item-header-disabled-color: var(--spectrum-disabled-content-color); + --system-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color); + --system-accordion-item-content-color: var(--spectrum-body-color); + --system-accordion-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-accordion-divider-color: var(--spectrum-gray-300); + --system-accordion-item-header-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-accordion-item-content-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-accordion-size-s-item-height: var(--spectrum-component-height-100); + --system-accordion-size-s-disclosure-indicator-height: var(--spectrum-component-height-75); + --system-accordion-size-s-component-edge-to-text: var(--spectrum-component-edge-to-text-50); + --system-accordion-size-s-item-header-font-size: var(--spectrum-font-size-200); + --system-accordion-size-s-item-content-font-size: var(--spectrum-body-size-xs); + --system-accordion-size-s-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-small); + --system-accordion-size-s-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-small); + --system-accordion-item-height: var(--spectrum-component-height-200); + --system-accordion-size-m-item-height: var(--spectrum-component-height-200); + --system-accordion-disclosure-indicator-height: var(--spectrum-component-height-100); + --system-accordion-size-m-disclosure-indicator-height: var(--spectrum-component-height-100); + --system-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-75); + --system-accordion-size-m-component-edge-to-text: var(--spectrum-component-edge-to-text-75); + --system-accordion-item-header-font-size: var(--spectrum-font-size-300); + --system-accordion-size-m-item-header-font-size: var(--spectrum-font-size-300); + --system-accordion-item-content-font-size: var(--spectrum-body-size-s); + --system-accordion-size-m-item-content-font-size: var(--spectrum-body-size-s); + --system-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium); + --system-accordion-size-m-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium); + --system-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium); + --system-accordion-size-m-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium); + --system-accordion-size-l-item-height: var(--spectrum-component-height-300); + --system-accordion-size-l-disclosure-indicator-height: var(--spectrum-component-height-200); + --system-accordion-size-l-component-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-accordion-size-l-item-header-font-size: var(--spectrum-font-size-500); + --system-accordion-size-l-item-content-font-size: var(--spectrum-body-size-m); + --system-accordion-size-l-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-large); + --system-accordion-size-l-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-large); + --system-accordion-size-xl-item-height: var(--spectrum-component-height-400); + --system-accordion-size-xl-disclosure-indicator-height: var(--spectrum-component-height-300); + --system-accordion-size-xl-component-edge-to-text: var(--spectrum-component-edge-to-text-200); + --system-accordion-size-xl-item-header-font-size: var(--spectrum-font-size-700); + --system-accordion-size-xl-item-content-font-size: var(--spectrum-body-size-l); + --system-accordion-size-xl-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-extra-large); + --system-accordion-size-xl-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-extra-large); + --system-accordion-compact-size-s-item-height: var(--spectrum-component-height-75); + --system-accordion-compact-size-s-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small); + --system-accordion-compact-size-s-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small); + --system-accordion-compact-item-height: var(--spectrum-component-height-100); + --system-accordion-compact-size-m-item-height: var(--spectrum-component-height-100); + --system-accordion-compact-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium); + --system-accordion-compact-size-m-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium); + --system-accordion-compact-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium); + --system-accordion-compact-size-m-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium); + --system-accordion-compact-size-l-item-height: var(--spectrum-component-height-200); + --system-accordion-compact-size-l-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large); + --system-accordion-compact-size-l-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large); + --system-accordion-compact-size-xl-item-height: var(--spectrum-component-height-300); + --system-accordion-compact-size-xl-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large); + --system-accordion-compact-size-xl-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large); + --system-accordion-spacious-size-s-item-header-line-height: 1.25; + --system-accordion-spacious-size-s-item-header-top-to-text-space: var(--spectrum-accordion-small-top-to-text-spacious); + --system-accordion-spacious-size-s-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small); + --system-accordion-spacious-item-header-line-height: 1.278; + --system-accordion-spacious-size-m-item-header-line-height: 1.278; + --system-accordion-spacious-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium); + --system-accordion-spacious-size-m-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium); + --system-accordion-spacious-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium); + --system-accordion-spacious-size-m-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium); + --system-accordion-spacious-size-l-item-header-line-height: 1.273; + --system-accordion-spacious-size-l-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-large); + --system-accordion-spacious-size-l-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-large); + --system-accordion-spacious-size-xl-item-header-line-height: 1.25; + --system-accordion-spacious-size-xl-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-extra-large); + --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-extra-large); + --system-action-bar-height: var(--spectrum-action-bar-height); + --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); + --system-action-bar-item-counter-line-height: var(--spectrum-line-height-100); + --system-action-bar-item-counter-color: var(--spectrum-neutral-content-color-default); + --system-action-bar-item-counter-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-action-bar-popover-background-color: var(--spectrum-gray-50); + --system-action-bar-popover-border-color: var(--spectrum-gray-400); + --system-action-bar-emphasized-background-color: var(--spectrum-informative-background-color-default); + --system-action-bar-emphasized-item-counter-color: var(--spectrum-white); + --system-action-bar-spacing-outer-edge: var(--spectrum-spacing-300); + --system-action-bar-spacing-close-button-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-start: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-end: var(--spectrum-spacing-75); + --system-action-bar-spacing-item-counter-top: var(--spectrum-action-bar-top-to-item-counter); + --system-action-bar-spacing-item-counter-end: var(--spectrum-spacing-400); + --system-action-bar-spacing-action-group-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-action-group-end: var(--spectrum-spacing-100); + --system-action-bar-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color); + --system-action-button-animation-duration: var(--spectrum-animation-duration-100); + --system-action-button-border-radius: var(--spectrum-corner-radius-100); + --system-action-button-border-width: var(--spectrum-border-width-100); + --system-action-button-content-color-default: var(--spectrum-neutral-content-color-default); + --system-action-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-action-button-content-color-down: var(--spectrum-neutral-content-color-down); + --system-action-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-action-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-action-button-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-action-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-action-button-background-color-default: var(--spectrum-gray-75); + --system-action-button-background-color-hover: var(--spectrum-gray-200); + --system-action-button-background-color-down: var(--spectrum-gray-300); + --system-action-button-background-color-focus: var(--spectrum-gray-200); + --system-action-button-border-color-default: var(--spectrum-gray-400); + --system-action-button-border-color-hover: var(--spectrum-gray-500); + --system-action-button-border-color-down: var(--spectrum-gray-600); + --system-action-button-border-color-focus: var(--spectrum-gray-500); + --system-action-button-background-color-disabled: transparent; + --system-action-button-border-color-disabled: var(--spectrum-disabled-border-color); + --system-action-button-content-color-disabled: var(--spectrum-disabled-content-color); + --system-action-button-min-width: calc(var(--spectrum-component-edge-to-visual-only-100) * 2 + var(--spectrum-workflow-icon-size-100)); + --system-action-button-height: var(--spectrum-component-height-100); + --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); + --system-action-button-font-size: var(--spectrum-font-size-100); + --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); + --system-action-button-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --system-action-button-quiet-background-color-default: transparent; + --system-action-button-quiet-background-color-hover: var(--spectrum-gray-200); + --system-action-button-quiet-background-color-down: var(--spectrum-gray-300); + --system-action-button-quiet-background-color-focus: var(--spectrum-gray-200); + --system-action-button-quiet-background-color-disabled: transparent; + --system-action-button-quiet-border-color-default: transparent; + --system-action-button-quiet-border-color-hover: transparent; + --system-action-button-quiet-border-color-down: transparent; + --system-action-button-quiet-border-color-focus: transparent; + --system-action-button-quiet-border-color-disabled: transparent; + --system-action-button-selected-background-color-default: var(--spectrum-neutral-background-color-selected-default); + --system-action-button-selected-background-color-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-action-button-selected-background-color-down: var(--spectrum-neutral-background-color-selected-down); + --system-action-button-selected-background-color-focus: var(--spectrum-neutral-background-color-selected-key-focus); + --system-action-button-selected-content-color-default: var(--spectrum-gray-50); + --system-action-button-selected-content-color-hover: var(--spectrum-gray-50); + --system-action-button-selected-content-color-down: var(--spectrum-gray-50); + --system-action-button-selected-content-color-focus: var(--spectrum-gray-50); + --system-action-button-selected-border-color-default: transparent; + --system-action-button-selected-border-color-hover: transparent; + --system-action-button-selected-border-color-down: transparent; + --system-action-button-selected-border-color-focus: transparent; + --system-action-button-selected-border-color-disabled: transparent; + --system-action-button-selected-background-color-disabled: var(--spectrum-disabled-background-color); + --system-action-button-selected-emphasized-background-color-default: var(--spectrum-accent-background-color-default); + --system-action-button-selected-emphasized-background-color-hover: var(--spectrum-accent-background-color-hover); + --system-action-button-selected-emphasized-background-color-down: var(--spectrum-accent-background-color-down); + --system-action-button-selected-emphasized-background-color-focus: var(--spectrum-accent-background-color-key-focus); + --system-action-button-selected-emphasized-content-color-default: var(--spectrum-white); + --system-action-button-selected-emphasized-content-color-hover: var(--spectrum-white); + --system-action-button-selected-emphasized-content-color-down: var(--spectrum-white); + --system-action-button-selected-emphasized-content-color-focus: var(--spectrum-white); + --system-action-button-static-black-quiet-border-color-default: transparent; + --system-action-button-static-white-quiet-border-color-default: transparent; + --system-action-button-static-black-quiet-border-color-hover: transparent; + --system-action-button-static-white-quiet-border-color-hover: transparent; + --system-action-button-static-black-quiet-border-color-down: transparent; + --system-action-button-static-white-quiet-border-color-down: transparent; + --system-action-button-static-black-quiet-border-color-focus: transparent; + --system-action-button-static-white-quiet-border-color-focus: transparent; + --system-action-button-static-black-quiet-border-color-disabled: transparent; + --system-action-button-static-white-quiet-border-color-disabled: transparent; + --system-action-button-static-black-background-color-default: transparent; + --system-action-button-static-black-background-color-hover: var(--spectrum-transparent-black-300); + --system-action-button-static-black-background-color-down: var(--spectrum-transparent-black-400); + --system-action-button-static-black-background-color-focus: var(--spectrum-transparent-black-300); + --system-action-button-static-black-background-color-disabled: transparent; + --system-action-button-static-black-border-color-default: var(--spectrum-transparent-black-400); + --system-action-button-static-black-border-color-hover: var(--spectrum-transparent-black-500); + --system-action-button-static-black-border-color-down: var(--spectrum-transparent-black-600); + --system-action-button-static-black-border-color-focus: var(--spectrum-transparent-black-500); + --system-action-button-static-black-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --system-action-button-static-black-content-color-default: var(--spectrum-black); + --system-action-button-static-black-content-color-hover: var(--spectrum-black); + --system-action-button-static-black-content-color-down: var(--spectrum-black); + --system-action-button-static-black-content-color-focus: var(--spectrum-black); + --system-action-button-static-black-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-action-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-action-button-static-black-selected-background-color-default: var(--spectrum-transparent-black-800); + --system-action-button-static-black-selected-background-color-hover: var(--spectrum-transparent-black-900); + --system-action-button-static-black-selected-background-color-down: var(--spectrum-transparent-black-900); + --system-action-button-static-black-selected-background-color-focus: var(--spectrum-transparent-black-900); + --system-action-button-static-black-selected-background-color-disabled: var(--spectrum-transparent-black-200); + --system-action-button-static-black-selected-border-color-disabled: transparent; + --system-action-button-static-black-selected-content-color-default: var(--spectrum-white); + --system-action-button-static-black-selected-emphasized-background-color-default: var(--spectrum-transparent-black-900); + --system-action-button-static-black-selected-emphasized-background-color-hover: var(--spectrum-transparent-black-1000); + --system-action-button-static-black-selected-emphasized-background-color-down: var(--spectrum-transparent-black-1000); + --system-action-button-static-black-selected-emphasized-background-color-focus: var(--spectrum-transparent-black-1000); + --system-action-button-static-black-selected-emphasized-content-color-default: var(--spectrum-gray-50); + --system-action-button-static-black-selected-emphasized-content-color-hover: var(--spectrum-gray-900); + --system-action-button-static-black-selected-emphasized-content-color-down: var(--spectrum-gray-900); + --system-action-button-static-black-selected-emphasized-content-color-focus: var(--spectrum-gray-900); + --system-action-button-static-white-background-color-default: transparent; + --system-action-button-static-white-background-color-hover: var(--spectrum-transparent-white-300); + --system-action-button-static-white-background-color-down: var(--spectrum-transparent-white-400); + --system-action-button-static-white-background-color-focus: var(--spectrum-transparent-white-300); + --system-action-button-static-white-background-color-disabled: transparent; + --system-action-button-static-white-border-color-default: var(--spectrum-transparent-white-400); + --system-action-button-static-white-border-color-hover: var(--spectrum-transparent-white-500); + --system-action-button-static-white-border-color-down: var(--spectrum-transparent-white-600); + --system-action-button-static-white-border-color-focus: var(--spectrum-transparent-white-500); + --system-action-button-static-white-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --system-action-button-static-white-content-color-default: var(--spectrum-white); + --system-action-button-static-white-content-color-hover: var(--spectrum-white); + --system-action-button-static-white-content-color-down: var(--spectrum-white); + --system-action-button-static-white-content-color-focus: var(--spectrum-white); + --system-action-button-static-white-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-action-button-static-white-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-action-button-static-white-selected-background-color-default: var(--spectrum-transparent-white-800); + --system-action-button-static-white-selected-background-color-hover: var(--spectrum-transparent-white-900); + --system-action-button-static-white-selected-background-color-down: var(--spectrum-transparent-white-900); + --system-action-button-static-white-selected-background-color-focus: var(--spectrum-transparent-white-900); + --system-action-button-static-white-selected-background-color-disabled: var(--spectrum-transparent-white-200); + --system-action-button-static-white-selected-border-color-disabled: transparent; + --system-action-button-static-white-selected-content-color-default: var(--spectrum-black); + --system-action-button-static-white-selected-emphasized-background-color-default: var(--spectrum-transparent-white-900); + --system-action-button-static-white-selected-emphasized-background-color-hover: var(--spectrum-transparent-white-1000); + --system-action-button-static-white-selected-emphasized-background-color-down: var(--spectrum-transparent-white-1000); + --system-action-button-static-white-selected-emphasized-background-color-focus: var(--spectrum-transparent-white-1000); + --system-action-button-static-white-selected-emphasized-content-color-default: var(--spectrum-gray-50); + --system-action-button-size-xs-min-width: calc(var(--spectrum-component-edge-to-visual-only-50) * 2 + var(--spectrum-workflow-icon-size-50)); + --system-action-button-size-xs-height: var(--spectrum-component-height-50); + --system-action-button-size-xs-icon-size: var(--spectrum-workflow-icon-size-50); + --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); + --system-action-button-size-xs-text-to-visual: var(--spectrum-text-to-visual-50); + --system-action-button-size-xs-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small); + --system-action-button-size-xs-edge-to-visual-size: var(--spectrum-component-edge-to-visual-50); + --system-action-button-size-xs-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-50); + --system-action-button-size-xs-edge-to-text-size: var(--spectrum-component-edge-to-text-50); + --system-action-button-size-s-min-width: calc(var(--spectrum-component-edge-to-visual-only-75) * 2 + var(--spectrum-workflow-icon-size-75)); + --system-action-button-size-s-height: var(--spectrum-component-height-75); + --system-action-button-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-action-button-size-s-font-size: var(--spectrum-font-size-75); + --system-action-button-size-s-text-to-visual: var(--spectrum-text-to-visual-75); + --system-action-button-size-s-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small); + --system-action-button-size-s-edge-to-visual-size: var(--spectrum-component-edge-to-visual-75); + --system-action-button-size-s-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-75); + --system-action-button-size-s-edge-to-text-size: var(--spectrum-component-edge-to-text-75); + --system-action-button-size-m-min-width: calc(var(--spectrum-component-edge-to-visual-only-100) * 2 + var(--spectrum-workflow-icon-size-100)); + --system-action-button-size-m-height: var(--spectrum-component-height-100); + --system-action-button-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-action-button-size-m-font-size: var(--spectrum-font-size-100); + --system-action-button-size-m-text-to-visual: var(--spectrum-text-to-visual-100); + --system-action-button-size-m-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --system-action-button-edge-to-visual-size: var(--spectrum-component-edge-to-visual-100); + --system-action-button-size-m-edge-to-visual-size: var(--spectrum-component-edge-to-visual-100); + --system-action-button-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-100); + --system-action-button-size-m-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-100); + --system-action-button-edge-to-text-size: var(--spectrum-component-edge-to-text-100); + --system-action-button-size-m-edge-to-text-size: var(--spectrum-component-edge-to-text-100); + --system-action-button-size-l-min-width: calc(var(--spectrum-component-edge-to-visual-only-200) * 2 + var(--spectrum-workflow-icon-size-200)); + --system-action-button-size-l-height: var(--spectrum-component-height-200); + --system-action-button-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-action-button-size-l-font-size: var(--spectrum-font-size-200); + --system-action-button-size-l-text-to-visual: var(--spectrum-text-to-visual-200); + --system-action-button-size-l-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large); + --system-action-button-size-l-edge-to-visual-size: var(--spectrum-component-edge-to-visual-200); + --system-action-button-size-l-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-200); + --system-action-button-size-l-edge-to-text-size: var(--spectrum-component-edge-to-text-200); + --system-action-button-size-xl-min-width: calc(var(--spectrum-component-edge-to-visual-only-300) * 2 + var(--spectrum-workflow-icon-size-300)); + --system-action-button-size-xl-height: var(--spectrum-component-height-300); + --system-action-button-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-action-button-size-xl-text-to-visual: var(--spectrum-text-to-visual-300); + --system-action-button-size-xl-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large); + --system-action-button-size-xl-edge-to-visual-size: var(--spectrum-component-edge-to-visual-300); + --system-action-button-size-xl-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-300); + --system-action-button-size-xl-edge-to-text-size: var(--spectrum-component-edge-to-text-300); + --system-action-group-gap-size-compact: 0; + --system-action-group-horizontal-spacing-compact: -1px; + --system-action-group-vertical-spacing-compact: -1px; + --system-action-group-button-spacing-reset: 0; + --system-action-group-border-radius-reset: 0; + --system-action-group-border-radius: var(--spectrum-corner-radius-100); + --system-action-group-size-xs-horizontal-spacing-regular: var(--spectrum-spacing-75); + --system-action-group-size-s-horizontal-spacing-regular: var(--spectrum-spacing-75); + --system-action-group-size-xs-vertical-spacing-regular: var(--spectrum-spacing-75); + --system-action-group-size-s-vertical-spacing-regular: var(--spectrum-spacing-75); + --system-action-group-horizontal-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-m-horizontal-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-l-horizontal-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-xl-horizontal-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-m-vertical-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-l-vertical-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-xl-vertical-spacing-regular: var(--spectrum-spacing-100); + --system-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default); + --system-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height); + --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); + --system-alert-banner-size: auto; + --system-alert-banner-font-size: var(--spectrum-font-size-100); + --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); + --system-alert-banner-start-edge: var(--spectrum-spacing-300); + --system-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300); + --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); + --system-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon); + --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); + --system-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text); + --system-alert-banner-informative-background: var(--spectrum-informative-background-color-default); + --system-alert-banner-negative-background: var(--spectrum-negative-background-color-default); + --system-alert-banner-font-color: var(--spectrum-white); + --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); + --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); + --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-dialog-warning-icon-color: var(--spectrum-notice-visual-color); + --system-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color); + --system-alert-dialog-title-font-family: var(--spectrum-sans-font-family-stack); + --system-alert-dialog-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-alert-dialog-title-font-style: var(--spectrum-heading-sans-serif-font-style); + --system-alert-dialog-title-font-size: var(--spectrum-alert-dialog-title-size); + --system-alert-dialog-title-line-height: var(--spectrum-heading-line-height); + --system-alert-dialog-title-color: var(--spectrum-heading-color); + --system-alert-dialog-body-font-family: var(--spectrum-sans-font-family-stack); + --system-alert-dialog-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-alert-dialog-body-font-style: var(--spectrum-body-sans-serif-font-style); + --system-alert-dialog-body-font-size: var(--spectrum-alert-dialog-description-size); + --system-alert-dialog-body-line-height: var(--spectrum-line-height-100); + --system-alert-dialog-body-color: var(--spectrum-body-color); + --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200); + --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300); + --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300); + --system-asset-transition-duration: var(--spectrum-animation-duration-100); + --system-asset-folder-background-color: var(--spectrum-gray-300); + --system-asset-file-background-color: var(--spectrum-gray-50); + --system-asset-icon-outline-color: var(--spectrum-gray-500); + --system-asset-card-overlay-background-color-rgb: 27, 127, 245; + --system-asset-card-overlay-background-color-opacity: 0.1; + --system-asset-card-overlay-background-color: rgba(var(--system-asset-card-overlay-background-color-rgb), var(--system-asset-card-overlay-background-color-opacity)); + --system-asset-card-asset-size: 224px; + --system-asset-card-background-color: var(--spectrum-gray-200); + --system-asset-card-asset-animation-duration: var(--spectrum-animation-duration-100); + --system-asset-card-asset-container-border-size: 1px; + --system-asset-card-header-margin-block-start: var(--spectrum-spacing-300); + --system-asset-card-border-radius: var(--spectrum-corner-radius-100); + --system-asset-card-border-color: transparent; + --system-asset-card-border-color-hover: var(--spectrum-gray-500); + --system-asset-card-border-color-down: var(--spectrum-gray-600); + --system-asset-card-focus-ring-gap: 5px; + --system-asset-card-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-asset-card-selectionindicator-background-color-default: rgba(var(--spectrum-gray-100-rgb), 0.9); + --system-asset-card-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-200); + --system-asset-card-selectionindicator-size: var(--spectrum-card-selection-background-size); + --system-asset-card-selectionindicator-border-radius: var(--spectrum-corner-radius-100); + --system-asset-card-selectionindicator-offset-y: 4px; + --system-asset-card-selectionindicator-blur: 6px; + --system-asset-card-selectionindicator-color: var(--spectrum-white); + --system-asset-card-selectionindicator-font-weight: var(--spectrum-bold-font-weight); + --system-asset-card-selectionindicator-font-size: var(--spectrum-font-size-400); + --system-asset-card-title-text-color: var(--spectrum-gray-900); + --system-asset-card-title-font-family: var(--spectrum-sans-font-family-stack); + --system-asset-card-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-asset-card-title-font-style: var(--spectrum-default-font-style); + --system-asset-card-title-line-height: var(--spectrum-line-height-100); + --system-asset-card-title-letter-spacing: 0; + --system-asset-card-header-content-text-color: var(--spectrum-gray-900); + --system-asset-card-header-content-font-family: var(--spectrum-sans-font-family-stack); + --system-asset-card-header-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-asset-card-header-content-font-style: var(--spectrum-default-font-style); + --system-asset-card-header-content-line-height: var(--spectrum-line-height-200); + --system-asset-card-header-content-letter-spacing: 0; + --system-asset-card-content-text-color: var(--spectrum-gray-700); + --system-asset-card-content-font-family: var(--spectrum-sans-font-family-stack); + --system-asset-card-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-asset-card-content-font-style: var(--spectrum-default-font-style); + --system-asset-card-content-line-height: var(--spectrum-line-height-200); + --system-asset-card-content-letter-spacing: 0; + --system-asset-card-content-margin-block-start: var(--spectrum-spacing-75); + --system-asset-card-lang-zh-title-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ja-title-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ko-title-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-zh-title-font-style: var(--spectrum-heading-cjk-font-style); + --system-asset-card-lang-ja-title-font-style: var(--spectrum-heading-cjk-font-style); + --system-asset-card-lang-ko-title-font-style: var(--spectrum-heading-cjk-font-style); + --system-asset-card-lang-zh-title-font-weight: var(--spectrum-heading-cjk-font-weight); + --system-asset-card-lang-ja-title-font-weight: var(--spectrum-heading-cjk-font-weight); + --system-asset-card-lang-ko-title-font-weight: var(--spectrum-heading-cjk-font-weight); + --system-asset-card-lang-zh-title-font-size: var(--spectrum-heading-cjk-size-xs); + --system-asset-card-lang-ja-title-font-size: var(--spectrum-heading-cjk-size-xs); + --system-asset-card-lang-ko-title-font-size: var(--spectrum-heading-cjk-size-xs); + --system-asset-card-lang-zh-title-line-height: var(--spectrum-heading-cjk-line-height); + --system-asset-card-lang-ja-title-line-height: var(--spectrum-heading-cjk-line-height); + --system-asset-card-lang-ko-title-line-height: var(--spectrum-heading-cjk-line-height); + --system-asset-card-lang-zh-title-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ja-title-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ko-title-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-zh-header-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ja-header-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ko-header-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-zh-header-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ja-header-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ko-header-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-zh-header-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ja-header-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ko-header-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-zh-header-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ja-header-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ko-header-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-zh-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ja-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ko-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-zh-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ja-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ko-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-zh-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ja-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ko-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-zh-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ja-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ko-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-zh-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ja-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ko-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-zh-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ja-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ko-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-list-width: 272px; + --system-asset-list-child-indicator-animation: var(--spectrum-animation-duration-100); + --system-asset-list-item-height: var(--spectrum-spacing-600); + --system-asset-list-item-padding-inline-start: var(--spectrum-spacing-300); + --system-asset-list-item-padding-inline-end: var(--spectrum-spacing-300); + --system-asset-list-item-margin-block-end: var(--spectrum-spacing-75); + --system-asset-list-item-border-radius: var(--spectrum-spacing-75); + --system-asset-list-item-animation: var(--spectrum-animation-duration-100); + --system-asset-list-item-font-size: var(--spectrum-font-size-100); + --system-asset-list-item-font-weight: var(--spectrum-regular-font-weight); + --system-asset-list-item-background-color-down: var(--spectrum-gray-300); + --system-asset-list-item-background-color-hover: var(--spectrum-gray-200); + --system-asset-list-thumbnail-width: var(--spectrum-spacing-400); + --system-asset-list-thumbnail-height: var(--spectrum-spacing-400); + --system-asset-list-thumbnail-margin-inline-start: var(--spectrum-spacing-100); + --system-asset-list-item-label-padding-inline-start: var(--spectrum-spacing-100); + --system-asset-list-label-color: var(--spectrum-neutral-content-color-default); + --system-avatar-color-opacity: 1; + --system-avatar-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-block-size: var(--spectrum-avatar-size-100); + --system-avatar-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-avatar-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-avatar-color-opacity-disabled: var(--spectrum-avatar-opacity-disabled); + --system-avatar-size-50-inline-size: var(--spectrum-avatar-size-50); + --system-avatar-size-50-block-size: var(--spectrum-avatar-size-50); + --system-avatar-size-75-inline-size: var(--spectrum-avatar-size-75); + --system-avatar-size-75-block-size: var(--spectrum-avatar-size-75); + --system-avatar-size-100-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-size-100-block-size: var(--spectrum-avatar-size-100); + --system-avatar-size-200-inline-size: var(--spectrum-avatar-size-200); + --system-avatar-size-200-block-size: var(--spectrum-avatar-size-200); + --system-avatar-size-300-inline-size: var(--spectrum-avatar-size-300); + --system-avatar-size-300-block-size: var(--spectrum-avatar-size-300); + --system-avatar-size-400-inline-size: var(--spectrum-avatar-size-400); + --system-avatar-size-400-block-size: var(--spectrum-avatar-size-400); + --system-avatar-size-500-inline-size: var(--spectrum-avatar-size-500); + --system-avatar-size-500-block-size: var(--spectrum-avatar-size-500); + --system-avatar-size-600-inline-size: var(--spectrum-avatar-size-600); + --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600); + --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700); + --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700); + --system-badge-corner-radius: var(--spectrum-corner-radius-100); + --system-badge-line-height: var(--spectrum-line-height-100); + --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-badge-label-icon-color: var(--spectrum-white); + --system-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --system-badge-background-color-accent: var(--spectrum-accent-background-color-default); + --system-badge-background-color-informative: var(--spectrum-informative-background-color-default); + --system-badge-background-color-negative: var(--spectrum-negative-background-color-default); + --system-badge-background-color-positive: var(--spectrum-positive-background-color-default); + --system-badge-background-color-notice: var(--spectrum-notice-background-color-default); + --system-badge-background-color-gray: var(--spectrum-gray-background-color-default); + --system-badge-background-color-red: var(--spectrum-red-background-color-default); + --system-badge-background-color-orange: var(--spectrum-orange-background-color-default); + --system-badge-background-color-yellow: var(--spectrum-yellow-background-color-default); + --system-badge-background-color-chartreuse: var(--spectrum-chartreuse-background-color-default); + --system-badge-background-color-celery: var(--spectrum-celery-background-color-default); + --system-badge-background-color-green: var(--spectrum-green-background-color-default); + --system-badge-background-color-seafoam: var(--spectrum-seafoam-background-color-default); + --system-badge-background-color-cyan: var(--spectrum-cyan-background-color-default); + --system-badge-background-color-blue: var(--spectrum-blue-background-color-default); + --system-badge-background-color-indigo: var(--spectrum-indigo-background-color-default); + --system-badge-background-color-purple: var(--spectrum-purple-background-color-default); + --system-badge-background-color-fuchsia: var(--spectrum-fuchsia-background-color-default); + --system-badge-background-color-magenta: var(--spectrum-magenta-background-color-default); + --system-badge-height: var(--spectrum-component-height-100); + --system-badge-font-size: var(--spectrum-font-size-100); + --system-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-100); + --system-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-100); + --system-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-100); + --system-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); + --system-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); + --system-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-100); + --system-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100); + --system-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-100); + --system-badge-orange-label-icon-color: var(--spectrum-black); + --system-badge-yellow-label-icon-color: var(--spectrum-black); + --system-badge-chartreuse-label-icon-color: var(--spectrum-black); + --system-badge-celery-label-icon-color: var(--spectrum-black); + --system-badge-gray-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-red-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-green-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-seafoam-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-cyan-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-blue-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-indigo-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-purple-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-fuchsia-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-magenta-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --system-badge-size-s-height: var(--spectrum-component-height-75); + --system-badge-size-s-font-size: var(--spectrum-font-size-75); + --system-badge-size-s-label-spacing-vertical-top: var(--spectrum-component-top-to-text-75); + --system-badge-size-s-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-75); + --system-badge-size-s-label-spacing-horizontal: var(--spectrum-component-edge-to-text-75); + --system-badge-size-s-workflow-icon-size: var(--spectrum-workflow-icon-size-75); + --system-badge-size-s-icon-text-spacing: var(--spectrum-text-to-visual-75); + --system-badge-size-s-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-75); + --system-badge-size-s-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-75); + --system-badge-size-s-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-75); + --system-badge-size-l-height: var(--spectrum-component-height-100); + --system-badge-size-l-font-size: var(--spectrum-font-size-200); + --system-badge-size-l-label-spacing-vertical-top: var(--spectrum-component-top-to-text-200); + --system-badge-size-l-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-200); + --system-badge-size-l-label-spacing-horizontal: var(--spectrum-component-edge-to-text-200); + --system-badge-size-l-workflow-icon-size: var(--spectrum-workflow-icon-size-200); + --system-badge-size-l-icon-text-spacing: var(--spectrum-text-to-visual-200); + --system-badge-size-l-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-200); + --system-badge-size-l-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-200); + --system-badge-size-l-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-200); + --system-badge-size-xl-height: var(--spectrum-component-height-100); + --system-badge-size-xl-font-size: var(--spectrum-font-size-300); + --system-badge-size-xl-label-spacing-vertical-top: var(--spectrum-component-top-to-text-300); + --system-badge-size-xl-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-300); + --system-badge-size-xl-label-spacing-horizontal: var(--spectrum-component-edge-to-text-300); + --system-badge-size-xl-workflow-icon-size: var(--spectrum-workflow-icon-size-300); + --system-badge-size-xl-icon-text-spacing: var(--spectrum-text-to-visual-300); + --system-badge-size-xl-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-300); + --system-badge-size-xl-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-300); + --system-badge-size-xl-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-300); + --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); + --system-breadcrumbs-block-size-compact: var(--spectrum-breadcrumbs-height-compact); + --system-breadcrumbs-block-size-multiline: var(--spectrum-breadcrumbs-height-multiline); + --system-breadcrumbs-line-height: var(--spectrum-line-height-100); + --system-breadcrumbs-font-size: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); + --system-breadcrumbs-font-size-current: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family-current: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); + --system-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); + --system-breadcrumbs-font-family-compact: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight-compact: var(--spectrum-regular-font-weight); + --system-breadcrumbs-font-size-compact-current: var(--spectrum-font-size-100); + --system-breadcrumbs-font-family-compact-current: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight-compact-current: var(--spectrum-bold-font-weight); + --system-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); + --system-breadcrumbs-font-family-multiline: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight-multiline: var(--spectrum-regular-font-weight); + --system-breadcrumbs-font-size-multiline-current: var(--spectrum-font-size-300); + --system-breadcrumbs-font-family-multiline-current: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight-multiline-current: var(--spectrum-bold-font-weight); + --system-breadcrumbs-text-decoration-thickness: var(--spectrum-text-underline-thickness); + --system-breadcrumbs-text-decoration-gap: var(--spectrum-text-underline-gap); + --system-breadcrumbs-separator-spacing-inline: var(--spectrum-text-to-visual-100); + --system-breadcrumbs-text-spacing-block-start: var(--spectrum-breadcrumbs-top-to-text); + --system-breadcrumbs-text-spacing-block-end: var(--spectrum-breadcrumbs-bottom-to-text); + --system-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-icon); + --system-breadcrumbs-text-spacing-block-start-compact: var(--spectrum-breadcrumbs-top-to-text-compact); + --system-breadcrumbs-text-spacing-block-end-compact: var(--spectrum-breadcrumbs-bottom-to-text-compact); + --system-breadcrumbs-icon-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-separator-icon-compact); + --system-breadcrumbs-text-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-text-multiline); + --system-breadcrumbs-text-spacing-block-end-multiline: var(--spectrum-breadcrumbs-bottom-to-text-multiline); + --system-breadcrumbs-text-spacing-block-between-multiline: var(--spectrum-breadcrumbs-top-text-to-bottom-text); + --system-breadcrumbs-icon-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-separator-icon-multiline); + --system-breadcrumbs-icon-spacing-block-between-multiline: var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline); + --system-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text); + --system-breadcrumbs-inline-end: var(--spectrum-breadcrumbs-end-edge-to-text); + --system-breadcrumbs-action-button-spacing-inline: var(--spectrum-breadcrumbs-truncated-menu-to-separator-icon); + --system-breadcrumbs-action-button-spacing-block: var(--spectrum-breadcrumbs-top-to-truncated-menu); + --system-breadcrumbs-action-button-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); + --system-breadcrumbs-action-button-spacing-inline-start: var(--spectrum-breadcrumbs-start-edge-to-truncated-menu); + --system-breadcrumbs-action-button-spacing-block-multiline: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); + --system-breadcrumbs-action-button-spacing-block-between-multiline: var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text); + --system-breadcrumbs-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-breadcrumbs-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-breadcrumbs-item-link-border-radius: var(--spectrum-corner-radius-100); + --system-breadcrumbs-text-color: var(--spectrum-neutral-subdued-content-color-default); + --system-breadcrumbs-text-color-current: var(--spectrum-neutral-content-color-default); + --system-breadcrumbs-text-color-disabled: var(--spectrum-disabled-content-color); + --system-breadcrumbs-separator-color: var(--spectrum-neutral-content-color-default); + --system-breadcrumbs-action-button-color: var(--spectrum-neutral-subdued-content-color-default); + --system-breadcrumbs-action-button-color-disabled: var(--spectrum-disabled-content-color); + --system-breadcrumbs-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-button-animation-duration: var(--spectrum-animation-duration-100); + --system-button-border-radius: var(--spectrum-corner-radius-100); + --system-button-border-width: var(--spectrum-border-width-200); + --system-button-line-height: 1.2; + --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-button-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); + --system-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-50); + --system-button-background-color-default: var(--spectrum-gray-75); + --system-button-background-color-hover: var(--spectrum-gray-200); + --system-button-background-color-down: var(--spectrum-gray-300); + --system-button-background-color-focus: var(--spectrum-gray-200); + --system-button-border-color-default: var(--spectrum-gray-400); + --system-button-border-color-hover: var(--spectrum-gray-500); + --system-button-border-color-down: var(--spectrum-gray-600); + --system-button-border-color-focus: var(--spectrum-gray-500); + --system-button-content-color-default: var(--spectrum-neutral-content-color-default); + --system-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-button-content-color-down: var(--spectrum-neutral-content-color-down); + --system-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-button-background-color-disabled: transparent; + --system-button-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-accent-background-color-default: var(--spectrum-accent-background-color-default); + --system-button-accent-background-color-hover: var(--spectrum-accent-background-color-hover); + --system-button-accent-background-color-down: var(--spectrum-accent-background-color-down); + --system-button-accent-background-color-focus: var(--spectrum-accent-background-color-key-focus); + --system-button-accent-border-color-default: transparent; + --system-button-accent-border-color-hover: transparent; + --system-button-accent-border-color-down: transparent; + --system-button-accent-border-color-focus: transparent; + --system-button-accent-content-color-default: var(--spectrum-white); + --system-button-accent-content-color-hover: var(--spectrum-white); + --system-button-accent-content-color-down: var(--spectrum-white); + --system-button-accent-content-color-focus: var(--spectrum-white); + --system-button-accent-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-accent-border-color-disabled: transparent; + --system-button-accent-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-accent-outline-background-color-default: transparent; + --system-button-accent-outline-background-color-hover: var(--spectrum-accent-color-200); + --system-button-accent-outline-background-color-down: var(--spectrum-accent-color-300); + --system-button-accent-outline-background-color-focus: var(--spectrum-accent-color-200); + --system-button-accent-outline-border-color-default: var(--spectrum-accent-color-900); + --system-button-accent-outline-border-color-hover: var(--spectrum-accent-color-1000); + --system-button-accent-outline-border-color-down: var(--spectrum-accent-color-1100); + --system-button-accent-outline-border-color-focus: var(--spectrum-accent-color-1000); + --system-button-accent-outline-content-color-default: var(--spectrum-accent-content-color-default); + --system-button-accent-outline-content-color-hover: var(--spectrum-accent-content-color-hover); + --system-button-accent-outline-content-color-down: var(--spectrum-accent-content-color-down); + --system-button-accent-outline-content-color-focus: var(--spectrum-accent-content-color-key-focus); + --system-button-accent-outline-background-color-disabled: transparent; + --system-button-accent-outline-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-accent-outline-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-negative-background-color-default: var(--spectrum-negative-background-color-default); + --system-button-negative-background-color-hover: var(--spectrum-negative-background-color-hover); + --system-button-negative-background-color-down: var(--spectrum-negative-background-color-down); + --system-button-negative-background-color-focus: var(--spectrum-negative-background-color-key-focus); + --system-button-negative-border-color-default: transparent; + --system-button-negative-border-color-hover: transparent; + --system-button-negative-border-color-down: transparent; + --system-button-negative-border-color-focus: transparent; + --system-button-negative-content-color-default: var(--spectrum-white); + --system-button-negative-content-color-hover: var(--spectrum-white); + --system-button-negative-content-color-down: var(--spectrum-white); + --system-button-negative-content-color-focus: var(--spectrum-white); + --system-button-negative-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-negative-border-color-disabled: transparent; + --system-button-negative-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-negative-outline-background-color-default: transparent; + --system-button-negative-outline-background-color-hover: var(--spectrum-negative-color-200); + --system-button-negative-outline-background-color-down: var(--spectrum-negative-color-300); + --system-button-negative-outline-background-color-focus: var(--spectrum-negative-color-200); + --system-button-negative-outline-border-color-default: var(--spectrum-negative-color-900); + --system-button-negative-outline-border-color-hover: var(--spectrum-negative-color-1000); + --system-button-negative-outline-border-color-down: var(--spectrum-negative-color-1100); + --system-button-negative-outline-border-color-focus: var(--spectrum-negative-color-1000); + --system-button-negative-outline-content-color-default: var(--spectrum-negative-content-color-default); + --system-button-negative-outline-content-color-hover: var(--spectrum-negative-content-color-hover); + --system-button-negative-outline-content-color-down: var(--spectrum-negative-content-color-down); + --system-button-negative-outline-content-color-focus: var(--spectrum-negative-content-color-key-focus); + --system-button-negative-outline-background-color-disabled: transparent; + --system-button-negative-outline-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-negative-outline-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-primary-background-color-default: var(--spectrum-neutral-background-color-default); + --system-button-primary-background-color-hover: var(--spectrum-neutral-background-color-hover); + --system-button-primary-background-color-down: var(--spectrum-neutral-background-color-down); + --system-button-primary-background-color-focus: var(--spectrum-neutral-background-color-key-focus); + --system-button-primary-border-color-default: transparent; + --system-button-primary-border-color-hover: transparent; + --system-button-primary-border-color-down: transparent; + --system-button-primary-border-color-focus: transparent; + --system-button-primary-content-color-default: var(--spectrum-white); + --system-button-primary-content-color-hover: var(--spectrum-white); + --system-button-primary-content-color-down: var(--spectrum-white); + --system-button-primary-content-color-focus: var(--spectrum-white); + --system-button-primary-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-primary-border-color-disabled: transparent; + --system-button-primary-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-primary-outline-background-color-default: transparent; + --system-button-primary-outline-background-color-hover: var(--spectrum-gray-300); + --system-button-primary-outline-background-color-down: var(--spectrum-gray-400); + --system-button-primary-outline-background-color-focus: var(--spectrum-gray-300); + --system-button-primary-outline-border-color-default: var(--spectrum-gray-800); + --system-button-primary-outline-border-color-hover: var(--spectrum-gray-900); + --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); + --system-button-primary-outline-border-color-focus: var(--spectrum-gray-900); + --system-button-primary-outline-content-color-default: var(--spectrum-neutral-content-color-default); + --system-button-primary-outline-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-button-primary-outline-content-color-down: var(--spectrum-neutral-content-color-down); + --system-button-primary-outline-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-button-primary-outline-background-color-disabled: transparent; + --system-button-primary-outline-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-primary-outline-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-secondary-background-color-default: var(--spectrum-gray-200); + --system-button-secondary-background-color-hover: var(--spectrum-gray-300); + --system-button-secondary-background-color-down: var(--spectrum-gray-400); + --system-button-secondary-background-color-focus: var(--spectrum-gray-300); + --system-button-secondary-border-color-default: transparent; + --system-button-secondary-border-color-hover: transparent; + --system-button-secondary-border-color-down: transparent; + --system-button-secondary-border-color-focus: transparent; + --system-button-secondary-content-color-default: var(--spectrum-neutral-content-color-default); + --system-button-secondary-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-button-secondary-content-color-down: var(--spectrum-neutral-content-color-down); + --system-button-secondary-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-button-secondary-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-secondary-border-color-disabled: transparent; + --system-button-secondary-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-secondary-outline-background-color-default: transparent; + --system-button-secondary-outline-background-color-hover: var(--spectrum-gray-300); + --system-button-secondary-outline-background-color-down: var(--spectrum-gray-400); + --system-button-secondary-outline-background-color-focus: var(--spectrum-gray-300); + --system-button-secondary-outline-border-color-default: var(--spectrum-gray-300); + --system-button-secondary-outline-border-color-hover: var(--spectrum-gray-400); + --system-button-secondary-outline-border-color-down: var(--spectrum-gray-500); + --system-button-secondary-outline-border-color-focus: var(--spectrum-gray-400); + --system-button-secondary-outline-content-color-default: var(--spectrum-neutral-content-color-default); + --system-button-secondary-outline-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-button-secondary-outline-content-color-down: var(--spectrum-neutral-content-color-down); + --system-button-secondary-outline-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-button-secondary-outline-background-color-disabled: transparent; + --system-button-secondary-outline-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-secondary-outline-content-color-disabled: var(--spectrum-disabled-content-color); + --system-button-quiet-background-color-default: transparent; + --system-button-quiet-background-color-hover: var(--spectrum-gray-100); + --system-button-quiet-background-color-down: var(--spectrum-gray-200); + --system-button-quiet-background-color-focus: var(--spectrum-gray-100); + --system-button-quiet-border-color-default: transparent; + --system-button-quiet-border-color-hover: transparent; + --system-button-quiet-border-color-down: transparent; + --system-button-quiet-border-color-focus: transparent; + --system-button-quiet-background-color-disabled: transparent; + --system-button-quiet-border-color-disabled: transparent; + --system-button-selected-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --system-button-selected-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); + --system-button-selected-background-color-down: var(--spectrum-neutral-subdued-background-color-down); + --system-button-selected-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); + --system-button-selected-border-color-default: transparent; + --system-button-selected-border-color-hover: transparent; + --system-button-selected-border-color-down: transparent; + --system-button-selected-border-color-focus: transparent; + --system-button-selected-content-color-default: var(--spectrum-white); + --system-button-selected-content-color-hover: var(--spectrum-white); + --system-button-selected-content-color-down: var(--spectrum-white); + --system-button-selected-content-color-focus: var(--spectrum-white); + --system-button-selected-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-selected-border-color-disabled: transparent; + --system-button-selected-emphasized-background-color-default: var(--spectrum-accent-background-color-default); + --system-button-selected-emphasized-background-color-hover: var(--spectrum-accent-background-color-hover); + --system-button-selected-emphasized-background-color-down: var(--spectrum-accent-background-color-down); + --system-button-selected-emphasized-background-color-focus: var(--spectrum-accent-background-color-key-focus); + --system-button-static-black-quiet-border-color-default: transparent; + --system-button-static-white-quiet-border-color-default: transparent; + --system-button-static-black-quiet-border-color-hover: transparent; + --system-button-static-white-quiet-border-color-hover: transparent; + --system-button-static-black-quiet-border-color-down: transparent; + --system-button-static-white-quiet-border-color-down: transparent; + --system-button-static-black-quiet-border-color-focus: transparent; + --system-button-static-white-quiet-border-color-focus: transparent; + --system-button-static-black-quiet-border-color-disabled: transparent; + --system-button-static-white-quiet-border-color-disabled: transparent; + --system-button-static-white-background-color-default: var(--spectrum-transparent-white-800); + --system-button-static-white-background-color-hover: var(--spectrum-transparent-white-900); + --system-button-static-white-background-color-down: var(--spectrum-transparent-white-900); + --system-button-static-white-background-color-focus: var(--spectrum-transparent-white-900); + --system-button-static-white-border-color-default: transparent; + --system-button-static-white-border-color-hover: transparent; + --system-button-static-white-border-color-down: transparent; + --system-button-static-white-border-color-focus: transparent; + --system-button-static-white-content-color-default: var(--spectrum-black); + --system-button-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-button-static-white-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --system-button-static-white-border-color-disabled: transparent; + --system-button-static-white-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-button-static-white-outline-background-color-default: transparent; + --system-button-static-white-outline-background-color-hover: var(--spectrum-transparent-white-300); + --system-button-static-white-outline-background-color-down: var(--spectrum-transparent-white-400); + --system-button-static-white-outline-background-color-focus: var(--spectrum-transparent-white-300); + --system-button-static-white-outline-border-color-default: var(--spectrum-transparent-white-800); + --system-button-static-white-outline-border-color-hover: var(--spectrum-transparent-white-900); + --system-button-static-white-outline-border-color-down: var(--spectrum-transparent-white-900); + --system-button-static-white-outline-border-color-focus: var(--spectrum-transparent-white-900); + --system-button-static-white-outline-content-color-default: var(--spectrum-white); + --system-button-static-white-outline-content-color-hover: var(--spectrum-white); + --system-button-static-white-outline-content-color-down: var(--spectrum-white); + --system-button-static-white-outline-content-color-focus: var(--spectrum-white); + --system-button-static-white-outline-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-button-static-white-outline-background-color-disabled: transparent; + --system-button-static-white-outline-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --system-button-static-white-outline-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-button-static-white-selected-background-color-default: var(--spectrum-transparent-white-800); + --system-button-static-white-selected-background-color-hover: var(--spectrum-transparent-white-900); + --system-button-static-white-selected-background-color-down: var(--spectrum-transparent-white-900); + --system-button-static-white-selected-background-color-focus: var(--spectrum-transparent-white-900); + --system-button-static-white-selected-static-white-content-color-default: var(--spectrum-black); + --system-button-static-white-selected-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-selected-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-selected-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-selected-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --system-button-static-white-selected-border-color-disabled: transparent; + --system-button-static-white-secondary-background-color-default: var(--spectrum-transparent-white-200); + --system-button-static-white-secondary-background-color-hover: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-background-color-down: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-background-color-focus: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-border-color-default: transparent; + --system-button-static-white-secondary-border-color-hover: transparent; + --system-button-static-white-secondary-border-color-down: transparent; + --system-button-static-white-secondary-border-color-focus: transparent; + --system-button-static-white-secondary-content-color-default: var(--spectrum-white); + --system-button-static-white-secondary-content-color-hover: var(--spectrum-white); + --system-button-static-white-secondary-content-color-down: var(--spectrum-white); + --system-button-static-white-secondary-content-color-focus: var(--spectrum-white); + --system-button-static-white-secondary-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-button-static-white-secondary-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --system-button-static-white-secondary-border-color-disabled: transparent; + --system-button-static-white-secondary-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-button-static-white-secondary-outline-background-color-default: transparent; + --system-button-static-white-secondary-outline-background-color-hover: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-outline-background-color-down: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-outline-background-color-focus: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-outline-border-color-default: var(--spectrum-transparent-white-300); + --system-button-static-white-secondary-outline-border-color-hover: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-outline-border-color-down: var(--spectrum-transparent-white-500); + --system-button-static-white-secondary-outline-border-color-focus: var(--spectrum-transparent-white-400); + --system-button-static-white-secondary-outline-content-color-default: var(--spectrum-white); + --system-button-static-white-secondary-outline-content-color-hover: var(--spectrum-white); + --system-button-static-white-secondary-outline-content-color-down: var(--spectrum-white); + --system-button-static-white-secondary-outline-content-color-focus: var(--spectrum-white); + --system-button-static-white-secondary-outline-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-button-static-white-secondary-outline-background-color-disabled: transparent; + --system-button-static-white-secondary-outline-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --system-button-static-white-secondary-outline-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-button-static-black-background-color-default: var(--spectrum-transparent-black-800); + --system-button-static-black-background-color-hover: var(--spectrum-transparent-black-900); + --system-button-static-black-background-color-down: var(--spectrum-transparent-black-900); + --system-button-static-black-background-color-focus: var(--spectrum-transparent-black-900); + --system-button-static-black-border-color-default: transparent; + --system-button-static-black-border-color-hover: transparent; + --system-button-static-black-border-color-down: transparent; + --system-button-static-black-border-color-focus: transparent; + --system-button-static-black-content-color-default: var(--spectrum-white); + --system-button-static-black-content-color-hover: var(--spectrum-white); + --system-button-static-black-content-color-down: var(--spectrum-white); + --system-button-static-black-content-color-focus: var(--spectrum-white); + --system-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-button-static-black-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --system-button-static-black-border-color-disabled: transparent; + --system-button-static-black-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-button-static-black-outline-background-color-default: transparent; + --system-button-static-black-outline-background-color-hover: var(--spectrum-transparent-black-300); + --system-button-static-black-outline-background-color-down: var(--spectrum-transparent-black-400); + --system-button-static-black-outline-background-color-focus: var(--spectrum-transparent-black-300); + --system-button-static-black-outline-border-color-default: var(--spectrum-transparent-black-400); + --system-button-static-black-outline-border-color-hover: var(--spectrum-transparent-black-500); + --system-button-static-black-outline-border-color-down: var(--spectrum-transparent-black-600); + --system-button-static-black-outline-border-color-focus: var(--spectrum-transparent-black-500); + --system-button-static-black-outline-content-color-default: var(--spectrum-black); + --system-button-static-black-outline-content-color-hover: var(--spectrum-black); + --system-button-static-black-outline-content-color-down: var(--spectrum-black); + --system-button-static-black-outline-content-color-focus: var(--spectrum-black); + --system-button-static-black-outline-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-button-static-black-outline-background-color-disabled: transparent; + --system-button-static-black-outline-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --system-button-static-black-outline-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-button-static-black-secondary-background-color-default: var(--spectrum-transparent-black-200); + --system-button-static-black-secondary-background-color-hover: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-background-color-down: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-background-color-focus: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-border-color-default: transparent; + --system-button-static-black-secondary-border-color-hover: transparent; + --system-button-static-black-secondary-border-color-down: transparent; + --system-button-static-black-secondary-border-color-focus: transparent; + --system-button-static-black-secondary-content-color-default: var(--spectrum-black); + --system-button-static-black-secondary-content-color-hover: var(--spectrum-black); + --system-button-static-black-secondary-content-color-down: var(--spectrum-black); + --system-button-static-black-secondary-content-color-focus: var(--spectrum-black); + --system-button-static-black-secondary-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-button-static-black-secondary-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --system-button-static-black-secondary-border-color-disabled: transparent; + --system-button-static-black-secondary-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-button-static-black-secondary-outline-background-color-default: transparent; + --system-button-static-black-secondary-outline-background-color-hover: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-outline-background-color-down: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-outline-background-color-focus: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-outline-border-color-default: var(--spectrum-transparent-black-300); + --system-button-static-black-secondary-outline-border-color-hover: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-outline-border-color-down: var(--spectrum-transparent-black-500); + --system-button-static-black-secondary-outline-border-color-focus: var(--spectrum-transparent-black-400); + --system-button-static-black-secondary-outline-content-color-default: var(--spectrum-black); + --system-button-static-black-secondary-outline-content-color-hover: var(--spectrum-black); + --system-button-static-black-secondary-outline-content-color-down: var(--spectrum-black); + --system-button-static-black-secondary-outline-content-color-focus: var(--spectrum-black); + --system-button-static-black-secondary-outline-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-button-static-black-secondary-outline-background-color-disabled: transparent; + --system-button-static-black-secondary-outline-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --system-button-static-black-secondary-outline-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-button-size-s-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-s-border-radius: var(--spectrum-component-pill-edge-to-text-75); + --system-button-size-s-height: var(--spectrum-component-height-75); + --system-button-size-s-font-size: var(--spectrum-font-size-75); + --system-button-size-s-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--system-button-border-width)); + --system-button-size-s-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75); + --system-button-size-s-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--system-button-border-width)); + --system-button-size-s-padding-label-to-icon: var(--spectrum-text-to-visual-75); + --system-button-size-s-top-to-text: var(--spectrum-button-top-to-text-small); + --system-button-size-s-bottom-to-text: var(--spectrum-button-bottom-to-text-small); + --system-button-size-s-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75); + --system-button-size-s-intended-icon-size: var(--spectrum-workflow-icon-size-75); + --system-button-size-m-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-m-border-radius: var(--spectrum-component-pill-edge-to-text-100); + --system-button-size-m-height: var(--spectrum-component-height-100); + --system-button-size-m-font-size: var(--spectrum-font-size-100); + --system-button-size-m-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--system-button-border-width)); + --system-button-size-m-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100); + --system-button-size-m-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--system-button-border-width)); + --system-button-size-m-padding-label-to-icon: var(--spectrum-text-to-visual-100); + --system-button-size-m-top-to-text: var(--spectrum-button-top-to-text-medium); + --system-button-size-m-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); + --system-button-size-m-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); + --system-button-size-m-intended-icon-size: var(--spectrum-workflow-icon-size-100); + --system-button-size-l-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-l-border-radius: var(--spectrum-component-pill-edge-to-text-200); + --system-button-size-l-height: var(--spectrum-component-height-200); + --system-button-size-l-font-size: var(--spectrum-font-size-200); + --system-button-size-l-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--system-button-border-width)); + --system-button-size-l-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200); + --system-button-size-l-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--system-button-border-width)); + --system-button-size-l-padding-label-to-icon: var(--spectrum-text-to-visual-200); + --system-button-size-l-top-to-text: var(--spectrum-button-top-to-text-large); + --system-button-size-l-bottom-to-text: var(--spectrum-button-bottom-to-text-large); + --system-button-size-l-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200); + --system-button-size-l-intended-icon-size: var(--spectrum-workflow-icon-size-200); + --system-button-size-xl-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-xl-border-radius: var(--spectrum-component-pill-edge-to-text-300); + --system-button-size-xl-height: var(--spectrum-component-height-300); + --system-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-button-size-xl-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--system-button-border-width)); + --system-button-size-xl-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300); + --system-button-size-xl-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--system-button-border-width)); + --system-button-size-xl-padding-label-to-icon: var(--spectrum-text-to-visual-300); + --system-button-size-xl-top-to-text: var(--spectrum-button-top-to-text-extra-large); + --system-button-size-xl-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large); + --system-button-size-xl-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300); + --system-button-size-xl-intended-icon-size: var(--spectrum-workflow-icon-size-300); + --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-s-spacing-horizontal: var(--spectrum-spacing-200); + --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200); + --system-button-group-size-m-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-l-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-size-l-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-xl-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300); + --system-calendar-day-width: var(--spectrum-component-height-100); + --system-calendar-day-height: var(--spectrum-component-height-100); + --system-calendar-border-radius-reset: 0; + --system-calendar-border-width-reset: 0; + --system-calendar-day-border-size: var(--spectrum-border-width-200); + --system-calendar-margin-y: 24px; + --system-calendar-margin-x: 32px; + --system-calendar-day-padding: 4px; + --system-calendar-width: calc((var(--system-calendar-day-width) + var(--system-calendar-day-padding) * 2) * 7); + --system-calendar-title-text-letter-spacing: 0.06em; + --system-calendar-title-height: 32px; + --system-calendar-title-text-size: var(--spectrum-font-size-300); + --system-calendar-day-title-text-font-weight: var(--spectrum-bold-font-weight); + --system-calendar-day-title-text-color: var(--spectrum-gray-700); + --system-calendar-day-title-text-size: var(--spectrum-font-size-50); + --system-calendar-day-text-size-han: var(--spectrum-font-size-50); + --system-calendar-day-text-size: var(--spectrum-font-size-100); + --system-calendar-day-text-color-selected: var(--spectrum-gray-900); + --system-calendar-day-text-color-hover: var(--spectrum-gray-900); + --system-calendar-day-text-color-cap-selected: var(--spectrum-gray-900); + --system-calendar-day-text-font-weight-selected: var(--spectrum-bold-font-weight); + --system-calendar-day-text-font-weight-cap-selected: var(--spectrum-bold-font-weight); + --system-calendar-day-today-text-color: var(--spectrum-gray-800); + --system-calendar-day-today-text-font-weight: var(--spectrum-bold-font-weight); + --system-calendar-day-today-border-color: var(--spectrum-gray-800); + --system-calendar-day-today-text-color-disabled: var(--spectrum-gray-500); + --system-calendar-day-today-border-color-disabled: var(--spectrum-gray-400); + --system-calendar-day-text-color-disabled: var(--spectrum-disabled-content-color); + --system-calendar-day-text-color-key-focus: var(--spectrum-gray-900); + --system-calendar-button-icon-color: var(--spectrum-gray-700); + --system-card-background-color: var(--spectrum-background-layer-2-color); + --system-card-body-spacing: var(--spectrum-spacing-400); + --system-card-title-padding-top: var(--spectrum-spacing-300); + --system-card-title-padding-right: var(--spectrum-spacing-400); + --system-card-content-margin-top: var(--spectrum-spacing-100); + --system-card-content-margin-bottom: var(--spectrum-spacing-300); + --system-card-footer-padding-top: var(--spectrum-spacing-100); + --system-card-subtitle-padding-right: var(--spectrum-spacing-100); + --system-card-border-width: var(--spectrum-border-width-100); + --system-card-corner-radius: var(--spectrum-corner-radius-100); + --system-card-border-color: var(--spectrum-gray-200); + --system-card-border-color-hover: var(--spectrum-gray-300); + --system-card-border-color-selected: var(--spectrum-blue-700); + --system-card-divider-color: var(--spectrum-gray-300); + --system-card-title-font-family: var(--spectrum-sans-font-family-stack); + --system-card-title-font-size: var(--spectrum-heading-size-xxs); + --system-card-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-card-title-font-style: var(--spectrum-heading-sans-serif-font-style); + --system-card-title-line-height: var(--spectrum-heading-line-height); + --system-card-title-font-color: var(--spectrum-heading-color); + --system-card-body-font-family: var(--spectrum-sans-font-family-stack); + --system-card-body-font-size: var(--spectrum-body-size-s); + --system-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-card-body-font-style: var(--spectrum-body-sans-serif-font-style); + --system-card-body-line-height: var(--spectrum-body-line-height); + --system-card-body-font-color: var(--spectrum-body-color); + --system-card-actions-spacing: var(--spectrum-spacing-300); + --system-card-actions-size: var(--spectrum-card-selection-background-size); + --system-card-actions-border-radius: var(--spectrum-corner-radius-100); + --system-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); + --system-card-actions-background-color-opacity: var(--spectrum-card-selection-background-color-opacity); + --system-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); + --system-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); + --system-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-card-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-card-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --system-card-selected-background-opacity: 0.1; + --system-card-preview-border-width-selected: var(--spectrum-border-width-100); + --system-card-preview-background-color: var(--spectrum-background-base-color); + --system-card-preview-background-color-hover: var(--spectrum-gray-300); + --system-card-horizontal-body-padding: var(--spectrum-spacing-300); + --system-card-horizontal-preview-padding: var(--spectrum-spacing-200); + --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); + --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); + --system-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); + --system-card-dark-selected-background-color-rgb: var(--spectrum-blue-500-rgb); + --system-card-darkest-selected-background-color-rgb: var(--spectrum-blue-600-rgb); + --system-checkbox-control-color-default: var(--spectrum-gray-600); + --system-checkbox-control-color-hover: var(--spectrum-gray-700); + --system-checkbox-control-color-down: var(--spectrum-gray-800); + --system-checkbox-control-color-focus: var(--spectrum-gray-700); + --system-checkbox-content-color-default: var(--spectrum-neutral-content-color-default); + --system-checkbox-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-checkbox-content-color-down: var(--spectrum-neutral-content-color-down); + --system-checkbox-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-checkbox-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-checkbox-content-color-disabled: var(--spectrum-disabled-content-color); + --system-checkbox-control-color-disabled: var(--spectrum-disabled-content-color); + --system-checkbox-checkmark-color: var(--spectrum-gray-75); + --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); + --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); + --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); + --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); + --system-checkbox-emphasized-color-default: var(--spectrum-accent-color-900); + --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); + --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); + --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); + --system-checkbox-control-selected-color-default: var(--spectrum-neutral-background-color-selected-default); + --system-checkbox-control-selected-color-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-checkbox-control-selected-color-down: var(--spectrum-neutral-background-color-selected-down); + --system-checkbox-control-selected-color-focus: var(--spectrum-neutral-background-color-selected-key-focus); + --system-checkbox-line-height: var(--spectrum-line-height-100); + --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); + --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-checkbox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-checkbox-border-width: var(--spectrum-border-width-200); + --system-checkbox-animation-duration: var(--spectrum-animation-duration-100); + --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); + --system-checkbox-size-s-height: var(--spectrum-component-height-75); + --system-checkbox-size-s-control-size: var(--spectrum-checkbox-control-size-small); + --system-checkbox-size-s-top-to-text: var(--spectrum-component-top-to-text-75); + --system-checkbox-size-s-text-to-control: var(--spectrum-text-to-control-75); + --system-checkbox-font-size: var(--spectrum-font-size-100); + --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); + --system-checkbox-height: var(--spectrum-component-height-100); + --system-checkbox-size-m-height: var(--spectrum-component-height-100); + --system-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); + --system-checkbox-size-m-control-size: var(--spectrum-checkbox-control-size-medium); + --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); + --system-checkbox-size-m-top-to-text: var(--spectrum-component-top-to-text-100); + --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); + --system-checkbox-size-m-text-to-control: var(--spectrum-text-to-control-100); + --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); + --system-checkbox-size-l-height: var(--spectrum-component-height-200); + --system-checkbox-size-l-control-size: var(--spectrum-checkbox-control-size-large); + --system-checkbox-size-l-top-to-text: var(--spectrum-component-top-to-text-200); + --system-checkbox-size-l-text-to-control: var(--spectrum-text-to-control-200); + --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); + --system-checkbox-size-xl-height: var(--spectrum-component-height-300); + --system-checkbox-size-xl-control-size: var(--spectrum-checkbox-control-size-extra-large); + --system-checkbox-size-xl-top-to-text: var(--spectrum-component-top-to-text-300); + --system-checkbox-size-xl-text-to-control: var(--spectrum-text-to-control-300); + --system-clear-button-background-color: transparent; + --system-clear-button-background-color-hover: transparent; + --system-clear-button-background-color-down: transparent; + --system-clear-button-background-color-key-focus: transparent; + --system-clear-button-height: var(--spectrum-component-height-100); + --system-clear-button-width: var(--spectrum-component-height-100); + --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-clear-button-icon-color: var(--spectrum-neutral-content-color-default); + --system-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-clear-button-size-s-height: var(--spectrum-component-height-75); + --system-clear-button-size-s-width: var(--spectrum-component-height-75); + --system-clear-button-size-l-height: var(--spectrum-component-height-200); + --system-clear-button-size-l-width: var(--spectrum-component-height-200); + --system-clear-button-size-xl-height: var(--spectrum-component-height-300); + --system-clear-button-size-xl-width: var(--spectrum-component-height-300); + --system-clear-button-quiet-background-color: var(--spectrum-clear-button-background-color-quiet, transparent); + --system-clear-button-quiet-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent); + --system-clear-button-quiet-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent); + --system-clear-button-quiet-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent); + --system-clear-button-over-background-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white)); + --system-clear-button-over-background-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white)); + --system-clear-button-over-background-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white)); + --system-clear-button-over-background-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white)); + --system-clear-button-over-background-background-color: var(--spectrum-clear-button-background-color-over-background, transparent); + --system-clear-button-over-background-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); + --system-clear-button-over-background-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); + --system-clear-button-over-background-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); + --system-clear-button-disabled-icon-color: var(--spectrum-disabled-content-color); + --system-clear-button-disabled-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); + --system-clear-button-disabled-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); + --system-clear-button-disabled-background-color: transparent; + --system-close-button-background-color-default: transparent; + --system-close-button-background-color-hover: var(--spectrum-gray-200); + --system-close-button-background-color-down: var(--spectrum-gray-300); + --system-close-button-background-color-focus: var(--spectrum-gray-200); + --system-close-button-icon-color-default: var(--spectrum-neutral-content-color-default); + --system-close-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-close-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-close-button-icon-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-close-button-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-close-button-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-close-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-close-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-close-button-animation-duration: var(--spectrum-animation-duration-100); + --system-close-button-size-s-size: var(--spectrum-component-height-75); + --system-close-button-size: var(--spectrum-component-height-100); + --system-close-button-size-m-size: var(--spectrum-component-height-100); + --system-close-button-size-l-size: var(--spectrum-component-height-200); + --system-close-button-size-xl-size: var(--spectrum-component-height-300); + --system-close-button-static-white-static-background-color-default: transparent; + --system-close-button-static-white-static-background-color-hover: var(--spectrum-transparent-white-300); + --system-close-button-static-white-static-background-color-down: var(--spectrum-transparent-white-400); + --system-close-button-static-white-static-background-color-focus: var(--spectrum-transparent-white-300); + --system-close-button-static-white-icon-color-default: var(--spectrum-white); + --system-close-button-static-white-icon-color-disabled: var(--spectrum-disabled-static-white-content-color); + --system-close-button-static-white-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --system-close-button-static-black-static-background-color-default: transparent; + --system-close-button-static-black-static-background-color-hover: var(--spectrum-transparent-black-300); + --system-close-button-static-black-static-background-color-down: var(--spectrum-transparent-black-400); + --system-close-button-static-black-static-background-color-focus: var(--spectrum-transparent-black-300); + --system-close-button-static-black-icon-color-default: var(--spectrum-black); + --system-close-button-static-black-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-close-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); + --system-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); + --system-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); + --system-coach-indicator-inline-size: var(--system-coach-indicator-min-inline-size); + --system-coach-indicator-block-size: var(--system-coach-indicator-min-block-size); + --system-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter); + --system-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter); + --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); + --system-coach-indicator-ring-light-color: var(--spectrum-gray-50); + --system-coach-indicator-top: calc(var(--system-coach-indicator-block-size) / 3 - var(--system-coach-indicator-ring-border-size)); + --system-coach-indicator-left: calc(var(--system-coach-indicator-inline-size) / 3 - var(--system-coach-indicator-ring-border-size)); + --system-coach-indicator-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000); + --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; + --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; + --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; + --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; + --system-coach-indicator-animation-name: pulse; + --system-coach-indicator-inner-animation-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple); + --system-coach-indicator-animation-keyframe-0-scale: 1; + --system-coach-indicator-animation-keyframe-0-opacity: 0; + --system-coach-indicator-animation-keyframe-50-scale: 1.5; + --system-coach-indicator-animation-keyframe-50-opacity: 1; + --system-coach-indicator-animation-keyframe-100-scale: 2; + --system-coach-indicator-animation-keyframe-100-opacity: 0; + --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; + --system-coach-indicator-quiet-quiet-ring-diameter-size: var(--spectrum-coach-indicator-quiet-ring-diameter); + --system-coach-indicator-quiet-animation-name: pulse-quiet; + --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); + --system-coach-mark-width: var(--spectrum-coach-mark-width); + --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); + --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); + --system-coach-mark-media-min-height: var(--spectrum-coach-mark-media-minimum-height); + --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); + --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); + --system-coach-mark-header-to-body: var(--spectrum-spacing-200); + --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); + --system-coach-mark-title-color: var(--spectrum-heading-color); + --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-title-font-style: var(--spectrum-heading-serif-font-style); + --system-coach-mark-title-text-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); + --system-coach-mark-title-text-line-height: var(--spectrum-heading-line-height); + --system-coach-mark-content-font-color: var(--spectrum-body-color); + --system-coach-mark-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-content-font-style: var(--spectrum-body-sans-serif-font-style); + --system-coach-mark-content-line-height: var(--spectrum-body-line-height); + --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); + --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); + --system-coach-mark-step-font-weight: var(--spectrum-body-medium-font-weight); + --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-step-font-style: var(--spectrum-body-sans-serif-font-style); + --system-coach-mark-step-line-height: var(--spectrum-body-line-height); + --system-coach-mark-step-font-size: var(--spectrum-coach-mark-pagination-body-size); + --system-coach-mark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge); + --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); + --system-coach-mark-popover-corner-radius: var(--spectrum-corner-radius-100); + --system-coach-mark-buttongroup-spacing-horizontal: var(--spectrum-spacing-100); + --system-color-area-border-radius: var(--spectrum-color-area-border-rounding); + --system-color-area-border-color-rgb: 0, 0, 0; + --system-color-area-border-color-opacity: 0.1; + --system-color-area-border-color: rgba(var(--system-color-area-border-color-rgb), var(--system-color-area-border-color-opacity)); + --system-color-area-disabled-background-color: var(--spectrum-disabled-background-color); + --system-color-area-border-width: var(--spectrum-color-area-border-width); + --system-color-area-height: var(--spectrum-color-area-height); + --system-color-area-width: var(--spectrum-color-area-width); + --system-color-area-min-width: var(--spectrum-color-area-minimum-width); + --system-color-area-min-height: var(--spectrum-color-area-minimum-height); + --system-color-handle-size: var(--spectrum-color-handle-size); + --system-color-handle-focused-size: var(--spectrum-color-handle-size-key-focus); + --system-color-handle-hitarea-size: var(--spectrum-color-control-track-width); + --system-color-handle-animation-duration: var(--spectrum-animation-duration-100); + --system-color-handle-animation-easing: ease-in-out; + --system-color-handle-outer-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity)); + --system-color-handle-outer-border-width: var(--spectrum-color-handle-outer-border-width); + --system-color-handle-inner-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity)); + --system-color-handle-inner-border-width: var(--spectrum-color-handle-inner-border-width); + --system-color-handle-border-width: var(--spectrum-color-handle-border-width); + --system-color-handle-border-color: var(--spectrum-white); + --system-color-handle-border-color-disabled: var(--spectrum-disabled-content-color); + --system-color-handle-fill-color-disabled: var(--spectrum-disabled-background-color); + --system-color-loupe-width: var(--spectrum-color-loupe-width); + --system-color-loupe-height: var(--spectrum-color-loupe-height); + --system-color-loupe-offset: var(--spectrum-color-loupe-bottom-to-color-handle); + --system-color-loupe-animation-distance: 8px; + --system-color-loupe-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-color-loupe-drop-shadow-y: var(--spectrum-color-loupe-drop-shadow-y); + --system-color-loupe-drop-shadow-blur: var(--spectrum-color-loupe-drop-shadow-blur); + --system-color-loupe-drop-shadow-color: var(--spectrum-color-loupe-drop-shadow-color); + --system-color-loupe-outer-border-width: var(--spectrum-color-loupe-outer-border-width); + --system-color-loupe-inner-border-width: var(--spectrum-color-loupe-inner-border-width); + --system-color-loupe-outer-border-color: var(--spectrum-color-loupe-outer-border); + --system-color-loupe-inner-border-color: var(--spectrum-color-loupe-inner-border); + --system-color-loupe-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark); + --system-color-loupe-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light); + --system-color-slider-handle-margin-block: var(--spectrum-component-top-to-text-75); + --system-color-slider-border-color-rgba: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity)); + --system-color-slider-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size); + --system-color-slider-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark); + --system-color-slider-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light); + --system-color-wheel-width: var(--spectrum-color-wheel-width); + --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); + --system-color-wheel-height: var(--spectrum-color-wheel-width); + --system-color-wheel-border-color: var(--spectrum-transparent-black-200); + --system-color-wheel-border-width: var(--spectrum-border-width-100); + --system-color-wheel-fill-color-disabled: var(--spectrum-disabled-background-color); + --system-color-wheel-track-width: var(--spectrum-color-control-track-width); + --system-color-wheel-colorarea-margin: var(--spectrum-color-wheel-color-area-margin); + --system-color-wheel-colorhandle-position: calc(var(--system-color-wheel-width) / 2 - var(--system-color-wheel-track-width) / 2); + --system-combobox-border-color-default: var(--spectrum-gray-500); + --system-combobox-border-color-hover: var(--spectrum-gray-600); + --system-combobox-border-color-focus: var(--spectrum-gray-500); + --system-combobox-border-color-focus-hover: var(--spectrum-gray-600); + --system-combobox-border-color-key-focus: var(--spectrum-gray-600); + --system-combobox-inline-size: var(--spectrum-field-width); + --system-combobox-minimum-width-multiplier: var(--spectrum-combo-box-minimum-width-multiplier); + --system-combobox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-combobox-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-combobox-border-radius: var(--spectrum-corner-radius-100); + --system-combobox-border-width: var(--spectrum-border-width-100); + --system-combobox-spacing-label-to: var(--spectrum-field-label-to-component); + --system-combobox-font-style: var(--spectrum-default-font-style); + --system-combobox-line-height: var(--spectrum-line-height-100); + --system-combobox-border-color-invalid-default: var(--spectrum-negative-border-color-default); + --system-combobox-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); + --system-combobox-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); + --system-combobox-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); + --system-combobox-border-color-invalid-key-focus: var(--spectrum-negative-border-color-key-focus); + --system-combobox-size-s-block-size: var(--spectrum-component-height-75); + --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-combobox-size-s-font-size: var(--spectrum-font-size-75); + --system-combobox-size-s-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-small); + --system-combobox-size-s-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); + --system-combobox-size-s-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-small); + --system-combobox-size-s-spacing-edge-to-menu: var(--spectrum-component-to-menu-small); + --system-combobox-size-s-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75); + --system-combobox-size-s-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75); + --system-combobox-size-s-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-75); + --system-combobox-size-s-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-75); + --system-combobox-block-size: var(--spectrum-component-height-100); + --system-combobox-size-m-block-size: var(--spectrum-component-height-100); + --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-font-size: var(--spectrum-font-size-100); + --system-combobox-size-m-font-size: var(--spectrum-font-size-100); + --system-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); + --system-combobox-size-m-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); + --system-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); + --system-combobox-size-m-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); + --system-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); + --system-combobox-size-m-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); + --system-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); + --system-combobox-size-m-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); + --system-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); + --system-combobox-size-m-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); + --system-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --system-combobox-size-m-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --system-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-combobox-size-m-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-combobox-size-m-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-combobox-size-l-block-size: var(--spectrum-component-height-200); + --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-combobox-size-l-font-size: var(--spectrum-font-size-200); + --system-combobox-size-l-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-large); + --system-combobox-size-l-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); + --system-combobox-size-l-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-large); + --system-combobox-size-l-spacing-edge-to-menu: var(--spectrum-component-to-menu-large); + --system-combobox-size-l-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200); + --system-combobox-size-l-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200); + --system-combobox-size-l-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-200); + --system-combobox-size-l-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-200); + --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); + --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); + --system-combobox-size-xl-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-extra-large); + --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); + --system-combobox-size-xl-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-extra-large); + --system-combobox-size-xl-spacing-edge-to-menu: var(--spectrum-component-to-menu-extra-large); + --system-combobox-size-xl-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300); + --system-combobox-size-xl-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300); + --system-combobox-size-xl-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-300); + --system-combobox-size-xl-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-300); + --system-combobox-quiet-minimum-width-multiplier: var(--spectrum-combo-box-quiet-minimum-width-multiplier); + --system-combobox-quiet-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-quiet); + --system-combobox-quiet-spacing-inline-start-edge-to-text: var(--spectrum-field-edge-to-text-quiet); + --system-combobox-quiet-size-s-spacing-label-to: var(--spectrum-field-label-to-component-quiet-small); + --system-combobox-quiet-spacing-label-to: var(--spectrum-field-label-to-component-quiet-medium); + --system-combobox-quiet-size-m-spacing-label-to: var(--spectrum-field-label-to-component-quiet-medium); + --system-combobox-quiet-size-l-spacing-label-to: var(--spectrum-field-label-to-component-quiet-large); + --system-combobox-quiet-size-xl-spacing-label-to: var(--spectrum-field-label-to-component-quiet-extra-large); + --system-contextual-help-padding: var(--spectrum-spacing-400); + --system-contextual-help-link-spacing: var(--spectrum-spacing-300); + --system-contextual-help-heading-size: var(--spectrum-contextual-help-title-size); + --system-contextual-help-heading-color: var(--spectrum-heading-color); + --system-contextual-help-body-color: var(--spectrum-body-color); + --system-date-picker-initial-height: var(--spectrum-component-height-100); + --system-date-picker-border-radius: var(--spectrum-corner-radius-100); + --system-date-picker-border-radius-quiet: 0; + --system-date-picker-border-width: var(--spectrum-border-width-100); + --system-date-picker-min-width: var(--spectrum-field-width); + --system-date-picker-icon-size: var(--spectrum-workflow-icon-size-100); + --system-date-picker-pickerbutton-border-color: var(--spectrum-gray-500); + --system-date-picker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default); + --system-date-picker-pickerbutton-width: calc(var(--spectrum-field-edge-to-disclosure-icon-100) * 2 + var(--spectrum-workflow-icon-size-100)); + --system-date-picker-pickerbutton-width-quiet: calc(var(--system-date-picker-pickerbutton-width) - var(--system-date-picker-quiet-button-offset)); + --system-date-picker-quiet-button-offset: var(--spectrum-text-to-visual-100); + --system-date-picker-icon-to-button: var(--spectrum-text-to-visual-100); + --system-date-picker-icon-to-text: var(--spectrum-component-edge-to-text-100); + --system-date-picker-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-date-picker-focus-thickness: var(--spectrum-focus-indicator-thickness); + --system-date-picker-focus-animation: var(--spectrum-animation-duration-100); + --system-date-picker-focus-ring-width: var(--spectrum-border-width-100); + --system-date-picker-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-date-picker-focus-line-gap: var(--spectrum-spacing-75); + --system-date-picker-invalid-quiet-color: var(--spectrum-negative-border-color-default); + --system-date-picker-quiet-border-color-hover: var(--spectrum-gray-500); + --system-date-picker-border-color-disabled: var(--spectrum-disabled-border-color); + --system-date-picker-dash-font-size: var(--spectrum-font-size-100); + --system-date-picker-dash-color: var(--spectrum-neutral-content-color-default); + --system-date-picker-dash-color-disabled: var(--spectrum-disabled-content-color); + --system-date-picker-range-dash-marin-inline-start: calc(var(--system-date-picker-dash-font-size) * -0.5); + --system-date-picker-range-dash-padding-top: 0; + --system-date-picker-input-width-base: calc(var(--system-date-picker-range-input-width-first) + var(--system-date-picker-icon-size)); + --system-date-picker-input-width: calc(var(--system-date-picker-input-width-base) + var(--system-date-picker-initial-height)); + --system-date-picker-input-width-quiet: calc(var(--system-date-picker-range-input-width-quiet-first) + var(--system-date-picker-icon-size) + var(--system-date-picker-initial-height)); + --system-date-picker-range-input-width-first: calc(var(--spectrum-datepicker-initial-width) - var(--spectrum-datepicker-generic-padding) * 2); + --system-date-picker-range-input-width-quiet-first: calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second)); + --system-date-picker-datetime-input-width-first: calc(var(--system-date-picker-input-width-base) + var(--spectrum-datepicker-datetime-width-first)); + --system-date-picker-datetime-input-width: calc(var(--system-date-picker-datetime-input-width-first) + var(--system-date-picker-icon-size) + var(--system-date-picker-initial-height)); + --system-date-picker-datetime-quiet-input-width-first: calc(var(--system-date-picker-input-width-base) + var(--spectrum-datepicker-input-datetime-width)); + --system-date-picker-datetime-quiet-input-width: calc(var(--system-date-picker-datetime-quiet-input-width-first) + var(--system-date-picker-icon-size) + var(--system-date-picker-initial-height)); + --system-date-picker-padding-inline-end: calc(var(--system-date-picker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--system-date-picker-border-width) * 2); + --system-date-picker-padding-inline-end-quiet: calc(var(--system-date-picker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--system-date-picker-quiet-button-offset)); + --system-date-picker-padding-inline-end-invalid: calc(var(--system-date-picker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--system-date-picker-icon-to-button) + var(--system-date-picker-icon-size) - var(--system-date-picker-border-width) * 2); + --system-date-picker-padding-inline-end-invalid-quiet: calc(var(--system-date-picker-pickerbutton-width-quiet) + var(--system-date-picker-icon-size) + var(--system-date-picker-icon-to-text)); + --system-dial-background-color-default: var(--spectrum-gray-100); + --system-dial-handle-marker-color-disabled: var(--spectrum-gray-300); + --system-dial-border-color-disabled: var(--spectrum-gray-300); + --system-dial-handle-marker-color: var(--spectrum-gray-700); + --system-dial-border-color: var(--spectrum-gray-700); + --system-dial-handle-marker-color-down: var(--spectrum-gray-800); + --system-dial-border-color-down: var(--spectrum-gray-800); + --system-dial-handle-marker-color-hover: var(--spectrum-gray-800); + --system-dial-border-color-hover: var(--spectrum-gray-800); + --system-dial-handle-marker-color-key-focus: var(--spectrum-gray-50); + --system-dial-border-color-key-focus: var(--spectrum-gray-50); + --system-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700); + --system-dial-border-color-mouse-focus: var(--spectrum-gray-700); + --system-dial-min-max-tick-color: var(--spectrum-gray-600); + --system-dial-label-text-color: var(--spectrum-gray-700); + --system-dial-label-text-color-disabled: var(--spectrum-gray-700); + --system-dial-handle-border-color-disabled: var(--spectrum-gray-400); + --system-dial-container-width: 48px; + --system-dial-handle-marker-width: 12px; + --system-dial-handle-marker-height: 2px; + --system-dial-handle-marker-border-radius: 1px; + --system-dial-handle-size: 100%; + --system-dial-min-height: 0; + --system-dial-controls-min-height: 0; + --system-dial-min-max-tick-angles: 45deg; + --system-dial-width: 32px; + --system-dial-height: 32px; + --system-dial-handle-border-size: var(--spectrum-border-width-200); + --system-dial-label-text-size: var(--spectrum-font-size-75); + --system-dial-label-line-height: var(--spectrum-line-height-200); + --system-dial-small-width: 24px; + --system-dial-small-height: 24px; + --system-dialog-fullscreen-header-text-size: 28px; + --system-dialog-min-inline-size: 288px; + --system-dialog-confirm-small-width: 400px; + --system-dialog-confirm-medium-width: 480px; + --system-dialog-confirm-large-width: 640px; + --system-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300); + --system-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200); + --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); + --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); + --system-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100); + --system-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100); + --system-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); + --system-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1); + --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); + --system-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100); + --system-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); + --system-dialog-confirm-close-button-size: var(--spectrum-component-height-100); + --system-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300)); + --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); + --system-divider-background-color-small: var(--spectrum-gray-300); + --system-divider-background-color-medium: var(--spectrum-gray-300); + --system-divider-background-color-large: var(--spectrum-gray-800); + --system-divider-background-color-small-static-white: var(--spectrum-transparent-white-300); + --system-divider-background-color-medium-static-white: var(--spectrum-transparent-white-300); + --system-divider-background-color-large-static-white: var(--spectrum-transparent-white-800); + --system-divider-background-color-small-static-black: var(--spectrum-transparent-black-300); + --system-divider-background-color-medium-static-black: var(--spectrum-transparent-black-300); + --system-divider-background-color-large-static-black: var(--spectrum-transparent-black-800); + --system-drop-indicator-border-color: var(--spectrum-dropindicator-color); + --system-drop-indicator-circle-color: var(--spectrum-dropindicator-color); + --system-drop-indicator-border-size: var(--spectrum-border-width-200); + --system-drop-indicator-circle-size: 12px; + --system-drop-zone-padding: var(--spectrum-spacing-400); + --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); + --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); + --system-drop-zone-border-width: var(--spectrum-border-width-200); + --system-drop-zone-corner-radius: var(--spectrum-corner-radius-100); + --system-drop-zone-border-color: var(--spectrum-gray-300); + --system-drop-zone-heading-font-family: var(--spectrum-sans-font-family-stack); + --system-drop-zone-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-drop-zone-heading-font-style: var(--spectrum-heading-sans-serif-font-style); + --system-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); + --system-drop-zone-heading-line-height: var(--spectrum-heading-line-height); + --system-drop-zone-heading-color: var(--spectrum-heading-color); + --system-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); + --system-drop-zone-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-drop-zone-body-font-style: var(--spectrum-body-sans-serif-font-style); + --system-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); + --system-drop-zone-body-line-height: var(--spectrum-body-line-height); + --system-drop-zone-body-color: var(--spectrum-body-color); + --system-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb); + --system-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); + --system-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); + --system-drop-zone-illustration-color-hover: var(--spectrum-accent-visual-color); + --system-drop-zone-content-height: var(--spectrum-component-height-300); + --system-drop-zone-content-max-width: var(--spectrum-drop-zone-content-maximum-width); + --system-drop-zone-content-edge-to-text: var(--spectrum-component-edge-to-text-300); + --system-drop-zone-content-top-to-text: var(--spectrum-component-top-to-text-300); + --system-drop-zone-content-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --system-drop-zone-content-font-family: var(--spectrum-sans-font-family-stack); + --system-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); + --system-drop-zone-content-font-style: var(--spectrum-default-font-style); + --system-drop-zone-content-font-size: var(--spectrum-font-size-300); + --system-drop-zone-content-line-height: var(--spectrum-line-height-100); + --system-drop-zone-content-background-color: var(--spectrum-accent-visual-color); + --system-drop-zone-content-color: var(--spectrum-white); + --system-drop-zone-heading-font-size-cjk: var(--spectrum-drop-zone-cjk-title-size); + --system-field-group-margin: var(--spectrum-spacing-300); + --system-field-group-readonly-delimiter: "\002c"; + --system-field-label-min-height: var(--spectrum-component-height-75); + --system-field-label-color: var(--spectrum-neutral-subdued-content-color-default); + --system-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); + --system-field-label-font-weight: var(--spectrum-regular-font-weight); + --system-field-label-line-height: var(--spectrum-line-height-100); + --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-field-label-size-s-min-height: var(--spectrum-component-height-75); + --system-field-label-size-s-top-to-text: var(--spectrum-component-top-to-text-75); + --system-field-label-size-s-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-field-label-size-s-font-size: var(--spectrum-font-size-75); + --system-field-label-size-s-side-margin-block-start: var(--spectrum-field-label-top-margin-small); + --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); + --system-field-label-size-s-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small); + --system-field-label-size-m-min-height: var(--spectrum-component-height-75); + --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-field-label-size-m-top-to-text: var(--spectrum-component-top-to-text-75); + --system-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-field-label-size-m-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-field-label-font-size: var(--spectrum-font-size-75); + --system-field-label-size-m-font-size: var(--spectrum-font-size-75); + --system-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); + --system-field-label-size-m-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); + --system-field-label-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-m-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); + --system-field-label-size-l-min-height: var(--spectrum-component-height-100); + --system-field-label-size-l-top-to-text: var(--spectrum-component-top-to-text-100); + --system-field-label-size-l-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-field-label-size-l-font-size: var(--spectrum-font-size-100); + --system-field-label-size-l-side-margin-block-start: var(--spectrum-field-label-top-margin-large); + --system-field-label-size-l-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-l-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large); + --system-field-label-size-xl-min-height: var(--spectrum-component-height-200); + --system-field-label-size-xl-top-to-text: var(--spectrum-component-top-to-text-200); + --system-field-label-size-xl-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --system-field-label-size-xl-font-size: var(--spectrum-font-size-200); + --system-field-label-size-xl-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large); + --system-field-label-size-xl-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-xl-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large); + --system-floating-action-button-size: var(--spectrum-component-height-200); + --system-floating-action-button-icon-size: var(--spectrum-workflow-icon-size-200); + --system-floating-action-button-padding: var(--spectrum-component-pill-edge-to-visual-only-200); + --system-floating-action-button-margin: var(--spectrum-spacing-200); + --system-floating-action-button-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-floating-action-button-focus-ring-width: var(--spectrum-focus-indicator-thickness); + --system-floating-action-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-floating-action-button-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-floating-action-button-background-color: var(--spectrum-accent-background-color-default); + --system-floating-action-button-background-color-hover: var(--spectrum-accent-background-color-hover); + --system-floating-action-button-background-color-down: var(--spectrum-accent-background-color-down); + --system-floating-action-button-background-color-key-focus: var(--spectrum-accent-background-color-key-focus); + --system-floating-action-button-icon-color: var(--spectrum-white); + --system-floating-action-button-icon-color-hover: var(--spectrum-white); + --system-floating-action-button-icon-color-down: var(--spectrum-white); + --system-floating-action-button-icon-color-key-focus: var(--spectrum-white); + --system-floating-action-button-secondary-background-color: var(--spectrum-background-layer-2-color); + --system-floating-action-button-secondary-background-color-hover: var(--spectrum-background-layer-2-color); + --system-floating-action-button-secondary-background-color-down: var(--spectrum-background-layer-2-color); + --system-floating-action-button-secondary-background-color-key-focus: var(--spectrum-background-layer-2-color); + --system-floating-action-button-secondary-icon-color: var(--spectrum-neutral-subdued-content-color-default); + --system-floating-action-button-secondary-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-floating-action-button-secondary-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); + --system-floating-action-button-secondary-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-help-text-line-height: var(--spectrum-line-height-100); + --system-help-text-content-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-help-text-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-help-text-disabled-content-color: var(--spectrum-disabled-content-color); + --system-help-text-neutral-content-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-help-text-neutral-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-help-text-negative-content-color-default: var(--spectrum-negative-color-900); + --system-help-text-negative-icon-color-default: var(--spectrum-negative-color-900); + --system-help-text-disabled-content-color-default: var(--system-help-text-disabled-content-color); + --system-help-text-disabled-icon-color-default: var(--system-help-text-disabled-content-color); + --system-help-text-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-help-text-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-help-text-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-help-text-size-s-min-height: var(--spectrum-component-height-75); + --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-help-text-size-s-font-size: var(--spectrum-font-size-75); + --system-help-text-size-s-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-s-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-small); + --system-help-text-size-s-top-to-text: var(--spectrum-component-top-to-text-75); + --system-help-text-size-s-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-help-text-size-m-min-height: var(--spectrum-component-height-75); + --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-help-text-size-m-font-size: var(--spectrum-font-size-75); + --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-m-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-medium); + --system-help-text-size-m-top-to-text: var(--spectrum-component-top-to-text-75); + --system-help-text-size-m-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-help-text-size-l-min-height: var(--spectrum-component-height-100); + --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-help-text-size-l-font-size: var(--spectrum-font-size-100); + --system-help-text-size-l-text-to-visual: var(--spectrum-text-to-visual-100); + --system-help-text-size-l-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-large); + --system-help-text-size-l-top-to-text: var(--spectrum-component-top-to-text-100); + --system-help-text-size-l-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-help-text-size-xl-min-height: var(--spectrum-component-height-200); + --system-help-text-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-help-text-size-xl-font-size: var(--spectrum-font-size-200); + --system-help-text-size-xl-text-to-visual: var(--spectrum-text-to-visual-200); + --system-help-text-size-xl-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-extra-large); + --system-help-text-size-xl-top-to-text: var(--spectrum-component-top-to-text-200); + --system-help-text-size-xl-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --system-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs); + --system-icon-size-xs: var(--spectrum-workflow-icon-size-50); + --system-icon-size-s: var(--spectrum-workflow-icon-size-75); + --system-icon-size-m: var(--spectrum-workflow-icon-size-100); + --system-icon-size-l: var(--spectrum-workflow-icon-size-200); + --system-icon-size-xl: var(--spectrum-workflow-icon-size-300); + --system-icon-size-xxl: var(--spectrum-workflow-icon-size-xxl); + --system-ui-icon-chevron-right-50-icon-size: var(--spectrum-chevron-icon-size-50); + --system-ui-icon-chevron-down-50-icon-size: var(--spectrum-chevron-icon-size-50); + --system-ui-icon-chevron-right-75-icon-size: var(--spectrum-chevron-icon-size-75); + --system-ui-icon-chevron-down-75-icon-size: var(--spectrum-chevron-icon-size-75); + --system-ui-icon-chevron-right-100-icon-size: var(--spectrum-chevron-icon-size-100); + --system-ui-icon-chevron-down-100-icon-size: var(--spectrum-chevron-icon-size-100); + --system-ui-icon-chevron-right-200-icon-size: var(--spectrum-chevron-icon-size-200); + --system-ui-icon-chevron-down-200-icon-size: var(--spectrum-chevron-icon-size-200); + --system-ui-icon-chevron-right-300-icon-size: var(--spectrum-chevron-icon-size-300); + --system-ui-icon-chevron-down-300-icon-size: var(--spectrum-chevron-icon-size-300); + --system-ui-icon-chevron-right-400-icon-size: var(--spectrum-chevron-icon-size-400); + --system-ui-icon-chevron-down-400-icon-size: var(--spectrum-chevron-icon-size-400); + --system-ui-icon-chevron-right-500-icon-size: var(--spectrum-chevron-icon-size-500); + --system-ui-icon-chevron-down-500-icon-size: var(--spectrum-chevron-icon-size-500); + --system-ui-icon-chevron-left-50-icon-size: var(--spectrum-chevron-icon-size-50); + --system-ui-icon-chevron-left-75-icon-size: var(--spectrum-chevron-icon-size-75); + --system-ui-icon-chevron-left-100-icon-size: var(--spectrum-chevron-icon-size-100); + --system-ui-icon-chevron-left-200-icon-size: var(--spectrum-chevron-icon-size-200); + --system-ui-icon-chevron-left-300-icon-size: var(--spectrum-chevron-icon-size-300); + --system-ui-icon-chevron-left-400-icon-size: var(--spectrum-chevron-icon-size-400); + --system-ui-icon-chevron-left-500-icon-size: var(--spectrum-chevron-icon-size-500); + --system-ui-icon-chevron-up-50-icon-size: var(--spectrum-chevron-icon-size-50); + --system-ui-icon-chevron-up-75-icon-size: var(--spectrum-chevron-icon-size-75); + --system-ui-icon-chevron-up-100-icon-size: var(--spectrum-chevron-icon-size-100); + --system-ui-icon-chevron-up-200-icon-size: var(--spectrum-chevron-icon-size-200); + --system-ui-icon-chevron-up-300-icon-size: var(--spectrum-chevron-icon-size-300); + --system-ui-icon-chevron-up-400-icon-size: var(--spectrum-chevron-icon-size-400); + --system-ui-icon-chevron-up-500-icon-size: var(--spectrum-chevron-icon-size-500); + --system-ui-icon-arrow-right-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-right-100-icon-size: var(--spectrum-arrow-icon-size-100); + --system-ui-icon-arrow-right-200-icon-size: var(--spectrum-arrow-icon-size-200); + --system-ui-icon-arrow-right-300-icon-size: var(--spectrum-arrow-icon-size-300); + --system-ui-icon-arrow-right-400-icon-size: var(--spectrum-arrow-icon-size-400); + --system-ui-icon-arrow-right-500-icon-size: var(--spectrum-arrow-icon-size-500); + --system-ui-icon-arrow-right-600-icon-size: var(--spectrum-arrow-icon-size-600); + --system-ui-icon-arrow-down-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-down-100-icon-size: var(--spectrum-arrow-icon-size-100); + --system-ui-icon-arrow-down-200-icon-size: var(--spectrum-arrow-icon-size-200); + --system-ui-icon-arrow-down-300-icon-size: var(--spectrum-arrow-icon-size-300); + --system-ui-icon-arrow-down-400-icon-size: var(--spectrum-arrow-icon-size-400); + --system-ui-icon-arrow-down-500-icon-size: var(--spectrum-arrow-icon-size-500); + --system-ui-icon-arrow-down-600-icon-size: var(--spectrum-arrow-icon-size-600); + --system-ui-icon-arrow-left-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-left-100-icon-size: var(--spectrum-arrow-icon-size-100); + --system-ui-icon-arrow-left-200-icon-size: var(--spectrum-arrow-icon-size-200); + --system-ui-icon-arrow-left-300-icon-size: var(--spectrum-arrow-icon-size-300); + --system-ui-icon-arrow-left-400-icon-size: var(--spectrum-arrow-icon-size-400); + --system-ui-icon-arrow-left-500-icon-size: var(--spectrum-arrow-icon-size-500); + --system-ui-icon-arrow-left-600-icon-size: var(--spectrum-arrow-icon-size-600); + --system-ui-icon-arrow-up-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-up-100-icon-size: var(--spectrum-arrow-icon-size-100); + --system-ui-icon-arrow-up-200-icon-size: var(--spectrum-arrow-icon-size-200); + --system-ui-icon-arrow-up-300-icon-size: var(--spectrum-arrow-icon-size-300); + --system-ui-icon-arrow-up-400-icon-size: var(--spectrum-arrow-icon-size-400); + --system-ui-icon-arrow-up-500-icon-size: var(--spectrum-arrow-icon-size-500); + --system-ui-icon-arrow-up-600-icon-size: var(--spectrum-arrow-icon-size-600); + --system-ui-icon-checkmark-50-icon-size: var(--spectrum-checkmark-icon-size-50); + --system-ui-icon-checkmark-75-icon-size: var(--spectrum-checkmark-icon-size-75); + --system-ui-icon-checkmark-100-icon-size: var(--spectrum-checkmark-icon-size-100); + --system-ui-icon-checkmark-200-icon-size: var(--spectrum-checkmark-icon-size-200); + --system-ui-icon-checkmark-300-icon-size: var(--spectrum-checkmark-icon-size-300); + --system-ui-icon-checkmark-400-icon-size: var(--spectrum-checkmark-icon-size-400); + --system-ui-icon-checkmark-500-icon-size: var(--spectrum-checkmark-icon-size-500); + --system-ui-icon-checkmark-600-icon-size: var(--spectrum-checkmark-icon-size-600); + --system-ui-icon-dash-50-icon-size: var(--spectrum-dash-icon-size-50); + --system-ui-icon-dash-75-icon-size: var(--spectrum-dash-icon-size-75); + --system-ui-icon-dash-100-icon-size: var(--spectrum-dash-icon-size-100); + --system-ui-icon-dash-200-icon-size: var(--spectrum-dash-icon-size-200); + --system-ui-icon-dash-300-icon-size: var(--spectrum-dash-icon-size-300); + --system-ui-icon-dash-400-icon-size: var(--spectrum-dash-icon-size-400); + --system-ui-icon-dash-500-icon-size: var(--spectrum-dash-icon-size-500); + --system-ui-icon-dash-600-icon-size: var(--spectrum-dash-icon-size-600); + --system-ui-icon-cross-75-icon-size: var(--spectrum-cross-icon-size-75); + --system-ui-icon-cross-100-icon-size: var(--spectrum-cross-icon-size-100); + --system-ui-icon-cross-200-icon-size: var(--spectrum-cross-icon-size-200); + --system-ui-icon-cross-300-icon-size: var(--spectrum-cross-icon-size-300); + --system-ui-icon-cross-400-icon-size: var(--spectrum-cross-icon-size-400); + --system-ui-icon-cross-500-icon-size: var(--spectrum-cross-icon-size-500); + --system-ui-icon-cross-600-icon-size: var(--spectrum-cross-icon-size-600); + --system-ui-icon-corner-triangle-75-icon-size: var(--spectrum-corner-triangle-icon-size-75); + --system-ui-icon-corner-triangle-100-icon-size: var(--spectrum-corner-triangle-icon-size-100); + --system-ui-icon-corner-triangle-200-icon-size: var(--spectrum-corner-triangle-icon-size-200); + --system-ui-icon-corner-triangle-300-icon-size: var(--spectrum-corner-triangle-icon-size-300); + --system-ui-icon-asterisk-75-icon-size: var(--spectrum-asterisk-icon-size-75); + --system-ui-icon-asterisk-100-icon-size: var(--spectrum-asterisk-icon-size-100); + --system-ui-icon-asterisk-200-icon-size: var(--spectrum-asterisk-icon-size-200); + --system-ui-icon-asterisk-300-icon-size: var(--spectrum-asterisk-icon-size-300); + --system-illustrated-message-description-max-inline-size: var(--spectrum-illustrated-message-maximum-width); + --system-illustrated-message-heading-max-inline-size: var(--spectrum-illustrated-message-maximum-width); + --system-illustrated-message-title-to-heading: var(--spectrum-spacing-400); + --system-illustrated-message-heading-to-description: var(--spectrum-spacing-75); + --system-illustrated-message-illustration-color: var(--spectrum-neutral-visual-color); + --system-illustrated-message-illustration-accent-color: var(--spectrum-accent-visual-color); + --system-illustrated-message-title-font-family: var(--spectrum-sans-font-family-stack); + --system-illustrated-message-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-illustrated-message-title-font-style: var(--spectrum-heading-sans-serif-font-style); + --system-illustrated-message-title-font-size: var(--spectrum-illustrated-message-title-size); + --system-illustrated-message-title-line-height: var(--spectrum-heading-line-height); + --system-illustrated-message-title-color: var(--spectrum-heading-color); + --system-illustrated-message-description-font-family: var(--spectrum-sans-font-family-stack); + --system-illustrated-message-description-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-illustrated-message-description-font-style: var(--spectrum-body-sans-serif-font-style); + --system-illustrated-message-description-font-size: var(--spectrum-illustrated-message-body-size); + --system-illustrated-message-description-line-height: var(--spectrum-body-line-height); + --system-illustrated-message-description-color: var(--spectrum-body-color); + --system-illustrated-message-lang-ja-title-font-size: var(--spectrum-illustrated-message-cjk-title-size); + --system-illustrated-message-lang-zh-title-font-size: var(--spectrum-illustrated-message-cjk-title-size); + --system-illustrated-message-lang-ko-title-font-size: var(--spectrum-illustrated-message-cjk-title-size); + --system-infield-button-border-width: var(--spectrum-border-width-100); + --system-infield-button-border-color: inherit; + --system-infield-button-border-radius: var(--spectrum-corner-radius-100); + --system-infield-button-border-radius-reset: 0; + --system-infield-button-stacked-top-border-radius-start-start: var(--system-infield-button-border-radius-reset); + --system-infield-button-stacked-bottom-border-radius-end-start: var(--system-infield-button-border-radius-reset); + --system-infield-button-background-color: var(--spectrum-gray-75); + --system-infield-button-background-color-hover: var(--spectrum-gray-200); + --system-infield-button-background-color-down: var(--spectrum-gray-300); + --system-infield-button-background-color-key-focus: var(--spectrum-gray-200); + --system-infield-button-height: var(--spectrum-component-height-100); + --system-infield-button-width: var(--spectrum-component-height-100); + --system-infield-button-stacked-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); + --system-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill); + --system-infield-button-inner-edge-to-fill: var(--spectrum-in-field-button-stacked-inner-edge-to-fill); + --system-infield-button-fill-padding: 0px; + --system-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium); + --system-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); + --system-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium); + --system-infield-button-animation-duration: var(--spectrum-animation-duration-100); + --system-infield-button-icon-color: var(--spectrum-neutral-content-color-default); + --system-infield-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-infield-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-infield-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-infield-button-fill-justify-content: center; + --system-infield-button-disabled-background-color: var(--spectrum-disabled-background-color); + --system-infield-button-disabled-background-color-hover: var(--spectrum-disabled-background-color); + --system-infield-button-disabled-background-color-down: var(--spectrum-disabled-background-color); + --system-infield-button-disabled-border-color: var(--spectrum-disabled-background-color); + --system-infield-button-disabled-icon-color: var(--spectrum-disabled-content-color); + --system-infield-button-disabled-icon-color-hover: var(--spectrum-disabled-content-color); + --system-infield-button-disabled-icon-color-down: var(--spectrum-disabled-content-color); + --system-infield-button-disabled-icon-color-key-focus: var(--spectrum-disabled-content-color); + --system-infield-button-size-s-height: var(--spectrum-component-height-75); + --system-infield-button-size-s-width: var(--spectrum-component-height-75); + --system-infield-button-size-s-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small); + --system-infield-button-size-s-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); + --system-infield-button-size-s-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small); + --system-infield-button-size-l-height: var(--spectrum-component-height-200); + --system-infield-button-size-l-width: var(--spectrum-component-height-200); + --system-infield-button-size-l-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large); + --system-infield-button-size-l-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); + --system-infield-button-size-l-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large); + --system-infield-button-size-xl-height: var(--spectrum-component-height-300); + --system-infield-button-size-xl-width: var(--spectrum-component-height-300); + --system-infield-button-size-xl-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large); + --system-infield-button-size-xl-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); + --system-infield-button-size-xl-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large); + --system-infield-button-top-width: var(--spectrum-in-field-button-width-stacked-medium); + --system-infield-button-bottom-width: var(--spectrum-in-field-button-width-stacked-medium); + --system-infield-button-top-size-s-width: var(--spectrum-in-field-button-width-stacked-small); + --system-infield-button-bottom-size-s-width: var(--spectrum-in-field-button-width-stacked-small); + --system-infield-button-top-size-l-width: var(--spectrum-in-field-button-width-stacked-large); + --system-infield-button-bottom-size-l-width: var(--spectrum-in-field-button-width-stacked-large); + --system-infield-button-top-size-xl-width: var(--spectrum-in-field-button-width-stacked-extra-large); + --system-infield-button-bottom-size-xl-width: var(--spectrum-in-field-button-width-stacked-extra-large); + --system-infield-button-quiet-background-color: transparent; + --system-infield-button-quiet-background-color-hover: transparent; + --system-infield-button-quiet-background-color-down: transparent; + --system-infield-button-quiet-background-color-key-focus: transparent; + --system-infield-button-quiet-infield-border-color: transparent; + --system-infield-button-quiet-border-width: 0; + --system-infield-button-quiet-disabled-background-color: transparent; + --system-infield-button-quiet-disabled-border-color: transparent; + --system-in-line-alert-heading-font-family: var(--spectrum-sans-font-family-stack); + --system-in-line-alert-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-in-line-alert-heading-font-style: var(--spectrum-heading-sans-serif-font-style); + --system-in-line-alert-heading-font-size: var(--spectrum-heading-size-xxs); + --system-in-line-alert-heading-line-height: var(--spectrum-heading-line-height); + --system-in-line-alert-content-font-family: var(--spectrum-sans-font-family-stack); + --system-in-line-alert-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-in-line-alert-content-font-style: var(--spectrum-body-sans-serif-font-style); + --system-in-line-alert-content-font-size: var(--spectrum-body-size-s); + --system-in-line-alert-content-line-height: var(--spectrum-body-line-height); + --system-in-line-alert-border-width: var(--spectrum-border-width-200); + --system-in-line-alert-border-radius: var(--spectrum-corner-radius-100); + --system-in-line-alert-icon-size: var(--spectrum-workflow-icon-size-100); + --system-in-line-alert-min-inline-size: var(--spectrum-in-line-alert-minimum-width); + --system-in-line-alert-header-min-block-size: var(--spectrum-component-height-50); + --system-in-line-alert-spacing-edge-to-text: var(--spectrum-spacing-400); + --system-in-line-alert-spacing-header-to-icon: var(--spectrum-spacing-400); + --system-in-line-alert-spacing-header-content-button: var(--spectrum-spacing-300); + --system-in-line-alert-background-color: var(--spectrum-background-layer-2-color); + --system-in-line-alert-border-and-icon-color: var(--spectrum-neutral-visual-color); + --system-in-line-alert-header-color: var(--spectrum-heading-color); + --system-in-line-alert-content-color: var(--spectrum-body-color); + --system-in-line-alert-border-and-icon-color-info: var(--spectrum-informative-visual-color); + --system-in-line-alert-border-and-icon-color-positive: var(--spectrum-positive-visual-color); + --system-in-line-alert-border-and-icon-color-notice: var(--spectrum-notice-visual-color); + --system-in-line-alert-border-and-icon-color-negative: var(--spectrum-negative-visual-color); + --system-link-animation-duration: var(--spectrum-animation-duration-100); + --system-link-text-color-primary-default: var(--spectrum-accent-content-color-default); + --system-link-text-color-primary-hover: var(--spectrum-accent-content-color-hover); + --system-link-text-color-primary-active: var(--spectrum-accent-content-color-down); + --system-link-text-color-primary-focus: var(--spectrum-accent-content-color-key-focus); + --system-link-text-color-secondary-default: var(--spectrum-neutral-content-color-default); + --system-link-text-color-secondary-hover: var(--spectrum-neutral-content-color-hover); + --system-link-text-color-secondary-active: var(--spectrum-neutral-content-color-down); + --system-link-text-color-secondary-focus: var(--spectrum-neutral-content-color-key-focus); + --system-link-text-color-white: var(--spectrum-white); + --system-link-text-color-black: var(--spectrum-black); + --system-logic-button-height: 24px; + --system-logic-button-padding: var(--spectrum-component-edge-to-text-50); + --system-logic-button-font-size: var(--spectrum-font-size-100); + --system-logic-button-font-weight: var(--spectrum-bold-font-weight); + --system-logic-button-border-width: var(--spectrum-border-width-200); + --system-logic-button-border-radius: var(--spectrum-corner-radius-100); + --system-logic-button-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --system-logic-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-logic-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-logic-button-and-text-color: var(--spectrum-white); + --system-logic-button-and-background-color-default: var(--spectrum-logic-button-and-background-color); + --system-logic-button-and-background-color-hover: var(--spectrum-blue-1100); + --system-logic-button-and-border-color-hover: var(--spectrum-blue-1100); + --system-logic-button-or-text-color: var(--spectrum-white); + --system-logic-button-and-background-color-default-disabled: var(--spectrum-gray-200); + --system-logic-button-and-border-color-disabled: var(--spectrum-gray-200); + --system-logic-button-and-text-color-disabled: var(--spectrum-gray-500); + --system-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-200); + --system-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-200); + --system-logic-button-or-background-color-disabled: var(--spectrum-gray-200); + --system-logic-button-or-border-color-disabled: var(--spectrum-gray-200); + --system-logic-button-or-text-color-disabled: var(--spectrum-gray-500); + --system-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-200); + --system-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-200); + --system-menu-item-top-to-action: var(--spectrum-spacing-50); + --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); + --system-menu-item-label-line-height: var(--spectrum-line-height-100); + --system-menu-item-label-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-menu-item-label-to-description-spacing: var(--spectrum-menu-item-label-to-description); + --system-menu-item-focus-indicator-width: var(--spectrum-border-width-200); + --system-menu-item-focus-indicator-color: var(--spectrum-blue-800); + --system-menu-item-label-to-value-area-min-spacing: var(--spectrum-spacing-100); + --system-menu-item-label-content-color-default: var(--spectrum-neutral-content-color-default); + --system-menu-item-label-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-menu-item-label-content-color-down: var(--spectrum-neutral-content-color-down); + --system-menu-item-label-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-menu-item-label-icon-color-default: var(--spectrum-neutral-content-color-default); + --system-menu-item-label-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-menu-item-label-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-menu-item-label-icon-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-menu-item-label-content-color-disabled: var(--spectrum-disabled-content-color); + --system-menu-item-label-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-menu-item-description-line-height: var(--spectrum-line-height-100); + --system-menu-item-description-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-menu-item-description-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-menu-item-description-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-menu-item-description-color-down: var(--spectrum-neutral-subdued-content-color-down); + --system-menu-item-description-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-menu-item-description-color-disabled: var(--spectrum-disabled-content-color); + --system-menu-section-header-line-height: var(--spectrum-line-height-100); + --system-menu-section-header-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-menu-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-menu-section-header-color: var(--spectrum-gray-900); + --system-menu-collapsible-icon-color: var(--spectrum-gray-900); + --system-menu-checkmark-icon-color-default: var(--spectrum-accent-color-900); + --system-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); + --system-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); + --system-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); + --system-menu-drillin-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-menu-drillin-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-menu-drillin-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); + --system-menu-drillin-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-menu-item-value-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-menu-item-value-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-menu-item-value-color-down: var(--spectrum-neutral-subdued-content-color-down); + --system-menu-item-value-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-menu-checkmark-display-hidden: none; + --system-menu-checkmark-display-shown: block; + --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown); + --system-menu-item-collapsible-has-icon-sub-item-padding-x-start: calc(var(--system-menu-item-label-inline-edge-to-content) + var(--system-menu-item-checkmark-width) + var(--system-menu-item-text-to-control) + var(--system-menu-item-icon-width) + var(--system-menu-item-label-text-to-visual) + var(--system-menu-item-focus-indicator-width)); + --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc(var(--system-menu-item-label-inline-edge-to-content) + var(--system-menu-item-checkmark-width) + var(--system-menu-item-label-text-to-visual) + var(--system-menu-item-focus-indicator-width)); + --system-menu-item-background-color-default: var(--spectrum-gray-50); + --system-menu-item-background-color-hover: rgba(var(--spectrum-gray-900), var(--spectrum-transparent-black-200-opacity)); + --system-menu-item-background-color-down: rgba(var(--spectrum-gray-900), var(--spectrum-transparent-black-200-opacity)); + --system-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-900), var(--spectrum-transparent-black-200-opacity)); + --system-menu-size-s-item-min-height: var(--spectrum-component-height-75); + --system-menu-size-s-item-icon-height: var(--spectrum-workflow-icon-size-75); + --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75); + --system-menu-size-s-item-label-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-item-label-text-to-visual: var(--spectrum-text-to-visual-75); + --system-menu-size-s-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75); + --system-menu-size-s-item-top-edge-to-text: var(--spectrum-component-top-to-text-75); + --system-menu-size-s-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75); + --system-menu-size-s-item-text-to-control: var(--spectrum-text-to-control-75); + --system-menu-size-s-item-description-font-size: var(--spectrum-font-size-50); + --system-menu-size-s-section-header-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-section-header-min-width: var(--spectrum-component-height-75); + --system-menu-size-s-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small); + --system-menu-size-s-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small); + --system-menu-size-s-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small); + --system-menu-size-s-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small); + --system-menu-size-s-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small); + --system-menu-item-min-height: var(--spectrum-component-height-100); + --system-menu-size-m-item-min-height: var(--spectrum-component-height-100); + --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-height: var(--spectrum-workflow-icon-size-100); + --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-width: var(--spectrum-workflow-icon-size-100); + --system-menu-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); + --system-menu-size-m-item-label-text-to-visual: var(--spectrum-text-to-visual-100); + --system-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100); + --system-menu-size-m-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100); + --system-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100); + --system-menu-size-m-item-top-edge-to-text: var(--spectrum-component-top-to-text-100); + --system-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --system-menu-size-m-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); + --system-menu-size-m-item-text-to-control: var(--spectrum-text-to-control-100); + --system-menu-item-description-font-size: var(--spectrum-font-size-75); + --system-menu-size-m-item-description-font-size: var(--spectrum-font-size-75); + --system-menu-section-header-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-section-header-font-size: var(--spectrum-font-size-100); + --system-menu-section-header-min-width: var(--spectrum-component-height-100); + --system-menu-size-m-section-header-min-width: var(--spectrum-component-height-100); + --system-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); + --system-menu-size-m-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); + --system-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium); + --system-menu-size-m-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium); + --system-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium); + --system-menu-size-m-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium); + --system-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium); + --system-menu-size-m-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium); + --system-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); + --system-menu-size-m-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); + --system-menu-size-l-item-min-height: var(--spectrum-component-height-200); + --system-menu-size-l-item-icon-height: var(--spectrum-workflow-icon-size-200); + --system-menu-size-l-item-icon-width: var(--spectrum-workflow-icon-size-200); + --system-menu-size-l-item-label-font-size: var(--spectrum-font-size-200); + --system-menu-size-l-item-label-text-to-visual: var(--spectrum-text-to-visual-200); + --system-menu-size-l-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200); + --system-menu-size-l-item-top-edge-to-text: var(--spectrum-component-top-to-text-200); + --system-menu-size-l-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200); + --system-menu-size-l-item-text-to-control: var(--spectrum-text-to-control-200); + --system-menu-size-l-item-description-font-size: var(--spectrum-font-size-100); + --system-menu-size-l-section-header-font-size: var(--spectrum-font-size-200); + --system-menu-size-l-section-header-min-width: var(--spectrum-component-height-200); + --system-menu-size-l-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large); + --system-menu-size-l-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large); + --system-menu-size-l-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large); + --system-menu-size-l-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large); + --system-menu-size-l-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large); + --system-menu-size-xl-item-min-height: var(--spectrum-component-height-300); + --system-menu-size-xl-item-icon-height: var(--spectrum-workflow-icon-size-300); + --system-menu-size-xl-item-icon-width: var(--spectrum-workflow-icon-size-300); + --system-menu-size-xl-item-label-font-size: var(--spectrum-font-size-300); + --system-menu-size-xl-item-label-text-to-visual: var(--spectrum-text-to-visual-300); + --system-menu-size-xl-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300); + --system-menu-size-xl-item-top-edge-to-text: var(--spectrum-component-top-to-text-300); + --system-menu-size-xl-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300); + --system-menu-size-xl-item-text-to-control: var(--spectrum-text-to-control-300); + --system-menu-size-xl-item-description-font-size: var(--spectrum-font-size-200); + --system-menu-size-xl-section-header-font-size: var(--spectrum-font-size-300); + --system-menu-size-xl-section-header-min-width: var(--spectrum-component-height-300); + --system-menu-size-xl-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large); + --system-menu-size-xl-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large); + --system-menu-size-xl-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large); + --system-menu-size-xl-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large); + --system-menu-size-xl-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large); + --system-miller-columns-inline-size: 272px; + --system-miller-columns-padding: var(--spectrum-spacing-100); + --system-miller-columns-margin-inline-start: var(--spectrum-spacing-100); + --system-miller-columns-margin-inline-end: var(--spectrum-spacing-100); + --system-modal-confirm-exit-animation-delay: var(--spectrum-animation-duration-0); + --system-modal-fullscreen-margin: 32px; + --system-modal-max-height: 90vh; + --system-modal-max-width: 90%; + --system-modal-background-color: var(--spectrum-gray-100); + --system-modal-confirm-border-radius: var(--spectrum-corner-radius-100); + --system-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100); + --system-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500); + --system-modal-confirm-entry-animation-delay: var(--spectrum-animation-duration-200); + --system-modal-transition-animation-duration: var(--spectrum-animation-duration-100); + --system-opacity-checkerboard-dark: var(--spectrum-opacity-checkerboard-square-dark); + --system-opacity-checkerboard-light: var(--spectrum-opacity-checkerboard-square-light); + --system-opacity-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size); + --system-opacity-checkerboard-position: left top; + --system-pagination-counter-margin-inline-start: var(--spectrum-pagination-item-inline-spacing); + --system-pagination-page-button-inline-spacing: var(--spectrum-pagination-item-inline-spacing); + --system-pagination-counter-color: var(--spectrum-neutral-subdued-content-color-default); + --system-pagination-counter-font-size: var(--spectrum-font-size-100); + --system-pagination-counter-line-height: var(--spectrum-line-height-100); + --system-picker-background-color-default: var(--spectrum-gray-75); + --system-picker-background-color-default-open: var(--spectrum-gray-200); + --system-picker-background-color-active: var(--spectrum-gray-300); + --system-picker-background-color-hover: var(--spectrum-gray-200); + --system-picker-background-color-hover-open: var(--spectrum-gray-200); + --system-picker-background-color-key-focus: var(--spectrum-gray-200); + --system-picker-border-color-default: var(--spectrum-gray-500); + --system-picker-border-color-default-open: var(--spectrum-gray-500); + --system-picker-border-color-hover: var(--spectrum-gray-600); + --system-picker-border-color-hover-open: var(--spectrum-gray-600); + --system-picker-border-color-active: var(--spectrum-gray-700); + --system-picker-border-color-key-focus: var(--spectrum-gray-600); + --system-picker-border-width: var(--spectrum-border-width-100); + --system-picker-font-size: var(--spectrum-font-size-100); + --system-picker-font-weight: var(--spectrum-regular-font-weight); + --system-picker-placeholder-font-style: var(--spectrum-default-font-style); + --system-picker-line-height: var(--spectrum-line-height-100); + --system-picker-block-size: var(--spectrum-component-height-100); + --system-picker-inline-size: var(--spectrum-field-width); + --system-picker-border-radius: var(--spectrum-corner-radius-100); + --system-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-100); + --system-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-picker-spacing-edge-to-text-quiet: var(--spectrum-field-edge-to-text-quiet); + --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); + --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); + --system-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-medium); + --system-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-medium); + --system-picker-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-medium); + --system-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-medium); + --system-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); + --system-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100); + --system-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100); + --system-picker-spacing-edge-to-disclosure-icon-quiet: var(--spectrum-picker-end-edge-to-disclousure-icon-quiet); + --system-picker-animation-duration: var(--spectrum-animation-duration-100); + --system-picker-font-color-default: var(--spectrum-neutral-content-color-default); + --system-picker-font-color-default-open: var(--spectrum-neutral-content-color-focus); + --system-picker-font-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-font-color-hover-open: var(--spectrum-neutral-content-color-focus-hover); + --system-picker-font-color-active: var(--spectrum-neutral-content-color-down); + --system-picker-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-picker-icon-color-default: var(--spectrum-neutral-content-color-default); + --system-picker-icon-color-default-open: var(--spectrum-neutral-content-color-focus); + --system-picker-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-icon-color-hover-open: var(--spectrum-neutral-content-color-focus-hover); + --system-picker-icon-color-active: var(--spectrum-neutral-content-color-down); + --system-picker-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-picker-border-color-error-default: var(--spectrum-negative-border-color-default); + --system-picker-border-color-error-default-open: var(--spectrum-negative-border-color-focus); + --system-picker-border-color-error-hover: var(--spectrum-negative-border-color-hover); + --system-picker-border-color-error-hover-open: var(--spectrum-negative-border-color-focus-hover); + --system-picker-border-color-error-active: var(--spectrum-negative-border-color-down); + --system-picker-border-color-error-key-focus: var(--spectrum-negative-border-color-key-focus); + --system-picker-icon-color-error: var(--spectrum-negative-visual-color); + --system-picker-background-color-disabled: var(--spectrum-disabled-background-color); + --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-picker-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-picker-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-medium); + --system-picker-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-size-s-block-size: var(--spectrum-component-height-75); + --system-picker-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-picker-size-s-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-picker-size-s-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75); + --system-picker-size-s-spacing-text-to-icon: var(--spectrum-text-to-visual-75); + --system-picker-size-s-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-small); + --system-picker-size-s-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small); + --system-picker-size-s-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-small); + --system-picker-size-s-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-small); + --system-picker-size-s-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); + --system-picker-size-s-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75); + --system-picker-size-s-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75); + --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-small); + --system-picker-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-size-l-block-size: var(--spectrum-component-height-200); + --system-picker-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200); + --system-picker-size-l-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --system-picker-size-l-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200); + --system-picker-size-l-spacing-text-to-icon: var(--spectrum-text-to-visual-200); + --system-picker-size-l-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-large); + --system-picker-size-l-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large); + --system-picker-size-l-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-large); + --system-picker-size-l-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-large); + --system-picker-size-l-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); + --system-picker-size-l-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200); + --system-picker-size-l-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200); + --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-large); + --system-picker-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-size-xl-block-size: var(--spectrum-component-height-300); + --system-picker-size-xl-spacing-top-to-text: var(--spectrum-component-top-to-text-300); + --system-picker-size-xl-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --system-picker-size-xl-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300); + --system-picker-size-xl-spacing-text-to-icon: var(--spectrum-text-to-visual-300); + --system-picker-size-xl-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-extra-large); + --system-picker-size-xl-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large); + --system-picker-size-xl-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); + --system-picker-size-xl-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-extra-large); + --system-picker-size-xl-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); + --system-picker-size-xl-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300); + --system-picker-size-xl-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300); + --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-extra-large); + --system-picker-button-background-color: var(--spectrum-gray-75); + --system-picker-button-background-color-hover: var(--spectrum-gray-200); + --system-picker-button-background-color-down: var(--spectrum-gray-300); + --system-picker-button-background-color-key-focus: var(--spectrum-gray-200); + --system-picker-button-border-color: inherit; + --system-picker-button-border-radius: var(--spectrum-corner-radius-100); + --system-picker-button-border-radius-rounded-sided: 0; + --system-picker-button-border-radius-sided: 0; + --system-picker-button-border-width: var(--spectrum-border-width-100); + --system-picker-button-height: var(--spectrum-component-height-100); + --system-picker-button-width: var(--spectrum-component-height-100); + --system-picker-button-gap: var(--spectrum-text-to-visual-50); + --system-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); + --system-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100); + --system-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200); + --system-picker-button-icon-color: var(--spectrum-neutral-content-color-default); + --system-picker-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-picker-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-picker-button-font-color: var(--spectrum-neutral-content-color-default); + --system-picker-button-font-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-button-font-color-down: var(--spectrum-neutral-content-color-down); + --system-picker-button-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); + --system-picker-button-font-style: var(--spectrum-default-font-style); + --system-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-picker-button-font-size: var(--spectrum-font-size-100); + --system-picker-button-background-animation-duration: var(--spectrum-animation-duration-100); + --system-picker-button-background-color-disabled: var(--spectrum-disabled-background-color); + --system-picker-button-background-color-hover-disabled: var(--spectrum-disabled-background-color); + --system-picker-button-background-color-down-disabled: var(--spectrum-disabled-background-color); + --system-picker-button-border-color-disabled: var(--spectrum-disabled-background-color); + --system-picker-button-font-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-font-color-hover-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-font-color-down-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-icon-color-hover-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-icon-color-down-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-size-s-height: var(--spectrum-component-height-75); + --system-picker-button-size-s-width: var(--spectrum-component-height-75); + --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); + --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-button-size-s-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75); + --system-picker-button-size-l-height: var(--spectrum-component-height-200); + --system-picker-button-size-l-width: var(--spectrum-component-height-200); + --system-picker-button-size-l-label-padding: var(--spectrum-text-to-visual-200); + --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-button-size-l-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200); + --system-picker-button-size-xl-height: var(--spectrum-component-height-300); + --system-picker-button-size-xl-width: var(--spectrum-component-height-300); + --system-picker-button-size-xl-label-padding: var(--spectrum-text-to-visual-300); + --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-button-size-xl-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300); + --system-popover-border-width: var(--spectrum-border-width-100); + --system-popover-animation-distance: var(--spectrum-spacing-100); + --system-popover-background-color: var(--spectrum-background-layer-2-color); + --system-popover-border-color: var(--spectrum-gray-400); + --system-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area); + --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-popover-shadow-color: var(--spectrum-drop-shadow-color); + --system-popover-corner-radius: var(--spectrum-corner-radius-100); + --system-popover-pointer-width: var(--spectrum-popover-tip-width); + --system-popover-pointer-height: var(--spectrum-popover-tip-height); + --system-popover-pointer-edge-offset: calc(var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / 2); + --system-popover-pointer-edge-spacing: calc(var(--system-popover-pointer-edge-offset) - var(--spectrum-popover-tip-width) / 2); + --system-progress-bar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out); + --system-progress-bar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000); + --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-progress-bar-fill-size-indeterminate: 70%; + --system-progress-bar-size-2400: 192px; + --system-progress-bar-size-2500: 200px; + --system-progress-bar-size-2800: 224px; + --system-progress-bar-font-size: var(--spectrum-font-size-75); + --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width); + --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width); + --system-progress-bar-thickness: var(--spectrum-progress-bar-thickness-medium); + --system-progress-bar-line-height: var(--spectrum-line-height-100); + --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); + --system-progress-bar-spacing-top-to-text: var(--spectrum-component-top-to-text-100); + --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); + --system-progress-bar-text-color: var(--spectrum-neutral-content-color-default); + --system-progress-bar-track-color: var(--spectrum-gray-300); + --system-progress-bar-fill-color: var(--spectrum-accent-color-900); + --system-progress-bar-fill-color-positive: var(--spectrum-positive-visual-color); + --system-progress-bar-fill-color-notice: var(--spectrum-notice-visual-color); + --system-progress-bar-fill-color-negative: var(--spectrum-negative-visual-color); + --system-progress-bar-label-and-value-white: var(--spectrum-white); + --system-progress-bar-track-color-white: var(--spectrum-transparent-white-300); + --system-progress-bar-fill-color-white: var(--spectrum-white); + --system-progress-bar-size-s-size-default: var(--system-progress-bar-size-2400); + --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); + --system-progress-bar-size-s-thickness: var(--spectrum-progress-bar-thickness-small); + --system-progress-bar-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-progress-bar-size-m-size-default: var(--system-progress-bar-size-2400); + --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); + --system-progress-bar-size-m-thickness: var(--spectrum-progress-bar-thickness-large); + --system-progress-bar-size-m-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-progress-bar-size-l-size-default: var(--system-progress-bar-size-2500); + --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); + --system-progress-bar-size-l-thickness: var(--spectrum-progress-bar-thickness-large); + --system-progress-bar-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200); + --system-progress-bar-size-xl-size-default: var(--system-progress-bar-size-2800); + --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); + --system-progress-bar-size-xl-thickness: var(--spectrum-progress-bar-thickness-extra-large); + --system-progress-bar-size-xl-spacing-top-to-text: var(--spectrum-component-top-to-text-300); + --system-meter-min-width: var(--spectrum-meter-minimum-width); + --system-meter-max-width: var(--spectrum-meter-maximum-width); + --system-meter-inline-size: var(--spectrum-meter-width); + --system-meter-top-to-text: var(--spectrum-component-top-to-text); + --system-meter-size-s-progressbar-thickness: var(--spectrum-meter-thickness-small); + --system-meter-size-s-progressbar-size-default: var(--system-progress-bar-size-2400); + --system-meter-size-s-progressbar-font-size: var(--spectrum-font-size-75); + --system-meter-size-s-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-meter-size-l-progressbar-thickness: var(--spectrum-meter-thickness-large); + --system-meter-size-l-progressbar-size-default: var(--system-progress-bar-size-2500); + --system-meter-size-l-progressbar-font-size: var(--spectrum-font-size-100); + --system-meter-size-l-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); + --system-progress-circle-track-border-color: var(--spectrum-gray-300); + --system-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default); + --system-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300); + --system-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900); + --system-progress-circle-size: var(--spectrum-progress-circle-size-medium); + --system-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); + --system-progress-circle-track-border-style: solid; + --system-progress-circle-small-size: var(--spectrum-progress-circle-size-small); + --system-progress-circle-small-thickness: var(--spectrum-progress-circle-thickness-small); + --system-progress-circle-medium-size: var(--spectrum-progress-circle-size-medium); + --system-progress-circle-medium-thickness: var(--spectrum-progress-circle-thickness-medium); + --system-progress-circle-large-size: var(--spectrum-progress-circle-size-large); + --system-progress-circle-large-thickness: var(--spectrum-progress-circle-thickness-large); + --system-radio-button-border-color-default: var(--spectrum-gray-600); + --system-radio-button-border-color-hover: var(--spectrum-gray-700); + --system-radio-button-border-color-down: var(--spectrum-gray-800); + --system-radio-button-border-color-focus: var(--spectrum-gray-700); + --system-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); + --system-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down); + --system-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-radio-disabled-content-color: var(--spectrum-disabled-content-color); + --system-radio-disabled-border-color: var(--spectrum-disabled-content-color); + --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); + --system-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000); + --system-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); + --system-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); + --system-radio-border-width: var(--spectrum-border-width-200); + --system-radio-button-background-color: var(--spectrum-gray-50); + --system-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); + --system-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down); + --system-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus); + --system-radio-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-radio-font-size: var(--spectrum-font-size-100); + --system-radio-line-height: var(--spectrum-line-height-100); + --system-radio-animation-duration: var(--spectrum-animation-duration-100); + --system-radio-height: var(--spectrum-component-height-100); + --system-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); + --system-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); + --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-size-s-height: var(--spectrum-component-height-75); + --system-radio-size-s-button-control-size: var(--spectrum-radio-button-control-size-small); + --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); + --system-radio-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-radio-size-s-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-radio-size-s-button-top-to-control: var(--spectrum-radio-button-top-to-control-small); + --system-radio-size-s-font-size: var(--spectrum-font-size-75); + --system-radio-size-m-height: var(--spectrum-component-height-100); + --system-radio-size-m-button-control-size: var(--spectrum-radio-button-control-size-medium); + --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-size-m-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-radio-size-m-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-radio-size-m-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); + --system-radio-size-m-font-size: var(--spectrum-font-size-100); + --system-radio-size-l-height: var(--spectrum-component-height-200); + --system-radio-size-l-button-control-size: var(--spectrum-radio-button-control-size-large); + --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); + --system-radio-size-l-label-top-to-text: var(--spectrum-component-top-to-text-200); + --system-radio-size-l-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --system-radio-size-l-button-top-to-control: var(--spectrum-radio-button-top-to-control-large); + --system-radio-size-l-font-size: var(--spectrum-font-size-200); + --system-radio-size-xl-height: var(--spectrum-component-height-300); + --system-radio-size-xl-button-control-size: var(--spectrum-radio-button-control-size-extra-large); + --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); + --system-radio-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-300); + --system-radio-size-xl-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --system-radio-size-xl-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large); + --system-radio-size-xl-font-size: var(--spectrum-font-size-300); + --system-radio-emphasized-button-checked-border-color-default: var(--spectrum-accent-color-900); + --system-radio-emphasized-button-checked-border-color-hover: var(--spectrum-accent-color-1000); + --system-radio-emphasized-button-checked-border-color-down: var(--spectrum-accent-color-1100); + --system-radio-emphasized-button-checked-border-color-focus: var(--spectrum-accent-color-1000); + --system-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); + --system-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-rating-icon-height: var(--spectrum-workflow-icon-size-100); + --system-rating-icon-width: var(--spectrum-workflow-icon-size-100); + --system-rating-border-radius: var(--spectrum-corner-radius-100); + --system-rating-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-rating-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-rating-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-rating-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100); + --system-rating-indicator-border-radius: var(--spectrum-corner-radius-75); + --system-rating-indicator-height: var(--spectrum-border-width-200); + --system-rating-emphasized-icon-color-default: var(--spectrum-accent-content-color-default); + --system-rating-emphasized-icon-color-hover: var(--spectrum-accent-content-color-hover); + --system-rating-emphasized-icon-color-down: var(--spectrum-accent-content-color-down); + --system-rating-emphasized-icon-color-key-focus: var(--spectrum-accent-content-color-key-focus); + --system-rating-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-rating-icon-count: var(--system-rating-icon-count); + --system-search-border-color-default: var(--spectrum-gray-500); + --system-search-border-color-hover: var(--spectrum-gray-600); + --system-search-border-color-focus: var(--spectrum-gray-800); + --system-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-search-border-color-key-focus: var(--spectrum-gray-900); + --system-search-inline-size: var(--spectrum-field-width); + --system-search-min-inline-multiplier: var(--spectrum-search-field-minimum-width-multiplier); + --system-search-to-help-text: var(--spectrum-help-text-to-component); + --system-search-top-to-text: var(--spectrum-component-top-to-text-100); + --system-search-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-search-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-search-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-search-font-family: var(--spectrum-sans-font-family-stack); + --system-search-font-weight: var(--spectrum-regular-font-weight); + --system-search-font-style: var(--spectrum-default-font-style); + --system-search-line-height: var(--spectrum-line-height-100); + --system-search-color-default: var(--spectrum-neutral-content-color-default); + --system-search-color-hover: var(--spectrum-neutral-content-color-hover); + --system-search-color-focus: var(--spectrum-neutral-content-color-focus); + --system-search-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); + --system-search-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-search-border-width: var(--spectrum-border-width-100); + --system-search-background-color: var(--spectrum-gray-50); + --system-search-color-disabled: var(--spectrum-disabled-content-color); + --system-search-background-color-disabled: var(--spectrum-disabled-background-color); + --system-search-border-color-disabled: var(--spectrum-disabled-background-color); + --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-s-edge-to-visual: var(--spectrum-component-edge-to-visual-75); + --system-search-size-s-block-size: var(--spectrum-component-height-75); + --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); + --system-search-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); + --system-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); + --system-search-size-m-edge-to-visual: var(--spectrum-component-edge-to-visual-100); + --system-search-block-size: var(--spectrum-component-height-100); + --system-search-size-m-block-size: var(--spectrum-component-height-100); + --system-search-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-l-edge-to-visual: var(--spectrum-component-edge-to-visual-200); + --system-search-size-l-block-size: var(--spectrum-component-height-200); + --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); + --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-xl-edge-to-visual: var(--spectrum-component-edge-to-visual-300); + --system-search-size-xl-block-size: var(--spectrum-component-height-300); + --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); + --system-search-quiet-background-color: transparent; + --system-search-quiet-background-color-disabled: transparent; + --system-search-quiet-border-color-disabled: var(--spectrum-disabled-border-color); + --system-search-quiet-border-radius: 0; + --system-search-quiet-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet); + --system-side-nav-focus-ring-size: var(--spectrum-focus-indicator-thickness); + --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-side-nav-min-height: var(--spectrum-component-height-100); + --system-side-nav-width: 100%; + --system-side-nav-min-width: var(--spectrum-side-navigation-minimum-width); + --system-side-nav-max-width: var(--spectrum-side-navigation-maximum-width); + --system-side-nav-border-radius: var(--spectrum-corner-radius-100); + --system-side-nav-icon-size: var(--spectrum-workflow-icon-size-100); + --system-side-nav-icon-spacing: var(--spectrum-text-to-visual-100); + --system-side-nav-inline-padding: var(--spectrum-component-edge-to-text-100); + --system-side-nav-gap: var(--spectrum-side-navigation-item-to-item); + --system-side-nav-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); + --system-side-nav-top-to-label: var(--spectrum-component-top-to-text-100); + --system-side-nav-bottom-to-label: var(--spectrum-side-navigation-bottom-to-text); + --system-side-nav-start-to-content-second-level: var(--spectrum-side-navigation-second-level-edge-to-text); + --system-side-nav-start-to-content-third-level: var(--spectrum-side-navigation-third-level-edge-to-text); + --system-side-nav-start-to-content-with-icon-second-level: var(--spectrum-side-navigation-with-icon-second-level-edge-to-text); + --system-side-nav-start-to-content-with-icon-third-level: var(--spectrum-side-navigation-with-icon-third-level-edge-to-text); + --system-side-nav-heading-top-margin: var(--spectrum-side-navigation-item-to-header); + --system-side-nav-heading-bottom-margin: var(--spectrum-side-navigation-header-to-item); + --system-side-nav-background-disabled: transparent; + --system-side-nav-background-default: transparent; + --system-side-nav-background-hover: var(--spectrum-gray-200); + --system-side-nav-item-background-down: var(--spectrum-gray-300); + --system-side-nav-background-key-focus: var(--spectrum-gray-200); + --system-side-nav-item-background-default-selected: var(--spectrum-gray-200); + --system-side-nav-background-hover-selected: var(--spectrum-gray-300); + --system-side-nav-item-background-down-selected: var(--spectrum-gray-300); + --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200); + --system-side-nav-header-color: var(--spectrum-gray-600); + --system-side-nav-content-disabled-color: var(--spectrum-disabled-content-color); + --system-side-nav-content-color-default: var(--spectrum-neutral-content-color-default); + --system-side-nav-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-side-nav-content-color-down: var(--spectrum-neutral-content-color-down); + --system-side-nav-content-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-side-nav-content-color-default-selected: var(--spectrum-neutral-content-color-default); + --system-side-nav-content-color-hover-selected: var(--spectrum-neutral-content-color-hover); + --system-side-nav-content-color-down-selected: var(--spectrum-neutral-content-color-down); + --system-side-nav-content-color-key-focus-selected: var(--spectrum-neutral-content-color-key-focus); + --system-side-nav-text-font-family: var(--spectrum-sans-font-family-stack); + --system-side-nav-text-font-weight: var(--spectrum-regular-font-weight); + --system-side-nav-text-font-style: var(--spectrum-default-font-style); + --system-side-nav-text-font-size: var(--spectrum-font-size-100); + --system-side-nav-text-line-height: var(--spectrum-line-height-100); + --system-side-nav-top-level-font-family: var(--spectrum-sans-font-family-stack); + --system-side-nav-top-level-font-weight: var(--spectrum-bold-font-weight); + --system-side-nav-top-level-font-style: var(--spectrum-default-font-style); + --system-side-nav-top-level-font-size: var(--spectrum-font-size-100); + --system-side-nav-top-level-line-height: var(--spectrum-line-height-100); + --system-side-nav-header-font-family: var(--spectrum-sans-font-family-stack); + --system-side-nav-header-font-weight: var(--spectrum-medium-font-weight); + --system-side-nav-header-font-style: var(--spectrum-default-font-style); + --system-side-nav-header-font-size: var(--spectrum-font-size-75); + --system-side-nav-header-line-height: var(--spectrum-line-height-100); + --system-side-nav-lang-ja-text-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-zh-text-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-ko-text-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-ja-top-level-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-zh-top-level-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-ko-top-level-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-ja-header-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-zh-header-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-ko-header-line-height: var(--spectrum-cjk-line-height-100); + --system-slider-track-color: var(--spectrum-gray-300); + --system-slider-track-fill-color: var(--spectrum-gray-700); + --system-slider-ramp-track-color: var(--spectrum-gray-400); + --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); + --system-slider-handle-background-color: transparent; + --system-slider-handle-background-color-disabled: transparent; + --system-slider-ramp-handle-background-color: var(--spectrum-gray-100); + --system-slider-ticks-handle-background-color: var(--spectrum-gray-100); + --system-slider-handle-border-color: var(--spectrum-gray-700); + --system-slider-handle-disabled-background-color: var(--spectrum-gray-100); + --system-slider-tick-mark-color: var(--spectrum-gray-300); + --system-slider-handle-border-color-hover: var(--spectrum-gray-800); + --system-slider-handle-border-color-down: var(--spectrum-gray-800); + --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800); + --system-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); + --system-slider-value-inline-size: 18px; + --system-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-slider-min-size: var(--spectrum-spacing-900); + --system-slider-track-corner-radius: var(--spectrum-corner-radius-75); + --system-slider-label-margin-start: var(--spectrum-spacing-300); + --system-slider-handle-border-width: var(--spectrum-border-width-200); + --system-slider-handle-margin-left: calc(var(--system-slider-handle-size) / -2); + --system-slider-controls-margin: calc(var(--system-slider-handle-size) / 2); + --system-slider-track-margin-offset: calc(var(--system-slider-controls-margin) * -1); + --system-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + var(--system-slider-handle-size) / 2); + --system-slider-input-top-size: calc(var(--system-slider-handle-size) / -2 / 4); + --system-slider-track-fill-thickness: var(--spectrum-slider-track-thickness); + --system-slider-tick-mark-width: var(--spectrum-border-width-200); + --system-slider-tick-mark-border-radius: 2px; + --system-slider-tick-handle-background-color: var(--spectrum-gray-75); + --system-slider-track-color-disabled: var(--spectrum-disabled-background-color); + --system-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color); + --system-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color); + --system-slider-label-text-color: var(--spectrum-neutral-content-color-default); + --system-slider-tick-label-color: var(--spectrum-neutral-content-color-default); + --system-slider-label-text-color-disabled: var(--spectrum-disabled-content-color); + --system-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color); + --system-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); + --system-slider-input-left: calc(var(--system-slider-handle-margin-left) / 4); + --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); + --system-slider-range-track-reset: 0; + --system-slider-size-s-font-size: var(--spectrum-font-size-75); + --system-slider-size-s-handle-size: var(--spectrum-slider-handle-size-small); + --system-slider-size-s-control-height: var(--spectrum-component-height-75); + --system-slider-size-s-handle-border-radius: var(--spectrum-corner-radius-200); + --system-slider-size-s-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small); + --system-slider-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-slider-size-s-control-to-field-label: var(--spectrum-slider-control-to-field-label-small); + --system-slider-size-s-value-side-padding-inline: var(--spectrum-spacing-100); + --system-slider-font-size: var(--spectrum-font-size-75); + --system-slider-size-m-font-size: var(--spectrum-font-size-75); + --system-slider-handle-size: var(--spectrum-slider-handle-size-medium); + --system-slider-size-m-handle-size: var(--spectrum-slider-handle-size-medium); + --system-slider-control-height: var(--spectrum-component-height-100); + --system-slider-size-m-control-height: var(--spectrum-component-height-100); + --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); + --system-slider-size-m-handle-border-radius: var(--spectrum-corner-radius-200); + --system-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium); + --system-slider-size-m-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium); + --system-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-slider-size-m-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); + --system-slider-size-m-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); + --system-slider-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-m-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-l-font-size: var(--spectrum-font-size-100); + --system-slider-size-l-handle-size: var(--spectrum-slider-handle-size-large); + --system-slider-size-l-control-height: var(--spectrum-component-height-200); + --system-slider-size-l-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); + --system-slider-size-l-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large); + --system-slider-size-l-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-slider-size-l-control-to-field-label: var(--spectrum-slider-control-to-field-label-large); + --system-slider-size-l-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-l-value-inline-size: 18px; + --system-slider-size-xl-font-size: var(--spectrum-font-size-200); + --system-slider-size-xl-handle-size: var(--spectrum-slider-handle-size-extra-large); + --system-slider-size-xl-control-height: var(--spectrum-component-height-300); + --system-slider-size-xl-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); + --system-slider-size-xl-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large); + --system-slider-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-200); + --system-slider-size-xl-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large); + --system-slider-size-xl-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-xl-value-inline-size: 22px; + --system-split-view-vertical-width: 100%; + --system-split-view-vertical-gripper-width: 50%; + --system-split-view-vertical-gripper-outer-width: 100%; + --system-split-view-vertical-gripper-reset: 0; + --system-split-view-background-color: var(--spectrum-gray-100); + --system-split-view-content-color: var(--spectrum-body-color); + --system-split-view-handle-background-color: var(--spectrum-gray-300); + --system-split-view-handle-background-color-hover: var(--spectrum-gray-400); + --system-split-view-handle-background-color-down: var(--spectrum-gray-800); + --system-split-view-handle-background-color-focus: var(--spectrum-focus-indicator-color); + --system-split-view-handle-width: var(--spectrum-border-width-200); + --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); + --system-split-view-gripper-width: var(--spectrum-border-width-400); + --system-split-view-gripper-height: 16px; + --system-split-view-gripper-border-width-horizontal: 3px; + --system-split-view-gripper-border-width-vertical: var(--spectrum-border-width-400); + --system-status-light-corner-radius: 50%; + --system-status-light-font-weight: 400; + --system-status-light-border-width: var(--spectrum-border-width-100); + --system-status-light-height: var(--spectrum-component-height-100); + --system-status-light-dot-size: var(--spectrum-status-light-dot-size-medium); + --system-status-light-line-height: var(--spectrum-line-height-100); + --system-status-light-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-status-light-font-size: var(--spectrum-font-size-100); + --system-status-light-spacing-dot-to-label: var(--spectrum-text-to-visual-100); + --system-status-light-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium); + --system-status-light-spacing-top-to-label: var(--spectrum-component-top-to-text-100); + --system-status-light-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100); + --system-status-light-content-color-default: var(--spectrum-neutral-content-color-default); + --system-status-light-subdued-content-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-status-light-semantic-neutral-color: var(--spectrum-neutral-visual-color); + --system-status-light-semantic-accent-color: var(--spectrum-accent-visual-color); + --system-status-light-semantic-negative-color: var(--spectrum-negative-visual-color); + --system-status-light-semantic-info-color: var(--spectrum-informative-visual-color); + --system-status-light-semantic-notice-color: var(--spectrum-notice-visual-color); + --system-status-light-semantic-positive-color: var(--spectrum-positive-visual-color); + --system-status-light-nonsemantic-gray-color: var(--spectrum-gray-visual-color); + --system-status-light-nonsemantic-red-color: var(--spectrum-red-visual-color); + --system-status-light-nonsemantic-orange-color: var(--spectrum-orange-visual-color); + --system-status-light-nonsemantic-yellow-color: var(--spectrum-yellow-visual-color); + --system-status-light-nonsemantic-chartreuse-color: var(--spectrum-chartreuse-visual-color); + --system-status-light-nonsemantic-celery-color: var(--spectrum-celery-visual-color); + --system-status-light-nonsemantic-green-color: var(--spectrum-green-visual-color); + --system-status-light-nonsemantic-seafoam-color: var(--spectrum-seafoam-visual-color); + --system-status-light-nonsemantic-cyan-color: var(--spectrum-cyan-visual-color); + --system-status-light-nonsemantic-blue-color: var(--spectrum-blue-visual-color); + --system-status-light-nonsemantic-indigo-color: var(--spectrum-indigo-visual-color); + --system-status-light-nonsemantic-purple-color: var(--spectrum-purple-visual-color); + --system-status-light-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-visual-color); + --system-status-light-nonsemantic-magenta-color: var(--spectrum-magenta-visual-color); + --system-status-light-size-s-height: var(--spectrum-component-height-75); + --system-status-light-size-s-dot-size: var(--spectrum-status-light-dot-size-small); + --system-status-light-size-s-font-size: var(--spectrum-font-size-75); + --system-status-light-size-s-spacing-dot-to-label: var(--spectrum-text-to-visual-75); + --system-status-light-size-s-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-small); + --system-status-light-size-s-spacing-top-to-label: var(--spectrum-component-top-to-text-75); + --system-status-light-size-s-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75); + --system-status-light-size-m-height: var(--spectrum-component-height-100); + --system-status-light-size-m-dot-size: var(--spectrum-status-light-dot-size-medium); + --system-status-light-size-m-font-size: var(--spectrum-font-size-100); + --system-status-light-size-m-spacing-dot-to-label: var(--spectrum-text-to-visual-100); + --system-status-light-size-m-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium); + --system-status-light-size-m-spacing-top-to-label: var(--spectrum-component-top-to-text-100); + --system-status-light-size-m-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100); + --system-status-light-size-l-height: var(--spectrum-component-height-200); + --system-status-light-size-l-dot-size: var(--spectrum-status-light-dot-size-large); + --system-status-light-size-l-font-size: var(--spectrum-font-size-200); + --system-status-light-size-l-spacing-dot-to-label: var(--spectrum-text-to-visual-200); + --system-status-light-size-l-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-large); + --system-status-light-size-l-spacing-top-to-label: var(--spectrum-component-top-to-text-200); + --system-status-light-size-l-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-200); + --system-status-light-size-xl-height: var(--spectrum-component-height-300); + --system-status-light-size-xl-dot-size: var(--spectrum-status-light-dot-size-extra-large); + --system-status-light-size-xl-font-size: var(--spectrum-font-size-300); + --system-status-light-size-xl-spacing-dot-to-label: var(--spectrum-text-to-visual-300); + --system-status-light-size-xl-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-extra-large); + --system-status-light-size-xl-spacing-top-to-label: var(--spectrum-component-top-to-text-300); + --system-status-light-size-xl-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300); + --system-steplist-step-width: 80px; + --system-steplist-marker-diameter: 8px; + --system-steplist-marker-hit-area: 20px; + --system-steplist-segment-height: 2px; + --system-steplist-top-padding: 22px; + --system-steplist-small-top-padding: 11px; + --system-steplist-side-padding: 60px; + --system-steplist-label-label-offset: 10px; + --system-steplist-label-text-size: 12px; + --system-steplist-current-label-text-color: var(--spectrum-gray-800); + --system-steplist-current-marker-color: var(--spectrum-gray-800); + --system-steplist-complete-label-text-color: var(--spectrum-gray-700); + --system-steplist-incomplete-label-color: var(--spectrum-gray-600); + --system-steplist-complete-marker-background-color: var(--spectrum-gray-600); + --system-steplist-incomplete-marker-border-color: var(--spectrum-gray-300); + --system-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-300); + --system-steplist-complete-segment-border-block-end-color: var(--spectrum-gray-600); + --system-stepper-border-width: var(--spectrum-border-width-100); + --system-stepper-border-color: var(--spectrum-gray-500); + --system-stepper-border-color-hover: var(--spectrum-gray-600); + --system-stepper-border-color-focus: var(--spectrum-gray-800); + --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); + --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-stepper-border-radius: var(--spectrum-corner-radius-100); + --system-stepper-min-width-multiplier: var(--spectrum-text-field-minimum-width-multiplier); + --system-stepper-animation-duration: var(--spectrum-animation-duration-100); + --system-stepper-buttons-border-style: none; + --system-stepper-buttons-border-width: 0; + --system-stepper-buttons-border-color: var(--spectrum-gray-500); + --system-stepper-buttons-background-color: var(--spectrum-gray-50); + --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); + --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); + --system-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-stepper-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-stepper-button-border-radius-reset: 0px; + --system-stepper-button-border-width: var(--spectrum-border-width-100); + --system-stepper-button-background-color-focus: var(--spectrum-gray-300); + --system-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200); + --system-stepper-border-color-invalid: var(--spectrum-negative-border-color-default); + --system-stepper-border-color-hover-invalid: var(--spectrum-negative-border-color-hover); + --system-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus); + --system-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); + --system-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); + --system-stepper-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-stepper-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-stepper-button-border-color-quiet: transparent; + --system-stepper-button-border-color-disabled: var(--spectrum-gray-200); + --system-stepper-button-border-width-disabled: var(--spectrum-border-width-100); + --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-100); + --system-stepper-size-s-button-width: var(--spectrum-in-field-button-width-stacked-small); + --system-stepper-size-s-height: var(--spectrum-component-height-75); + --system-stepper-button-width: var(--spectrum-in-field-button-width-stacked-medium); + --system-stepper-size-m-button-width: var(--spectrum-in-field-button-width-stacked-medium); + --system-stepper-height: var(--spectrum-component-height-100); + --system-stepper-size-m-height: var(--spectrum-component-height-100); + --system-stepper-size-l-button-width: var(--spectrum-in-field-button-width-stacked-large); + --system-stepper-size-l-height: var(--spectrum-component-height-200); + --system-stepper-size-xl-button-width: var(--spectrum-in-field-button-width-stacked-extra-large); + --system-stepper-size-xl-height: var(--spectrum-component-height-300); + --system-swatch-border-radius: var(--spectrum-corner-radius-100); + --system-swatch-focus-indicator-border-radius: var(--spectrum-corner-radius-200); + --system-swatch-border-thickness: var(--spectrum-border-width-100); + --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); + --system-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-swatch-border-color-opacity: 0.51; + --system-swatch-border-color-light-opacity: 0.2; + --system-swatch-border-color: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-opacity)); + --system-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-opacity)); + --system-swatch-border-color-light: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-light-opacity)); + --system-swatch-border-color-selected: var(--spectrum-gray-900); + --system-swatch-inner-border-color-selected: var(--spectrum-gray-50); + --system-swatch-disabled-icon-color: var(--spectrum-gray-50); + --system-swatch-dash-icon-color: var(--spectrum-gray-800); + --system-swatch-slash-icon-color: var(--spectrum-red-900); + --system-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); + --system-swatch-size-xs-disabled-icon-size: var(--spectrum-workflow-icon-size-50); + --system-swatch-size-xs-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small); + --system-swatch-size-s-size: var(--spectrum-swatch-size-small); + --system-swatch-size-s-disabled-icon-size: var(--spectrum-workflow-icon-size-75); + --system-swatch-size-s-slash-thickness: var(--spectrum-swatch-slash-thickness-small); + --system-swatch-size: var(--spectrum-swatch-size-medium); + --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); + --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); + --system-swatch-size-m-disabled-icon-size: var(--spectrum-workflow-icon-size-100); + --system-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); + --system-swatch-size-m-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); + --system-swatch-size-l-size: var(--spectrum-swatch-size-large); + --system-swatch-size-l-disabled-icon-size: var(--spectrum-workflow-icon-size-200); + --system-swatch-size-l-slash-thickness: var(--spectrum-swatch-slash-thickness-large); + --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); + --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); + --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); + --system-switch-handle-border-color-default: var(--spectrum-gray-600); + --system-switch-handle-border-color-hover: var(--spectrum-gray-700); + --system-switch-handle-border-color-down: var(--spectrum-gray-800); + --system-switch-handle-border-color-focus: var(--spectrum-gray-700); + --system-switch-handle-border-color-selected-default: var(--spectrum-gray-700); + --system-switch-handle-border-color-selected-hover: var(--spectrum-gray-800); + --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-focus: var(--spectrum-gray-800); + --system-switch-label-color-default: var(--spectrum-neutral-content-color-default); + --system-switch-label-color-hover: var(--spectrum-neutral-content-color-hover); + --system-switch-label-color-down: var(--spectrum-neutral-content-color-down); + --system-switch-label-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-switch-label-color-disabled: var(--spectrum-disabled-content-color); + --system-switch-background-color: var(--spectrum-gray-300); + --system-switch-background-color-disabled: var(--spectrum-gray-300); + --system-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color); + --system-switch-background-color-selected-default: var(--spectrum-neutral-background-color-selected-default); + --system-switch-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-switch-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); + --system-switch-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); + --system-switch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-switch-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-switch-handle-background-color: var(--spectrum-gray-75); + --system-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color); + --system-switch-disabled-label-color-default: var(--spectrum-disabled-content-color); + --system-switch-emphasized-background-color-selected-default: var(--spectrum-accent-color-900); + --system-switch-emphasized-background-color-selected-hover: var(--spectrum-accent-color-1000); + --system-switch-emphasized-background-color-selected-down: var(--spectrum-accent-color-1100); + --system-switch-emphasized-background-color-selected-focus: var(--spectrum-accent-color-1000); + --system-switch-emphasized-handle-border-color-selected-default: var(--spectrum-accent-color-900); + --system-switch-emphasized-handle-border-color-selected-hover: var(--spectrum-accent-color-1000); + --system-switch-emphasized-handle-border-color-selected-down: var(--spectrum-accent-color-1100); + --system-switch-emphasized-handle-border-color-selected-focus: var(--spectrum-accent-color-1000); + --system-switch-size-s-min-height: var(--spectrum-component-height-75); + --system-switch-size-s-control-width: var(--spectrum-switch-control-width-small); + --system-switch-size-s-control-height: var(--spectrum-switch-control-height-small); + --system-switch-size-s-control-label-spacing: var(--spectrum-text-to-control-75); + --system-switch-size-s-spacing-top-to-control: var(--spectrum-switch-top-to-control-small); + --system-switch-size-s-spacing-top-to-label: var(--spectrum-component-top-to-text-75); + --system-switch-size-s-font-size: var(--spectrum-font-size-75); + --system-switch-size-m-min-height: var(--spectrum-component-height-100); + --system-switch-size-m-control-width: var(--spectrum-switch-control-width-medium); + --system-switch-size-m-control-height: var(--spectrum-switch-control-height-medium); + --system-switch-size-m-control-label-spacing: var(--spectrum-text-to-control-100); + --system-switch-size-m-spacing-top-to-control: var(--spectrum-switch-top-to-control-medium); + --system-switch-size-m-spacing-top-to-label: var(--spectrum-component-top-to-text-100); + --system-switch-size-m-font-size: var(--spectrum-font-size-100); + --system-switch-size-l-min-height: var(--spectrum-component-height-200); + --system-switch-size-l-control-width: var(--spectrum-switch-control-width-large); + --system-switch-size-l-control-height: var(--spectrum-switch-control-height-large); + --system-switch-size-l-control-label-spacing: var(--spectrum-text-to-control-200); + --system-switch-size-l-spacing-top-to-control: var(--spectrum-switch-top-to-control-large); + --system-switch-size-l-spacing-top-to-label: var(--spectrum-component-top-to-text-200); + --system-switch-size-l-font-size: var(--spectrum-font-size-200); + --system-switch-size-xl-min-height: var(--spectrum-component-height-300); + --system-switch-size-xl-control-width: var(--spectrum-switch-control-width-extra-large); + --system-switch-size-xl-control-height: var(--spectrum-switch-control-height-extra-large); + --system-switch-size-xl-control-label-spacing: var(--spectrum-text-to-control-300); + --system-switch-size-xl-spacing-top-to-control: var(--spectrum-switch-top-to-control-extra-large); + --system-switch-size-xl-spacing-top-to-label: var(--spectrum-component-top-to-text-300); + --system-switch-size-xl-font-size: var(--spectrum-font-size-300); + --system-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-medium); + --system-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-medium); + --system-table-min-header-height: var(--spectrum-component-height-100); + --system-table-min-row-height: var(--spectrum-table-row-height-medium-regular); + --system-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-regular); + --system-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-regular); + --system-table-cell-inline-space: var(--spectrum-table-edge-to-content); + --system-table-border-radius: var(--spectrum-corner-radius-100); + --system-table-border-width: var(--spectrum-table-border-divider-width); + --system-table-outer-border-inline-width: var(--spectrum-table-border-divider-width); + --system-table-icon-to-text: var(--spectrum-text-to-visual-100); + --system-table-default-vertical-align: top; + --system-table-header-vertical-align: middle; + --system-table-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-row-font-family: var(--spectrum-sans-font-family-stack); + --system-table-row-font-weight: var(--spectrum-regular-font-weight); + --system-table-row-font-style: var(--spectrum-default-font-style); + --system-table-row-font-size: var(--spectrum-font-size-100); + --system-table-row-line-height: var(--spectrum-line-height-100); + --system-table-border-color: var(--spectrum-gray-300); + --system-table-divider-color: var(--spectrum-gray-300); + --system-table-header-background-color: var(--spectrum-transparent-white-100); + --system-table-header-text-color: var(--spectrum-body-color); + --system-table-row-background-color: var(--spectrum-gray-50); + --system-table-row-text-color: var(--spectrum-neutral-content-color-default); + --system-table-selected-row-background-color: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity)); + --system-table-selected-row-background-color-non-emphasized: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized)); + --system-table-row-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-hover-opacity)); + --system-table-row-active-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-down-opacity)); + --system-table-selected-row-background-color-focus: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity-hover)); + --system-table-selected-row-background-color-non-emphasized-focus: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover)); + --system-table-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-table-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-table-icon-color-active: var(--spectrum-neutral-subdued-content-color-down); + --system-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-focus); + --system-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-focus-hover); + --system-table-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-medium); + --system-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-regular); + --system-table-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-table-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-table-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity)); + --system-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); + --system-table-transition-duration: var(--spectrum-animation-duration-100); + --system-table-summary-row-font-weight: var(--spectrum-bold-font-weight); + --system-table-summary-row-background-color: var(--spectrum-gray-200); + --system-table-section-header-min-height: var(--spectrum-table-section-header-row-height-medium); + --system-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-100); + --system-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-100); + --system-table-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-section-header-background-color: var(--spectrum-gray-200); + --system-table-collapsible-tier-indent: var(--spectrum-spacing-300); + --system-table-collapsible-disclosure-inline-spacing: 0px; + --system-table-disclosure-icon-size: var(--spectrum-component-height-100); + --system-table-collapsible-icon-animation-duration: var(--spectrum-animation-duration-100); + --system-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --system-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-regular); + --system-table-thumbnail-size: var(--spectrum-thumbnail-size-300); + --system-table-cell-background-color: var(--system-table-row-background-color); + --system-table-selected-cell-background-color: var(--system-table-selected-row-background-color-non-emphasized); + --system-table-selected-cell-background-color-focus: var(--system-table-selected-row-background-color-non-emphasized-focus); + --system-table-size-s-min-header-height: var(--spectrum-component-height-100); + --system-table-size-s-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-small); + --system-table-size-s-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-small); + --system-table-size-s-min-row-height: var(--spectrum-table-row-height-small-regular); + --system-table-size-s-row-top-to-text: var(--spectrum-table-row-top-to-text-small-regular); + --system-table-size-s-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-regular); + --system-table-size-s-icon-to-text: var(--spectrum-text-to-visual-100); + --system-table-size-s-row-font-size: var(--spectrum-font-size-75); + --system-table-size-s-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-small); + --system-table-size-s-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-regular); + --system-table-size-s-section-header-min-height: var(--spectrum-table-section-header-row-height-small); + --system-table-size-s-section-header-block-start-spacing: var(--spectrum-component-top-to-text-75); + --system-table-size-s-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-75); + --system-table-size-s-disclosure-icon-size: var(--spectrum-component-height-75); + --system-table-size-s-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-regular); + --system-table-size-s-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --system-table-size-s-thumbnail-size: var(--spectrum-thumbnail-size-200); + --system-table-size-l-min-header-height: var(--spectrum-component-height-200); + --system-table-size-l-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-large); + --system-table-size-l-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-large); + --system-table-size-l-min-row-height: var(--spectrum-table-row-height-large-regular); + --system-table-size-l-row-top-to-text: var(--spectrum-table-row-top-to-text-large-regular); + --system-table-size-l-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-regular); + --system-table-size-l-icon-to-text: var(--spectrum-text-to-visual-200); + --system-table-size-l-row-font-size: var(--spectrum-font-size-200); + --system-table-size-l-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-large); + --system-table-size-l-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-regular); + --system-table-size-l-section-header-min-height: var(--spectrum-table-section-header-row-height-large); + --system-table-size-l-section-header-block-start-spacing: var(--spectrum-component-top-to-text-200); + --system-table-size-l-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-200); + --system-table-size-l-disclosure-icon-size: var(--spectrum-component-height-200); + --system-table-size-l-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-regular); + --system-table-size-l-thumbnail-to-text: var(--spectrum-text-to-visual-200); + --system-table-size-l-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-size-xl-min-header-height: var(--spectrum-component-height-300); + --system-table-size-xl-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-extra-large); + --system-table-size-xl-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-extra-large); + --system-table-size-xl-min-row-height: var(--spectrum-table-row-height-extra-large-regular); + --system-table-size-xl-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-regular); + --system-table-size-xl-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-regular); + --system-table-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); + --system-table-size-xl-row-font-size: var(--spectrum-font-size-300); + --system-table-size-xl-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-extra-large); + --system-table-size-xl-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-regular); + --system-table-size-xl-section-header-min-height: var(--spectrum-table-section-header-row-height-extra-large); + --system-table-size-xl-section-header-block-start-spacing: var(--spectrum-component-top-to-text-300); + --system-table-size-xl-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-300); + --system-table-size-xl-disclosure-icon-size: var(--spectrum-component-height-300); + --system-table-size-xl-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-regular); + --system-table-size-xl-thumbnail-to-text: var(--spectrum-text-to-visual-300); + --system-table-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-700); + --system-table-compact-min-row-height: var(--spectrum-table-row-height-medium-compact); + --system-table-compact-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-compact); + --system-table-compact-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-compact); + --system-table-compact-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-compact); + --system-table-compact-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-compact); + --system-table-compact-thumbnail-size: var(--spectrum-thumbnail-size-200); + --system-table-compact-size-s-min-row-height: var(--spectrum-table-row-height-small-compact); + --system-table-compact-size-s-row-top-to-text: var(--spectrum-table-row-top-to-text-small-compact); + --system-table-compact-size-s-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-compact); + --system-table-compact-size-s-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-compact); + --system-table-compact-size-s-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-compact); + --system-table-compact-size-s-thumbnail-size: var(--spectrum-thumbnail-size-50); + --system-table-compact-size-l-min-row-height: var(--spectrum-table-row-height-large-compact); + --system-table-compact-size-l-row-top-to-text: var(--spectrum-table-row-top-to-text-large-compact); + --system-table-compact-size-l-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-compact); + --system-table-compact-size-l-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-compact); + --system-table-compact-size-l-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-compact); + --system-table-compact-size-l-thumbnail-size: var(--spectrum-thumbnail-size-300); + --system-table-compact-size-xl-min-row-height: var(--spectrum-table-row-height-extra-large-compact); + --system-table-compact-size-xl-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-compact); + --system-table-compact-size-xl-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-compact); + --system-table-compact-size-xl-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-compact); + --system-table-compact-size-xl-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact); + --system-table-compact-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-spacious-min-row-height: var(--spectrum-table-row-height-medium-spacious); + --system-table-spacious-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-spacious); + --system-table-spacious-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-spacious); + --system-table-spacious-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-spacious); + --system-table-spacious-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious); + --system-table-spacious-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-spacious-size-s-min-row-height: var(--spectrum-table-row-height-small-spacious); + --system-table-spacious-size-s-row-top-to-text: var(--spectrum-table-row-top-to-text-small-spacious); + --system-table-spacious-size-s-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-spacious); + --system-table-spacious-size-s-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-spacious); + --system-table-spacious-size-s-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-spacious); + --system-table-spacious-size-s-thumbnail-size: var(--spectrum-thumbnail-size-300); + --system-table-spacious-size-l-min-row-height: var(--spectrum-table-row-height-large-spacious); + --system-table-spacious-size-l-row-top-to-text: var(--spectrum-table-row-top-to-text-large-spacious); + --system-table-spacious-size-l-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-spacious); + --system-table-spacious-size-l-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-spacious); + --system-table-spacious-size-l-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-spacious); + --system-table-spacious-size-l-thumbnail-size: var(--spectrum-thumbnail-size-700); + --system-table-spacious-size-xl-min-row-height: var(--spectrum-table-row-height-extra-large-spacious); + --system-table-spacious-size-xl-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-spacious); + --system-table-spacious-size-xl-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-spacious); + --system-table-spacious-size-xl-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-spacious); + --system-table-spacious-size-xl-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious); + --system-table-spacious-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-800); + --system-table-emphasized-selected-cell-background-color: var(--system-table-selected-row-background-color); + --system-table-emphasized-selected-cell-background-color-focus: var(--system-table-selected-row-background-color-focus); + --system-table-quiet-border-radius: 0px; + --system-table-quiet-outer-border-inline-width: 0px; + --system-table-quiet-header-background-color: var(--spectrum-transparent-white-100); + --system-table-quiet-row-background-color: var(--spectrum-transparent-white-100); + --system-tabs-font-weight: var(--spectrum-default-font-weight); + --system-tabs-item-height: var(--spectrum-tab-item-height-medium); + --system-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium); + --system-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-medium); + --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); + --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); + --system-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-medium); + --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); + --system-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-medium); + --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); + --system-tabs-color-selected: var(--spectrum-neutral-subdued-content-color-down); + --system-tabs-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-tabs-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-tabs-color-disabled: var(--spectrum-gray-500); + --system-tabs-font-family: var(--spectrum-sans-font-family-stack); + --system-tabs-font-style: var(--spectrum-default-font-style); + --system-tabs-font-size: var(--spectrum-font-size-100); + --system-tabs-line-height: var(--spectrum-line-height-100); + --system-tabs-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --system-tabs-focus-indicator-border-radius: var(--spectrum-corner-radius-100); + --system-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-medium); + --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-tabs-selection-indicator-color: var(--spectrum-neutral-subdued-content-color-down); + --system-tabs-list-background-direction: top; + --system-tabs-divider-background-color: var(--spectrum-gray-300); + --system-tabs-divider-size: var(--spectrum-border-width-200); + --system-tabs-divider-border-radius: 1px; + --system-tabs-animation-duration: var(--spectrum-animation-duration-100); + --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); + --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); + --system-tabs-size-s-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-small); + --system-tabs-size-s-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-small); + --system-tabs-size-s-start-to-edge: var(--spectrum-tab-item-start-to-edge-small); + --system-tabs-size-s-top-to-text: var(--spectrum-tab-item-top-to-text-small); + --system-tabs-size-s-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-small); + --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); + --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); + --system-tabs-size-s-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-small); + --system-tabs-size-s-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-small); + --system-tabs-size-s-font-size: var(--spectrum-font-size-75); + --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); + --system-tabs-size-l-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-large); + --system-tabs-size-l-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-large); + --system-tabs-size-l-start-to-edge: var(--spectrum-tab-item-start-to-edge-large); + --system-tabs-size-l-top-to-text: var(--spectrum-tab-item-top-to-text-large); + --system-tabs-size-l-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-large); + --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); + --system-tabs-size-l-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-large); + --system-tabs-size-l-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-large); + --system-tabs-size-l-font-size: var(--spectrum-font-size-200); + --system-tabs-size-xl-item-height: var(--spectrum-tab-item-height-extra-large); + --system-tabs-size-xl-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-extra-large); + --system-tabs-size-xl-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-extra-large); + --system-tabs-size-xl-start-to-edge: var(--spectrum-tab-item-start-to-edge-extra-large); + --system-tabs-size-xl-top-to-text: var(--spectrum-tab-item-top-to-text-extra-large); + --system-tabs-size-xl-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-extra-large); + --system-tabs-size-xl-icon-size: var(--spectrum-workflow-icon-size-200); + --system-tabs-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); + --system-tabs-size-xl-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-extra-large); + --system-tabs-size-xl-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-extra-large); + --system-tabs-size-xl-font-size: var(--spectrum-font-size-300); + --system-tabs-emphasized-color-selected: var(--spectrum-accent-content-color-default); + --system-tabs-emphasized-color-hover: var(--spectrum-accent-content-color-hover); + --system-tabs-emphasized-color-key-focus: var(--spectrum-accent-content-color-key-focus); + --system-tabs-emphasized-selection-indicator-color: var(--spectrum-accent-content-color-default); + --system-tag-border-color: var(--spectrum-gray-700); + --system-tag-border-color-hover: var(--spectrum-gray-800); + --system-tag-border-color-active: var(--spectrum-gray-900); + --system-tag-border-color-focus: var(--spectrum-gray-800); + --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-background-color: var(--spectrum-gray-75); + --system-tag-background-color-hover: var(--spectrum-gray-75); + --system-tag-background-color-active: var(--spectrum-gray-200); + --system-tag-background-color-focus: var(--spectrum-gray-75); + --system-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); + --system-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down); + --system-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default); + --system-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover); + --system-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down); + --system-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus); + --system-tag-border-color-disabled: transparent; + --system-tag-background-color-disabled: var(--spectrum-disabled-background-color); + --system-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75); + --system-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75); + --system-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75); + --system-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100); + --system-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100); + --system-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100); + --system-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200); + --system-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200); + --system-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200); + --system-tag-avatar-opacity-disabled: 0.3; + --system-tag-animation-duration: var(--spectrum-animation-duration-100); + --system-tag-border-width: var(--spectrum-border-width-100); + --system-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); + --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-tag-label-line-height: var(--spectrum-line-height-100); + --system-tag-label-font-weight: var(--spectrum-regular-font-weight); + --system-tag-content-color-selected: var(--spectrum-gray-50); + --system-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default); + --system-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down); + --system-tag-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); + --system-tag-border-color-invalid: var(--spectrum-negative-color-900); + --system-tag-border-color-invalid-hover: var(--spectrum-negative-color-1000); + --system-tag-border-color-invalid-active: var(--spectrum-negative-color-1100); + --system-tag-border-color-invalid-focus: var(--spectrum-negative-color-1000); + --system-tag-content-color-invalid: var(--spectrum-negative-content-color-default); + --system-tag-content-color-invalid-hover: var(--spectrum-negative-content-color-hover); + --system-tag-content-color-invalid-active: var(--spectrum-negative-content-color-down); + --system-tag-content-color-invalid-focus: var(--spectrum-negative-content-color-key-focus); + --system-tag-border-color-invalid-selected: var(--spectrum-negative-background-color-default); + --system-tag-border-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); + --system-tag-border-color-invalid-selected-focus: var(--spectrum-negative-background-color-down); + --system-tag-border-color-invalid-selected-active: var(--spectrum-negative-background-color-key-focus); + --system-tag-background-color-invalid-selected: var(--spectrum-negative-background-color-default); + --system-tag-background-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); + --system-tag-background-color-invalid-selected-active: var(--spectrum-negative-background-color-down); + --system-tag-background-color-invalid-selected-focus: var(--spectrum-negative-background-color-key-focus); + --system-tag-content-color-invalid-selected: var(--spectrum-white); + --system-tag-border-color-emphasized: var(--spectrum-accent-background-color-default); + --system-tag-border-color-emphasized-hover: var(--spectrum-accent-background-color-hover); + --system-tag-border-color-emphasized-active: var(--spectrum-accent-background-color-down); + --system-tag-border-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); + --system-tag-background-color-emphasized: var(--spectrum-accent-background-color-default); + --system-tag-background-color-emphasized-hover: var(--spectrum-accent-background-color-hover); + --system-tag-background-color-emphasized-active: var(--spectrum-accent-background-color-down); + --system-tag-background-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); + --system-tag-content-color-emphasized: var(--spectrum-white); + --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); + --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + --system-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); + --system-tag-height: var(--spectrum-component-height-100); + --system-tag-font-size: var(--spectrum-font-size-100); + --system-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); + --system-tag-size-s-height: var(--spectrum-component-height-75); + --system-tag-size-s-font-size: var(--spectrum-font-size-75); + --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tag-size-s-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-75); + --system-tag-size-s-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-small); + --system-tag-size-s-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); + --system-tag-size-s-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75); + --system-tag-size-s-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tag-size-s-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small); + --system-tag-size-s-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small); + --system-tag-size-s-avatar-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tag-size-s-label-spacing-block: var(--spectrum-component-top-to-text-75); + --system-tag-size-s-corner-radius: var(--system-tag-size-small-corner-radius); + --system-tag-size-s-spacing-inline-start: var(--system-tag-size-small-spacing-inline-start); + --system-tag-size-s-label-spacing-inline-end: var(--system-tag-size-small-label-spacing-inline-end); + --system-tag-size-s-clear-button-spacing-inline-end: var(--system-tag-size-small-clear-button-spacing-inline-end); + --system-scope-tag-height: var(--spectrum-component-height-100); + --system-tag-size-m-height: var(--spectrum-component-height-100); + --system-scope-tag-font-size: var(--spectrum-font-size-100); + --system-tag-size-m-font-size: var(--spectrum-font-size-100); + --system-scope-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-scope-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); + --system-tag-size-m-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); + --system-scope-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); + --system-tag-size-m-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); + --system-scope-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-size-m-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); + --system-scope-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-size-m-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); + --system-scope-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-size-m-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-scope-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-size-m-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); + --system-scope-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-size-m-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); + --system-scope-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-size-m-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-scope-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + --system-tag-size-m-label-spacing-block: var(--spectrum-component-top-to-text-100); + --system-scope-tag-corner-radius: var(--system-tag-size-medium-corner-radius); + --system-tag-size-m-corner-radius: var(--system-tag-size-medium-corner-radius); + --system-scope-tag-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); + --system-tag-size-m-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); + --system-scope-tag-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); + --system-tag-size-m-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); + --system-scope-tag-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); + --system-tag-size-m-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); + --system-tag-size-l-height: var(--spectrum-component-height-200); + --system-tag-size-l-font-size: var(--spectrum-font-size-200); + --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-tag-size-l-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-200); + --system-tag-size-l-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-large); + --system-tag-size-l-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-200); + --system-tag-size-l-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-200); + --system-tag-size-l-icon-spacing-inline-end: var(--spectrum-text-to-visual-200); + --system-tag-size-l-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-large); + --system-tag-size-l-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-large); + --system-tag-size-l-avatar-spacing-inline-end: var(--spectrum-text-to-visual-200); + --system-tag-size-l-label-spacing-block: var(--spectrum-component-top-to-text-200); + --system-tag-size-l-corner-radius: var(--system-tag-size-large-corner-radius); + --system-tag-size-l-spacing-inline-start: var(--system-tag-size-large-spacing-inline-start); + --system-tag-size-l-label-spacing-inline-end: var(--system-tag-size-large-label-spacing-inline-end); + --system-tag-size-l-clear-button-spacing-inline-end: var(--system-tag-size-large-clear-button-spacing-inline-end); + --system-tag-group-item-margin-block: var(--spectrum-spacing-75); + --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); + --system-textfield-border-color: var(--spectrum-gray-500); + --system-textfield-border-color-hover: var(--spectrum-gray-600); + --system-textfield-border-color-focus: var(--spectrum-gray-800); + --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); + --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-textfield-border-width: var(--spectrum-border-width-100); + --system-textfield-texfield-animation-duration: var(--spectrum-animation-duration-100); + --system-textfield-width: 240px; + --system-textfield-min-width: var(--spectrum-text-field-minimum-width-multiplier); + --system-textfield-corner-radius: var(--spectrum-corner-radius-100); + --system-textfield-spacing-inline-quiet: var(--spectrum-field-edge-to-text-quiet); + --system-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100); + --system-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-100); + --system-textfield-spacing-block-quiet: var(--spectrum-field-edge-to-border-quiet); + --system-textfield-label-spacing-block: var(--spectrum-field-label-to-component); + --system-textfield-helptext-spacing-block: var(--spectrum-help-text-to-component); + --system-textfield-icon-spacing-inline-end-quiet-invalid: var(--spectrum-field-edge-to-alert-icon-quiet); + --system-textfield-icon-spacing-inline-end-quiet-valid: var(--spectrum-field-edge-to-validation-icon-quiet); + --system-textfield-font-family: var(--spectrum-sans-font-family-stack); + --system-textfield-font-weight: var(--spectrum-regular-font-weight); + --system-textfield-character-count-font-family: var(--spectrum-sans-font-family-stack); + --system-textfield-character-count-font-weight: var(--spectrum-regular-font-weight); + --system-textfield-character-count-spacing-inline: var(--spectrum-spacing-200); + --system-textfield-character-count-spacing-inline-side: var(--spectrum-side-label-character-count-to-field); + --system-textfield-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-textfield-background-color: var(--spectrum-gray-50); + --system-textfield-text-color-default: var(--spectrum-neutral-content-color-default); + --system-textfield-text-color-hover: var(--spectrum-neutral-content-color-hover); + --system-textfield-text-color-focus: var(--spectrum-neutral-content-color-focus); + --system-textfield-text-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); + --system-textfield-text-color-keyboard-focus: var(--spectrum-neutral-content-color-key-focus); + --system-textfield-text-color-readonly: var(--spectrum-neutral-content-color-default); + --system-textfield-background-color-disabled: var(--spectrum-disabled-background-color); + --system-textfield-border-color-disabled: var(--spectrum-disabled-border-color); + --system-textfield-text-color-disabled: var(--spectrum-disabled-content-color); + --system-textfield-border-color-invalid-default: var(--spectrum-negative-border-color-default); + --system-textfield-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); + --system-textfield-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); + --system-textfield-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); + --system-textfield-border-color-invalid-keyboard-focus: var(--spectrum-negative-border-color-key-focus); + --system-textfield-icon-color-invalid: var(--spectrum-negative-visual-color); + --system-textfield-text-color-invalid: var(--spectrum-neutral-content-color-default); + --system-textfield-text-color-valid: var(--spectrum-neutral-content-color-default); + --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); + --system-textfield-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-textfield-text-area-min-inline-size: var(--spectrum-text-area-minimum-width); + --system-textfield-text-area-min-block-size: var(--spectrum-text-area-minimum-height); + --system-textfield-size-s-height: var(--spectrum-component-height-75); + --system-textfield-size-s-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-small); + --system-textfield-size-s-label-spacing-inline-side-label: var(--spectrum-spacing-100); + --system-textfield-size-s-placeholder-font-size: var(--spectrum-font-size-75); + --system-textfield-size-s-spacing-inline: var(--spectrum-component-edge-to-text-75); + --system-textfield-size-s-icon-size-invalid: var(--spectrum-workflow-icon-size-75); + --system-textfield-size-s-icon-size-valid: var(--spectrum-checkmark-icon-size-75); + --system-textfield-size-s-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-small); + --system-textfield-size-s-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-small); + --system-textfield-size-s-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small); + --system-textfield-size-s-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-small); + --system-textfield-size-s-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-small); + --system-textfield-size-s-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-small); + --system-textfield-size-s-character-count-font-size: var(--spectrum-font-size-75); + --system-textfield-size-s-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); + --system-textfield-size-s-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-small); + --system-textfield-size-s-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-small); + --system-textfield-size-s-text-area-min-block-size-quiet: var(--spectrum-component-height-75); + --system-textfield-height: var(--spectrum-component-height-100); + --system-textfield-size-m-height: var(--spectrum-component-height-100); + --system-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium); + --system-textfield-size-m-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium); + --system-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --system-textfield-size-m-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); + --system-textfield-size-m-placeholder-font-size: var(--spectrum-font-size-100); + --system-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100); + --system-textfield-size-m-spacing-inline: var(--spectrum-component-edge-to-text-100); + --system-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100); + --system-textfield-size-m-icon-size-invalid: var(--spectrum-workflow-icon-size-100); + --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); + --system-textfield-size-m-icon-size-valid: var(--spectrum-checkmark-icon-size-100); + --system-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); + --system-textfield-size-m-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); + --system-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); + --system-textfield-size-m-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); + --system-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); + --system-textfield-size-m-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); + --system-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); + --system-textfield-size-m-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); + --system-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); + --system-textfield-size-m-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); + --system-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); + --system-textfield-size-m-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); + --system-textfield-character-count-font-size: var(--spectrum-font-size-75); + --system-textfield-size-m-character-count-font-size: var(--spectrum-font-size-75); + --system-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); + --system-textfield-size-m-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); + --system-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium); + --system-textfield-size-m-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium); + --system-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium); + --system-textfield-size-m-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium); + --system-textfield-text-area-min-block-size-quiet: var(--spectrum-component-height-100); + --system-textfield-size-m-text-area-min-block-size-quiet: var(--spectrum-component-height-100); + --system-textfield-size-l-height: var(--spectrum-component-height-200); + --system-textfield-size-l-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-large); + --system-textfield-size-l-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --system-textfield-size-l-placeholder-font-size: var(--spectrum-font-size-200); + --system-textfield-size-l-spacing-inline: var(--spectrum-component-edge-to-text-200); + --system-textfield-size-l-icon-size-invalid: var(--spectrum-workflow-icon-size-200); + --system-textfield-size-l-icon-size-valid: var(--spectrum-checkmark-icon-size-200); + --system-textfield-size-l-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-large); + --system-textfield-size-l-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-large); + --system-textfield-size-l-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large); + --system-textfield-size-l-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-large); + --system-textfield-size-l-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-large); + --system-textfield-size-l-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-large); + --system-textfield-size-l-character-count-font-size: var(--spectrum-font-size-100); + --system-textfield-size-l-character-count-spacing-block: var(--spectrum-component-bottom-to-text-100); + --system-textfield-size-l-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-large); + --system-textfield-size-l-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-large); + --system-textfield-size-l-text-area-min-block-size-quiet: var(--spectrum-component-height-200); + --system-textfield-size-xl-height: var(--spectrum-component-height-300); + --system-textfield-size-xl-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); + --system-textfield-size-xl-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --system-textfield-size-xl-placeholder-font-size: var(--spectrum-font-size-300); + --system-textfield-size-xl-spacing-inline: var(--spectrum-component-edge-to-text-200); + --system-textfield-size-xl-icon-size-invalid: var(--spectrum-workflow-icon-size-300); + --system-textfield-size-xl-icon-size-valid: var(--spectrum-checkmark-icon-size-300); + --system-textfield-size-xl-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-extra-large); + --system-textfield-size-xl-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-extra-large); + --system-textfield-size-xl-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large); + --system-textfield-size-xl-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-extra-large); + --system-textfield-size-xl-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-extra-large); + --system-textfield-size-xl-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-extra-large); + --system-textfield-size-xl-character-count-font-size: var(--spectrum-font-size-200); + --system-textfield-size-xl-character-count-spacing-block: var(--spectrum-component-bottom-to-text-200); + --system-textfield-size-xl-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-extra-large); + --system-textfield-size-xl-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-extra-large); + --system-textfield-size-xl-text-area-min-block-size-quiet: var(--spectrum-component-height-300); + --system-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); + --system-thumbnail-border-width: var(--spectrum-border-width-100); + --system-thumbnail-border-color-rgba: rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-color-opacity)); + --system-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400); + --system-thumbnail-layer-border-color-inner: var(--spectrum-white); + --system-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100); + --system-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); + --system-thumbnail-border-width-selected: var(--spectrum-border-width-200); + --system-thumbnail-border-color-selected: var(--spectrum-accent-color-800); + --system-thumbnail-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-thumbnail-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled); + --system-thumbnail-size-50-size: var(--spectrum-thumbnail-size-50); + --system-thumbnail-size-75-size: var(--spectrum-thumbnail-size-75); + --system-thumbnail-size-100-size: var(--spectrum-thumbnail-size-100); + --system-thumbnail-size-200-size: var(--spectrum-thumbnail-size-200); + --system-thumbnail-size-300-size: var(--spectrum-thumbnail-size-300); + --system-thumbnail-size-400-size: var(--spectrum-thumbnail-size-400); + --system-thumbnail-size-500-size: var(--spectrum-thumbnail-size-500); + --system-thumbnail-size-600-size: var(--spectrum-thumbnail-size-600); + --system-thumbnail-size-700-size: var(--spectrum-thumbnail-size-700); + --system-thumbnail-size-800-size: var(--spectrum-thumbnail-size-800); + --system-thumbnail-size-900-size: var(--spectrum-thumbnail-size-900); + --system-thumbnail-size-1000-size: var(--spectrum-thumbnail-size-1000); + --system-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --system-toast-font-weight: var(--spectrum-regular-font-weight); + --system-toast-font-size: var(--spectrum-font-size-100); + --system-toast-corner-radius: var(--spectrum-corner-radius-100); + --system-toast-block-size: var(--spectrum-toast-height); + --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); + --system-toast-border-width: var(--spectrum-border-width-100); + --system-toast-line-height: var(--spectrum-line-height-100); + --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); + --system-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300); + --system-toast-spacing-text-and-action-button-to-divider: var(--spectrum-spacing-300); + --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon); + --system-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-300); + --system-toast-spacing-close-button: var(--spectrum-spacing-100); + --system-toast-spacing-block-start: var(--spectrum-spacing-100); + --system-toast-spacing-block-end: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); + --system-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text); + --system-toast-negative-background-color-default: var(--spectrum-negative-background-color-default); + --system-toast-positive-background-color-default: var(--spectrum-positive-background-color-default); + --system-toast-informative-background-color-default: var(--spectrum-informative-background-color-default); + --system-toast-text-and-icon-color: var(--spectrum-white); + --system-toast-divider-color: var(--spectrum-transparent-white-300); + --system-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default); + --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); + --system-tooltip-margin: 0px; + --system-tooltip-height: var(--spectrum-component-height-75); + --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); + --system-tooltip-border-radius: var(--spectrum-corner-radius-100); + --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); + --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); + --system-tooltip-font-size: var(--spectrum-font-size-75); + --system-tooltip-line-height: var(--spectrum-line-height-100); + --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-tooltip-font-weight: var(--spectrum-regular-font-weight); + --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); + --system-tooltip-spacing-block-start: var(--spectrum-component-top-to-text-75); + --system-tooltip-spacing-block-end: var(--spectrum-component-bottom-to-text-75); + --system-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); + --system-tooltip-background-color-informative: var(--spectrum-informative-background-color-default); + --system-tooltip-background-color-positive: var(--spectrum-positive-background-color-default); + --system-tooltip-background-color-negative: var(--spectrum-negative-background-color-default); + --system-tooltip-content-color: var(--spectrum-white); + --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); + --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); + --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); + --system-tooltip-tip-height-percentage: 50%; + --system-tooltip-tip-antialiasing-inset: 0.5px; + --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); + --system-tooltip-background-color-default: var(--system-tooltip-backgound-color-default-neutral); + --system-tray-exit-animation-delay: 0ms; + --system-tray-entry-animation-delay: 160ms; + --system-tray-max-inline-size: 375px; + --system-tray-spacing-edge-to-safe-zone: 64px; + --system-tray-entry-animation-duration: var(--spectrum-animation-duration-500); + --system-tray-exit-animation-duration: var(--spectrum-animation-duration-100); + --system-tray-corner-radius: var(--spectrum-corner-radius-100); + --system-tray-background-color: var(--spectrum-background-layer-2-color); + --system-tree-view-line-height: var(--spectrum-line-height-200); + --system-tree-view-margin-block: 1em; + --system-tree-view-font-size: var(--spectrum-font-size-100); + --system-tree-view-item-min-block-size: var(--spectrum-component-height-100); + --system-tree-view-item-indentation: var(--spectrum-treeview-item-indentation-medium); + --system-tree-view-item-padding-inline-start: var(--spectrum-component-height-100); + --system-tree-view-item-padding-inline-end: var(--spectrum-component-edge-to-text-100); + --system-tree-view-section-spacing: var(--spectrum-treeview-item-indentation-medium); + --system-tree-view-heading-font-weight: var(--spectrum-bold-font-weight); + --system-tree-view-heading-bottom-to-text: var(--spectrum-component-edge-to-text-100); + --system-tree-view-heading-color: var(--spectrum-heading-color); + --system-tree-view-item-border-size: var(--spectrum-border-width-200); + --system-tree-view-item-border-size-selected: 1px; + --system-tree-view-item-border-radius: 0px; + --system-tree-view-item-border-color-selected: var(--spectrum-blue-800); + --system-tree-view-item-border-color-focus: var(--spectrum-blue-700); + --system-tree-view-item-background-color-hover: var(--spectrum-gray-100); + --system-tree-view-item-background-color-focus: var(--spectrum-gray-100); + --system-tree-view-item-border-color-quiet-selected: transparent; + --system-tree-view-item-icon-gap: var(--spectrum-text-to-visual-75); + --system-tree-view-item-icon-color: var(--spectrum-gray-700); + --system-tree-view-item-icon-color-hover: var(--spectrum-gray-900); + --system-tree-view-item-icon-color-focus: var(--spectrum-gray-900); + --system-tree-view-item-icon-color-selected: var(--spectrum-gray-900); + --system-tree-view-item-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-tree-view-item-text-color: var(--spectrum-neutral-content-color-default); + --system-tree-view-item-text-color-selected: var(--spectrum-gray-900); + --system-tree-view-item-text-color-disabled: var(--spectrum-gray-500); + --system-tree-view-item-text-color-focus: var(--spectrum-gray-900); + --system-tree-view-item-text-color-hover: var(--spectrum-gray-900); + --system-tree-view-indicator-margin-inline-start: calc(var(--spectrum-component-height-100) * -1); + --system-tree-view-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-medium); + --system-tree-view-item-min-block-size-thumbnail-offset: var(--spectrum-treeview-item-min-block-size-thumbnail-offset-medium, 0px); + --system-tree-view-indicator-animation-duration: var(--spectrum-animation-duration-100); + --system-tree-view-size-s-font-size: var(--spectrum-font-size-75); + --system-tree-view-size-s-item-min-block-size: var(--spectrum-component-height-75); + --system-tree-view-size-s-item-indentation: var(--spectrum-treeview-item-indentation-small); + --system-tree-view-size-s-heading-bottom-to-text: var(--spectrum-component-edge-to-text-75); + --system-tree-view-size-s-item-padding-inline-start: var(--spectrum-component-height-75); + --system-tree-view-size-s-indicator-margin-inline-start: calc(var(--spectrum-component-height-75) * -1); + --system-tree-view-size-s-item-padding-inline-end: var(--spectrum-component-edge-to-text-75); + --system-tree-view-size-s-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-small); + --system-tree-view-size-s-item-min-block-size-thumbnail-offset: 6px; + --system-tree-view-size-l-font-size: var(--spectrum-font-size-200); + --system-tree-view-size-l-item-indentation: var(--spectrum-treeview-item-indentation-large); + --system-tree-view-size-l-item-min-block-size: var(--spectrum-component-height-200); + --system-tree-view-size-l-heading-bottom-to-text: var(--spectrum-component-edge-to-text-200); + --system-tree-view-size-l-item-padding-inline-start: var(--spectrum-component-height-200); + --system-tree-view-size-l-indicator-margin-inline-start: calc(var(--spectrum-component-height-200) * -1); + --system-tree-view-size-l-item-padding-inline-end: var(--spectrum-component-edge-to-text-200); + --system-tree-view-size-l-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-large); + --system-tree-view-size-l-item-min-block-size-thumbnail-offset: 0px; + --system-tree-view-size-xl-font-size: var(--spectrum-font-size-300); + --system-tree-view-size-xl-item-indentation: var(--spectrum-treeview-item-indentation-extra-large); + --system-tree-view-size-xl-item-min-block-size: var(--spectrum-component-height-300); + --system-tree-view-size-xl-heading-bottom-to-text: var(--spectrum-component-edge-to-text-300); + --system-tree-view-size-xl-item-padding-inline-start: var(--spectrum-component-height-300); + --system-tree-view-size-xl-indicator-margin-inline-start: calc(var(--spectrum-component-height-300) * -1); + --system-tree-view-size-xl-item-padding-inline-end: var(--spectrum-component-edge-to-text-300); + --system-tree-view-size-xl-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large); + --system-tree-view-size-xl-item-min-block-size-thumbnail-offset: 0px; + --system-tree-view-detached-item-border-radius: var(--spectrum-corner-radius-100); + --system-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --system-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --system-font-family: var(--spectrum-sans-font-family-stack); + --system-font-style: var(--spectrum-default-font-style); + --system-font-size: var(--spectrum-font-size-100); + --system-heading-sans-serif-font-family: var(--spectrum-sans-font-family-stack); + --system-heading-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-heading-font-color: var(--spectrum-heading-color); + --system-heading-size-xxs-font-size: var(--spectrum-heading-size-xxs); + --system-heading-size-xxs-cjk-font-size: var(--spectrum-heading-cjk-size-xxs); + --system-heading-size-xs-font-size: var(--spectrum-heading-size-xs); + --system-heading-size-xs-cjk-font-size: var(--spectrum-heading-cjk-size-xs); + --system-heading-size-s-font-size: var(--spectrum-heading-size-s); + --system-heading-size-s-cjk-font-size: var(--spectrum-heading-cjk-size-s); + --system-heading-font-size: var(--spectrum-heading-size-m); + --system-heading-size-m-font-size: var(--spectrum-heading-size-m); + --system-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --system-heading-size-m-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --system-heading-size-l-font-size: var(--spectrum-heading-size-l); + --system-heading-size-l-cjk-font-size: var(--spectrum-heading-cjk-size-l); + --system-heading-size-xl-font-size: var(--spectrum-heading-size-xl); + --system-heading-size-xl-cjk-font-size: var(--spectrum-heading-cjk-size-xl); + --system-heading-size-xxl-font-size: var(--spectrum-heading-size-xxl); + --system-heading-size-xxl-cjk-font-size: var(--spectrum-heading-cjk-size-xxl); + --system-heading-size-xxxl-font-size: var(--spectrum-heading-size-xxxl); + --system-heading-size-xxxl-cjk-font-size: var(--spectrum-heading-cjk-size-xxxl); + --system-body-sans-serif-font-family: var(--spectrum-sans-font-family-stack); + --system-body-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-body-font-color: var(--spectrum-body-color); + --system-body-size-xs-font-size: var(--spectrum-body-size-xs); + --system-body-size-s-font-size: var(--spectrum-body-size-s); + --system-body-font-size: var(--spectrum-body-size-m); + --system-body-size-m-font-size: var(--spectrum-body-size-m); + --system-body-size-l-font-size: var(--spectrum-body-size-l); + --system-body-size-xl-font-size: var(--spectrum-body-size-xl); + --system-body-size-xxl-font-size: var(--spectrum-body-size-xxl); + --system-body-size-xxxl-font-size: var(--spectrum-body-size-xxxl); + --system-detail-sans-serif-font-family: var(--spectrum-sans-font-family-stack); + --system-detail-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-detail-font-color: var(--spectrum-detail-color); + --system-detail-size-s-font-size: var(--spectrum-detail-size-s); + --system-detail-font-size: var(--spectrum-detail-size-m); + --system-detail-size-m-font-size: var(--spectrum-detail-size-m); + --system-detail-size-l-font-size: var(--spectrum-detail-size-l); + --system-detail-size-xl-font-size: var(--spectrum-detail-size-xl); + --system-code-font-family: var(--spectrum-code-font-family-stack); + --system-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-code-font-color: var(--spectrum-code-color); + --system-code-size-xs-font-size: var(--spectrum-code-size-xs); + --system-code-size-s-font-size: var(--spectrum-code-size-s); + --system-code-font-size: var(--spectrum-code-size-m); + --system-code-size-m-font-size: var(--spectrum-code-size-m); + --system-code-size-l-font-size: var(--spectrum-code-size-l); + --system-code-size-xl-font-size: var(--spectrum-code-size-xl); + --system-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0); + --system-underlay-background-exit-animation-ease: var(--spectrum-animation-ease-in); + --system-underlay-background-entry-animation-ease: var(--spectrum-animation-ease-out); + --system-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600); + --system-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-300); + --system-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200); + --system-underlay-background-color: rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)); + --system-well-border-width: var(--spectrum-border-width-100); + --system-well-border-color: rgba(var(--spectrum-gray-900-rgb), 0.05); + --system-well-border-radius: var(--spectrum-spacing-75); + --system-well-content-color: var(--spectrum-body-color); + --system-well-background-color: rgba(var(--spectrum-gray-800-rgb), 0.02); + --system-well-padding: var(--spectrum-spacing-300); + --system-well-margin-top: var(--spectrum-spacing-75); + --system-well-minimum-width: var(--spectrum-well-min-width); +} diff --git a/tokens/dist/css/components/spectrum/infieldbutton.css b/tokens/dist/css/components/spectrum/infieldbutton.css new file mode 100644 index 00000000000..f176b26ef34 --- /dev/null +++ b/tokens/dist/css/components/spectrum/infieldbutton.css @@ -0,0 +1,79 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-infield-button-border-width: var(--spectrum-border-width-100); + --system-infield-button-border-color: inherit; + --system-infield-button-border-radius: var(--spectrum-corner-radius-100); + --system-infield-button-border-radius-reset: 0; + --system-infield-button-stacked-top-border-radius-start-start: var(--system-infield-button-border-radius-reset); + --system-infield-button-stacked-bottom-border-radius-end-start: var(--system-infield-button-border-radius-reset); + --system-infield-button-background-color: var(--spectrum-gray-75); + --system-infield-button-background-color-hover: var(--spectrum-gray-200); + --system-infield-button-background-color-down: var(--spectrum-gray-300); + --system-infield-button-background-color-key-focus: var(--spectrum-gray-200); + --system-infield-button-height: var(--spectrum-component-height-100); + --system-infield-button-width: var(--spectrum-component-height-100); + --system-infield-button-stacked-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); + --system-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill); + --system-infield-button-inner-edge-to-fill: var(--spectrum-in-field-button-stacked-inner-edge-to-fill); + --system-infield-button-fill-padding: 0px; + --system-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium); + --system-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); + --system-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium); + --system-infield-button-animation-duration: var(--spectrum-animation-duration-100); + --system-infield-button-icon-color: var(--spectrum-neutral-content-color-default); + --system-infield-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-infield-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-infield-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-infield-button-fill-justify-content: center; + --system-infield-button-disabled-background-color: var(--spectrum-disabled-background-color); + --system-infield-button-disabled-background-color-hover: var(--spectrum-disabled-background-color); + --system-infield-button-disabled-background-color-down: var(--spectrum-disabled-background-color); + --system-infield-button-disabled-border-color: var(--spectrum-disabled-background-color); + --system-infield-button-disabled-icon-color: var(--spectrum-disabled-content-color); + --system-infield-button-disabled-icon-color-hover: var(--spectrum-disabled-content-color); + --system-infield-button-disabled-icon-color-down: var(--spectrum-disabled-content-color); + --system-infield-button-disabled-icon-color-key-focus: var(--spectrum-disabled-content-color); + --system-infield-button-size-s-height: var(--spectrum-component-height-75); + --system-infield-button-size-s-width: var(--spectrum-component-height-75); + --system-infield-button-size-s-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small); + --system-infield-button-size-s-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); + --system-infield-button-size-s-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small); + --system-infield-button-size-l-height: var(--spectrum-component-height-200); + --system-infield-button-size-l-width: var(--spectrum-component-height-200); + --system-infield-button-size-l-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large); + --system-infield-button-size-l-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); + --system-infield-button-size-l-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large); + --system-infield-button-size-xl-height: var(--spectrum-component-height-300); + --system-infield-button-size-xl-width: var(--spectrum-component-height-300); + --system-infield-button-size-xl-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large); + --system-infield-button-size-xl-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); + --system-infield-button-size-xl-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large); + --system-infield-button-top-width: var(--spectrum-in-field-button-width-stacked-medium); + --system-infield-button-bottom-width: var(--spectrum-in-field-button-width-stacked-medium); + --system-infield-button-top-size-s-width: var(--spectrum-in-field-button-width-stacked-small); + --system-infield-button-bottom-size-s-width: var(--spectrum-in-field-button-width-stacked-small); + --system-infield-button-top-size-l-width: var(--spectrum-in-field-button-width-stacked-large); + --system-infield-button-bottom-size-l-width: var(--spectrum-in-field-button-width-stacked-large); + --system-infield-button-top-size-xl-width: var(--spectrum-in-field-button-width-stacked-extra-large); + --system-infield-button-bottom-size-xl-width: var(--spectrum-in-field-button-width-stacked-extra-large); + --system-infield-button-quiet-background-color: transparent; + --system-infield-button-quiet-background-color-hover: transparent; + --system-infield-button-quiet-background-color-down: transparent; + --system-infield-button-quiet-background-color-key-focus: transparent; + --system-infield-button-quiet-infield-border-color: transparent; + --system-infield-button-quiet-border-width: 0; + --system-infield-button-quiet-disabled-background-color: transparent; + --system-infield-button-quiet-disabled-border-color: transparent; +} diff --git a/tokens/dist/css/components/spectrum/inlinealert.css b/tokens/dist/css/components/spectrum/inlinealert.css new file mode 100644 index 00000000000..2aa7b82496e --- /dev/null +++ b/tokens/dist/css/components/spectrum/inlinealert.css @@ -0,0 +1,41 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-in-line-alert-heading-font-family: var(--spectrum-sans-font-family-stack); + --system-in-line-alert-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-in-line-alert-heading-font-style: var(--spectrum-heading-sans-serif-font-style); + --system-in-line-alert-heading-font-size: var(--spectrum-heading-size-xxs); + --system-in-line-alert-heading-line-height: var(--spectrum-heading-line-height); + --system-in-line-alert-content-font-family: var(--spectrum-sans-font-family-stack); + --system-in-line-alert-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-in-line-alert-content-font-style: var(--spectrum-body-sans-serif-font-style); + --system-in-line-alert-content-font-size: var(--spectrum-body-size-s); + --system-in-line-alert-content-line-height: var(--spectrum-body-line-height); + --system-in-line-alert-border-width: var(--spectrum-border-width-200); + --system-in-line-alert-border-radius: var(--spectrum-corner-radius-100); + --system-in-line-alert-icon-size: var(--spectrum-workflow-icon-size-100); + --system-in-line-alert-min-inline-size: var(--spectrum-in-line-alert-minimum-width); + --system-in-line-alert-header-min-block-size: var(--spectrum-component-height-50); + --system-in-line-alert-spacing-edge-to-text: var(--spectrum-spacing-400); + --system-in-line-alert-spacing-header-to-icon: var(--spectrum-spacing-400); + --system-in-line-alert-spacing-header-content-button: var(--spectrum-spacing-300); + --system-in-line-alert-background-color: var(--spectrum-background-layer-2-color); + --system-in-line-alert-border-and-icon-color: var(--spectrum-neutral-visual-color); + --system-in-line-alert-header-color: var(--spectrum-heading-color); + --system-in-line-alert-content-color: var(--spectrum-body-color); + --system-in-line-alert-border-and-icon-color-info: var(--spectrum-informative-visual-color); + --system-in-line-alert-border-and-icon-color-positive: var(--spectrum-positive-visual-color); + --system-in-line-alert-border-and-icon-color-notice: var(--spectrum-notice-visual-color); + --system-in-line-alert-border-and-icon-color-negative: var(--spectrum-negative-visual-color); +} diff --git a/tokens/dist/css/components/spectrum/link.css b/tokens/dist/css/components/spectrum/link.css new file mode 100644 index 00000000000..cfa404115ab --- /dev/null +++ b/tokens/dist/css/components/spectrum/link.css @@ -0,0 +1,26 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-link-animation-duration: var(--spectrum-animation-duration-100); + --system-link-text-color-primary-default: var(--spectrum-accent-content-color-default); + --system-link-text-color-primary-hover: var(--spectrum-accent-content-color-hover); + --system-link-text-color-primary-active: var(--spectrum-accent-content-color-down); + --system-link-text-color-primary-focus: var(--spectrum-accent-content-color-key-focus); + --system-link-text-color-secondary-default: var(--spectrum-neutral-content-color-default); + --system-link-text-color-secondary-hover: var(--spectrum-neutral-content-color-hover); + --system-link-text-color-secondary-active: var(--spectrum-neutral-content-color-down); + --system-link-text-color-secondary-focus: var(--spectrum-neutral-content-color-key-focus); + --system-link-text-color-white: var(--spectrum-white); + --system-link-text-color-black: var(--spectrum-black); +} diff --git a/tokens/dist/css/components/spectrum/logicbutton.css b/tokens/dist/css/components/spectrum/logicbutton.css new file mode 100644 index 00000000000..f440efb5c9f --- /dev/null +++ b/tokens/dist/css/components/spectrum/logicbutton.css @@ -0,0 +1,39 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-logic-button-height: 24px; + --system-logic-button-padding: var(--spectrum-component-edge-to-text-50); + --system-logic-button-font-size: var(--spectrum-font-size-100); + --system-logic-button-font-weight: var(--spectrum-bold-font-weight); + --system-logic-button-border-width: var(--spectrum-border-width-200); + --system-logic-button-border-radius: var(--spectrum-corner-radius-100); + --system-logic-button-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --system-logic-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-logic-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-logic-button-and-text-color: var(--spectrum-white); + --system-logic-button-and-background-color-default: var(--spectrum-logic-button-and-background-color); + --system-logic-button-and-background-color-hover: var(--spectrum-blue-1100); + --system-logic-button-and-border-color-hover: var(--spectrum-blue-1100); + --system-logic-button-or-text-color: var(--spectrum-white); + --system-logic-button-and-background-color-default-disabled: var(--spectrum-gray-200); + --system-logic-button-and-border-color-disabled: var(--spectrum-gray-200); + --system-logic-button-and-text-color-disabled: var(--spectrum-gray-500); + --system-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-200); + --system-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-200); + --system-logic-button-or-background-color-disabled: var(--spectrum-gray-200); + --system-logic-button-or-border-color-disabled: var(--spectrum-gray-200); + --system-logic-button-or-text-color-disabled: var(--spectrum-gray-500); + --system-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-200); + --system-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-200); +} diff --git a/tokens/dist/css/components/spectrum/menu.css b/tokens/dist/css/components/spectrum/menu.css new file mode 100644 index 00000000000..05eacd71155 --- /dev/null +++ b/tokens/dist/css/components/spectrum/menu.css @@ -0,0 +1,151 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-menu-item-top-to-action: var(--spectrum-spacing-50); + --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); + --system-menu-item-label-line-height: var(--spectrum-line-height-100); + --system-menu-item-label-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-menu-item-label-to-description-spacing: var(--spectrum-menu-item-label-to-description); + --system-menu-item-focus-indicator-width: var(--spectrum-border-width-200); + --system-menu-item-focus-indicator-color: var(--spectrum-blue-800); + --system-menu-item-label-to-value-area-min-spacing: var(--spectrum-spacing-100); + --system-menu-item-label-content-color-default: var(--spectrum-neutral-content-color-default); + --system-menu-item-label-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-menu-item-label-content-color-down: var(--spectrum-neutral-content-color-down); + --system-menu-item-label-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-menu-item-label-icon-color-default: var(--spectrum-neutral-content-color-default); + --system-menu-item-label-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-menu-item-label-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-menu-item-label-icon-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-menu-item-label-content-color-disabled: var(--spectrum-disabled-content-color); + --system-menu-item-label-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-menu-item-description-line-height: var(--spectrum-line-height-100); + --system-menu-item-description-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-menu-item-description-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-menu-item-description-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-menu-item-description-color-down: var(--spectrum-neutral-subdued-content-color-down); + --system-menu-item-description-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-menu-item-description-color-disabled: var(--spectrum-disabled-content-color); + --system-menu-section-header-line-height: var(--spectrum-line-height-100); + --system-menu-section-header-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-menu-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-menu-section-header-color: var(--spectrum-gray-900); + --system-menu-collapsible-icon-color: var(--spectrum-gray-900); + --system-menu-checkmark-icon-color-default: var(--spectrum-accent-color-900); + --system-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); + --system-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); + --system-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); + --system-menu-drillin-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-menu-drillin-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-menu-drillin-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); + --system-menu-drillin-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-menu-item-value-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-menu-item-value-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-menu-item-value-color-down: var(--spectrum-neutral-subdued-content-color-down); + --system-menu-item-value-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-menu-checkmark-display-hidden: none; + --system-menu-checkmark-display-shown: block; + --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown); + --system-menu-item-collapsible-has-icon-sub-item-padding-x-start: calc(var(--system-menu-item-label-inline-edge-to-content) + var(--system-menu-item-checkmark-width) + var(--system-menu-item-text-to-control) + var(--system-menu-item-icon-width) + var(--system-menu-item-label-text-to-visual) + var(--system-menu-item-focus-indicator-width)); + --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc(var(--system-menu-item-label-inline-edge-to-content) + var(--system-menu-item-checkmark-width) + var(--system-menu-item-label-text-to-visual) + var(--system-menu-item-focus-indicator-width)); + --system-menu-item-background-color-default: var(--spectrum-gray-50); + --system-menu-item-background-color-hover: rgba(var(--spectrum-gray-900), var(--spectrum-transparent-black-200-opacity)); + --system-menu-item-background-color-down: rgba(var(--spectrum-gray-900), var(--spectrum-transparent-black-200-opacity)); + --system-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-900), var(--spectrum-transparent-black-200-opacity)); + --system-menu-size-s-item-min-height: var(--spectrum-component-height-75); + --system-menu-size-s-item-icon-height: var(--spectrum-workflow-icon-size-75); + --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75); + --system-menu-size-s-item-label-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-item-label-text-to-visual: var(--spectrum-text-to-visual-75); + --system-menu-size-s-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75); + --system-menu-size-s-item-top-edge-to-text: var(--spectrum-component-top-to-text-75); + --system-menu-size-s-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75); + --system-menu-size-s-item-text-to-control: var(--spectrum-text-to-control-75); + --system-menu-size-s-item-description-font-size: var(--spectrum-font-size-50); + --system-menu-size-s-section-header-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-section-header-min-width: var(--spectrum-component-height-75); + --system-menu-size-s-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small); + --system-menu-size-s-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small); + --system-menu-size-s-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small); + --system-menu-size-s-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small); + --system-menu-size-s-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small); + --system-menu-item-min-height: var(--spectrum-component-height-100); + --system-menu-size-m-item-min-height: var(--spectrum-component-height-100); + --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-height: var(--spectrum-workflow-icon-size-100); + --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-width: var(--spectrum-workflow-icon-size-100); + --system-menu-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); + --system-menu-size-m-item-label-text-to-visual: var(--spectrum-text-to-visual-100); + --system-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100); + --system-menu-size-m-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100); + --system-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100); + --system-menu-size-m-item-top-edge-to-text: var(--spectrum-component-top-to-text-100); + --system-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --system-menu-size-m-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); + --system-menu-size-m-item-text-to-control: var(--spectrum-text-to-control-100); + --system-menu-item-description-font-size: var(--spectrum-font-size-75); + --system-menu-size-m-item-description-font-size: var(--spectrum-font-size-75); + --system-menu-section-header-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-section-header-font-size: var(--spectrum-font-size-100); + --system-menu-section-header-min-width: var(--spectrum-component-height-100); + --system-menu-size-m-section-header-min-width: var(--spectrum-component-height-100); + --system-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); + --system-menu-size-m-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); + --system-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium); + --system-menu-size-m-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium); + --system-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium); + --system-menu-size-m-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium); + --system-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium); + --system-menu-size-m-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium); + --system-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); + --system-menu-size-m-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); + --system-menu-size-l-item-min-height: var(--spectrum-component-height-200); + --system-menu-size-l-item-icon-height: var(--spectrum-workflow-icon-size-200); + --system-menu-size-l-item-icon-width: var(--spectrum-workflow-icon-size-200); + --system-menu-size-l-item-label-font-size: var(--spectrum-font-size-200); + --system-menu-size-l-item-label-text-to-visual: var(--spectrum-text-to-visual-200); + --system-menu-size-l-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200); + --system-menu-size-l-item-top-edge-to-text: var(--spectrum-component-top-to-text-200); + --system-menu-size-l-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200); + --system-menu-size-l-item-text-to-control: var(--spectrum-text-to-control-200); + --system-menu-size-l-item-description-font-size: var(--spectrum-font-size-100); + --system-menu-size-l-section-header-font-size: var(--spectrum-font-size-200); + --system-menu-size-l-section-header-min-width: var(--spectrum-component-height-200); + --system-menu-size-l-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large); + --system-menu-size-l-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large); + --system-menu-size-l-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large); + --system-menu-size-l-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large); + --system-menu-size-l-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large); + --system-menu-size-xl-item-min-height: var(--spectrum-component-height-300); + --system-menu-size-xl-item-icon-height: var(--spectrum-workflow-icon-size-300); + --system-menu-size-xl-item-icon-width: var(--spectrum-workflow-icon-size-300); + --system-menu-size-xl-item-label-font-size: var(--spectrum-font-size-300); + --system-menu-size-xl-item-label-text-to-visual: var(--spectrum-text-to-visual-300); + --system-menu-size-xl-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300); + --system-menu-size-xl-item-top-edge-to-text: var(--spectrum-component-top-to-text-300); + --system-menu-size-xl-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300); + --system-menu-size-xl-item-text-to-control: var(--spectrum-text-to-control-300); + --system-menu-size-xl-item-description-font-size: var(--spectrum-font-size-200); + --system-menu-size-xl-section-header-font-size: var(--spectrum-font-size-300); + --system-menu-size-xl-section-header-min-width: var(--spectrum-component-height-300); + --system-menu-size-xl-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large); + --system-menu-size-xl-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large); + --system-menu-size-xl-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large); + --system-menu-size-xl-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large); + --system-menu-size-xl-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large); +} diff --git a/tokens/dist/css/components/spectrum/miller.css b/tokens/dist/css/components/spectrum/miller.css new file mode 100644 index 00000000000..1eeac83a511 --- /dev/null +++ b/tokens/dist/css/components/spectrum/miller.css @@ -0,0 +1,19 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-miller-columns-inline-size: 272px; + --system-miller-columns-padding: var(--spectrum-spacing-100); + --system-miller-columns-margin-inline-start: var(--spectrum-spacing-100); + --system-miller-columns-margin-inline-end: var(--spectrum-spacing-100); +} diff --git a/tokens/dist/css/components/spectrum/modal.css b/tokens/dist/css/components/spectrum/modal.css new file mode 100644 index 00000000000..71b34061aa0 --- /dev/null +++ b/tokens/dist/css/components/spectrum/modal.css @@ -0,0 +1,25 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-modal-confirm-exit-animation-delay: var(--spectrum-animation-duration-0); + --system-modal-fullscreen-margin: 32px; + --system-modal-max-height: 90vh; + --system-modal-max-width: 90%; + --system-modal-background-color: var(--spectrum-gray-100); + --system-modal-confirm-border-radius: var(--spectrum-corner-radius-100); + --system-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100); + --system-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500); + --system-modal-confirm-entry-animation-delay: var(--spectrum-animation-duration-200); + --system-modal-transition-animation-duration: var(--spectrum-animation-duration-100); +} diff --git a/tokens/dist/css/components/spectrum/opacitycheckerboard.css b/tokens/dist/css/components/spectrum/opacitycheckerboard.css new file mode 100644 index 00000000000..263538ec316 --- /dev/null +++ b/tokens/dist/css/components/spectrum/opacitycheckerboard.css @@ -0,0 +1,19 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-opacity-checkerboard-dark: var(--spectrum-opacity-checkerboard-square-dark); + --system-opacity-checkerboard-light: var(--spectrum-opacity-checkerboard-square-light); + --system-opacity-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size); + --system-opacity-checkerboard-position: left top; +} diff --git a/tokens/dist/css/components/spectrum/pagination.css b/tokens/dist/css/components/spectrum/pagination.css new file mode 100644 index 00000000000..34ea14ee796 --- /dev/null +++ b/tokens/dist/css/components/spectrum/pagination.css @@ -0,0 +1,20 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-pagination-counter-margin-inline-start: var(--spectrum-pagination-item-inline-spacing); + --system-pagination-page-button-inline-spacing: var(--spectrum-pagination-item-inline-spacing); + --system-pagination-counter-color: var(--spectrum-neutral-subdued-content-color-default); + --system-pagination-counter-font-size: var(--spectrum-font-size-100); + --system-pagination-counter-line-height: var(--spectrum-line-height-100); +} diff --git a/tokens/dist/css/components/spectrum/picker.css b/tokens/dist/css/components/spectrum/picker.css new file mode 100644 index 00000000000..58d5da37df3 --- /dev/null +++ b/tokens/dist/css/components/spectrum/picker.css @@ -0,0 +1,118 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-picker-background-color-default: var(--spectrum-gray-75); + --system-picker-background-color-default-open: var(--spectrum-gray-200); + --system-picker-background-color-active: var(--spectrum-gray-300); + --system-picker-background-color-hover: var(--spectrum-gray-200); + --system-picker-background-color-hover-open: var(--spectrum-gray-200); + --system-picker-background-color-key-focus: var(--spectrum-gray-200); + --system-picker-border-color-default: var(--spectrum-gray-500); + --system-picker-border-color-default-open: var(--spectrum-gray-500); + --system-picker-border-color-hover: var(--spectrum-gray-600); + --system-picker-border-color-hover-open: var(--spectrum-gray-600); + --system-picker-border-color-active: var(--spectrum-gray-700); + --system-picker-border-color-key-focus: var(--spectrum-gray-600); + --system-picker-border-width: var(--spectrum-border-width-100); + --system-picker-font-size: var(--spectrum-font-size-100); + --system-picker-font-weight: var(--spectrum-regular-font-weight); + --system-picker-placeholder-font-style: var(--spectrum-default-font-style); + --system-picker-line-height: var(--spectrum-line-height-100); + --system-picker-block-size: var(--spectrum-component-height-100); + --system-picker-inline-size: var(--spectrum-field-width); + --system-picker-border-radius: var(--spectrum-corner-radius-100); + --system-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-100); + --system-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100); + --system-picker-spacing-edge-to-text-quiet: var(--spectrum-field-edge-to-text-quiet); + --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); + --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); + --system-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-medium); + --system-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-medium); + --system-picker-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-medium); + --system-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-medium); + --system-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); + --system-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100); + --system-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100); + --system-picker-spacing-edge-to-disclosure-icon-quiet: var(--spectrum-picker-end-edge-to-disclousure-icon-quiet); + --system-picker-animation-duration: var(--spectrum-animation-duration-100); + --system-picker-font-color-default: var(--spectrum-neutral-content-color-default); + --system-picker-font-color-default-open: var(--spectrum-neutral-content-color-focus); + --system-picker-font-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-font-color-hover-open: var(--spectrum-neutral-content-color-focus-hover); + --system-picker-font-color-active: var(--spectrum-neutral-content-color-down); + --system-picker-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-picker-icon-color-default: var(--spectrum-neutral-content-color-default); + --system-picker-icon-color-default-open: var(--spectrum-neutral-content-color-focus); + --system-picker-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-icon-color-hover-open: var(--spectrum-neutral-content-color-focus-hover); + --system-picker-icon-color-active: var(--spectrum-neutral-content-color-down); + --system-picker-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-picker-border-color-error-default: var(--spectrum-negative-border-color-default); + --system-picker-border-color-error-default-open: var(--spectrum-negative-border-color-focus); + --system-picker-border-color-error-hover: var(--spectrum-negative-border-color-hover); + --system-picker-border-color-error-hover-open: var(--spectrum-negative-border-color-focus-hover); + --system-picker-border-color-error-active: var(--spectrum-negative-border-color-down); + --system-picker-border-color-error-key-focus: var(--spectrum-negative-border-color-key-focus); + --system-picker-icon-color-error: var(--spectrum-negative-visual-color); + --system-picker-background-color-disabled: var(--spectrum-disabled-background-color); + --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-picker-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-picker-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-medium); + --system-picker-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-size-s-block-size: var(--spectrum-component-height-75); + --system-picker-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-picker-size-s-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-picker-size-s-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75); + --system-picker-size-s-spacing-text-to-icon: var(--spectrum-text-to-visual-75); + --system-picker-size-s-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-small); + --system-picker-size-s-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small); + --system-picker-size-s-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-small); + --system-picker-size-s-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-small); + --system-picker-size-s-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); + --system-picker-size-s-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75); + --system-picker-size-s-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75); + --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-small); + --system-picker-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-size-l-block-size: var(--spectrum-component-height-200); + --system-picker-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200); + --system-picker-size-l-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --system-picker-size-l-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200); + --system-picker-size-l-spacing-text-to-icon: var(--spectrum-text-to-visual-200); + --system-picker-size-l-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-large); + --system-picker-size-l-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large); + --system-picker-size-l-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-large); + --system-picker-size-l-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-large); + --system-picker-size-l-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); + --system-picker-size-l-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200); + --system-picker-size-l-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200); + --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-large); + --system-picker-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-size-xl-block-size: var(--spectrum-component-height-300); + --system-picker-size-xl-spacing-top-to-text: var(--spectrum-component-top-to-text-300); + --system-picker-size-xl-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --system-picker-size-xl-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300); + --system-picker-size-xl-spacing-text-to-icon: var(--spectrum-text-to-visual-300); + --system-picker-size-xl-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-extra-large); + --system-picker-size-xl-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large); + --system-picker-size-xl-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); + --system-picker-size-xl-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-extra-large); + --system-picker-size-xl-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); + --system-picker-size-xl-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300); + --system-picker-size-xl-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300); + --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-extra-large); +} diff --git a/tokens/dist/css/components/spectrum/pickerbutton.css b/tokens/dist/css/components/spectrum/pickerbutton.css new file mode 100644 index 00000000000..f0efe15cda8 --- /dev/null +++ b/tokens/dist/css/components/spectrum/pickerbutton.css @@ -0,0 +1,69 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-picker-button-background-color: var(--spectrum-gray-75); + --system-picker-button-background-color-hover: var(--spectrum-gray-200); + --system-picker-button-background-color-down: var(--spectrum-gray-300); + --system-picker-button-background-color-key-focus: var(--spectrum-gray-200); + --system-picker-button-border-color: inherit; + --system-picker-button-border-radius: var(--spectrum-corner-radius-100); + --system-picker-button-border-radius-rounded-sided: 0; + --system-picker-button-border-radius-sided: 0; + --system-picker-button-border-width: var(--spectrum-border-width-100); + --system-picker-button-height: var(--spectrum-component-height-100); + --system-picker-button-width: var(--spectrum-component-height-100); + --system-picker-button-gap: var(--spectrum-text-to-visual-50); + --system-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); + --system-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100); + --system-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200); + --system-picker-button-icon-color: var(--spectrum-neutral-content-color-default); + --system-picker-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-picker-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-picker-button-font-color: var(--spectrum-neutral-content-color-default); + --system-picker-button-font-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-button-font-color-down: var(--spectrum-neutral-content-color-down); + --system-picker-button-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); + --system-picker-button-font-style: var(--spectrum-default-font-style); + --system-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-picker-button-font-size: var(--spectrum-font-size-100); + --system-picker-button-background-animation-duration: var(--spectrum-animation-duration-100); + --system-picker-button-background-color-disabled: var(--spectrum-disabled-background-color); + --system-picker-button-background-color-hover-disabled: var(--spectrum-disabled-background-color); + --system-picker-button-background-color-down-disabled: var(--spectrum-disabled-background-color); + --system-picker-button-border-color-disabled: var(--spectrum-disabled-background-color); + --system-picker-button-font-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-font-color-hover-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-font-color-down-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-icon-color-hover-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-icon-color-down-disabled: var(--spectrum-disabled-content-color); + --system-picker-button-size-s-height: var(--spectrum-component-height-75); + --system-picker-button-size-s-width: var(--spectrum-component-height-75); + --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); + --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-button-size-s-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75); + --system-picker-button-size-l-height: var(--spectrum-component-height-200); + --system-picker-button-size-l-width: var(--spectrum-component-height-200); + --system-picker-button-size-l-label-padding: var(--spectrum-text-to-visual-200); + --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-button-size-l-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200); + --system-picker-button-size-xl-height: var(--spectrum-component-height-300); + --system-picker-button-size-xl-width: var(--spectrum-component-height-300); + --system-picker-button-size-xl-label-padding: var(--spectrum-text-to-visual-300); + --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-button-size-xl-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300); +} diff --git a/tokens/dist/css/components/spectrum/popover.css b/tokens/dist/css/components/spectrum/popover.css new file mode 100644 index 00000000000..238706431e8 --- /dev/null +++ b/tokens/dist/css/components/spectrum/popover.css @@ -0,0 +1,29 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-popover-border-width: var(--spectrum-border-width-100); + --system-popover-animation-distance: var(--spectrum-spacing-100); + --system-popover-background-color: var(--spectrum-background-layer-2-color); + --system-popover-border-color: var(--spectrum-gray-400); + --system-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area); + --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-popover-shadow-color: var(--spectrum-drop-shadow-color); + --system-popover-corner-radius: var(--spectrum-corner-radius-100); + --system-popover-pointer-width: var(--spectrum-popover-tip-width); + --system-popover-pointer-height: var(--spectrum-popover-tip-height); + --system-popover-pointer-edge-offset: calc(var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / 2); + --system-popover-pointer-edge-spacing: calc(var(--system-popover-pointer-edge-offset) - var(--spectrum-popover-tip-width) / 2); +} diff --git a/tokens/dist/css/components/spectrum/progressbar.css b/tokens/dist/css/components/spectrum/progressbar.css new file mode 100644 index 00000000000..882b6781f8e --- /dev/null +++ b/tokens/dist/css/components/spectrum/progressbar.css @@ -0,0 +1,68 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-progress-bar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out); + --system-progress-bar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000); + --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-progress-bar-fill-size-indeterminate: 70%; + --system-progress-bar-size-2400: 192px; + --system-progress-bar-size-2500: 200px; + --system-progress-bar-size-2800: 224px; + --system-progress-bar-font-size: var(--spectrum-font-size-75); + --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width); + --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width); + --system-progress-bar-thickness: var(--spectrum-progress-bar-thickness-medium); + --system-progress-bar-line-height: var(--spectrum-line-height-100); + --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); + --system-progress-bar-spacing-top-to-text: var(--spectrum-component-top-to-text-100); + --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); + --system-progress-bar-text-color: var(--spectrum-neutral-content-color-default); + --system-progress-bar-track-color: var(--spectrum-gray-300); + --system-progress-bar-fill-color: var(--spectrum-accent-color-900); + --system-progress-bar-fill-color-positive: var(--spectrum-positive-visual-color); + --system-progress-bar-fill-color-notice: var(--spectrum-notice-visual-color); + --system-progress-bar-fill-color-negative: var(--spectrum-negative-visual-color); + --system-progress-bar-label-and-value-white: var(--spectrum-white); + --system-progress-bar-track-color-white: var(--spectrum-transparent-white-300); + --system-progress-bar-fill-color-white: var(--spectrum-white); + --system-progress-bar-size-s-size-default: var(--system-progress-bar-size-2400); + --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); + --system-progress-bar-size-s-thickness: var(--spectrum-progress-bar-thickness-small); + --system-progress-bar-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-progress-bar-size-m-size-default: var(--system-progress-bar-size-2400); + --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); + --system-progress-bar-size-m-thickness: var(--spectrum-progress-bar-thickness-large); + --system-progress-bar-size-m-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-progress-bar-size-l-size-default: var(--system-progress-bar-size-2500); + --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); + --system-progress-bar-size-l-thickness: var(--spectrum-progress-bar-thickness-large); + --system-progress-bar-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200); + --system-progress-bar-size-xl-size-default: var(--system-progress-bar-size-2800); + --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); + --system-progress-bar-size-xl-thickness: var(--spectrum-progress-bar-thickness-extra-large); + --system-progress-bar-size-xl-spacing-top-to-text: var(--spectrum-component-top-to-text-300); + --system-meter-min-width: var(--spectrum-meter-minimum-width); + --system-meter-max-width: var(--spectrum-meter-maximum-width); + --system-meter-inline-size: var(--spectrum-meter-width); + --system-meter-top-to-text: var(--spectrum-component-top-to-text); + --system-meter-size-s-progressbar-thickness: var(--spectrum-meter-thickness-small); + --system-meter-size-s-progressbar-size-default: var(--system-progress-bar-size-2400); + --system-meter-size-s-progressbar-font-size: var(--spectrum-font-size-75); + --system-meter-size-s-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-meter-size-l-progressbar-thickness: var(--spectrum-meter-thickness-large); + --system-meter-size-l-progressbar-size-default: var(--system-progress-bar-size-2500); + --system-meter-size-l-progressbar-font-size: var(--spectrum-font-size-100); + --system-meter-size-l-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); +} diff --git a/tokens/dist/css/components/spectrum/progresscircle.css b/tokens/dist/css/components/spectrum/progresscircle.css new file mode 100644 index 00000000000..27ed2722219 --- /dev/null +++ b/tokens/dist/css/components/spectrum/progresscircle.css @@ -0,0 +1,28 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-progress-circle-track-border-color: var(--spectrum-gray-300); + --system-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default); + --system-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300); + --system-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900); + --system-progress-circle-size: var(--spectrum-progress-circle-size-medium); + --system-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); + --system-progress-circle-track-border-style: solid; + --system-progress-circle-small-size: var(--spectrum-progress-circle-size-small); + --system-progress-circle-small-thickness: var(--spectrum-progress-circle-thickness-small); + --system-progress-circle-medium-size: var(--spectrum-progress-circle-size-medium); + --system-progress-circle-medium-thickness: var(--spectrum-progress-circle-thickness-medium); + --system-progress-circle-large-size: var(--spectrum-progress-circle-size-large); + --system-progress-circle-large-thickness: var(--spectrum-progress-circle-thickness-large); +} diff --git a/tokens/dist/css/components/spectrum/radio.css b/tokens/dist/css/components/spectrum/radio.css new file mode 100644 index 00000000000..5a014b9a75f --- /dev/null +++ b/tokens/dist/css/components/spectrum/radio.css @@ -0,0 +1,82 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-radio-button-border-color-default: var(--spectrum-gray-600); + --system-radio-button-border-color-hover: var(--spectrum-gray-700); + --system-radio-button-border-color-down: var(--spectrum-gray-800); + --system-radio-button-border-color-focus: var(--spectrum-gray-700); + --system-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); + --system-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down); + --system-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-radio-disabled-content-color: var(--spectrum-disabled-content-color); + --system-radio-disabled-border-color: var(--spectrum-disabled-content-color); + --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); + --system-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000); + --system-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); + --system-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); + --system-radio-border-width: var(--spectrum-border-width-200); + --system-radio-button-background-color: var(--spectrum-gray-50); + --system-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); + --system-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down); + --system-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus); + --system-radio-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-radio-font-size: var(--spectrum-font-size-100); + --system-radio-line-height: var(--spectrum-line-height-100); + --system-radio-animation-duration: var(--spectrum-animation-duration-100); + --system-radio-height: var(--spectrum-component-height-100); + --system-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); + --system-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); + --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-size-s-height: var(--spectrum-component-height-75); + --system-radio-size-s-button-control-size: var(--spectrum-radio-button-control-size-small); + --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); + --system-radio-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-radio-size-s-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --system-radio-size-s-button-top-to-control: var(--spectrum-radio-button-top-to-control-small); + --system-radio-size-s-font-size: var(--spectrum-font-size-75); + --system-radio-size-m-height: var(--spectrum-component-height-100); + --system-radio-size-m-button-control-size: var(--spectrum-radio-button-control-size-medium); + --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-size-m-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-radio-size-m-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-radio-size-m-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); + --system-radio-size-m-font-size: var(--spectrum-font-size-100); + --system-radio-size-l-height: var(--spectrum-component-height-200); + --system-radio-size-l-button-control-size: var(--spectrum-radio-button-control-size-large); + --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); + --system-radio-size-l-label-top-to-text: var(--spectrum-component-top-to-text-200); + --system-radio-size-l-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --system-radio-size-l-button-top-to-control: var(--spectrum-radio-button-top-to-control-large); + --system-radio-size-l-font-size: var(--spectrum-font-size-200); + --system-radio-size-xl-height: var(--spectrum-component-height-300); + --system-radio-size-xl-button-control-size: var(--spectrum-radio-button-control-size-extra-large); + --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); + --system-radio-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-300); + --system-radio-size-xl-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --system-radio-size-xl-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large); + --system-radio-size-xl-font-size: var(--spectrum-font-size-300); + --system-radio-emphasized-button-checked-border-color-default: var(--spectrum-accent-color-900); + --system-radio-emphasized-button-checked-border-color-hover: var(--spectrum-accent-color-1000); + --system-radio-emphasized-button-checked-border-color-down: var(--spectrum-accent-color-1100); + --system-radio-emphasized-button-checked-border-color-focus: var(--spectrum-accent-color-1000); +} diff --git a/tokens/dist/css/components/spectrum/rating.css b/tokens/dist/css/components/spectrum/rating.css new file mode 100644 index 00000000000..b12c3c5966d --- /dev/null +++ b/tokens/dist/css/components/spectrum/rating.css @@ -0,0 +1,34 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); + --system-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-rating-icon-height: var(--spectrum-workflow-icon-size-100); + --system-rating-icon-width: var(--spectrum-workflow-icon-size-100); + --system-rating-border-radius: var(--spectrum-corner-radius-100); + --system-rating-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-rating-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-rating-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-rating-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100); + --system-rating-indicator-border-radius: var(--spectrum-corner-radius-75); + --system-rating-indicator-height: var(--spectrum-border-width-200); + --system-rating-emphasized-icon-color-default: var(--spectrum-accent-content-color-default); + --system-rating-emphasized-icon-color-hover: var(--spectrum-accent-content-color-hover); + --system-rating-emphasized-icon-color-down: var(--spectrum-accent-content-color-down); + --system-rating-emphasized-icon-color-key-focus: var(--spectrum-accent-content-color-key-focus); + --system-rating-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-rating-icon-count: var(--system-rating-icon-count); +} diff --git a/tokens/dist/css/components/spectrum/search.css b/tokens/dist/css/components/spectrum/search.css new file mode 100644 index 00000000000..522fe0c12fe --- /dev/null +++ b/tokens/dist/css/components/spectrum/search.css @@ -0,0 +1,72 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-search-border-color-default: var(--spectrum-gray-500); + --system-search-border-color-hover: var(--spectrum-gray-600); + --system-search-border-color-focus: var(--spectrum-gray-800); + --system-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-search-border-color-key-focus: var(--spectrum-gray-900); + --system-search-inline-size: var(--spectrum-field-width); + --system-search-min-inline-multiplier: var(--spectrum-search-field-minimum-width-multiplier); + --system-search-to-help-text: var(--spectrum-help-text-to-component); + --system-search-top-to-text: var(--spectrum-component-top-to-text-100); + --system-search-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-search-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-search-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-search-font-family: var(--spectrum-sans-font-family-stack); + --system-search-font-weight: var(--spectrum-regular-font-weight); + --system-search-font-style: var(--spectrum-default-font-style); + --system-search-line-height: var(--spectrum-line-height-100); + --system-search-color-default: var(--spectrum-neutral-content-color-default); + --system-search-color-hover: var(--spectrum-neutral-content-color-hover); + --system-search-color-focus: var(--spectrum-neutral-content-color-focus); + --system-search-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); + --system-search-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-search-border-width: var(--spectrum-border-width-100); + --system-search-background-color: var(--spectrum-gray-50); + --system-search-color-disabled: var(--spectrum-disabled-content-color); + --system-search-background-color-disabled: var(--spectrum-disabled-background-color); + --system-search-border-color-disabled: var(--spectrum-disabled-background-color); + --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-s-edge-to-visual: var(--spectrum-component-edge-to-visual-75); + --system-search-size-s-block-size: var(--spectrum-component-height-75); + --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); + --system-search-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); + --system-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); + --system-search-size-m-edge-to-visual: var(--spectrum-component-edge-to-visual-100); + --system-search-block-size: var(--spectrum-component-height-100); + --system-search-size-m-block-size: var(--spectrum-component-height-100); + --system-search-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-l-edge-to-visual: var(--spectrum-component-edge-to-visual-200); + --system-search-size-l-block-size: var(--spectrum-component-height-200); + --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); + --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-xl-edge-to-visual: var(--spectrum-component-edge-to-visual-300); + --system-search-size-xl-block-size: var(--spectrum-component-height-300); + --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); + --system-search-quiet-background-color: transparent; + --system-search-quiet-background-color-disabled: transparent; + --system-search-quiet-border-color-disabled: var(--spectrum-disabled-border-color); + --system-search-quiet-border-radius: 0; + --system-search-quiet-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet); +} diff --git a/tokens/dist/css/components/spectrum/sidenav.css b/tokens/dist/css/components/spectrum/sidenav.css new file mode 100644 index 00000000000..45d644e6fc5 --- /dev/null +++ b/tokens/dist/css/components/spectrum/sidenav.css @@ -0,0 +1,79 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-side-nav-focus-ring-size: var(--spectrum-focus-indicator-thickness); + --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-side-nav-min-height: var(--spectrum-component-height-100); + --system-side-nav-width: 100%; + --system-side-nav-min-width: var(--spectrum-side-navigation-minimum-width); + --system-side-nav-max-width: var(--spectrum-side-navigation-maximum-width); + --system-side-nav-border-radius: var(--spectrum-corner-radius-100); + --system-side-nav-icon-size: var(--spectrum-workflow-icon-size-100); + --system-side-nav-icon-spacing: var(--spectrum-text-to-visual-100); + --system-side-nav-inline-padding: var(--spectrum-component-edge-to-text-100); + --system-side-nav-gap: var(--spectrum-side-navigation-item-to-item); + --system-side-nav-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); + --system-side-nav-top-to-label: var(--spectrum-component-top-to-text-100); + --system-side-nav-bottom-to-label: var(--spectrum-side-navigation-bottom-to-text); + --system-side-nav-start-to-content-second-level: var(--spectrum-side-navigation-second-level-edge-to-text); + --system-side-nav-start-to-content-third-level: var(--spectrum-side-navigation-third-level-edge-to-text); + --system-side-nav-start-to-content-with-icon-second-level: var(--spectrum-side-navigation-with-icon-second-level-edge-to-text); + --system-side-nav-start-to-content-with-icon-third-level: var(--spectrum-side-navigation-with-icon-third-level-edge-to-text); + --system-side-nav-heading-top-margin: var(--spectrum-side-navigation-item-to-header); + --system-side-nav-heading-bottom-margin: var(--spectrum-side-navigation-header-to-item); + --system-side-nav-background-disabled: transparent; + --system-side-nav-background-default: transparent; + --system-side-nav-background-hover: var(--spectrum-gray-200); + --system-side-nav-item-background-down: var(--spectrum-gray-300); + --system-side-nav-background-key-focus: var(--spectrum-gray-200); + --system-side-nav-item-background-default-selected: var(--spectrum-gray-200); + --system-side-nav-background-hover-selected: var(--spectrum-gray-300); + --system-side-nav-item-background-down-selected: var(--spectrum-gray-300); + --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200); + --system-side-nav-header-color: var(--spectrum-gray-600); + --system-side-nav-content-disabled-color: var(--spectrum-disabled-content-color); + --system-side-nav-content-color-default: var(--spectrum-neutral-content-color-default); + --system-side-nav-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-side-nav-content-color-down: var(--spectrum-neutral-content-color-down); + --system-side-nav-content-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --system-side-nav-content-color-default-selected: var(--spectrum-neutral-content-color-default); + --system-side-nav-content-color-hover-selected: var(--spectrum-neutral-content-color-hover); + --system-side-nav-content-color-down-selected: var(--spectrum-neutral-content-color-down); + --system-side-nav-content-color-key-focus-selected: var(--spectrum-neutral-content-color-key-focus); + --system-side-nav-text-font-family: var(--spectrum-sans-font-family-stack); + --system-side-nav-text-font-weight: var(--spectrum-regular-font-weight); + --system-side-nav-text-font-style: var(--spectrum-default-font-style); + --system-side-nav-text-font-size: var(--spectrum-font-size-100); + --system-side-nav-text-line-height: var(--spectrum-line-height-100); + --system-side-nav-top-level-font-family: var(--spectrum-sans-font-family-stack); + --system-side-nav-top-level-font-weight: var(--spectrum-bold-font-weight); + --system-side-nav-top-level-font-style: var(--spectrum-default-font-style); + --system-side-nav-top-level-font-size: var(--spectrum-font-size-100); + --system-side-nav-top-level-line-height: var(--spectrum-line-height-100); + --system-side-nav-header-font-family: var(--spectrum-sans-font-family-stack); + --system-side-nav-header-font-weight: var(--spectrum-medium-font-weight); + --system-side-nav-header-font-style: var(--spectrum-default-font-style); + --system-side-nav-header-font-size: var(--spectrum-font-size-75); + --system-side-nav-header-line-height: var(--spectrum-line-height-100); + --system-side-nav-lang-ja-text-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-zh-text-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-ko-text-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-ja-top-level-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-zh-top-level-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-ko-top-level-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-ja-header-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-zh-header-line-height: var(--spectrum-cjk-line-height-100); + --system-side-nav-lang-ko-header-line-height: var(--spectrum-cjk-line-height-100); +} diff --git a/tokens/dist/css/components/spectrum/slider.css b/tokens/dist/css/components/spectrum/slider.css new file mode 100644 index 00000000000..3201320e6bf --- /dev/null +++ b/tokens/dist/css/components/spectrum/slider.css @@ -0,0 +1,98 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-slider-track-color: var(--spectrum-gray-300); + --system-slider-track-fill-color: var(--spectrum-gray-700); + --system-slider-ramp-track-color: var(--spectrum-gray-400); + --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); + --system-slider-handle-background-color: transparent; + --system-slider-handle-background-color-disabled: transparent; + --system-slider-ramp-handle-background-color: var(--spectrum-gray-100); + --system-slider-ticks-handle-background-color: var(--spectrum-gray-100); + --system-slider-handle-border-color: var(--spectrum-gray-700); + --system-slider-handle-disabled-background-color: var(--spectrum-gray-100); + --system-slider-tick-mark-color: var(--spectrum-gray-300); + --system-slider-handle-border-color-hover: var(--spectrum-gray-800); + --system-slider-handle-border-color-down: var(--spectrum-gray-800); + --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800); + --system-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); + --system-slider-value-inline-size: 18px; + --system-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-slider-min-size: var(--spectrum-spacing-900); + --system-slider-track-corner-radius: var(--spectrum-corner-radius-75); + --system-slider-label-margin-start: var(--spectrum-spacing-300); + --system-slider-handle-border-width: var(--spectrum-border-width-200); + --system-slider-handle-margin-left: calc(var(--system-slider-handle-size) / -2); + --system-slider-controls-margin: calc(var(--system-slider-handle-size) / 2); + --system-slider-track-margin-offset: calc(var(--system-slider-controls-margin) * -1); + --system-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + var(--system-slider-handle-size) / 2); + --system-slider-input-top-size: calc(var(--system-slider-handle-size) / -2 / 4); + --system-slider-track-fill-thickness: var(--spectrum-slider-track-thickness); + --system-slider-tick-mark-width: var(--spectrum-border-width-200); + --system-slider-tick-mark-border-radius: 2px; + --system-slider-tick-handle-background-color: var(--spectrum-gray-75); + --system-slider-track-color-disabled: var(--spectrum-disabled-background-color); + --system-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color); + --system-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color); + --system-slider-label-text-color: var(--spectrum-neutral-content-color-default); + --system-slider-tick-label-color: var(--spectrum-neutral-content-color-default); + --system-slider-label-text-color-disabled: var(--spectrum-disabled-content-color); + --system-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color); + --system-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); + --system-slider-input-left: calc(var(--system-slider-handle-margin-left) / 4); + --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); + --system-slider-range-track-reset: 0; + --system-slider-size-s-font-size: var(--spectrum-font-size-75); + --system-slider-size-s-handle-size: var(--spectrum-slider-handle-size-small); + --system-slider-size-s-control-height: var(--spectrum-component-height-75); + --system-slider-size-s-handle-border-radius: var(--spectrum-corner-radius-200); + --system-slider-size-s-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small); + --system-slider-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-slider-size-s-control-to-field-label: var(--spectrum-slider-control-to-field-label-small); + --system-slider-size-s-value-side-padding-inline: var(--spectrum-spacing-100); + --system-slider-font-size: var(--spectrum-font-size-75); + --system-slider-size-m-font-size: var(--spectrum-font-size-75); + --system-slider-handle-size: var(--spectrum-slider-handle-size-medium); + --system-slider-size-m-handle-size: var(--spectrum-slider-handle-size-medium); + --system-slider-control-height: var(--spectrum-component-height-100); + --system-slider-size-m-control-height: var(--spectrum-component-height-100); + --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); + --system-slider-size-m-handle-border-radius: var(--spectrum-corner-radius-200); + --system-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium); + --system-slider-size-m-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium); + --system-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-slider-size-m-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); + --system-slider-size-m-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); + --system-slider-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-m-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-l-font-size: var(--spectrum-font-size-100); + --system-slider-size-l-handle-size: var(--spectrum-slider-handle-size-large); + --system-slider-size-l-control-height: var(--spectrum-component-height-200); + --system-slider-size-l-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); + --system-slider-size-l-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large); + --system-slider-size-l-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-slider-size-l-control-to-field-label: var(--spectrum-slider-control-to-field-label-large); + --system-slider-size-l-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-l-value-inline-size: 18px; + --system-slider-size-xl-font-size: var(--spectrum-font-size-200); + --system-slider-size-xl-handle-size: var(--spectrum-slider-handle-size-extra-large); + --system-slider-size-xl-control-height: var(--spectrum-component-height-300); + --system-slider-size-xl-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); + --system-slider-size-xl-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large); + --system-slider-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-200); + --system-slider-size-xl-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large); + --system-slider-size-xl-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-xl-value-inline-size: 22px; +} diff --git a/tokens/dist/css/components/spectrum/splitview.css b/tokens/dist/css/components/spectrum/splitview.css new file mode 100644 index 00000000000..33a20679e37 --- /dev/null +++ b/tokens/dist/css/components/spectrum/splitview.css @@ -0,0 +1,31 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-split-view-vertical-width: 100%; + --system-split-view-vertical-gripper-width: 50%; + --system-split-view-vertical-gripper-outer-width: 100%; + --system-split-view-vertical-gripper-reset: 0; + --system-split-view-background-color: var(--spectrum-gray-100); + --system-split-view-content-color: var(--spectrum-body-color); + --system-split-view-handle-background-color: var(--spectrum-gray-300); + --system-split-view-handle-background-color-hover: var(--spectrum-gray-400); + --system-split-view-handle-background-color-down: var(--spectrum-gray-800); + --system-split-view-handle-background-color-focus: var(--spectrum-focus-indicator-color); + --system-split-view-handle-width: var(--spectrum-border-width-200); + --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); + --system-split-view-gripper-width: var(--spectrum-border-width-400); + --system-split-view-gripper-height: 16px; + --system-split-view-gripper-border-width-horizontal: 3px; + --system-split-view-gripper-border-width-vertical: var(--spectrum-border-width-400); +} diff --git a/tokens/dist/css/components/spectrum/statuslight.css b/tokens/dist/css/components/spectrum/statuslight.css new file mode 100644 index 00000000000..d5762bc7316 --- /dev/null +++ b/tokens/dist/css/components/spectrum/statuslight.css @@ -0,0 +1,77 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-status-light-corner-radius: 50%; + --system-status-light-font-weight: 400; + --system-status-light-border-width: var(--spectrum-border-width-100); + --system-status-light-height: var(--spectrum-component-height-100); + --system-status-light-dot-size: var(--spectrum-status-light-dot-size-medium); + --system-status-light-line-height: var(--spectrum-line-height-100); + --system-status-light-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-status-light-font-size: var(--spectrum-font-size-100); + --system-status-light-spacing-dot-to-label: var(--spectrum-text-to-visual-100); + --system-status-light-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium); + --system-status-light-spacing-top-to-label: var(--spectrum-component-top-to-text-100); + --system-status-light-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100); + --system-status-light-content-color-default: var(--spectrum-neutral-content-color-default); + --system-status-light-subdued-content-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-status-light-semantic-neutral-color: var(--spectrum-neutral-visual-color); + --system-status-light-semantic-accent-color: var(--spectrum-accent-visual-color); + --system-status-light-semantic-negative-color: var(--spectrum-negative-visual-color); + --system-status-light-semantic-info-color: var(--spectrum-informative-visual-color); + --system-status-light-semantic-notice-color: var(--spectrum-notice-visual-color); + --system-status-light-semantic-positive-color: var(--spectrum-positive-visual-color); + --system-status-light-nonsemantic-gray-color: var(--spectrum-gray-visual-color); + --system-status-light-nonsemantic-red-color: var(--spectrum-red-visual-color); + --system-status-light-nonsemantic-orange-color: var(--spectrum-orange-visual-color); + --system-status-light-nonsemantic-yellow-color: var(--spectrum-yellow-visual-color); + --system-status-light-nonsemantic-chartreuse-color: var(--spectrum-chartreuse-visual-color); + --system-status-light-nonsemantic-celery-color: var(--spectrum-celery-visual-color); + --system-status-light-nonsemantic-green-color: var(--spectrum-green-visual-color); + --system-status-light-nonsemantic-seafoam-color: var(--spectrum-seafoam-visual-color); + --system-status-light-nonsemantic-cyan-color: var(--spectrum-cyan-visual-color); + --system-status-light-nonsemantic-blue-color: var(--spectrum-blue-visual-color); + --system-status-light-nonsemantic-indigo-color: var(--spectrum-indigo-visual-color); + --system-status-light-nonsemantic-purple-color: var(--spectrum-purple-visual-color); + --system-status-light-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-visual-color); + --system-status-light-nonsemantic-magenta-color: var(--spectrum-magenta-visual-color); + --system-status-light-size-s-height: var(--spectrum-component-height-75); + --system-status-light-size-s-dot-size: var(--spectrum-status-light-dot-size-small); + --system-status-light-size-s-font-size: var(--spectrum-font-size-75); + --system-status-light-size-s-spacing-dot-to-label: var(--spectrum-text-to-visual-75); + --system-status-light-size-s-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-small); + --system-status-light-size-s-spacing-top-to-label: var(--spectrum-component-top-to-text-75); + --system-status-light-size-s-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75); + --system-status-light-size-m-height: var(--spectrum-component-height-100); + --system-status-light-size-m-dot-size: var(--spectrum-status-light-dot-size-medium); + --system-status-light-size-m-font-size: var(--spectrum-font-size-100); + --system-status-light-size-m-spacing-dot-to-label: var(--spectrum-text-to-visual-100); + --system-status-light-size-m-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium); + --system-status-light-size-m-spacing-top-to-label: var(--spectrum-component-top-to-text-100); + --system-status-light-size-m-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100); + --system-status-light-size-l-height: var(--spectrum-component-height-200); + --system-status-light-size-l-dot-size: var(--spectrum-status-light-dot-size-large); + --system-status-light-size-l-font-size: var(--spectrum-font-size-200); + --system-status-light-size-l-spacing-dot-to-label: var(--spectrum-text-to-visual-200); + --system-status-light-size-l-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-large); + --system-status-light-size-l-spacing-top-to-label: var(--spectrum-component-top-to-text-200); + --system-status-light-size-l-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-200); + --system-status-light-size-xl-height: var(--spectrum-component-height-300); + --system-status-light-size-xl-dot-size: var(--spectrum-status-light-dot-size-extra-large); + --system-status-light-size-xl-font-size: var(--spectrum-font-size-300); + --system-status-light-size-xl-spacing-dot-to-label: var(--spectrum-text-to-visual-300); + --system-status-light-size-xl-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-extra-large); + --system-status-light-size-xl-spacing-top-to-label: var(--spectrum-component-top-to-text-300); + --system-status-light-size-xl-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300); +} diff --git a/tokens/dist/css/components/spectrum/steplist.css b/tokens/dist/css/components/spectrum/steplist.css new file mode 100644 index 00000000000..8d8239cf295 --- /dev/null +++ b/tokens/dist/css/components/spectrum/steplist.css @@ -0,0 +1,32 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-steplist-step-width: 80px; + --system-steplist-marker-diameter: 8px; + --system-steplist-marker-hit-area: 20px; + --system-steplist-segment-height: 2px; + --system-steplist-top-padding: 22px; + --system-steplist-small-top-padding: 11px; + --system-steplist-side-padding: 60px; + --system-steplist-label-label-offset: 10px; + --system-steplist-label-text-size: 12px; + --system-steplist-current-label-text-color: var(--spectrum-gray-800); + --system-steplist-current-marker-color: var(--spectrum-gray-800); + --system-steplist-complete-label-text-color: var(--spectrum-gray-700); + --system-steplist-incomplete-label-color: var(--spectrum-gray-600); + --system-steplist-complete-marker-background-color: var(--spectrum-gray-600); + --system-steplist-incomplete-marker-border-color: var(--spectrum-gray-300); + --system-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-300); + --system-steplist-complete-segment-border-block-end-color: var(--spectrum-gray-600); +} diff --git a/tokens/dist/css/components/spectrum/stepper.css b/tokens/dist/css/components/spectrum/stepper.css new file mode 100644 index 00000000000..13a20f041e8 --- /dev/null +++ b/tokens/dist/css/components/spectrum/stepper.css @@ -0,0 +1,58 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-stepper-border-width: var(--spectrum-border-width-100); + --system-stepper-border-color: var(--spectrum-gray-500); + --system-stepper-border-color-hover: var(--spectrum-gray-600); + --system-stepper-border-color-focus: var(--spectrum-gray-800); + --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); + --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-stepper-border-radius: var(--spectrum-corner-radius-100); + --system-stepper-min-width-multiplier: var(--spectrum-text-field-minimum-width-multiplier); + --system-stepper-animation-duration: var(--spectrum-animation-duration-100); + --system-stepper-buttons-border-style: none; + --system-stepper-buttons-border-width: 0; + --system-stepper-buttons-border-color: var(--spectrum-gray-500); + --system-stepper-buttons-background-color: var(--spectrum-gray-50); + --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); + --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); + --system-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-stepper-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-stepper-button-border-radius-reset: 0px; + --system-stepper-button-border-width: var(--spectrum-border-width-100); + --system-stepper-button-background-color-focus: var(--spectrum-gray-300); + --system-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200); + --system-stepper-border-color-invalid: var(--spectrum-negative-border-color-default); + --system-stepper-border-color-hover-invalid: var(--spectrum-negative-border-color-hover); + --system-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus); + --system-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); + --system-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); + --system-stepper-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-stepper-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-stepper-button-border-color-quiet: transparent; + --system-stepper-button-border-color-disabled: var(--spectrum-gray-200); + --system-stepper-button-border-width-disabled: var(--spectrum-border-width-100); + --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-100); + --system-stepper-size-s-button-width: var(--spectrum-in-field-button-width-stacked-small); + --system-stepper-size-s-height: var(--spectrum-component-height-75); + --system-stepper-button-width: var(--spectrum-in-field-button-width-stacked-medium); + --system-stepper-size-m-button-width: var(--spectrum-in-field-button-width-stacked-medium); + --system-stepper-height: var(--spectrum-component-height-100); + --system-stepper-size-m-height: var(--spectrum-component-height-100); + --system-stepper-size-l-button-width: var(--spectrum-in-field-button-width-stacked-large); + --system-stepper-size-l-height: var(--spectrum-component-height-200); + --system-stepper-size-xl-button-width: var(--spectrum-in-field-button-width-stacked-extra-large); + --system-stepper-size-xl-height: var(--spectrum-component-height-300); +} diff --git a/tokens/dist/css/components/spectrum/swatch.css b/tokens/dist/css/components/spectrum/swatch.css new file mode 100644 index 00000000000..5f18aae6884 --- /dev/null +++ b/tokens/dist/css/components/spectrum/swatch.css @@ -0,0 +1,47 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-swatch-border-radius: var(--spectrum-corner-radius-100); + --system-swatch-focus-indicator-border-radius: var(--spectrum-corner-radius-200); + --system-swatch-border-thickness: var(--spectrum-border-width-100); + --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); + --system-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-swatch-border-color-opacity: 0.51; + --system-swatch-border-color-light-opacity: 0.2; + --system-swatch-border-color: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-opacity)); + --system-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-opacity)); + --system-swatch-border-color-light: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-light-opacity)); + --system-swatch-border-color-selected: var(--spectrum-gray-900); + --system-swatch-inner-border-color-selected: var(--spectrum-gray-50); + --system-swatch-disabled-icon-color: var(--spectrum-gray-50); + --system-swatch-dash-icon-color: var(--spectrum-gray-800); + --system-swatch-slash-icon-color: var(--spectrum-red-900); + --system-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); + --system-swatch-size-xs-disabled-icon-size: var(--spectrum-workflow-icon-size-50); + --system-swatch-size-xs-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small); + --system-swatch-size-s-size: var(--spectrum-swatch-size-small); + --system-swatch-size-s-disabled-icon-size: var(--spectrum-workflow-icon-size-75); + --system-swatch-size-s-slash-thickness: var(--spectrum-swatch-slash-thickness-small); + --system-swatch-size: var(--spectrum-swatch-size-medium); + --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); + --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); + --system-swatch-size-m-disabled-icon-size: var(--spectrum-workflow-icon-size-100); + --system-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); + --system-swatch-size-m-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); + --system-swatch-size-l-size: var(--spectrum-swatch-size-large); + --system-swatch-size-l-disabled-icon-size: var(--spectrum-workflow-icon-size-200); + --system-swatch-size-l-slash-thickness: var(--spectrum-swatch-slash-thickness-large); +} diff --git a/tokens/dist/css/components/spectrum/swatchgroup.css b/tokens/dist/css/components/spectrum/swatchgroup.css new file mode 100644 index 00000000000..9c4533db2cf --- /dev/null +++ b/tokens/dist/css/components/spectrum/swatchgroup.css @@ -0,0 +1,18 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); + --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); + --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); +} diff --git a/tokens/dist/css/components/spectrum/switch.css b/tokens/dist/css/components/spectrum/switch.css new file mode 100644 index 00000000000..6c5a9099f65 --- /dev/null +++ b/tokens/dist/css/components/spectrum/switch.css @@ -0,0 +1,76 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-switch-handle-border-color-default: var(--spectrum-gray-600); + --system-switch-handle-border-color-hover: var(--spectrum-gray-700); + --system-switch-handle-border-color-down: var(--spectrum-gray-800); + --system-switch-handle-border-color-focus: var(--spectrum-gray-700); + --system-switch-handle-border-color-selected-default: var(--spectrum-gray-700); + --system-switch-handle-border-color-selected-hover: var(--spectrum-gray-800); + --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-focus: var(--spectrum-gray-800); + --system-switch-label-color-default: var(--spectrum-neutral-content-color-default); + --system-switch-label-color-hover: var(--spectrum-neutral-content-color-hover); + --system-switch-label-color-down: var(--spectrum-neutral-content-color-down); + --system-switch-label-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-switch-label-color-disabled: var(--spectrum-disabled-content-color); + --system-switch-background-color: var(--spectrum-gray-300); + --system-switch-background-color-disabled: var(--spectrum-gray-300); + --system-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color); + --system-switch-background-color-selected-default: var(--spectrum-neutral-background-color-selected-default); + --system-switch-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-switch-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); + --system-switch-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); + --system-switch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-switch-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-switch-handle-background-color: var(--spectrum-gray-75); + --system-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color); + --system-switch-disabled-label-color-default: var(--spectrum-disabled-content-color); + --system-switch-emphasized-background-color-selected-default: var(--spectrum-accent-color-900); + --system-switch-emphasized-background-color-selected-hover: var(--spectrum-accent-color-1000); + --system-switch-emphasized-background-color-selected-down: var(--spectrum-accent-color-1100); + --system-switch-emphasized-background-color-selected-focus: var(--spectrum-accent-color-1000); + --system-switch-emphasized-handle-border-color-selected-default: var(--spectrum-accent-color-900); + --system-switch-emphasized-handle-border-color-selected-hover: var(--spectrum-accent-color-1000); + --system-switch-emphasized-handle-border-color-selected-down: var(--spectrum-accent-color-1100); + --system-switch-emphasized-handle-border-color-selected-focus: var(--spectrum-accent-color-1000); + --system-switch-size-s-min-height: var(--spectrum-component-height-75); + --system-switch-size-s-control-width: var(--spectrum-switch-control-width-small); + --system-switch-size-s-control-height: var(--spectrum-switch-control-height-small); + --system-switch-size-s-control-label-spacing: var(--spectrum-text-to-control-75); + --system-switch-size-s-spacing-top-to-control: var(--spectrum-switch-top-to-control-small); + --system-switch-size-s-spacing-top-to-label: var(--spectrum-component-top-to-text-75); + --system-switch-size-s-font-size: var(--spectrum-font-size-75); + --system-switch-size-m-min-height: var(--spectrum-component-height-100); + --system-switch-size-m-control-width: var(--spectrum-switch-control-width-medium); + --system-switch-size-m-control-height: var(--spectrum-switch-control-height-medium); + --system-switch-size-m-control-label-spacing: var(--spectrum-text-to-control-100); + --system-switch-size-m-spacing-top-to-control: var(--spectrum-switch-top-to-control-medium); + --system-switch-size-m-spacing-top-to-label: var(--spectrum-component-top-to-text-100); + --system-switch-size-m-font-size: var(--spectrum-font-size-100); + --system-switch-size-l-min-height: var(--spectrum-component-height-200); + --system-switch-size-l-control-width: var(--spectrum-switch-control-width-large); + --system-switch-size-l-control-height: var(--spectrum-switch-control-height-large); + --system-switch-size-l-control-label-spacing: var(--spectrum-text-to-control-200); + --system-switch-size-l-spacing-top-to-control: var(--spectrum-switch-top-to-control-large); + --system-switch-size-l-spacing-top-to-label: var(--spectrum-component-top-to-text-200); + --system-switch-size-l-font-size: var(--spectrum-font-size-200); + --system-switch-size-xl-min-height: var(--spectrum-component-height-300); + --system-switch-size-xl-control-width: var(--spectrum-switch-control-width-extra-large); + --system-switch-size-xl-control-height: var(--spectrum-switch-control-height-extra-large); + --system-switch-size-xl-control-label-spacing: var(--spectrum-text-to-control-300); + --system-switch-size-xl-spacing-top-to-control: var(--spectrum-switch-top-to-control-extra-large); + --system-switch-size-xl-spacing-top-to-label: var(--spectrum-component-top-to-text-300); + --system-switch-size-xl-font-size: var(--spectrum-font-size-300); +} diff --git a/tokens/dist/css/components/spectrum/table.css b/tokens/dist/css/components/spectrum/table.css new file mode 100644 index 00000000000..fb74a397b76 --- /dev/null +++ b/tokens/dist/css/components/spectrum/table.css @@ -0,0 +1,181 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-medium); + --system-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-medium); + --system-table-min-header-height: var(--spectrum-component-height-100); + --system-table-min-row-height: var(--spectrum-table-row-height-medium-regular); + --system-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-regular); + --system-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-regular); + --system-table-cell-inline-space: var(--spectrum-table-edge-to-content); + --system-table-border-radius: var(--spectrum-corner-radius-100); + --system-table-border-width: var(--spectrum-table-border-divider-width); + --system-table-outer-border-inline-width: var(--spectrum-table-border-divider-width); + --system-table-icon-to-text: var(--spectrum-text-to-visual-100); + --system-table-default-vertical-align: top; + --system-table-header-vertical-align: middle; + --system-table-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-row-font-family: var(--spectrum-sans-font-family-stack); + --system-table-row-font-weight: var(--spectrum-regular-font-weight); + --system-table-row-font-style: var(--spectrum-default-font-style); + --system-table-row-font-size: var(--spectrum-font-size-100); + --system-table-row-line-height: var(--spectrum-line-height-100); + --system-table-border-color: var(--spectrum-gray-300); + --system-table-divider-color: var(--spectrum-gray-300); + --system-table-header-background-color: var(--spectrum-transparent-white-100); + --system-table-header-text-color: var(--spectrum-body-color); + --system-table-row-background-color: var(--spectrum-gray-50); + --system-table-row-text-color: var(--spectrum-neutral-content-color-default); + --system-table-selected-row-background-color: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity)); + --system-table-selected-row-background-color-non-emphasized: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized)); + --system-table-row-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-hover-opacity)); + --system-table-row-active-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-down-opacity)); + --system-table-selected-row-background-color-focus: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity-hover)); + --system-table-selected-row-background-color-non-emphasized-focus: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover)); + --system-table-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --system-table-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-table-icon-color-active: var(--spectrum-neutral-subdued-content-color-down); + --system-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-focus); + --system-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-focus-hover); + --system-table-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-medium); + --system-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-regular); + --system-table-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-table-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-table-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity)); + --system-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); + --system-table-transition-duration: var(--spectrum-animation-duration-100); + --system-table-summary-row-font-weight: var(--spectrum-bold-font-weight); + --system-table-summary-row-background-color: var(--spectrum-gray-200); + --system-table-section-header-min-height: var(--spectrum-table-section-header-row-height-medium); + --system-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-100); + --system-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-100); + --system-table-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-section-header-background-color: var(--spectrum-gray-200); + --system-table-collapsible-tier-indent: var(--spectrum-spacing-300); + --system-table-collapsible-disclosure-inline-spacing: 0px; + --system-table-disclosure-icon-size: var(--spectrum-component-height-100); + --system-table-collapsible-icon-animation-duration: var(--spectrum-animation-duration-100); + --system-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --system-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-regular); + --system-table-thumbnail-size: var(--spectrum-thumbnail-size-300); + --system-table-cell-background-color: var(--system-table-row-background-color); + --system-table-selected-cell-background-color: var(--system-table-selected-row-background-color-non-emphasized); + --system-table-selected-cell-background-color-focus: var(--system-table-selected-row-background-color-non-emphasized-focus); + --system-table-size-s-min-header-height: var(--spectrum-component-height-100); + --system-table-size-s-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-small); + --system-table-size-s-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-small); + --system-table-size-s-min-row-height: var(--spectrum-table-row-height-small-regular); + --system-table-size-s-row-top-to-text: var(--spectrum-table-row-top-to-text-small-regular); + --system-table-size-s-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-regular); + --system-table-size-s-icon-to-text: var(--spectrum-text-to-visual-100); + --system-table-size-s-row-font-size: var(--spectrum-font-size-75); + --system-table-size-s-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-small); + --system-table-size-s-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-regular); + --system-table-size-s-section-header-min-height: var(--spectrum-table-section-header-row-height-small); + --system-table-size-s-section-header-block-start-spacing: var(--spectrum-component-top-to-text-75); + --system-table-size-s-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-75); + --system-table-size-s-disclosure-icon-size: var(--spectrum-component-height-75); + --system-table-size-s-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-regular); + --system-table-size-s-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --system-table-size-s-thumbnail-size: var(--spectrum-thumbnail-size-200); + --system-table-size-l-min-header-height: var(--spectrum-component-height-200); + --system-table-size-l-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-large); + --system-table-size-l-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-large); + --system-table-size-l-min-row-height: var(--spectrum-table-row-height-large-regular); + --system-table-size-l-row-top-to-text: var(--spectrum-table-row-top-to-text-large-regular); + --system-table-size-l-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-regular); + --system-table-size-l-icon-to-text: var(--spectrum-text-to-visual-200); + --system-table-size-l-row-font-size: var(--spectrum-font-size-200); + --system-table-size-l-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-large); + --system-table-size-l-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-regular); + --system-table-size-l-section-header-min-height: var(--spectrum-table-section-header-row-height-large); + --system-table-size-l-section-header-block-start-spacing: var(--spectrum-component-top-to-text-200); + --system-table-size-l-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-200); + --system-table-size-l-disclosure-icon-size: var(--spectrum-component-height-200); + --system-table-size-l-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-regular); + --system-table-size-l-thumbnail-to-text: var(--spectrum-text-to-visual-200); + --system-table-size-l-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-size-xl-min-header-height: var(--spectrum-component-height-300); + --system-table-size-xl-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-extra-large); + --system-table-size-xl-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-extra-large); + --system-table-size-xl-min-row-height: var(--spectrum-table-row-height-extra-large-regular); + --system-table-size-xl-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-regular); + --system-table-size-xl-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-regular); + --system-table-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); + --system-table-size-xl-row-font-size: var(--spectrum-font-size-300); + --system-table-size-xl-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-extra-large); + --system-table-size-xl-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-regular); + --system-table-size-xl-section-header-min-height: var(--spectrum-table-section-header-row-height-extra-large); + --system-table-size-xl-section-header-block-start-spacing: var(--spectrum-component-top-to-text-300); + --system-table-size-xl-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-300); + --system-table-size-xl-disclosure-icon-size: var(--spectrum-component-height-300); + --system-table-size-xl-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-regular); + --system-table-size-xl-thumbnail-to-text: var(--spectrum-text-to-visual-300); + --system-table-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-700); + --system-table-compact-min-row-height: var(--spectrum-table-row-height-medium-compact); + --system-table-compact-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-compact); + --system-table-compact-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-compact); + --system-table-compact-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-compact); + --system-table-compact-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-compact); + --system-table-compact-thumbnail-size: var(--spectrum-thumbnail-size-200); + --system-table-compact-size-s-min-row-height: var(--spectrum-table-row-height-small-compact); + --system-table-compact-size-s-row-top-to-text: var(--spectrum-table-row-top-to-text-small-compact); + --system-table-compact-size-s-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-compact); + --system-table-compact-size-s-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-compact); + --system-table-compact-size-s-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-compact); + --system-table-compact-size-s-thumbnail-size: var(--spectrum-thumbnail-size-50); + --system-table-compact-size-l-min-row-height: var(--spectrum-table-row-height-large-compact); + --system-table-compact-size-l-row-top-to-text: var(--spectrum-table-row-top-to-text-large-compact); + --system-table-compact-size-l-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-compact); + --system-table-compact-size-l-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-compact); + --system-table-compact-size-l-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-compact); + --system-table-compact-size-l-thumbnail-size: var(--spectrum-thumbnail-size-300); + --system-table-compact-size-xl-min-row-height: var(--spectrum-table-row-height-extra-large-compact); + --system-table-compact-size-xl-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-compact); + --system-table-compact-size-xl-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-compact); + --system-table-compact-size-xl-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-compact); + --system-table-compact-size-xl-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact); + --system-table-compact-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-spacious-min-row-height: var(--spectrum-table-row-height-medium-spacious); + --system-table-spacious-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-spacious); + --system-table-spacious-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-spacious); + --system-table-spacious-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-spacious); + --system-table-spacious-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious); + --system-table-spacious-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-spacious-size-s-min-row-height: var(--spectrum-table-row-height-small-spacious); + --system-table-spacious-size-s-row-top-to-text: var(--spectrum-table-row-top-to-text-small-spacious); + --system-table-spacious-size-s-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-spacious); + --system-table-spacious-size-s-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-spacious); + --system-table-spacious-size-s-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-spacious); + --system-table-spacious-size-s-thumbnail-size: var(--spectrum-thumbnail-size-300); + --system-table-spacious-size-l-min-row-height: var(--spectrum-table-row-height-large-spacious); + --system-table-spacious-size-l-row-top-to-text: var(--spectrum-table-row-top-to-text-large-spacious); + --system-table-spacious-size-l-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-spacious); + --system-table-spacious-size-l-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-spacious); + --system-table-spacious-size-l-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-spacious); + --system-table-spacious-size-l-thumbnail-size: var(--spectrum-thumbnail-size-700); + --system-table-spacious-size-xl-min-row-height: var(--spectrum-table-row-height-extra-large-spacious); + --system-table-spacious-size-xl-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-spacious); + --system-table-spacious-size-xl-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-spacious); + --system-table-spacious-size-xl-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-spacious); + --system-table-spacious-size-xl-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious); + --system-table-spacious-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-800); + --system-table-emphasized-selected-cell-background-color: var(--system-table-selected-row-background-color); + --system-table-emphasized-selected-cell-background-color-focus: var(--system-table-selected-row-background-color-focus); + --system-table-quiet-border-radius: 0px; + --system-table-quiet-outer-border-inline-width: 0px; + --system-table-quiet-header-background-color: var(--spectrum-transparent-white-100); + --system-table-quiet-row-background-color: var(--spectrum-transparent-white-100); +} diff --git a/tokens/dist/css/components/spectrum/tabs.css b/tokens/dist/css/components/spectrum/tabs.css new file mode 100644 index 00000000000..208c956afc9 --- /dev/null +++ b/tokens/dist/css/components/spectrum/tabs.css @@ -0,0 +1,82 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-tabs-font-weight: var(--spectrum-default-font-weight); + --system-tabs-item-height: var(--spectrum-tab-item-height-medium); + --system-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium); + --system-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-medium); + --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); + --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); + --system-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-medium); + --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); + --system-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-medium); + --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); + --system-tabs-color-selected: var(--spectrum-neutral-subdued-content-color-down); + --system-tabs-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-tabs-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-tabs-color-disabled: var(--spectrum-gray-500); + --system-tabs-font-family: var(--spectrum-sans-font-family-stack); + --system-tabs-font-style: var(--spectrum-default-font-style); + --system-tabs-font-size: var(--spectrum-font-size-100); + --system-tabs-line-height: var(--spectrum-line-height-100); + --system-tabs-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --system-tabs-focus-indicator-border-radius: var(--spectrum-corner-radius-100); + --system-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-medium); + --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-tabs-selection-indicator-color: var(--spectrum-neutral-subdued-content-color-down); + --system-tabs-list-background-direction: top; + --system-tabs-divider-background-color: var(--spectrum-gray-300); + --system-tabs-divider-size: var(--spectrum-border-width-200); + --system-tabs-divider-border-radius: 1px; + --system-tabs-animation-duration: var(--spectrum-animation-duration-100); + --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); + --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); + --system-tabs-size-s-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-small); + --system-tabs-size-s-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-small); + --system-tabs-size-s-start-to-edge: var(--spectrum-tab-item-start-to-edge-small); + --system-tabs-size-s-top-to-text: var(--spectrum-tab-item-top-to-text-small); + --system-tabs-size-s-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-small); + --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); + --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); + --system-tabs-size-s-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-small); + --system-tabs-size-s-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-small); + --system-tabs-size-s-font-size: var(--spectrum-font-size-75); + --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); + --system-tabs-size-l-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-large); + --system-tabs-size-l-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-large); + --system-tabs-size-l-start-to-edge: var(--spectrum-tab-item-start-to-edge-large); + --system-tabs-size-l-top-to-text: var(--spectrum-tab-item-top-to-text-large); + --system-tabs-size-l-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-large); + --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); + --system-tabs-size-l-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-large); + --system-tabs-size-l-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-large); + --system-tabs-size-l-font-size: var(--spectrum-font-size-200); + --system-tabs-size-xl-item-height: var(--spectrum-tab-item-height-extra-large); + --system-tabs-size-xl-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-extra-large); + --system-tabs-size-xl-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-extra-large); + --system-tabs-size-xl-start-to-edge: var(--spectrum-tab-item-start-to-edge-extra-large); + --system-tabs-size-xl-top-to-text: var(--spectrum-tab-item-top-to-text-extra-large); + --system-tabs-size-xl-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-extra-large); + --system-tabs-size-xl-icon-size: var(--spectrum-workflow-icon-size-200); + --system-tabs-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); + --system-tabs-size-xl-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-extra-large); + --system-tabs-size-xl-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-extra-large); + --system-tabs-size-xl-font-size: var(--spectrum-font-size-300); + --system-tabs-emphasized-color-selected: var(--spectrum-accent-content-color-default); + --system-tabs-emphasized-color-hover: var(--spectrum-accent-content-color-hover); + --system-tabs-emphasized-color-key-focus: var(--spectrum-accent-content-color-key-focus); + --system-tabs-emphasized-selection-indicator-color: var(--spectrum-accent-content-color-default); +} diff --git a/tokens/dist/css/components/spectrum/tag.css b/tokens/dist/css/components/spectrum/tag.css new file mode 100644 index 00000000000..f894a0ab4a9 --- /dev/null +++ b/tokens/dist/css/components/spectrum/tag.css @@ -0,0 +1,161 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-tag-border-color: var(--spectrum-gray-700); + --system-tag-border-color-hover: var(--spectrum-gray-800); + --system-tag-border-color-active: var(--spectrum-gray-900); + --system-tag-border-color-focus: var(--spectrum-gray-800); + --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-background-color: var(--spectrum-gray-75); + --system-tag-background-color-hover: var(--spectrum-gray-75); + --system-tag-background-color-active: var(--spectrum-gray-200); + --system-tag-background-color-focus: var(--spectrum-gray-75); + --system-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); + --system-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --system-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down); + --system-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --system-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default); + --system-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover); + --system-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down); + --system-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus); + --system-tag-border-color-disabled: transparent; + --system-tag-background-color-disabled: var(--spectrum-disabled-background-color); + --system-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75); + --system-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75); + --system-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75); + --system-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100); + --system-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100); + --system-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100); + --system-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200); + --system-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200); + --system-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200); + --system-tag-avatar-opacity-disabled: 0.3; + --system-tag-animation-duration: var(--spectrum-animation-duration-100); + --system-tag-border-width: var(--spectrum-border-width-100); + --system-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); + --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-tag-label-line-height: var(--spectrum-line-height-100); + --system-tag-label-font-weight: var(--spectrum-regular-font-weight); + --system-tag-content-color-selected: var(--spectrum-gray-50); + --system-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default); + --system-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); + --system-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down); + --system-tag-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); + --system-tag-border-color-invalid: var(--spectrum-negative-color-900); + --system-tag-border-color-invalid-hover: var(--spectrum-negative-color-1000); + --system-tag-border-color-invalid-active: var(--spectrum-negative-color-1100); + --system-tag-border-color-invalid-focus: var(--spectrum-negative-color-1000); + --system-tag-content-color-invalid: var(--spectrum-negative-content-color-default); + --system-tag-content-color-invalid-hover: var(--spectrum-negative-content-color-hover); + --system-tag-content-color-invalid-active: var(--spectrum-negative-content-color-down); + --system-tag-content-color-invalid-focus: var(--spectrum-negative-content-color-key-focus); + --system-tag-border-color-invalid-selected: var(--spectrum-negative-background-color-default); + --system-tag-border-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); + --system-tag-border-color-invalid-selected-focus: var(--spectrum-negative-background-color-down); + --system-tag-border-color-invalid-selected-active: var(--spectrum-negative-background-color-key-focus); + --system-tag-background-color-invalid-selected: var(--spectrum-negative-background-color-default); + --system-tag-background-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); + --system-tag-background-color-invalid-selected-active: var(--spectrum-negative-background-color-down); + --system-tag-background-color-invalid-selected-focus: var(--spectrum-negative-background-color-key-focus); + --system-tag-content-color-invalid-selected: var(--spectrum-white); + --system-tag-border-color-emphasized: var(--spectrum-accent-background-color-default); + --system-tag-border-color-emphasized-hover: var(--spectrum-accent-background-color-hover); + --system-tag-border-color-emphasized-active: var(--spectrum-accent-background-color-down); + --system-tag-border-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); + --system-tag-background-color-emphasized: var(--spectrum-accent-background-color-default); + --system-tag-background-color-emphasized-hover: var(--spectrum-accent-background-color-hover); + --system-tag-background-color-emphasized-active: var(--spectrum-accent-background-color-down); + --system-tag-background-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); + --system-tag-content-color-emphasized: var(--spectrum-white); + --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); + --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + --system-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); + --system-tag-height: var(--spectrum-component-height-100); + --system-tag-font-size: var(--spectrum-font-size-100); + --system-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); + --system-tag-size-s-height: var(--spectrum-component-height-75); + --system-tag-size-s-font-size: var(--spectrum-font-size-75); + --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tag-size-s-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-75); + --system-tag-size-s-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-small); + --system-tag-size-s-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); + --system-tag-size-s-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75); + --system-tag-size-s-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tag-size-s-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small); + --system-tag-size-s-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small); + --system-tag-size-s-avatar-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tag-size-s-label-spacing-block: var(--spectrum-component-top-to-text-75); + --system-tag-size-s-corner-radius: var(--system-tag-size-small-corner-radius); + --system-tag-size-s-spacing-inline-start: var(--system-tag-size-small-spacing-inline-start); + --system-tag-size-s-label-spacing-inline-end: var(--system-tag-size-small-label-spacing-inline-end); + --system-tag-size-s-clear-button-spacing-inline-end: var(--system-tag-size-small-clear-button-spacing-inline-end); + --system-scope-tag-height: var(--spectrum-component-height-100); + --system-tag-size-m-height: var(--spectrum-component-height-100); + --system-scope-tag-font-size: var(--spectrum-font-size-100); + --system-tag-size-m-font-size: var(--spectrum-font-size-100); + --system-scope-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-scope-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); + --system-tag-size-m-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); + --system-scope-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); + --system-tag-size-m-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); + --system-scope-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-size-m-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); + --system-scope-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-size-m-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); + --system-scope-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-size-m-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-scope-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-size-m-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); + --system-scope-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-size-m-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); + --system-scope-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-size-m-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-scope-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + --system-tag-size-m-label-spacing-block: var(--spectrum-component-top-to-text-100); + --system-scope-tag-corner-radius: var(--system-tag-size-medium-corner-radius); + --system-tag-size-m-corner-radius: var(--system-tag-size-medium-corner-radius); + --system-scope-tag-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); + --system-tag-size-m-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); + --system-scope-tag-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); + --system-tag-size-m-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); + --system-scope-tag-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); + --system-tag-size-m-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); + --system-tag-size-l-height: var(--spectrum-component-height-200); + --system-tag-size-l-font-size: var(--spectrum-font-size-200); + --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-tag-size-l-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-200); + --system-tag-size-l-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-large); + --system-tag-size-l-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-200); + --system-tag-size-l-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-200); + --system-tag-size-l-icon-spacing-inline-end: var(--spectrum-text-to-visual-200); + --system-tag-size-l-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-large); + --system-tag-size-l-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-large); + --system-tag-size-l-avatar-spacing-inline-end: var(--spectrum-text-to-visual-200); + --system-tag-size-l-label-spacing-block: var(--spectrum-component-top-to-text-200); + --system-tag-size-l-corner-radius: var(--system-tag-size-large-corner-radius); + --system-tag-size-l-spacing-inline-start: var(--system-tag-size-large-spacing-inline-start); + --system-tag-size-l-label-spacing-inline-end: var(--system-tag-size-large-label-spacing-inline-end); + --system-tag-size-l-clear-button-spacing-inline-end: var(--system-tag-size-large-clear-button-spacing-inline-end); +} diff --git a/tokens/dist/css/components/spectrum/taggroup.css b/tokens/dist/css/components/spectrum/taggroup.css new file mode 100644 index 00000000000..d369438384e --- /dev/null +++ b/tokens/dist/css/components/spectrum/taggroup.css @@ -0,0 +1,17 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-tag-group-item-margin-block: var(--spectrum-spacing-75); + --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); +} diff --git a/tokens/dist/css/components/spectrum/textfield.css b/tokens/dist/css/components/spectrum/textfield.css new file mode 100644 index 00000000000..191d8225389 --- /dev/null +++ b/tokens/dist/css/components/spectrum/textfield.css @@ -0,0 +1,153 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-textfield-border-color: var(--spectrum-gray-500); + --system-textfield-border-color-hover: var(--spectrum-gray-600); + --system-textfield-border-color-focus: var(--spectrum-gray-800); + --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); + --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-textfield-border-width: var(--spectrum-border-width-100); + --system-textfield-texfield-animation-duration: var(--spectrum-animation-duration-100); + --system-textfield-width: 240px; + --system-textfield-min-width: var(--spectrum-text-field-minimum-width-multiplier); + --system-textfield-corner-radius: var(--spectrum-corner-radius-100); + --system-textfield-spacing-inline-quiet: var(--spectrum-field-edge-to-text-quiet); + --system-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100); + --system-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-100); + --system-textfield-spacing-block-quiet: var(--spectrum-field-edge-to-border-quiet); + --system-textfield-label-spacing-block: var(--spectrum-field-label-to-component); + --system-textfield-helptext-spacing-block: var(--spectrum-help-text-to-component); + --system-textfield-icon-spacing-inline-end-quiet-invalid: var(--spectrum-field-edge-to-alert-icon-quiet); + --system-textfield-icon-spacing-inline-end-quiet-valid: var(--spectrum-field-edge-to-validation-icon-quiet); + --system-textfield-font-family: var(--spectrum-sans-font-family-stack); + --system-textfield-font-weight: var(--spectrum-regular-font-weight); + --system-textfield-character-count-font-family: var(--spectrum-sans-font-family-stack); + --system-textfield-character-count-font-weight: var(--spectrum-regular-font-weight); + --system-textfield-character-count-spacing-inline: var(--spectrum-spacing-200); + --system-textfield-character-count-spacing-inline-side: var(--spectrum-side-label-character-count-to-field); + --system-textfield-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-textfield-background-color: var(--spectrum-gray-50); + --system-textfield-text-color-default: var(--spectrum-neutral-content-color-default); + --system-textfield-text-color-hover: var(--spectrum-neutral-content-color-hover); + --system-textfield-text-color-focus: var(--spectrum-neutral-content-color-focus); + --system-textfield-text-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); + --system-textfield-text-color-keyboard-focus: var(--spectrum-neutral-content-color-key-focus); + --system-textfield-text-color-readonly: var(--spectrum-neutral-content-color-default); + --system-textfield-background-color-disabled: var(--spectrum-disabled-background-color); + --system-textfield-border-color-disabled: var(--spectrum-disabled-border-color); + --system-textfield-text-color-disabled: var(--spectrum-disabled-content-color); + --system-textfield-border-color-invalid-default: var(--spectrum-negative-border-color-default); + --system-textfield-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); + --system-textfield-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); + --system-textfield-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); + --system-textfield-border-color-invalid-keyboard-focus: var(--spectrum-negative-border-color-key-focus); + --system-textfield-icon-color-invalid: var(--spectrum-negative-visual-color); + --system-textfield-text-color-invalid: var(--spectrum-neutral-content-color-default); + --system-textfield-text-color-valid: var(--spectrum-neutral-content-color-default); + --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); + --system-textfield-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-textfield-text-area-min-inline-size: var(--spectrum-text-area-minimum-width); + --system-textfield-text-area-min-block-size: var(--spectrum-text-area-minimum-height); + --system-textfield-size-s-height: var(--spectrum-component-height-75); + --system-textfield-size-s-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-small); + --system-textfield-size-s-label-spacing-inline-side-label: var(--spectrum-spacing-100); + --system-textfield-size-s-placeholder-font-size: var(--spectrum-font-size-75); + --system-textfield-size-s-spacing-inline: var(--spectrum-component-edge-to-text-75); + --system-textfield-size-s-icon-size-invalid: var(--spectrum-workflow-icon-size-75); + --system-textfield-size-s-icon-size-valid: var(--spectrum-checkmark-icon-size-75); + --system-textfield-size-s-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-small); + --system-textfield-size-s-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-small); + --system-textfield-size-s-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small); + --system-textfield-size-s-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-small); + --system-textfield-size-s-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-small); + --system-textfield-size-s-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-small); + --system-textfield-size-s-character-count-font-size: var(--spectrum-font-size-75); + --system-textfield-size-s-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); + --system-textfield-size-s-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-small); + --system-textfield-size-s-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-small); + --system-textfield-size-s-text-area-min-block-size-quiet: var(--spectrum-component-height-75); + --system-textfield-height: var(--spectrum-component-height-100); + --system-textfield-size-m-height: var(--spectrum-component-height-100); + --system-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium); + --system-textfield-size-m-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium); + --system-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --system-textfield-size-m-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); + --system-textfield-size-m-placeholder-font-size: var(--spectrum-font-size-100); + --system-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100); + --system-textfield-size-m-spacing-inline: var(--spectrum-component-edge-to-text-100); + --system-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100); + --system-textfield-size-m-icon-size-invalid: var(--spectrum-workflow-icon-size-100); + --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); + --system-textfield-size-m-icon-size-valid: var(--spectrum-checkmark-icon-size-100); + --system-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); + --system-textfield-size-m-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); + --system-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); + --system-textfield-size-m-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); + --system-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); + --system-textfield-size-m-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); + --system-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); + --system-textfield-size-m-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); + --system-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); + --system-textfield-size-m-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); + --system-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); + --system-textfield-size-m-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); + --system-textfield-character-count-font-size: var(--spectrum-font-size-75); + --system-textfield-size-m-character-count-font-size: var(--spectrum-font-size-75); + --system-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); + --system-textfield-size-m-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); + --system-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium); + --system-textfield-size-m-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium); + --system-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium); + --system-textfield-size-m-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium); + --system-textfield-text-area-min-block-size-quiet: var(--spectrum-component-height-100); + --system-textfield-size-m-text-area-min-block-size-quiet: var(--spectrum-component-height-100); + --system-textfield-size-l-height: var(--spectrum-component-height-200); + --system-textfield-size-l-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-large); + --system-textfield-size-l-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --system-textfield-size-l-placeholder-font-size: var(--spectrum-font-size-200); + --system-textfield-size-l-spacing-inline: var(--spectrum-component-edge-to-text-200); + --system-textfield-size-l-icon-size-invalid: var(--spectrum-workflow-icon-size-200); + --system-textfield-size-l-icon-size-valid: var(--spectrum-checkmark-icon-size-200); + --system-textfield-size-l-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-large); + --system-textfield-size-l-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-large); + --system-textfield-size-l-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large); + --system-textfield-size-l-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-large); + --system-textfield-size-l-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-large); + --system-textfield-size-l-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-large); + --system-textfield-size-l-character-count-font-size: var(--spectrum-font-size-100); + --system-textfield-size-l-character-count-spacing-block: var(--spectrum-component-bottom-to-text-100); + --system-textfield-size-l-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-large); + --system-textfield-size-l-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-large); + --system-textfield-size-l-text-area-min-block-size-quiet: var(--spectrum-component-height-200); + --system-textfield-size-xl-height: var(--spectrum-component-height-300); + --system-textfield-size-xl-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); + --system-textfield-size-xl-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --system-textfield-size-xl-placeholder-font-size: var(--spectrum-font-size-300); + --system-textfield-size-xl-spacing-inline: var(--spectrum-component-edge-to-text-200); + --system-textfield-size-xl-icon-size-invalid: var(--spectrum-workflow-icon-size-300); + --system-textfield-size-xl-icon-size-valid: var(--spectrum-checkmark-icon-size-300); + --system-textfield-size-xl-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-extra-large); + --system-textfield-size-xl-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-extra-large); + --system-textfield-size-xl-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large); + --system-textfield-size-xl-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-extra-large); + --system-textfield-size-xl-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-extra-large); + --system-textfield-size-xl-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-extra-large); + --system-textfield-size-xl-character-count-font-size: var(--spectrum-font-size-200); + --system-textfield-size-xl-character-count-spacing-block: var(--spectrum-component-bottom-to-text-200); + --system-textfield-size-xl-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-extra-large); + --system-textfield-size-xl-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-extra-large); + --system-textfield-size-xl-text-area-min-block-size-quiet: var(--spectrum-component-height-300); +} diff --git a/tokens/dist/css/components/spectrum/thumbnail.css b/tokens/dist/css/components/spectrum/thumbnail.css new file mode 100644 index 00000000000..e38539e0bb6 --- /dev/null +++ b/tokens/dist/css/components/spectrum/thumbnail.css @@ -0,0 +1,41 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); + --system-thumbnail-border-width: var(--spectrum-border-width-100); + --system-thumbnail-border-color-rgba: rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-color-opacity)); + --system-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400); + --system-thumbnail-layer-border-color-inner: var(--spectrum-white); + --system-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100); + --system-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); + --system-thumbnail-border-width-selected: var(--spectrum-border-width-200); + --system-thumbnail-border-color-selected: var(--spectrum-accent-color-800); + --system-thumbnail-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-thumbnail-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled); + --system-thumbnail-size-50-size: var(--spectrum-thumbnail-size-50); + --system-thumbnail-size-75-size: var(--spectrum-thumbnail-size-75); + --system-thumbnail-size-100-size: var(--spectrum-thumbnail-size-100); + --system-thumbnail-size-200-size: var(--spectrum-thumbnail-size-200); + --system-thumbnail-size-300-size: var(--spectrum-thumbnail-size-300); + --system-thumbnail-size-400-size: var(--spectrum-thumbnail-size-400); + --system-thumbnail-size-500-size: var(--spectrum-thumbnail-size-500); + --system-thumbnail-size-600-size: var(--spectrum-thumbnail-size-600); + --system-thumbnail-size-700-size: var(--spectrum-thumbnail-size-700); + --system-thumbnail-size-800-size: var(--spectrum-thumbnail-size-800); + --system-thumbnail-size-900-size: var(--spectrum-thumbnail-size-900); + --system-thumbnail-size-1000-size: var(--spectrum-thumbnail-size-1000); +} diff --git a/tokens/dist/css/components/spectrum/toast.css b/tokens/dist/css/components/spectrum/toast.css new file mode 100644 index 00000000000..4740c601186 --- /dev/null +++ b/tokens/dist/css/components/spectrum/toast.css @@ -0,0 +1,41 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --system-toast-font-weight: var(--spectrum-regular-font-weight); + --system-toast-font-size: var(--spectrum-font-size-100); + --system-toast-corner-radius: var(--spectrum-corner-radius-100); + --system-toast-block-size: var(--spectrum-toast-height); + --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); + --system-toast-border-width: var(--spectrum-border-width-100); + --system-toast-line-height: var(--spectrum-line-height-100); + --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); + --system-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300); + --system-toast-spacing-text-and-action-button-to-divider: var(--spectrum-spacing-300); + --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon); + --system-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-300); + --system-toast-spacing-close-button: var(--spectrum-spacing-100); + --system-toast-spacing-block-start: var(--spectrum-spacing-100); + --system-toast-spacing-block-end: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); + --system-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text); + --system-toast-negative-background-color-default: var(--spectrum-negative-background-color-default); + --system-toast-positive-background-color-default: var(--spectrum-positive-background-color-default); + --system-toast-informative-background-color-default: var(--spectrum-informative-background-color-default); + --system-toast-text-and-icon-color: var(--spectrum-white); + --system-toast-divider-color: var(--spectrum-transparent-white-300); +} diff --git a/tokens/dist/css/components/spectrum/tooltip.css b/tokens/dist/css/components/spectrum/tooltip.css new file mode 100644 index 00000000000..2dbe0b23c49 --- /dev/null +++ b/tokens/dist/css/components/spectrum/tooltip.css @@ -0,0 +1,44 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default); + --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); + --system-tooltip-margin: 0px; + --system-tooltip-height: var(--spectrum-component-height-75); + --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); + --system-tooltip-border-radius: var(--spectrum-corner-radius-100); + --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); + --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); + --system-tooltip-font-size: var(--spectrum-font-size-75); + --system-tooltip-line-height: var(--spectrum-line-height-100); + --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-tooltip-font-weight: var(--spectrum-regular-font-weight); + --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); + --system-tooltip-spacing-block-start: var(--spectrum-component-top-to-text-75); + --system-tooltip-spacing-block-end: var(--spectrum-component-bottom-to-text-75); + --system-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); + --system-tooltip-background-color-informative: var(--spectrum-informative-background-color-default); + --system-tooltip-background-color-positive: var(--spectrum-positive-background-color-default); + --system-tooltip-background-color-negative: var(--spectrum-negative-background-color-default); + --system-tooltip-content-color: var(--spectrum-white); + --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); + --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); + --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); + --system-tooltip-tip-height-percentage: 50%; + --system-tooltip-tip-antialiasing-inset: 0.5px; + --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); + --system-tooltip-background-color-default: var(--system-tooltip-backgound-color-default-neutral); +} diff --git a/tokens/dist/css/components/spectrum/tray.css b/tokens/dist/css/components/spectrum/tray.css new file mode 100644 index 00000000000..db169e32a1c --- /dev/null +++ b/tokens/dist/css/components/spectrum/tray.css @@ -0,0 +1,23 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-tray-exit-animation-delay: 0ms; + --system-tray-entry-animation-delay: 160ms; + --system-tray-max-inline-size: 375px; + --system-tray-spacing-edge-to-safe-zone: 64px; + --system-tray-entry-animation-duration: var(--spectrum-animation-duration-500); + --system-tray-exit-animation-duration: var(--spectrum-animation-duration-100); + --system-tray-corner-radius: var(--spectrum-corner-radius-100); + --system-tray-background-color: var(--spectrum-background-layer-2-color); +} diff --git a/tokens/dist/css/components/spectrum/treeview.css b/tokens/dist/css/components/spectrum/treeview.css new file mode 100644 index 00000000000..525424aa4bb --- /dev/null +++ b/tokens/dist/css/components/spectrum/treeview.css @@ -0,0 +1,77 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-tree-view-line-height: var(--spectrum-line-height-200); + --system-tree-view-margin-block: 1em; + --system-tree-view-font-size: var(--spectrum-font-size-100); + --system-tree-view-item-min-block-size: var(--spectrum-component-height-100); + --system-tree-view-item-indentation: var(--spectrum-treeview-item-indentation-medium); + --system-tree-view-item-padding-inline-start: var(--spectrum-component-height-100); + --system-tree-view-item-padding-inline-end: var(--spectrum-component-edge-to-text-100); + --system-tree-view-section-spacing: var(--spectrum-treeview-item-indentation-medium); + --system-tree-view-heading-font-weight: var(--spectrum-bold-font-weight); + --system-tree-view-heading-bottom-to-text: var(--spectrum-component-edge-to-text-100); + --system-tree-view-heading-color: var(--spectrum-heading-color); + --system-tree-view-item-border-size: var(--spectrum-border-width-200); + --system-tree-view-item-border-size-selected: 1px; + --system-tree-view-item-border-radius: 0px; + --system-tree-view-item-border-color-selected: var(--spectrum-blue-800); + --system-tree-view-item-border-color-focus: var(--spectrum-blue-700); + --system-tree-view-item-background-color-hover: var(--spectrum-gray-100); + --system-tree-view-item-background-color-focus: var(--spectrum-gray-100); + --system-tree-view-item-border-color-quiet-selected: transparent; + --system-tree-view-item-icon-gap: var(--spectrum-text-to-visual-75); + --system-tree-view-item-icon-color: var(--spectrum-gray-700); + --system-tree-view-item-icon-color-hover: var(--spectrum-gray-900); + --system-tree-view-item-icon-color-focus: var(--spectrum-gray-900); + --system-tree-view-item-icon-color-selected: var(--spectrum-gray-900); + --system-tree-view-item-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-tree-view-item-text-color: var(--spectrum-neutral-content-color-default); + --system-tree-view-item-text-color-selected: var(--spectrum-gray-900); + --system-tree-view-item-text-color-disabled: var(--spectrum-gray-500); + --system-tree-view-item-text-color-focus: var(--spectrum-gray-900); + --system-tree-view-item-text-color-hover: var(--spectrum-gray-900); + --system-tree-view-indicator-margin-inline-start: calc(var(--spectrum-component-height-100) * -1); + --system-tree-view-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-medium); + --system-tree-view-item-min-block-size-thumbnail-offset: var(--spectrum-treeview-item-min-block-size-thumbnail-offset-medium, 0px); + --system-tree-view-indicator-animation-duration: var(--spectrum-animation-duration-100); + --system-tree-view-size-s-font-size: var(--spectrum-font-size-75); + --system-tree-view-size-s-item-min-block-size: var(--spectrum-component-height-75); + --system-tree-view-size-s-item-indentation: var(--spectrum-treeview-item-indentation-small); + --system-tree-view-size-s-heading-bottom-to-text: var(--spectrum-component-edge-to-text-75); + --system-tree-view-size-s-item-padding-inline-start: var(--spectrum-component-height-75); + --system-tree-view-size-s-indicator-margin-inline-start: calc(var(--spectrum-component-height-75) * -1); + --system-tree-view-size-s-item-padding-inline-end: var(--spectrum-component-edge-to-text-75); + --system-tree-view-size-s-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-small); + --system-tree-view-size-s-item-min-block-size-thumbnail-offset: 6px; + --system-tree-view-size-l-font-size: var(--spectrum-font-size-200); + --system-tree-view-size-l-item-indentation: var(--spectrum-treeview-item-indentation-large); + --system-tree-view-size-l-item-min-block-size: var(--spectrum-component-height-200); + --system-tree-view-size-l-heading-bottom-to-text: var(--spectrum-component-edge-to-text-200); + --system-tree-view-size-l-item-padding-inline-start: var(--spectrum-component-height-200); + --system-tree-view-size-l-indicator-margin-inline-start: calc(var(--spectrum-component-height-200) * -1); + --system-tree-view-size-l-item-padding-inline-end: var(--spectrum-component-edge-to-text-200); + --system-tree-view-size-l-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-large); + --system-tree-view-size-l-item-min-block-size-thumbnail-offset: 0px; + --system-tree-view-size-xl-font-size: var(--spectrum-font-size-300); + --system-tree-view-size-xl-item-indentation: var(--spectrum-treeview-item-indentation-extra-large); + --system-tree-view-size-xl-item-min-block-size: var(--spectrum-component-height-300); + --system-tree-view-size-xl-heading-bottom-to-text: var(--spectrum-component-edge-to-text-300); + --system-tree-view-size-xl-item-padding-inline-start: var(--spectrum-component-height-300); + --system-tree-view-size-xl-indicator-margin-inline-start: calc(var(--spectrum-component-height-300) * -1); + --system-tree-view-size-xl-item-padding-inline-end: var(--spectrum-component-edge-to-text-300); + --system-tree-view-size-xl-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large); + --system-tree-view-size-xl-item-min-block-size-thumbnail-offset: 0px; + --system-tree-view-detached-item-border-radius: var(--spectrum-corner-radius-100); +} diff --git a/tokens/dist/css/components/spectrum/typography.css b/tokens/dist/css/components/spectrum/typography.css new file mode 100644 index 00000000000..190f9ada326 --- /dev/null +++ b/tokens/dist/css/components/spectrum/typography.css @@ -0,0 +1,74 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --system-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --system-font-family: var(--spectrum-sans-font-family-stack); + --system-font-style: var(--spectrum-default-font-style); + --system-font-size: var(--spectrum-font-size-100); + --system-heading-sans-serif-font-family: var(--spectrum-sans-font-family-stack); + --system-heading-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-heading-font-color: var(--spectrum-heading-color); + --system-heading-size-xxs-font-size: var(--spectrum-heading-size-xxs); + --system-heading-size-xxs-cjk-font-size: var(--spectrum-heading-cjk-size-xxs); + --system-heading-size-xs-font-size: var(--spectrum-heading-size-xs); + --system-heading-size-xs-cjk-font-size: var(--spectrum-heading-cjk-size-xs); + --system-heading-size-s-font-size: var(--spectrum-heading-size-s); + --system-heading-size-s-cjk-font-size: var(--spectrum-heading-cjk-size-s); + --system-heading-font-size: var(--spectrum-heading-size-m); + --system-heading-size-m-font-size: var(--spectrum-heading-size-m); + --system-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --system-heading-size-m-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --system-heading-size-l-font-size: var(--spectrum-heading-size-l); + --system-heading-size-l-cjk-font-size: var(--spectrum-heading-cjk-size-l); + --system-heading-size-xl-font-size: var(--spectrum-heading-size-xl); + --system-heading-size-xl-cjk-font-size: var(--spectrum-heading-cjk-size-xl); + --system-heading-size-xxl-font-size: var(--spectrum-heading-size-xxl); + --system-heading-size-xxl-cjk-font-size: var(--spectrum-heading-cjk-size-xxl); + --system-heading-size-xxxl-font-size: var(--spectrum-heading-size-xxxl); + --system-heading-size-xxxl-cjk-font-size: var(--spectrum-heading-cjk-size-xxxl); + --system-body-sans-serif-font-family: var(--spectrum-sans-font-family-stack); + --system-body-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-body-font-color: var(--spectrum-body-color); + --system-body-size-xs-font-size: var(--spectrum-body-size-xs); + --system-body-size-s-font-size: var(--spectrum-body-size-s); + --system-body-font-size: var(--spectrum-body-size-m); + --system-body-size-m-font-size: var(--spectrum-body-size-m); + --system-body-size-l-font-size: var(--spectrum-body-size-l); + --system-body-size-xl-font-size: var(--spectrum-body-size-xl); + --system-body-size-xxl-font-size: var(--spectrum-body-size-xxl); + --system-body-size-xxxl-font-size: var(--spectrum-body-size-xxxl); + --system-detail-sans-serif-font-family: var(--spectrum-sans-font-family-stack); + --system-detail-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-detail-font-color: var(--spectrum-detail-color); + --system-detail-size-s-font-size: var(--spectrum-detail-size-s); + --system-detail-font-size: var(--spectrum-detail-size-m); + --system-detail-size-m-font-size: var(--spectrum-detail-size-m); + --system-detail-size-l-font-size: var(--spectrum-detail-size-l); + --system-detail-size-xl-font-size: var(--spectrum-detail-size-xl); + --system-code-font-family: var(--spectrum-code-font-family-stack); + --system-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-code-font-color: var(--spectrum-code-color); + --system-code-size-xs-font-size: var(--spectrum-code-size-xs); + --system-code-size-s-font-size: var(--spectrum-code-size-s); + --system-code-font-size: var(--spectrum-code-size-m); + --system-code-size-m-font-size: var(--spectrum-code-size-m); + --system-code-size-l-font-size: var(--spectrum-code-size-l); + --system-code-size-xl-font-size: var(--spectrum-code-size-xl); +} diff --git a/tokens/dist/css/components/spectrum/underlay.css b/tokens/dist/css/components/spectrum/underlay.css new file mode 100644 index 00000000000..53e84f74382 --- /dev/null +++ b/tokens/dist/css/components/spectrum/underlay.css @@ -0,0 +1,22 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0); + --system-underlay-background-exit-animation-ease: var(--spectrum-animation-ease-in); + --system-underlay-background-entry-animation-ease: var(--spectrum-animation-ease-out); + --system-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600); + --system-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-300); + --system-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200); + --system-underlay-background-color: rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)); +} diff --git a/tokens/dist/css/components/spectrum/well.css b/tokens/dist/css/components/spectrum/well.css new file mode 100644 index 00000000000..dbe561f90d8 --- /dev/null +++ b/tokens/dist/css/components/spectrum/well.css @@ -0,0 +1,23 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum.spectrum--legacy { + --system-well-border-width: var(--spectrum-border-width-100); + --system-well-border-color: rgba(var(--spectrum-gray-900-rgb), 0.05); + --system-well-border-radius: var(--spectrum-spacing-75); + --system-well-content-color: var(--spectrum-body-color); + --system-well-background-color: rgba(var(--spectrum-gray-800-rgb), 0.02); + --system-well-padding: var(--spectrum-spacing-300); + --system-well-margin-top: var(--spectrum-spacing-75); + --system-well-minimum-width: var(--spectrum-well-min-width); +} diff --git a/tokens/dist/css/dark-vars.css b/tokens/dist/css/dark-vars.css new file mode 100644 index 00000000000..f7209a12439 --- /dev/null +++ b/tokens/dist/css/dark-vars.css @@ -0,0 +1,739 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--dark{ + --spectrum-overlay-opacity:0.6; + --spectrum-background-layer-2-color:var(--spectrum-gray-75); + --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-500); + --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-400); + --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-400); + --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-400); + --spectrum-accent-background-color-default:var(--spectrum-accent-color-700); + --spectrum-accent-background-color-hover:var(--spectrum-accent-color-600); + --spectrum-accent-background-color-down:var(--spectrum-accent-color-600); + --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-600); + --spectrum-informative-background-color-default:var(--spectrum-informative-color-700); + --spectrum-informative-background-color-hover:var(--spectrum-informative-color-600); + --spectrum-informative-background-color-down:var(--spectrum-informative-color-600); + --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-600); + --spectrum-negative-background-color-default:var(--spectrum-negative-color-700); + --spectrum-negative-background-color-hover:var(--spectrum-negative-color-600); + --spectrum-negative-background-color-down:var(--spectrum-negative-color-600); + --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-600); + --spectrum-positive-background-color-default:var(--spectrum-positive-color-700); + --spectrum-positive-background-color-hover:var(--spectrum-positive-color-600); + --spectrum-positive-background-color-down:var(--spectrum-positive-color-600); + --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-600); + --spectrum-notice-background-color-default:var(--spectrum-notice-color-900); + --spectrum-gray-background-color-default:var(--spectrum-gray-500); + --spectrum-red-background-color-default:var(--spectrum-red-700); + --spectrum-orange-background-color-default:var(--spectrum-orange-900); + --spectrum-yellow-background-color-default:var(--spectrum-yellow-1100); + --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-1000); + --spectrum-celery-background-color-default:var(--spectrum-celery-900); + --spectrum-green-background-color-default:var(--spectrum-green-700); + --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-700); + --spectrum-cyan-background-color-default:var(--spectrum-cyan-700); + --spectrum-blue-background-color-default:var(--spectrum-blue-700); + --spectrum-indigo-background-color-default:var(--spectrum-indigo-700); + --spectrum-purple-background-color-default:var(--spectrum-purple-700); + --spectrum-fuchsia-background-color-default:var(--spectrum-fuchsia-700); + --spectrum-magenta-background-color-default:var(--spectrum-magenta-700); + --spectrum-neutral-visual-color:var(--spectrum-gray-600); + --spectrum-accent-visual-color:var(--spectrum-accent-color-900); + --spectrum-informative-visual-color:var(--spectrum-informative-color-900); + --spectrum-negative-visual-color:var(--spectrum-negative-color-700); + --spectrum-notice-visual-color:var(--spectrum-notice-color-900); + --spectrum-positive-visual-color:var(--spectrum-positive-color-800); + --spectrum-gray-visual-color:var(--spectrum-gray-600); + --spectrum-red-visual-color:var(--spectrum-red-700); + --spectrum-orange-visual-color:var(--spectrum-orange-900); + --spectrum-yellow-visual-color:var(--spectrum-yellow-1100); + --spectrum-chartreuse-visual-color:var(--spectrum-chartreuse-900); + --spectrum-celery-visual-color:var(--spectrum-celery-800); + --spectrum-green-visual-color:var(--spectrum-green-800); + --spectrum-seafoam-visual-color:var(--spectrum-seafoam-800); + --spectrum-cyan-visual-color:var(--spectrum-cyan-900); + --spectrum-blue-visual-color:var(--spectrum-blue-900); + --spectrum-indigo-visual-color:var(--spectrum-indigo-900); + --spectrum-purple-visual-color:var(--spectrum-purple-900); + --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-900); + --spectrum-magenta-visual-color:var(--spectrum-magenta-900); + --spectrum-background-elevated-color:var(--spectrum-gray-75); + --spectrum-background-pasteboard-color:var(--spectrum-gray-25); + --spectrum-brown-visual-color:var(--spectrum-brown-900); + --spectrum-cinnamon-visual-color:var(--spectrum-cinnamon-900); + --spectrum-pink-visual-color:var(--spectrum-pink-900); + --spectrum-silver-visual-color:var(--spectrum-silver-900); + --spectrum-turquoise-visual-color:var(--spectrum-turquoise-900); + --spectrum-brown-background-color-default:var(--spectrum-brown-700); + --spectrum-cinnamon-background-color-default:var(--spectrum-cinnamon-700); + --spectrum-pink-background-color-default:var(--spectrum-pink-700); + --spectrum-silver-background-color-default:var(--spectrum-silver-700); + --spectrum-turquoise-background-color-default:var(--spectrum-turquoise-700); + --spectrum-drop-shadow-color-100-rgb:0, 0, 0; + --spectrum-drop-shadow-color-100-opacity:0.36; + --spectrum-drop-shadow-color-100:rgba(var(--spectrum-drop-shadow-color-100-rgb), var(--spectrum-drop-shadow-color-100-opacity)); + --spectrum-drop-shadow-color-200-rgb:0, 0, 0; + --spectrum-drop-shadow-color-200-opacity:0.48; + --spectrum-drop-shadow-color-200:rgba(var(--spectrum-drop-shadow-color-200-rgb), var(--spectrum-drop-shadow-color-200-opacity)); + --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-800); + --spectrum-gray-25-rgb:17, 17, 17; + --spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb)); + --spectrum-gray-50-rgb:27, 27, 27; + --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb:34, 34, 34; + --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb:44, 44, 44; + --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb:50, 50, 50; + --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb:57, 57, 57; + --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb:68, 68, 68; + --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb:109, 109, 109; + --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb:138, 138, 138; + --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb:175, 175, 175; + --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb:219, 219, 219; + --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb:242, 242, 242; + --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); + --spectrum-gray-1000-rgb:255, 255, 255; + --spectrum-gray-1000:rgba(var(--spectrum-gray-1000-rgb)); + --spectrum-blue-100-rgb:14, 23, 63; + --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb:15, 28, 82; + --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb:12, 33, 117; + --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb:18, 45, 154; + --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb:26, 58, 195; + --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb:37, 73, 229; + --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb:52, 91, 248; + --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb:69, 110, 254; + --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb:86, 129, 255; + --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb:105, 149, 254; + --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb:124, 169, 252; + --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb:152, 192, 252; + --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb:181, 213, 253; + --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb:213, 231, 254; + --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-blue-1500-rgb:238, 245, 255; + --spectrum-blue-1500:rgba(var(--spectrum-blue-1500-rgb)); + --spectrum-blue-1600-rgb:255, 255, 255; + --spectrum-blue-1600:rgba(var(--spectrum-blue-1600-rgb)); + --spectrum-red-100-rgb:54, 10, 3; + --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb:68, 13, 5; + --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb:87, 17, 7; + --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb:115, 24, 11; + --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb:147, 31, 17; + --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb:177, 38, 23; + --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb:205, 46, 29; + --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb:230, 54, 35; + --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb:252, 67, 46; + --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb:255, 103, 86; + --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb:255, 134, 120; + --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb:255, 167, 157; + --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb:255, 196, 189; + --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb:255, 222, 219; + --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); + --spectrum-red-1500-rgb:255, 242, 240; + --spectrum-red-1500:rgba(var(--spectrum-red-1500-rgb)); + --spectrum-red-1600-rgb:255, 255, 255; + --spectrum-red-1600:rgba(var(--spectrum-red-1600-rgb)); + --spectrum-orange-100-rgb:49, 16, 0; + --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb:61, 21, 0; + --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb:80, 27, 0; + --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb:106, 36, 0; + --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb:135, 47, 0; + --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb:162, 59, 0; + --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb:185, 73, 0; + --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb:205, 86, 0; + --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb:224, 100, 0; + --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb:243, 117, 0; + --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb:255, 137, 0; + --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb:255, 173, 45; + --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb:255, 201, 116; + --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb:255, 225, 178; + --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-orange-1500-rgb:255, 243, 225; + --spectrum-orange-1500:rgba(var(--spectrum-orange-1500-rgb)); + --spectrum-orange-1600-rgb:255, 255, 255; + --spectrum-orange-1600:rgba(var(--spectrum-orange-1600-rgb)); + --spectrum-yellow-100-rgb:37, 23, 0; + --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb:47, 29, 0; + --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb:61, 39, 0; + --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb:83, 52, 0; + --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb:107, 67, 0; + --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb:130, 82, 0; + --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb:151, 97, 0; + --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb:169, 110, 0; + --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb:186, 124, 0; + --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb:203, 141, 0; + --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb:218, 159, 0; + --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb:235, 183, 0; + --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb:249, 206, 0; + --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb:255, 230, 86; + --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-yellow-1500-rgb:255, 246, 195; + --spectrum-yellow-1500:rgba(var(--spectrum-yellow-1500-rgb)); + --spectrum-yellow-1600-rgb:255, 255, 255; + --spectrum-yellow-1600:rgba(var(--spectrum-yellow-1600-rgb)); + --spectrum-chartreuse-100-rgb:23, 28, 0; + --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb:30, 36, 0; + --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb:39, 47, 0; + --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb:53, 63, 0; + --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb:68, 82, 0; + --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb:83, 100, 0; + --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb:97, 116, 0; + --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb:109, 131, 0; + --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb:122, 147, 0; + --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb:136, 164, 0; + --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb:151, 181, 0; + --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb:169, 203, 0; + --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb:187, 225, 0; + --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb:219, 240, 117; + --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-chartreuse-1500-rgb:242, 249, 206; + --spectrum-chartreuse-1500:rgba(var(--spectrum-chartreuse-1500-rgb)); + --spectrum-chartreuse-1600-rgb:255, 255, 255; + --spectrum-chartreuse-1600:rgba(var(--spectrum-chartreuse-1600-rgb)); + --spectrum-celery-100-rgb:11, 31, 0; + --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb:15, 38, 0; + --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb:21, 51, 1; + --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb:31, 67, 4; + --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb:41, 86, 8; + --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb:50, 105, 11; + --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb:60, 122, 15; + --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb:69, 138, 19; + --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb:78, 154, 23; + --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb:88, 172, 28; + --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb:100, 190, 35; + --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb:116, 213, 46; + --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb:136, 234, 65; + --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb:170, 251, 112; + --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-celery-1500-rgb:222, 255, 198; + --spectrum-celery-1500:rgba(var(--spectrum-celery-1500-rgb)); + --spectrum-celery-1600-rgb:255, 255, 255; + --spectrum-celery-1600:rgba(var(--spectrum-celery-1600-rgb)); + --spectrum-green-100-rgb:0, 30, 23; + --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb:0, 38, 29; + --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb:0, 51, 38; + --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb:0, 68, 48; + --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb:2, 87, 58; + --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb:3, 106, 67; + --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb:4, 124, 75; + --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb:6, 140, 82; + --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb:9, 157, 89; + --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb:14, 175, 98; + --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb:24, 193, 110; + --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb:57, 215, 134; + --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb:126, 231, 172; + --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb:189, 241, 208; + --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); + --spectrum-green-1500-rgb:229, 250, 236; + --spectrum-green-1500:rgba(var(--spectrum-green-1500-rgb)); + --spectrum-green-1600-rgb:255, 255, 255; + --spectrum-green-1600:rgba(var(--spectrum-green-1600-rgb)); + --spectrum-seafoam-100-rgb:0, 30, 27; + --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb:0, 39, 35; + --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb:0, 50, 44; + --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb:0, 67, 59; + --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb:2, 86, 75; + --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb:4, 105, 89; + --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb:6, 122, 103; + --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb:8, 138, 116; + --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb:10, 154, 128; + --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb:12, 173, 142; + --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb:14, 190, 156; + --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb:29, 214, 176; + --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb:122, 229, 203; + --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb:186, 241, 222; + --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-seafoam-1500-rgb:229, 249, 243; + --spectrum-seafoam-1500:rgba(var(--spectrum-seafoam-1500-rgb)); + --spectrum-seafoam-1600-rgb:255, 255, 255; + --spectrum-seafoam-1600:rgba(var(--spectrum-seafoam-1600-rgb)); + --spectrum-cyan-100-rgb:0, 29, 39; + --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb:0, 36, 49; + --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb:0, 48, 65; + --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb:0, 64, 88; + --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb:0, 82, 113; + --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb:3, 99, 140; + --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb:8, 115, 168; + --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb:15, 128, 194; + --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb:24, 142, 220; + --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb:38, 159, 244; + --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb:63, 177, 255; + --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb:107, 199, 255; + --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb:152, 219, 255; + --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb:195, 236, 252; + --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-cyan-1500-rgb:230, 248, 253; + --spectrum-cyan-1500:rgba(var(--spectrum-cyan-1500-rgb)); + --spectrum-cyan-1600-rgb:255, 255, 255; + --spectrum-cyan-1600:rgba(var(--spectrum-cyan-1600-rgb)); + --spectrum-indigo-100-rgb:30, 0, 93; + --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb:35, 0, 110; + --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb:47, 0, 140; + --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb:62, 12, 174; + --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb:79, 30, 209; + --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb:95, 52, 235; + --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb:109, 75, 248; + --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb:119, 97, 252; + --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb:128, 119, 254; + --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb:139, 141, 254; + --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb:153, 161, 255; + --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb:176, 186, 255; + --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb:199, 208, 255; + --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb:223, 228, 255; + --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-indigo-1500-rgb:243, 244, 255; + --spectrum-indigo-1500:rgba(var(--spectrum-indigo-1500-rgb)); + --spectrum-indigo-1600-rgb:255, 255, 255; + --spectrum-indigo-1600:rgba(var(--spectrum-indigo-1600-rgb)); + --spectrum-purple-100-rgb:41, 0, 79; + --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb:50, 0, 96; + --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb:64, 0, 122; + --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb:83, 0, 159; + --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb:107, 6, 195; + --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb:130, 34, 215; + --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb:148, 62, 224; + --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb:161, 84, 229; + --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb:173, 105, 233; + --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb:186, 127, 237; + --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb:197, 149, 240; + --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb:212, 176, 244; + --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb:225, 201, 247; + --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb:238, 224, 250; + --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-purple-1500-rgb:248, 243, 253; + --spectrum-purple-1500:rgba(var(--spectrum-purple-1500-rgb)); + --spectrum-purple-1600-rgb:255, 255, 255; + --spectrum-purple-1600:rgba(var(--spectrum-purple-1600-rgb)); + --spectrum-fuchsia-100-rgb:50, 0, 61; + --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb:61, 0, 74; + --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb:79, 0, 95; + --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb:102, 9, 120; + --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb:127, 23, 146; + --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb:151, 38, 170; + --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb:173, 51, 192; + --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb:192, 64, 212; + --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb:213, 73, 235; + --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb:232, 91, 253; + --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb:240, 122, 255; + --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb:245, 159, 255; + --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb:248, 191, 255; + --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb:251, 219, 255; + --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-fuchsia-1500-rgb:253, 241, 255; + --spectrum-fuchsia-1500:rgba(var(--spectrum-fuchsia-1500-rgb)); + --spectrum-fuchsia-1600-rgb:255, 255, 255; + --spectrum-fuchsia-1600:rgba(var(--spectrum-fuchsia-1600-rgb)); + --spectrum-magenta-100-rgb:59, 0, 22; + --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb:74, 0, 27; + --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb:93, 0, 34; + --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb:123, 0, 45; + --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb:152, 7, 60; + --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb:181, 19, 76; + --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb:207, 31, 92; + --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb:231, 41, 105; + --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb:255, 51, 119; + --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb:255, 96, 149; + --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb:255, 128, 171; + --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb:255, 163, 194; + --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb:255, 193, 214; + --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb:255, 220, 232; + --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-magenta-1500-rgb:255, 241, 246; + --spectrum-magenta-1500:rgba(var(--spectrum-magenta-1500-rgb)); + --spectrum-magenta-1600-rgb:255, 255, 255; + --spectrum-magenta-1600:rgba(var(--spectrum-magenta-1600-rgb)); + --spectrum-pink-100-rgb:58, 0, 37; + --spectrum-pink-100:rgba(var(--spectrum-pink-100-rgb)); + --spectrum-pink-200-rgb:71, 0, 44; + --spectrum-pink-200:rgba(var(--spectrum-pink-200-rgb)); + --spectrum-pink-300-rgb:90, 0, 57; + --spectrum-pink-300:rgba(var(--spectrum-pink-300-rgb)); + --spectrum-pink-400-rgb:115, 7, 75; + --spectrum-pink-400:rgba(var(--spectrum-pink-400-rgb)); + --spectrum-pink-500-rgb:143, 18, 97; + --spectrum-pink-500:rgba(var(--spectrum-pink-500-rgb)); + --spectrum-pink-600-rgb:171, 29, 119; + --spectrum-pink-600:rgba(var(--spectrum-pink-600-rgb)); + --spectrum-pink-700-rgb:196, 39, 138; + --spectrum-pink-700:rgba(var(--spectrum-pink-700-rgb)); + --spectrum-pink-800-rgb:220, 47, 156; + --spectrum-pink-800:rgba(var(--spectrum-pink-800-rgb)); + --spectrum-pink-900-rgb:236, 67, 175; + --spectrum-pink-900:rgba(var(--spectrum-pink-900-rgb)); + --spectrum-pink-1000-rgb:251, 90, 196; + --spectrum-pink-1000:rgba(var(--spectrum-pink-1000-rgb)); + --spectrum-pink-1100-rgb:255, 122, 210; + --spectrum-pink-1100:rgba(var(--spectrum-pink-1100-rgb)); + --spectrum-pink-1200-rgb:255, 159, 223; + --spectrum-pink-1200:rgba(var(--spectrum-pink-1200-rgb)); + --spectrum-pink-1300-rgb:255, 191, 234; + --spectrum-pink-1300:rgba(var(--spectrum-pink-1300-rgb)); + --spectrum-pink-1400-rgb:255, 219, 243; + --spectrum-pink-1400:rgba(var(--spectrum-pink-1400-rgb)); + --spectrum-pink-1500-rgb:255, 241, 250; + --spectrum-pink-1500:rgba(var(--spectrum-pink-1500-rgb)); + --spectrum-pink-1600-rgb:255, 255, 255; + --spectrum-pink-1600:rgba(var(--spectrum-pink-1600-rgb)); + --spectrum-turquoise-100-rgb:0, 30, 33; + --spectrum-turquoise-100:rgba(var(--spectrum-turquoise-100-rgb)); + --spectrum-turquoise-200-rgb:0, 37, 41; + --spectrum-turquoise-200:rgba(var(--spectrum-turquoise-200-rgb)); + --spectrum-turquoise-300-rgb:0, 49, 54; + --spectrum-turquoise-300:rgba(var(--spectrum-turquoise-300-rgb)); + --spectrum-turquoise-400-rgb:0, 66, 72; + --spectrum-turquoise-400:rgba(var(--spectrum-turquoise-400-rgb)); + --spectrum-turquoise-500-rgb:3, 84, 92; + --spectrum-turquoise-500:rgba(var(--spectrum-turquoise-500-rgb)); + --spectrum-turquoise-600-rgb:5, 103, 112; + --spectrum-turquoise-600:rgba(var(--spectrum-turquoise-600-rgb)); + --spectrum-turquoise-700-rgb:7, 120, 131; + --spectrum-turquoise-700:rgba(var(--spectrum-turquoise-700-rgb)); + --spectrum-turquoise-800-rgb:9, 135, 147; + --spectrum-turquoise-800:rgba(var(--spectrum-turquoise-800-rgb)); + --spectrum-turquoise-900-rgb:11, 151, 164; + --spectrum-turquoise-900:rgba(var(--spectrum-turquoise-900-rgb)); + --spectrum-turquoise-1000-rgb:13, 168, 182; + --spectrum-turquoise-1000:rgba(var(--spectrum-turquoise-1000-rgb)); + --spectrum-turquoise-1100-rgb:16, 186, 202; + --spectrum-turquoise-1100:rgba(var(--spectrum-turquoise-1100-rgb)); + --spectrum-turquoise-1200-rgb:64, 208, 220; + --spectrum-turquoise-1200:rgba(var(--spectrum-turquoise-1200-rgb)); + --spectrum-turquoise-1300-rgb:128, 225, 231; + --spectrum-turquoise-1300:rgba(var(--spectrum-turquoise-1300-rgb)); + --spectrum-turquoise-1400-rgb:183, 240, 240; + --spectrum-turquoise-1400:rgba(var(--spectrum-turquoise-1400-rgb)); + --spectrum-turquoise-1500-rgb:228, 249, 249; + --spectrum-turquoise-1500:rgba(var(--spectrum-turquoise-1500-rgb)); + --spectrum-turquoise-1600-rgb:255, 255, 255; + --spectrum-turquoise-1600:rgba(var(--spectrum-turquoise-1600-rgb)); + --spectrum-brown-100-rgb:35, 24, 8; + --spectrum-brown-100:rgba(var(--spectrum-brown-100-rgb)); + --spectrum-brown-200-rgb:44, 31, 11; + --spectrum-brown-200:rgba(var(--spectrum-brown-200-rgb)); + --spectrum-brown-300-rgb:58, 40, 14; + --spectrum-brown-300:rgba(var(--spectrum-brown-300-rgb)); + --spectrum-brown-400-rgb:78, 55, 19; + --spectrum-brown-400:rgba(var(--spectrum-brown-400-rgb)); + --spectrum-brown-500-rgb:98, 71, 30; + --spectrum-brown-500:rgba(var(--spectrum-brown-500-rgb)); + --spectrum-brown-600-rgb:115, 88, 47; + --spectrum-brown-600:rgba(var(--spectrum-brown-600-rgb)); + --spectrum-brown-700-rgb:132, 104, 61; + --spectrum-brown-700:rgba(var(--spectrum-brown-700-rgb)); + --spectrum-brown-800-rgb:148, 118, 73; + --spectrum-brown-800:rgba(var(--spectrum-brown-800-rgb)); + --spectrum-brown-900-rgb:163, 132, 84; + --spectrum-brown-900:rgba(var(--spectrum-brown-900-rgb)); + --spectrum-brown-1000-rgb:181, 147, 98; + --spectrum-brown-1000:rgba(var(--spectrum-brown-1000-rgb)); + --spectrum-brown-1100-rgb:199, 163, 112; + --spectrum-brown-1100:rgba(var(--spectrum-brown-1100-rgb)); + --spectrum-brown-1200-rgb:222, 185, 130; + --spectrum-brown-1200:rgba(var(--spectrum-brown-1200-rgb)); + --spectrum-brown-1300-rgb:232, 207, 169; + --spectrum-brown-1300:rgba(var(--spectrum-brown-1300-rgb)); + --spectrum-brown-1400-rgb:242, 227, 206; + --spectrum-brown-1400:rgba(var(--spectrum-brown-1400-rgb)); + --spectrum-brown-1500-rgb:250, 244, 236; + --spectrum-brown-1500:rgba(var(--spectrum-brown-1500-rgb)); + --spectrum-brown-1600-rgb:255, 255, 255; + --spectrum-brown-1600:rgba(var(--spectrum-brown-1600-rgb)); + --spectrum-silver-100-rgb:26, 26, 26; + --spectrum-silver-100:rgba(var(--spectrum-silver-100-rgb)); + --spectrum-silver-200-rgb:33, 33, 33; + --spectrum-silver-200:rgba(var(--spectrum-silver-200-rgb)); + --spectrum-silver-300-rgb:44, 44, 44; + --spectrum-silver-300:rgba(var(--spectrum-silver-300-rgb)); + --spectrum-silver-400-rgb:59, 59, 59; + --spectrum-silver-400:rgba(var(--spectrum-silver-400-rgb)); + --spectrum-silver-500-rgb:76, 76, 76; + --spectrum-silver-500:rgba(var(--spectrum-silver-500-rgb)); + --spectrum-silver-600-rgb:92, 92, 92; + --spectrum-silver-600:rgba(var(--spectrum-silver-600-rgb)); + --spectrum-silver-700-rgb:108, 108, 108; + --spectrum-silver-700:rgba(var(--spectrum-silver-700-rgb)); + --spectrum-silver-800-rgb:123, 123, 123; + --spectrum-silver-800:rgba(var(--spectrum-silver-800-rgb)); + --spectrum-silver-900-rgb:137, 137, 137; + --spectrum-silver-900:rgba(var(--spectrum-silver-900-rgb)); + --spectrum-silver-1000-rgb:152, 152, 152; + --spectrum-silver-1000:rgba(var(--spectrum-silver-1000-rgb)); + --spectrum-silver-1100-rgb:169, 169, 169; + --spectrum-silver-1100:rgba(var(--spectrum-silver-1100-rgb)); + --spectrum-silver-1200-rgb:190, 190, 190; + --spectrum-silver-1200:rgba(var(--spectrum-silver-1200-rgb)); + --spectrum-silver-1300-rgb:211, 211, 211; + --spectrum-silver-1300:rgba(var(--spectrum-silver-1300-rgb)); + --spectrum-silver-1400-rgb:229, 229, 229; + --spectrum-silver-1400:rgba(var(--spectrum-silver-1400-rgb)); + --spectrum-silver-1500-rgb:244, 244, 244; + --spectrum-silver-1500:rgba(var(--spectrum-silver-1500-rgb)); + --spectrum-silver-1600-rgb:255, 255, 255; + --spectrum-silver-1600:rgba(var(--spectrum-silver-1600-rgb)); + --spectrum-cinnamon-100-rgb:48, 17, 4; + --spectrum-cinnamon-100:rgba(var(--spectrum-cinnamon-100-rgb)); + --spectrum-cinnamon-200-rgb:59, 21, 5; + --spectrum-cinnamon-200:rgba(var(--spectrum-cinnamon-200-rgb)); + --spectrum-cinnamon-300-rgb:79, 28, 7; + --spectrum-cinnamon-300:rgba(var(--spectrum-cinnamon-300-rgb)); + --spectrum-cinnamon-400-rgb:100, 41, 15; + --spectrum-cinnamon-400:rgba(var(--spectrum-cinnamon-400-rgb)); + --spectrum-cinnamon-500-rgb:122, 57, 28; + --spectrum-cinnamon-500:rgba(var(--spectrum-cinnamon-500-rgb)); + --spectrum-cinnamon-600-rgb:143, 74, 40; + --spectrum-cinnamon-600:rgba(var(--spectrum-cinnamon-600-rgb)); + --spectrum-cinnamon-700-rgb:163, 88, 52; + --spectrum-cinnamon-700:rgba(var(--spectrum-cinnamon-700-rgb)); + --spectrum-cinnamon-800-rgb:179, 103, 64; + --spectrum-cinnamon-800:rgba(var(--spectrum-cinnamon-800-rgb)); + --spectrum-cinnamon-900-rgb:192, 119, 80; + --spectrum-cinnamon-900:rgba(var(--spectrum-cinnamon-900-rgb)); + --spectrum-cinnamon-1000-rgb:206, 136, 99; + --spectrum-cinnamon-1000:rgba(var(--spectrum-cinnamon-1000-rgb)); + --spectrum-cinnamon-1100-rgb:220, 154, 118; + --spectrum-cinnamon-1100:rgba(var(--spectrum-cinnamon-1100-rgb)); + --spectrum-cinnamon-1200-rgb:232, 179, 149; + --spectrum-cinnamon-1200:rgba(var(--spectrum-cinnamon-1200-rgb)); + --spectrum-cinnamon-1300-rgb:239, 203, 183; + --spectrum-cinnamon-1300:rgba(var(--spectrum-cinnamon-1300-rgb)); + --spectrum-cinnamon-1400-rgb:246, 225, 214; + --spectrum-cinnamon-1400:rgba(var(--spectrum-cinnamon-1400-rgb)); + --spectrum-cinnamon-1500-rgb:252, 244, 239; + --spectrum-cinnamon-1500:rgba(var(--spectrum-cinnamon-1500-rgb)); + --spectrum-cinnamon-1600-rgb:255, 255, 255; + --spectrum-cinnamon-1600:rgba(var(--spectrum-cinnamon-1600-rgb)); + --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-800); + --spectrum-icon-color-green-primary-default:var(--spectrum-green-800); + --spectrum-icon-color-red-primary-default:var(--spectrum-red-700); + --spectrum-icon-color-yellow-primary-default:var(--spectrum-yellow-1000); + --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-900-rgb); + --spectrum-dropindicator-color:var(--spectrum-blue-700); + + --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); + --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-white-rgb), 0.07); + --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-down:var(--spectrum-transparent-white-200); + --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.07); + --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-700); + + --spectrum-badge-label-icon-color-primary:var(--spectrum-black); + + --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-700); + + --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-700); + + --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.07); + --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); + + --spectrum-logic-button-and-background-color:var(--spectrum-blue-800); + --spectrum-logic-button-and-border-color:var(--spectrum-blue-800); + --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1000); + --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1000); + + --spectrum-logic-button-or-background-color:var(--spectrum-magenta-700); + --spectrum-logic-button-or-border-color:var(--spectrum-magenta-700); + --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-900); + + --spectrum-assetcard-border-color-selected:var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-900); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-800); + --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-700); + + --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); + --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700); + + --spectrum-card-selected-background-color-rgb:var(--spectrum-blue-500-rgb); +} diff --git a/tokens/dist/css/global-vars.css b/tokens/dist/css/global-vars.css new file mode 100644 index 00000000000..7ae83cb3b11 --- /dev/null +++ b/tokens/dist/css/global-vars.css @@ -0,0 +1,735 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum{ + --spectrum-focus-indicator-color:var(--spectrum-blue-800); + --spectrum-static-white-focus-indicator-color:var(--spectrum-white); + --spectrum-static-black-focus-indicator-color:var(--spectrum-black); + --spectrum-overlay-color:var(--spectrum-black); + --spectrum-drop-shadow-color:var(--spectrum-drop-shadow-color-100); + --spectrum-opacity-disabled:0.3; + --spectrum-background-base-color:var(--spectrum-gray-25); + --spectrum-background-layer-1-color:var(--spectrum-gray-50); + --spectrum-neutral-background-color-default:var(--spectrum-gray-800); + --spectrum-neutral-background-color-hover:var(--spectrum-gray-900); + --spectrum-neutral-background-color-down:var(--spectrum-gray-900); + --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-800); + --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-900); + --spectrum-neutral-subdued-content-color-selected:var(--spectrum-neutral-subdued-content-color-down); + --spectrum-accent-content-color-selected:var(--spectrum-accent-content-color-down); + --spectrum-disabled-background-color:var(--spectrum-gray-100); + --spectrum-disabled-static-white-background-color:var(--spectrum-transparent-white-100); + --spectrum-disabled-static-black-background-color:var(--spectrum-transparent-black-100); + --spectrum-background-opacity-default:0; + --spectrum-background-opacity-hover:0.1; + --spectrum-background-opacity-down:0.1; + --spectrum-background-opacity-key-focus:0.1; + --spectrum-neutral-content-color-default:var(--spectrum-gray-800); + --spectrum-neutral-content-color-hover:var(--spectrum-gray-900); + --spectrum-neutral-content-color-down:var(--spectrum-gray-900); + --spectrum-neutral-content-color-focus-hover:var(--spectrum-neutral-content-color-down); + --spectrum-neutral-content-color-focus:var(--spectrum-neutral-content-color-down); + --spectrum-neutral-content-color-key-focus:var(--spectrum-gray-900); + --spectrum-neutral-subdued-content-color-default:var(--spectrum-gray-700); + --spectrum-neutral-subdued-content-color-hover:var(--spectrum-gray-800); + --spectrum-neutral-subdued-content-color-down:var(--spectrum-gray-800); + --spectrum-neutral-subdued-content-color-key-focus:var(--spectrum-gray-800); + --spectrum-accent-content-color-default:var(--spectrum-accent-color-900); + --spectrum-accent-content-color-hover:var(--spectrum-accent-color-1000); + --spectrum-accent-content-color-down:var(--spectrum-accent-color-1000); + --spectrum-accent-content-color-key-focus:var(--spectrum-accent-color-1000); + --spectrum-negative-content-color-default:var(--spectrum-negative-color-900); + --spectrum-negative-content-color-hover:var(--spectrum-negative-color-1000); + --spectrum-negative-content-color-down:var(--spectrum-negative-color-1000); + --spectrum-negative-content-color-key-focus:var(--spectrum-negative-color-1000); + --spectrum-disabled-content-color:var(--spectrum-gray-400); + --spectrum-disabled-static-white-content-color:var(--spectrum-transparent-white-400); + --spectrum-disabled-static-black-content-color:var(--spectrum-transparent-black-400); + --spectrum-disabled-border-color:var(--spectrum-gray-300); + --spectrum-disabled-static-white-border-color:var(--spectrum-transparent-white-300); + --spectrum-disabled-static-black-border-color:var(--spectrum-transparent-black-300); + --spectrum-negative-border-color-default:var(--spectrum-negative-color-900); + --spectrum-negative-border-color-hover:var(--spectrum-negative-color-1000); + --spectrum-negative-border-color-down:var(--spectrum-negative-color-1100); + --spectrum-negative-border-color-focus-hover:var(--spectrum-negative-border-color-down); + --spectrum-negative-border-color-focus:var(--spectrum-negative-color-1000); + --spectrum-negative-border-color-key-focus:var(--spectrum-negative-color-1000); + --spectrum-title-color:var(--spectrum-gray-900); + --spectrum-drop-shadow-emphasized-default-color:var(--spectrum-drop-shadow-color-100); + --spectrum-drop-shadow-emphasized-hover-color:var(--spectrum-drop-shadow-color-200); + --spectrum-drop-shadow-elevated-color:var(--spectrum-drop-shadow-color-200); + --spectrum-swatch-border-color:var(--spectrum-gray-900); + --spectrum-swatch-border-opacity:0.51; + --spectrum-swatch-disabled-icon-border-color:var(--spectrum-black); + --spectrum-swatch-disabled-icon-border-opacity:0.51; + --spectrum-thumbnail-border-color:var(--spectrum-gray-800); + --spectrum-thumbnail-border-opacity:0.1; + --spectrum-thumbnail-opacity-disabled:var(--spectrum-opacity-disabled); + --spectrum-opacity-checkerboard-square-light:var(--spectrum-white); + --spectrum-avatar-opacity-disabled:var(--spectrum-opacity-disabled); + --spectrum-color-area-border-color:var(--spectrum-gray-900); + --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-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-drop-zone-background-color:var(--spectrum-accent-visual-color); + --spectrum-drop-zone-background-color-opacity:0.1; + --spectrum-drop-zone-background-color-opacity-filled:0.3; + --spectrum-coach-mark-pagination-color:var(--spectrum-gray-600); + --spectrum-color-handle-inner-border-color:var(--spectrum-black); + --spectrum-color-handle-inner-border-opacity:0.42; + --spectrum-color-handle-outer-border-color:var(--spectrum-black); + --spectrum-color-handle-outer-border-opacity:var(--spectrum-color-handle-inner-border-opacity); + --spectrum-color-handle-drop-shadow-color:var(--spectrum-drop-shadow-color); + --spectrum-floating-action-button-drop-shadow-color:var(--spectrum-transparent-black-300); + --spectrum-floating-action-button-shadow-color:var(--spectrum-floating-action-button-drop-shadow-color); + --spectrum-table-row-hover-color:var(--spectrum-gray-900); + --spectrum-table-row-hover-opacity:0.07; + --spectrum-table-selected-row-background-color:var(--spectrum-informative-background-color-default); + --spectrum-table-selected-row-background-opacity:0.1; + --spectrum-table-selected-row-background-color-non-emphasized:var(--spectrum-neutral-background-color-selected-default); + --spectrum-table-selected-row-background-opacity-non-emphasized:0.1; + --spectrum-table-row-down-opacity:0.1; + --spectrum-table-selected-row-background-opacity-hover:0.15; + --spectrum-table-selected-row-background-opacity-non-emphasized-hover:0.15; + --spectrum-white-rgb:255, 255, 255; + --spectrum-white:rgba(var(--spectrum-white-rgb)); + --spectrum-transparent-white-25-rgb:255, 255, 255; + --spectrum-transparent-white-25-opacity:0; + --spectrum-transparent-white-25:rgba(var(--spectrum-transparent-white-25-rgb), var(--spectrum-transparent-white-25-opacity)); + --spectrum-transparent-white-50-rgb:255, 255, 255; + --spectrum-transparent-white-50-opacity:0.04; + --spectrum-transparent-white-50:rgba(var(--spectrum-transparent-white-50-rgb), var(--spectrum-transparent-white-50-opacity)); + --spectrum-transparent-white-75-rgb:255, 255, 255; + --spectrum-transparent-white-75-opacity:0.07; + --spectrum-transparent-white-75:rgba(var(--spectrum-transparent-white-75-rgb), var(--spectrum-transparent-white-75-opacity)); + --spectrum-transparent-white-100-rgb:255, 255, 255; + --spectrum-transparent-white-100-opacity:0.11; + --spectrum-transparent-white-100:rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity)); + --spectrum-transparent-white-200-rgb:255, 255, 255; + --spectrum-transparent-white-200-opacity:0.14; + --spectrum-transparent-white-200:rgba(var(--spectrum-transparent-white-200-rgb), var(--spectrum-transparent-white-200-opacity)); + --spectrum-transparent-white-300-rgb:255, 255, 255; + --spectrum-transparent-white-300-opacity:0.17; + --spectrum-transparent-white-300:rgba(var(--spectrum-transparent-white-300-rgb), var(--spectrum-transparent-white-300-opacity)); + --spectrum-transparent-white-400-rgb:255, 255, 255; + --spectrum-transparent-white-400-opacity:0.21; + --spectrum-transparent-white-400:rgba(var(--spectrum-transparent-white-400-rgb), var(--spectrum-transparent-white-400-opacity)); + --spectrum-transparent-white-500-rgb:255, 255, 255; + --spectrum-transparent-white-500-opacity:0.39; + --spectrum-transparent-white-500:rgba(var(--spectrum-transparent-white-500-rgb), var(--spectrum-transparent-white-500-opacity)); + --spectrum-transparent-white-600-rgb:255, 255, 255; + --spectrum-transparent-white-600-opacity:0.51; + --spectrum-transparent-white-600:rgba(var(--spectrum-transparent-white-600-rgb), var(--spectrum-transparent-white-600-opacity)); + --spectrum-transparent-white-700-rgb:255, 255, 255; + --spectrum-transparent-white-700-opacity:0.66; + --spectrum-transparent-white-700:rgba(var(--spectrum-transparent-white-700-rgb), var(--spectrum-transparent-white-700-opacity)); + --spectrum-transparent-white-800-rgb:255, 255, 255; + --spectrum-transparent-white-800-opacity:0.85; + --spectrum-transparent-white-800:rgba(var(--spectrum-transparent-white-800-rgb), var(--spectrum-transparent-white-800-opacity)); + --spectrum-transparent-white-900-rgb:255, 255, 255; + --spectrum-transparent-white-900-opacity:0.94; + --spectrum-transparent-white-900:rgba(var(--spectrum-transparent-white-900-rgb), var(--spectrum-transparent-white-900-opacity)); + --spectrum-transparent-white-1000-rgb:255, 255, 255; + --spectrum-transparent-white-1000:rgba(var(--spectrum-transparent-white-1000-rgb)); + --spectrum-black-rgb:0, 0, 0; + --spectrum-black:rgba(var(--spectrum-black-rgb)); + --spectrum-transparent-black-25-rgb:0, 0, 0; + --spectrum-transparent-black-25-opacity:0; + --spectrum-transparent-black-25:rgba(var(--spectrum-transparent-black-25-rgb), var(--spectrum-transparent-black-25-opacity)); + --spectrum-transparent-black-50-rgb:0, 0, 0; + --spectrum-transparent-black-50-opacity:0.03; + --spectrum-transparent-black-50:rgba(var(--spectrum-transparent-black-50-rgb), var(--spectrum-transparent-black-50-opacity)); + --spectrum-transparent-black-75-rgb:0, 0, 0; + --spectrum-transparent-black-75-opacity:0.05; + --spectrum-transparent-black-75:rgba(var(--spectrum-transparent-black-75-rgb), var(--spectrum-transparent-black-75-opacity)); + --spectrum-transparent-black-100-rgb:0, 0, 0; + --spectrum-transparent-black-100-opacity:0.09; + --spectrum-transparent-black-100:rgba(var(--spectrum-transparent-black-100-rgb), var(--spectrum-transparent-black-100-opacity)); + --spectrum-transparent-black-200-rgb:0, 0, 0; + --spectrum-transparent-black-200-opacity:0.12; + --spectrum-transparent-black-200:rgba(var(--spectrum-transparent-black-200-rgb), var(--spectrum-transparent-black-200-opacity)); + --spectrum-transparent-black-300-rgb:0, 0, 0; + --spectrum-transparent-black-300-opacity:0.15; + --spectrum-transparent-black-300:rgba(var(--spectrum-transparent-black-300-rgb), var(--spectrum-transparent-black-300-opacity)); + --spectrum-transparent-black-400-rgb:0, 0, 0; + --spectrum-transparent-black-400-opacity:0.22; + --spectrum-transparent-black-400:rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity)); + --spectrum-transparent-black-500-rgb:0, 0, 0; + --spectrum-transparent-black-500-opacity:0.44; + --spectrum-transparent-black-500:rgba(var(--spectrum-transparent-black-500-rgb), var(--spectrum-transparent-black-500-opacity)); + --spectrum-transparent-black-600-rgb:0, 0, 0; + --spectrum-transparent-black-600-opacity:0.56; + --spectrum-transparent-black-600:rgba(var(--spectrum-transparent-black-600-rgb), var(--spectrum-transparent-black-600-opacity)); + --spectrum-transparent-black-700-rgb:0, 0, 0; + --spectrum-transparent-black-700-opacity:0.69; + --spectrum-transparent-black-700:rgba(var(--spectrum-transparent-black-700-rgb), var(--spectrum-transparent-black-700-opacity)); + --spectrum-transparent-black-800-rgb:0, 0, 0; + --spectrum-transparent-black-800-opacity:0.84; + --spectrum-transparent-black-800:rgba(var(--spectrum-transparent-black-800-rgb), var(--spectrum-transparent-black-800-opacity)); + --spectrum-transparent-black-900-rgb:0, 0, 0; + --spectrum-transparent-black-900-opacity:0.93; + --spectrum-transparent-black-900:rgba(var(--spectrum-transparent-black-900-rgb), var(--spectrum-transparent-black-900-opacity)); + --spectrum-transparent-black-1000-rgb:0, 0, 0; + --spectrum-transparent-black-1000:rgba(var(--spectrum-transparent-black-1000-rgb)); + --spectrum-icon-color-inverse:var(--spectrum-gray-50); + --spectrum-icon-color-primary-default:var(--spectrum-neutral-content-color-default); + --spectrum-asterisk-icon-size-75:8px; + --spectrum-radio-button-selection-indicator:4px; + --spectrum-field-label-top-margin-small:0px; + --spectrum-field-label-to-component:0px; + --spectrum-help-text-to-component:0px; + --spectrum-status-light-dot-size-small:8px; + --spectrum-action-button-edge-to-hold-icon-extra-small:3px; + --spectrum-action-button-edge-to-hold-icon-small:3px; + --spectrum-button-minimum-width-multiplier:2.25; + --spectrum-divider-thickness-small:1px; + --spectrum-divider-thickness-medium:2px; + --spectrum-divider-thickness-large:4px; + --spectrum-swatch-rectangle-width-multiplier:2; + --spectrum-swatch-slash-thickness-extra-small:2px; + --spectrum-swatch-slash-thickness-small:3px; + --spectrum-swatch-slash-thickness-medium:4px; + --spectrum-swatch-slash-thickness-large:5px; + --spectrum-progress-bar-minimum-width:48px; + --spectrum-progress-bar-maximum-width:768px; + --spectrum-meter-minimum-width:48px; + --spectrum-meter-maximum-width:768px; + --spectrum-meter-default-width:var(--spectrum-meter-width); + --spectrum-in-line-alert-minimum-width:240px; + --spectrum-popover-tip-width:16px; + --spectrum-popover-tip-height:8px; + --spectrum-menu-item-label-to-description:1px; + --spectrum-menu-item-section-divider-height:8px; + --spectrum-slider-track-thickness:2px; + --spectrum-slider-handle-gap:4px; + --spectrum-picker-minimum-width-multiplier:2; + --spectrum-picker-border-width:var(--spectrum-border-width-100); + --spectrum-picker-end-edge-to-disclousure-icon-quiet:var(--spectrum-picker-end-edge-to-disclosure-icon-quiet); + --spectrum-picker-end-edge-to-disclosure-icon-quiet:0px; + --spectrum-text-field-minimum-width-multiplier:1.5; + --spectrum-combo-box-minimum-width-multiplier:2.5; + --spectrum-combo-box-quiet-minimum-width-multiplier:2; + --spectrum-combo-box-visual-to-field-button-quiet:0px; + --spectrum-alert-dialog-minimum-width:288px; + --spectrum-alert-dialog-maximum-width:480px; + --spectrum-contextual-help-minimum-width:268px; + --spectrum-breadcrumbs-height:var(--spectrum-component-height-300); + --spectrum-breadcrumbs-height-compact:var(--spectrum-component-height-200); + --spectrum-breadcrumbs-end-edge-to-text:0px; + --spectrum-breadcrumbs-truncated-menu-to-separator-icon:0px; + --spectrum-breadcrumbs-start-edge-to-truncated-menu:0px; + --spectrum-breadcrumbs-truncated-menu-to-bottom-text:0px; + --spectrum-alert-banner-to-top-workflow-icon:var(--spectrum-alert-banner-top-to-workflow-icon); + --spectrum-alert-banner-to-top-text:var(--spectrum-alert-banner-top-to-text); + --spectrum-alert-banner-to-bottom-text:var(--spectrum-alert-banner-bottom-to-text); + --spectrum-color-area-border-width:var(--spectrum-border-width-100); + --spectrum-color-area-border-rounding:var(--spectrum-corner-radius-medium-size-small); + --spectrum-color-wheel-color-area-margin:12px; + --spectrum-color-slider-border-width:1px; + --spectrum-color-slider-border-rounding:var(--spectrum-corner-radius-medium-size-small); + --spectrum-floating-action-button-drop-shadow-blur:12px; + --spectrum-floating-action-button-drop-shadow-y:4px; + --spectrum-illustrated-message-maximum-width:380px; + --spectrum-search-field-minimum-width-multiplier:3; + --spectrum-color-loupe-height:64px; + --spectrum-color-loupe-width:48px; + --spectrum-color-loupe-bottom-to-color-handle:12px; + --spectrum-color-loupe-outer-border-width:var(--spectrum-border-width-200); + --spectrum-color-loupe-inner-border-width:1px; + --spectrum-color-loupe-drop-shadow-y:2px; + --spectrum-color-loupe-drop-shadow-blur:8px; + --spectrum-card-minimum-width:100px; + --spectrum-card-preview-minimum-height:130px; + --spectrum-card-selection-background-size:40px; + --spectrum-drop-zone-width:428px; + --spectrum-drop-zone-content-maximum-width:var(--spectrum-illustrated-message-maximum-width); + --spectrum-drop-zone-border-dash-length:8px; + --spectrum-drop-zone-border-dash-gap:4px; + --spectrum-drop-zone-title-size:var(--spectrum-illustrated-message-title-size); + --spectrum-drop-zone-cjk-title-size:var(--spectrum-illustrated-message-cjk-title-size); + --spectrum-drop-zone-body-size:var(--spectrum-illustrated-message-body-size); + --spectrum-accordion-top-to-text-compact-small:2px; + --spectrum-accordion-top-to-text-compact-medium:4px; + --spectrum-accordion-disclosure-indicator-to-text:0px; + --spectrum-accordion-edge-to-disclosure-indicator:0px; + --spectrum-accordion-edge-to-text:0px; + --spectrum-accordion-focus-indicator-gap:0px; + --spectrum-color-handle-border-width:var(--spectrum-border-width-200); + --spectrum-color-handle-inner-border-width:1px; + --spectrum-color-handle-outer-border-width:1px; + --spectrum-color-handle-drop-shadow-x:0; + --spectrum-color-handle-drop-shadow-y:0; + --spectrum-color-handle-drop-shadow-blur:0; + --spectrum-table-row-height-small-compact:var(--spectrum-component-height-75); + --spectrum-table-row-height-medium-compact:var(--spectrum-component-height-100); + --spectrum-table-row-height-large-compact:var(--spectrum-component-height-200); + --spectrum-table-row-height-extra-large-compact:var(--spectrum-component-height-300); + --spectrum-table-row-top-to-text-small-compact:var(--spectrum-component-top-to-text-75); + --spectrum-table-row-top-to-text-medium-compact:var(--spectrum-component-top-to-text-100); + --spectrum-table-row-top-to-text-large-compact:var(--spectrum-component-top-to-text-200); + --spectrum-table-row-top-to-text-extra-large-compact:var(--spectrum-component-top-to-text-300); + --spectrum-table-row-bottom-to-text-small-compact:var(--spectrum-component-bottom-to-text-75); + --spectrum-table-row-bottom-to-text-medium-compact:var(--spectrum-component-bottom-to-text-100); + --spectrum-table-row-bottom-to-text-large-compact:var(--spectrum-component-bottom-to-text-200); + --spectrum-table-row-bottom-to-text-extra-large-compact:var(--spectrum-component-bottom-to-text-300); + --spectrum-table-edge-to-content:16px; + --spectrum-table-border-divider-width:1px; + --spectrum-tab-item-height-small:var(--spectrum-component-height-200); + --spectrum-tab-item-height-medium:var(--spectrum-component-height-300); + --spectrum-tab-item-height-large:var(--spectrum-component-height-400); + --spectrum-tab-item-height-extra-large:var(--spectrum-component-height-500); + --spectrum-tab-item-compact-height-small:var(--spectrum-component-height-75); + --spectrum-tab-item-compact-height-medium:var(--spectrum-component-height-100); + --spectrum-tab-item-compact-height-large:var(--spectrum-component-height-200); + --spectrum-tab-item-compact-height-extra-large:var(--spectrum-component-height-300); + --spectrum-tab-item-start-to-edge-quiet:0px; + --spectrum-in-field-button-width-stacked-small:20px; + --spectrum-in-field-button-width-stacked-medium:28px; + --spectrum-in-field-button-width-stacked-large:36px; + --spectrum-in-field-button-width-stacked-extra-large:44px; + --spectrum-in-field-button-fill-stacked-inner-border-rounding:0px; + --spectrum-in-field-button-edge-to-fill:0px; + --spectrum-in-field-button-stacked-inner-edge-to-fill:0px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small:7px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium:9px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large:13px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large:16px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small:3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:4px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:5px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); + --spectrum-corner-radius-0:0px; + --spectrum-corner-radius-75:3px; + --spectrum-corner-radius-100:4px; + --spectrum-corner-radius-200:5px; + --spectrum-corner-radius-300:6px; + --spectrum-corner-radius-400:7px; + --spectrum-corner-radius-500:8px; + --spectrum-corner-radius-600:9px; + --spectrum-corner-radius-700:10px; + --spectrum-corner-radius-800:16px; + --spectrum-corner-radius-1000:0.5; + --spectrum-corner-radius-none:var(--spectrum-corner-radius-0); + --spectrum-corner-radius-small-default:var(--spectrum-corner-radius-100); + --spectrum-corner-radius-medium-default:var(--spectrum-corner-radius-500); + --spectrum-corner-radius-large-default:var(--spectrum-corner-radius-700); + --spectrum-corner-radius-extra-large-default:var(--spectrum-corner-radius-800); + --spectrum-corner-radius-full:var(--spectrum-corner-radius-1000); + --spectrum-corner-radius-small-size-small:var(--spectrum-corner-radius-75); + --spectrum-corner-radius-small-size-medium:var(--spectrum-corner-radius-100); + --spectrum-corner-radius-small-size-large:var(--spectrum-corner-radius-200); + --spectrum-corner-radius-small-size-extra-large:var(--spectrum-corner-radius-300); + --spectrum-corner-radius-medium-size-extra-small:var(--spectrum-corner-radius-300); + --spectrum-corner-radius-medium-size-small:var(--spectrum-corner-radius-400); + --spectrum-corner-radius-medium-size-medium:var(--spectrum-corner-radius-500); + --spectrum-corner-radius-medium-size-large:var(--spectrum-corner-radius-600); + --spectrum-corner-radius-medium-size-extra-large:var(--spectrum-corner-radius-700); + --spectrum-drop-shadow-x:0px; + --spectrum-android-elevation:2dp; + --spectrum-spacing-50:2px; + --spectrum-spacing-75:4px; + --spectrum-spacing-100:8px; + --spectrum-spacing-200:12px; + --spectrum-spacing-300:16px; + --spectrum-spacing-400:24px; + --spectrum-spacing-500:32px; + --spectrum-spacing-600:40px; + --spectrum-spacing-700:48px; + --spectrum-spacing-800:64px; + --spectrum-spacing-900:80px; + --spectrum-spacing-1000:96px; + --spectrum-focus-indicator-thickness:2px; + --spectrum-focus-indicator-gap:2px; + --spectrum-border-width-100:1px; + --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; + --spectrum-text-underline-thickness:1px; + --spectrum-text-underline-gap:1px; + --spectrum-accent-color-100:var(--spectrum-blue-100); + --spectrum-accent-color-200:var(--spectrum-blue-200); + --spectrum-accent-color-300:var(--spectrum-blue-300); + --spectrum-accent-color-400:var(--spectrum-blue-400); + --spectrum-accent-color-500:var(--spectrum-blue-500); + --spectrum-accent-color-600:var(--spectrum-blue-600); + --spectrum-accent-color-700:var(--spectrum-blue-700); + --spectrum-accent-color-800:var(--spectrum-blue-800); + --spectrum-accent-color-900:var(--spectrum-blue-900); + --spectrum-accent-color-1000:var(--spectrum-blue-1000); + --spectrum-accent-color-1100:var(--spectrum-blue-1100); + --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-accent-color-1500:var(--spectrum-blue-1500); + --spectrum-accent-color-1600:var(--spectrum-blue-1600); + --spectrum-informative-color-100:var(--spectrum-blue-100); + --spectrum-informative-color-200:var(--spectrum-blue-200); + --spectrum-informative-color-300:var(--spectrum-blue-300); + --spectrum-informative-color-400:var(--spectrum-blue-400); + --spectrum-informative-color-500:var(--spectrum-blue-500); + --spectrum-informative-color-600:var(--spectrum-blue-600); + --spectrum-informative-color-700:var(--spectrum-blue-700); + --spectrum-informative-color-800:var(--spectrum-blue-800); + --spectrum-informative-color-900:var(--spectrum-blue-900); + --spectrum-informative-color-1000:var(--spectrum-blue-1000); + --spectrum-informative-color-1100:var(--spectrum-blue-1100); + --spectrum-informative-color-1200:var(--spectrum-blue-1200); + --spectrum-informative-color-1300:var(--spectrum-blue-1300); + --spectrum-informative-color-1400:var(--spectrum-blue-1400); + --spectrum-informative-color-1500:var(--spectrum-blue-1500); + --spectrum-informative-color-1600:var(--spectrum-blue-1600); + --spectrum-negative-color-100:var(--spectrum-red-100); + --spectrum-negative-color-200:var(--spectrum-red-200); + --spectrum-negative-color-300:var(--spectrum-red-300); + --spectrum-negative-color-400:var(--spectrum-red-400); + --spectrum-negative-color-500:var(--spectrum-red-500); + --spectrum-negative-color-600:var(--spectrum-red-600); + --spectrum-negative-color-700:var(--spectrum-red-700); + --spectrum-negative-color-800:var(--spectrum-red-800); + --spectrum-negative-color-900:var(--spectrum-red-900); + --spectrum-negative-color-1000:var(--spectrum-red-1000); + --spectrum-negative-color-1100:var(--spectrum-red-1100); + --spectrum-negative-color-1200:var(--spectrum-red-1200); + --spectrum-negative-color-1300:var(--spectrum-red-1300); + --spectrum-negative-color-1400:var(--spectrum-red-1400); + --spectrum-negative-color-1500:var(--spectrum-red-1500); + --spectrum-negative-color-1600:var(--spectrum-red-1600); + --spectrum-notice-color-100:var(--spectrum-orange-100); + --spectrum-notice-color-200:var(--spectrum-orange-200); + --spectrum-notice-color-300:var(--spectrum-orange-300); + --spectrum-notice-color-400:var(--spectrum-orange-400); + --spectrum-notice-color-500:var(--spectrum-orange-500); + --spectrum-notice-color-600:var(--spectrum-orange-600); + --spectrum-notice-color-700:var(--spectrum-orange-700); + --spectrum-notice-color-800:var(--spectrum-orange-800); + --spectrum-notice-color-900:var(--spectrum-orange-900); + --spectrum-notice-color-1000:var(--spectrum-orange-1000); + --spectrum-notice-color-1100:var(--spectrum-orange-1100); + --spectrum-notice-color-1200:var(--spectrum-orange-1200); + --spectrum-notice-color-1300:var(--spectrum-orange-1300); + --spectrum-notice-color-1400:var(--spectrum-orange-1400); + --spectrum-notice-color-1500:var(--spectrum-orange-1500); + --spectrum-notice-color-1600:var(--spectrum-orange-1600); + --spectrum-positive-color-100:var(--spectrum-green-100); + --spectrum-positive-color-200:var(--spectrum-green-200); + --spectrum-positive-color-300:var(--spectrum-green-300); + --spectrum-positive-color-400:var(--spectrum-green-400); + --spectrum-positive-color-500:var(--spectrum-green-500); + --spectrum-positive-color-600:var(--spectrum-green-600); + --spectrum-positive-color-700:var(--spectrum-green-700); + --spectrum-positive-color-800:var(--spectrum-green-800); + --spectrum-positive-color-900:var(--spectrum-green-900); + --spectrum-positive-color-1000:var(--spectrum-green-1000); + --spectrum-positive-color-1100:var(--spectrum-green-1100); + --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-positive-color-1500:var(--spectrum-green-1500); + --spectrum-positive-color-1600:var(--spectrum-green-1600); + --spectrum-negative-subdued-background-color-default:var(--spectrum-negative-color-200); + --spectrum-negative-subdued-background-color-hover:var(--spectrum-negative-color-300); + --spectrum-negative-subdued-background-color-down:var(--spectrum-negative-color-300); + --spectrum-negative-subdued-background-color-key-focus:var(--spectrum-negative-color-300); + --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:300; + --spectrum-regular-font-weight:400; + --spectrum-medium-font-weight:500; + --spectrum-bold-font-weight:700; + --spectrum-extra-bold-font-weight:800; + --spectrum-black-font-weight:900; + --spectrum-italic-font-style:italic; + --spectrum-default-font-style:normal; + --spectrum-line-height-100:1.3; + --spectrum-line-height-200:1.5; + --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-sans-serif-font-family); + --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-light-font-weight); + --spectrum-heading-sans-serif-light-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-light-font-weight:var(--spectrum-regular-font-weight); + --spectrum-heading-serif-light-font-style:var(--spectrum-default-font-style); + --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-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-sans-serif-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-serif-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-heading-cjk-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-heavy-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-font-style:var(--spectrum-default-font-style); + --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-bold-font-weight); + --spectrum-heading-sans-serif-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-light-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-serif-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-light-strong-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-heading-cjk-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-heavy-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-heavy-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-light-emphasized-font-weight:var(--spectrum-light-font-weight); + --spectrum-heading-sans-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-heading-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-heading-cjk-light-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-heavy-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-heavy-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-light-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-sans-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-light-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-light-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-heading-cjk-light-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-heavy-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-heavy-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-size-xxxl:var(--spectrum-font-size-1300); + --spectrum-heading-size-xxl:var(--spectrum-font-size-1100); + --spectrum-heading-size-xl:var(--spectrum-font-size-900); + --spectrum-heading-size-l:var(--spectrum-font-size-700); + --spectrum-heading-size-m:var(--spectrum-font-size-500); + --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-cjk-line-height:var(--spectrum-cjk-line-height-100); + --spectrum-heading-margin-top-multiplier:0.88888889; + --spectrum-heading-margin-bottom-multiplier:0.25; + --spectrum-heading-color:var(--spectrum-gray-900); + --spectrum-body-sans-serif-font-family:var(--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-bold-font-weight); + --spectrum-body-sans-serif-strong-font-style:var(--spectrum-default-font-style); + --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-regular-font-weight); + --spectrum-body-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-body-serif-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-body-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-body-cjk-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-body-cjk-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-body-sans-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-body-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-body-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-body-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-body-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-body-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-body-size-xxxl:var(--spectrum-font-size-600); + --spectrum-body-size-xxl:var(--spectrum-font-size-500); + --spectrum-body-size-xl:var(--spectrum-font-size-400); + --spectrum-body-size-l:var(--spectrum-font-size-300); + --spectrum-body-size-m:var(--spectrum-font-size-200); + --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-cjk-line-height:var(--spectrum-cjk-line-height-200); + --spectrum-body-margin-multiplier:0.75; + --spectrum-body-color:var(--spectrum-gray-800); + --spectrum-detail-sans-serif-font-family:var(--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-regular-font-weight); + --spectrum-detail-sans-serif-light-font-style:var(--spectrum-default-font-style); + --spectrum-detail-serif-light-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-font-style:var(--spectrum-default-font-style); + --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-bold-font-weight); + --spectrum-detail-sans-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-serif-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-serif-strong-font-style:var(--spectrum-default-font-style); + --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-regular-font-weight); + --spectrum-detail-sans-serif-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-serif-light-strong-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-cjk-light-strong-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-detail-cjk-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-cjk-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-detail-cjk-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-sans-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-serif-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-cjk-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-cjk-light-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-detail-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-strong-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-sans-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-serif-light-strong-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-cjk-light-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-detail-cjk-light-strong-emphasized-font-style:var(--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-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-detail-sans-serif-text-transform:uppercase; + --spectrum-detail-serif-text-transform:uppercase; + --spectrum-detail-color:var(--spectrum-gray-900); + --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-bold-font-weight); + --spectrum-code-cjk-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-code-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-code-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-code-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-code-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-code-size-xl:var(--spectrum-font-size-400); + --spectrum-code-size-l:var(--spectrum-font-size-300); + --spectrum-code-size-m:var(--spectrum-font-size-200); + --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-cjk-line-height:var(--spectrum-cjk-line-height-200); + --spectrum-code-color:var(--spectrum-gray-800); + --system:spectrum; + + --spectrum-animation-linear:cubic-bezier(0, 0, 1, 1); + --spectrum-animation-duration-0:0ms; + --spectrum-animation-duration-100:130ms; + --spectrum-animation-duration-200:160ms; + --spectrum-animation-duration-300:190ms; + --spectrum-animation-duration-400:220ms; + --spectrum-animation-duration-500:250ms; + --spectrum-animation-duration-600:300ms; + --spectrum-animation-duration-700:350ms; + --spectrum-animation-duration-800:400ms; + --spectrum-animation-duration-900:450ms; + --spectrum-animation-duration-1000:500ms; + --spectrum-animation-duration-2000:1000ms; + --spectrum-animation-duration-4000:2000ms; + --spectrum-animation-duration-6000:3000ms; + --spectrum-animation-ease-in-out:cubic-bezier(0.45, 0, 0.4, 1); + --spectrum-animation-ease-in:cubic-bezier(0.5, 0, 1, 1); + --spectrum-animation-ease-out:cubic-bezier(0, 0, 0.4, 1); + --spectrum-animation-ease-linear:cubic-bezier(0, 0, 1, 1); + + --spectrum-sans-font-family-stack:adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-sans-serif-font:var(--spectrum-sans-font-family-stack); + + --spectrum-serif-font-family-stack:adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif; + --spectrum-serif-font:var(--spectrum-serif-font-family-stack); + + --spectrum-code-font-family-stack:"Source Code Pro", Monaco, monospace; + + --spectrum-cjk-font-family-stack:adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; + --spectrum-cjk-font:var(--spectrum-code-font-family-stack); + --spectrum-docs-static-white-background-color-rgb:15, 121, 125; + --spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb)); + --spectrum-docs-static-black-background-color-rgb:181, 209, 211; + --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); +} diff --git a/tokens/dist/css/index.css b/tokens/dist/css/index.css new file mode 100644 index 00000000000..ad3a9a72846 --- /dev/null +++ b/tokens/dist/css/index.css @@ -0,0 +1,3467 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--dark{ + --spectrum-overlay-opacity:0.6; + --spectrum-background-layer-2-color:var(--spectrum-gray-75); + --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-500); + --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-400); + --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-400); + --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-400); + --spectrum-accent-background-color-default:var(--spectrum-accent-color-700); + --spectrum-accent-background-color-hover:var(--spectrum-accent-color-600); + --spectrum-accent-background-color-down:var(--spectrum-accent-color-600); + --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-600); + --spectrum-informative-background-color-default:var(--spectrum-informative-color-700); + --spectrum-informative-background-color-hover:var(--spectrum-informative-color-600); + --spectrum-informative-background-color-down:var(--spectrum-informative-color-600); + --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-600); + --spectrum-negative-background-color-default:var(--spectrum-negative-color-700); + --spectrum-negative-background-color-hover:var(--spectrum-negative-color-600); + --spectrum-negative-background-color-down:var(--spectrum-negative-color-600); + --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-600); + --spectrum-positive-background-color-default:var(--spectrum-positive-color-700); + --spectrum-positive-background-color-hover:var(--spectrum-positive-color-600); + --spectrum-positive-background-color-down:var(--spectrum-positive-color-600); + --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-600); + --spectrum-notice-background-color-default:var(--spectrum-notice-color-900); + --spectrum-gray-background-color-default:var(--spectrum-gray-500); + --spectrum-red-background-color-default:var(--spectrum-red-700); + --spectrum-orange-background-color-default:var(--spectrum-orange-900); + --spectrum-yellow-background-color-default:var(--spectrum-yellow-1100); + --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-1000); + --spectrum-celery-background-color-default:var(--spectrum-celery-900); + --spectrum-green-background-color-default:var(--spectrum-green-700); + --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-700); + --spectrum-cyan-background-color-default:var(--spectrum-cyan-700); + --spectrum-blue-background-color-default:var(--spectrum-blue-700); + --spectrum-indigo-background-color-default:var(--spectrum-indigo-700); + --spectrum-purple-background-color-default:var(--spectrum-purple-700); + --spectrum-fuchsia-background-color-default:var(--spectrum-fuchsia-700); + --spectrum-magenta-background-color-default:var(--spectrum-magenta-700); + --spectrum-neutral-visual-color:var(--spectrum-gray-600); + --spectrum-accent-visual-color:var(--spectrum-accent-color-900); + --spectrum-informative-visual-color:var(--spectrum-informative-color-900); + --spectrum-negative-visual-color:var(--spectrum-negative-color-700); + --spectrum-notice-visual-color:var(--spectrum-notice-color-900); + --spectrum-positive-visual-color:var(--spectrum-positive-color-800); + --spectrum-gray-visual-color:var(--spectrum-gray-600); + --spectrum-red-visual-color:var(--spectrum-red-700); + --spectrum-orange-visual-color:var(--spectrum-orange-900); + --spectrum-yellow-visual-color:var(--spectrum-yellow-1100); + --spectrum-chartreuse-visual-color:var(--spectrum-chartreuse-900); + --spectrum-celery-visual-color:var(--spectrum-celery-800); + --spectrum-green-visual-color:var(--spectrum-green-800); + --spectrum-seafoam-visual-color:var(--spectrum-seafoam-800); + --spectrum-cyan-visual-color:var(--spectrum-cyan-900); + --spectrum-blue-visual-color:var(--spectrum-blue-900); + --spectrum-indigo-visual-color:var(--spectrum-indigo-900); + --spectrum-purple-visual-color:var(--spectrum-purple-900); + --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-900); + --spectrum-magenta-visual-color:var(--spectrum-magenta-900); + --spectrum-background-elevated-color:var(--spectrum-gray-75); + --spectrum-background-pasteboard-color:var(--spectrum-gray-25); + --spectrum-brown-visual-color:var(--spectrum-brown-900); + --spectrum-cinnamon-visual-color:var(--spectrum-cinnamon-900); + --spectrum-pink-visual-color:var(--spectrum-pink-900); + --spectrum-silver-visual-color:var(--spectrum-silver-900); + --spectrum-turquoise-visual-color:var(--spectrum-turquoise-900); + --spectrum-brown-background-color-default:var(--spectrum-brown-700); + --spectrum-cinnamon-background-color-default:var(--spectrum-cinnamon-700); + --spectrum-pink-background-color-default:var(--spectrum-pink-700); + --spectrum-silver-background-color-default:var(--spectrum-silver-700); + --spectrum-turquoise-background-color-default:var(--spectrum-turquoise-700); + --spectrum-drop-shadow-color-100-rgb:0, 0, 0; + --spectrum-drop-shadow-color-100-opacity:0.36; + --spectrum-drop-shadow-color-100:rgba(var(--spectrum-drop-shadow-color-100-rgb), var(--spectrum-drop-shadow-color-100-opacity)); + --spectrum-drop-shadow-color-200-rgb:0, 0, 0; + --spectrum-drop-shadow-color-200-opacity:0.48; + --spectrum-drop-shadow-color-200:rgba(var(--spectrum-drop-shadow-color-200-rgb), var(--spectrum-drop-shadow-color-200-opacity)); + --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-800); + --spectrum-gray-25-rgb:17, 17, 17; + --spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb)); + --spectrum-gray-50-rgb:27, 27, 27; + --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb:34, 34, 34; + --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb:44, 44, 44; + --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb:50, 50, 50; + --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb:57, 57, 57; + --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb:68, 68, 68; + --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb:109, 109, 109; + --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb:138, 138, 138; + --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb:175, 175, 175; + --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb:219, 219, 219; + --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb:242, 242, 242; + --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); + --spectrum-gray-1000-rgb:255, 255, 255; + --spectrum-gray-1000:rgba(var(--spectrum-gray-1000-rgb)); + --spectrum-blue-100-rgb:14, 23, 63; + --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb:15, 28, 82; + --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb:12, 33, 117; + --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb:18, 45, 154; + --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb:26, 58, 195; + --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb:37, 73, 229; + --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb:52, 91, 248; + --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb:69, 110, 254; + --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb:86, 129, 255; + --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb:105, 149, 254; + --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb:124, 169, 252; + --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb:152, 192, 252; + --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb:181, 213, 253; + --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb:213, 231, 254; + --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-blue-1500-rgb:238, 245, 255; + --spectrum-blue-1500:rgba(var(--spectrum-blue-1500-rgb)); + --spectrum-blue-1600-rgb:255, 255, 255; + --spectrum-blue-1600:rgba(var(--spectrum-blue-1600-rgb)); + --spectrum-red-100-rgb:54, 10, 3; + --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb:68, 13, 5; + --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb:87, 17, 7; + --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb:115, 24, 11; + --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb:147, 31, 17; + --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb:177, 38, 23; + --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb:205, 46, 29; + --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb:230, 54, 35; + --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb:252, 67, 46; + --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb:255, 103, 86; + --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb:255, 134, 120; + --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb:255, 167, 157; + --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb:255, 196, 189; + --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb:255, 222, 219; + --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); + --spectrum-red-1500-rgb:255, 242, 240; + --spectrum-red-1500:rgba(var(--spectrum-red-1500-rgb)); + --spectrum-red-1600-rgb:255, 255, 255; + --spectrum-red-1600:rgba(var(--spectrum-red-1600-rgb)); + --spectrum-orange-100-rgb:49, 16, 0; + --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb:61, 21, 0; + --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb:80, 27, 0; + --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb:106, 36, 0; + --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb:135, 47, 0; + --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb:162, 59, 0; + --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb:185, 73, 0; + --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb:205, 86, 0; + --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb:224, 100, 0; + --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb:243, 117, 0; + --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb:255, 137, 0; + --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb:255, 173, 45; + --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb:255, 201, 116; + --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb:255, 225, 178; + --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-orange-1500-rgb:255, 243, 225; + --spectrum-orange-1500:rgba(var(--spectrum-orange-1500-rgb)); + --spectrum-orange-1600-rgb:255, 255, 255; + --spectrum-orange-1600:rgba(var(--spectrum-orange-1600-rgb)); + --spectrum-yellow-100-rgb:37, 23, 0; + --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb:47, 29, 0; + --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb:61, 39, 0; + --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb:83, 52, 0; + --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb:107, 67, 0; + --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb:130, 82, 0; + --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb:151, 97, 0; + --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb:169, 110, 0; + --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb:186, 124, 0; + --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb:203, 141, 0; + --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb:218, 159, 0; + --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb:235, 183, 0; + --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb:249, 206, 0; + --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb:255, 230, 86; + --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-yellow-1500-rgb:255, 246, 195; + --spectrum-yellow-1500:rgba(var(--spectrum-yellow-1500-rgb)); + --spectrum-yellow-1600-rgb:255, 255, 255; + --spectrum-yellow-1600:rgba(var(--spectrum-yellow-1600-rgb)); + --spectrum-chartreuse-100-rgb:23, 28, 0; + --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb:30, 36, 0; + --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb:39, 47, 0; + --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb:53, 63, 0; + --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb:68, 82, 0; + --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb:83, 100, 0; + --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb:97, 116, 0; + --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb:109, 131, 0; + --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb:122, 147, 0; + --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb:136, 164, 0; + --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb:151, 181, 0; + --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb:169, 203, 0; + --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb:187, 225, 0; + --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb:219, 240, 117; + --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-chartreuse-1500-rgb:242, 249, 206; + --spectrum-chartreuse-1500:rgba(var(--spectrum-chartreuse-1500-rgb)); + --spectrum-chartreuse-1600-rgb:255, 255, 255; + --spectrum-chartreuse-1600:rgba(var(--spectrum-chartreuse-1600-rgb)); + --spectrum-celery-100-rgb:11, 31, 0; + --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb:15, 38, 0; + --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb:21, 51, 1; + --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb:31, 67, 4; + --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb:41, 86, 8; + --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb:50, 105, 11; + --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb:60, 122, 15; + --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb:69, 138, 19; + --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb:78, 154, 23; + --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb:88, 172, 28; + --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb:100, 190, 35; + --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb:116, 213, 46; + --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb:136, 234, 65; + --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb:170, 251, 112; + --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-celery-1500-rgb:222, 255, 198; + --spectrum-celery-1500:rgba(var(--spectrum-celery-1500-rgb)); + --spectrum-celery-1600-rgb:255, 255, 255; + --spectrum-celery-1600:rgba(var(--spectrum-celery-1600-rgb)); + --spectrum-green-100-rgb:0, 30, 23; + --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb:0, 38, 29; + --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb:0, 51, 38; + --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb:0, 68, 48; + --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb:2, 87, 58; + --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb:3, 106, 67; + --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb:4, 124, 75; + --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb:6, 140, 82; + --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb:9, 157, 89; + --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb:14, 175, 98; + --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb:24, 193, 110; + --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb:57, 215, 134; + --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb:126, 231, 172; + --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb:189, 241, 208; + --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); + --spectrum-green-1500-rgb:229, 250, 236; + --spectrum-green-1500:rgba(var(--spectrum-green-1500-rgb)); + --spectrum-green-1600-rgb:255, 255, 255; + --spectrum-green-1600:rgba(var(--spectrum-green-1600-rgb)); + --spectrum-seafoam-100-rgb:0, 30, 27; + --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb:0, 39, 35; + --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb:0, 50, 44; + --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb:0, 67, 59; + --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb:2, 86, 75; + --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb:4, 105, 89; + --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb:6, 122, 103; + --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb:8, 138, 116; + --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb:10, 154, 128; + --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb:12, 173, 142; + --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb:14, 190, 156; + --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb:29, 214, 176; + --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb:122, 229, 203; + --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb:186, 241, 222; + --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-seafoam-1500-rgb:229, 249, 243; + --spectrum-seafoam-1500:rgba(var(--spectrum-seafoam-1500-rgb)); + --spectrum-seafoam-1600-rgb:255, 255, 255; + --spectrum-seafoam-1600:rgba(var(--spectrum-seafoam-1600-rgb)); + --spectrum-cyan-100-rgb:0, 29, 39; + --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb:0, 36, 49; + --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb:0, 48, 65; + --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb:0, 64, 88; + --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb:0, 82, 113; + --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb:3, 99, 140; + --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb:8, 115, 168; + --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb:15, 128, 194; + --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb:24, 142, 220; + --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb:38, 159, 244; + --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb:63, 177, 255; + --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb:107, 199, 255; + --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb:152, 219, 255; + --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb:195, 236, 252; + --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-cyan-1500-rgb:230, 248, 253; + --spectrum-cyan-1500:rgba(var(--spectrum-cyan-1500-rgb)); + --spectrum-cyan-1600-rgb:255, 255, 255; + --spectrum-cyan-1600:rgba(var(--spectrum-cyan-1600-rgb)); + --spectrum-indigo-100-rgb:30, 0, 93; + --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb:35, 0, 110; + --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb:47, 0, 140; + --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb:62, 12, 174; + --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb:79, 30, 209; + --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb:95, 52, 235; + --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb:109, 75, 248; + --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb:119, 97, 252; + --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb:128, 119, 254; + --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb:139, 141, 254; + --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb:153, 161, 255; + --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb:176, 186, 255; + --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb:199, 208, 255; + --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb:223, 228, 255; + --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-indigo-1500-rgb:243, 244, 255; + --spectrum-indigo-1500:rgba(var(--spectrum-indigo-1500-rgb)); + --spectrum-indigo-1600-rgb:255, 255, 255; + --spectrum-indigo-1600:rgba(var(--spectrum-indigo-1600-rgb)); + --spectrum-purple-100-rgb:41, 0, 79; + --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb:50, 0, 96; + --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb:64, 0, 122; + --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb:83, 0, 159; + --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb:107, 6, 195; + --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb:130, 34, 215; + --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb:148, 62, 224; + --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb:161, 84, 229; + --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb:173, 105, 233; + --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb:186, 127, 237; + --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb:197, 149, 240; + --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb:212, 176, 244; + --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb:225, 201, 247; + --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb:238, 224, 250; + --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-purple-1500-rgb:248, 243, 253; + --spectrum-purple-1500:rgba(var(--spectrum-purple-1500-rgb)); + --spectrum-purple-1600-rgb:255, 255, 255; + --spectrum-purple-1600:rgba(var(--spectrum-purple-1600-rgb)); + --spectrum-fuchsia-100-rgb:50, 0, 61; + --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb:61, 0, 74; + --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb:79, 0, 95; + --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb:102, 9, 120; + --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb:127, 23, 146; + --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb:151, 38, 170; + --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb:173, 51, 192; + --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb:192, 64, 212; + --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb:213, 73, 235; + --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb:232, 91, 253; + --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb:240, 122, 255; + --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb:245, 159, 255; + --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb:248, 191, 255; + --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb:251, 219, 255; + --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-fuchsia-1500-rgb:253, 241, 255; + --spectrum-fuchsia-1500:rgba(var(--spectrum-fuchsia-1500-rgb)); + --spectrum-fuchsia-1600-rgb:255, 255, 255; + --spectrum-fuchsia-1600:rgba(var(--spectrum-fuchsia-1600-rgb)); + --spectrum-magenta-100-rgb:59, 0, 22; + --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb:74, 0, 27; + --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb:93, 0, 34; + --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb:123, 0, 45; + --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb:152, 7, 60; + --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb:181, 19, 76; + --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb:207, 31, 92; + --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb:231, 41, 105; + --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb:255, 51, 119; + --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb:255, 96, 149; + --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb:255, 128, 171; + --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb:255, 163, 194; + --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb:255, 193, 214; + --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb:255, 220, 232; + --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-magenta-1500-rgb:255, 241, 246; + --spectrum-magenta-1500:rgba(var(--spectrum-magenta-1500-rgb)); + --spectrum-magenta-1600-rgb:255, 255, 255; + --spectrum-magenta-1600:rgba(var(--spectrum-magenta-1600-rgb)); + --spectrum-pink-100-rgb:58, 0, 37; + --spectrum-pink-100:rgba(var(--spectrum-pink-100-rgb)); + --spectrum-pink-200-rgb:71, 0, 44; + --spectrum-pink-200:rgba(var(--spectrum-pink-200-rgb)); + --spectrum-pink-300-rgb:90, 0, 57; + --spectrum-pink-300:rgba(var(--spectrum-pink-300-rgb)); + --spectrum-pink-400-rgb:115, 7, 75; + --spectrum-pink-400:rgba(var(--spectrum-pink-400-rgb)); + --spectrum-pink-500-rgb:143, 18, 97; + --spectrum-pink-500:rgba(var(--spectrum-pink-500-rgb)); + --spectrum-pink-600-rgb:171, 29, 119; + --spectrum-pink-600:rgba(var(--spectrum-pink-600-rgb)); + --spectrum-pink-700-rgb:196, 39, 138; + --spectrum-pink-700:rgba(var(--spectrum-pink-700-rgb)); + --spectrum-pink-800-rgb:220, 47, 156; + --spectrum-pink-800:rgba(var(--spectrum-pink-800-rgb)); + --spectrum-pink-900-rgb:236, 67, 175; + --spectrum-pink-900:rgba(var(--spectrum-pink-900-rgb)); + --spectrum-pink-1000-rgb:251, 90, 196; + --spectrum-pink-1000:rgba(var(--spectrum-pink-1000-rgb)); + --spectrum-pink-1100-rgb:255, 122, 210; + --spectrum-pink-1100:rgba(var(--spectrum-pink-1100-rgb)); + --spectrum-pink-1200-rgb:255, 159, 223; + --spectrum-pink-1200:rgba(var(--spectrum-pink-1200-rgb)); + --spectrum-pink-1300-rgb:255, 191, 234; + --spectrum-pink-1300:rgba(var(--spectrum-pink-1300-rgb)); + --spectrum-pink-1400-rgb:255, 219, 243; + --spectrum-pink-1400:rgba(var(--spectrum-pink-1400-rgb)); + --spectrum-pink-1500-rgb:255, 241, 250; + --spectrum-pink-1500:rgba(var(--spectrum-pink-1500-rgb)); + --spectrum-pink-1600-rgb:255, 255, 255; + --spectrum-pink-1600:rgba(var(--spectrum-pink-1600-rgb)); + --spectrum-turquoise-100-rgb:0, 30, 33; + --spectrum-turquoise-100:rgba(var(--spectrum-turquoise-100-rgb)); + --spectrum-turquoise-200-rgb:0, 37, 41; + --spectrum-turquoise-200:rgba(var(--spectrum-turquoise-200-rgb)); + --spectrum-turquoise-300-rgb:0, 49, 54; + --spectrum-turquoise-300:rgba(var(--spectrum-turquoise-300-rgb)); + --spectrum-turquoise-400-rgb:0, 66, 72; + --spectrum-turquoise-400:rgba(var(--spectrum-turquoise-400-rgb)); + --spectrum-turquoise-500-rgb:3, 84, 92; + --spectrum-turquoise-500:rgba(var(--spectrum-turquoise-500-rgb)); + --spectrum-turquoise-600-rgb:5, 103, 112; + --spectrum-turquoise-600:rgba(var(--spectrum-turquoise-600-rgb)); + --spectrum-turquoise-700-rgb:7, 120, 131; + --spectrum-turquoise-700:rgba(var(--spectrum-turquoise-700-rgb)); + --spectrum-turquoise-800-rgb:9, 135, 147; + --spectrum-turquoise-800:rgba(var(--spectrum-turquoise-800-rgb)); + --spectrum-turquoise-900-rgb:11, 151, 164; + --spectrum-turquoise-900:rgba(var(--spectrum-turquoise-900-rgb)); + --spectrum-turquoise-1000-rgb:13, 168, 182; + --spectrum-turquoise-1000:rgba(var(--spectrum-turquoise-1000-rgb)); + --spectrum-turquoise-1100-rgb:16, 186, 202; + --spectrum-turquoise-1100:rgba(var(--spectrum-turquoise-1100-rgb)); + --spectrum-turquoise-1200-rgb:64, 208, 220; + --spectrum-turquoise-1200:rgba(var(--spectrum-turquoise-1200-rgb)); + --spectrum-turquoise-1300-rgb:128, 225, 231; + --spectrum-turquoise-1300:rgba(var(--spectrum-turquoise-1300-rgb)); + --spectrum-turquoise-1400-rgb:183, 240, 240; + --spectrum-turquoise-1400:rgba(var(--spectrum-turquoise-1400-rgb)); + --spectrum-turquoise-1500-rgb:228, 249, 249; + --spectrum-turquoise-1500:rgba(var(--spectrum-turquoise-1500-rgb)); + --spectrum-turquoise-1600-rgb:255, 255, 255; + --spectrum-turquoise-1600:rgba(var(--spectrum-turquoise-1600-rgb)); + --spectrum-brown-100-rgb:35, 24, 8; + --spectrum-brown-100:rgba(var(--spectrum-brown-100-rgb)); + --spectrum-brown-200-rgb:44, 31, 11; + --spectrum-brown-200:rgba(var(--spectrum-brown-200-rgb)); + --spectrum-brown-300-rgb:58, 40, 14; + --spectrum-brown-300:rgba(var(--spectrum-brown-300-rgb)); + --spectrum-brown-400-rgb:78, 55, 19; + --spectrum-brown-400:rgba(var(--spectrum-brown-400-rgb)); + --spectrum-brown-500-rgb:98, 71, 30; + --spectrum-brown-500:rgba(var(--spectrum-brown-500-rgb)); + --spectrum-brown-600-rgb:115, 88, 47; + --spectrum-brown-600:rgba(var(--spectrum-brown-600-rgb)); + --spectrum-brown-700-rgb:132, 104, 61; + --spectrum-brown-700:rgba(var(--spectrum-brown-700-rgb)); + --spectrum-brown-800-rgb:148, 118, 73; + --spectrum-brown-800:rgba(var(--spectrum-brown-800-rgb)); + --spectrum-brown-900-rgb:163, 132, 84; + --spectrum-brown-900:rgba(var(--spectrum-brown-900-rgb)); + --spectrum-brown-1000-rgb:181, 147, 98; + --spectrum-brown-1000:rgba(var(--spectrum-brown-1000-rgb)); + --spectrum-brown-1100-rgb:199, 163, 112; + --spectrum-brown-1100:rgba(var(--spectrum-brown-1100-rgb)); + --spectrum-brown-1200-rgb:222, 185, 130; + --spectrum-brown-1200:rgba(var(--spectrum-brown-1200-rgb)); + --spectrum-brown-1300-rgb:232, 207, 169; + --spectrum-brown-1300:rgba(var(--spectrum-brown-1300-rgb)); + --spectrum-brown-1400-rgb:242, 227, 206; + --spectrum-brown-1400:rgba(var(--spectrum-brown-1400-rgb)); + --spectrum-brown-1500-rgb:250, 244, 236; + --spectrum-brown-1500:rgba(var(--spectrum-brown-1500-rgb)); + --spectrum-brown-1600-rgb:255, 255, 255; + --spectrum-brown-1600:rgba(var(--spectrum-brown-1600-rgb)); + --spectrum-silver-100-rgb:26, 26, 26; + --spectrum-silver-100:rgba(var(--spectrum-silver-100-rgb)); + --spectrum-silver-200-rgb:33, 33, 33; + --spectrum-silver-200:rgba(var(--spectrum-silver-200-rgb)); + --spectrum-silver-300-rgb:44, 44, 44; + --spectrum-silver-300:rgba(var(--spectrum-silver-300-rgb)); + --spectrum-silver-400-rgb:59, 59, 59; + --spectrum-silver-400:rgba(var(--spectrum-silver-400-rgb)); + --spectrum-silver-500-rgb:76, 76, 76; + --spectrum-silver-500:rgba(var(--spectrum-silver-500-rgb)); + --spectrum-silver-600-rgb:92, 92, 92; + --spectrum-silver-600:rgba(var(--spectrum-silver-600-rgb)); + --spectrum-silver-700-rgb:108, 108, 108; + --spectrum-silver-700:rgba(var(--spectrum-silver-700-rgb)); + --spectrum-silver-800-rgb:123, 123, 123; + --spectrum-silver-800:rgba(var(--spectrum-silver-800-rgb)); + --spectrum-silver-900-rgb:137, 137, 137; + --spectrum-silver-900:rgba(var(--spectrum-silver-900-rgb)); + --spectrum-silver-1000-rgb:152, 152, 152; + --spectrum-silver-1000:rgba(var(--spectrum-silver-1000-rgb)); + --spectrum-silver-1100-rgb:169, 169, 169; + --spectrum-silver-1100:rgba(var(--spectrum-silver-1100-rgb)); + --spectrum-silver-1200-rgb:190, 190, 190; + --spectrum-silver-1200:rgba(var(--spectrum-silver-1200-rgb)); + --spectrum-silver-1300-rgb:211, 211, 211; + --spectrum-silver-1300:rgba(var(--spectrum-silver-1300-rgb)); + --spectrum-silver-1400-rgb:229, 229, 229; + --spectrum-silver-1400:rgba(var(--spectrum-silver-1400-rgb)); + --spectrum-silver-1500-rgb:244, 244, 244; + --spectrum-silver-1500:rgba(var(--spectrum-silver-1500-rgb)); + --spectrum-silver-1600-rgb:255, 255, 255; + --spectrum-silver-1600:rgba(var(--spectrum-silver-1600-rgb)); + --spectrum-cinnamon-100-rgb:48, 17, 4; + --spectrum-cinnamon-100:rgba(var(--spectrum-cinnamon-100-rgb)); + --spectrum-cinnamon-200-rgb:59, 21, 5; + --spectrum-cinnamon-200:rgba(var(--spectrum-cinnamon-200-rgb)); + --spectrum-cinnamon-300-rgb:79, 28, 7; + --spectrum-cinnamon-300:rgba(var(--spectrum-cinnamon-300-rgb)); + --spectrum-cinnamon-400-rgb:100, 41, 15; + --spectrum-cinnamon-400:rgba(var(--spectrum-cinnamon-400-rgb)); + --spectrum-cinnamon-500-rgb:122, 57, 28; + --spectrum-cinnamon-500:rgba(var(--spectrum-cinnamon-500-rgb)); + --spectrum-cinnamon-600-rgb:143, 74, 40; + --spectrum-cinnamon-600:rgba(var(--spectrum-cinnamon-600-rgb)); + --spectrum-cinnamon-700-rgb:163, 88, 52; + --spectrum-cinnamon-700:rgba(var(--spectrum-cinnamon-700-rgb)); + --spectrum-cinnamon-800-rgb:179, 103, 64; + --spectrum-cinnamon-800:rgba(var(--spectrum-cinnamon-800-rgb)); + --spectrum-cinnamon-900-rgb:192, 119, 80; + --spectrum-cinnamon-900:rgba(var(--spectrum-cinnamon-900-rgb)); + --spectrum-cinnamon-1000-rgb:206, 136, 99; + --spectrum-cinnamon-1000:rgba(var(--spectrum-cinnamon-1000-rgb)); + --spectrum-cinnamon-1100-rgb:220, 154, 118; + --spectrum-cinnamon-1100:rgba(var(--spectrum-cinnamon-1100-rgb)); + --spectrum-cinnamon-1200-rgb:232, 179, 149; + --spectrum-cinnamon-1200:rgba(var(--spectrum-cinnamon-1200-rgb)); + --spectrum-cinnamon-1300-rgb:239, 203, 183; + --spectrum-cinnamon-1300:rgba(var(--spectrum-cinnamon-1300-rgb)); + --spectrum-cinnamon-1400-rgb:246, 225, 214; + --spectrum-cinnamon-1400:rgba(var(--spectrum-cinnamon-1400-rgb)); + --spectrum-cinnamon-1500-rgb:252, 244, 239; + --spectrum-cinnamon-1500:rgba(var(--spectrum-cinnamon-1500-rgb)); + --spectrum-cinnamon-1600-rgb:255, 255, 255; + --spectrum-cinnamon-1600:rgba(var(--spectrum-cinnamon-1600-rgb)); + --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-800); + --spectrum-icon-color-green-primary-default:var(--spectrum-green-800); + --spectrum-icon-color-red-primary-default:var(--spectrum-red-700); + --spectrum-icon-color-yellow-primary-default:var(--spectrum-yellow-1000); + --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-900-rgb); + --spectrum-dropindicator-color:var(--spectrum-blue-700); + + --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); + --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-white-rgb), 0.07); + --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-down:var(--spectrum-transparent-white-200); + --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.07); + --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-700); + + --spectrum-badge-label-icon-color-primary:var(--spectrum-black); + + --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-700); + + --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-700); + + --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.07); + --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); + + --spectrum-logic-button-and-background-color:var(--spectrum-blue-800); + --spectrum-logic-button-and-border-color:var(--spectrum-blue-800); + --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1000); + --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1000); + + --spectrum-logic-button-or-background-color:var(--spectrum-magenta-700); + --spectrum-logic-button-or-border-color:var(--spectrum-magenta-700); + --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-900); + + --spectrum-assetcard-border-color-selected:var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-900); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-800); + --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-700); + + --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); + --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700); + + --spectrum-card-selected-background-color-rgb:var(--spectrum-blue-500-rgb); +} + +.spectrum{ + --spectrum-focus-indicator-color:var(--spectrum-blue-800); + --spectrum-static-white-focus-indicator-color:var(--spectrum-white); + --spectrum-static-black-focus-indicator-color:var(--spectrum-black); + --spectrum-overlay-color:var(--spectrum-black); + --spectrum-drop-shadow-color:var(--spectrum-drop-shadow-color-100); + --spectrum-opacity-disabled:0.3; + --spectrum-background-base-color:var(--spectrum-gray-25); + --spectrum-background-layer-1-color:var(--spectrum-gray-50); + --spectrum-neutral-background-color-default:var(--spectrum-gray-800); + --spectrum-neutral-background-color-hover:var(--spectrum-gray-900); + --spectrum-neutral-background-color-down:var(--spectrum-gray-900); + --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-800); + --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-900); + --spectrum-neutral-subdued-content-color-selected:var(--spectrum-neutral-subdued-content-color-down); + --spectrum-accent-content-color-selected:var(--spectrum-accent-content-color-down); + --spectrum-disabled-background-color:var(--spectrum-gray-100); + --spectrum-disabled-static-white-background-color:var(--spectrum-transparent-white-100); + --spectrum-disabled-static-black-background-color:var(--spectrum-transparent-black-100); + --spectrum-background-opacity-default:0; + --spectrum-background-opacity-hover:0.1; + --spectrum-background-opacity-down:0.1; + --spectrum-background-opacity-key-focus:0.1; + --spectrum-neutral-content-color-default:var(--spectrum-gray-800); + --spectrum-neutral-content-color-hover:var(--spectrum-gray-900); + --spectrum-neutral-content-color-down:var(--spectrum-gray-900); + --spectrum-neutral-content-color-focus-hover:var(--spectrum-neutral-content-color-down); + --spectrum-neutral-content-color-focus:var(--spectrum-neutral-content-color-down); + --spectrum-neutral-content-color-key-focus:var(--spectrum-gray-900); + --spectrum-neutral-subdued-content-color-default:var(--spectrum-gray-700); + --spectrum-neutral-subdued-content-color-hover:var(--spectrum-gray-800); + --spectrum-neutral-subdued-content-color-down:var(--spectrum-gray-800); + --spectrum-neutral-subdued-content-color-key-focus:var(--spectrum-gray-800); + --spectrum-accent-content-color-default:var(--spectrum-accent-color-900); + --spectrum-accent-content-color-hover:var(--spectrum-accent-color-1000); + --spectrum-accent-content-color-down:var(--spectrum-accent-color-1000); + --spectrum-accent-content-color-key-focus:var(--spectrum-accent-color-1000); + --spectrum-negative-content-color-default:var(--spectrum-negative-color-900); + --spectrum-negative-content-color-hover:var(--spectrum-negative-color-1000); + --spectrum-negative-content-color-down:var(--spectrum-negative-color-1000); + --spectrum-negative-content-color-key-focus:var(--spectrum-negative-color-1000); + --spectrum-disabled-content-color:var(--spectrum-gray-400); + --spectrum-disabled-static-white-content-color:var(--spectrum-transparent-white-400); + --spectrum-disabled-static-black-content-color:var(--spectrum-transparent-black-400); + --spectrum-disabled-border-color:var(--spectrum-gray-300); + --spectrum-disabled-static-white-border-color:var(--spectrum-transparent-white-300); + --spectrum-disabled-static-black-border-color:var(--spectrum-transparent-black-300); + --spectrum-negative-border-color-default:var(--spectrum-negative-color-900); + --spectrum-negative-border-color-hover:var(--spectrum-negative-color-1000); + --spectrum-negative-border-color-down:var(--spectrum-negative-color-1100); + --spectrum-negative-border-color-focus-hover:var(--spectrum-negative-border-color-down); + --spectrum-negative-border-color-focus:var(--spectrum-negative-color-1000); + --spectrum-negative-border-color-key-focus:var(--spectrum-negative-color-1000); + --spectrum-title-color:var(--spectrum-gray-900); + --spectrum-drop-shadow-emphasized-default-color:var(--spectrum-drop-shadow-color-100); + --spectrum-drop-shadow-emphasized-hover-color:var(--spectrum-drop-shadow-color-200); + --spectrum-drop-shadow-elevated-color:var(--spectrum-drop-shadow-color-200); + --spectrum-swatch-border-color:var(--spectrum-gray-900); + --spectrum-swatch-border-opacity:0.51; + --spectrum-swatch-disabled-icon-border-color:var(--spectrum-black); + --spectrum-swatch-disabled-icon-border-opacity:0.51; + --spectrum-thumbnail-border-color:var(--spectrum-gray-800); + --spectrum-thumbnail-border-opacity:0.1; + --spectrum-thumbnail-opacity-disabled:var(--spectrum-opacity-disabled); + --spectrum-opacity-checkerboard-square-light:var(--spectrum-white); + --spectrum-avatar-opacity-disabled:var(--spectrum-opacity-disabled); + --spectrum-color-area-border-color:var(--spectrum-gray-900); + --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-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-drop-zone-background-color:var(--spectrum-accent-visual-color); + --spectrum-drop-zone-background-color-opacity:0.1; + --spectrum-drop-zone-background-color-opacity-filled:0.3; + --spectrum-coach-mark-pagination-color:var(--spectrum-gray-600); + --spectrum-color-handle-inner-border-color:var(--spectrum-black); + --spectrum-color-handle-inner-border-opacity:0.42; + --spectrum-color-handle-outer-border-color:var(--spectrum-black); + --spectrum-color-handle-outer-border-opacity:var(--spectrum-color-handle-inner-border-opacity); + --spectrum-color-handle-drop-shadow-color:var(--spectrum-drop-shadow-color); + --spectrum-floating-action-button-drop-shadow-color:var(--spectrum-transparent-black-300); + --spectrum-floating-action-button-shadow-color:var(--spectrum-floating-action-button-drop-shadow-color); + --spectrum-table-row-hover-color:var(--spectrum-gray-900); + --spectrum-table-row-hover-opacity:0.07; + --spectrum-table-selected-row-background-color:var(--spectrum-informative-background-color-default); + --spectrum-table-selected-row-background-opacity:0.1; + --spectrum-table-selected-row-background-color-non-emphasized:var(--spectrum-neutral-background-color-selected-default); + --spectrum-table-selected-row-background-opacity-non-emphasized:0.1; + --spectrum-table-row-down-opacity:0.1; + --spectrum-table-selected-row-background-opacity-hover:0.15; + --spectrum-table-selected-row-background-opacity-non-emphasized-hover:0.15; + --spectrum-white-rgb:255, 255, 255; + --spectrum-white:rgba(var(--spectrum-white-rgb)); + --spectrum-transparent-white-25-rgb:255, 255, 255; + --spectrum-transparent-white-25-opacity:0; + --spectrum-transparent-white-25:rgba(var(--spectrum-transparent-white-25-rgb), var(--spectrum-transparent-white-25-opacity)); + --spectrum-transparent-white-50-rgb:255, 255, 255; + --spectrum-transparent-white-50-opacity:0.04; + --spectrum-transparent-white-50:rgba(var(--spectrum-transparent-white-50-rgb), var(--spectrum-transparent-white-50-opacity)); + --spectrum-transparent-white-75-rgb:255, 255, 255; + --spectrum-transparent-white-75-opacity:0.07; + --spectrum-transparent-white-75:rgba(var(--spectrum-transparent-white-75-rgb), var(--spectrum-transparent-white-75-opacity)); + --spectrum-transparent-white-100-rgb:255, 255, 255; + --spectrum-transparent-white-100-opacity:0.11; + --spectrum-transparent-white-100:rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity)); + --spectrum-transparent-white-200-rgb:255, 255, 255; + --spectrum-transparent-white-200-opacity:0.14; + --spectrum-transparent-white-200:rgba(var(--spectrum-transparent-white-200-rgb), var(--spectrum-transparent-white-200-opacity)); + --spectrum-transparent-white-300-rgb:255, 255, 255; + --spectrum-transparent-white-300-opacity:0.17; + --spectrum-transparent-white-300:rgba(var(--spectrum-transparent-white-300-rgb), var(--spectrum-transparent-white-300-opacity)); + --spectrum-transparent-white-400-rgb:255, 255, 255; + --spectrum-transparent-white-400-opacity:0.21; + --spectrum-transparent-white-400:rgba(var(--spectrum-transparent-white-400-rgb), var(--spectrum-transparent-white-400-opacity)); + --spectrum-transparent-white-500-rgb:255, 255, 255; + --spectrum-transparent-white-500-opacity:0.39; + --spectrum-transparent-white-500:rgba(var(--spectrum-transparent-white-500-rgb), var(--spectrum-transparent-white-500-opacity)); + --spectrum-transparent-white-600-rgb:255, 255, 255; + --spectrum-transparent-white-600-opacity:0.51; + --spectrum-transparent-white-600:rgba(var(--spectrum-transparent-white-600-rgb), var(--spectrum-transparent-white-600-opacity)); + --spectrum-transparent-white-700-rgb:255, 255, 255; + --spectrum-transparent-white-700-opacity:0.66; + --spectrum-transparent-white-700:rgba(var(--spectrum-transparent-white-700-rgb), var(--spectrum-transparent-white-700-opacity)); + --spectrum-transparent-white-800-rgb:255, 255, 255; + --spectrum-transparent-white-800-opacity:0.85; + --spectrum-transparent-white-800:rgba(var(--spectrum-transparent-white-800-rgb), var(--spectrum-transparent-white-800-opacity)); + --spectrum-transparent-white-900-rgb:255, 255, 255; + --spectrum-transparent-white-900-opacity:0.94; + --spectrum-transparent-white-900:rgba(var(--spectrum-transparent-white-900-rgb), var(--spectrum-transparent-white-900-opacity)); + --spectrum-transparent-white-1000-rgb:255, 255, 255; + --spectrum-transparent-white-1000:rgba(var(--spectrum-transparent-white-1000-rgb)); + --spectrum-black-rgb:0, 0, 0; + --spectrum-black:rgba(var(--spectrum-black-rgb)); + --spectrum-transparent-black-25-rgb:0, 0, 0; + --spectrum-transparent-black-25-opacity:0; + --spectrum-transparent-black-25:rgba(var(--spectrum-transparent-black-25-rgb), var(--spectrum-transparent-black-25-opacity)); + --spectrum-transparent-black-50-rgb:0, 0, 0; + --spectrum-transparent-black-50-opacity:0.03; + --spectrum-transparent-black-50:rgba(var(--spectrum-transparent-black-50-rgb), var(--spectrum-transparent-black-50-opacity)); + --spectrum-transparent-black-75-rgb:0, 0, 0; + --spectrum-transparent-black-75-opacity:0.05; + --spectrum-transparent-black-75:rgba(var(--spectrum-transparent-black-75-rgb), var(--spectrum-transparent-black-75-opacity)); + --spectrum-transparent-black-100-rgb:0, 0, 0; + --spectrum-transparent-black-100-opacity:0.09; + --spectrum-transparent-black-100:rgba(var(--spectrum-transparent-black-100-rgb), var(--spectrum-transparent-black-100-opacity)); + --spectrum-transparent-black-200-rgb:0, 0, 0; + --spectrum-transparent-black-200-opacity:0.12; + --spectrum-transparent-black-200:rgba(var(--spectrum-transparent-black-200-rgb), var(--spectrum-transparent-black-200-opacity)); + --spectrum-transparent-black-300-rgb:0, 0, 0; + --spectrum-transparent-black-300-opacity:0.15; + --spectrum-transparent-black-300:rgba(var(--spectrum-transparent-black-300-rgb), var(--spectrum-transparent-black-300-opacity)); + --spectrum-transparent-black-400-rgb:0, 0, 0; + --spectrum-transparent-black-400-opacity:0.22; + --spectrum-transparent-black-400:rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity)); + --spectrum-transparent-black-500-rgb:0, 0, 0; + --spectrum-transparent-black-500-opacity:0.44; + --spectrum-transparent-black-500:rgba(var(--spectrum-transparent-black-500-rgb), var(--spectrum-transparent-black-500-opacity)); + --spectrum-transparent-black-600-rgb:0, 0, 0; + --spectrum-transparent-black-600-opacity:0.56; + --spectrum-transparent-black-600:rgba(var(--spectrum-transparent-black-600-rgb), var(--spectrum-transparent-black-600-opacity)); + --spectrum-transparent-black-700-rgb:0, 0, 0; + --spectrum-transparent-black-700-opacity:0.69; + --spectrum-transparent-black-700:rgba(var(--spectrum-transparent-black-700-rgb), var(--spectrum-transparent-black-700-opacity)); + --spectrum-transparent-black-800-rgb:0, 0, 0; + --spectrum-transparent-black-800-opacity:0.84; + --spectrum-transparent-black-800:rgba(var(--spectrum-transparent-black-800-rgb), var(--spectrum-transparent-black-800-opacity)); + --spectrum-transparent-black-900-rgb:0, 0, 0; + --spectrum-transparent-black-900-opacity:0.93; + --spectrum-transparent-black-900:rgba(var(--spectrum-transparent-black-900-rgb), var(--spectrum-transparent-black-900-opacity)); + --spectrum-transparent-black-1000-rgb:0, 0, 0; + --spectrum-transparent-black-1000:rgba(var(--spectrum-transparent-black-1000-rgb)); + --spectrum-icon-color-inverse:var(--spectrum-gray-50); + --spectrum-icon-color-primary-default:var(--spectrum-neutral-content-color-default); + --spectrum-asterisk-icon-size-75:8px; + --spectrum-radio-button-selection-indicator:4px; + --spectrum-field-label-top-margin-small:0px; + --spectrum-field-label-to-component:0px; + --spectrum-help-text-to-component:0px; + --spectrum-status-light-dot-size-small:8px; + --spectrum-action-button-edge-to-hold-icon-extra-small:3px; + --spectrum-action-button-edge-to-hold-icon-small:3px; + --spectrum-button-minimum-width-multiplier:2.25; + --spectrum-divider-thickness-small:1px; + --spectrum-divider-thickness-medium:2px; + --spectrum-divider-thickness-large:4px; + --spectrum-swatch-rectangle-width-multiplier:2; + --spectrum-swatch-slash-thickness-extra-small:2px; + --spectrum-swatch-slash-thickness-small:3px; + --spectrum-swatch-slash-thickness-medium:4px; + --spectrum-swatch-slash-thickness-large:5px; + --spectrum-progress-bar-minimum-width:48px; + --spectrum-progress-bar-maximum-width:768px; + --spectrum-meter-minimum-width:48px; + --spectrum-meter-maximum-width:768px; + --spectrum-meter-default-width:var(--spectrum-meter-width); + --spectrum-in-line-alert-minimum-width:240px; + --spectrum-popover-tip-width:16px; + --spectrum-popover-tip-height:8px; + --spectrum-menu-item-label-to-description:1px; + --spectrum-menu-item-section-divider-height:8px; + --spectrum-slider-track-thickness:2px; + --spectrum-slider-handle-gap:4px; + --spectrum-picker-minimum-width-multiplier:2; + --spectrum-picker-border-width:var(--spectrum-border-width-100); + --spectrum-picker-end-edge-to-disclousure-icon-quiet:var(--spectrum-picker-end-edge-to-disclosure-icon-quiet); + --spectrum-picker-end-edge-to-disclosure-icon-quiet:0px; + --spectrum-text-field-minimum-width-multiplier:1.5; + --spectrum-combo-box-minimum-width-multiplier:2.5; + --spectrum-combo-box-quiet-minimum-width-multiplier:2; + --spectrum-combo-box-visual-to-field-button-quiet:0px; + --spectrum-alert-dialog-minimum-width:288px; + --spectrum-alert-dialog-maximum-width:480px; + --spectrum-contextual-help-minimum-width:268px; + --spectrum-breadcrumbs-height:var(--spectrum-component-height-300); + --spectrum-breadcrumbs-height-compact:var(--spectrum-component-height-200); + --spectrum-breadcrumbs-end-edge-to-text:0px; + --spectrum-breadcrumbs-truncated-menu-to-separator-icon:0px; + --spectrum-breadcrumbs-start-edge-to-truncated-menu:0px; + --spectrum-breadcrumbs-truncated-menu-to-bottom-text:0px; + --spectrum-alert-banner-to-top-workflow-icon:var(--spectrum-alert-banner-top-to-workflow-icon); + --spectrum-alert-banner-to-top-text:var(--spectrum-alert-banner-top-to-text); + --spectrum-alert-banner-to-bottom-text:var(--spectrum-alert-banner-bottom-to-text); + --spectrum-color-area-border-width:var(--spectrum-border-width-100); + --spectrum-color-area-border-rounding:var(--spectrum-corner-radius-medium-size-small); + --spectrum-color-wheel-color-area-margin:12px; + --spectrum-color-slider-border-width:1px; + --spectrum-color-slider-border-rounding:var(--spectrum-corner-radius-medium-size-small); + --spectrum-floating-action-button-drop-shadow-blur:12px; + --spectrum-floating-action-button-drop-shadow-y:4px; + --spectrum-illustrated-message-maximum-width:380px; + --spectrum-search-field-minimum-width-multiplier:3; + --spectrum-color-loupe-height:64px; + --spectrum-color-loupe-width:48px; + --spectrum-color-loupe-bottom-to-color-handle:12px; + --spectrum-color-loupe-outer-border-width:var(--spectrum-border-width-200); + --spectrum-color-loupe-inner-border-width:1px; + --spectrum-color-loupe-drop-shadow-y:2px; + --spectrum-color-loupe-drop-shadow-blur:8px; + --spectrum-card-minimum-width:100px; + --spectrum-card-preview-minimum-height:130px; + --spectrum-card-selection-background-size:40px; + --spectrum-drop-zone-width:428px; + --spectrum-drop-zone-content-maximum-width:var(--spectrum-illustrated-message-maximum-width); + --spectrum-drop-zone-border-dash-length:8px; + --spectrum-drop-zone-border-dash-gap:4px; + --spectrum-drop-zone-title-size:var(--spectrum-illustrated-message-title-size); + --spectrum-drop-zone-cjk-title-size:var(--spectrum-illustrated-message-cjk-title-size); + --spectrum-drop-zone-body-size:var(--spectrum-illustrated-message-body-size); + --spectrum-accordion-top-to-text-compact-small:2px; + --spectrum-accordion-top-to-text-compact-medium:4px; + --spectrum-accordion-disclosure-indicator-to-text:0px; + --spectrum-accordion-edge-to-disclosure-indicator:0px; + --spectrum-accordion-edge-to-text:0px; + --spectrum-accordion-focus-indicator-gap:0px; + --spectrum-color-handle-border-width:var(--spectrum-border-width-200); + --spectrum-color-handle-inner-border-width:1px; + --spectrum-color-handle-outer-border-width:1px; + --spectrum-color-handle-drop-shadow-x:0; + --spectrum-color-handle-drop-shadow-y:0; + --spectrum-color-handle-drop-shadow-blur:0; + --spectrum-table-row-height-small-compact:var(--spectrum-component-height-75); + --spectrum-table-row-height-medium-compact:var(--spectrum-component-height-100); + --spectrum-table-row-height-large-compact:var(--spectrum-component-height-200); + --spectrum-table-row-height-extra-large-compact:var(--spectrum-component-height-300); + --spectrum-table-row-top-to-text-small-compact:var(--spectrum-component-top-to-text-75); + --spectrum-table-row-top-to-text-medium-compact:var(--spectrum-component-top-to-text-100); + --spectrum-table-row-top-to-text-large-compact:var(--spectrum-component-top-to-text-200); + --spectrum-table-row-top-to-text-extra-large-compact:var(--spectrum-component-top-to-text-300); + --spectrum-table-row-bottom-to-text-small-compact:var(--spectrum-component-bottom-to-text-75); + --spectrum-table-row-bottom-to-text-medium-compact:var(--spectrum-component-bottom-to-text-100); + --spectrum-table-row-bottom-to-text-large-compact:var(--spectrum-component-bottom-to-text-200); + --spectrum-table-row-bottom-to-text-extra-large-compact:var(--spectrum-component-bottom-to-text-300); + --spectrum-table-edge-to-content:16px; + --spectrum-table-border-divider-width:1px; + --spectrum-tab-item-height-small:var(--spectrum-component-height-200); + --spectrum-tab-item-height-medium:var(--spectrum-component-height-300); + --spectrum-tab-item-height-large:var(--spectrum-component-height-400); + --spectrum-tab-item-height-extra-large:var(--spectrum-component-height-500); + --spectrum-tab-item-compact-height-small:var(--spectrum-component-height-75); + --spectrum-tab-item-compact-height-medium:var(--spectrum-component-height-100); + --spectrum-tab-item-compact-height-large:var(--spectrum-component-height-200); + --spectrum-tab-item-compact-height-extra-large:var(--spectrum-component-height-300); + --spectrum-tab-item-start-to-edge-quiet:0px; + --spectrum-in-field-button-width-stacked-small:20px; + --spectrum-in-field-button-width-stacked-medium:28px; + --spectrum-in-field-button-width-stacked-large:36px; + --spectrum-in-field-button-width-stacked-extra-large:44px; + --spectrum-in-field-button-fill-stacked-inner-border-rounding:0px; + --spectrum-in-field-button-edge-to-fill:0px; + --spectrum-in-field-button-stacked-inner-edge-to-fill:0px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small:7px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium:9px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large:13px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large:16px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small:3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:4px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:5px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); + --spectrum-corner-radius-0:0px; + --spectrum-corner-radius-75:3px; + --spectrum-corner-radius-100:4px; + --spectrum-corner-radius-200:5px; + --spectrum-corner-radius-300:6px; + --spectrum-corner-radius-400:7px; + --spectrum-corner-radius-500:8px; + --spectrum-corner-radius-600:9px; + --spectrum-corner-radius-700:10px; + --spectrum-corner-radius-800:16px; + --spectrum-corner-radius-1000:0.5; + --spectrum-corner-radius-none:var(--spectrum-corner-radius-0); + --spectrum-corner-radius-small-default:var(--spectrum-corner-radius-100); + --spectrum-corner-radius-medium-default:var(--spectrum-corner-radius-500); + --spectrum-corner-radius-large-default:var(--spectrum-corner-radius-700); + --spectrum-corner-radius-extra-large-default:var(--spectrum-corner-radius-800); + --spectrum-corner-radius-full:var(--spectrum-corner-radius-1000); + --spectrum-corner-radius-small-size-small:var(--spectrum-corner-radius-75); + --spectrum-corner-radius-small-size-medium:var(--spectrum-corner-radius-100); + --spectrum-corner-radius-small-size-large:var(--spectrum-corner-radius-200); + --spectrum-corner-radius-small-size-extra-large:var(--spectrum-corner-radius-300); + --spectrum-corner-radius-medium-size-extra-small:var(--spectrum-corner-radius-300); + --spectrum-corner-radius-medium-size-small:var(--spectrum-corner-radius-400); + --spectrum-corner-radius-medium-size-medium:var(--spectrum-corner-radius-500); + --spectrum-corner-radius-medium-size-large:var(--spectrum-corner-radius-600); + --spectrum-corner-radius-medium-size-extra-large:var(--spectrum-corner-radius-700); + --spectrum-drop-shadow-x:0px; + --spectrum-android-elevation:2dp; + --spectrum-spacing-50:2px; + --spectrum-spacing-75:4px; + --spectrum-spacing-100:8px; + --spectrum-spacing-200:12px; + --spectrum-spacing-300:16px; + --spectrum-spacing-400:24px; + --spectrum-spacing-500:32px; + --spectrum-spacing-600:40px; + --spectrum-spacing-700:48px; + --spectrum-spacing-800:64px; + --spectrum-spacing-900:80px; + --spectrum-spacing-1000:96px; + --spectrum-focus-indicator-thickness:2px; + --spectrum-focus-indicator-gap:2px; + --spectrum-border-width-100:1px; + --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; + --spectrum-text-underline-thickness:1px; + --spectrum-text-underline-gap:1px; + --spectrum-accent-color-100:var(--spectrum-blue-100); + --spectrum-accent-color-200:var(--spectrum-blue-200); + --spectrum-accent-color-300:var(--spectrum-blue-300); + --spectrum-accent-color-400:var(--spectrum-blue-400); + --spectrum-accent-color-500:var(--spectrum-blue-500); + --spectrum-accent-color-600:var(--spectrum-blue-600); + --spectrum-accent-color-700:var(--spectrum-blue-700); + --spectrum-accent-color-800:var(--spectrum-blue-800); + --spectrum-accent-color-900:var(--spectrum-blue-900); + --spectrum-accent-color-1000:var(--spectrum-blue-1000); + --spectrum-accent-color-1100:var(--spectrum-blue-1100); + --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-accent-color-1500:var(--spectrum-blue-1500); + --spectrum-accent-color-1600:var(--spectrum-blue-1600); + --spectrum-informative-color-100:var(--spectrum-blue-100); + --spectrum-informative-color-200:var(--spectrum-blue-200); + --spectrum-informative-color-300:var(--spectrum-blue-300); + --spectrum-informative-color-400:var(--spectrum-blue-400); + --spectrum-informative-color-500:var(--spectrum-blue-500); + --spectrum-informative-color-600:var(--spectrum-blue-600); + --spectrum-informative-color-700:var(--spectrum-blue-700); + --spectrum-informative-color-800:var(--spectrum-blue-800); + --spectrum-informative-color-900:var(--spectrum-blue-900); + --spectrum-informative-color-1000:var(--spectrum-blue-1000); + --spectrum-informative-color-1100:var(--spectrum-blue-1100); + --spectrum-informative-color-1200:var(--spectrum-blue-1200); + --spectrum-informative-color-1300:var(--spectrum-blue-1300); + --spectrum-informative-color-1400:var(--spectrum-blue-1400); + --spectrum-informative-color-1500:var(--spectrum-blue-1500); + --spectrum-informative-color-1600:var(--spectrum-blue-1600); + --spectrum-negative-color-100:var(--spectrum-red-100); + --spectrum-negative-color-200:var(--spectrum-red-200); + --spectrum-negative-color-300:var(--spectrum-red-300); + --spectrum-negative-color-400:var(--spectrum-red-400); + --spectrum-negative-color-500:var(--spectrum-red-500); + --spectrum-negative-color-600:var(--spectrum-red-600); + --spectrum-negative-color-700:var(--spectrum-red-700); + --spectrum-negative-color-800:var(--spectrum-red-800); + --spectrum-negative-color-900:var(--spectrum-red-900); + --spectrum-negative-color-1000:var(--spectrum-red-1000); + --spectrum-negative-color-1100:var(--spectrum-red-1100); + --spectrum-negative-color-1200:var(--spectrum-red-1200); + --spectrum-negative-color-1300:var(--spectrum-red-1300); + --spectrum-negative-color-1400:var(--spectrum-red-1400); + --spectrum-negative-color-1500:var(--spectrum-red-1500); + --spectrum-negative-color-1600:var(--spectrum-red-1600); + --spectrum-notice-color-100:var(--spectrum-orange-100); + --spectrum-notice-color-200:var(--spectrum-orange-200); + --spectrum-notice-color-300:var(--spectrum-orange-300); + --spectrum-notice-color-400:var(--spectrum-orange-400); + --spectrum-notice-color-500:var(--spectrum-orange-500); + --spectrum-notice-color-600:var(--spectrum-orange-600); + --spectrum-notice-color-700:var(--spectrum-orange-700); + --spectrum-notice-color-800:var(--spectrum-orange-800); + --spectrum-notice-color-900:var(--spectrum-orange-900); + --spectrum-notice-color-1000:var(--spectrum-orange-1000); + --spectrum-notice-color-1100:var(--spectrum-orange-1100); + --spectrum-notice-color-1200:var(--spectrum-orange-1200); + --spectrum-notice-color-1300:var(--spectrum-orange-1300); + --spectrum-notice-color-1400:var(--spectrum-orange-1400); + --spectrum-notice-color-1500:var(--spectrum-orange-1500); + --spectrum-notice-color-1600:var(--spectrum-orange-1600); + --spectrum-positive-color-100:var(--spectrum-green-100); + --spectrum-positive-color-200:var(--spectrum-green-200); + --spectrum-positive-color-300:var(--spectrum-green-300); + --spectrum-positive-color-400:var(--spectrum-green-400); + --spectrum-positive-color-500:var(--spectrum-green-500); + --spectrum-positive-color-600:var(--spectrum-green-600); + --spectrum-positive-color-700:var(--spectrum-green-700); + --spectrum-positive-color-800:var(--spectrum-green-800); + --spectrum-positive-color-900:var(--spectrum-green-900); + --spectrum-positive-color-1000:var(--spectrum-green-1000); + --spectrum-positive-color-1100:var(--spectrum-green-1100); + --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-positive-color-1500:var(--spectrum-green-1500); + --spectrum-positive-color-1600:var(--spectrum-green-1600); + --spectrum-negative-subdued-background-color-default:var(--spectrum-negative-color-200); + --spectrum-negative-subdued-background-color-hover:var(--spectrum-negative-color-300); + --spectrum-negative-subdued-background-color-down:var(--spectrum-negative-color-300); + --spectrum-negative-subdued-background-color-key-focus:var(--spectrum-negative-color-300); + --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:300; + --spectrum-regular-font-weight:400; + --spectrum-medium-font-weight:500; + --spectrum-bold-font-weight:700; + --spectrum-extra-bold-font-weight:800; + --spectrum-black-font-weight:900; + --spectrum-italic-font-style:italic; + --spectrum-default-font-style:normal; + --spectrum-line-height-100:1.3; + --spectrum-line-height-200:1.5; + --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-sans-serif-font-family); + --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-light-font-weight); + --spectrum-heading-sans-serif-light-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-light-font-weight:var(--spectrum-regular-font-weight); + --spectrum-heading-serif-light-font-style:var(--spectrum-default-font-style); + --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-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-sans-serif-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-serif-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-heading-cjk-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-heavy-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-font-style:var(--spectrum-default-font-style); + --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-bold-font-weight); + --spectrum-heading-sans-serif-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-light-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-serif-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-light-strong-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-heading-cjk-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-heavy-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-heavy-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-light-emphasized-font-weight:var(--spectrum-light-font-weight); + --spectrum-heading-sans-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-heading-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-heading-cjk-light-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-heavy-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-heavy-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-light-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-sans-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-light-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-light-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-heading-cjk-light-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-heavy-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-heavy-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-size-xxxl:var(--spectrum-font-size-1300); + --spectrum-heading-size-xxl:var(--spectrum-font-size-1100); + --spectrum-heading-size-xl:var(--spectrum-font-size-900); + --spectrum-heading-size-l:var(--spectrum-font-size-700); + --spectrum-heading-size-m:var(--spectrum-font-size-500); + --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-cjk-line-height:var(--spectrum-cjk-line-height-100); + --spectrum-heading-margin-top-multiplier:0.88888889; + --spectrum-heading-margin-bottom-multiplier:0.25; + --spectrum-heading-color:var(--spectrum-gray-900); + --spectrum-body-sans-serif-font-family:var(--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-bold-font-weight); + --spectrum-body-sans-serif-strong-font-style:var(--spectrum-default-font-style); + --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-regular-font-weight); + --spectrum-body-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-body-serif-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-body-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-body-cjk-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-body-cjk-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-body-sans-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-body-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-body-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-body-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-body-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-body-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-body-size-xxxl:var(--spectrum-font-size-600); + --spectrum-body-size-xxl:var(--spectrum-font-size-500); + --spectrum-body-size-xl:var(--spectrum-font-size-400); + --spectrum-body-size-l:var(--spectrum-font-size-300); + --spectrum-body-size-m:var(--spectrum-font-size-200); + --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-cjk-line-height:var(--spectrum-cjk-line-height-200); + --spectrum-body-margin-multiplier:0.75; + --spectrum-body-color:var(--spectrum-gray-800); + --spectrum-detail-sans-serif-font-family:var(--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-regular-font-weight); + --spectrum-detail-sans-serif-light-font-style:var(--spectrum-default-font-style); + --spectrum-detail-serif-light-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-font-style:var(--spectrum-default-font-style); + --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-bold-font-weight); + --spectrum-detail-sans-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-serif-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-serif-strong-font-style:var(--spectrum-default-font-style); + --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-regular-font-weight); + --spectrum-detail-sans-serif-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-serif-light-strong-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-cjk-light-strong-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-detail-cjk-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-cjk-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-detail-cjk-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-sans-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-serif-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-cjk-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-cjk-light-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-detail-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-strong-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-sans-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-serif-light-strong-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-cjk-light-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-detail-cjk-light-strong-emphasized-font-style:var(--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-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-detail-sans-serif-text-transform:uppercase; + --spectrum-detail-serif-text-transform:uppercase; + --spectrum-detail-color:var(--spectrum-gray-900); + --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-bold-font-weight); + --spectrum-code-cjk-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-code-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-code-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-code-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-code-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-code-size-xl:var(--spectrum-font-size-400); + --spectrum-code-size-l:var(--spectrum-font-size-300); + --spectrum-code-size-m:var(--spectrum-font-size-200); + --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-cjk-line-height:var(--spectrum-cjk-line-height-200); + --spectrum-code-color:var(--spectrum-gray-800); + --system:spectrum; + + --spectrum-animation-linear:cubic-bezier(0, 0, 1, 1); + --spectrum-animation-duration-0:0ms; + --spectrum-animation-duration-100:130ms; + --spectrum-animation-duration-200:160ms; + --spectrum-animation-duration-300:190ms; + --spectrum-animation-duration-400:220ms; + --spectrum-animation-duration-500:250ms; + --spectrum-animation-duration-600:300ms; + --spectrum-animation-duration-700:350ms; + --spectrum-animation-duration-800:400ms; + --spectrum-animation-duration-900:450ms; + --spectrum-animation-duration-1000:500ms; + --spectrum-animation-duration-2000:1000ms; + --spectrum-animation-duration-4000:2000ms; + --spectrum-animation-duration-6000:3000ms; + --spectrum-animation-ease-in-out:cubic-bezier(0.45, 0, 0.4, 1); + --spectrum-animation-ease-in:cubic-bezier(0.5, 0, 1, 1); + --spectrum-animation-ease-out:cubic-bezier(0, 0, 0.4, 1); + --spectrum-animation-ease-linear:cubic-bezier(0, 0, 1, 1); + + --spectrum-sans-font-family-stack:adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-sans-serif-font:var(--spectrum-sans-font-family-stack); + + --spectrum-serif-font-family-stack:adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", georgia, serif; + --spectrum-serif-font:var(--spectrum-serif-font-family-stack); + + --spectrum-code-font-family-stack:"Source Code Pro", monaco, monospace; + + --spectrum-cjk-font-family-stack:adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; + --spectrum-cjk-font:var(--spectrum-code-font-family-stack); + --spectrum-docs-static-white-background-color-rgb:15, 121, 125; + --spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb)); + --spectrum-docs-static-black-background-color-rgb:181, 209, 211; + --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); +} + +.spectrum--large{ + --spectrum-workflow-icon-size-50:18px; + --spectrum-workflow-icon-size-75:20px; + --spectrum-workflow-icon-size-100:22px; + --spectrum-workflow-icon-size-200:24px; + --spectrum-workflow-icon-size-300:28px; + --spectrum-arrow-icon-size-75:12px; + --spectrum-arrow-icon-size-100:14px; + --spectrum-arrow-icon-size-200:16px; + --spectrum-arrow-icon-size-300:16px; + --spectrum-arrow-icon-size-400:18px; + --spectrum-arrow-icon-size-500:22px; + --spectrum-arrow-icon-size-600:24px; + --spectrum-asterisk-icon-size-100:10px; + --spectrum-asterisk-icon-size-200:12px; + --spectrum-asterisk-icon-size-300:12px; + --spectrum-checkmark-icon-size-50:12px; + --spectrum-checkmark-icon-size-75:12px; + --spectrum-checkmark-icon-size-100:14px; + --spectrum-checkmark-icon-size-200:14px; + --spectrum-checkmark-icon-size-300:16px; + --spectrum-checkmark-icon-size-400:18px; + --spectrum-checkmark-icon-size-500:20px; + --spectrum-checkmark-icon-size-600:24px; + --spectrum-chevron-icon-size-50:8px; + --spectrum-chevron-icon-size-75:12px; + --spectrum-chevron-icon-size-100:14px; + --spectrum-chevron-icon-size-200:14px; + --spectrum-chevron-icon-size-300:16px; + --spectrum-chevron-icon-size-400:18px; + --spectrum-chevron-icon-size-500:20px; + --spectrum-chevron-icon-size-600:24px; + --spectrum-corner-triangle-icon-size-75:6px; + --spectrum-corner-triangle-icon-size-100:7px; + --spectrum-corner-triangle-icon-size-200:8px; + --spectrum-corner-triangle-icon-size-300:8px; + --spectrum-cross-icon-size-75:10px; + --spectrum-cross-icon-size-100:10px; + --spectrum-cross-icon-size-200:12px; + --spectrum-cross-icon-size-300:14px; + --spectrum-cross-icon-size-400:16px; + --spectrum-cross-icon-size-500:16px; + --spectrum-cross-icon-size-600:18px; + --spectrum-dash-icon-size-50:10px; + --spectrum-dash-icon-size-75:10px; + --spectrum-dash-icon-size-100:12px; + --spectrum-dash-icon-size-200:14px; + --spectrum-dash-icon-size-300:16px; + --spectrum-dash-icon-size-400:18px; + --spectrum-dash-icon-size-500:20px; + --spectrum-dash-icon-size-600:22px; + --spectrum-checkbox-control-size-small:16px; + --spectrum-checkbox-control-size-medium:18px; + --spectrum-checkbox-control-size-large:20px; + --spectrum-checkbox-control-size-extra-large:22px; + --spectrum-checkbox-top-to-control-small:7px; + --spectrum-checkbox-top-to-control-medium:11px; + --spectrum-checkbox-top-to-control-large:15px; + --spectrum-checkbox-top-to-control-extra-large:19px; + --spectrum-switch-control-width-small:32px; + --spectrum-switch-control-width-medium:36px; + --spectrum-switch-control-width-large:41px; + --spectrum-switch-control-width-extra-large:46px; + --spectrum-switch-control-height-small:16px; + --spectrum-switch-control-height-medium:18px; + --spectrum-switch-control-height-large:20px; + --spectrum-switch-control-height-extra-large:22px; + --spectrum-switch-top-to-control-small:7px; + --spectrum-switch-top-to-control-medium:11px; + --spectrum-switch-top-to-control-large:15px; + --spectrum-switch-top-to-control-extra-large:19px; + --spectrum-radio-button-control-size-small:16px; + --spectrum-radio-button-control-size-medium:18px; + --spectrum-radio-button-control-size-large:20px; + --spectrum-radio-button-control-size-extra-large:22px; + --spectrum-radio-button-top-to-control-small:7px; + --spectrum-radio-button-top-to-control-medium:11px; + --spectrum-radio-button-top-to-control-large:15px; + --spectrum-radio-button-top-to-control-extra-large:19px; + --spectrum-field-label-text-to-asterisk-small:5px; + --spectrum-field-label-text-to-asterisk-medium:5px; + --spectrum-field-label-text-to-asterisk-large:6px; + --spectrum-field-label-text-to-asterisk-extra-large:6px; + --spectrum-field-label-top-to-asterisk-small:11px; + --spectrum-field-label-top-to-asterisk-medium:15px; + --spectrum-field-label-top-to-asterisk-large:19px; + --spectrum-field-label-top-to-asterisk-extra-large:24px; + --spectrum-field-label-top-margin-medium: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; + --spectrum-field-label-to-component-quiet-extra-large:-19px; + --spectrum-help-text-top-to-workflow-icon-small:5px; + --spectrum-help-text-top-to-workflow-icon-medium:4px; + --spectrum-help-text-top-to-workflow-icon-large:8px; + --spectrum-help-text-top-to-workflow-icon-extra-large:11px; + --spectrum-status-light-dot-size-medium:10px; + --spectrum-status-light-dot-size-large:12px; + --spectrum-status-light-dot-size-extra-large:12px; + --spectrum-status-light-top-to-dot-small:11px; + --spectrum-status-light-top-to-dot-medium:15px; + --spectrum-status-light-top-to-dot-large:19px; + --spectrum-status-light-top-to-dot-extra-large:24px; + --spectrum-action-button-edge-to-hold-icon-medium:5px; + --spectrum-action-button-edge-to-hold-icon-large:6px; + --spectrum-action-button-edge-to-hold-icon-extra-large:7px; + --spectrum-tooltip-tip-width:10px; + --spectrum-tooltip-tip-height:5px; + --spectrum-tooltip-maximum-width:200px; + --spectrum-progress-circle-size-small:20px; + --spectrum-progress-circle-size-medium:40px; + --spectrum-progress-circle-size-large:80px; + --spectrum-progress-circle-thickness-small:3px; + --spectrum-progress-circle-thickness-medium:4px; + --spectrum-progress-circle-thickness-large:5px; + --spectrum-toast-height:56px; + --spectrum-toast-maximum-width:420px; + --spectrum-toast-top-to-workflow-icon:17px; + --spectrum-toast-top-to-text:16px; + --spectrum-toast-bottom-to-text:19px; + --spectrum-action-bar-height:56px; + --spectrum-action-bar-top-to-item-counter:16px; + --spectrum-swatch-size-extra-small:20px; + --spectrum-swatch-size-small:30px; + --spectrum-swatch-size-medium:40px; + --spectrum-swatch-size-large:50px; + --spectrum-progress-bar-thickness-small:5px; + --spectrum-progress-bar-thickness-medium:8px; + --spectrum-progress-bar-thickness-large:10px; + --spectrum-progress-bar-thickness-extra-large:13px; + --spectrum-meter-width:240px; + --spectrum-meter-thickness-small:5px; + --spectrum-meter-thickness-large:8px; + --spectrum-tag-top-to-avatar-small:5px; + --spectrum-tag-top-to-avatar-medium:7px; + --spectrum-tag-top-to-avatar-large:11px; + --spectrum-tag-top-to-cross-icon-small:10px; + --spectrum-tag-top-to-cross-icon-medium:15px; + --spectrum-tag-top-to-cross-icon-large:19px; + --spectrum-popover-top-to-content-area:5px; + --spectrum-menu-item-edge-to-content-not-selected-small:24px; + --spectrum-menu-item-edge-to-content-not-selected-medium:42px; + --spectrum-menu-item-edge-to-content-not-selected-large:47px; + --spectrum-menu-item-edge-to-content-not-selected-extra-large:54px; + --spectrum-menu-item-top-to-disclosure-icon-small:9px; + --spectrum-menu-item-top-to-disclosure-icon-medium:13px; + --spectrum-menu-item-top-to-disclosure-icon-large:17px; + --spectrum-menu-item-top-to-disclosure-icon-extra-large:22px; + --spectrum-menu-item-top-to-selected-icon-small:9px; + --spectrum-menu-item-top-to-selected-icon-medium:13px; + --spectrum-menu-item-top-to-selected-icon-large:17px; + --spectrum-menu-item-top-to-selected-icon-extra-large:22px; + --spectrum-slider-control-height-small:18px; + --spectrum-slider-control-height-medium:20px; + --spectrum-slider-control-height-large:22px; + --spectrum-slider-control-height-extra-large:26px; + --spectrum-slider-handle-size-small:18px; + --spectrum-slider-handle-size-medium:20px; + --spectrum-slider-handle-size-large:22px; + --spectrum-slider-handle-size-extra-large:26px; + --spectrum-slider-handle-border-width-down-small:7px; + --spectrum-slider-handle-border-width-down-medium:8px; + --spectrum-slider-handle-border-width-down-large:9px; + --spectrum-slider-handle-border-width-down-extra-large:11px; + --spectrum-slider-bottom-to-handle-small:6px; + --spectrum-slider-bottom-to-handle-medium:10px; + --spectrum-slider-bottom-to-handle-large:14px; + --spectrum-slider-bottom-to-handle-extra-large:17px; + --spectrum-slider-control-to-field-label-small:6px; + --spectrum-slider-control-to-field-label-medium:10px; + --spectrum-slider-control-to-field-label-large:14px; + --spectrum-slider-control-to-field-label-extra-large:17px; + --spectrum-picker-visual-to-disclosure-icon-small:9px; + --spectrum-picker-visual-to-disclosure-icon-medium:10px; + --spectrum-picker-visual-to-disclosure-icon-large:11px; + --spectrum-picker-visual-to-disclosure-icon-extra-large:13px; + --spectrum-text-area-minimum-width:140px; + --spectrum-text-area-minimum-height:70px; + --spectrum-combo-box-visual-to-field-button-small:9px; + --spectrum-combo-box-visual-to-field-button-medium:10px; + --spectrum-combo-box-visual-to-field-button-large:11px; + --spectrum-combo-box-visual-to-field-button-extra-large:13px; + --spectrum-thumbnail-size-50:20px; + --spectrum-thumbnail-size-75:22px; + --spectrum-thumbnail-size-100:26px; + --spectrum-thumbnail-size-200:28px; + --spectrum-thumbnail-size-300:32px; + --spectrum-thumbnail-size-400:36px; + --spectrum-thumbnail-size-500:40px; + --spectrum-thumbnail-size-600:46px; + --spectrum-thumbnail-size-700:50px; + --spectrum-thumbnail-size-800:55px; + --spectrum-thumbnail-size-900:62px; + --spectrum-thumbnail-size-1000:70px; + --spectrum-alert-dialog-title-size:var(--spectrum-heading-size-xs); + --spectrum-alert-dialog-description-size:var(--spectrum-body-size-xs); + --spectrum-opacity-checkerboard-square-size:10px; + --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xxs); + --spectrum-contextual-help-body-size:var(--spectrum-body-size-xs); + --spectrum-breadcrumbs-height-multiline:84px; + --spectrum-breadcrumbs-top-to-text:17px; + --spectrum-breadcrumbs-top-to-text-compact:16px; + --spectrum-breadcrumbs-top-to-text-multiline:15px; + --spectrum-breadcrumbs-bottom-to-text:19px; + --spectrum-breadcrumbs-bottom-to-text-compact:19px; + --spectrum-breadcrumbs-bottom-to-text-multiline:10px; + --spectrum-breadcrumbs-start-edge-to-text:9px; + --spectrum-breadcrumbs-top-text-to-bottom-text:11px; + --spectrum-breadcrumbs-top-to-separator-icon:25px; + --spectrum-breadcrumbs-top-to-separator-icon-compact:23px; + --spectrum-breadcrumbs-top-to-separator-icon-multiline:20px; + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline:15px; + --spectrum-breadcrumbs-top-to-truncated-menu:10px; + --spectrum-breadcrumbs-top-to-truncated-menu-compact:5px; + --spectrum-avatar-size-50:20px; + --spectrum-avatar-size-75:22px; + --spectrum-avatar-size-100:26px; + --spectrum-avatar-size-200:28px; + --spectrum-avatar-size-300:32px; + --spectrum-avatar-size-400:36px; + --spectrum-avatar-size-500:40px; + --spectrum-avatar-size-600:46px; + --spectrum-avatar-size-700:50px; + --spectrum-alert-banner-minimum-height:64px; + --spectrum-alert-banner-width:680px; + --spectrum-alert-banner-top-to-workflow-icon:21px; + --spectrum-alert-banner-top-to-text:21px; + --spectrum-alert-banner-bottom-to-text:22px; + --spectrum-rating-indicator-width:22px; + --spectrum-rating-indicator-to-icon:5px; + --spectrum-color-area-width:240px; + --spectrum-color-area-minimum-width:80px; + --spectrum-color-area-height:240px; + --spectrum-color-area-minimum-height:80px; + --spectrum-color-wheel-width:240px; + --spectrum-color-wheel-minimum-width:219px; + --spectrum-color-slider-length:240px; + --spectrum-color-slider-minimum-length:100px; + --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-coach-mark-width:216px; + --spectrum-coach-mark-minimum-width:216px; + --spectrum-coach-mark-maximum-width:248px; + --spectrum-coach-mark-edge-to-content:var(--spectrum-spacing-300); + --spectrum-coach-mark-pagination-text-to-bottom-edge:22px; + --spectrum-coach-mark-media-height:162px; + --spectrum-coach-mark-media-minimum-height:121px; + --spectrum-coach-mark-title-size:var(--spectrum-heading-size-xxs); + --spectrum-coach-mark-body-size:var(--spectrum-body-size-xs); + --spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-xs); + --spectrum-accordion-top-to-text-regular-small:7px; + --spectrum-accordion-small-top-to-text-spacious:12px; + --spectrum-accordion-top-to-text-regular-medium:9px; + --spectrum-accordion-top-to-text-spacious-medium:14px; + --spectrum-accordion-top-to-text-compact-large:7px; + --spectrum-accordion-top-to-text-regular-large:12px; + --spectrum-accordion-top-to-text-spacious-large:14px; + --spectrum-accordion-top-to-text-compact-extra-large:7px; + --spectrum-accordion-top-to-text-regular-extra-large:12px; + --spectrum-accordion-top-to-text-spacious-extra-large:14px; + --spectrum-accordion-bottom-to-text-compact-small:4px; + --spectrum-accordion-bottom-to-text-regular-small:9px; + --spectrum-accordion-bottom-to-text-spacious-small:14px; + --spectrum-accordion-bottom-to-text-compact-medium:8px; + --spectrum-accordion-bottom-to-text-regular-medium:13px; + --spectrum-accordion-bottom-to-text-spacious-medium:18px; + --spectrum-accordion-bottom-to-text-compact-large:9px; + --spectrum-accordion-bottom-to-text-regular-large:14px; + --spectrum-accordion-bottom-to-text-spacious-large:19px; + --spectrum-accordion-bottom-to-text-compact-extra-large:10px; + --spectrum-accordion-bottom-to-text-regular-extra-large:15px; + --spectrum-accordion-bottom-to-text-spacious-extra-large:21px; + --spectrum-accordion-minimum-width:250px; + --spectrum-accordion-content-area-top-to-content:10px; + --spectrum-accordion-content-area-bottom-to-content:20px; + --spectrum-color-handle-size:20px; + --spectrum-color-handle-size-key-focus:40px; + --spectrum-table-column-header-row-top-to-text-small:10px; + --spectrum-table-column-header-row-top-to-text-medium:9px; + --spectrum-table-column-header-row-top-to-text-large:13px; + --spectrum-table-column-header-row-top-to-text-extra-large:16px; + --spectrum-table-column-header-row-bottom-to-text-small:11px; + --spectrum-table-column-header-row-bottom-to-text-medium:10px; + --spectrum-table-column-header-row-bottom-to-text-large:13px; + --spectrum-table-column-header-row-bottom-to-text-extra-large:17px; + --spectrum-table-row-height-small-regular:40px; + --spectrum-table-row-height-medium-regular:50px; + --spectrum-table-row-height-large-regular:60px; + --spectrum-table-row-height-extra-large-regular:70px; + --spectrum-table-row-height-small-spacious:50px; + --spectrum-table-row-height-medium-spacious:60px; + --spectrum-table-row-height-large-spacious:70px; + --spectrum-table-row-height-extra-large-spacious:80px; + --spectrum-table-row-top-to-text-small-regular:10px; + --spectrum-table-row-top-to-text-medium-regular:14px; + --spectrum-table-row-top-to-text-large-regular:18px; + --spectrum-table-row-top-to-text-extra-large-regular:21px; + --spectrum-table-row-bottom-to-text-small-regular:11px; + --spectrum-table-row-bottom-to-text-medium-regular:15px; + --spectrum-table-row-bottom-to-text-large-regular:18px; + --spectrum-table-row-bottom-to-text-extra-large-regular:22px; + --spectrum-table-row-top-to-text-small-spacious:15px; + --spectrum-table-row-top-to-text-medium-spacious:18px; + --spectrum-table-row-top-to-text-large-spacious:23px; + --spectrum-table-row-top-to-text-extra-large-spacious:26px; + --spectrum-table-row-bottom-to-text-small-spacious:16px; + --spectrum-table-row-bottom-to-text-medium-spacious:18px; + --spectrum-table-row-bottom-to-text-large-spacious:23px; + --spectrum-table-row-bottom-to-text-extra-large-spacious:27px; + --spectrum-table-checkbox-to-text:30px; + --spectrum-table-header-row-checkbox-to-top-small:14px; + --spectrum-table-header-row-checkbox-to-top-medium:13px; + --spectrum-table-header-row-checkbox-to-top-large:17px; + --spectrum-table-header-row-checkbox-to-top-extra-large:21px; + --spectrum-table-row-checkbox-to-top-small-compact:9px; + --spectrum-table-row-checkbox-to-top-small-regular:14px; + --spectrum-table-row-checkbox-to-top-small-spacious:19px; + --spectrum-table-row-checkbox-to-top-medium-compact:13px; + --spectrum-table-row-checkbox-to-top-medium-regular:18px; + --spectrum-table-row-checkbox-to-top-medium-spacious:23px; + --spectrum-table-row-checkbox-to-top-large-compact:17px; + --spectrum-table-row-checkbox-to-top-large-regular:22px; + --spectrum-table-row-checkbox-to-top-large-spacious:27px; + --spectrum-table-row-checkbox-to-top-extra-large-compact:21px; + --spectrum-table-row-checkbox-to-top-extra-large-regular:26px; + --spectrum-table-row-checkbox-to-top-extra-large-spacious:31px; + --spectrum-table-section-header-row-height-small:30px; + --spectrum-table-section-header-row-height-medium:40px; + --spectrum-table-section-header-row-height-large:50px; + --spectrum-table-section-header-row-height-extra-large:60px; + --spectrum-table-thumbnail-to-top-minimum-small-compact:5px; + --spectrum-table-thumbnail-to-top-minimum-medium-compact:6px; + --spectrum-table-thumbnail-to-top-minimum-large-compact:9px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact:10px; + --spectrum-table-thumbnail-to-top-minimum-small-regular:6px; + --spectrum-table-thumbnail-to-top-minimum-medium-regular:9px; + --spectrum-table-thumbnail-to-top-minimum-large-regular:10px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular:10px; + --spectrum-table-thumbnail-to-top-minimum-small-spacious:9px; + --spectrum-table-thumbnail-to-top-minimum-medium-spacious:10px; + --spectrum-table-thumbnail-to-top-minimum-large-spacious:10px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious:12px; + --spectrum-tab-item-to-tab-item-horizontal-small:27px; + --spectrum-tab-item-to-tab-item-horizontal-medium:30px; + --spectrum-tab-item-to-tab-item-horizontal-large:33px; + --spectrum-tab-item-to-tab-item-horizontal-extra-large:36px; + --spectrum-tab-item-to-tab-item-vertical-small:5px; + --spectrum-tab-item-to-tab-item-vertical-medium:5px; + --spectrum-tab-item-to-tab-item-vertical-large:6px; + --spectrum-tab-item-to-tab-item-vertical-extra-large:6px; + --spectrum-tab-item-start-to-edge-small:13px; + --spectrum-tab-item-start-to-edge-medium:15px; + --spectrum-tab-item-start-to-edge-large:17px; + --spectrum-tab-item-start-to-edge-extra-large:19px; + --spectrum-tab-item-top-to-text-small:14px; + --spectrum-tab-item-bottom-to-text-small:15px; + --spectrum-tab-item-top-to-text-medium:18px; + --spectrum-tab-item-bottom-to-text-medium:19px; + --spectrum-tab-item-top-to-text-large:22px; + --spectrum-tab-item-bottom-to-text-large:22px; + --spectrum-tab-item-top-to-text-extra-large:25px; + --spectrum-tab-item-bottom-to-text-extra-large:25px; + --spectrum-tab-item-top-to-text-compact-small:5px; + --spectrum-tab-item-bottom-to-text-compact-small:6px; + --spectrum-tab-item-top-to-text-compact-medium:9px; + --spectrum-tab-item-bottom-to-text-compact-medium:10px; + --spectrum-tab-item-top-to-text-compact-large:12px; + --spectrum-tab-item-bottom-to-text-compact-large:14px; + --spectrum-tab-item-top-to-text-compact-extra-large:15px; + --spectrum-tab-item-bottom-to-text-compact-extra-large:17px; + --spectrum-tab-item-top-to-workflow-icon-small:15px; + --spectrum-tab-item-top-to-workflow-icon-medium:19px; + --spectrum-tab-item-top-to-workflow-icon-large:23px; + --spectrum-tab-item-top-to-workflow-icon-extra-large:26px; + --spectrum-tab-item-top-to-workflow-icon-compact-small:5px; + --spectrum-tab-item-top-to-workflow-icon-compact-medium:9px; + --spectrum-tab-item-top-to-workflow-icon-compact-large:13px; + --spectrum-tab-item-top-to-workflow-icon-compact-extra-large:16px; + --spectrum-tab-item-focus-indicator-gap-small:9px; + --spectrum-tab-item-focus-indicator-gap-medium:10px; + --spectrum-tab-item-focus-indicator-gap-large:11px; + --spectrum-tab-item-focus-indicator-gap-extra-large:12px; + --spectrum-side-navigation-width:240px; + --spectrum-side-navigation-minimum-width:200px; + --spectrum-side-navigation-maximum-width:300px; + --spectrum-side-navigation-second-level-edge-to-text:30px; + --spectrum-side-navigation-third-level-edge-to-text:45px; + --spectrum-side-navigation-with-icon-second-level-edge-to-text:62px; + --spectrum-side-navigation-with-icon-third-level-edge-to-text:77px; + --spectrum-side-navigation-item-to-item:5px; + --spectrum-side-navigation-item-to-header:30px; + --spectrum-side-navigation-header-to-item:10px; + --spectrum-side-navigation-bottom-to-text:10px; + --spectrum-tray-top-to-content-area:5px; + --spectrum-accordion-top-to-text-spacious-small:12px; + --spectrum-drop-shadow-y:2px; + --spectrum-drop-shadow-blur:6px; + --spectrum-text-to-visual-50:8px; + --spectrum-text-to-visual-75:9px; + --spectrum-text-to-visual-100:10px; + --spectrum-text-to-visual-200:11px; + --spectrum-text-to-visual-300:13px; + --spectrum-text-to-control-75:11px; + --spectrum-text-to-control-100:13px; + --spectrum-text-to-control-200:14px; + --spectrum-text-to-control-300:16px; + --spectrum-component-height-50:26px; + --spectrum-component-height-75:30px; + --spectrum-component-height-100:40px; + --spectrum-component-height-200:50px; + --spectrum-component-height-300:60px; + --spectrum-component-height-400:70px; + --spectrum-component-height-500:80px; + --spectrum-component-pill-edge-to-visual-75:13px; + --spectrum-component-pill-edge-to-visual-100:17px; + --spectrum-component-pill-edge-to-visual-200:22px; + --spectrum-component-pill-edge-to-visual-300:27px; + --spectrum-component-pill-edge-to-visual-only-75:5px; + --spectrum-component-pill-edge-to-visual-only-100:9px; + --spectrum-component-pill-edge-to-visual-only-200:13px; + --spectrum-component-pill-edge-to-visual-only-300:16px; + --spectrum-component-pill-edge-to-text-75:15px; + --spectrum-component-pill-edge-to-text-100:20px; + --spectrum-component-pill-edge-to-text-200:25px; + --spectrum-component-pill-edge-to-text-300:30px; + --spectrum-component-edge-to-visual-50:7px; + --spectrum-component-edge-to-visual-75:9px; + --spectrum-component-edge-to-visual-100:12px; + --spectrum-component-edge-to-visual-200:16px; + --spectrum-component-edge-to-visual-300:19px; + --spectrum-component-edge-to-visual-only-50:4px; + --spectrum-component-edge-to-visual-only-75:5px; + --spectrum-component-edge-to-visual-only-100:9px; + --spectrum-component-edge-to-visual-only-200:13px; + --spectrum-component-edge-to-visual-only-300:16px; + --spectrum-component-edge-to-text-50:10px; + --spectrum-component-edge-to-text-75:11px; + --spectrum-component-edge-to-text-100:15px; + --spectrum-component-edge-to-text-200:19px; + --spectrum-component-edge-to-text-300:22px; + --spectrum-component-top-to-workflow-icon-50:4px; + --spectrum-component-top-to-workflow-icon-75:5px; + --spectrum-component-top-to-workflow-icon-100:9px; + --spectrum-component-top-to-workflow-icon-200:13px; + --spectrum-component-top-to-workflow-icon-300:16px; + --spectrum-component-top-to-text-50:4px; + --spectrum-component-top-to-text-75:5px; + --spectrum-component-top-to-text-100:8px; + --spectrum-component-top-to-text-200:12px; + --spectrum-component-top-to-text-300:15px; + --spectrum-component-bottom-to-text-50:6px; + --spectrum-component-bottom-to-text-75:6px; + --spectrum-component-bottom-to-text-100:11px; + --spectrum-component-bottom-to-text-200:14px; + --spectrum-component-bottom-to-text-300:18px; + --spectrum-component-to-menu-small:7px; + --spectrum-component-to-menu-medium:8px; + --spectrum-component-to-menu-large:9px; + --spectrum-component-to-menu-extra-large:10px; + --spectrum-field-edge-to-disclosure-icon-75:9px; + --spectrum-field-edge-to-disclosure-icon-100:13px; + --spectrum-field-edge-to-disclosure-icon-200:17px; + --spectrum-field-edge-to-disclosure-icon-300:22px; + --spectrum-field-end-edge-to-disclosure-icon-75:9px; + --spectrum-field-end-edge-to-disclosure-icon-100:13px; + --spectrum-field-end-edge-to-disclosure-icon-200:17px; + --spectrum-field-end-edge-to-disclosure-icon-300:22px; + --spectrum-field-top-to-disclosure-icon-75:9px; + --spectrum-field-top-to-disclosure-icon-100:13px; + --spectrum-field-top-to-disclosure-icon-200:17px; + --spectrum-field-top-to-disclosure-icon-300:22px; + --spectrum-field-top-to-alert-icon-small:5px; + --spectrum-field-top-to-alert-icon-medium:9px; + --spectrum-field-top-to-alert-icon-large:13px; + --spectrum-field-top-to-alert-icon-extra-large:16px; + --spectrum-field-top-to-validation-icon-small:9px; + --spectrum-field-top-to-validation-icon-medium:13px; + --spectrum-field-top-to-validation-icon-large:17px; + --spectrum-field-top-to-validation-icon-extra-large:22px; + --spectrum-field-top-to-progress-circle-small:7px; + --spectrum-field-top-to-progress-circle-medium:12px; + --spectrum-field-top-to-progress-circle-large:17px; + --spectrum-field-top-to-progress-circle-extra-large:22px; + --spectrum-field-edge-to-alert-icon-small:11px; + --spectrum-field-edge-to-alert-icon-medium:15px; + --spectrum-field-edge-to-alert-icon-large:19px; + --spectrum-field-edge-to-alert-icon-extra-large:22px; + --spectrum-field-edge-to-validation-icon-small:11px; + --spectrum-field-edge-to-validation-icon-medium:15px; + --spectrum-field-edge-to-validation-icon-large:19px; + --spectrum-field-edge-to-validation-icon-extra-large:22px; + --spectrum-field-text-to-alert-icon-small:10px; + --spectrum-field-text-to-alert-icon-medium:15px; + --spectrum-field-text-to-alert-icon-large:19px; + --spectrum-field-text-to-alert-icon-extra-large:22px; + --spectrum-field-text-to-validation-icon-small:10px; + --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; + --spectrum-character-count-to-field-quiet-extra-large:-5px; + --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: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; + --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:22px; + --spectrum-navigational-indicator-top-to-back-icon-small:7px; + --spectrum-navigational-indicator-top-to-back-icon-medium:12px; + --spectrum-navigational-indicator-top-to-back-icon-large:16px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large:19px; + --spectrum-color-control-track-width:30px; + --spectrum-font-size-50:13px; + --spectrum-font-size-75:15px; + --spectrum-font-size-100:17px; + --spectrum-font-size-200:19px; + --spectrum-font-size-300:22px; + --spectrum-font-size-400:24px; + --spectrum-font-size-500:27px; + --spectrum-font-size-600:31px; + --spectrum-font-size-700:34px; + --spectrum-font-size-800:39px; + --spectrum-font-size-900:44px; + --spectrum-font-size-1000:49px; + --spectrum-font-size-1100:55px; + --spectrum-font-size-1200:62px; + --spectrum-font-size-1300:70px; + --spectrum-slider-tick-mark-height:13px; + --spectrum-slider-ramp-track-height:20px; + + --spectrum-colorwheel-path:"M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0"; + --spectrum-colorwheel-path-borders:"M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; + --spectrum-colorwheel-colorarea-container-size:182px; + + --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-secondary); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small:34px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:42px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large:47px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:54px; + + --spectrum-menu-item-checkmark-height-small:12px; + --spectrum-menu-item-checkmark-height-medium:14px; + --spectrum-menu-item-checkmark-height-large:16px; + --spectrum-menu-item-checkmark-height-extra-large:16px; + + --spectrum-menu-item-checkmark-width-small:12px; + --spectrum-menu-item-checkmark-width-medium:14px; + --spectrum-menu-item-checkmark-width-large:16px; + --spectrum-menu-item-checkmark-width-extra-large:16px; + + --spectrum-rating-icon-spacing:var(--spectrum-spacing-100); + + --spectrum-button-top-to-text-small:6px; + --spectrum-button-bottom-to-text-small:5px; + --spectrum-button-top-to-text-medium:9px; + --spectrum-button-bottom-to-text-medium:10px; + --spectrum-button-top-to-text-large:12px; + --spectrum-button-bottom-to-text-large:13px; + --spectrum-button-top-to-text-extra-large:16px; + --spectrum-button-bottom-to-text-extra-large:17px; + + --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-200); + --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-200); + + --spectrum-alert-dialog-padding:var(--spectrum-spacing-400); + --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-600); + + --spectrum-coach-indicator-gap:8px; + --spectrum-coach-indicator-ring-diameter:20px; + --spectrum-coach-indicator-quiet-ring-diameter:10px; + + --spectrum-coachmark-buttongroup-display:none; + --spectrum-coachmark-buttongroup-mobile-display:flex; + --spectrum-coachmark-menu-display:none; + --spectrum-coachmark-menu-mobile-display:inline-flex; + --spectrum-workflow-icon-size-xxl:40px; + --spectrum-workflow-icon-size-xxs:15px; + + --spectrum-treeview-item-indentation-medium:20px; + --spectrum-treeview-item-indentation-small:15px; + --spectrum-treeview-item-indentation-large:25px; + --spectrum-treeview-item-indentation-extra-large:30px; + --spectrum-treeview-indicator-inset-block-start:6px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:2px; + + --spectrum-dialog-confirm-entry-animation-distance:25px; + --spectrum-dialog-confirm-hero-height:160px; + --spectrum-dialog-confirm-border-radius:5px; + --spectrum-dialog-confirm-title-text-size:19px; + --spectrum-dialog-confirm-description-text-size:15px; + --spectrum-dialog-confirm-padding-grid:24px; + + --spectrum-datepicker-initial-width:160px; + --spectrum-datepicker-generic-padding:15px; + --spectrum-datepicker-dash-line-height:30px; + --spectrum-datepicker-width-quiet-first:90px; + --spectrum-datepicker-width-quiet-second:20px; + --spectrum-datepicker-datetime-width-first:45px; + --spectrum-datepicker-invalid-icon-to-button:10px; + --spectrum-datepicker-invalid-icon-to-button-quiet:9px; + --spectrum-datepicker-input-datetime-width:30px; + + --spectrum-pagination-textfield-width:60px; + --spectrum-pagination-item-inline-spacing:6px; + + --spectrum-dial-border-radius:20px; + --spectrum-dial-handle-position:10px; + --spectrum-dial-handle-block-margin:20px; + --spectrum-dial-handle-inline-margin:20px; + --spectrum-dial-controls-margin:10px; + --spectrum-dial-label-gap-y:6px; + --spectrum-dial-label-container-top-to-text:5px; + + --spectrum-assetcard-focus-ring-border-radius:9px; + --spectrum-assetcard-selectionindicator-margin:15px; + --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xxs); + --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xxs); + --spectrum-assetcard-content-font-size:var(--spectrum-body-size-xs); + + --spectrum-tooltip-animation-distance:5px; + + --spectrum-ui-icon-medium-display:none; + --spectrum-ui-icon-large-display:block; + + --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-200); +} + +.spectrum--light{ + --spectrum-overlay-opacity:0.4; + --spectrum-background-layer-2-color:var(--spectrum-gray-25); + --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-700); + --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-800); + --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-800); + --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-800); + --spectrum-accent-background-color-default:var(--spectrum-accent-color-900); + --spectrum-accent-background-color-hover:var(--spectrum-accent-color-1000); + --spectrum-accent-background-color-down:var(--spectrum-accent-color-1000); + --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-1000); + --spectrum-informative-background-color-default:var(--spectrum-informative-color-900); + --spectrum-informative-background-color-hover:var(--spectrum-informative-color-1000); + --spectrum-informative-background-color-down:var(--spectrum-informative-color-1000); + --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-1000); + --spectrum-negative-background-color-default:var(--spectrum-negative-color-900); + --spectrum-negative-background-color-hover:var(--spectrum-negative-color-1000); + --spectrum-negative-background-color-down:var(--spectrum-negative-color-1000); + --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-1000); + --spectrum-positive-background-color-default:var(--spectrum-positive-color-900); + --spectrum-positive-background-color-hover:var(--spectrum-positive-color-1000); + --spectrum-positive-background-color-down:var(--spectrum-positive-color-1000); + --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-1000); + --spectrum-notice-background-color-default:var(--spectrum-notice-color-600); + --spectrum-gray-background-color-default:var(--spectrum-gray-700); + --spectrum-red-background-color-default:var(--spectrum-red-900); + --spectrum-orange-background-color-default:var(--spectrum-orange-600); + --spectrum-yellow-background-color-default:var(--spectrum-yellow-400); + --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-500); + --spectrum-celery-background-color-default:var(--spectrum-celery-600); + --spectrum-green-background-color-default:var(--spectrum-green-900); + --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-900); + --spectrum-cyan-background-color-default:var(--spectrum-cyan-900); + --spectrum-blue-background-color-default:var(--spectrum-blue-900); + --spectrum-indigo-background-color-default:var(--spectrum-indigo-900); + --spectrum-purple-background-color-default:var(--spectrum-purple-900); + --spectrum-fuchsia-background-color-default:var(--spectrum-fuchsia-900); + --spectrum-magenta-background-color-default:var(--spectrum-magenta-900); + --spectrum-neutral-visual-color:var(--spectrum-gray-500); + --spectrum-accent-visual-color:var(--spectrum-accent-color-800); + --spectrum-informative-visual-color:var(--spectrum-informative-color-800); + --spectrum-negative-visual-color:var(--spectrum-negative-color-800); + --spectrum-notice-visual-color:var(--spectrum-notice-color-700); + --spectrum-positive-visual-color:var(--spectrum-positive-color-700); + --spectrum-gray-visual-color:var(--spectrum-gray-500); + --spectrum-red-visual-color:var(--spectrum-red-800); + --spectrum-orange-visual-color:var(--spectrum-orange-700); + --spectrum-yellow-visual-color:var(--spectrum-yellow-600); + --spectrum-chartreuse-visual-color:var(--spectrum-chartreuse-600); + --spectrum-celery-visual-color:var(--spectrum-celery-700); + --spectrum-green-visual-color:var(--spectrum-green-700); + --spectrum-seafoam-visual-color:var(--spectrum-seafoam-700); + --spectrum-cyan-visual-color:var(--spectrum-cyan-600); + --spectrum-blue-visual-color:var(--spectrum-blue-800); + --spectrum-indigo-visual-color:var(--spectrum-indigo-800); + --spectrum-purple-visual-color:var(--spectrum-purple-800); + --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-800); + --spectrum-magenta-visual-color:var(--spectrum-magenta-800); + --spectrum-background-elevated-color:var(--spectrum-gray-25); + --spectrum-background-pasteboard-color:var(--spectrum-gray-100); + --spectrum-brown-visual-color:var(--spectrum-brown-800); + --spectrum-cinnamon-visual-color:var(--spectrum-cinnamon-800); + --spectrum-pink-visual-color:var(--spectrum-pink-800); + --spectrum-silver-visual-color:var(--spectrum-silver-800); + --spectrum-turquoise-visual-color:var(--spectrum-turquoise-800); + --spectrum-brown-background-color-default:var(--spectrum-brown-900); + --spectrum-cinnamon-background-color-default:var(--spectrum-cinnamon-900); + --spectrum-pink-background-color-default:var(--spectrum-pink-900); + --spectrum-silver-background-color-default:var(--spectrum-silver-900); + --spectrum-turquoise-background-color-default:var(--spectrum-turquoise-900); + --spectrum-drop-shadow-color-100-rgb:0, 0, 0; + --spectrum-drop-shadow-color-100-opacity:0.12; + --spectrum-drop-shadow-color-100:rgba(var(--spectrum-drop-shadow-color-100-rgb), var(--spectrum-drop-shadow-color-100-opacity)); + --spectrum-drop-shadow-color-200-rgb:0, 0, 0; + --spectrum-drop-shadow-color-200-opacity:0.16; + --spectrum-drop-shadow-color-200:rgba(var(--spectrum-drop-shadow-color-200-rgb), var(--spectrum-drop-shadow-color-200-opacity)); + --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-200); + --spectrum-gray-25-rgb:255, 255, 255; + --spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb)); + --spectrum-gray-50-rgb:248, 248, 248; + --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb:243, 243, 243; + --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb:233, 233, 233; + --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb:225, 225, 225; + --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb:218, 218, 218; + --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb:198, 198, 198; + --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb:143, 143, 143; + --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb:113, 113, 113; + --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb:80, 80, 80; + --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb:41, 41, 41; + --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb:19, 19, 19; + --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); + --spectrum-gray-1000-rgb:0, 0, 0; + --spectrum-gray-1000:rgba(var(--spectrum-gray-1000-rgb)); + --spectrum-blue-100-rgb:245, 249, 255; + --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb:229, 240, 254; + --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb:203, 226, 254; + --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb:172, 207, 253; + --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb:142, 185, 252; + --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb:114, 158, 253; + --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb:93, 137, 255; + --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb:75, 117, 255; + --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb:59, 99, 251; + --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb:39, 77, 234; + --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb:29, 62, 207; + --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb:21, 50, 173; + --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb:16, 40, 140; + --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb:12, 31, 105; + --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-blue-1500-rgb:14, 24, 67; + --spectrum-blue-1500:rgba(var(--spectrum-blue-1500-rgb)); + --spectrum-blue-1600-rgb:7, 11, 30; + --spectrum-blue-1600:rgba(var(--spectrum-blue-1600-rgb)); + --spectrum-red-100-rgb:255, 246, 245; + --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb:255, 235, 232; + --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb:255, 214, 209; + --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb:255, 188, 180; + --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb:255, 157, 145; + --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb:255, 118, 101; + --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb:255, 81, 61; + --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb:240, 56, 35; + --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb:215, 50, 32; + --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb:183, 40, 24; + --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb:156, 33, 19; + --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb:129, 27, 14; + --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb:104, 21, 10; + --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb:80, 16, 6; + --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); + --spectrum-red-1500-rgb:59, 11, 4; + --spectrum-red-1500:rgba(var(--spectrum-red-1500-rgb)); + --spectrum-red-1600-rgb:29, 5, 2; + --spectrum-red-1600:rgba(var(--spectrum-red-1600-rgb)); + --spectrum-orange-100-rgb:255, 246, 231; + --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb:255, 236, 207; + --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb:255, 218, 158; + --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb:255, 193, 94; + --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb:255, 162, 19; + --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb:252, 125, 0; + --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb:232, 106, 0; + --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb:212, 91, 0; + --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb:194, 78, 0; + --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb:167, 62, 0; + --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb:144, 51, 0; + --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb:118, 41, 0; + --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb:95, 32, 0; + --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb:73, 24, 0; + --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-orange-1500-rgb:52, 18, 0; + --spectrum-orange-1500:rgba(var(--spectrum-orange-1500-rgb)); + --spectrum-orange-1600-rgb:25, 8, 0; + --spectrum-orange-1600:rgba(var(--spectrum-orange-1600-rgb)); + --spectrum-yellow-100-rgb:255, 248, 204; + --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb:255, 241, 151; + --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb:255, 222, 44; + --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb:245, 199, 0; + --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb:230, 175, 0; + --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb:210, 149, 0; + --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb:193, 131, 0; + --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb:175, 116, 0; + --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb:158, 102, 0; + --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb:134, 85, 0; + --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb:114, 72, 0; + --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb:93, 59, 0; + --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb:75, 47, 0; + --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb:56, 35, 0; + --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-yellow-1500-rgb:40, 25, 0; + --spectrum-yellow-1500:rgba(var(--spectrum-yellow-1500-rgb)); + --spectrum-yellow-1600-rgb:18, 11, 0; + --spectrum-yellow-1600:rgba(var(--spectrum-yellow-1600-rgb)); + --spectrum-chartreuse-100-rgb:246, 251, 222; + --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb:234, 246, 173; + --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb:208, 236, 70; + --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb:182, 219, 0; + --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb:163, 196, 0; + --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb:143, 172, 0; + --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb:128, 153, 0; + --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb:114, 137, 0; + --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb:102, 122, 0; + --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb:86, 103, 0; + --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb:73, 87, 0; + --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb:60, 71, 0; + --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb:47, 57, 0; + --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb:35, 43, 0; + --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-chartreuse-1500-rgb:25, 30, 0; + --spectrum-chartreuse-1500:rgba(var(--spectrum-chartreuse-1500-rgb)); + --spectrum-chartreuse-1600-rgb:11, 14, 0; + --spectrum-chartreuse-1600:rgba(var(--spectrum-chartreuse-1600-rgb)); + --spectrum-celery-100-rgb:235, 255, 220; + --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb:197, 255, 156; + --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb:157, 247, 92; + --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb:129, 228, 58; + --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb:110, 206, 42; + --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb:93, 180, 31; + --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb:82, 161, 25; + --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb:72, 144, 20; + --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb:64, 129, 17; + --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb:52, 109, 12; + --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb:44, 92, 9; + --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb:35, 75, 6; + --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb:27, 60, 3; + --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb:19, 46, 0; + --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-celery-1500-rgb:12, 33, 0; + --spectrum-celery-1500:rgba(var(--spectrum-celery-1500-rgb)); + --spectrum-celery-1600-rgb:4, 15, 0; + --spectrum-celery-1600:rgba(var(--spectrum-celery-1600-rgb)); + --spectrum-green-100-rgb:237, 252, 241; + --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb:215, 247, 225; + --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb:173, 238, 197; + --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb:107, 227, 162; + --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb:43, 209, 125; + --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb:18, 184, 103; + --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb:11, 164, 93; + --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb:7, 147, 85; + --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb:5, 131, 78; + --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb:3, 110, 69; + --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb:2, 93, 60; + --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb:1, 76, 52; + --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb:0, 61, 44; + --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb:0, 46, 34; + --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); + --spectrum-green-1500-rgb:0, 33, 25; + --spectrum-green-1500:rgba(var(--spectrum-green-1500-rgb)); + --spectrum-green-1600-rgb:0, 15, 12; + --spectrum-green-1600:rgba(var(--spectrum-green-1600-rgb)); + --spectrum-seafoam-100-rgb:235, 251, 246; + --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb:211, 246, 234; + --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb:169, 237, 216; + --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb:92, 225, 194; + --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb:16, 207, 169; + --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb:13, 181, 149; + --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb:11, 162, 134; + --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb:9, 144, 120; + --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb:7, 129, 109; + --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb:5, 108, 92; + --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb:3, 92, 80; + --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb:1, 75, 67; + --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb:0, 60, 54; + --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb:0, 46, 40; + --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-seafoam-1500-rgb:0, 33, 29; + --spectrum-seafoam-1500:rgba(var(--spectrum-seafoam-1500-rgb)); + --spectrum-seafoam-1600-rgb:0, 15, 14; + --spectrum-seafoam-1600:rgba(var(--spectrum-seafoam-1600-rgb)); + --spectrum-cyan-100-rgb:238, 250, 254; + --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb:217, 244, 253; + --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb:183, 231, 252; + --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb:138, 213, 255; + --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb:92, 192, 255; + --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb:48, 167, 254; + --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb:29, 149, 231; + --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb:18, 134, 205; + --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb:11, 120, 179; + --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb:4, 102, 145; + --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb:0, 87, 121; + --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb:0, 71, 98; + --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb:0, 57, 78; + --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb:0, 43, 59; + --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-cyan-1500-rgb:0, 31, 43; + --spectrum-cyan-1500:rgba(var(--spectrum-cyan-1500-rgb)); + --spectrum-cyan-1600-rgb:0, 14, 20; + --spectrum-cyan-1600:rgba(var(--spectrum-cyan-1600-rgb)); + --spectrum-indigo-100-rgb:247, 248, 255; + --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb:235, 238, 255; + --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb:216, 222, 255; + --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb:192, 201, 255; + --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb:167, 178, 255; + --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb:145, 151, 254; + --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb:132, 128, 254; + --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb:122, 106, 253; + --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb:113, 85, 250; + --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb:99, 56, 238; + --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb:84, 36, 219; + --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb:69, 19, 191; + --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb:55, 6, 160; + --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb:42, 0, 129; + --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-indigo-1500-rgb:31, 0, 98; + --spectrum-indigo-1500:rgba(var(--spectrum-indigo-1500-rgb)); + --spectrum-indigo-1600-rgb:17, 0, 54; + --spectrum-indigo-1600:rgba(var(--spectrum-indigo-1600-rgb)); + --spectrum-purple-100-rgb:251, 247, 254; + --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb:244, 235, 252; + --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb:235, 218, 249; + --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb:221, 193, 246; + --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb:208, 167, 243; + --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb:191, 138, 238; + --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb:178, 114, 235; + --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb:166, 92, 231; + --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb:154, 71, 226; + --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb:134, 40, 217; + --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb:115, 13, 204; + --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb:93, 0, 177; + --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb:75, 0, 144; + --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb:59, 0, 111; + --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-purple-1500-rgb:44, 0, 84; + --spectrum-purple-1500:rgba(var(--spectrum-purple-1500-rgb)); + --spectrum-purple-1600-rgb:23, 0, 45; + --spectrum-purple-1600:rgba(var(--spectrum-purple-1600-rgb)); + --spectrum-fuchsia-100-rgb:254, 246, 255; + --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb:253, 233, 255; + --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb:250, 211, 255; + --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb:247, 181, 255; + --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb:243, 147, 255; + --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb:236, 105, 255; + --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb:223, 77, 245; + --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb:200, 68, 220; + --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb:181, 57, 200; + --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb:156, 40, 175; + --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb:135, 27, 154; + --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb:113, 15, 131; + --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb:92, 4, 109; + --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb:72, 0, 88; + --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-fuchsia-1500-rgb:54, 0, 66; + --spectrum-fuchsia-1500:rgba(var(--spectrum-fuchsia-1500-rgb)); + --spectrum-fuchsia-1600-rgb:29, 0, 35; + --spectrum-fuchsia-1600:rgba(var(--spectrum-fuchsia-1600-rgb)); + --spectrum-magenta-100-rgb:255, 245, 248; + --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb:255, 232, 240; + --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb:255, 213, 227; + --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb:255, 185, 208; + --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb:255, 152, 187; + --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb:255, 112, 159; + --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb:255, 72, 133; + --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb:240, 45, 110; + --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb:217, 35, 97; + --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb:186, 22, 80; + --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb:163, 5, 62; + --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb:136, 0, 51; + --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb:111, 0, 40; + --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb:86, 0, 30; + --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-magenta-1500-rgb:64, 0, 22; + --spectrum-magenta-1500:rgba(var(--spectrum-magenta-1500-rgb)); + --spectrum-magenta-1600-rgb:35, 0, 12; + --spectrum-magenta-1600:rgba(var(--spectrum-magenta-1600-rgb)); + --spectrum-pink-100-rgb:255, 246, 252; + --spectrum-pink-100:rgba(var(--spectrum-pink-100-rgb)); + --spectrum-pink-200-rgb:255, 232, 247; + --spectrum-pink-200:rgba(var(--spectrum-pink-200-rgb)); + --spectrum-pink-300-rgb:255, 211, 240; + --spectrum-pink-300:rgba(var(--spectrum-pink-300-rgb)); + --spectrum-pink-400-rgb:255, 181, 230; + --spectrum-pink-400:rgba(var(--spectrum-pink-400-rgb)); + --spectrum-pink-500-rgb:255, 148, 219; + --spectrum-pink-500:rgba(var(--spectrum-pink-500-rgb)); + --spectrum-pink-600-rgb:255, 103, 204; + --spectrum-pink-600:rgba(var(--spectrum-pink-600-rgb)); + --spectrum-pink-700-rgb:242, 76, 184; + --spectrum-pink-700:rgba(var(--spectrum-pink-700-rgb)); + --spectrum-pink-800-rgb:228, 52, 163; + --spectrum-pink-800:rgba(var(--spectrum-pink-800-rgb)); + --spectrum-pink-900-rgb:206, 42, 146; + --spectrum-pink-900:rgba(var(--spectrum-pink-900-rgb)); + --spectrum-pink-1000-rgb:176, 31, 123; + --spectrum-pink-1000:rgba(var(--spectrum-pink-1000-rgb)); + --spectrum-pink-1100-rgb:152, 22, 104; + --spectrum-pink-1100:rgba(var(--spectrum-pink-1100-rgb)); + --spectrum-pink-1200-rgb:128, 12, 85; + --spectrum-pink-1200:rgba(var(--spectrum-pink-1200-rgb)); + --spectrum-pink-1300-rgb:105, 3, 68; + --spectrum-pink-1300:rgba(var(--spectrum-pink-1300-rgb)); + --spectrum-pink-1400-rgb:83, 0, 53; + --spectrum-pink-1400:rgba(var(--spectrum-pink-1400-rgb)); + --spectrum-pink-1500-rgb:62, 0, 39; + --spectrum-pink-1500:rgba(var(--spectrum-pink-1500-rgb)); + --spectrum-pink-1600-rgb:33, 0, 21; + --spectrum-pink-1600:rgba(var(--spectrum-pink-1600-rgb)); + --spectrum-turquoise-100-rgb:238, 251, 251; + --spectrum-turquoise-100:rgba(var(--spectrum-turquoise-100-rgb)); + --spectrum-turquoise-200-rgb:209, 245, 245; + --spectrum-turquoise-200:rgba(var(--spectrum-turquoise-200-rgb)); + --spectrum-turquoise-300-rgb:169, 236, 237; + --spectrum-turquoise-300:rgba(var(--spectrum-turquoise-300-rgb)); + --spectrum-turquoise-400-rgb:111, 221, 228; + --spectrum-turquoise-400:rgba(var(--spectrum-turquoise-400-rgb)); + --spectrum-turquoise-500-rgb:39, 202, 216; + --spectrum-turquoise-500:rgba(var(--spectrum-turquoise-500-rgb)); + --spectrum-turquoise-600-rgb:15, 177, 192; + --spectrum-turquoise-600:rgba(var(--spectrum-turquoise-600-rgb)); + --spectrum-turquoise-700-rgb:12, 158, 171; + --spectrum-turquoise-700:rgba(var(--spectrum-turquoise-700-rgb)); + --spectrum-turquoise-800-rgb:10, 141, 153; + --spectrum-turquoise-800:rgba(var(--spectrum-turquoise-800-rgb)); + --spectrum-turquoise-900-rgb:8, 126, 137; + --spectrum-turquoise-900:rgba(var(--spectrum-turquoise-900-rgb)); + --spectrum-turquoise-1000-rgb:5, 107, 116; + --spectrum-turquoise-1000:rgba(var(--spectrum-turquoise-1000-rgb)); + --spectrum-turquoise-1100-rgb:3, 90, 98; + --spectrum-turquoise-1100:rgba(var(--spectrum-turquoise-1100-rgb)); + --spectrum-turquoise-1200-rgb:1, 74, 81; + --spectrum-turquoise-1200:rgba(var(--spectrum-turquoise-1200-rgb)); + --spectrum-turquoise-1300-rgb:0, 59, 65; + --spectrum-turquoise-1300:rgba(var(--spectrum-turquoise-1300-rgb)); + --spectrum-turquoise-1400-rgb:0, 44, 49; + --spectrum-turquoise-1400:rgba(var(--spectrum-turquoise-1400-rgb)); + --spectrum-turquoise-1500-rgb:0, 32, 35; + --spectrum-turquoise-1500:rgba(var(--spectrum-turquoise-1500-rgb)); + --spectrum-turquoise-1600-rgb:0, 15, 17; + --spectrum-turquoise-1600:rgba(var(--spectrum-turquoise-1600-rgb)); + --spectrum-brown-100-rgb:252, 247, 242; + --spectrum-brown-100:rgba(var(--spectrum-brown-100-rgb)); + --spectrum-brown-200-rgb:247, 238, 225; + --spectrum-brown-200:rgba(var(--spectrum-brown-200-rgb)); + --spectrum-brown-300-rgb:239, 221, 195; + --spectrum-brown-300:rgba(var(--spectrum-brown-300-rgb)); + --spectrum-brown-400-rgb:229, 200, 157; + --spectrum-brown-400:rgba(var(--spectrum-brown-400-rgb)); + --spectrum-brown-500-rgb:214, 177, 123; + --spectrum-brown-500:rgba(var(--spectrum-brown-500-rgb)); + --spectrum-brown-600-rgb:190, 155, 104; + --spectrum-brown-600:rgba(var(--spectrum-brown-600-rgb)); + --spectrum-brown-700-rgb:171, 138, 90; + --spectrum-brown-700:rgba(var(--spectrum-brown-700-rgb)); + --spectrum-brown-800-rgb:154, 123, 77; + --spectrum-brown-800:rgba(var(--spectrum-brown-800-rgb)); + --spectrum-brown-900-rgb:139, 109, 66; + --spectrum-brown-900:rgba(var(--spectrum-brown-900-rgb)); + --spectrum-brown-1000-rgb:119, 91, 50; + --spectrum-brown-1000:rgba(var(--spectrum-brown-1000-rgb)); + --spectrum-brown-1100-rgb:103, 76, 35; + --spectrum-brown-1100:rgba(var(--spectrum-brown-1100-rgb)); + --spectrum-brown-1200-rgb:88, 61, 21; + --spectrum-brown-1200:rgba(var(--spectrum-brown-1200-rgb)); + --spectrum-brown-1300-rgb:70, 49, 17; + --spectrum-brown-1300:rgba(var(--spectrum-brown-1300-rgb)); + --spectrum-brown-1400-rgb:52, 37, 13; + --spectrum-brown-1400:rgba(var(--spectrum-brown-1400-rgb)); + --spectrum-brown-1500-rgb:38, 26, 9; + --spectrum-brown-1500:rgba(var(--spectrum-brown-1500-rgb)); + --spectrum-brown-1600-rgb:16, 12, 4; + --spectrum-brown-1600:rgba(var(--spectrum-brown-1600-rgb)); + --spectrum-silver-100-rgb:247, 247, 247; + --spectrum-silver-100:rgba(var(--spectrum-silver-100-rgb)); + --spectrum-silver-200-rgb:239, 239, 239; + --spectrum-silver-200:rgba(var(--spectrum-silver-200-rgb)); + --spectrum-silver-300-rgb:223, 223, 223; + --spectrum-silver-300:rgba(var(--spectrum-silver-300-rgb)); + --spectrum-silver-400-rgb:204, 204, 204; + --spectrum-silver-400:rgba(var(--spectrum-silver-400-rgb)); + --spectrum-silver-500-rgb:183, 183, 183; + --spectrum-silver-500:rgba(var(--spectrum-silver-500-rgb)); + --spectrum-silver-600-rgb:160, 160, 160; + --spectrum-silver-600:rgba(var(--spectrum-silver-600-rgb)); + --spectrum-silver-700-rgb:143, 143, 143; + --spectrum-silver-700:rgba(var(--spectrum-silver-700-rgb)); + --spectrum-silver-800-rgb:128, 128, 128; + --spectrum-silver-800:rgba(var(--spectrum-silver-800-rgb)); + --spectrum-silver-900-rgb:114, 114, 114; + --spectrum-silver-900:rgba(var(--spectrum-silver-900-rgb)); + --spectrum-silver-1000-rgb:96, 96, 96; + --spectrum-silver-1000:rgba(var(--spectrum-silver-1000-rgb)); + --spectrum-silver-1100-rgb:81, 81, 81; + --spectrum-silver-1100:rgba(var(--spectrum-silver-1100-rgb)); + --spectrum-silver-1200-rgb:66, 66, 66; + --spectrum-silver-1200:rgba(var(--spectrum-silver-1200-rgb)); + --spectrum-silver-1300-rgb:52, 52, 52; + --spectrum-silver-1300:rgba(var(--spectrum-silver-1300-rgb)); + --spectrum-silver-1400-rgb:39, 39, 39; + --spectrum-silver-1400:rgba(var(--spectrum-silver-1400-rgb)); + --spectrum-silver-1500-rgb:28, 28, 28; + --spectrum-silver-1500:rgba(var(--spectrum-silver-1500-rgb)); + --spectrum-silver-1600-rgb:12, 12, 12; + --spectrum-silver-1600:rgba(var(--spectrum-silver-1600-rgb)); + --spectrum-cinnamon-100-rgb:253, 247, 243; + --spectrum-cinnamon-100:rgba(var(--spectrum-cinnamon-100-rgb)); + --spectrum-cinnamon-200-rgb:249, 236, 229; + --spectrum-cinnamon-200:rgba(var(--spectrum-cinnamon-200-rgb)); + --spectrum-cinnamon-300-rgb:244, 218, 203; + --spectrum-cinnamon-300:rgba(var(--spectrum-cinnamon-300-rgb)); + --spectrum-cinnamon-400-rgb:237, 196, 172; + --spectrum-cinnamon-400:rgba(var(--spectrum-cinnamon-400-rgb)); + --spectrum-cinnamon-500-rgb:229, 170, 136; + --spectrum-cinnamon-500:rgba(var(--spectrum-cinnamon-500-rgb)); + --spectrum-cinnamon-600-rgb:212, 145, 108; + --spectrum-cinnamon-600:rgba(var(--spectrum-cinnamon-600-rgb)); + --spectrum-cinnamon-700-rgb:198, 126, 88; + --spectrum-cinnamon-700:rgba(var(--spectrum-cinnamon-700-rgb)); + --spectrum-cinnamon-800-rgb:184, 109, 70; + --spectrum-cinnamon-800:rgba(var(--spectrum-cinnamon-800-rgb)); + --spectrum-cinnamon-900-rgb:170, 94, 56; + --spectrum-cinnamon-900:rgba(var(--spectrum-cinnamon-900-rgb)); + --spectrum-cinnamon-1000-rgb:147, 77, 43; + --spectrum-cinnamon-1000:rgba(var(--spectrum-cinnamon-1000-rgb)); + --spectrum-cinnamon-1100-rgb:128, 62, 32; + --spectrum-cinnamon-1100:rgba(var(--spectrum-cinnamon-1100-rgb)); + --spectrum-cinnamon-1200-rgb:110, 48, 21; + --spectrum-cinnamon-1200:rgba(var(--spectrum-cinnamon-1200-rgb)); + --spectrum-cinnamon-1300-rgb:92, 35, 11; + --spectrum-cinnamon-1300:rgba(var(--spectrum-cinnamon-1300-rgb)); + --spectrum-cinnamon-1400-rgb:72, 25, 6; + --spectrum-cinnamon-1400:rgba(var(--spectrum-cinnamon-1400-rgb)); + --spectrum-cinnamon-1500-rgb:52, 18, 4; + --spectrum-cinnamon-1500:rgba(var(--spectrum-cinnamon-1500-rgb)); + --spectrum-cinnamon-1600-rgb:24, 8, 2; + --spectrum-cinnamon-1600:rgba(var(--spectrum-cinnamon-1600-rgb)); + --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-900); + --spectrum-icon-color-green-primary-default:var(--spectrum-green-900); + --spectrum-icon-color-red-primary-default:var(--spectrum-red-900); + --spectrum-icon-color-yellow-primary-default:var(--spectrum-yellow-400); + --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-800-rgb); + --spectrum-dropindicator-color:var(--spectrum-blue-800); + + --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); + --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-black-rgb), 0.06); + --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-down:var(--spectrum-transparent-black-200); + --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-black-rgb), 0.06); + --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-800); + + --spectrum-badge-label-icon-color-primary:var(--spectrum-white); + + --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-800); + + --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-800); + + --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.06); + --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); + + --spectrum-logic-button-and-background-color:var(--spectrum-blue-900); + --spectrum-logic-button-and-border-color:var(--spectrum-blue-900); + --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1100); + --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1100); + + --spectrum-logic-button-or-background-color:var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color:var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-1100); + --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-1100); + + --spectrum-assetcard-border-color-selected:var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-900); + --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-800); + + --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); + --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-800); + + --spectrum-card-selected-background-color-rgb:var(--spectrum-blue-900-rgb); +} + +.spectrum--medium{ + --spectrum-workflow-icon-size-50:14px; + --spectrum-workflow-icon-size-75:16px; + --spectrum-workflow-icon-size-100:18px; + --spectrum-workflow-icon-size-200:20px; + --spectrum-workflow-icon-size-300:22px; + --spectrum-arrow-icon-size-75:10px; + --spectrum-arrow-icon-size-100:10px; + --spectrum-arrow-icon-size-200:12px; + --spectrum-arrow-icon-size-300:14px; + --spectrum-arrow-icon-size-400:16px; + --spectrum-arrow-icon-size-500:18px; + --spectrum-arrow-icon-size-600:20px; + --spectrum-asterisk-icon-size-100:8px; + --spectrum-asterisk-icon-size-200:10px; + --spectrum-asterisk-icon-size-300:10px; + --spectrum-checkmark-icon-size-50:10px; + --spectrum-checkmark-icon-size-75:10px; + --spectrum-checkmark-icon-size-100:10px; + --spectrum-checkmark-icon-size-200:12px; + --spectrum-checkmark-icon-size-300:14px; + --spectrum-checkmark-icon-size-400:16px; + --spectrum-checkmark-icon-size-500:16px; + --spectrum-checkmark-icon-size-600:18px; + --spectrum-chevron-icon-size-50:6px; + --spectrum-chevron-icon-size-75:10px; + --spectrum-chevron-icon-size-100:10px; + --spectrum-chevron-icon-size-200:12px; + --spectrum-chevron-icon-size-300:14px; + --spectrum-chevron-icon-size-400:16px; + --spectrum-chevron-icon-size-500:16px; + --spectrum-chevron-icon-size-600:18px; + --spectrum-corner-triangle-icon-size-75:5px; + --spectrum-corner-triangle-icon-size-100:5px; + --spectrum-corner-triangle-icon-size-200:6px; + --spectrum-corner-triangle-icon-size-300:7px; + --spectrum-cross-icon-size-75:8px; + --spectrum-cross-icon-size-100:8px; + --spectrum-cross-icon-size-200:10px; + --spectrum-cross-icon-size-300:12px; + --spectrum-cross-icon-size-400:12px; + --spectrum-cross-icon-size-500:14px; + --spectrum-cross-icon-size-600:16px; + --spectrum-dash-icon-size-50:8px; + --spectrum-dash-icon-size-75:8px; + --spectrum-dash-icon-size-100:10px; + --spectrum-dash-icon-size-200:12px; + --spectrum-dash-icon-size-300:12px; + --spectrum-dash-icon-size-400:14px; + --spectrum-dash-icon-size-500:16px; + --spectrum-dash-icon-size-600:18px; + --spectrum-checkbox-control-size-small:12px; + --spectrum-checkbox-control-size-medium:14px; + --spectrum-checkbox-control-size-large:16px; + --spectrum-checkbox-control-size-extra-large:18px; + --spectrum-checkbox-top-to-control-small:6px; + --spectrum-checkbox-top-to-control-medium:9px; + --spectrum-checkbox-top-to-control-large:12px; + --spectrum-checkbox-top-to-control-extra-large:15px; + --spectrum-switch-control-width-small:23px; + --spectrum-switch-control-width-medium:26px; + --spectrum-switch-control-width-large:29px; + --spectrum-switch-control-width-extra-large:33px; + --spectrum-switch-control-height-small:12px; + --spectrum-switch-control-height-medium:14px; + --spectrum-switch-control-height-large:16px; + --spectrum-switch-control-height-extra-large:18px; + --spectrum-switch-top-to-control-small:6px; + --spectrum-switch-top-to-control-medium:9px; + --spectrum-switch-top-to-control-large:12px; + --spectrum-switch-top-to-control-extra-large:15px; + --spectrum-radio-button-control-size-small:12px; + --spectrum-radio-button-control-size-medium:14px; + --spectrum-radio-button-control-size-large:16px; + --spectrum-radio-button-control-size-extra-large:18px; + --spectrum-radio-button-top-to-control-small:6px; + --spectrum-radio-button-top-to-control-medium:9px; + --spectrum-radio-button-top-to-control-large:12px; + --spectrum-radio-button-top-to-control-extra-large:15px; + --spectrum-field-label-text-to-asterisk-small:4px; + --spectrum-field-label-text-to-asterisk-medium:4px; + --spectrum-field-label-text-to-asterisk-large:5px; + --spectrum-field-label-text-to-asterisk-extra-large:5px; + --spectrum-field-label-top-to-asterisk-small:8px; + --spectrum-field-label-top-to-asterisk-medium:12px; + --spectrum-field-label-top-to-asterisk-large:15px; + --spectrum-field-label-top-to-asterisk-extra-large:19px; + --spectrum-field-label-top-margin-medium: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; + --spectrum-field-label-to-component-quiet-extra-large:-15px; + --spectrum-help-text-top-to-workflow-icon-small:4px; + --spectrum-help-text-top-to-workflow-icon-medium:3px; + --spectrum-help-text-top-to-workflow-icon-large:6px; + --spectrum-help-text-top-to-workflow-icon-extra-large:9px; + --spectrum-status-light-dot-size-medium:8px; + --spectrum-status-light-dot-size-large:10px; + --spectrum-status-light-dot-size-extra-large:10px; + --spectrum-status-light-top-to-dot-small:8px; + --spectrum-status-light-top-to-dot-medium:12px; + --spectrum-status-light-top-to-dot-large:15px; + --spectrum-status-light-top-to-dot-extra-large:19px; + --spectrum-action-button-edge-to-hold-icon-medium:4px; + --spectrum-action-button-edge-to-hold-icon-large:5px; + --spectrum-action-button-edge-to-hold-icon-extra-large:6px; + --spectrum-tooltip-tip-width:8px; + --spectrum-tooltip-tip-height:4px; + --spectrum-tooltip-maximum-width:160px; + --spectrum-progress-circle-size-small:16px; + --spectrum-progress-circle-size-medium:32px; + --spectrum-progress-circle-size-large:64px; + --spectrum-progress-circle-thickness-small:2px; + --spectrum-progress-circle-thickness-medium:3px; + --spectrum-progress-circle-thickness-large:4px; + --spectrum-toast-height:48px; + --spectrum-toast-maximum-width:336px; + --spectrum-toast-top-to-workflow-icon:15px; + --spectrum-toast-top-to-text:14px; + --spectrum-toast-bottom-to-text:17px; + --spectrum-action-bar-height:48px; + --spectrum-action-bar-top-to-item-counter:14px; + --spectrum-swatch-size-extra-small:16px; + --spectrum-swatch-size-small:24px; + --spectrum-swatch-size-medium:32px; + --spectrum-swatch-size-large:40px; + --spectrum-progress-bar-thickness-small:4px; + --spectrum-progress-bar-thickness-medium:6px; + --spectrum-progress-bar-thickness-large:8px; + --spectrum-progress-bar-thickness-extra-large:10px; + --spectrum-meter-width:192px; + --spectrum-meter-thickness-small:4px; + --spectrum-meter-thickness-large:6px; + --spectrum-tag-top-to-avatar-small:4px; + --spectrum-tag-top-to-avatar-medium:6px; + --spectrum-tag-top-to-avatar-large:9px; + --spectrum-tag-top-to-cross-icon-small:8px; + --spectrum-tag-top-to-cross-icon-medium:12px; + --spectrum-tag-top-to-cross-icon-large:15px; + --spectrum-popover-top-to-content-area:4px; + --spectrum-menu-item-edge-to-content-not-selected-small:28px; + --spectrum-menu-item-edge-to-content-not-selected-medium:32px; + --spectrum-menu-item-edge-to-content-not-selected-large:38px; + --spectrum-menu-item-edge-to-content-not-selected-extra-large:45px; + --spectrum-menu-item-top-to-disclosure-icon-small:7px; + --spectrum-menu-item-top-to-disclosure-icon-medium:11px; + --spectrum-menu-item-top-to-disclosure-icon-large:14px; + --spectrum-menu-item-top-to-disclosure-icon-extra-large:17px; + --spectrum-menu-item-top-to-selected-icon-small:7px; + --spectrum-menu-item-top-to-selected-icon-medium:11px; + --spectrum-menu-item-top-to-selected-icon-large:14px; + --spectrum-menu-item-top-to-selected-icon-extra-large:17px; + --spectrum-slider-control-height-small:14px; + --spectrum-slider-control-height-medium:16px; + --spectrum-slider-control-height-large:18px; + --spectrum-slider-control-height-extra-large:20px; + --spectrum-slider-handle-size-small:14px; + --spectrum-slider-handle-size-medium:16px; + --spectrum-slider-handle-size-large:18px; + --spectrum-slider-handle-size-extra-large:20px; + --spectrum-slider-handle-border-width-down-small:5px; + --spectrum-slider-handle-border-width-down-medium:6px; + --spectrum-slider-handle-border-width-down-large:7px; + --spectrum-slider-handle-border-width-down-extra-large:8px; + --spectrum-slider-bottom-to-handle-small:5px; + --spectrum-slider-bottom-to-handle-medium:8px; + --spectrum-slider-bottom-to-handle-large:11px; + --spectrum-slider-bottom-to-handle-extra-large:14px; + --spectrum-slider-control-to-field-label-small:5px; + --spectrum-slider-control-to-field-label-medium:8px; + --spectrum-slider-control-to-field-label-large:11px; + --spectrum-slider-control-to-field-label-extra-large:14px; + --spectrum-picker-visual-to-disclosure-icon-small:7px; + --spectrum-picker-visual-to-disclosure-icon-medium:8px; + --spectrum-picker-visual-to-disclosure-icon-large:9px; + --spectrum-picker-visual-to-disclosure-icon-extra-large:10px; + --spectrum-text-area-minimum-width:112px; + --spectrum-text-area-minimum-height:56px; + --spectrum-combo-box-visual-to-field-button-small:7px; + --spectrum-combo-box-visual-to-field-button-medium:8px; + --spectrum-combo-box-visual-to-field-button-large:9px; + --spectrum-combo-box-visual-to-field-button-extra-large:10px; + --spectrum-thumbnail-size-50:16px; + --spectrum-thumbnail-size-75:18px; + --spectrum-thumbnail-size-100:20px; + --spectrum-thumbnail-size-200:22px; + --spectrum-thumbnail-size-300:26px; + --spectrum-thumbnail-size-400:28px; + --spectrum-thumbnail-size-500:32px; + --spectrum-thumbnail-size-600:36px; + --spectrum-thumbnail-size-700:40px; + --spectrum-thumbnail-size-800:44px; + --spectrum-thumbnail-size-900:50px; + --spectrum-thumbnail-size-1000:56px; + --spectrum-alert-dialog-title-size:var(--spectrum-heading-size-s); + --spectrum-alert-dialog-description-size:var(--spectrum-body-size-s); + --spectrum-opacity-checkerboard-square-size:8px; + --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xs); + --spectrum-contextual-help-body-size:var(--spectrum-body-size-s); + --spectrum-breadcrumbs-height-multiline:72px; + --spectrum-breadcrumbs-top-to-text:13px; + --spectrum-breadcrumbs-top-to-text-compact:11px; + --spectrum-breadcrumbs-top-to-text-multiline:12px; + --spectrum-breadcrumbs-bottom-to-text:15px; + --spectrum-breadcrumbs-bottom-to-text-compact:12px; + --spectrum-breadcrumbs-bottom-to-text-multiline:9px; + --spectrum-breadcrumbs-start-edge-to-text:8px; + --spectrum-breadcrumbs-top-text-to-bottom-text:9px; + --spectrum-breadcrumbs-top-to-separator-icon:19px; + --spectrum-breadcrumbs-top-to-separator-icon-compact:15px; + --spectrum-breadcrumbs-top-to-separator-icon-multiline:15px; + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline:11px; + --spectrum-breadcrumbs-top-to-truncated-menu:8px; + --spectrum-breadcrumbs-top-to-truncated-menu-compact:4px; + --spectrum-avatar-size-50:16px; + --spectrum-avatar-size-75:18px; + --spectrum-avatar-size-100:20px; + --spectrum-avatar-size-200:22px; + --spectrum-avatar-size-300:26px; + --spectrum-avatar-size-400:28px; + --spectrum-avatar-size-500:32px; + --spectrum-avatar-size-600:36px; + --spectrum-avatar-size-700:40px; + --spectrum-alert-banner-minimum-height:48px; + --spectrum-alert-banner-width:832px; + --spectrum-alert-banner-top-to-workflow-icon:15px; + --spectrum-alert-banner-top-to-text:14px; + --spectrum-alert-banner-bottom-to-text:17px; + --spectrum-rating-indicator-width:18px; + --spectrum-rating-indicator-to-icon:4px; + --spectrum-color-area-width:192px; + --spectrum-color-area-minimum-width:64px; + --spectrum-color-area-height:192px; + --spectrum-color-area-minimum-height:64px; + --spectrum-color-wheel-width:192px; + --spectrum-color-wheel-minimum-width:175px; + --spectrum-color-slider-length:192px; + --spectrum-color-slider-minimum-length:80px; + --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-coach-mark-width:296px; + --spectrum-coach-mark-minimum-width:296px; + --spectrum-coach-mark-maximum-width:380px; + --spectrum-coach-mark-edge-to-content:var(--spectrum-spacing-400); + --spectrum-coach-mark-pagination-text-to-bottom-edge:33px; + --spectrum-coach-mark-media-height:222px; + --spectrum-coach-mark-media-minimum-height:166px; + --spectrum-coach-mark-title-size:var(--spectrum-heading-size-xs); + --spectrum-coach-mark-body-size:var(--spectrum-body-size-s); + --spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-s); + --spectrum-accordion-top-to-text-regular-small:5px; + --spectrum-accordion-small-top-to-text-spacious:9px; + --spectrum-accordion-top-to-text-regular-medium:8px; + --spectrum-accordion-top-to-text-spacious-medium:12px; + --spectrum-accordion-top-to-text-compact-large:4px; + --spectrum-accordion-top-to-text-regular-large:9px; + --spectrum-accordion-top-to-text-spacious-large:12px; + --spectrum-accordion-top-to-text-compact-extra-large:5px; + --spectrum-accordion-top-to-text-regular-extra-large:9px; + --spectrum-accordion-top-to-text-spacious-extra-large:13px; + --spectrum-accordion-bottom-to-text-compact-small:2px; + --spectrum-accordion-bottom-to-text-regular-small:7px; + --spectrum-accordion-bottom-to-text-spacious-small:11px; + --spectrum-accordion-bottom-to-text-compact-medium:5px; + --spectrum-accordion-bottom-to-text-regular-medium:9px; + --spectrum-accordion-bottom-to-text-spacious-medium:13px; + --spectrum-accordion-bottom-to-text-compact-large:8px; + --spectrum-accordion-bottom-to-text-regular-large:11px; + --spectrum-accordion-bottom-to-text-spacious-large:16px; + --spectrum-accordion-bottom-to-text-compact-extra-large:8px; + --spectrum-accordion-bottom-to-text-regular-extra-large:12px; + --spectrum-accordion-bottom-to-text-spacious-extra-large:16px; + --spectrum-accordion-minimum-width:200px; + --spectrum-accordion-content-area-top-to-content:8px; + --spectrum-accordion-content-area-bottom-to-content:16px; + --spectrum-color-handle-size:16px; + --spectrum-color-handle-size-key-focus:32px; + --spectrum-table-column-header-row-top-to-text-small:8px; + --spectrum-table-column-header-row-top-to-text-medium:7px; + --spectrum-table-column-header-row-top-to-text-large:10px; + --spectrum-table-column-header-row-top-to-text-extra-large:13px; + --spectrum-table-column-header-row-bottom-to-text-small:9px; + --spectrum-table-column-header-row-bottom-to-text-medium:8px; + --spectrum-table-column-header-row-bottom-to-text-large:10px; + --spectrum-table-column-header-row-bottom-to-text-extra-large:13px; + --spectrum-table-row-height-small-regular:32px; + --spectrum-table-row-height-medium-regular:40px; + --spectrum-table-row-height-large-regular:48px; + --spectrum-table-row-height-extra-large-regular:56px; + --spectrum-table-row-height-small-spacious:40px; + --spectrum-table-row-height-medium-spacious:48px; + --spectrum-table-row-height-large-spacious:56px; + --spectrum-table-row-height-extra-large-spacious:64px; + --spectrum-table-row-top-to-text-small-regular:8px; + --spectrum-table-row-top-to-text-medium-regular:11px; + --spectrum-table-row-top-to-text-large-regular:14px; + --spectrum-table-row-top-to-text-extra-large-regular:17px; + --spectrum-table-row-bottom-to-text-small-regular:9px; + --spectrum-table-row-bottom-to-text-medium-regular:12px; + --spectrum-table-row-bottom-to-text-large-regular:14px; + --spectrum-table-row-bottom-to-text-extra-large-regular:17px; + --spectrum-table-row-top-to-text-small-spacious:12px; + --spectrum-table-row-top-to-text-medium-spacious:15px; + --spectrum-table-row-top-to-text-large-spacious:18px; + --spectrum-table-row-top-to-text-extra-large-spacious:21px; + --spectrum-table-row-bottom-to-text-small-spacious:13px; + --spectrum-table-row-bottom-to-text-medium-spacious:16px; + --spectrum-table-row-bottom-to-text-large-spacious:18px; + --spectrum-table-row-bottom-to-text-extra-large-spacious:21px; + --spectrum-table-checkbox-to-text:24px; + --spectrum-table-header-row-checkbox-to-top-small:10px; + --spectrum-table-header-row-checkbox-to-top-medium:9px; + --spectrum-table-header-row-checkbox-to-top-large:12px; + --spectrum-table-header-row-checkbox-to-top-extra-large:15px; + --spectrum-table-row-checkbox-to-top-small-compact:6px; + --spectrum-table-row-checkbox-to-top-small-regular:10px; + --spectrum-table-row-checkbox-to-top-small-spacious:14px; + --spectrum-table-row-checkbox-to-top-medium-compact:9px; + --spectrum-table-row-checkbox-to-top-medium-regular:13px; + --spectrum-table-row-checkbox-to-top-medium-spacious:17px; + --spectrum-table-row-checkbox-to-top-large-compact:12px; + --spectrum-table-row-checkbox-to-top-large-regular:16px; + --spectrum-table-row-checkbox-to-top-large-spacious:20px; + --spectrum-table-row-checkbox-to-top-extra-large-compact:15px; + --spectrum-table-row-checkbox-to-top-extra-large-regular:19px; + --spectrum-table-row-checkbox-to-top-extra-large-spacious:23px; + --spectrum-table-section-header-row-height-small:24px; + --spectrum-table-section-header-row-height-medium:32px; + --spectrum-table-section-header-row-height-large:40px; + --spectrum-table-section-header-row-height-extra-large:48px; + --spectrum-table-thumbnail-to-top-minimum-small-compact:4px; + --spectrum-table-thumbnail-to-top-minimum-medium-compact:5px; + --spectrum-table-thumbnail-to-top-minimum-large-compact:7px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact:8px; + --spectrum-table-thumbnail-to-top-minimum-small-regular:5px; + --spectrum-table-thumbnail-to-top-minimum-medium-regular:7px; + --spectrum-table-thumbnail-to-top-minimum-large-regular:8px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular:8px; + --spectrum-table-thumbnail-to-top-minimum-small-spacious:7px; + --spectrum-table-thumbnail-to-top-minimum-medium-spacious:8px; + --spectrum-table-thumbnail-to-top-minimum-large-spacious:8px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious:10px; + --spectrum-tab-item-to-tab-item-horizontal-small:21px; + --spectrum-tab-item-to-tab-item-horizontal-medium:24px; + --spectrum-tab-item-to-tab-item-horizontal-large:27px; + --spectrum-tab-item-to-tab-item-horizontal-extra-large:30px; + --spectrum-tab-item-to-tab-item-vertical-small:4px; + --spectrum-tab-item-to-tab-item-vertical-medium:4px; + --spectrum-tab-item-to-tab-item-vertical-large:5px; + --spectrum-tab-item-to-tab-item-vertical-extra-large:5px; + --spectrum-tab-item-start-to-edge-small:12px; + --spectrum-tab-item-start-to-edge-medium:12px; + --spectrum-tab-item-start-to-edge-large:13px; + --spectrum-tab-item-start-to-edge-extra-large:13px; + --spectrum-tab-item-top-to-text-small:11px; + --spectrum-tab-item-bottom-to-text-small:12px; + --spectrum-tab-item-top-to-text-medium:14px; + --spectrum-tab-item-bottom-to-text-medium:14px; + --spectrum-tab-item-top-to-text-large:16px; + --spectrum-tab-item-bottom-to-text-large:18px; + --spectrum-tab-item-top-to-text-extra-large:19px; + --spectrum-tab-item-bottom-to-text-extra-large:20px; + --spectrum-tab-item-top-to-text-compact-small:4px; + --spectrum-tab-item-bottom-to-text-compact-small:5px; + --spectrum-tab-item-top-to-text-compact-medium:6px; + --spectrum-tab-item-bottom-to-text-compact-medium:8px; + --spectrum-tab-item-top-to-text-compact-large:10px; + --spectrum-tab-item-bottom-to-text-compact-large:12px; + --spectrum-tab-item-top-to-text-compact-extra-large:12px; + --spectrum-tab-item-bottom-to-text-compact-extra-large:13px; + --spectrum-tab-item-top-to-workflow-icon-small:13px; + --spectrum-tab-item-top-to-workflow-icon-medium:15px; + --spectrum-tab-item-top-to-workflow-icon-large:17px; + --spectrum-tab-item-top-to-workflow-icon-extra-large:19px; + --spectrum-tab-item-top-to-workflow-icon-compact-small:3px; + --spectrum-tab-item-top-to-workflow-icon-compact-medium:7px; + --spectrum-tab-item-top-to-workflow-icon-compact-large:9px; + --spectrum-tab-item-top-to-workflow-icon-compact-extra-large:11px; + --spectrum-tab-item-focus-indicator-gap-small:7px; + --spectrum-tab-item-focus-indicator-gap-medium:8px; + --spectrum-tab-item-focus-indicator-gap-large:9px; + --spectrum-tab-item-focus-indicator-gap-extra-large:10px; + --spectrum-side-navigation-width:192px; + --spectrum-side-navigation-minimum-width:160px; + --spectrum-side-navigation-maximum-width:240px; + --spectrum-side-navigation-second-level-edge-to-text:24px; + --spectrum-side-navigation-third-level-edge-to-text:36px; + --spectrum-side-navigation-with-icon-second-level-edge-to-text:50px; + --spectrum-side-navigation-with-icon-third-level-edge-to-text:62px; + --spectrum-side-navigation-item-to-item:4px; + --spectrum-side-navigation-item-to-header:24px; + --spectrum-side-navigation-header-to-item:8px; + --spectrum-side-navigation-bottom-to-text:8px; + --spectrum-tray-top-to-content-area:4px; + --spectrum-accordion-top-to-text-spacious-small:9px; + --spectrum-drop-shadow-y:1px; + --spectrum-drop-shadow-blur:4px; + --spectrum-text-to-visual-50:6px; + --spectrum-text-to-visual-75:7px; + --spectrum-text-to-visual-100:8px; + --spectrum-text-to-visual-200:9px; + --spectrum-text-to-visual-300:10px; + --spectrum-text-to-control-75:9px; + --spectrum-text-to-control-100:10px; + --spectrum-text-to-control-200:11px; + --spectrum-text-to-control-300:13px; + --spectrum-component-height-50:20px; + --spectrum-component-height-75:24px; + --spectrum-component-height-100:32px; + --spectrum-component-height-200:40px; + --spectrum-component-height-300:48px; + --spectrum-component-height-400:56px; + --spectrum-component-height-500:64px; + --spectrum-component-pill-edge-to-visual-75:10px; + --spectrum-component-pill-edge-to-visual-100:14px; + --spectrum-component-pill-edge-to-visual-200:18px; + --spectrum-component-pill-edge-to-visual-300:21px; + --spectrum-component-pill-edge-to-visual-only-75:4px; + --spectrum-component-pill-edge-to-visual-only-100:7px; + --spectrum-component-pill-edge-to-visual-only-200:10px; + --spectrum-component-pill-edge-to-visual-only-300:13px; + --spectrum-component-pill-edge-to-text-75:12px; + --spectrum-component-pill-edge-to-text-100:16px; + --spectrum-component-pill-edge-to-text-200:20px; + --spectrum-component-pill-edge-to-text-300:24px; + --spectrum-component-edge-to-visual-50:6px; + --spectrum-component-edge-to-visual-75:7px; + --spectrum-component-edge-to-visual-100:10px; + --spectrum-component-edge-to-visual-200:13px; + --spectrum-component-edge-to-visual-300:15px; + --spectrum-component-edge-to-visual-only-50:3px; + --spectrum-component-edge-to-visual-only-75:4px; + --spectrum-component-edge-to-visual-only-100:7px; + --spectrum-component-edge-to-visual-only-200:10px; + --spectrum-component-edge-to-visual-only-300:13px; + --spectrum-component-edge-to-text-50:8px; + --spectrum-component-edge-to-text-75:9px; + --spectrum-component-edge-to-text-100:12px; + --spectrum-component-edge-to-text-200:15px; + --spectrum-component-edge-to-text-300:18px; + --spectrum-component-top-to-workflow-icon-50:3px; + --spectrum-component-top-to-workflow-icon-75:4px; + --spectrum-component-top-to-workflow-icon-100:7px; + --spectrum-component-top-to-workflow-icon-200:10px; + --spectrum-component-top-to-workflow-icon-300:13px; + --spectrum-component-top-to-text-50:3px; + --spectrum-component-top-to-text-75:4px; + --spectrum-component-top-to-text-100:6px; + --spectrum-component-top-to-text-200:9px; + --spectrum-component-top-to-text-300:12px; + --spectrum-component-bottom-to-text-50:3px; + --spectrum-component-bottom-to-text-75:5px; + --spectrum-component-bottom-to-text-100:9px; + --spectrum-component-bottom-to-text-200:11px; + --spectrum-component-bottom-to-text-300:14px; + --spectrum-component-to-menu-small:6px; + --spectrum-component-to-menu-medium:6px; + --spectrum-component-to-menu-large:7px; + --spectrum-component-to-menu-extra-large:8px; + --spectrum-field-edge-to-disclosure-icon-75:7px; + --spectrum-field-edge-to-disclosure-icon-100:11px; + --spectrum-field-edge-to-disclosure-icon-200:14px; + --spectrum-field-edge-to-disclosure-icon-300:17px; + --spectrum-field-end-edge-to-disclosure-icon-75:7px; + --spectrum-field-end-edge-to-disclosure-icon-100:11px; + --spectrum-field-end-edge-to-disclosure-icon-200:14px; + --spectrum-field-end-edge-to-disclosure-icon-300:17px; + --spectrum-field-top-to-disclosure-icon-75:7px; + --spectrum-field-top-to-disclosure-icon-100:11px; + --spectrum-field-top-to-disclosure-icon-200:14px; + --spectrum-field-top-to-disclosure-icon-300:17px; + --spectrum-field-top-to-alert-icon-small:4px; + --spectrum-field-top-to-alert-icon-medium:7px; + --spectrum-field-top-to-alert-icon-large:10px; + --spectrum-field-top-to-alert-icon-extra-large:13px; + --spectrum-field-top-to-validation-icon-small:7px; + --spectrum-field-top-to-validation-icon-medium:11px; + --spectrum-field-top-to-validation-icon-large:14px; + --spectrum-field-top-to-validation-icon-extra-large:17px; + --spectrum-field-top-to-progress-circle-small:4px; + --spectrum-field-top-to-progress-circle-medium:8px; + --spectrum-field-top-to-progress-circle-large:12px; + --spectrum-field-top-to-progress-circle-extra-large:16px; + --spectrum-field-edge-to-alert-icon-small:9px; + --spectrum-field-edge-to-alert-icon-medium:12px; + --spectrum-field-edge-to-alert-icon-large:15px; + --spectrum-field-edge-to-alert-icon-extra-large:18px; + --spectrum-field-edge-to-validation-icon-small:9px; + --spectrum-field-edge-to-validation-icon-medium:12px; + --spectrum-field-edge-to-validation-icon-large:15px; + --spectrum-field-edge-to-validation-icon-extra-large:18px; + --spectrum-field-text-to-alert-icon-small:8px; + --spectrum-field-text-to-alert-icon-medium:12px; + --spectrum-field-text-to-alert-icon-large:15px; + --spectrum-field-text-to-alert-icon-extra-large:18px; + --spectrum-field-text-to-validation-icon-small:8px; + --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; + --spectrum-character-count-to-field-quiet-extra-large:-4px; + --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: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; + --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:17px; + --spectrum-navigational-indicator-top-to-back-icon-small:6px; + --spectrum-navigational-indicator-top-to-back-icon-medium:9px; + --spectrum-navigational-indicator-top-to-back-icon-large:12px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large:15px; + --spectrum-color-control-track-width:24px; + --spectrum-font-size-50:11px; + --spectrum-font-size-75:12px; + --spectrum-font-size-100:14px; + --spectrum-font-size-200:16px; + --spectrum-font-size-300:18px; + --spectrum-font-size-400:20px; + --spectrum-font-size-500:22px; + --spectrum-font-size-600:25px; + --spectrum-font-size-700:28px; + --spectrum-font-size-800:32px; + --spectrum-font-size-900:36px; + --spectrum-font-size-1000:40px; + --spectrum-font-size-1100:45px; + --spectrum-font-size-1200:50px; + --spectrum-font-size-1300:60px; + --spectrum-slider-tick-mark-height:10px; + --spectrum-slider-ramp-track-height:16px; + + --spectrum-colorwheel-path:"M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0"; + --spectrum-colorwheel-path-borders:"M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; + --spectrum-colorwheel-colorarea-container-size:144px; + + --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-primary); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small:28px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:32px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large:38px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:45px; + + --spectrum-menu-item-checkmark-height-small:10px; + --spectrum-menu-item-checkmark-height-medium:10px; + --spectrum-menu-item-checkmark-height-large:12px; + --spectrum-menu-item-checkmark-height-extra-large:14px; + + --spectrum-menu-item-checkmark-width-small:10px; + --spectrum-menu-item-checkmark-width-medium:10px; + --spectrum-menu-item-checkmark-width-large:12px; + --spectrum-menu-item-checkmark-width-extra-large:14px; + + --spectrum-rating-icon-spacing:var(--spectrum-spacing-75); + + --spectrum-button-top-to-text-small:5px; + --spectrum-button-bottom-to-text-small:4px; + --spectrum-button-top-to-text-medium:7px; + --spectrum-button-bottom-to-text-medium:8px; + --spectrum-button-top-to-text-large:10px; + --spectrum-button-bottom-to-text-large:10px; + --spectrum-button-top-to-text-extra-large:13px; + --spectrum-button-bottom-to-text-extra-large:13px; + + --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-100); + --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-100); + + --spectrum-alert-dialog-padding:var(--spectrum-spacing-500); + --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-700); + + --spectrum-coach-indicator-gap:6px; + --spectrum-coach-indicator-ring-diameter:var(--spectrum-spacing-300); + --spectrum-coach-indicator-quiet-ring-diameter:var(--spectrum-spacing-100); + + --spectrum-coachmark-buttongroup-display:flex; + --spectrum-coachmark-buttongroup-mobile-display:none; + --spectrum-coachmark-menu-display:inline-flex; + --spectrum-coachmark-menu-mobile-display:none; + --spectrum-workflow-icon-size-xxl:32px; + --spectrum-workflow-icon-size-xxs:12px; + + --spectrum-treeview-item-indentation-medium:var(--spectrum-spacing-300); + --spectrum-treeview-item-indentation-small:var(--spectrum-spacing-200); + --spectrum-treeview-item-indentation-large:20px; + --spectrum-treeview-item-indentation-extra-large:var(--spectrum-spacing-400); + --spectrum-treeview-indicator-inset-block-start:5px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:0px; + + --spectrum-dialog-confirm-entry-animation-distance:20px; + --spectrum-dialog-confirm-hero-height:128px; + --spectrum-dialog-confirm-border-radius:4px; + --spectrum-dialog-confirm-title-text-size:18px; + --spectrum-dialog-confirm-description-text-size:14px; + --spectrum-dialog-confirm-padding-grid:40px; + + --spectrum-datepicker-initial-width:128px; + --spectrum-datepicker-generic-padding:var(--spectrum-spacing-200); + --spectrum-datepicker-dash-line-height:24px; + --spectrum-datepicker-width-quiet-first:72px; + --spectrum-datepicker-width-quiet-second:16px; + --spectrum-datepicker-datetime-width-first:36px; + --spectrum-datepicker-invalid-icon-to-button:8px; + --spectrum-datepicker-invalid-icon-to-button-quiet:7px; + --spectrum-datepicker-input-datetime-width:var(--spectrum-spacing-400); + + --spectrum-pagination-textfield-width:var(--spectrum-spacing-700); + --spectrum-pagination-item-inline-spacing:5px; + + --spectrum-dial-border-radius:16px; + --spectrum-dial-handle-position:8px; + --spectrum-dial-handle-block-margin:16px; + --spectrum-dial-handle-inline-margin:16px; + --spectrum-dial-controls-margin:8px; + --spectrum-dial-label-gap-y:5px; + --spectrum-dial-label-container-top-to-text:4px; + + --spectrum-assetcard-focus-ring-border-radius:8px; + --spectrum-assetcard-selectionindicator-margin:12px; + --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xs); + --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xs); + --spectrum-assetcard-content-font-size:var(--spectrum-body-size-s); + + --spectrum-tooltip-animation-distance:var(--spectrum-spacing-75); + + --spectrum-ui-icon-medium-display:block; + --spectrum-ui-icon-large-display:none; + + --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-100); +} diff --git a/tokens/dist/css/large-vars.css b/tokens/dist/css/large-vars.css new file mode 100644 index 00000000000..2570aad603f --- /dev/null +++ b/tokens/dist/css/large-vars.css @@ -0,0 +1,651 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--large{ + --spectrum-workflow-icon-size-50:18px; + --spectrum-workflow-icon-size-75:20px; + --spectrum-workflow-icon-size-100:22px; + --spectrum-workflow-icon-size-200:24px; + --spectrum-workflow-icon-size-300:28px; + --spectrum-arrow-icon-size-75:12px; + --spectrum-arrow-icon-size-100:14px; + --spectrum-arrow-icon-size-200:16px; + --spectrum-arrow-icon-size-300:16px; + --spectrum-arrow-icon-size-400:18px; + --spectrum-arrow-icon-size-500:22px; + --spectrum-arrow-icon-size-600:24px; + --spectrum-asterisk-icon-size-100:10px; + --spectrum-asterisk-icon-size-200:12px; + --spectrum-asterisk-icon-size-300:12px; + --spectrum-checkmark-icon-size-50:12px; + --spectrum-checkmark-icon-size-75:12px; + --spectrum-checkmark-icon-size-100:14px; + --spectrum-checkmark-icon-size-200:14px; + --spectrum-checkmark-icon-size-300:16px; + --spectrum-checkmark-icon-size-400:18px; + --spectrum-checkmark-icon-size-500:20px; + --spectrum-checkmark-icon-size-600:24px; + --spectrum-chevron-icon-size-50:8px; + --spectrum-chevron-icon-size-75:12px; + --spectrum-chevron-icon-size-100:14px; + --spectrum-chevron-icon-size-200:14px; + --spectrum-chevron-icon-size-300:16px; + --spectrum-chevron-icon-size-400:18px; + --spectrum-chevron-icon-size-500:20px; + --spectrum-chevron-icon-size-600:24px; + --spectrum-corner-triangle-icon-size-75:6px; + --spectrum-corner-triangle-icon-size-100:7px; + --spectrum-corner-triangle-icon-size-200:8px; + --spectrum-corner-triangle-icon-size-300:8px; + --spectrum-cross-icon-size-75:10px; + --spectrum-cross-icon-size-100:10px; + --spectrum-cross-icon-size-200:12px; + --spectrum-cross-icon-size-300:14px; + --spectrum-cross-icon-size-400:16px; + --spectrum-cross-icon-size-500:16px; + --spectrum-cross-icon-size-600:18px; + --spectrum-dash-icon-size-50:10px; + --spectrum-dash-icon-size-75:10px; + --spectrum-dash-icon-size-100:12px; + --spectrum-dash-icon-size-200:14px; + --spectrum-dash-icon-size-300:16px; + --spectrum-dash-icon-size-400:18px; + --spectrum-dash-icon-size-500:20px; + --spectrum-dash-icon-size-600:22px; + --spectrum-checkbox-control-size-small:16px; + --spectrum-checkbox-control-size-medium:18px; + --spectrum-checkbox-control-size-large:20px; + --spectrum-checkbox-control-size-extra-large:22px; + --spectrum-checkbox-top-to-control-small:7px; + --spectrum-checkbox-top-to-control-medium:11px; + --spectrum-checkbox-top-to-control-large:15px; + --spectrum-checkbox-top-to-control-extra-large:19px; + --spectrum-switch-control-width-small:32px; + --spectrum-switch-control-width-medium:36px; + --spectrum-switch-control-width-large:41px; + --spectrum-switch-control-width-extra-large:46px; + --spectrum-switch-control-height-small:16px; + --spectrum-switch-control-height-medium:18px; + --spectrum-switch-control-height-large:20px; + --spectrum-switch-control-height-extra-large:22px; + --spectrum-switch-top-to-control-small:7px; + --spectrum-switch-top-to-control-medium:11px; + --spectrum-switch-top-to-control-large:15px; + --spectrum-switch-top-to-control-extra-large:19px; + --spectrum-radio-button-control-size-small:16px; + --spectrum-radio-button-control-size-medium:18px; + --spectrum-radio-button-control-size-large:20px; + --spectrum-radio-button-control-size-extra-large:22px; + --spectrum-radio-button-top-to-control-small:7px; + --spectrum-radio-button-top-to-control-medium:11px; + --spectrum-radio-button-top-to-control-large:15px; + --spectrum-radio-button-top-to-control-extra-large:19px; + --spectrum-field-label-text-to-asterisk-small:5px; + --spectrum-field-label-text-to-asterisk-medium:5px; + --spectrum-field-label-text-to-asterisk-large:6px; + --spectrum-field-label-text-to-asterisk-extra-large:6px; + --spectrum-field-label-top-to-asterisk-small:11px; + --spectrum-field-label-top-to-asterisk-medium:15px; + --spectrum-field-label-top-to-asterisk-large:19px; + --spectrum-field-label-top-to-asterisk-extra-large:24px; + --spectrum-field-label-top-margin-medium: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; + --spectrum-field-label-to-component-quiet-extra-large:-19px; + --spectrum-help-text-top-to-workflow-icon-small:5px; + --spectrum-help-text-top-to-workflow-icon-medium:4px; + --spectrum-help-text-top-to-workflow-icon-large:8px; + --spectrum-help-text-top-to-workflow-icon-extra-large:11px; + --spectrum-status-light-dot-size-medium:10px; + --spectrum-status-light-dot-size-large:12px; + --spectrum-status-light-dot-size-extra-large:12px; + --spectrum-status-light-top-to-dot-small:11px; + --spectrum-status-light-top-to-dot-medium:15px; + --spectrum-status-light-top-to-dot-large:19px; + --spectrum-status-light-top-to-dot-extra-large:24px; + --spectrum-action-button-edge-to-hold-icon-medium:5px; + --spectrum-action-button-edge-to-hold-icon-large:6px; + --spectrum-action-button-edge-to-hold-icon-extra-large:7px; + --spectrum-tooltip-tip-width:10px; + --spectrum-tooltip-tip-height:5px; + --spectrum-tooltip-maximum-width:200px; + --spectrum-progress-circle-size-small:20px; + --spectrum-progress-circle-size-medium:40px; + --spectrum-progress-circle-size-large:80px; + --spectrum-progress-circle-thickness-small:3px; + --spectrum-progress-circle-thickness-medium:4px; + --spectrum-progress-circle-thickness-large:5px; + --spectrum-toast-height:56px; + --spectrum-toast-maximum-width:420px; + --spectrum-toast-top-to-workflow-icon:17px; + --spectrum-toast-top-to-text:16px; + --spectrum-toast-bottom-to-text:19px; + --spectrum-action-bar-height:56px; + --spectrum-action-bar-top-to-item-counter:16px; + --spectrum-swatch-size-extra-small:20px; + --spectrum-swatch-size-small:30px; + --spectrum-swatch-size-medium:40px; + --spectrum-swatch-size-large:50px; + --spectrum-progress-bar-thickness-small:5px; + --spectrum-progress-bar-thickness-medium:8px; + --spectrum-progress-bar-thickness-large:10px; + --spectrum-progress-bar-thickness-extra-large:13px; + --spectrum-meter-width:240px; + --spectrum-meter-thickness-small:5px; + --spectrum-meter-thickness-large:8px; + --spectrum-tag-top-to-avatar-small:5px; + --spectrum-tag-top-to-avatar-medium:7px; + --spectrum-tag-top-to-avatar-large:11px; + --spectrum-tag-top-to-cross-icon-small:10px; + --spectrum-tag-top-to-cross-icon-medium:15px; + --spectrum-tag-top-to-cross-icon-large:19px; + --spectrum-popover-top-to-content-area:5px; + --spectrum-menu-item-edge-to-content-not-selected-small:24px; + --spectrum-menu-item-edge-to-content-not-selected-medium:42px; + --spectrum-menu-item-edge-to-content-not-selected-large:47px; + --spectrum-menu-item-edge-to-content-not-selected-extra-large:54px; + --spectrum-menu-item-top-to-disclosure-icon-small:9px; + --spectrum-menu-item-top-to-disclosure-icon-medium:13px; + --spectrum-menu-item-top-to-disclosure-icon-large:17px; + --spectrum-menu-item-top-to-disclosure-icon-extra-large:22px; + --spectrum-menu-item-top-to-selected-icon-small:9px; + --spectrum-menu-item-top-to-selected-icon-medium:13px; + --spectrum-menu-item-top-to-selected-icon-large:17px; + --spectrum-menu-item-top-to-selected-icon-extra-large:22px; + --spectrum-slider-control-height-small:18px; + --spectrum-slider-control-height-medium:20px; + --spectrum-slider-control-height-large:22px; + --spectrum-slider-control-height-extra-large:26px; + --spectrum-slider-handle-size-small:18px; + --spectrum-slider-handle-size-medium:20px; + --spectrum-slider-handle-size-large:22px; + --spectrum-slider-handle-size-extra-large:26px; + --spectrum-slider-handle-border-width-down-small:7px; + --spectrum-slider-handle-border-width-down-medium:8px; + --spectrum-slider-handle-border-width-down-large:9px; + --spectrum-slider-handle-border-width-down-extra-large:11px; + --spectrum-slider-bottom-to-handle-small:6px; + --spectrum-slider-bottom-to-handle-medium:10px; + --spectrum-slider-bottom-to-handle-large:14px; + --spectrum-slider-bottom-to-handle-extra-large:17px; + --spectrum-slider-control-to-field-label-small:6px; + --spectrum-slider-control-to-field-label-medium:10px; + --spectrum-slider-control-to-field-label-large:14px; + --spectrum-slider-control-to-field-label-extra-large:17px; + --spectrum-picker-visual-to-disclosure-icon-small:9px; + --spectrum-picker-visual-to-disclosure-icon-medium:10px; + --spectrum-picker-visual-to-disclosure-icon-large:11px; + --spectrum-picker-visual-to-disclosure-icon-extra-large:13px; + --spectrum-text-area-minimum-width:140px; + --spectrum-text-area-minimum-height:70px; + --spectrum-combo-box-visual-to-field-button-small:9px; + --spectrum-combo-box-visual-to-field-button-medium:10px; + --spectrum-combo-box-visual-to-field-button-large:11px; + --spectrum-combo-box-visual-to-field-button-extra-large:13px; + --spectrum-thumbnail-size-50:20px; + --spectrum-thumbnail-size-75:22px; + --spectrum-thumbnail-size-100:26px; + --spectrum-thumbnail-size-200:28px; + --spectrum-thumbnail-size-300:32px; + --spectrum-thumbnail-size-400:36px; + --spectrum-thumbnail-size-500:40px; + --spectrum-thumbnail-size-600:46px; + --spectrum-thumbnail-size-700:50px; + --spectrum-thumbnail-size-800:55px; + --spectrum-thumbnail-size-900:62px; + --spectrum-thumbnail-size-1000:70px; + --spectrum-alert-dialog-title-size:var(--spectrum-heading-size-xs); + --spectrum-alert-dialog-description-size:var(--spectrum-body-size-xs); + --spectrum-opacity-checkerboard-square-size:10px; + --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xxs); + --spectrum-contextual-help-body-size:var(--spectrum-body-size-xs); + --spectrum-breadcrumbs-height-multiline:84px; + --spectrum-breadcrumbs-top-to-text:17px; + --spectrum-breadcrumbs-top-to-text-compact:16px; + --spectrum-breadcrumbs-top-to-text-multiline:15px; + --spectrum-breadcrumbs-bottom-to-text:19px; + --spectrum-breadcrumbs-bottom-to-text-compact:19px; + --spectrum-breadcrumbs-bottom-to-text-multiline:10px; + --spectrum-breadcrumbs-start-edge-to-text:9px; + --spectrum-breadcrumbs-top-text-to-bottom-text:11px; + --spectrum-breadcrumbs-top-to-separator-icon:25px; + --spectrum-breadcrumbs-top-to-separator-icon-compact:23px; + --spectrum-breadcrumbs-top-to-separator-icon-multiline:20px; + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline:15px; + --spectrum-breadcrumbs-top-to-truncated-menu:10px; + --spectrum-breadcrumbs-top-to-truncated-menu-compact:5px; + --spectrum-avatar-size-50:20px; + --spectrum-avatar-size-75:22px; + --spectrum-avatar-size-100:26px; + --spectrum-avatar-size-200:28px; + --spectrum-avatar-size-300:32px; + --spectrum-avatar-size-400:36px; + --spectrum-avatar-size-500:40px; + --spectrum-avatar-size-600:46px; + --spectrum-avatar-size-700:50px; + --spectrum-alert-banner-minimum-height:64px; + --spectrum-alert-banner-width:680px; + --spectrum-alert-banner-top-to-workflow-icon:21px; + --spectrum-alert-banner-top-to-text:21px; + --spectrum-alert-banner-bottom-to-text:22px; + --spectrum-rating-indicator-width:22px; + --spectrum-rating-indicator-to-icon:5px; + --spectrum-color-area-width:240px; + --spectrum-color-area-minimum-width:80px; + --spectrum-color-area-height:240px; + --spectrum-color-area-minimum-height:80px; + --spectrum-color-wheel-width:240px; + --spectrum-color-wheel-minimum-width:219px; + --spectrum-color-slider-length:240px; + --spectrum-color-slider-minimum-length:100px; + --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-coach-mark-width:216px; + --spectrum-coach-mark-minimum-width:216px; + --spectrum-coach-mark-maximum-width:248px; + --spectrum-coach-mark-edge-to-content:var(--spectrum-spacing-300); + --spectrum-coach-mark-pagination-text-to-bottom-edge:22px; + --spectrum-coach-mark-media-height:162px; + --spectrum-coach-mark-media-minimum-height:121px; + --spectrum-coach-mark-title-size:var(--spectrum-heading-size-xxs); + --spectrum-coach-mark-body-size:var(--spectrum-body-size-xs); + --spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-xs); + --spectrum-accordion-top-to-text-regular-small:7px; + --spectrum-accordion-small-top-to-text-spacious:12px; + --spectrum-accordion-top-to-text-regular-medium:9px; + --spectrum-accordion-top-to-text-spacious-medium:14px; + --spectrum-accordion-top-to-text-compact-large:7px; + --spectrum-accordion-top-to-text-regular-large:12px; + --spectrum-accordion-top-to-text-spacious-large:14px; + --spectrum-accordion-top-to-text-compact-extra-large:7px; + --spectrum-accordion-top-to-text-regular-extra-large:12px; + --spectrum-accordion-top-to-text-spacious-extra-large:14px; + --spectrum-accordion-bottom-to-text-compact-small:4px; + --spectrum-accordion-bottom-to-text-regular-small:9px; + --spectrum-accordion-bottom-to-text-spacious-small:14px; + --spectrum-accordion-bottom-to-text-compact-medium:8px; + --spectrum-accordion-bottom-to-text-regular-medium:13px; + --spectrum-accordion-bottom-to-text-spacious-medium:18px; + --spectrum-accordion-bottom-to-text-compact-large:9px; + --spectrum-accordion-bottom-to-text-regular-large:14px; + --spectrum-accordion-bottom-to-text-spacious-large:19px; + --spectrum-accordion-bottom-to-text-compact-extra-large:10px; + --spectrum-accordion-bottom-to-text-regular-extra-large:15px; + --spectrum-accordion-bottom-to-text-spacious-extra-large:21px; + --spectrum-accordion-minimum-width:250px; + --spectrum-accordion-content-area-top-to-content:10px; + --spectrum-accordion-content-area-bottom-to-content:20px; + --spectrum-color-handle-size:20px; + --spectrum-color-handle-size-key-focus:40px; + --spectrum-table-column-header-row-top-to-text-small:10px; + --spectrum-table-column-header-row-top-to-text-medium:9px; + --spectrum-table-column-header-row-top-to-text-large:13px; + --spectrum-table-column-header-row-top-to-text-extra-large:16px; + --spectrum-table-column-header-row-bottom-to-text-small:11px; + --spectrum-table-column-header-row-bottom-to-text-medium:10px; + --spectrum-table-column-header-row-bottom-to-text-large:13px; + --spectrum-table-column-header-row-bottom-to-text-extra-large:17px; + --spectrum-table-row-height-small-regular:40px; + --spectrum-table-row-height-medium-regular:50px; + --spectrum-table-row-height-large-regular:60px; + --spectrum-table-row-height-extra-large-regular:70px; + --spectrum-table-row-height-small-spacious:50px; + --spectrum-table-row-height-medium-spacious:60px; + --spectrum-table-row-height-large-spacious:70px; + --spectrum-table-row-height-extra-large-spacious:80px; + --spectrum-table-row-top-to-text-small-regular:10px; + --spectrum-table-row-top-to-text-medium-regular:14px; + --spectrum-table-row-top-to-text-large-regular:18px; + --spectrum-table-row-top-to-text-extra-large-regular:21px; + --spectrum-table-row-bottom-to-text-small-regular:11px; + --spectrum-table-row-bottom-to-text-medium-regular:15px; + --spectrum-table-row-bottom-to-text-large-regular:18px; + --spectrum-table-row-bottom-to-text-extra-large-regular:22px; + --spectrum-table-row-top-to-text-small-spacious:15px; + --spectrum-table-row-top-to-text-medium-spacious:18px; + --spectrum-table-row-top-to-text-large-spacious:23px; + --spectrum-table-row-top-to-text-extra-large-spacious:26px; + --spectrum-table-row-bottom-to-text-small-spacious:16px; + --spectrum-table-row-bottom-to-text-medium-spacious:18px; + --spectrum-table-row-bottom-to-text-large-spacious:23px; + --spectrum-table-row-bottom-to-text-extra-large-spacious:27px; + --spectrum-table-checkbox-to-text:30px; + --spectrum-table-header-row-checkbox-to-top-small:14px; + --spectrum-table-header-row-checkbox-to-top-medium:13px; + --spectrum-table-header-row-checkbox-to-top-large:17px; + --spectrum-table-header-row-checkbox-to-top-extra-large:21px; + --spectrum-table-row-checkbox-to-top-small-compact:9px; + --spectrum-table-row-checkbox-to-top-small-regular:14px; + --spectrum-table-row-checkbox-to-top-small-spacious:19px; + --spectrum-table-row-checkbox-to-top-medium-compact:13px; + --spectrum-table-row-checkbox-to-top-medium-regular:18px; + --spectrum-table-row-checkbox-to-top-medium-spacious:23px; + --spectrum-table-row-checkbox-to-top-large-compact:17px; + --spectrum-table-row-checkbox-to-top-large-regular:22px; + --spectrum-table-row-checkbox-to-top-large-spacious:27px; + --spectrum-table-row-checkbox-to-top-extra-large-compact:21px; + --spectrum-table-row-checkbox-to-top-extra-large-regular:26px; + --spectrum-table-row-checkbox-to-top-extra-large-spacious:31px; + --spectrum-table-section-header-row-height-small:30px; + --spectrum-table-section-header-row-height-medium:40px; + --spectrum-table-section-header-row-height-large:50px; + --spectrum-table-section-header-row-height-extra-large:60px; + --spectrum-table-thumbnail-to-top-minimum-small-compact:5px; + --spectrum-table-thumbnail-to-top-minimum-medium-compact:6px; + --spectrum-table-thumbnail-to-top-minimum-large-compact:9px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact:10px; + --spectrum-table-thumbnail-to-top-minimum-small-regular:6px; + --spectrum-table-thumbnail-to-top-minimum-medium-regular:9px; + --spectrum-table-thumbnail-to-top-minimum-large-regular:10px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular:10px; + --spectrum-table-thumbnail-to-top-minimum-small-spacious:9px; + --spectrum-table-thumbnail-to-top-minimum-medium-spacious:10px; + --spectrum-table-thumbnail-to-top-minimum-large-spacious:10px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious:12px; + --spectrum-tab-item-to-tab-item-horizontal-small:27px; + --spectrum-tab-item-to-tab-item-horizontal-medium:30px; + --spectrum-tab-item-to-tab-item-horizontal-large:33px; + --spectrum-tab-item-to-tab-item-horizontal-extra-large:36px; + --spectrum-tab-item-to-tab-item-vertical-small:5px; + --spectrum-tab-item-to-tab-item-vertical-medium:5px; + --spectrum-tab-item-to-tab-item-vertical-large:6px; + --spectrum-tab-item-to-tab-item-vertical-extra-large:6px; + --spectrum-tab-item-start-to-edge-small:13px; + --spectrum-tab-item-start-to-edge-medium:15px; + --spectrum-tab-item-start-to-edge-large:17px; + --spectrum-tab-item-start-to-edge-extra-large:19px; + --spectrum-tab-item-top-to-text-small:14px; + --spectrum-tab-item-bottom-to-text-small:15px; + --spectrum-tab-item-top-to-text-medium:18px; + --spectrum-tab-item-bottom-to-text-medium:19px; + --spectrum-tab-item-top-to-text-large:22px; + --spectrum-tab-item-bottom-to-text-large:22px; + --spectrum-tab-item-top-to-text-extra-large:25px; + --spectrum-tab-item-bottom-to-text-extra-large:25px; + --spectrum-tab-item-top-to-text-compact-small:5px; + --spectrum-tab-item-bottom-to-text-compact-small:6px; + --spectrum-tab-item-top-to-text-compact-medium:9px; + --spectrum-tab-item-bottom-to-text-compact-medium:10px; + --spectrum-tab-item-top-to-text-compact-large:12px; + --spectrum-tab-item-bottom-to-text-compact-large:14px; + --spectrum-tab-item-top-to-text-compact-extra-large:15px; + --spectrum-tab-item-bottom-to-text-compact-extra-large:17px; + --spectrum-tab-item-top-to-workflow-icon-small:15px; + --spectrum-tab-item-top-to-workflow-icon-medium:19px; + --spectrum-tab-item-top-to-workflow-icon-large:23px; + --spectrum-tab-item-top-to-workflow-icon-extra-large:26px; + --spectrum-tab-item-top-to-workflow-icon-compact-small:5px; + --spectrum-tab-item-top-to-workflow-icon-compact-medium:9px; + --spectrum-tab-item-top-to-workflow-icon-compact-large:13px; + --spectrum-tab-item-top-to-workflow-icon-compact-extra-large:16px; + --spectrum-tab-item-focus-indicator-gap-small:9px; + --spectrum-tab-item-focus-indicator-gap-medium:10px; + --spectrum-tab-item-focus-indicator-gap-large:11px; + --spectrum-tab-item-focus-indicator-gap-extra-large:12px; + --spectrum-side-navigation-width:240px; + --spectrum-side-navigation-minimum-width:200px; + --spectrum-side-navigation-maximum-width:300px; + --spectrum-side-navigation-second-level-edge-to-text:30px; + --spectrum-side-navigation-third-level-edge-to-text:45px; + --spectrum-side-navigation-with-icon-second-level-edge-to-text:62px; + --spectrum-side-navigation-with-icon-third-level-edge-to-text:77px; + --spectrum-side-navigation-item-to-item:5px; + --spectrum-side-navigation-item-to-header:30px; + --spectrum-side-navigation-header-to-item:10px; + --spectrum-side-navigation-bottom-to-text:10px; + --spectrum-tray-top-to-content-area:5px; + --spectrum-accordion-top-to-text-spacious-small:12px; + --spectrum-drop-shadow-y:2px; + --spectrum-drop-shadow-blur:6px; + --spectrum-text-to-visual-50:8px; + --spectrum-text-to-visual-75:9px; + --spectrum-text-to-visual-100:10px; + --spectrum-text-to-visual-200:11px; + --spectrum-text-to-visual-300:13px; + --spectrum-text-to-control-75:11px; + --spectrum-text-to-control-100:13px; + --spectrum-text-to-control-200:14px; + --spectrum-text-to-control-300:16px; + --spectrum-component-height-50:26px; + --spectrum-component-height-75:30px; + --spectrum-component-height-100:40px; + --spectrum-component-height-200:50px; + --spectrum-component-height-300:60px; + --spectrum-component-height-400:70px; + --spectrum-component-height-500:80px; + --spectrum-component-pill-edge-to-visual-75:13px; + --spectrum-component-pill-edge-to-visual-100:17px; + --spectrum-component-pill-edge-to-visual-200:22px; + --spectrum-component-pill-edge-to-visual-300:27px; + --spectrum-component-pill-edge-to-visual-only-75:5px; + --spectrum-component-pill-edge-to-visual-only-100:9px; + --spectrum-component-pill-edge-to-visual-only-200:13px; + --spectrum-component-pill-edge-to-visual-only-300:16px; + --spectrum-component-pill-edge-to-text-75:15px; + --spectrum-component-pill-edge-to-text-100:20px; + --spectrum-component-pill-edge-to-text-200:25px; + --spectrum-component-pill-edge-to-text-300:30px; + --spectrum-component-edge-to-visual-50:7px; + --spectrum-component-edge-to-visual-75:9px; + --spectrum-component-edge-to-visual-100:12px; + --spectrum-component-edge-to-visual-200:16px; + --spectrum-component-edge-to-visual-300:19px; + --spectrum-component-edge-to-visual-only-50:4px; + --spectrum-component-edge-to-visual-only-75:5px; + --spectrum-component-edge-to-visual-only-100:9px; + --spectrum-component-edge-to-visual-only-200:13px; + --spectrum-component-edge-to-visual-only-300:16px; + --spectrum-component-edge-to-text-50:10px; + --spectrum-component-edge-to-text-75:11px; + --spectrum-component-edge-to-text-100:15px; + --spectrum-component-edge-to-text-200:19px; + --spectrum-component-edge-to-text-300:22px; + --spectrum-component-top-to-workflow-icon-50:4px; + --spectrum-component-top-to-workflow-icon-75:5px; + --spectrum-component-top-to-workflow-icon-100:9px; + --spectrum-component-top-to-workflow-icon-200:13px; + --spectrum-component-top-to-workflow-icon-300:16px; + --spectrum-component-top-to-text-50:4px; + --spectrum-component-top-to-text-75:5px; + --spectrum-component-top-to-text-100:8px; + --spectrum-component-top-to-text-200:12px; + --spectrum-component-top-to-text-300:15px; + --spectrum-component-bottom-to-text-50:6px; + --spectrum-component-bottom-to-text-75:6px; + --spectrum-component-bottom-to-text-100:11px; + --spectrum-component-bottom-to-text-200:14px; + --spectrum-component-bottom-to-text-300:18px; + --spectrum-component-to-menu-small:7px; + --spectrum-component-to-menu-medium:8px; + --spectrum-component-to-menu-large:9px; + --spectrum-component-to-menu-extra-large:10px; + --spectrum-field-edge-to-disclosure-icon-75:9px; + --spectrum-field-edge-to-disclosure-icon-100:13px; + --spectrum-field-edge-to-disclosure-icon-200:17px; + --spectrum-field-edge-to-disclosure-icon-300:22px; + --spectrum-field-end-edge-to-disclosure-icon-75:9px; + --spectrum-field-end-edge-to-disclosure-icon-100:13px; + --spectrum-field-end-edge-to-disclosure-icon-200:17px; + --spectrum-field-end-edge-to-disclosure-icon-300:22px; + --spectrum-field-top-to-disclosure-icon-75:9px; + --spectrum-field-top-to-disclosure-icon-100:13px; + --spectrum-field-top-to-disclosure-icon-200:17px; + --spectrum-field-top-to-disclosure-icon-300:22px; + --spectrum-field-top-to-alert-icon-small:5px; + --spectrum-field-top-to-alert-icon-medium:9px; + --spectrum-field-top-to-alert-icon-large:13px; + --spectrum-field-top-to-alert-icon-extra-large:16px; + --spectrum-field-top-to-validation-icon-small:9px; + --spectrum-field-top-to-validation-icon-medium:13px; + --spectrum-field-top-to-validation-icon-large:17px; + --spectrum-field-top-to-validation-icon-extra-large:22px; + --spectrum-field-top-to-progress-circle-small:7px; + --spectrum-field-top-to-progress-circle-medium:12px; + --spectrum-field-top-to-progress-circle-large:17px; + --spectrum-field-top-to-progress-circle-extra-large:22px; + --spectrum-field-edge-to-alert-icon-small:11px; + --spectrum-field-edge-to-alert-icon-medium:15px; + --spectrum-field-edge-to-alert-icon-large:19px; + --spectrum-field-edge-to-alert-icon-extra-large:22px; + --spectrum-field-edge-to-validation-icon-small:11px; + --spectrum-field-edge-to-validation-icon-medium:15px; + --spectrum-field-edge-to-validation-icon-large:19px; + --spectrum-field-edge-to-validation-icon-extra-large:22px; + --spectrum-field-text-to-alert-icon-small:10px; + --spectrum-field-text-to-alert-icon-medium:15px; + --spectrum-field-text-to-alert-icon-large:19px; + --spectrum-field-text-to-alert-icon-extra-large:22px; + --spectrum-field-text-to-validation-icon-small:10px; + --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; + --spectrum-character-count-to-field-quiet-extra-large:-5px; + --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: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; + --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:22px; + --spectrum-navigational-indicator-top-to-back-icon-small:7px; + --spectrum-navigational-indicator-top-to-back-icon-medium:12px; + --spectrum-navigational-indicator-top-to-back-icon-large:16px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large:19px; + --spectrum-color-control-track-width:30px; + --spectrum-font-size-50:13px; + --spectrum-font-size-75:15px; + --spectrum-font-size-100:17px; + --spectrum-font-size-200:19px; + --spectrum-font-size-300:22px; + --spectrum-font-size-400:24px; + --spectrum-font-size-500:27px; + --spectrum-font-size-600:31px; + --spectrum-font-size-700:34px; + --spectrum-font-size-800:39px; + --spectrum-font-size-900:44px; + --spectrum-font-size-1000:49px; + --spectrum-font-size-1100:55px; + --spectrum-font-size-1200:62px; + --spectrum-font-size-1300:70px; + --spectrum-slider-tick-mark-height:13px; + --spectrum-slider-ramp-track-height:20px; + + --spectrum-colorwheel-path:"M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0"; + --spectrum-colorwheel-path-borders:"M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; + --spectrum-colorwheel-colorarea-container-size:182px; + + --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-secondary); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small:34px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:42px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large:47px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:54px; + + --spectrum-menu-item-checkmark-height-small:12px; + --spectrum-menu-item-checkmark-height-medium:14px; + --spectrum-menu-item-checkmark-height-large:16px; + --spectrum-menu-item-checkmark-height-extra-large:16px; + + --spectrum-menu-item-checkmark-width-small:12px; + --spectrum-menu-item-checkmark-width-medium:14px; + --spectrum-menu-item-checkmark-width-large:16px; + --spectrum-menu-item-checkmark-width-extra-large:16px; + + --spectrum-rating-icon-spacing:var(--spectrum-spacing-100); + + --spectrum-button-top-to-text-small:6px; + --spectrum-button-bottom-to-text-small:5px; + --spectrum-button-top-to-text-medium:9px; + --spectrum-button-bottom-to-text-medium:10px; + --spectrum-button-top-to-text-large:12px; + --spectrum-button-bottom-to-text-large:13px; + --spectrum-button-top-to-text-extra-large:16px; + --spectrum-button-bottom-to-text-extra-large:17px; + + --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-200); + --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-200); + + --spectrum-alert-dialog-padding:var(--spectrum-spacing-400); + --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-600); + + --spectrum-coach-indicator-gap:8px; + --spectrum-coach-indicator-ring-diameter:20px; + --spectrum-coach-indicator-quiet-ring-diameter:10px; + + --spectrum-coachmark-buttongroup-display:none; + --spectrum-coachmark-buttongroup-mobile-display:flex; + --spectrum-coachmark-menu-display:none; + --spectrum-coachmark-menu-mobile-display:inline-flex; + --spectrum-workflow-icon-size-xxl:40px; + --spectrum-workflow-icon-size-xxs:15px; + + --spectrum-treeview-item-indentation-medium:20px; + --spectrum-treeview-item-indentation-small:15px; + --spectrum-treeview-item-indentation-large:25px; + --spectrum-treeview-item-indentation-extra-large:30px; + --spectrum-treeview-indicator-inset-block-start:6px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:2px; + + --spectrum-dialog-confirm-entry-animation-distance:25px; + --spectrum-dialog-confirm-hero-height:160px; + --spectrum-dialog-confirm-border-radius:5px; + --spectrum-dialog-confirm-title-text-size:19px; + --spectrum-dialog-confirm-description-text-size:15px; + --spectrum-dialog-confirm-padding-grid:24px; + + --spectrum-datepicker-initial-width:160px; + --spectrum-datepicker-generic-padding:15px; + --spectrum-datepicker-dash-line-height:30px; + --spectrum-datepicker-width-quiet-first:90px; + --spectrum-datepicker-width-quiet-second:20px; + --spectrum-datepicker-datetime-width-first:45px; + --spectrum-datepicker-invalid-icon-to-button:10px; + --spectrum-datepicker-invalid-icon-to-button-quiet:9px; + --spectrum-datepicker-input-datetime-width:30px; + + --spectrum-pagination-textfield-width:60px; + --spectrum-pagination-item-inline-spacing:6px; + + --spectrum-dial-border-radius:20px; + --spectrum-dial-handle-position:10px; + --spectrum-dial-handle-block-margin:20px; + --spectrum-dial-handle-inline-margin:20px; + --spectrum-dial-controls-margin:10px; + --spectrum-dial-label-gap-y:6px; + --spectrum-dial-label-container-top-to-text:5px; + + --spectrum-assetcard-focus-ring-border-radius:9px; + --spectrum-assetcard-selectionindicator-margin:15px; + --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xxs); + --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xxs); + --spectrum-assetcard-content-font-size:var(--spectrum-body-size-xs); + + --spectrum-tooltip-animation-distance:5px; + + --spectrum-ui-icon-medium-display:none; + --spectrum-ui-icon-large-display:block; + + --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-200); +} diff --git a/tokens/dist/css/light-vars.css b/tokens/dist/css/light-vars.css new file mode 100644 index 00000000000..039dccf3710 --- /dev/null +++ b/tokens/dist/css/light-vars.css @@ -0,0 +1,739 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--light{ + --spectrum-overlay-opacity:0.4; + --spectrum-background-layer-2-color:var(--spectrum-gray-25); + --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-700); + --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-800); + --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-800); + --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-800); + --spectrum-accent-background-color-default:var(--spectrum-accent-color-900); + --spectrum-accent-background-color-hover:var(--spectrum-accent-color-1000); + --spectrum-accent-background-color-down:var(--spectrum-accent-color-1000); + --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-1000); + --spectrum-informative-background-color-default:var(--spectrum-informative-color-900); + --spectrum-informative-background-color-hover:var(--spectrum-informative-color-1000); + --spectrum-informative-background-color-down:var(--spectrum-informative-color-1000); + --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-1000); + --spectrum-negative-background-color-default:var(--spectrum-negative-color-900); + --spectrum-negative-background-color-hover:var(--spectrum-negative-color-1000); + --spectrum-negative-background-color-down:var(--spectrum-negative-color-1000); + --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-1000); + --spectrum-positive-background-color-default:var(--spectrum-positive-color-900); + --spectrum-positive-background-color-hover:var(--spectrum-positive-color-1000); + --spectrum-positive-background-color-down:var(--spectrum-positive-color-1000); + --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-1000); + --spectrum-notice-background-color-default:var(--spectrum-notice-color-600); + --spectrum-gray-background-color-default:var(--spectrum-gray-700); + --spectrum-red-background-color-default:var(--spectrum-red-900); + --spectrum-orange-background-color-default:var(--spectrum-orange-600); + --spectrum-yellow-background-color-default:var(--spectrum-yellow-400); + --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-500); + --spectrum-celery-background-color-default:var(--spectrum-celery-600); + --spectrum-green-background-color-default:var(--spectrum-green-900); + --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-900); + --spectrum-cyan-background-color-default:var(--spectrum-cyan-900); + --spectrum-blue-background-color-default:var(--spectrum-blue-900); + --spectrum-indigo-background-color-default:var(--spectrum-indigo-900); + --spectrum-purple-background-color-default:var(--spectrum-purple-900); + --spectrum-fuchsia-background-color-default:var(--spectrum-fuchsia-900); + --spectrum-magenta-background-color-default:var(--spectrum-magenta-900); + --spectrum-neutral-visual-color:var(--spectrum-gray-500); + --spectrum-accent-visual-color:var(--spectrum-accent-color-800); + --spectrum-informative-visual-color:var(--spectrum-informative-color-800); + --spectrum-negative-visual-color:var(--spectrum-negative-color-800); + --spectrum-notice-visual-color:var(--spectrum-notice-color-700); + --spectrum-positive-visual-color:var(--spectrum-positive-color-700); + --spectrum-gray-visual-color:var(--spectrum-gray-500); + --spectrum-red-visual-color:var(--spectrum-red-800); + --spectrum-orange-visual-color:var(--spectrum-orange-700); + --spectrum-yellow-visual-color:var(--spectrum-yellow-600); + --spectrum-chartreuse-visual-color:var(--spectrum-chartreuse-600); + --spectrum-celery-visual-color:var(--spectrum-celery-700); + --spectrum-green-visual-color:var(--spectrum-green-700); + --spectrum-seafoam-visual-color:var(--spectrum-seafoam-700); + --spectrum-cyan-visual-color:var(--spectrum-cyan-600); + --spectrum-blue-visual-color:var(--spectrum-blue-800); + --spectrum-indigo-visual-color:var(--spectrum-indigo-800); + --spectrum-purple-visual-color:var(--spectrum-purple-800); + --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-800); + --spectrum-magenta-visual-color:var(--spectrum-magenta-800); + --spectrum-background-elevated-color:var(--spectrum-gray-25); + --spectrum-background-pasteboard-color:var(--spectrum-gray-100); + --spectrum-brown-visual-color:var(--spectrum-brown-800); + --spectrum-cinnamon-visual-color:var(--spectrum-cinnamon-800); + --spectrum-pink-visual-color:var(--spectrum-pink-800); + --spectrum-silver-visual-color:var(--spectrum-silver-800); + --spectrum-turquoise-visual-color:var(--spectrum-turquoise-800); + --spectrum-brown-background-color-default:var(--spectrum-brown-900); + --spectrum-cinnamon-background-color-default:var(--spectrum-cinnamon-900); + --spectrum-pink-background-color-default:var(--spectrum-pink-900); + --spectrum-silver-background-color-default:var(--spectrum-silver-900); + --spectrum-turquoise-background-color-default:var(--spectrum-turquoise-900); + --spectrum-drop-shadow-color-100-rgb:0, 0, 0; + --spectrum-drop-shadow-color-100-opacity:0.12; + --spectrum-drop-shadow-color-100:rgba(var(--spectrum-drop-shadow-color-100-rgb), var(--spectrum-drop-shadow-color-100-opacity)); + --spectrum-drop-shadow-color-200-rgb:0, 0, 0; + --spectrum-drop-shadow-color-200-opacity:0.16; + --spectrum-drop-shadow-color-200:rgba(var(--spectrum-drop-shadow-color-200-rgb), var(--spectrum-drop-shadow-color-200-opacity)); + --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-200); + --spectrum-gray-25-rgb:255, 255, 255; + --spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb)); + --spectrum-gray-50-rgb:248, 248, 248; + --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb:243, 243, 243; + --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb:233, 233, 233; + --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb:225, 225, 225; + --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb:218, 218, 218; + --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb:198, 198, 198; + --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb:143, 143, 143; + --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb:113, 113, 113; + --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb:80, 80, 80; + --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb:41, 41, 41; + --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb:19, 19, 19; + --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); + --spectrum-gray-1000-rgb:0, 0, 0; + --spectrum-gray-1000:rgba(var(--spectrum-gray-1000-rgb)); + --spectrum-blue-100-rgb:245, 249, 255; + --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb:229, 240, 254; + --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb:203, 226, 254; + --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb:172, 207, 253; + --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb:142, 185, 252; + --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb:114, 158, 253; + --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb:93, 137, 255; + --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb:75, 117, 255; + --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb:59, 99, 251; + --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb:39, 77, 234; + --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb:29, 62, 207; + --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb:21, 50, 173; + --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb:16, 40, 140; + --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb:12, 31, 105; + --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-blue-1500-rgb:14, 24, 67; + --spectrum-blue-1500:rgba(var(--spectrum-blue-1500-rgb)); + --spectrum-blue-1600-rgb:7, 11, 30; + --spectrum-blue-1600:rgba(var(--spectrum-blue-1600-rgb)); + --spectrum-red-100-rgb:255, 246, 245; + --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb:255, 235, 232; + --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb:255, 214, 209; + --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb:255, 188, 180; + --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb:255, 157, 145; + --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb:255, 118, 101; + --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb:255, 81, 61; + --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb:240, 56, 35; + --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb:215, 50, 32; + --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb:183, 40, 24; + --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb:156, 33, 19; + --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb:129, 27, 14; + --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb:104, 21, 10; + --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb:80, 16, 6; + --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); + --spectrum-red-1500-rgb:59, 11, 4; + --spectrum-red-1500:rgba(var(--spectrum-red-1500-rgb)); + --spectrum-red-1600-rgb:29, 5, 2; + --spectrum-red-1600:rgba(var(--spectrum-red-1600-rgb)); + --spectrum-orange-100-rgb:255, 246, 231; + --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb:255, 236, 207; + --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb:255, 218, 158; + --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb:255, 193, 94; + --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb:255, 162, 19; + --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb:252, 125, 0; + --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb:232, 106, 0; + --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb:212, 91, 0; + --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb:194, 78, 0; + --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb:167, 62, 0; + --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb:144, 51, 0; + --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb:118, 41, 0; + --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb:95, 32, 0; + --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb:73, 24, 0; + --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-orange-1500-rgb:52, 18, 0; + --spectrum-orange-1500:rgba(var(--spectrum-orange-1500-rgb)); + --spectrum-orange-1600-rgb:25, 8, 0; + --spectrum-orange-1600:rgba(var(--spectrum-orange-1600-rgb)); + --spectrum-yellow-100-rgb:255, 248, 204; + --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb:255, 241, 151; + --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb:255, 222, 44; + --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb:245, 199, 0; + --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb:230, 175, 0; + --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb:210, 149, 0; + --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb:193, 131, 0; + --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb:175, 116, 0; + --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb:158, 102, 0; + --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb:134, 85, 0; + --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb:114, 72, 0; + --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb:93, 59, 0; + --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb:75, 47, 0; + --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb:56, 35, 0; + --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-yellow-1500-rgb:40, 25, 0; + --spectrum-yellow-1500:rgba(var(--spectrum-yellow-1500-rgb)); + --spectrum-yellow-1600-rgb:18, 11, 0; + --spectrum-yellow-1600:rgba(var(--spectrum-yellow-1600-rgb)); + --spectrum-chartreuse-100-rgb:246, 251, 222; + --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb:234, 246, 173; + --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb:208, 236, 70; + --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb:182, 219, 0; + --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb:163, 196, 0; + --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb:143, 172, 0; + --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb:128, 153, 0; + --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb:114, 137, 0; + --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb:102, 122, 0; + --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb:86, 103, 0; + --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb:73, 87, 0; + --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb:60, 71, 0; + --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb:47, 57, 0; + --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb:35, 43, 0; + --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-chartreuse-1500-rgb:25, 30, 0; + --spectrum-chartreuse-1500:rgba(var(--spectrum-chartreuse-1500-rgb)); + --spectrum-chartreuse-1600-rgb:11, 14, 0; + --spectrum-chartreuse-1600:rgba(var(--spectrum-chartreuse-1600-rgb)); + --spectrum-celery-100-rgb:235, 255, 220; + --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb:197, 255, 156; + --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb:157, 247, 92; + --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb:129, 228, 58; + --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb:110, 206, 42; + --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb:93, 180, 31; + --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb:82, 161, 25; + --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb:72, 144, 20; + --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb:64, 129, 17; + --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb:52, 109, 12; + --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb:44, 92, 9; + --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb:35, 75, 6; + --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb:27, 60, 3; + --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb:19, 46, 0; + --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-celery-1500-rgb:12, 33, 0; + --spectrum-celery-1500:rgba(var(--spectrum-celery-1500-rgb)); + --spectrum-celery-1600-rgb:4, 15, 0; + --spectrum-celery-1600:rgba(var(--spectrum-celery-1600-rgb)); + --spectrum-green-100-rgb:237, 252, 241; + --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb:215, 247, 225; + --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb:173, 238, 197; + --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb:107, 227, 162; + --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb:43, 209, 125; + --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb:18, 184, 103; + --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb:11, 164, 93; + --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb:7, 147, 85; + --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb:5, 131, 78; + --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb:3, 110, 69; + --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb:2, 93, 60; + --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb:1, 76, 52; + --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb:0, 61, 44; + --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb:0, 46, 34; + --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); + --spectrum-green-1500-rgb:0, 33, 25; + --spectrum-green-1500:rgba(var(--spectrum-green-1500-rgb)); + --spectrum-green-1600-rgb:0, 15, 12; + --spectrum-green-1600:rgba(var(--spectrum-green-1600-rgb)); + --spectrum-seafoam-100-rgb:235, 251, 246; + --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb:211, 246, 234; + --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb:169, 237, 216; + --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb:92, 225, 194; + --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb:16, 207, 169; + --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb:13, 181, 149; + --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb:11, 162, 134; + --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb:9, 144, 120; + --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb:7, 129, 109; + --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb:5, 108, 92; + --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb:3, 92, 80; + --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb:1, 75, 67; + --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb:0, 60, 54; + --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb:0, 46, 40; + --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-seafoam-1500-rgb:0, 33, 29; + --spectrum-seafoam-1500:rgba(var(--spectrum-seafoam-1500-rgb)); + --spectrum-seafoam-1600-rgb:0, 15, 14; + --spectrum-seafoam-1600:rgba(var(--spectrum-seafoam-1600-rgb)); + --spectrum-cyan-100-rgb:238, 250, 254; + --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb:217, 244, 253; + --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb:183, 231, 252; + --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb:138, 213, 255; + --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb:92, 192, 255; + --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb:48, 167, 254; + --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb:29, 149, 231; + --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb:18, 134, 205; + --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb:11, 120, 179; + --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb:4, 102, 145; + --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb:0, 87, 121; + --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb:0, 71, 98; + --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb:0, 57, 78; + --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb:0, 43, 59; + --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-cyan-1500-rgb:0, 31, 43; + --spectrum-cyan-1500:rgba(var(--spectrum-cyan-1500-rgb)); + --spectrum-cyan-1600-rgb:0, 14, 20; + --spectrum-cyan-1600:rgba(var(--spectrum-cyan-1600-rgb)); + --spectrum-indigo-100-rgb:247, 248, 255; + --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb:235, 238, 255; + --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb:216, 222, 255; + --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb:192, 201, 255; + --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb:167, 178, 255; + --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb:145, 151, 254; + --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb:132, 128, 254; + --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb:122, 106, 253; + --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb:113, 85, 250; + --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb:99, 56, 238; + --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb:84, 36, 219; + --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb:69, 19, 191; + --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb:55, 6, 160; + --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb:42, 0, 129; + --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-indigo-1500-rgb:31, 0, 98; + --spectrum-indigo-1500:rgba(var(--spectrum-indigo-1500-rgb)); + --spectrum-indigo-1600-rgb:17, 0, 54; + --spectrum-indigo-1600:rgba(var(--spectrum-indigo-1600-rgb)); + --spectrum-purple-100-rgb:251, 247, 254; + --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb:244, 235, 252; + --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb:235, 218, 249; + --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb:221, 193, 246; + --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb:208, 167, 243; + --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb:191, 138, 238; + --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb:178, 114, 235; + --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb:166, 92, 231; + --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb:154, 71, 226; + --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb:134, 40, 217; + --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb:115, 13, 204; + --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb:93, 0, 177; + --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb:75, 0, 144; + --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb:59, 0, 111; + --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-purple-1500-rgb:44, 0, 84; + --spectrum-purple-1500:rgba(var(--spectrum-purple-1500-rgb)); + --spectrum-purple-1600-rgb:23, 0, 45; + --spectrum-purple-1600:rgba(var(--spectrum-purple-1600-rgb)); + --spectrum-fuchsia-100-rgb:254, 246, 255; + --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb:253, 233, 255; + --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb:250, 211, 255; + --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb:247, 181, 255; + --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb:243, 147, 255; + --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb:236, 105, 255; + --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb:223, 77, 245; + --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb:200, 68, 220; + --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb:181, 57, 200; + --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb:156, 40, 175; + --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb:135, 27, 154; + --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb:113, 15, 131; + --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb:92, 4, 109; + --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb:72, 0, 88; + --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-fuchsia-1500-rgb:54, 0, 66; + --spectrum-fuchsia-1500:rgba(var(--spectrum-fuchsia-1500-rgb)); + --spectrum-fuchsia-1600-rgb:29, 0, 35; + --spectrum-fuchsia-1600:rgba(var(--spectrum-fuchsia-1600-rgb)); + --spectrum-magenta-100-rgb:255, 245, 248; + --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb:255, 232, 240; + --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb:255, 213, 227; + --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb:255, 185, 208; + --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb:255, 152, 187; + --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb:255, 112, 159; + --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb:255, 72, 133; + --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb:240, 45, 110; + --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb:217, 35, 97; + --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb:186, 22, 80; + --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb:163, 5, 62; + --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb:136, 0, 51; + --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb:111, 0, 40; + --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb:86, 0, 30; + --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-magenta-1500-rgb:64, 0, 22; + --spectrum-magenta-1500:rgba(var(--spectrum-magenta-1500-rgb)); + --spectrum-magenta-1600-rgb:35, 0, 12; + --spectrum-magenta-1600:rgba(var(--spectrum-magenta-1600-rgb)); + --spectrum-pink-100-rgb:255, 246, 252; + --spectrum-pink-100:rgba(var(--spectrum-pink-100-rgb)); + --spectrum-pink-200-rgb:255, 232, 247; + --spectrum-pink-200:rgba(var(--spectrum-pink-200-rgb)); + --spectrum-pink-300-rgb:255, 211, 240; + --spectrum-pink-300:rgba(var(--spectrum-pink-300-rgb)); + --spectrum-pink-400-rgb:255, 181, 230; + --spectrum-pink-400:rgba(var(--spectrum-pink-400-rgb)); + --spectrum-pink-500-rgb:255, 148, 219; + --spectrum-pink-500:rgba(var(--spectrum-pink-500-rgb)); + --spectrum-pink-600-rgb:255, 103, 204; + --spectrum-pink-600:rgba(var(--spectrum-pink-600-rgb)); + --spectrum-pink-700-rgb:242, 76, 184; + --spectrum-pink-700:rgba(var(--spectrum-pink-700-rgb)); + --spectrum-pink-800-rgb:228, 52, 163; + --spectrum-pink-800:rgba(var(--spectrum-pink-800-rgb)); + --spectrum-pink-900-rgb:206, 42, 146; + --spectrum-pink-900:rgba(var(--spectrum-pink-900-rgb)); + --spectrum-pink-1000-rgb:176, 31, 123; + --spectrum-pink-1000:rgba(var(--spectrum-pink-1000-rgb)); + --spectrum-pink-1100-rgb:152, 22, 104; + --spectrum-pink-1100:rgba(var(--spectrum-pink-1100-rgb)); + --spectrum-pink-1200-rgb:128, 12, 85; + --spectrum-pink-1200:rgba(var(--spectrum-pink-1200-rgb)); + --spectrum-pink-1300-rgb:105, 3, 68; + --spectrum-pink-1300:rgba(var(--spectrum-pink-1300-rgb)); + --spectrum-pink-1400-rgb:83, 0, 53; + --spectrum-pink-1400:rgba(var(--spectrum-pink-1400-rgb)); + --spectrum-pink-1500-rgb:62, 0, 39; + --spectrum-pink-1500:rgba(var(--spectrum-pink-1500-rgb)); + --spectrum-pink-1600-rgb:33, 0, 21; + --spectrum-pink-1600:rgba(var(--spectrum-pink-1600-rgb)); + --spectrum-turquoise-100-rgb:238, 251, 251; + --spectrum-turquoise-100:rgba(var(--spectrum-turquoise-100-rgb)); + --spectrum-turquoise-200-rgb:209, 245, 245; + --spectrum-turquoise-200:rgba(var(--spectrum-turquoise-200-rgb)); + --spectrum-turquoise-300-rgb:169, 236, 237; + --spectrum-turquoise-300:rgba(var(--spectrum-turquoise-300-rgb)); + --spectrum-turquoise-400-rgb:111, 221, 228; + --spectrum-turquoise-400:rgba(var(--spectrum-turquoise-400-rgb)); + --spectrum-turquoise-500-rgb:39, 202, 216; + --spectrum-turquoise-500:rgba(var(--spectrum-turquoise-500-rgb)); + --spectrum-turquoise-600-rgb:15, 177, 192; + --spectrum-turquoise-600:rgba(var(--spectrum-turquoise-600-rgb)); + --spectrum-turquoise-700-rgb:12, 158, 171; + --spectrum-turquoise-700:rgba(var(--spectrum-turquoise-700-rgb)); + --spectrum-turquoise-800-rgb:10, 141, 153; + --spectrum-turquoise-800:rgba(var(--spectrum-turquoise-800-rgb)); + --spectrum-turquoise-900-rgb:8, 126, 137; + --spectrum-turquoise-900:rgba(var(--spectrum-turquoise-900-rgb)); + --spectrum-turquoise-1000-rgb:5, 107, 116; + --spectrum-turquoise-1000:rgba(var(--spectrum-turquoise-1000-rgb)); + --spectrum-turquoise-1100-rgb:3, 90, 98; + --spectrum-turquoise-1100:rgba(var(--spectrum-turquoise-1100-rgb)); + --spectrum-turquoise-1200-rgb:1, 74, 81; + --spectrum-turquoise-1200:rgba(var(--spectrum-turquoise-1200-rgb)); + --spectrum-turquoise-1300-rgb:0, 59, 65; + --spectrum-turquoise-1300:rgba(var(--spectrum-turquoise-1300-rgb)); + --spectrum-turquoise-1400-rgb:0, 44, 49; + --spectrum-turquoise-1400:rgba(var(--spectrum-turquoise-1400-rgb)); + --spectrum-turquoise-1500-rgb:0, 32, 35; + --spectrum-turquoise-1500:rgba(var(--spectrum-turquoise-1500-rgb)); + --spectrum-turquoise-1600-rgb:0, 15, 17; + --spectrum-turquoise-1600:rgba(var(--spectrum-turquoise-1600-rgb)); + --spectrum-brown-100-rgb:252, 247, 242; + --spectrum-brown-100:rgba(var(--spectrum-brown-100-rgb)); + --spectrum-brown-200-rgb:247, 238, 225; + --spectrum-brown-200:rgba(var(--spectrum-brown-200-rgb)); + --spectrum-brown-300-rgb:239, 221, 195; + --spectrum-brown-300:rgba(var(--spectrum-brown-300-rgb)); + --spectrum-brown-400-rgb:229, 200, 157; + --spectrum-brown-400:rgba(var(--spectrum-brown-400-rgb)); + --spectrum-brown-500-rgb:214, 177, 123; + --spectrum-brown-500:rgba(var(--spectrum-brown-500-rgb)); + --spectrum-brown-600-rgb:190, 155, 104; + --spectrum-brown-600:rgba(var(--spectrum-brown-600-rgb)); + --spectrum-brown-700-rgb:171, 138, 90; + --spectrum-brown-700:rgba(var(--spectrum-brown-700-rgb)); + --spectrum-brown-800-rgb:154, 123, 77; + --spectrum-brown-800:rgba(var(--spectrum-brown-800-rgb)); + --spectrum-brown-900-rgb:139, 109, 66; + --spectrum-brown-900:rgba(var(--spectrum-brown-900-rgb)); + --spectrum-brown-1000-rgb:119, 91, 50; + --spectrum-brown-1000:rgba(var(--spectrum-brown-1000-rgb)); + --spectrum-brown-1100-rgb:103, 76, 35; + --spectrum-brown-1100:rgba(var(--spectrum-brown-1100-rgb)); + --spectrum-brown-1200-rgb:88, 61, 21; + --spectrum-brown-1200:rgba(var(--spectrum-brown-1200-rgb)); + --spectrum-brown-1300-rgb:70, 49, 17; + --spectrum-brown-1300:rgba(var(--spectrum-brown-1300-rgb)); + --spectrum-brown-1400-rgb:52, 37, 13; + --spectrum-brown-1400:rgba(var(--spectrum-brown-1400-rgb)); + --spectrum-brown-1500-rgb:38, 26, 9; + --spectrum-brown-1500:rgba(var(--spectrum-brown-1500-rgb)); + --spectrum-brown-1600-rgb:16, 12, 4; + --spectrum-brown-1600:rgba(var(--spectrum-brown-1600-rgb)); + --spectrum-silver-100-rgb:247, 247, 247; + --spectrum-silver-100:rgba(var(--spectrum-silver-100-rgb)); + --spectrum-silver-200-rgb:239, 239, 239; + --spectrum-silver-200:rgba(var(--spectrum-silver-200-rgb)); + --spectrum-silver-300-rgb:223, 223, 223; + --spectrum-silver-300:rgba(var(--spectrum-silver-300-rgb)); + --spectrum-silver-400-rgb:204, 204, 204; + --spectrum-silver-400:rgba(var(--spectrum-silver-400-rgb)); + --spectrum-silver-500-rgb:183, 183, 183; + --spectrum-silver-500:rgba(var(--spectrum-silver-500-rgb)); + --spectrum-silver-600-rgb:160, 160, 160; + --spectrum-silver-600:rgba(var(--spectrum-silver-600-rgb)); + --spectrum-silver-700-rgb:143, 143, 143; + --spectrum-silver-700:rgba(var(--spectrum-silver-700-rgb)); + --spectrum-silver-800-rgb:128, 128, 128; + --spectrum-silver-800:rgba(var(--spectrum-silver-800-rgb)); + --spectrum-silver-900-rgb:114, 114, 114; + --spectrum-silver-900:rgba(var(--spectrum-silver-900-rgb)); + --spectrum-silver-1000-rgb:96, 96, 96; + --spectrum-silver-1000:rgba(var(--spectrum-silver-1000-rgb)); + --spectrum-silver-1100-rgb:81, 81, 81; + --spectrum-silver-1100:rgba(var(--spectrum-silver-1100-rgb)); + --spectrum-silver-1200-rgb:66, 66, 66; + --spectrum-silver-1200:rgba(var(--spectrum-silver-1200-rgb)); + --spectrum-silver-1300-rgb:52, 52, 52; + --spectrum-silver-1300:rgba(var(--spectrum-silver-1300-rgb)); + --spectrum-silver-1400-rgb:39, 39, 39; + --spectrum-silver-1400:rgba(var(--spectrum-silver-1400-rgb)); + --spectrum-silver-1500-rgb:28, 28, 28; + --spectrum-silver-1500:rgba(var(--spectrum-silver-1500-rgb)); + --spectrum-silver-1600-rgb:12, 12, 12; + --spectrum-silver-1600:rgba(var(--spectrum-silver-1600-rgb)); + --spectrum-cinnamon-100-rgb:253, 247, 243; + --spectrum-cinnamon-100:rgba(var(--spectrum-cinnamon-100-rgb)); + --spectrum-cinnamon-200-rgb:249, 236, 229; + --spectrum-cinnamon-200:rgba(var(--spectrum-cinnamon-200-rgb)); + --spectrum-cinnamon-300-rgb:244, 218, 203; + --spectrum-cinnamon-300:rgba(var(--spectrum-cinnamon-300-rgb)); + --spectrum-cinnamon-400-rgb:237, 196, 172; + --spectrum-cinnamon-400:rgba(var(--spectrum-cinnamon-400-rgb)); + --spectrum-cinnamon-500-rgb:229, 170, 136; + --spectrum-cinnamon-500:rgba(var(--spectrum-cinnamon-500-rgb)); + --spectrum-cinnamon-600-rgb:212, 145, 108; + --spectrum-cinnamon-600:rgba(var(--spectrum-cinnamon-600-rgb)); + --spectrum-cinnamon-700-rgb:198, 126, 88; + --spectrum-cinnamon-700:rgba(var(--spectrum-cinnamon-700-rgb)); + --spectrum-cinnamon-800-rgb:184, 109, 70; + --spectrum-cinnamon-800:rgba(var(--spectrum-cinnamon-800-rgb)); + --spectrum-cinnamon-900-rgb:170, 94, 56; + --spectrum-cinnamon-900:rgba(var(--spectrum-cinnamon-900-rgb)); + --spectrum-cinnamon-1000-rgb:147, 77, 43; + --spectrum-cinnamon-1000:rgba(var(--spectrum-cinnamon-1000-rgb)); + --spectrum-cinnamon-1100-rgb:128, 62, 32; + --spectrum-cinnamon-1100:rgba(var(--spectrum-cinnamon-1100-rgb)); + --spectrum-cinnamon-1200-rgb:110, 48, 21; + --spectrum-cinnamon-1200:rgba(var(--spectrum-cinnamon-1200-rgb)); + --spectrum-cinnamon-1300-rgb:92, 35, 11; + --spectrum-cinnamon-1300:rgba(var(--spectrum-cinnamon-1300-rgb)); + --spectrum-cinnamon-1400-rgb:72, 25, 6; + --spectrum-cinnamon-1400:rgba(var(--spectrum-cinnamon-1400-rgb)); + --spectrum-cinnamon-1500-rgb:52, 18, 4; + --spectrum-cinnamon-1500:rgba(var(--spectrum-cinnamon-1500-rgb)); + --spectrum-cinnamon-1600-rgb:24, 8, 2; + --spectrum-cinnamon-1600:rgba(var(--spectrum-cinnamon-1600-rgb)); + --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-900); + --spectrum-icon-color-green-primary-default:var(--spectrum-green-900); + --spectrum-icon-color-red-primary-default:var(--spectrum-red-900); + --spectrum-icon-color-yellow-primary-default:var(--spectrum-yellow-400); + --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-800-rgb); + --spectrum-dropindicator-color:var(--spectrum-blue-800); + + --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); + --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-black-rgb), 0.06); + --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-down:var(--spectrum-transparent-black-200); + --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-black-rgb), 0.06); + --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-800); + + --spectrum-badge-label-icon-color-primary:var(--spectrum-white); + + --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-800); + + --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-800); + + --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.06); + --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); + + --spectrum-logic-button-and-background-color:var(--spectrum-blue-900); + --spectrum-logic-button-and-border-color:var(--spectrum-blue-900); + --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1100); + --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1100); + + --spectrum-logic-button-or-background-color:var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color:var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-1100); + --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-1100); + + --spectrum-assetcard-border-color-selected:var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-900); + --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-800); + + --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); + --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-800); + + --spectrum-card-selected-background-color-rgb:var(--spectrum-blue-900-rgb); +} diff --git a/tokens/dist/css/medium-vars.css b/tokens/dist/css/medium-vars.css new file mode 100644 index 00000000000..1e3ef0031b7 --- /dev/null +++ b/tokens/dist/css/medium-vars.css @@ -0,0 +1,651 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--medium{ + --spectrum-workflow-icon-size-50:14px; + --spectrum-workflow-icon-size-75:16px; + --spectrum-workflow-icon-size-100:18px; + --spectrum-workflow-icon-size-200:20px; + --spectrum-workflow-icon-size-300:22px; + --spectrum-arrow-icon-size-75:10px; + --spectrum-arrow-icon-size-100:10px; + --spectrum-arrow-icon-size-200:12px; + --spectrum-arrow-icon-size-300:14px; + --spectrum-arrow-icon-size-400:16px; + --spectrum-arrow-icon-size-500:18px; + --spectrum-arrow-icon-size-600:20px; + --spectrum-asterisk-icon-size-100:8px; + --spectrum-asterisk-icon-size-200:10px; + --spectrum-asterisk-icon-size-300:10px; + --spectrum-checkmark-icon-size-50:10px; + --spectrum-checkmark-icon-size-75:10px; + --spectrum-checkmark-icon-size-100:10px; + --spectrum-checkmark-icon-size-200:12px; + --spectrum-checkmark-icon-size-300:14px; + --spectrum-checkmark-icon-size-400:16px; + --spectrum-checkmark-icon-size-500:16px; + --spectrum-checkmark-icon-size-600:18px; + --spectrum-chevron-icon-size-50:6px; + --spectrum-chevron-icon-size-75:10px; + --spectrum-chevron-icon-size-100:10px; + --spectrum-chevron-icon-size-200:12px; + --spectrum-chevron-icon-size-300:14px; + --spectrum-chevron-icon-size-400:16px; + --spectrum-chevron-icon-size-500:16px; + --spectrum-chevron-icon-size-600:18px; + --spectrum-corner-triangle-icon-size-75:5px; + --spectrum-corner-triangle-icon-size-100:5px; + --spectrum-corner-triangle-icon-size-200:6px; + --spectrum-corner-triangle-icon-size-300:7px; + --spectrum-cross-icon-size-75:8px; + --spectrum-cross-icon-size-100:8px; + --spectrum-cross-icon-size-200:10px; + --spectrum-cross-icon-size-300:12px; + --spectrum-cross-icon-size-400:12px; + --spectrum-cross-icon-size-500:14px; + --spectrum-cross-icon-size-600:16px; + --spectrum-dash-icon-size-50:8px; + --spectrum-dash-icon-size-75:8px; + --spectrum-dash-icon-size-100:10px; + --spectrum-dash-icon-size-200:12px; + --spectrum-dash-icon-size-300:12px; + --spectrum-dash-icon-size-400:14px; + --spectrum-dash-icon-size-500:16px; + --spectrum-dash-icon-size-600:18px; + --spectrum-checkbox-control-size-small:12px; + --spectrum-checkbox-control-size-medium:14px; + --spectrum-checkbox-control-size-large:16px; + --spectrum-checkbox-control-size-extra-large:18px; + --spectrum-checkbox-top-to-control-small:6px; + --spectrum-checkbox-top-to-control-medium:9px; + --spectrum-checkbox-top-to-control-large:12px; + --spectrum-checkbox-top-to-control-extra-large:15px; + --spectrum-switch-control-width-small:23px; + --spectrum-switch-control-width-medium:26px; + --spectrum-switch-control-width-large:29px; + --spectrum-switch-control-width-extra-large:33px; + --spectrum-switch-control-height-small:12px; + --spectrum-switch-control-height-medium:14px; + --spectrum-switch-control-height-large:16px; + --spectrum-switch-control-height-extra-large:18px; + --spectrum-switch-top-to-control-small:6px; + --spectrum-switch-top-to-control-medium:9px; + --spectrum-switch-top-to-control-large:12px; + --spectrum-switch-top-to-control-extra-large:15px; + --spectrum-radio-button-control-size-small:12px; + --spectrum-radio-button-control-size-medium:14px; + --spectrum-radio-button-control-size-large:16px; + --spectrum-radio-button-control-size-extra-large:18px; + --spectrum-radio-button-top-to-control-small:6px; + --spectrum-radio-button-top-to-control-medium:9px; + --spectrum-radio-button-top-to-control-large:12px; + --spectrum-radio-button-top-to-control-extra-large:15px; + --spectrum-field-label-text-to-asterisk-small:4px; + --spectrum-field-label-text-to-asterisk-medium:4px; + --spectrum-field-label-text-to-asterisk-large:5px; + --spectrum-field-label-text-to-asterisk-extra-large:5px; + --spectrum-field-label-top-to-asterisk-small:8px; + --spectrum-field-label-top-to-asterisk-medium:12px; + --spectrum-field-label-top-to-asterisk-large:15px; + --spectrum-field-label-top-to-asterisk-extra-large:19px; + --spectrum-field-label-top-margin-medium: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; + --spectrum-field-label-to-component-quiet-extra-large:-15px; + --spectrum-help-text-top-to-workflow-icon-small:4px; + --spectrum-help-text-top-to-workflow-icon-medium:3px; + --spectrum-help-text-top-to-workflow-icon-large:6px; + --spectrum-help-text-top-to-workflow-icon-extra-large:9px; + --spectrum-status-light-dot-size-medium:8px; + --spectrum-status-light-dot-size-large:10px; + --spectrum-status-light-dot-size-extra-large:10px; + --spectrum-status-light-top-to-dot-small:8px; + --spectrum-status-light-top-to-dot-medium:12px; + --spectrum-status-light-top-to-dot-large:15px; + --spectrum-status-light-top-to-dot-extra-large:19px; + --spectrum-action-button-edge-to-hold-icon-medium:4px; + --spectrum-action-button-edge-to-hold-icon-large:5px; + --spectrum-action-button-edge-to-hold-icon-extra-large:6px; + --spectrum-tooltip-tip-width:8px; + --spectrum-tooltip-tip-height:4px; + --spectrum-tooltip-maximum-width:160px; + --spectrum-progress-circle-size-small:16px; + --spectrum-progress-circle-size-medium:32px; + --spectrum-progress-circle-size-large:64px; + --spectrum-progress-circle-thickness-small:2px; + --spectrum-progress-circle-thickness-medium:3px; + --spectrum-progress-circle-thickness-large:4px; + --spectrum-toast-height:48px; + --spectrum-toast-maximum-width:336px; + --spectrum-toast-top-to-workflow-icon:15px; + --spectrum-toast-top-to-text:14px; + --spectrum-toast-bottom-to-text:17px; + --spectrum-action-bar-height:48px; + --spectrum-action-bar-top-to-item-counter:14px; + --spectrum-swatch-size-extra-small:16px; + --spectrum-swatch-size-small:24px; + --spectrum-swatch-size-medium:32px; + --spectrum-swatch-size-large:40px; + --spectrum-progress-bar-thickness-small:4px; + --spectrum-progress-bar-thickness-medium:6px; + --spectrum-progress-bar-thickness-large:8px; + --spectrum-progress-bar-thickness-extra-large:10px; + --spectrum-meter-width:192px; + --spectrum-meter-thickness-small:4px; + --spectrum-meter-thickness-large:6px; + --spectrum-tag-top-to-avatar-small:4px; + --spectrum-tag-top-to-avatar-medium:6px; + --spectrum-tag-top-to-avatar-large:9px; + --spectrum-tag-top-to-cross-icon-small:8px; + --spectrum-tag-top-to-cross-icon-medium:12px; + --spectrum-tag-top-to-cross-icon-large:15px; + --spectrum-popover-top-to-content-area:4px; + --spectrum-menu-item-edge-to-content-not-selected-small:28px; + --spectrum-menu-item-edge-to-content-not-selected-medium:32px; + --spectrum-menu-item-edge-to-content-not-selected-large:38px; + --spectrum-menu-item-edge-to-content-not-selected-extra-large:45px; + --spectrum-menu-item-top-to-disclosure-icon-small:7px; + --spectrum-menu-item-top-to-disclosure-icon-medium:11px; + --spectrum-menu-item-top-to-disclosure-icon-large:14px; + --spectrum-menu-item-top-to-disclosure-icon-extra-large:17px; + --spectrum-menu-item-top-to-selected-icon-small:7px; + --spectrum-menu-item-top-to-selected-icon-medium:11px; + --spectrum-menu-item-top-to-selected-icon-large:14px; + --spectrum-menu-item-top-to-selected-icon-extra-large:17px; + --spectrum-slider-control-height-small:14px; + --spectrum-slider-control-height-medium:16px; + --spectrum-slider-control-height-large:18px; + --spectrum-slider-control-height-extra-large:20px; + --spectrum-slider-handle-size-small:14px; + --spectrum-slider-handle-size-medium:16px; + --spectrum-slider-handle-size-large:18px; + --spectrum-slider-handle-size-extra-large:20px; + --spectrum-slider-handle-border-width-down-small:5px; + --spectrum-slider-handle-border-width-down-medium:6px; + --spectrum-slider-handle-border-width-down-large:7px; + --spectrum-slider-handle-border-width-down-extra-large:8px; + --spectrum-slider-bottom-to-handle-small:5px; + --spectrum-slider-bottom-to-handle-medium:8px; + --spectrum-slider-bottom-to-handle-large:11px; + --spectrum-slider-bottom-to-handle-extra-large:14px; + --spectrum-slider-control-to-field-label-small:5px; + --spectrum-slider-control-to-field-label-medium:8px; + --spectrum-slider-control-to-field-label-large:11px; + --spectrum-slider-control-to-field-label-extra-large:14px; + --spectrum-picker-visual-to-disclosure-icon-small:7px; + --spectrum-picker-visual-to-disclosure-icon-medium:8px; + --spectrum-picker-visual-to-disclosure-icon-large:9px; + --spectrum-picker-visual-to-disclosure-icon-extra-large:10px; + --spectrum-text-area-minimum-width:112px; + --spectrum-text-area-minimum-height:56px; + --spectrum-combo-box-visual-to-field-button-small:7px; + --spectrum-combo-box-visual-to-field-button-medium:8px; + --spectrum-combo-box-visual-to-field-button-large:9px; + --spectrum-combo-box-visual-to-field-button-extra-large:10px; + --spectrum-thumbnail-size-50:16px; + --spectrum-thumbnail-size-75:18px; + --spectrum-thumbnail-size-100:20px; + --spectrum-thumbnail-size-200:22px; + --spectrum-thumbnail-size-300:26px; + --spectrum-thumbnail-size-400:28px; + --spectrum-thumbnail-size-500:32px; + --spectrum-thumbnail-size-600:36px; + --spectrum-thumbnail-size-700:40px; + --spectrum-thumbnail-size-800:44px; + --spectrum-thumbnail-size-900:50px; + --spectrum-thumbnail-size-1000:56px; + --spectrum-alert-dialog-title-size:var(--spectrum-heading-size-s); + --spectrum-alert-dialog-description-size:var(--spectrum-body-size-s); + --spectrum-opacity-checkerboard-square-size:8px; + --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xs); + --spectrum-contextual-help-body-size:var(--spectrum-body-size-s); + --spectrum-breadcrumbs-height-multiline:72px; + --spectrum-breadcrumbs-top-to-text:13px; + --spectrum-breadcrumbs-top-to-text-compact:11px; + --spectrum-breadcrumbs-top-to-text-multiline:12px; + --spectrum-breadcrumbs-bottom-to-text:15px; + --spectrum-breadcrumbs-bottom-to-text-compact:12px; + --spectrum-breadcrumbs-bottom-to-text-multiline:9px; + --spectrum-breadcrumbs-start-edge-to-text:8px; + --spectrum-breadcrumbs-top-text-to-bottom-text:9px; + --spectrum-breadcrumbs-top-to-separator-icon:19px; + --spectrum-breadcrumbs-top-to-separator-icon-compact:15px; + --spectrum-breadcrumbs-top-to-separator-icon-multiline:15px; + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline:11px; + --spectrum-breadcrumbs-top-to-truncated-menu:8px; + --spectrum-breadcrumbs-top-to-truncated-menu-compact:4px; + --spectrum-avatar-size-50:16px; + --spectrum-avatar-size-75:18px; + --spectrum-avatar-size-100:20px; + --spectrum-avatar-size-200:22px; + --spectrum-avatar-size-300:26px; + --spectrum-avatar-size-400:28px; + --spectrum-avatar-size-500:32px; + --spectrum-avatar-size-600:36px; + --spectrum-avatar-size-700:40px; + --spectrum-alert-banner-minimum-height:48px; + --spectrum-alert-banner-width:832px; + --spectrum-alert-banner-top-to-workflow-icon:15px; + --spectrum-alert-banner-top-to-text:14px; + --spectrum-alert-banner-bottom-to-text:17px; + --spectrum-rating-indicator-width:18px; + --spectrum-rating-indicator-to-icon:4px; + --spectrum-color-area-width:192px; + --spectrum-color-area-minimum-width:64px; + --spectrum-color-area-height:192px; + --spectrum-color-area-minimum-height:64px; + --spectrum-color-wheel-width:192px; + --spectrum-color-wheel-minimum-width:175px; + --spectrum-color-slider-length:192px; + --spectrum-color-slider-minimum-length:80px; + --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-coach-mark-width:296px; + --spectrum-coach-mark-minimum-width:296px; + --spectrum-coach-mark-maximum-width:380px; + --spectrum-coach-mark-edge-to-content:var(--spectrum-spacing-400); + --spectrum-coach-mark-pagination-text-to-bottom-edge:33px; + --spectrum-coach-mark-media-height:222px; + --spectrum-coach-mark-media-minimum-height:166px; + --spectrum-coach-mark-title-size:var(--spectrum-heading-size-xs); + --spectrum-coach-mark-body-size:var(--spectrum-body-size-s); + --spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-s); + --spectrum-accordion-top-to-text-regular-small:5px; + --spectrum-accordion-small-top-to-text-spacious:9px; + --spectrum-accordion-top-to-text-regular-medium:8px; + --spectrum-accordion-top-to-text-spacious-medium:12px; + --spectrum-accordion-top-to-text-compact-large:4px; + --spectrum-accordion-top-to-text-regular-large:9px; + --spectrum-accordion-top-to-text-spacious-large:12px; + --spectrum-accordion-top-to-text-compact-extra-large:5px; + --spectrum-accordion-top-to-text-regular-extra-large:9px; + --spectrum-accordion-top-to-text-spacious-extra-large:13px; + --spectrum-accordion-bottom-to-text-compact-small:2px; + --spectrum-accordion-bottom-to-text-regular-small:7px; + --spectrum-accordion-bottom-to-text-spacious-small:11px; + --spectrum-accordion-bottom-to-text-compact-medium:5px; + --spectrum-accordion-bottom-to-text-regular-medium:9px; + --spectrum-accordion-bottom-to-text-spacious-medium:13px; + --spectrum-accordion-bottom-to-text-compact-large:8px; + --spectrum-accordion-bottom-to-text-regular-large:11px; + --spectrum-accordion-bottom-to-text-spacious-large:16px; + --spectrum-accordion-bottom-to-text-compact-extra-large:8px; + --spectrum-accordion-bottom-to-text-regular-extra-large:12px; + --spectrum-accordion-bottom-to-text-spacious-extra-large:16px; + --spectrum-accordion-minimum-width:200px; + --spectrum-accordion-content-area-top-to-content:8px; + --spectrum-accordion-content-area-bottom-to-content:16px; + --spectrum-color-handle-size:16px; + --spectrum-color-handle-size-key-focus:32px; + --spectrum-table-column-header-row-top-to-text-small:8px; + --spectrum-table-column-header-row-top-to-text-medium:7px; + --spectrum-table-column-header-row-top-to-text-large:10px; + --spectrum-table-column-header-row-top-to-text-extra-large:13px; + --spectrum-table-column-header-row-bottom-to-text-small:9px; + --spectrum-table-column-header-row-bottom-to-text-medium:8px; + --spectrum-table-column-header-row-bottom-to-text-large:10px; + --spectrum-table-column-header-row-bottom-to-text-extra-large:13px; + --spectrum-table-row-height-small-regular:32px; + --spectrum-table-row-height-medium-regular:40px; + --spectrum-table-row-height-large-regular:48px; + --spectrum-table-row-height-extra-large-regular:56px; + --spectrum-table-row-height-small-spacious:40px; + --spectrum-table-row-height-medium-spacious:48px; + --spectrum-table-row-height-large-spacious:56px; + --spectrum-table-row-height-extra-large-spacious:64px; + --spectrum-table-row-top-to-text-small-regular:8px; + --spectrum-table-row-top-to-text-medium-regular:11px; + --spectrum-table-row-top-to-text-large-regular:14px; + --spectrum-table-row-top-to-text-extra-large-regular:17px; + --spectrum-table-row-bottom-to-text-small-regular:9px; + --spectrum-table-row-bottom-to-text-medium-regular:12px; + --spectrum-table-row-bottom-to-text-large-regular:14px; + --spectrum-table-row-bottom-to-text-extra-large-regular:17px; + --spectrum-table-row-top-to-text-small-spacious:12px; + --spectrum-table-row-top-to-text-medium-spacious:15px; + --spectrum-table-row-top-to-text-large-spacious:18px; + --spectrum-table-row-top-to-text-extra-large-spacious:21px; + --spectrum-table-row-bottom-to-text-small-spacious:13px; + --spectrum-table-row-bottom-to-text-medium-spacious:16px; + --spectrum-table-row-bottom-to-text-large-spacious:18px; + --spectrum-table-row-bottom-to-text-extra-large-spacious:21px; + --spectrum-table-checkbox-to-text:24px; + --spectrum-table-header-row-checkbox-to-top-small:10px; + --spectrum-table-header-row-checkbox-to-top-medium:9px; + --spectrum-table-header-row-checkbox-to-top-large:12px; + --spectrum-table-header-row-checkbox-to-top-extra-large:15px; + --spectrum-table-row-checkbox-to-top-small-compact:6px; + --spectrum-table-row-checkbox-to-top-small-regular:10px; + --spectrum-table-row-checkbox-to-top-small-spacious:14px; + --spectrum-table-row-checkbox-to-top-medium-compact:9px; + --spectrum-table-row-checkbox-to-top-medium-regular:13px; + --spectrum-table-row-checkbox-to-top-medium-spacious:17px; + --spectrum-table-row-checkbox-to-top-large-compact:12px; + --spectrum-table-row-checkbox-to-top-large-regular:16px; + --spectrum-table-row-checkbox-to-top-large-spacious:20px; + --spectrum-table-row-checkbox-to-top-extra-large-compact:15px; + --spectrum-table-row-checkbox-to-top-extra-large-regular:19px; + --spectrum-table-row-checkbox-to-top-extra-large-spacious:23px; + --spectrum-table-section-header-row-height-small:24px; + --spectrum-table-section-header-row-height-medium:32px; + --spectrum-table-section-header-row-height-large:40px; + --spectrum-table-section-header-row-height-extra-large:48px; + --spectrum-table-thumbnail-to-top-minimum-small-compact:4px; + --spectrum-table-thumbnail-to-top-minimum-medium-compact:5px; + --spectrum-table-thumbnail-to-top-minimum-large-compact:7px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact:8px; + --spectrum-table-thumbnail-to-top-minimum-small-regular:5px; + --spectrum-table-thumbnail-to-top-minimum-medium-regular:7px; + --spectrum-table-thumbnail-to-top-minimum-large-regular:8px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular:8px; + --spectrum-table-thumbnail-to-top-minimum-small-spacious:7px; + --spectrum-table-thumbnail-to-top-minimum-medium-spacious:8px; + --spectrum-table-thumbnail-to-top-minimum-large-spacious:8px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious:10px; + --spectrum-tab-item-to-tab-item-horizontal-small:21px; + --spectrum-tab-item-to-tab-item-horizontal-medium:24px; + --spectrum-tab-item-to-tab-item-horizontal-large:27px; + --spectrum-tab-item-to-tab-item-horizontal-extra-large:30px; + --spectrum-tab-item-to-tab-item-vertical-small:4px; + --spectrum-tab-item-to-tab-item-vertical-medium:4px; + --spectrum-tab-item-to-tab-item-vertical-large:5px; + --spectrum-tab-item-to-tab-item-vertical-extra-large:5px; + --spectrum-tab-item-start-to-edge-small:12px; + --spectrum-tab-item-start-to-edge-medium:12px; + --spectrum-tab-item-start-to-edge-large:13px; + --spectrum-tab-item-start-to-edge-extra-large:13px; + --spectrum-tab-item-top-to-text-small:11px; + --spectrum-tab-item-bottom-to-text-small:12px; + --spectrum-tab-item-top-to-text-medium:14px; + --spectrum-tab-item-bottom-to-text-medium:14px; + --spectrum-tab-item-top-to-text-large:16px; + --spectrum-tab-item-bottom-to-text-large:18px; + --spectrum-tab-item-top-to-text-extra-large:19px; + --spectrum-tab-item-bottom-to-text-extra-large:20px; + --spectrum-tab-item-top-to-text-compact-small:4px; + --spectrum-tab-item-bottom-to-text-compact-small:5px; + --spectrum-tab-item-top-to-text-compact-medium:6px; + --spectrum-tab-item-bottom-to-text-compact-medium:8px; + --spectrum-tab-item-top-to-text-compact-large:10px; + --spectrum-tab-item-bottom-to-text-compact-large:12px; + --spectrum-tab-item-top-to-text-compact-extra-large:12px; + --spectrum-tab-item-bottom-to-text-compact-extra-large:13px; + --spectrum-tab-item-top-to-workflow-icon-small:13px; + --spectrum-tab-item-top-to-workflow-icon-medium:15px; + --spectrum-tab-item-top-to-workflow-icon-large:17px; + --spectrum-tab-item-top-to-workflow-icon-extra-large:19px; + --spectrum-tab-item-top-to-workflow-icon-compact-small:3px; + --spectrum-tab-item-top-to-workflow-icon-compact-medium:7px; + --spectrum-tab-item-top-to-workflow-icon-compact-large:9px; + --spectrum-tab-item-top-to-workflow-icon-compact-extra-large:11px; + --spectrum-tab-item-focus-indicator-gap-small:7px; + --spectrum-tab-item-focus-indicator-gap-medium:8px; + --spectrum-tab-item-focus-indicator-gap-large:9px; + --spectrum-tab-item-focus-indicator-gap-extra-large:10px; + --spectrum-side-navigation-width:192px; + --spectrum-side-navigation-minimum-width:160px; + --spectrum-side-navigation-maximum-width:240px; + --spectrum-side-navigation-second-level-edge-to-text:24px; + --spectrum-side-navigation-third-level-edge-to-text:36px; + --spectrum-side-navigation-with-icon-second-level-edge-to-text:50px; + --spectrum-side-navigation-with-icon-third-level-edge-to-text:62px; + --spectrum-side-navigation-item-to-item:4px; + --spectrum-side-navigation-item-to-header:24px; + --spectrum-side-navigation-header-to-item:8px; + --spectrum-side-navigation-bottom-to-text:8px; + --spectrum-tray-top-to-content-area:4px; + --spectrum-accordion-top-to-text-spacious-small:9px; + --spectrum-drop-shadow-y:1px; + --spectrum-drop-shadow-blur:4px; + --spectrum-text-to-visual-50:6px; + --spectrum-text-to-visual-75:7px; + --spectrum-text-to-visual-100:8px; + --spectrum-text-to-visual-200:9px; + --spectrum-text-to-visual-300:10px; + --spectrum-text-to-control-75:9px; + --spectrum-text-to-control-100:10px; + --spectrum-text-to-control-200:11px; + --spectrum-text-to-control-300:13px; + --spectrum-component-height-50:20px; + --spectrum-component-height-75:24px; + --spectrum-component-height-100:32px; + --spectrum-component-height-200:40px; + --spectrum-component-height-300:48px; + --spectrum-component-height-400:56px; + --spectrum-component-height-500:64px; + --spectrum-component-pill-edge-to-visual-75:10px; + --spectrum-component-pill-edge-to-visual-100:14px; + --spectrum-component-pill-edge-to-visual-200:18px; + --spectrum-component-pill-edge-to-visual-300:21px; + --spectrum-component-pill-edge-to-visual-only-75:4px; + --spectrum-component-pill-edge-to-visual-only-100:7px; + --spectrum-component-pill-edge-to-visual-only-200:10px; + --spectrum-component-pill-edge-to-visual-only-300:13px; + --spectrum-component-pill-edge-to-text-75:12px; + --spectrum-component-pill-edge-to-text-100:16px; + --spectrum-component-pill-edge-to-text-200:20px; + --spectrum-component-pill-edge-to-text-300:24px; + --spectrum-component-edge-to-visual-50:6px; + --spectrum-component-edge-to-visual-75:7px; + --spectrum-component-edge-to-visual-100:10px; + --spectrum-component-edge-to-visual-200:13px; + --spectrum-component-edge-to-visual-300:15px; + --spectrum-component-edge-to-visual-only-50:3px; + --spectrum-component-edge-to-visual-only-75:4px; + --spectrum-component-edge-to-visual-only-100:7px; + --spectrum-component-edge-to-visual-only-200:10px; + --spectrum-component-edge-to-visual-only-300:13px; + --spectrum-component-edge-to-text-50:8px; + --spectrum-component-edge-to-text-75:9px; + --spectrum-component-edge-to-text-100:12px; + --spectrum-component-edge-to-text-200:15px; + --spectrum-component-edge-to-text-300:18px; + --spectrum-component-top-to-workflow-icon-50:3px; + --spectrum-component-top-to-workflow-icon-75:4px; + --spectrum-component-top-to-workflow-icon-100:7px; + --spectrum-component-top-to-workflow-icon-200:10px; + --spectrum-component-top-to-workflow-icon-300:13px; + --spectrum-component-top-to-text-50:3px; + --spectrum-component-top-to-text-75:4px; + --spectrum-component-top-to-text-100:6px; + --spectrum-component-top-to-text-200:9px; + --spectrum-component-top-to-text-300:12px; + --spectrum-component-bottom-to-text-50:3px; + --spectrum-component-bottom-to-text-75:5px; + --spectrum-component-bottom-to-text-100:9px; + --spectrum-component-bottom-to-text-200:11px; + --spectrum-component-bottom-to-text-300:14px; + --spectrum-component-to-menu-small:6px; + --spectrum-component-to-menu-medium:6px; + --spectrum-component-to-menu-large:7px; + --spectrum-component-to-menu-extra-large:8px; + --spectrum-field-edge-to-disclosure-icon-75:7px; + --spectrum-field-edge-to-disclosure-icon-100:11px; + --spectrum-field-edge-to-disclosure-icon-200:14px; + --spectrum-field-edge-to-disclosure-icon-300:17px; + --spectrum-field-end-edge-to-disclosure-icon-75:7px; + --spectrum-field-end-edge-to-disclosure-icon-100:11px; + --spectrum-field-end-edge-to-disclosure-icon-200:14px; + --spectrum-field-end-edge-to-disclosure-icon-300:17px; + --spectrum-field-top-to-disclosure-icon-75:7px; + --spectrum-field-top-to-disclosure-icon-100:11px; + --spectrum-field-top-to-disclosure-icon-200:14px; + --spectrum-field-top-to-disclosure-icon-300:17px; + --spectrum-field-top-to-alert-icon-small:4px; + --spectrum-field-top-to-alert-icon-medium:7px; + --spectrum-field-top-to-alert-icon-large:10px; + --spectrum-field-top-to-alert-icon-extra-large:13px; + --spectrum-field-top-to-validation-icon-small:7px; + --spectrum-field-top-to-validation-icon-medium:11px; + --spectrum-field-top-to-validation-icon-large:14px; + --spectrum-field-top-to-validation-icon-extra-large:17px; + --spectrum-field-top-to-progress-circle-small:4px; + --spectrum-field-top-to-progress-circle-medium:8px; + --spectrum-field-top-to-progress-circle-large:12px; + --spectrum-field-top-to-progress-circle-extra-large:16px; + --spectrum-field-edge-to-alert-icon-small:9px; + --spectrum-field-edge-to-alert-icon-medium:12px; + --spectrum-field-edge-to-alert-icon-large:15px; + --spectrum-field-edge-to-alert-icon-extra-large:18px; + --spectrum-field-edge-to-validation-icon-small:9px; + --spectrum-field-edge-to-validation-icon-medium:12px; + --spectrum-field-edge-to-validation-icon-large:15px; + --spectrum-field-edge-to-validation-icon-extra-large:18px; + --spectrum-field-text-to-alert-icon-small:8px; + --spectrum-field-text-to-alert-icon-medium:12px; + --spectrum-field-text-to-alert-icon-large:15px; + --spectrum-field-text-to-alert-icon-extra-large:18px; + --spectrum-field-text-to-validation-icon-small:8px; + --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; + --spectrum-character-count-to-field-quiet-extra-large:-4px; + --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: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; + --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:17px; + --spectrum-navigational-indicator-top-to-back-icon-small:6px; + --spectrum-navigational-indicator-top-to-back-icon-medium:9px; + --spectrum-navigational-indicator-top-to-back-icon-large:12px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large:15px; + --spectrum-color-control-track-width:24px; + --spectrum-font-size-50:11px; + --spectrum-font-size-75:12px; + --spectrum-font-size-100:14px; + --spectrum-font-size-200:16px; + --spectrum-font-size-300:18px; + --spectrum-font-size-400:20px; + --spectrum-font-size-500:22px; + --spectrum-font-size-600:25px; + --spectrum-font-size-700:28px; + --spectrum-font-size-800:32px; + --spectrum-font-size-900:36px; + --spectrum-font-size-1000:40px; + --spectrum-font-size-1100:45px; + --spectrum-font-size-1200:50px; + --spectrum-font-size-1300:60px; + --spectrum-slider-tick-mark-height:10px; + --spectrum-slider-ramp-track-height:16px; + + --spectrum-colorwheel-path:"M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0"; + --spectrum-colorwheel-path-borders:"M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; + --spectrum-colorwheel-colorarea-container-size:144px; + + --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-primary); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small:28px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:32px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large:38px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:45px; + + --spectrum-menu-item-checkmark-height-small:10px; + --spectrum-menu-item-checkmark-height-medium:10px; + --spectrum-menu-item-checkmark-height-large:12px; + --spectrum-menu-item-checkmark-height-extra-large:14px; + + --spectrum-menu-item-checkmark-width-small:10px; + --spectrum-menu-item-checkmark-width-medium:10px; + --spectrum-menu-item-checkmark-width-large:12px; + --spectrum-menu-item-checkmark-width-extra-large:14px; + + --spectrum-rating-icon-spacing:var(--spectrum-spacing-75); + + --spectrum-button-top-to-text-small:5px; + --spectrum-button-bottom-to-text-small:4px; + --spectrum-button-top-to-text-medium:7px; + --spectrum-button-bottom-to-text-medium:8px; + --spectrum-button-top-to-text-large:10px; + --spectrum-button-bottom-to-text-large:10px; + --spectrum-button-top-to-text-extra-large:13px; + --spectrum-button-bottom-to-text-extra-large:13px; + + --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-100); + --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-100); + + --spectrum-alert-dialog-padding:var(--spectrum-spacing-500); + --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-700); + + --spectrum-coach-indicator-gap:6px; + --spectrum-coach-indicator-ring-diameter:var(--spectrum-spacing-300); + --spectrum-coach-indicator-quiet-ring-diameter:var(--spectrum-spacing-100); + + --spectrum-coachmark-buttongroup-display:flex; + --spectrum-coachmark-buttongroup-mobile-display:none; + --spectrum-coachmark-menu-display:inline-flex; + --spectrum-coachmark-menu-mobile-display:none; + --spectrum-workflow-icon-size-xxl:32px; + --spectrum-workflow-icon-size-xxs:12px; + + --spectrum-treeview-item-indentation-medium:var(--spectrum-spacing-300); + --spectrum-treeview-item-indentation-small:var(--spectrum-spacing-200); + --spectrum-treeview-item-indentation-large:20px; + --spectrum-treeview-item-indentation-extra-large:var(--spectrum-spacing-400); + --spectrum-treeview-indicator-inset-block-start:5px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:0px; + + --spectrum-dialog-confirm-entry-animation-distance:20px; + --spectrum-dialog-confirm-hero-height:128px; + --spectrum-dialog-confirm-border-radius:4px; + --spectrum-dialog-confirm-title-text-size:18px; + --spectrum-dialog-confirm-description-text-size:14px; + --spectrum-dialog-confirm-padding-grid:40px; + + --spectrum-datepicker-initial-width:128px; + --spectrum-datepicker-generic-padding:var(--spectrum-spacing-200); + --spectrum-datepicker-dash-line-height:24px; + --spectrum-datepicker-width-quiet-first:72px; + --spectrum-datepicker-width-quiet-second:16px; + --spectrum-datepicker-datetime-width-first:36px; + --spectrum-datepicker-invalid-icon-to-button:8px; + --spectrum-datepicker-invalid-icon-to-button-quiet:7px; + --spectrum-datepicker-input-datetime-width:var(--spectrum-spacing-400); + + --spectrum-pagination-textfield-width:var(--spectrum-spacing-700); + --spectrum-pagination-item-inline-spacing:5px; + + --spectrum-dial-border-radius:16px; + --spectrum-dial-handle-position:8px; + --spectrum-dial-handle-block-margin:16px; + --spectrum-dial-handle-inline-margin:16px; + --spectrum-dial-controls-margin:8px; + --spectrum-dial-label-gap-y:5px; + --spectrum-dial-label-container-top-to-text:4px; + + --spectrum-assetcard-focus-ring-border-radius:8px; + --spectrum-assetcard-selectionindicator-margin:12px; + --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xs); + --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xs); + --spectrum-assetcard-content-font-size:var(--spectrum-body-size-s); + + --spectrum-tooltip-animation-distance:var(--spectrum-spacing-75); + + --spectrum-ui-icon-medium-display:block; + --spectrum-ui-icon-large-display:none; + + --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-100); +} diff --git a/tokens/package.json b/tokens/package.json index c2e1ff79f52..f482803ff4e 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -36,7 +36,7 @@ "package.json" ], "devDependencies": { - "@adobe/spectrum-tokens": "0.0.0-s2-foundations-colors-20240503210338", + "@adobe/spectrum-tokens": "0.0.0-s2-foundations-20240603231133", "@nxkit/style-dictionary": "^5.0.0", "postcss": "^8.4.45", "postcss-cli": "^11.0.0", diff --git a/yarn.lock b/yarn.lock index 0b878a740f6..86d7f5b77ee 100644 --- a/yarn.lock +++ b/yarn.lock @@ -107,6 +107,13 @@ __metadata: languageName: node linkType: hard +"@adobe/spectrum-tokens@npm:0.0.0-s2-foundations-20240603231133": + version: 0.0.0-s2-foundations-20240603231133 + resolution: "@adobe/spectrum-tokens@npm:0.0.0-s2-foundations-20240603231133" + checksum: 10c0/1afb94954b73c7fa70d44d320474e2d737f0b5a6297b1a81803614653c72b30397ad1413483bf5306ea23380f12fe35e6e2d7a107d342e63ed1f7780e8ead354 + languageName: node + linkType: hard + "@adobe/spectrum-tokens@npm:0.0.0-s2-foundations-colors-20240503210338": version: 0.0.0-s2-foundations-colors-20240503210338 resolution: "@adobe/spectrum-tokens@npm:0.0.0-s2-foundations-colors-20240503210338" @@ -4212,7 +4219,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" dependencies: - "@adobe/spectrum-tokens": "npm:0.0.0-s2-foundations-colors-20240503210338" + "@adobe/spectrum-tokens": "npm:0.0.0-s2-foundations-20240603231133" "@nxkit/style-dictionary": "npm:^5.0.0" postcss: "npm:^8.4.45" postcss-cli: "npm:^11.0.0"