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``
@@ -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`
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