From 41ea327695178292bf91bc346b7fe35b7dcca090 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Tue, 16 Sep 2025 12:52:16 -0400 Subject: [PATCH] feat(tokens): optimize token color contexts --- .eslintrc | 1 + .github/QUICK-START.md | 31 +- .storybook/assets/base.css | 31 +- .storybook/decorators/context.js | 15 +- .storybook/decorators/icon-sprites.js | 4 - .storybook/decorators/utilities.js | 3 +- .../drop-shadow/drop-shadow.stories.js | 9 +- .storybook/foundations/drop-shadow/index.css | 101 +- .storybook/manager.js | 11 +- README.md | 2 +- components/accordion/dist/metadata.json | 111 +- components/actionbar/dist/metadata.json | 42 +- components/actionbutton/dist/metadata.json | 63 +- components/actiongroup/dist/metadata.json | 12 +- components/alertbanner/dist/metadata.json | 49 +- components/alertdialog/dist/metadata.json | 37 +- .../stories/alertdialog.stories.js | 10 + components/asset/dist/metadata.json | 8 - components/assetcard/dist/metadata.json | 61 +- components/assetcard/index.css | 17 + components/assetlist/dist/metadata.json | 26 +- components/assetlist/index.css | 13 + components/avatar/dist/metadata.json | 22 +- components/badge/dist/metadata.json | 77 - components/badge/index.css | 6 + components/breadcrumb/dist/metadata.json | 65 +- components/button/dist/metadata.json | 71 +- components/buttongroup/dist/metadata.json | 7 - components/calendar/dist/metadata.json | 64 +- components/calendar/index.css | 23 + components/card/dist/metadata.json | 67 +- components/checkbox/dist/metadata.json | 49 +- components/clearbutton/dist/metadata.json | 15 - components/closebutton/dist/metadata.json | 27 +- components/coachindicator/dist/metadata.json | 29 +- components/coachindicator/index.css | 9 + components/coachmark/dist/metadata.json | 72 +- components/coachmark/index.css | 6 +- components/colorarea/dist/metadata.json | 24 +- components/colorhandle/dist/metadata.json | 32 +- components/colorloupe/dist/metadata.json | 28 +- components/colorslider/dist/metadata.json | 29 +- components/colorwheel/dist/metadata.json | 20 +- components/combobox/dist/metadata.json | 100 +- components/contextualhelp/dist/metadata.json | 34 +- components/datepicker/dist/metadata.json | 65 +- components/dial/dist/metadata.json | 47 +- components/dialog/dist/metadata.json | 32 +- components/divider/dist/metadata.json | 19 +- components/dropindicator/dist/metadata.json | 12 +- components/dropindicator/index.css | 9 + components/dropzone/dist/metadata.json | 58 +- components/dropzone/index.css | 9 + components/fieldgroup/dist/metadata.json | 1 - components/fieldlabel/dist/metadata.json | 30 +- .../floatingactionbutton/dist/metadata.json | 28 +- components/form/dist/metadata.json | 8 - components/helptext/dist/metadata.json | 17 - components/icon/dist/metadata.json | 6 - .../illustratedmessage/dist/metadata.json | 54 +- components/infieldbutton/dist/metadata.json | 40 +- components/infieldbutton/index.css | 4 +- .../infieldprogresscircle/dist/metadata.json | 12 +- components/inlinealert/dist/metadata.json | 27 +- components/link/dist/metadata.json | 15 - components/logicbutton/dist/metadata.json | 45 +- components/logicbutton/index.css | 23 + components/menu/dist/metadata.json | 163 +- components/meter/dist/metadata.json | 20 +- components/miller/dist/metadata.json | 6 - components/modal/dist/metadata.json | 12 - .../opacitycheckerboard/dist/metadata.json | 11 +- components/page/dist/metadata.json | 1 - components/pagination/dist/metadata.json | 17 +- components/picker/dist/metadata.json | 80 +- components/pickerbutton/dist/metadata.json | 24 - components/popover/dist/metadata.json | 29 +- components/progressbar/dist/metadata.json | 35 +- components/progresscircle/dist/metadata.json | 17 +- components/radio/dist/metadata.json | 50 +- components/rating/dist/metadata.json | 45 +- components/search/dist/metadata.json | 64 +- components/sidenav/dist/metadata.json | 76 +- components/slider/dist/metadata.json | 122 +- components/slider/index.css | 11 + components/splitview/dist/metadata.json | 18 - components/statuslight/dist/metadata.json | 66 +- components/steplist/dist/metadata.json | 22 +- components/steplist/index.css | 9 + components/stepper/dist/metadata.json | 66 +- components/swatch/dist/metadata.json | 53 +- components/swatchgroup/dist/metadata.json | 11 +- components/switch/dist/metadata.json | 90 +- components/table/dist/metadata.json | 176 +- components/table/index.css | 9 + components/tabs/dist/metadata.json | 47 +- components/tabs/index.css | 6 +- components/tag/dist/metadata.json | 106 +- components/taggroup/dist/metadata.json | 12 - components/textfield/dist/metadata.json | 64 +- components/thumbnail/dist/metadata.json | 48 +- components/toast/dist/metadata.json | 39 +- components/tooltip/dist/metadata.json | 38 +- components/tray/dist/metadata.json | 21 +- components/treeview/dist/metadata.json | 55 +- components/treeview/index.css | 13 +- components/typography/dist/metadata.json | 209 +- components/typography/index.css | 32 +- components/underlay/dist/metadata.json | 10 - components/well/dist/metadata.json | 22 +- nx.json | 4 +- postcss.config.js | 4 +- schemas/metadata.schema.json | 12 +- stylelint.config.js | 7 +- tasks/component-compare.js | 44 +- tasks/component-reporter.js | 96 +- tasks/templates/compare-listing.njk | 4 +- tasks/templates/diff-preview.njk | 6 +- tasks/utilities.js | 51 - tokens/custom-tokens.json | 837 + tokens/custom/dark-vars.css | 61 - tokens/custom/global-vars.css | 66 - tokens/custom/large-vars.css | 164 - tokens/custom/light-vars.css | 61 - tokens/custom/medium-vars.css | 162 - tokens/dist/json/tokens.json | 20405 ---------------- tokens/package.json | 6 +- tokens/postcss.config.js | 32 +- tokens/project.json | 74 +- tokens/style-dictionary.config.js | 104 +- tokens/tasks/token-rollup.js | 167 - tokens/utilities/attribute-sets-transform.js | 12 - .../css-border-rounding-transform.js | 4 + .../utilities/css-font-open-type-transform.js | 4 + .../css-opacity-percent-transform.js | 28 + tokens/utilities/css-sets-formatter.js | 170 +- tokens/utilities/css.template.js | 98 + tokens/utilities/data-json-formatter.js | 99 +- tokens/utilities/index.js | 10 +- tokens/utilities/json-sets-formatter.js | 80 + tokens/utilities/name-kebab-transform.js | 8 - tokens/utilities/shared-logic.js | 109 - tokens/utilities/utilities.js | 78 + yarn.lock | 133 +- 144 files changed, 2488 insertions(+), 24831 deletions(-) create mode 100644 tokens/custom-tokens.json delete mode 100644 tokens/custom/dark-vars.css delete mode 100644 tokens/custom/global-vars.css delete mode 100644 tokens/custom/large-vars.css delete mode 100644 tokens/custom/light-vars.css delete mode 100644 tokens/custom/medium-vars.css delete mode 100644 tokens/dist/json/tokens.json delete mode 100644 tokens/tasks/token-rollup.js delete mode 100644 tokens/utilities/attribute-sets-transform.js create mode 100644 tokens/utilities/css-opacity-percent-transform.js create mode 100644 tokens/utilities/css.template.js create mode 100644 tokens/utilities/json-sets-formatter.js delete mode 100644 tokens/utilities/name-kebab-transform.js delete mode 100644 tokens/utilities/shared-logic.js create mode 100644 tokens/utilities/utilities.js diff --git a/.eslintrc b/.eslintrc index 70bfec2166b..a3b64a833da 100644 --- a/.eslintrc +++ b/.eslintrc @@ -19,6 +19,7 @@ "semi": ["warn", "always"], "space-before-blocks": ["warn", "always"] }, + "ignorePatterns": ["!.storybook"], "overrides": [ { "files": ["*.json"], diff --git a/.github/QUICK-START.md b/.github/QUICK-START.md index 4b97fcab7e8..6be1504669e 100644 --- a/.github/QUICK-START.md +++ b/.github/QUICK-START.md @@ -10,12 +10,35 @@ Install the components you want along with their dependencies. Here's an example yarn add -DW @spectrum-css/tokens @spectrum-css/typography @spectrum-css/page @spectrum-css/icon @spectrum-css/button ``` -Spectrum CSS components utilize custom properties in order to change themes and scales. For these to apply, a couple of classes need to be added to the document’s `` tag based on the [visual language](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [scale](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), and [theme](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops) you wish to use. For example, the following code snippet will display styling for the default Spectrum visual language using medium scale and light color theme: +Spectrum CSS components utilize custom properties in order to express our design language through a set of core tokens. We leverage the `@adobe/spectrum-tokens` data as a source of this design data and convert it into a set of CSS custom properties. This allows us to use the tokens in our components and to create a consistent design language across all of our components. + +Some of these tokens have different values depending on the visual language or scale being used. The default values for all tokens are set to the default values for the light theme and medium scale. + +To force the dark theme, you can add `color-scheme: dark` to your container element. Doing this will force the dark value to be used for all tokens that have one. This can be done at any level of the DOM and by leveraging the cascade, the color schemes can be nested or changed at any level. For example, if you want to force the dark theme for a specific component, you can add `color-scheme: dark` to that component's container element. ```html - + +
+

A dark themed container

+
+

A light themed container

+
+
``` +The design language also includes a set of token values that represent different device sizes. At the moment, these values are only defined as "medium" and "large", with "medium" as the default which maps generally to a desktop or laptop screen. The "large" value is intended for smaller devices, such as phones and tablets. The default value for all tokens is set to the default value for the medium scale. To force the large scale, you can load the CSS overrides for the large scale: + +```html + +``` + +This will override the default value for all tokens to the value for the large scale. + Use the `index.css` files in your project to include component and global styles ([background theme/colorstop](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops), [platform scaling](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), etc.) for the component. If you don't need all of the global styles, peek at the docs for [including assets](https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets)). Use this file by including the stylesheet (plus stylesheets for dependencies) in the `` tag: ```html @@ -23,7 +46,7 @@ Use the `index.css` files in your project to include component and global styles @@ -51,7 +74,7 @@ To put it all together, your final html file will look like this: { - const { - loaded = {}, - } = context; - useEffect(() => { // Inject the sprite sheets into the document let sprite = document.getElementById("spritesheets"); diff --git a/.storybook/decorators/utilities.js b/.storybook/decorators/utilities.js index bd22ac68401..68d42c5ed33 100644 --- a/.storybook/decorators/utilities.js +++ b/.storybook/decorators/utilities.js @@ -116,7 +116,7 @@ export const Container = ({ if (withBorder) { borderStyles["padding-inline"] = "24px"; borderStyles["padding-block"] = "24px"; - borderStyles["border"] = "1px solid rgba(var(--spectrum-gray-600-rgb), 20%)"; + borderStyles["border"] = "1px solid color-mix(in srgb, var(--spectrum-gray-600) 20%, transparent)"; borderStyles["border-radius"] = "4px"; gap = 80; } @@ -158,6 +158,7 @@ export const Container = ({ "row-gap": "24px", "align-items": heading && level > 1 ? "flex-start" : undefined, "justify-content": direction === "column" ? "center" : "flex-start", + "background": level === 1 && !isDocs ? "var(--spectrum-background-base-color)" : undefined, ...borderStyles, ...wrapperStyles, })} diff --git a/.storybook/foundations/drop-shadow/drop-shadow.stories.js b/.storybook/foundations/drop-shadow/drop-shadow.stories.js index 391031de906..3c41d3ea76d 100644 --- a/.storybook/foundations/drop-shadow/drop-shadow.stories.js +++ b/.storybook/foundations/drop-shadow/drop-shadow.stories.js @@ -1,5 +1,7 @@ import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; +import { styleMap } from "lit/directives/style-map.js"; + import "./index.css"; export default { @@ -35,11 +37,8 @@ const DropShadowBackground = ( context, ) => html`
${DropShadowSwatch(args, context)}
diff --git a/.storybook/foundations/drop-shadow/index.css b/.storybook/foundations/drop-shadow/index.css index bf54a5ddce9..8fdd0463394 100644 --- a/.storybook/foundations/drop-shadow/index.css +++ b/.storybook/foundations/drop-shadow/index.css @@ -10,106 +10,57 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -/* stylelint-disable spectrum-tools/no-unknown-custom-properties */ - .spectrum-Foundations-Example-DropShadow-swatch { - block-size: 150px; - inline-size: 150px; - background-color: var(--spectrum-gray-25); - border-radius: var(--spectrum-corner-radius-large-default); - border: transparent; + block-size: 150px; + inline-size: 150px; + + /* matches dark mode design spec rgb(34, 34, 34) */ + background-color: var(--spectrum-gray-25); + border-radius: var(--spectrum-corner-radius-large-default); + border: transparent; } -.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch { - background-color: var(--spectrum-gray-75); /* matches dark mode design spec rgb(34, 34, 34) */ +@media (prefers-color-scheme: dark) { + .spectrum-Foundations-Example-DropShadow-swatch { + background-color: var(--spectrum-gray-75); + } } .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow { - box-shadow: - var(--spectrum-drop-shadow-emphasized-default-x) - var(--spectrum-drop-shadow-emphasized-default-y) - var(--spectrum-drop-shadow-emphasized-default-blur) - var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color)); + box-shadow: var(--spectrum-drop-shadow-emphasized-default-x) var(--spectrum-drop-shadow-emphasized-default-y) var(--spectrum-drop-shadow-emphasized-default-blur) var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color)); } .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow { - filter: drop-shadow( - var(--spectrum-drop-shadow-emphasized-default-x) - var(--spectrum-drop-shadow-emphasized-default-y) - calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2) /* adjust blur by half of box-shadow */ - var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color)) - ); -} - -.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow, -.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow, -.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow, -.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow { -/* adjustment because color tokens do not work properly on foundations pages */ - --mod-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100); + filter: drop-shadow(var(--spectrum-drop-shadow-emphasized-default-x) var(--spectrum-drop-shadow-emphasized-default-y) calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2) /* adjust blur by half of box-shadow */ var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color))); } .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow { - box-shadow: - var(--spectrum-drop-shadow-emphasized-hover-x) - var(--spectrum-drop-shadow-emphasized-hover-y) - var(--spectrum-drop-shadow-emphasized-hover-blur) - var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color)); + box-shadow: var(--spectrum-drop-shadow-emphasized-hover-x) var(--spectrum-drop-shadow-emphasized-hover-y) var(--spectrum-drop-shadow-emphasized-hover-blur) var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color)); } .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow { - filter: drop-shadow( - var(--spectrum-drop-shadow-emphasized-hover-x) - var(--spectrum-drop-shadow-emphasized-hover-y) - calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2) /* adjust blur by half of box-shadow */ - var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color)) - ); -} - -.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow, -.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow, -.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow, -.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow { -/* adjustment because color tokens do not work properly on foundations pages */ - --mod-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200); + filter: drop-shadow(var(--spectrum-drop-shadow-emphasized-hover-x) var(--spectrum-drop-shadow-emphasized-hover-y) calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2) /* adjust blur by half of box-shadow */ var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color))); } .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow { - box-shadow: - var(--spectrum-drop-shadow-elevated-x) - var(--spectrum-drop-shadow-elevated-y) - var(--spectrum-drop-shadow-elevated-blur) - var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color)); + box-shadow: var(--spectrum-drop-shadow-elevated-x) var(--spectrum-drop-shadow-elevated-y) var(--spectrum-drop-shadow-elevated-blur) var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color)); } .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow { - filter: drop-shadow( - var(--spectrum-drop-shadow-elevated-x) - var(--spectrum-drop-shadow-elevated-y) - calc(var(--spectrum-drop-shadow-elevated-blur) / 2) /* adjust blur by half of box-shadow */ - var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color)) - ); -} - -.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow, -.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow, -.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow, -.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow { -/* adjustment because color tokens do not work properly on foundations pages */ - --mod-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200); + filter: drop-shadow(var(--spectrum-drop-shadow-elevated-x) var(--spectrum-drop-shadow-elevated-y) calc(var(--spectrum-drop-shadow-elevated-blur) / 2) /* adjust blur by half of box-shadow */ var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color))); } .spectrum-Foundations-Example-swatch-container { - background-color: var(--spectrum-gray-25); - block-size: 200px; - inline-size: 300px; - display: flex; - align-items: center; - justify-content: center; + background-color: var(--spectrum-gray-25); + block-size: 200px; + inline-size: 300px; + display: flex; + align-items: center; + justify-content: center; } .spectrum-Foundations-Example-variant-container { - background-color: var(--spectrum-gray-25); - display: flex; - flex-direction: row; + background-color: var(--spectrum-gray-25); + display: flex; + flex-direction: row; } diff --git a/.storybook/manager.js b/.storybook/manager.js index 1e1fe3ef8d1..94e6353bd48 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -1,21 +1,16 @@ import { addons } from "@storybook/manager-api"; import { create } from "@storybook/theming"; -import { startCase } from "lodash"; import "./assets/index.css"; import logo from "./assets/logo.svg"; -import pkg from "./package.json"; - -const root = document.body ?? document.documentElement; -if (root) root.classList.add("spectrum", "spectrum--light", "spectrum--medium"); addons.setConfig({ theme: create({ base: "light", brandTitle: "Adobe | Spectrum CSS", - brandUrl: pkg.homepage ?? "https://opensource.adobe.com/spectrum-css", + brandUrl: "https://opensource.adobe.com/spectrum-css", brandImage: logo, brandTarget: "_self", @@ -63,8 +58,4 @@ addons.setConfig({ // gridCellSize?: number; }), - sidebar: { - showRoots: false, - renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)) + " 📚", - }, }); diff --git a/README.md b/README.md index e48f2231038..4dad93a19b1 100644 --- a/README.md +++ b/README.md @@ -60,7 +60,7 @@ Start by including the base set of variables: ```css /* Include tokens */ -@import "node_modules/@spectrum-css/tokens/dist/index.css"; +@import "node_modules/@spectrum-css/tokens/dist/css/index.css"; @import "node_modules/@spectrum-css/page/dist/index.css"; @import "node_modules/@spectrum-css/typography/dist/index.css"; diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json index a1f60da66a6..4d78d5bc16a 100644 --- a/components/accordion/dist/metadata.json +++ b/components/accordion/dist/metadata.json @@ -37,96 +37,20 @@ ".spectrum-Accordion:lang(ko)", ".spectrum-Accordion:lang(zh)" ], - "modifiers": [ - "--mod-accordion-animation-duration", - "--mod-accordion-background-color-default", - "--mod-accordion-background-color-down", - "--mod-accordion-background-color-hover", - "--mod-accordion-background-color-key-focus", - "--mod-accordion-content-padding-inline", - "--mod-accordion-corner-radius", - "--mod-accordion-disclosure-indicator-height", - "--mod-accordion-disclosure-indicator-to-text-space", - "--mod-accordion-divider-color", - "--mod-accordion-divider-thickness", - "--mod-accordion-edge-to-content-area", - "--mod-accordion-edge-to-disclosure-indicator-space", - "--mod-accordion-edge-to-text-space", - "--mod-accordion-item-content-area-bottom-to-content", - "--mod-accordion-item-content-area-top-to-content", - "--mod-accordion-item-content-color", - "--mod-accordion-item-content-disabled-color", - "--mod-accordion-item-content-font", - "--mod-accordion-item-content-font-size", - "--mod-accordion-item-content-font-style", - "--mod-accordion-item-content-font-weight", - "--mod-accordion-item-content-line-height", - "--mod-accordion-item-direct-actions-height", - "--mod-accordion-item-direct-actions-spacing", - "--mod-accordion-item-direct-actions-vertical-spacing", - "--mod-accordion-item-focus-indicator-color", - "--mod-accordion-item-focus-indicator-gap", - "--mod-accordion-item-focus-indicator-thickness", - "--mod-accordion-item-header-bottom-to-text-space", - "--mod-accordion-item-header-color-default", - "--mod-accordion-item-header-color-down", - "--mod-accordion-item-header-color-hover", - "--mod-accordion-item-header-color-key-focus", - "--mod-accordion-item-header-disabled-color", - "--mod-accordion-item-header-font", - "--mod-accordion-item-header-font-size", - "--mod-accordion-item-header-font-style", - "--mod-accordion-item-header-font-weight", - "--mod-accordion-item-header-line-height", - "--mod-accordion-item-header-to-direct-actions-space", - "--mod-accordion-item-header-top-to-text-space", - "--mod-accordion-item-min-block-size", - "--mod-accordion-item-minimum-height", - "--mod-accordion-item-minimum-width", - "--mod-accordion-item-width", - "--mod-accordion-top-to-disclosure-indicator" - ], "component": [ "--spectrum-accordion-animation-duration", "--spectrum-accordion-background-color-default", "--spectrum-accordion-background-color-down", "--spectrum-accordion-background-color-hover", "--spectrum-accordion-background-color-key-focus", - "--spectrum-accordion-bottom-to-text-compact-extra-large", - "--spectrum-accordion-bottom-to-text-compact-large", - "--spectrum-accordion-bottom-to-text-compact-medium", - "--spectrum-accordion-bottom-to-text-compact-small", - "--spectrum-accordion-bottom-to-text-extra-large", - "--spectrum-accordion-bottom-to-text-large", - "--spectrum-accordion-bottom-to-text-medium", - "--spectrum-accordion-bottom-to-text-small", - "--spectrum-accordion-bottom-to-text-spacious-extra-large", - "--spectrum-accordion-bottom-to-text-spacious-large", - "--spectrum-accordion-bottom-to-text-spacious-medium", - "--spectrum-accordion-bottom-to-text-spacious-small", - "--spectrum-accordion-content-area-bottom-to-content", - "--spectrum-accordion-content-area-edge-to-content-extra-large", - "--spectrum-accordion-content-area-edge-to-content-large", - "--spectrum-accordion-content-area-edge-to-content-medium", - "--spectrum-accordion-content-area-edge-to-content-small", - "--spectrum-accordion-content-area-top-to-content", "--spectrum-accordion-content-padding-inline", "--spectrum-accordion-corner-radius", "--spectrum-accordion-disclosure-indicator-height", - "--spectrum-accordion-disclosure-indicator-to-text-extra-large", - "--spectrum-accordion-disclosure-indicator-to-text-large", - "--spectrum-accordion-disclosure-indicator-to-text-medium", - "--spectrum-accordion-disclosure-indicator-to-text-small", "--spectrum-accordion-disclosure-indicator-to-text-space", "--spectrum-accordion-divider-color", "--spectrum-accordion-divider-thickness", "--spectrum-accordion-edge-to-content-area", - "--spectrum-accordion-edge-to-content-area-extra-large", - "--spectrum-accordion-edge-to-content-area-large", - "--spectrum-accordion-edge-to-content-area-medium", - "--spectrum-accordion-edge-to-content-area-small", "--spectrum-accordion-edge-to-disclosure-indicator-space", - "--spectrum-accordion-edge-to-text", "--spectrum-accordion-edge-to-text-space", "--spectrum-accordion-item-content-area-bottom-to-content", "--spectrum-accordion-item-content-area-top-to-content", @@ -159,8 +83,37 @@ "--spectrum-accordion-item-minimum-height", "--spectrum-accordion-item-minimum-width", "--spectrum-accordion-item-width", + "--spectrum-accordion-top-to-disclosure-indicator" + ], + "global": [ + "--spectrum-accordion-bottom-to-text-compact-extra-large", + "--spectrum-accordion-bottom-to-text-compact-large", + "--spectrum-accordion-bottom-to-text-compact-medium", + "--spectrum-accordion-bottom-to-text-compact-small", + "--spectrum-accordion-bottom-to-text-extra-large", + "--spectrum-accordion-bottom-to-text-large", + "--spectrum-accordion-bottom-to-text-medium", + "--spectrum-accordion-bottom-to-text-small", + "--spectrum-accordion-bottom-to-text-spacious-extra-large", + "--spectrum-accordion-bottom-to-text-spacious-large", + "--spectrum-accordion-bottom-to-text-spacious-medium", + "--spectrum-accordion-bottom-to-text-spacious-small", + "--spectrum-accordion-content-area-bottom-to-content", + "--spectrum-accordion-content-area-edge-to-content-extra-large", + "--spectrum-accordion-content-area-edge-to-content-large", + "--spectrum-accordion-content-area-edge-to-content-medium", + "--spectrum-accordion-content-area-edge-to-content-small", + "--spectrum-accordion-content-area-top-to-content", + "--spectrum-accordion-disclosure-indicator-to-text-extra-large", + "--spectrum-accordion-disclosure-indicator-to-text-large", + "--spectrum-accordion-disclosure-indicator-to-text-medium", + "--spectrum-accordion-disclosure-indicator-to-text-small", + "--spectrum-accordion-edge-to-content-area-extra-large", + "--spectrum-accordion-edge-to-content-area-large", + "--spectrum-accordion-edge-to-content-area-medium", + "--spectrum-accordion-edge-to-content-area-small", + "--spectrum-accordion-edge-to-text", "--spectrum-accordion-minimum-width", - "--spectrum-accordion-top-to-disclosure-indicator", "--spectrum-accordion-top-to-text-compact-extra-large", "--spectrum-accordion-top-to-text-compact-large", "--spectrum-accordion-top-to-text-compact-medium", @@ -172,9 +125,7 @@ "--spectrum-accordion-top-to-text-spacious-extra-large", "--spectrum-accordion-top-to-text-spacious-large", "--spectrum-accordion-top-to-text-spacious-medium", - "--spectrum-accordion-top-to-text-spacious-small" - ], - "global": [ + "--spectrum-accordion-top-to-text-spacious-small", "--spectrum-animation-duration-100", "--spectrum-body-color", "--spectrum-body-sans-serif-font-style", diff --git a/components/actionbar/dist/metadata.json b/components/actionbar/dist/metadata.json index 2073a6be7d6..3f126e41427 100644 --- a/components/actionbar/dist/metadata.json +++ b/components/actionbar/dist/metadata.json @@ -17,35 +17,7 @@ ".spectrum-ActionBar:lang(ko)", ".spectrum-ActionBar:lang(zh)" ], - "modifiers": [ - "--mod-actionbar-close-button-to-counter", - "--mod-actionbar-corner-radius", - "--mod-actionbar-height", - "--mod-actionbar-item-counter-color", - "--mod-actionbar-item-counter-line-height-cjk", - "--mod-actionbar-minimum-width", - "--mod-actionbar-popover-background-color", - "--mod-actionbar-popover-border-color", - "--mod-actionbar-shadow-blur", - "--mod-actionbar-shadow-color", - "--mod-actionbar-shadow-horizontal", - "--mod-actionbar-shadow-vertical", - "--mod-actionbar-spacing-action-group-edge", - "--mod-actionbar-spacing-bottom-area", - "--mod-actionbar-spacing-label-to-action-group", - "--mod-actionbar-spacing-outer-edge", - "--mod-actionbar-spacing-top-area" - ], "component": [ - "--spectrum-action-bar-border-color", - "--spectrum-action-bar-bottom-to-content-area", - "--spectrum-action-bar-close-button-to-counter", - "--spectrum-action-bar-counter-font-size", - "--spectrum-action-bar-edge-to-content-area", - "--spectrum-action-bar-height", - "--spectrum-action-bar-label-to-action-group-area", - "--spectrum-action-bar-minimum-width", - "--spectrum-action-bar-top-to-content-area", "--spectrum-actionbar-close-button-to-counter", "--spectrum-actionbar-corner-radius", "--spectrum-actionbar-height", @@ -66,6 +38,15 @@ "--spectrum-actionbar-spacing-top-area" ], "global": [ + "--spectrum-action-bar-border-color", + "--spectrum-action-bar-bottom-to-content-area", + "--spectrum-action-bar-close-button-to-counter", + "--spectrum-action-bar-counter-font-size", + "--spectrum-action-bar-edge-to-content-area", + "--spectrum-action-bar-height", + "--spectrum-action-bar-label-to-action-group-area", + "--spectrum-action-bar-minimum-width", + "--spectrum-action-bar-top-to-content-area", "--spectrum-background-elevated-color", "--spectrum-cjk-line-height-100", "--spectrum-corner-radius-medium-size-extra-large", @@ -78,9 +59,6 @@ "--spectrum-neutral-content-color-default", "--spectrum-spacing-300" ], - "passthroughs": [ - "--mod-fieldlabel-font-size", - "--mod-fieldlabel-line-height" - ], + "passthroughs": [], "high-contrast": ["--highcontrast-actionbar-popover-border-color"] } diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json index f8685ad4f90..ae359b67c7d 100644 --- a/components/actionbutton/dist/metadata.json +++ b/components/actionbutton/dist/metadata.json @@ -38,59 +38,7 @@ ".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))", "a.spectrum-ActionButton" ], - "modifiers": [ - "--mod-actionbutton-animation-duration", - "--mod-actionbutton-background-color-default", - "--mod-actionbutton-background-color-default-selected", - "--mod-actionbutton-background-color-default-selected-emphasized", - "--mod-actionbutton-background-color-disabled", - "--mod-actionbutton-background-color-down", - "--mod-actionbutton-background-color-down-selected", - "--mod-actionbutton-background-color-down-selected-emphasized", - "--mod-actionbutton-background-color-focus", - "--mod-actionbutton-background-color-focus-selected", - "--mod-actionbutton-background-color-focus-selected-emphasized", - "--mod-actionbutton-background-color-hover", - "--mod-actionbutton-background-color-hover-selected", - "--mod-actionbutton-background-color-hover-selected-emphasized", - "--mod-actionbutton-border-radius", - "--mod-actionbutton-content-color-default", - "--mod-actionbutton-content-color-default-selected", - "--mod-actionbutton-content-color-default-selected-emphasized", - "--mod-actionbutton-content-color-disabled", - "--mod-actionbutton-content-color-down", - "--mod-actionbutton-content-color-down-selected", - "--mod-actionbutton-content-color-down-selected-emphasized", - "--mod-actionbutton-content-color-focus", - "--mod-actionbutton-content-color-focus-selected", - "--mod-actionbutton-content-color-focus-selected-emphasized", - "--mod-actionbutton-content-color-hover", - "--mod-actionbutton-content-color-hover-selected", - "--mod-actionbutton-content-color-hover-selected-emphasized", - "--mod-actionbutton-edge-to-hold-icon", - "--mod-actionbutton-edge-to-text", - "--mod-actionbutton-edge-to-visual", - "--mod-actionbutton-edge-to-visual-only", - "--mod-actionbutton-focus-indicator-border-radius", - "--mod-actionbutton-focus-indicator-color", - "--mod-actionbutton-focus-indicator-gap", - "--mod-actionbutton-focus-indicator-thickness", - "--mod-actionbutton-font-size", - "--mod-actionbutton-font-style", - "--mod-actionbutton-font-weight", - "--mod-actionbutton-height", - "--mod-actionbutton-icon-size", - "--mod-actionbutton-label-color", - "--mod-actionbutton-line-height", - "--mod-actionbutton-min-width", - "--mod-actionbutton-text-to-visual" - ], "component": [ - "--spectrum-action-button-edge-to-hold-icon-extra-large", - "--spectrum-action-button-edge-to-hold-icon-extra-small", - "--spectrum-action-button-edge-to-hold-icon-large", - "--spectrum-action-button-edge-to-hold-icon-medium", - "--spectrum-action-button-edge-to-hold-icon-small", "--spectrum-actionbutton-animation-duration", "--spectrum-actionbutton-background-color-default", "--spectrum-actionbutton-background-color-disabled", @@ -128,6 +76,11 @@ "--spectrum-accent-background-color-down", "--spectrum-accent-background-color-hover", "--spectrum-accent-background-color-key-focus", + "--spectrum-action-button-edge-to-hold-icon-extra-large", + "--spectrum-action-button-edge-to-hold-icon-extra-small", + "--spectrum-action-button-edge-to-hold-icon-large", + "--spectrum-action-button-edge-to-hold-icon-medium", + "--spectrum-action-button-edge-to-hold-icon-small", "--spectrum-animation-duration-100", "--spectrum-black", "--spectrum-border-width-100", @@ -215,11 +168,7 @@ "--spectrum-workflow-icon-size-50", "--spectrum-workflow-icon-size-75" ], - "passthroughs": [ - "--mod-button-animation-duration", - "--mod-button-font-family", - "--mod-button-line-height" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-actionbutton-animation-duration", "--highcontrast-actionbutton-background-color-default", diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json index 8d4d2ba86b7..ee485577f3a 100644 --- a/components/actiongroup/dist/metadata.json +++ b/components/actiongroup/dist/metadata.json @@ -28,16 +28,6 @@ ".spectrum-ActionGroup--vertical", ".spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) .spectrum-ActionGroup-item" ], - "modifiers": [ - "--mod-actiongroup-border-radius", - "--mod-actiongroup-border-radius-reset", - "--mod-actiongroup-button-spacing-reset", - "--mod-actiongroup-gap-size-compact", - "--mod-actiongroup-horizontal-spacing-compact", - "--mod-actiongroup-horizontal-spacing-regular", - "--mod-actiongroup-vertical-spacing-compact", - "--mod-actiongroup-vertical-spacing-regular" - ], "component": [ "--spectrum-actiongroup-border-radius", "--spectrum-actiongroup-border-radius-reset", @@ -53,6 +43,6 @@ "--spectrum-spacing-100", "--spectrum-spacing-75" ], - "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"], + "passthroughs": [], "high-contrast": [] } diff --git a/components/alertbanner/dist/metadata.json b/components/alertbanner/dist/metadata.json index deed56dd2c9..d0f131bd05a 100644 --- a/components/alertbanner/dist/metadata.json +++ b/components/alertbanner/dist/metadata.json @@ -14,39 +14,9 @@ ".spectrum-AlertBanner:lang(ko)", ".spectrum-AlertBanner:lang(zh)" ], - "modifiers": [ - "--mod-alert-banner-background", - "--mod-alert-banner-block-edge-to-button", - "--mod-alert-banner-bottom-to-text", - "--mod-alert-banner-close-button-to-content", - "--mod-alert-banner-close-button-to-inline-end", - "--mod-alert-banner-font-color", - "--mod-alert-banner-font-family", - "--mod-alert-banner-font-size", - "--mod-alert-banner-icon-size", - "--mod-alert-banner-icon-to-text", - "--mod-alert-banner-informative-background", - "--mod-alert-banner-inline-end-to-content", - "--mod-alert-banner-inline-size", - "--mod-alert-banner-inline-start-to-content", - "--mod-alert-banner-line-height", - "--mod-alert-banner-max-inline-size", - "--mod-alert-banner-min-height", - "--mod-alert-banner-negative-background", - "--mod-alert-banner-neutral-background", - "--mod-alert-banner-text-margin-block-end", - "--mod-alert-banner-text-margin-block-start", - "--mod-alert-banner-text-to-button-horizontal", - "--mod-alert-banner-text-to-button-vertical", - "--mod-alert-banner-top-to-close-button", - "--mod-alert-banner-top-to-icon", - "--mod-alert-banner-top-to-text" - ], "component": [ "--spectrum-alert-banner-background", "--spectrum-alert-banner-block-edge-to-button", - "--spectrum-alert-banner-bottom-to-text", - "--spectrum-alert-banner-close-button-spacing", "--spectrum-alert-banner-close-button-to-content", "--spectrum-alert-banner-close-button-to-inline-end", "--spectrum-alert-banner-font-color", @@ -60,16 +30,18 @@ "--spectrum-alert-banner-line-height", "--spectrum-alert-banner-max-inline-size", "--spectrum-alert-banner-min-height", - "--spectrum-alert-banner-minimum-height", "--spectrum-alert-banner-text-margin-block-end", "--spectrum-alert-banner-text-margin-block-start", - "--spectrum-alert-banner-text-to-button-horizontal", + "--spectrum-alert-banner-text-to-button-horizontal" + ], + "global": [ + "--spectrum-alert-banner-bottom-to-text", + "--spectrum-alert-banner-close-button-spacing", + "--spectrum-alert-banner-minimum-height", "--spectrum-alert-banner-text-to-button-vertical", "--spectrum-alert-banner-top-to-text", "--spectrum-alert-banner-top-to-workflow-icon", - "--spectrum-alert-banner-width" - ], - "global": [ + "--spectrum-alert-banner-width", "--spectrum-border-width-100", "--spectrum-cjk-line-height-100", "--spectrum-font-size-100", @@ -84,12 +56,7 @@ "--spectrum-white", "--spectrum-workflow-icon-size-100" ], - "passthroughs": [ - "--mod-closebutton-align-self", - "--mod-closebutton-margin-inline", - "--mod-closebutton-margin-top", - "--mod-icon-size" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-alert-banner-border-color", "--highcontrast-alert-banner-border-width" diff --git a/components/alertdialog/dist/metadata.json b/components/alertdialog/dist/metadata.json index 7510ea9f7aa..61981e6d23e 100644 --- a/components/alertdialog/dist/metadata.json +++ b/components/alertdialog/dist/metadata.json @@ -11,31 +11,6 @@ ".spectrum-AlertDialog-header", ".spectrum-AlertDialog-heading" ], - "modifiers": [ - "--mod-alert-dialog-background-color", - "--mod-alert-dialog-body-color", - "--mod-alert-dialog-body-font-family", - "--mod-alert-dialog-body-font-style", - "--mod-alert-dialog-body-font-weight", - "--mod-alert-dialog-body-line-height", - "--mod-alert-dialog-corner-radius", - "--mod-alert-dialog-description-content-size", - "--mod-alert-dialog-description-to-button-group", - "--mod-alert-dialog-edge-to-content", - "--mod-alert-dialog-error-icon-color", - "--mod-alert-dialog-heading-size", - "--mod-alert-dialog-icon-size", - "--mod-alert-dialog-max-width", - "--mod-alert-dialog-min-width", - "--mod-alert-dialog-minimum-title-to-icon", - "--mod-alert-dialog-title-color", - "--mod-alert-dialog-title-font-family", - "--mod-alert-dialog-title-font-style", - "--mod-alert-dialog-title-font-weight", - "--mod-alert-dialog-title-line-height", - "--mod-alert-dialog-title-to-description", - "--mod-alert-dialog-warning-icon-color" - ], "component": [ "--spectrum-alert-dialog-background-color", "--spectrum-alert-dialog-body-color", @@ -45,20 +20,15 @@ "--spectrum-alert-dialog-body-line-height", "--spectrum-alert-dialog-corner-radius", "--spectrum-alert-dialog-description-content-size", - "--spectrum-alert-dialog-description-font-size", "--spectrum-alert-dialog-description-to-button-group", - "--spectrum-alert-dialog-edge-to-content", "--spectrum-alert-dialog-error-icon-color", "--spectrum-alert-dialog-heading-size", "--spectrum-alert-dialog-icon-size", "--spectrum-alert-dialog-max-width", - "--spectrum-alert-dialog-maximum-width", "--spectrum-alert-dialog-min-width", "--spectrum-alert-dialog-minimum-title-to-icon", - "--spectrum-alert-dialog-minimum-width", "--spectrum-alert-dialog-title-color", "--spectrum-alert-dialog-title-font-family", - "--spectrum-alert-dialog-title-font-size", "--spectrum-alert-dialog-title-font-style", "--spectrum-alert-dialog-title-font-weight", "--spectrum-alert-dialog-title-line-height", @@ -66,6 +36,11 @@ "--spectrum-alert-dialog-warning-icon-color" ], "global": [ + "--spectrum-alert-dialog-description-font-size", + "--spectrum-alert-dialog-edge-to-content", + "--spectrum-alert-dialog-maximum-width", + "--spectrum-alert-dialog-minimum-width", + "--spectrum-alert-dialog-title-font-size", "--spectrum-background-layer-2-color", "--spectrum-body-color", "--spectrum-body-sans-serif-font-style", @@ -84,6 +59,6 @@ "--spectrum-spacing-500", "--spectrum-workflow-icon-size-100" ], - "passthroughs": ["--mod-buttongroup-justify-content", "--mod-icon-color"], + "passthroughs": [], "high-contrast": [] } diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js index 721ba198f8f..e458c9eee8f 100644 --- a/components/alertdialog/stories/alertdialog.stories.js +++ b/components/alertdialog/stories/alertdialog.stories.js @@ -61,6 +61,11 @@ export default { }, parameters: { layout: "fullscreen", + docs: { + story: { + height: "400px", + }, + }, actions: { handles: ["click .spectrum-AlertDialog button"], }, @@ -177,6 +182,11 @@ Overflow.args = { }; Overflow.parameters = { chromatic: { disableSnapshot: true }, + docs: { + story: { + height: "550px", + }, + }, }; /** diff --git a/components/asset/dist/metadata.json b/components/asset/dist/metadata.json index 6389e295f47..2350441f94a 100644 --- a/components/asset/dist/metadata.json +++ b/components/asset/dist/metadata.json @@ -10,14 +10,6 @@ ".spectrum-Asset-folderOutline", ".spectrum-Asset-image" ], - "modifiers": [ - "--mod-asset-file-background-color", - "--mod-asset-folder-background-color", - "--mod-asset-icon-margin", - "--mod-asset-icon-max-width", - "--mod-asset-icon-min-width", - "--mod-asset-icon-outline-color" - ], "component": [ "--spectrum-asset-file-background", "--spectrum-asset-file-outline", diff --git a/components/assetcard/dist/metadata.json b/components/assetcard/dist/metadata.json index 94bf07de0af..a279a8166e9 100644 --- a/components/assetcard/dist/metadata.json +++ b/components/assetcard/dist/metadata.json @@ -42,55 +42,6 @@ ".spectrum-AssetCard:lang(ko)", ".spectrum-AssetCard:lang(zh)" ], - "modifiers": [ - "--mod-assectcard-border-color-selected-down", - "--mod-assectcard-focus-indicator-color", - "--mod-assetcard-asset-animation-duration", - "--mod-assetcard-asset-container-border-size", - "--mod-assetcard-asset-size", - "--mod-assetcard-background-color", - "--mod-assetcard-border-color", - "--mod-assetcard-border-color-down", - "--mod-assetcard-border-color-hover", - "--mod-assetcard-border-color-selected", - "--mod-assetcard-border-color-selected-hover", - "--mod-assetcard-border-radius", - "--mod-assetcard-content-font-family", - "--mod-assetcard-content-font-size", - "--mod-assetcard-content-font-style", - "--mod-assetcard-content-font-weight", - "--mod-assetcard-content-letter-spacing", - "--mod-assetcard-content-line-height", - "--mod-assetcard-content-margin-block-start", - "--mod-assetcard-content-text-color", - "--mod-assetcard-focus-indicator-thickness", - "--mod-assetcard-focus-ring-border-radius", - "--mod-assetcard-focus-ring-gap", - "--mod-assetcard-header-content-font-family", - "--mod-assetcard-header-content-font-size", - "--mod-assetcard-header-content-font-stlye", - "--mod-assetcard-header-content-font-weight", - "--mod-assetcard-header-content-letter-spacing", - "--mod-assetcard-header-content-line-height", - "--mod-assetcard-header-content-text-color", - "--mod-assetcard-header-margin-block-start", - "--mod-assetcard-overlay-background-color", - "--mod-assetcard-selectionindicator-background-color-default", - "--mod-assetcard-selectionindicator-background-color-ordered", - "--mod-assetcard-selectionindicator-border-radius", - "--mod-assetcard-selectionindicator-color", - "--mod-assetcard-selectionindicator-font-size", - "--mod-assetcard-selectionindicator-font-weight", - "--mod-assetcard-selectionindicator-margin", - "--mod-assetcard-selectionindicator-size", - "--mod-assetcard-title-font-family", - "--mod-assetcard-title-font-size", - "--mod-assetcard-title-font-style", - "--mod-assetcard-title-font-weight", - "--mod-assetcard-title-letter-spacing", - "--mod-assetcard-title-line-height", - "--mod-assetcard-title-text-color" - ], "component": [ "--spectrum-assetcard-asset-animation-duration", "--spectrum-assetcard-asset-container-border-size", @@ -104,7 +55,6 @@ "--spectrum-assetcard-border-color-selected-hover", "--spectrum-assetcard-border-radius", "--spectrum-assetcard-content-font-family", - "--spectrum-assetcard-content-font-size", "--spectrum-assetcard-content-font-style", "--spectrum-assetcard-content-font-weight", "--spectrum-assetcard-content-letter-spacing", @@ -112,10 +62,8 @@ "--spectrum-assetcard-content-margin-block-start", "--spectrum-assetcard-content-text-color", "--spectrum-assetcard-focus-indicator-thickness", - "--spectrum-assetcard-focus-ring-border-radius", "--spectrum-assetcard-focus-ring-gap", "--spectrum-assetcard-header-content-font-family", - "--spectrum-assetcard-header-content-font-size", "--spectrum-assetcard-header-content-font-style", "--spectrum-assetcard-header-content-font-weight", "--spectrum-assetcard-header-content-letter-spacing", @@ -131,7 +79,6 @@ "--spectrum-assetcard-selectionindicator-color", "--spectrum-assetcard-selectionindicator-font-size", "--spectrum-assetcard-selectionindicator-font-weight", - "--spectrum-assetcard-selectionindicator-margin", "--spectrum-assetcard-selectionindicator-offset-y", "--spectrum-assetcard-selectionindicator-size", "--spectrum-assetcard-title-font-family", @@ -145,6 +92,14 @@ "global": [ "--spectrum-animation-duration-100", "--spectrum-assestcard-focus-indicator-color", + "--spectrum-assetcard-content-font-size", + "--spectrum-assetcard-focus-ring-border-radius", + "--spectrum-assetcard-header-content-font-size", + "--spectrum-assetcard-selectionindicator-margin", + "--spectrum-blue-1000", + "--spectrum-blue-700", + "--spectrum-blue-800", + "--spectrum-blue-900", "--spectrum-body-cjk-font-style", "--spectrum-body-cjk-font-weight", "--spectrum-body-cjk-line-height", diff --git a/components/assetcard/index.css b/components/assetcard/index.css index 56c40cc58c1..5613c67e0f7 100644 --- a/components/assetcard/index.css +++ b/components/assetcard/index.css @@ -13,6 +13,13 @@ /* outer container, unstyled */ .spectrum-AssetCard { + /** default light colors */ + --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-900); + --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); + --spectrum-assetcard-background-color: var(--spectrum-gray-75); /* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */ @@ -376,3 +383,13 @@ } } } + +@media (prefers-color-scheme: dark) { + .spectrum-AssetCard { + --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); + --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800); + --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); + } +} diff --git a/components/assetlist/dist/metadata.json b/components/assetlist/dist/metadata.json index 0da89f4ae57..b42fd2eb205 100644 --- a/components/assetlist/dist/metadata.json +++ b/components/assetlist/dist/metadata.json @@ -26,28 +26,6 @@ ".spectrum-AssetList-itemSelector", ".spectrum-AssetList:dir(rtl)" ], - "modifiers": [ - "--mod-assetlist-border-color-key-focus", - "--mod-assetlist-child-indicator-animation", - "--mod-assetlist-item-animation", - "--mod-assetlist-item-background-color-down", - "--mod-assetlist-item-background-color-hover", - "--mod-assetlist-item-background-color-selected", - "--mod-assetlist-item-background-color-selected-hover", - "--mod-assetlist-item-border-radius", - "--mod-assetlist-item-font-size", - "--mod-assetlist-item-font-weight", - "--mod-assetlist-item-height", - "--mod-assetlist-item-label-padding-inline-start", - "--mod-assetlist-item-margin-bottom", - "--mod-assetlist-item-padding-inline-end", - "--mod-assetlist-item-padding-inline-start", - "--mod-assetlist-label-color", - "--mod-assetlist-thumbnail-margin-left", - "--mod-assetlist-thumbnail-width", - "--mod-assetlist-thumnail-height", - "--mod-assetlist-width" - ], "component": [ "--spectrum-assetlist-border-color-key-focus", "--spectrum-assetlist-child-indicator-animation", @@ -72,6 +50,10 @@ ], "global": [ "--spectrum-animation-duration-100", + "--spectrum-blue-700", + "--spectrum-blue-800", + "--spectrum-blue-800-rgb", + "--spectrum-blue-900-rgb", "--spectrum-font-size-100", "--spectrum-gray-100", "--spectrum-gray-200", diff --git a/components/assetlist/index.css b/components/assetlist/index.css index 28801db0d89..6f670516547 100644 --- a/components/assetlist/index.css +++ b/components/assetlist/index.css @@ -12,6 +12,11 @@ */ .spectrum-AssetList { + /** default light colors */ + --spectrum-assetlist-item-background-color-selected-hover: rgb(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-assetlist-item-background-color-selected: rgb(var(--spectrum-blue-900-rgb), 0.1); + --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); + --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-200); --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-100); @@ -46,6 +51,14 @@ } } +@media (prefers-color-scheme: dark) { + .spectrum-AssetList { + --spectrum-assetlist-item-background-color-selected-hover: rgb(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-assetlist-item-background-color-selected: rgb(var(--spectrum-blue-800-rgb), 0.15); + --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); + } +} + .spectrum-AssetList-item { position: relative; color: var(--highcontrast-assetlist-label-color, var(--mod-assetlist-label-color, var(--spectrum-assetlist-label-color))); diff --git a/components/avatar/dist/metadata.json b/components/avatar/dist/metadata.json index 6b5fb54aac2..69bb25e1cf9 100644 --- a/components/avatar/dist/metadata.json +++ b/components/avatar/dist/metadata.json @@ -25,29 +25,21 @@ ".spectrum-Avatar.is-focused:not(.is-disabled):after", ".spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after" ], - "modifiers": [ - "--mod-avatar-block-size", - "--mod-avatar-border-radius", - "--mod-avatar-color-opacity", - "--mod-avatar-color-opacity-disabled", - "--mod-avatar-focus-indicator-color", - "--mod-avatar-focus-indicator-gap", - "--mod-avatar-focus-indicator-thickness", - "--mod-avatar-inline-size" - ], "component": [ "--spectrum-avatar-block-size", - "--spectrum-avatar-border-color", "--spectrum-avatar-border-color-default", "--spectrum-avatar-border-radius", "--spectrum-avatar-border-thickness", - "--spectrum-avatar-border-width", "--spectrum-avatar-color-opacity", "--spectrum-avatar-color-opacity-disabled", "--spectrum-avatar-focus-indicator-color", "--spectrum-avatar-focus-indicator-gap", "--spectrum-avatar-focus-indicator-thickness", - "--spectrum-avatar-inline-size", + "--spectrum-avatar-inline-size" + ], + "global": [ + "--spectrum-avatar-border-color", + "--spectrum-avatar-border-width", "--spectrum-avatar-opacity-disabled", "--spectrum-avatar-size-100", "--spectrum-avatar-size-1000", @@ -65,9 +57,7 @@ "--spectrum-avatar-size-700", "--spectrum-avatar-size-75", "--spectrum-avatar-size-800", - "--spectrum-avatar-size-900" - ], - "global": [ + "--spectrum-avatar-size-900", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness" diff --git a/components/badge/dist/metadata.json b/components/badge/dist/metadata.json index 29aa729974a..d3799f09836 100644 --- a/components/badge/dist/metadata.json +++ b/components/badge/dist/metadata.json @@ -75,83 +75,6 @@ ".spectrum-Badge-label:lang(ko)", ".spectrum-Badge-label:lang(zh)" ], - "modifiers": [ - "--mod-badge-background-color-accent", - "--mod-badge-background-color-blue", - "--mod-badge-background-color-brown", - "--mod-badge-background-color-celery", - "--mod-badge-background-color-chartreuse", - "--mod-badge-background-color-cinnamon", - "--mod-badge-background-color-cyan", - "--mod-badge-background-color-default", - "--mod-badge-background-color-fuchsia", - "--mod-badge-background-color-gray", - "--mod-badge-background-color-green", - "--mod-badge-background-color-indigo", - "--mod-badge-background-color-informative", - "--mod-badge-background-color-magenta", - "--mod-badge-background-color-negative", - "--mod-badge-background-color-notice", - "--mod-badge-background-color-orange", - "--mod-badge-background-color-pink", - "--mod-badge-background-color-positive", - "--mod-badge-background-color-purple", - "--mod-badge-background-color-red", - "--mod-badge-background-color-seafoam", - "--mod-badge-background-color-silver", - "--mod-badge-background-color-turquoise", - "--mod-badge-background-color-yellow", - "--mod-badge-border-color", - "--mod-badge-border-width", - "--mod-badge-corner-radius", - "--mod-badge-font-size", - "--mod-badge-height", - "--mod-badge-icon-only-spacing-horizontal", - "--mod-badge-icon-spacing-horizontal", - "--mod-badge-icon-spacing-vertical-top", - "--mod-badge-icon-text-spacing", - "--mod-badge-label-icon-color", - "--mod-badge-label-spacing-horizontal", - "--mod-badge-label-spacing-vertical-bottom", - "--mod-badge-label-spacing-vertical-top", - "--mod-badge-line-height", - "--mod-badge-line-height-cjk", - "--mod-badge-outline-background-color-default", - "--mod-badge-outline-border-color-accent", - "--mod-badge-outline-border-color-informative", - "--mod-badge-outline-border-color-negative", - "--mod-badge-outline-border-color-neutral", - "--mod-badge-outline-border-color-notice", - "--mod-badge-outline-border-color-positive", - "--mod-badge-outline-label-icon-color", - "--mod-badge-subtle-background-color-accent", - "--mod-badge-subtle-background-color-blue", - "--mod-badge-subtle-background-color-brown", - "--mod-badge-subtle-background-color-celery", - "--mod-badge-subtle-background-color-chartreuse", - "--mod-badge-subtle-background-color-cinnamon", - "--mod-badge-subtle-background-color-cyan", - "--mod-badge-subtle-background-color-default", - "--mod-badge-subtle-background-color-fuchsia", - "--mod-badge-subtle-background-color-gray", - "--mod-badge-subtle-background-color-green", - "--mod-badge-subtle-background-color-indigo", - "--mod-badge-subtle-background-color-informative", - "--mod-badge-subtle-background-color-magenta", - "--mod-badge-subtle-background-color-negative", - "--mod-badge-subtle-background-color-notice", - "--mod-badge-subtle-background-color-orange", - "--mod-badge-subtle-background-color-pink", - "--mod-badge-subtle-background-color-positive", - "--mod-badge-subtle-background-color-purple", - "--mod-badge-subtle-background-color-red", - "--mod-badge-subtle-background-color-seafoam", - "--mod-badge-subtle-background-color-silver", - "--mod-badge-subtle-background-color-turquoise", - "--mod-badge-subtle-background-color-yellow", - "--mod-badge-subtle-label-icon-color", - "--mod-badge-workflow-icon-size" - ], "component": [ "--spectrum-badge-background-color-accent", "--spectrum-badge-background-color-blue", diff --git a/components/badge/index.css b/components/badge/index.css index 3498a25777f..014a3db165d 100644 --- a/components/badge/index.css +++ b/components/badge/index.css @@ -122,6 +122,12 @@ --highcontrast-badge-border-color: CanvasText; } +@media (prefers-color-scheme: dark) { + .spectrum-Badge { + --spectrum-badge-label-icon-color: var(--spectrum-black); + } +} + /* text and icon color is black for these background colors */ .spectrum-Badge--notice, .spectrum-Badge--orange, diff --git a/components/breadcrumb/dist/metadata.json b/components/breadcrumb/dist/metadata.json index 01ed6639e32..6cf704f6e78 100644 --- a/components/breadcrumb/dist/metadata.json +++ b/components/breadcrumb/dist/metadata.json @@ -31,51 +31,12 @@ ".spectrum-Breadcrumbs-itemSeparator", ".spectrum-Breadcrumbs-itemSeparator:dir(rtl)" ], - "modifiers": [ - "--mod-breadcrumbs-action-button-color", - "--mod-breadcrumbs-action-button-color-disabled", - "--mod-breadcrumbs-action-button-spacing-block", - "--mod-breadcrumbs-action-button-spacing-inline", - "--mod-breadcrumbs-block-size", - "--mod-breadcrumbs-focus-indicator-color", - "--mod-breadcrumbs-focus-indicator-gap", - "--mod-breadcrumbs-focus-indicator-thickness", - "--mod-breadcrumbs-font-family", - "--mod-breadcrumbs-font-family-current", - "--mod-breadcrumbs-font-size", - "--mod-breadcrumbs-font-size-current", - "--mod-breadcrumbs-font-style", - "--mod-breadcrumbs-font-weight", - "--mod-breadcrumbs-font-weight-current", - "--mod-breadcrumbs-icon-spacing-block", - "--mod-breadcrumbs-inline-end", - "--mod-breadcrumbs-inline-start", - "--mod-breadcrumbs-inline-start-to-truncated-menu", - "--mod-breadcrumbs-item-dragged-background", - "--mod-breadcrumbs-item-link-border-radius", - "--mod-breadcrumbs-line-height", - "--mod-breadcrumbs-separator-color", - "--mod-breadcrumbs-separator-spacing-inline", - "--mod-breadcrumbs-text-color", - "--mod-breadcrumbs-text-color-current", - "--mod-breadcrumbs-text-color-disabled", - "--mod-breadcrumbs-text-decoration-gap", - "--mod-breadcrumbs-text-decoration-thickness", - "--mod-breadcrumbs-text-spacing-block-end", - "--mod-breadcrumbs-text-spacing-block-start", - "--mod-breadcrumbs-title-spacing-block-end", - "--mod-breadcrumbs-title-spacing-block-start", - "--mod-heading-margin-end", - "--mod-heading-margin-start" - ], "component": [ "--spectrum-breadcrumbs-action-button-color", "--spectrum-breadcrumbs-action-button-color-disabled", "--spectrum-breadcrumbs-action-button-spacing-block", "--spectrum-breadcrumbs-action-button-spacing-inline", "--spectrum-breadcrumbs-block-size", - "--spectrum-breadcrumbs-bottom-to-text-multiline", - "--spectrum-breadcrumbs-end-edge-to-text", "--spectrum-breadcrumbs-focus-indicator-color", "--spectrum-breadcrumbs-focus-indicator-gap", "--spectrum-breadcrumbs-focus-indicator-thickness", @@ -86,7 +47,6 @@ "--spectrum-breadcrumbs-font-style", "--spectrum-breadcrumbs-font-weight", "--spectrum-breadcrumbs-font-weight-current", - "--spectrum-breadcrumbs-height-multiline", "--spectrum-breadcrumbs-icon-spacing-block", "--spectrum-breadcrumbs-inline-end", "--spectrum-breadcrumbs-inline-start", @@ -96,11 +56,6 @@ "--spectrum-breadcrumbs-line-height", "--spectrum-breadcrumbs-separator-color", "--spectrum-breadcrumbs-separator-spacing-inline", - "--spectrum-breadcrumbs-separator-to-bottom-text-multiline", - "--spectrum-breadcrumbs-start-edge-to-text-large", - "--spectrum-breadcrumbs-start-edge-to-text-medium", - "--spectrum-breadcrumbs-start-edge-to-text-multiline", - "--spectrum-breadcrumbs-start-edge-to-truncated-menu", "--spectrum-breadcrumbs-text-color", "--spectrum-breadcrumbs-text-color-current", "--spectrum-breadcrumbs-text-color-disabled", @@ -108,11 +63,22 @@ "--spectrum-breadcrumbs-text-decoration-thickness", "--spectrum-breadcrumbs-text-spacing-block-end", "--spectrum-breadcrumbs-text-spacing-block-start", + "--spectrum-breadcrumbs-title-spacing-block-end", + "--spectrum-breadcrumbs-title-spacing-block-start" + ], + "global": [ + "--spectrum-bold-font-weight", + "--spectrum-breadcrumbs-bottom-to-text-multiline", + "--spectrum-breadcrumbs-end-edge-to-text", + "--spectrum-breadcrumbs-height-multiline", + "--spectrum-breadcrumbs-separator-to-bottom-text-multiline", + "--spectrum-breadcrumbs-start-edge-to-text-large", + "--spectrum-breadcrumbs-start-edge-to-text-medium", + "--spectrum-breadcrumbs-start-edge-to-text-multiline", + "--spectrum-breadcrumbs-start-edge-to-truncated-menu", "--spectrum-breadcrumbs-text-to-separator-large", "--spectrum-breadcrumbs-text-to-separator-medium", "--spectrum-breadcrumbs-text-to-separator-multiline", - "--spectrum-breadcrumbs-title-spacing-block-end", - "--spectrum-breadcrumbs-title-spacing-block-start", "--spectrum-breadcrumbs-top-text-to-bottom-text", "--spectrum-breadcrumbs-top-to-separator-large", "--spectrum-breadcrumbs-top-to-separator-medium", @@ -120,10 +86,7 @@ "--spectrum-breadcrumbs-top-to-text-multiline", "--spectrum-breadcrumbs-top-to-truncated-menu", "--spectrum-breadcrumbs-truncated-menu-to-bottom-text", - "--spectrum-breadcrumbs-truncated-menu-to-separator" - ], - "global": [ - "--spectrum-bold-font-weight", + "--spectrum-breadcrumbs-truncated-menu-to-separator", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", "--spectrum-component-height-100", diff --git a/components/button/dist/metadata.json b/components/button/dist/metadata.json index 660dfcc6d96..d47f63f4bce 100644 --- a/components/button/dist/metadata.json +++ b/components/button/dist/metadata.json @@ -54,50 +54,6 @@ ".spectrum-Button[pending] .spectrum-ProgressCircle", "a.spectrum-Button" ], - "modifiers": [ - "--mod-button-animation-duration", - "--mod-button-background-color-default", - "--mod-button-background-color-disabled", - "--mod-button-background-color-down", - "--mod-button-background-color-focus", - "--mod-button-background-color-hover", - "--mod-button-border-color-default", - "--mod-button-border-color-disabled", - "--mod-button-border-color-down", - "--mod-button-border-color-focus", - "--mod-button-border-color-hover", - "--mod-button-border-radius", - "--mod-button-border-width", - "--mod-button-bottom-to-text", - "--mod-button-content-color-default", - "--mod-button-content-color-disabled", - "--mod-button-content-color-down", - "--mod-button-content-color-focus", - "--mod-button-content-color-hover", - "--mod-button-edge-to-text", - "--mod-button-edge-to-visual", - "--mod-button-edge-to-visual-only", - "--mod-button-focus-ring-border-radius", - "--mod-button-focus-ring-color", - "--mod-button-focus-ring-gap", - "--mod-button-focus-ring-thickness", - "--mod-button-font-family", - "--mod-button-font-size", - "--mod-button-font-weight", - "--mod-button-height", - "--mod-button-icon-margin-block-start", - "--mod-button-line-height", - "--mod-button-margin-block", - "--mod-button-margin-left", - "--mod-button-margin-right", - "--mod-button-max-inline-size", - "--mod-button-min-width", - "--mod-button-padding-label-to-icon", - "--mod-button-text-align", - "--mod-button-text-align-with-icon", - "--mod-button-top-to-icon", - "--mod-button-top-to-text" - ], "component": [ "--spectrum-button-animation-duration", "--spectrum-button-background-color-default", @@ -113,10 +69,6 @@ "--spectrum-button-border-radius", "--spectrum-button-border-width", "--spectrum-button-bottom-to-text", - "--spectrum-button-bottom-to-text-extra-large", - "--spectrum-button-bottom-to-text-large", - "--spectrum-button-bottom-to-text-medium", - "--spectrum-button-bottom-to-text-small", "--spectrum-button-content-color-default", "--spectrum-button-content-color-disabled", "--spectrum-button-content-color-down", @@ -134,14 +86,9 @@ "--spectrum-button-intended-icon-size", "--spectrum-button-line-height", "--spectrum-button-min-width", - "--spectrum-button-minimum-width-multiplier", "--spectrum-button-padding-label-to-icon", "--spectrum-button-top-to-icon", - "--spectrum-button-top-to-text", - "--spectrum-button-top-to-text-extra-large", - "--spectrum-button-top-to-text-large", - "--spectrum-button-top-to-text-medium", - "--spectrum-button-top-to-text-small" + "--spectrum-button-top-to-text" ], "global": [ "--spectrum-accent-background-color-default", @@ -152,6 +99,15 @@ "--spectrum-black", "--spectrum-bold-font-weight", "--spectrum-border-width-200", + "--spectrum-button-bottom-to-text-extra-large", + "--spectrum-button-bottom-to-text-large", + "--spectrum-button-bottom-to-text-medium", + "--spectrum-button-bottom-to-text-small", + "--spectrum-button-minimum-width-multiplier", + "--spectrum-button-top-to-text-extra-large", + "--spectrum-button-top-to-text-large", + "--spectrum-button-top-to-text-medium", + "--spectrum-button-top-to-text-small", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", @@ -244,12 +200,7 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "passthroughs": [ - "--mod-progress-circle-position", - "--mod-progress-circle-thickness", - "--mod-progress-circle-track-border-color", - "--mod-progress-circle-track-border-color-over-background" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-button-background-color-default", "--highcontrast-button-background-color-disabled", diff --git a/components/buttongroup/dist/metadata.json b/components/buttongroup/dist/metadata.json index 04dc22bce0f..060d594d249 100644 --- a/components/buttongroup/dist/metadata.json +++ b/components/buttongroup/dist/metadata.json @@ -6,13 +6,6 @@ ".spectrum-ButtonGroup.spectrum-ButtonGroup--sizeS", ".spectrum-ButtonGroup.spectrum-ButtonGroup--vertical" ], - "modifiers": [ - "--mod-buttongroup-flex-wrap", - "--mod-buttongroup-justify-content", - "--mod-buttongroup-spacing", - "--mod-buttongroup-spacing-horizontal", - "--mod-buttongroup-spacing-vertical" - ], "component": [ "--spectrum-buttongroup-display", "--spectrum-buttongroup-flex-direction", diff --git a/components/calendar/dist/metadata.json b/components/calendar/dist/metadata.json index cc1fb80035c..c38faae00bc 100644 --- a/components/calendar/dist/metadata.json +++ b/components/calendar/dist/metadata.json @@ -56,54 +56,6 @@ ".spectrum-Calendar-title", ".spectrum-Calendar:dir(rtl)" ], - "modifiers": [ - "--mod-calendar-border-radius-reset", - "--mod-calendar-border-width-reset", - "--mod-calendar-button-icon-color", - "--mod-calendar-day-background-color", - "--mod-calendar-day-background-color-cap-selected", - "--mod-calendar-day-background-color-down", - "--mod-calendar-day-background-color-focus", - "--mod-calendar-day-background-color-hover", - "--mod-calendar-day-background-color-key-focus", - "--mod-calendar-day-background-color-selected", - "--mod-calendar-day-background-color-selected-hover", - "--mod-calendar-day-background-layer-color", - "--mod-calendar-day-border-color", - "--mod-calendar-day-border-color-key-focus", - "--mod-calendar-day-border-size", - "--mod-calendar-day-fill-content", - "--mod-calendar-day-fill-display", - "--mod-calendar-day-height", - "--mod-calendar-day-padding", - "--mod-calendar-day-text-color", - "--mod-calendar-day-text-color-cap-selected", - "--mod-calendar-day-text-color-disabled", - "--mod-calendar-day-text-color-hover", - "--mod-calendar-day-text-color-key-focus", - "--mod-calendar-day-text-color-selected", - "--mod-calendar-day-text-font-weight", - "--mod-calendar-day-text-font-weight-cap-selected", - "--mod-calendar-day-text-font-weight-selected", - "--mod-calendar-day-text-size", - "--mod-calendar-day-text-size-han", - "--mod-calendar-day-title-text-color", - "--mod-calendar-day-title-text-font-weight", - "--mod-calendar-day-title-text-size", - "--mod-calendar-day-today-background-color-selected-hover", - "--mod-calendar-day-today-border-color", - "--mod-calendar-day-today-border-color-disabled", - "--mod-calendar-day-today-text-color", - "--mod-calendar-day-today-text-font-weight", - "--mod-calendar-day-visibility", - "--mod-calendar-day-width", - "--mod-calendar-margin-x", - "--mod-calendar-margin-y", - "--mod-calendar-title-height", - "--mod-calendar-title-text-letter-spacing", - "--mod-calendar-title-text-size", - "--mod-calendar-width" - ], "component": [ "--spectrum-calendar-border-radius-reset", "--spectrum-calendar-border-width-reset", @@ -157,6 +109,11 @@ "--spectrum-calendar-width" ], "global": [ + "--spectrum-black-rgb", + "--spectrum-blue-700", + "--spectrum-blue-800", + "--spectrum-blue-800-rgb", + "--spectrum-blue-900-rgb", "--spectrum-bold-font-weight", "--spectrum-border-width-200", "--spectrum-component-height-100", @@ -173,13 +130,12 @@ "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", "--spectrum-neutral-subdued-content-color-default", - "--spectrum-regular-font-weight" - ], - "passthroughs": [ - "--mod-actionbutton-content-color-default", - "--mod-actionbutton-edge-to-text", - "--mod-actionbutton-min-width" + "--spectrum-regular-font-weight", + "--spectrum-transparent-black-200", + "--spectrum-transparent-white-200", + "--spectrum-white-rgb" ], + "passthroughs": [], "high-contrast": [ "--highcontrast-calendar-day-background-cap-selected", "--highcontrast-calendar-day-background-down", diff --git a/components/calendar/index.css b/components/calendar/index.css index 352a388d74f..f3c878005fb 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -12,6 +12,16 @@ */ .spectrum-Calendar { + /** default light colors */ + --spectrum-calendar-day-background-color-selected: rgb(var(--spectrum-blue-900-rgb), 0.1); + --spectrum-calendar-day-background-color-hover: rgb(var(--spectrum-black-rgb), 0.06); + --spectrum-calendar-day-today-background-color-selected-hover: rgb(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-selected-hover: rgb(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-calendar-day-background-color-cap-selected: rgb(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-key-focus: rgb(var(--spectrum-black-rgb), 0.06); + --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); + --spectrum-calendar-day-background-color-selected-disabled: rgb(var(--spectrum-gray-100-rgb), 0.4); --spectrum-calendar-day-width: var(--mod-calendar-day-width, var(--spectrum-component-height-100)); @@ -44,6 +54,19 @@ } } +@media (prefers-color-scheme: dark) { + .spectrum-Calendar { + --spectrum-calendar-day-background-color-selected: rgb(var(--spectrum-blue-800-rgb), 0.15); + --spectrum-calendar-day-background-color-hover: rgb(var(--spectrum-white-rgb), 0.07); + --spectrum-calendar-day-today-background-color-selected-hover: rgb(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-selected-hover: rgb(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-calendar-day-background-color-cap-selected: rgb(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-key-focus: rgb(var(--spectrum-white-rgb), 0.07); + --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); + } +} + .spectrum-Calendar-date { --spectrum-calendar-day-background: var(--mod-calendar-day-background-color, transparent); --spectrum-calendar-day-background-selected: var(--highcontrast-calendar-day-background-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected))); diff --git a/components/card/dist/metadata.json b/components/card/dist/metadata.json index d1d22100c30..98e7fc7e034 100644 --- a/components/card/dist/metadata.json +++ b/components/card/dist/metadata.json @@ -55,63 +55,6 @@ ".spectrum-Card:hover .spectrum-Card-actions", ".spectrum-Card:hover .spectrum-Card-quickActions" ], - "modifiers": [ - "--mod-animation-duration-100", - "--mod-card-actions-border-radius", - "--mod-card-actions-drop-shadow-blur", - "--mod-card-actions-drop-shadow-color", - "--mod-card-actions-drop-shadow-x", - "--mod-card-actions-drop-shadow-y", - "--mod-card-actions-size", - "--mod-card-actions-spacing", - "--mod-card-animation-duration", - "--mod-card-background-color", - "--mod-card-background-color-hover", - "--mod-card-background-color-selected", - "--mod-card-body-font-color", - "--mod-card-body-font-family", - "--mod-card-body-font-size", - "--mod-card-body-font-style", - "--mod-card-body-font-weight", - "--mod-card-body-line-height", - "--mod-card-body-padding-block-end", - "--mod-card-body-padding-block-start", - "--mod-card-body-padding-inline-end", - "--mod-card-body-padding-inline-start", - "--mod-card-body-spacing", - "--mod-card-border-color", - "--mod-card-border-color-hover", - "--mod-card-border-color-selected", - "--mod-card-border-width", - "--mod-card-content-margin-bottom", - "--mod-card-content-margin-top", - "--mod-card-corner-radius", - "--mod-card-divider-color", - "--mod-card-focus-indicator-color", - "--mod-card-focus-indicator-width", - "--mod-card-footer-margin-block-start", - "--mod-card-footer-margin-inline-end", - "--mod-card-footer-margin-inline-start", - "--mod-card-footer-padding-block-end", - "--mod-card-footer-padding-block-start", - "--mod-card-horizontal-body-padding", - "--mod-card-horizontal-preview-padding", - "--mod-card-minimum-width", - "--mod-card-preview-background-color", - "--mod-card-preview-background-color-hover", - "--mod-card-preview-minimum-height", - "--mod-card-selected-background-color-rgb", - "--mod-card-selected-background-opacity", - "--mod-card-subtitle-padding-right", - "--mod-card-title-font-color", - "--mod-card-title-font-family", - "--mod-card-title-font-size", - "--mod-card-title-font-style", - "--mod-card-title-font-weight", - "--mod-card-title-line-height", - "--mod-card-title-padding-right", - "--mod-overlay-animation-duration" - ], "component": [ "--spectrum-card-actions-border-radius", "--spectrum-card-actions-drop-shadow-blur", @@ -142,14 +85,9 @@ "--spectrum-card-footer-padding-top", "--spectrum-card-horizontal-body-padding", "--spectrum-card-horizontal-preview-padding", - "--spectrum-card-minimum-width", "--spectrum-card-preview-background-color", "--spectrum-card-preview-background-color-hover", - "--spectrum-card-preview-minimum-height", - "--spectrum-card-selected-background-color-rgb", "--spectrum-card-selected-background-opacity", - "--spectrum-card-selection-background-color", - "--spectrum-card-selection-background-size", "--spectrum-card-subtitle-padding-right", "--spectrum-card-title-font-color", "--spectrum-card-title-font-family", @@ -170,6 +108,11 @@ "--spectrum-body-sans-serif-font-weight", "--spectrum-body-size-s", "--spectrum-border-width-100", + "--spectrum-card-minimum-width", + "--spectrum-card-preview-minimum-height", + "--spectrum-card-selected-background-color-rgb", + "--spectrum-card-selection-background-color", + "--spectrum-card-selection-background-size", "--spectrum-corner-radius-100", "--spectrum-drop-shadow-blur", "--spectrum-drop-shadow-color", diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json index daf35c48fa3..0eb7637c66f 100644 --- a/components/checkbox/dist/metadata.json +++ b/components/checkbox/dist/metadata.json @@ -56,39 +56,6 @@ ".spectrum-Checkbox:not(.is-readOnly) .spectrum-Checkbox-input:active:not(:disabled) + .spectrum-Checkbox-box", ".spectrum-Checkbox:not(.is-readOnly):active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box" ], - "modifiers": [ - "--mod-checkbox-animation-duration", - "--mod-checkbox-border-width", - "--mod-checkbox-bottom-to-text", - "--mod-checkbox-checkmark-color", - "--mod-checkbox-content-color-default", - "--mod-checkbox-content-color-disabled", - "--mod-checkbox-content-color-down", - "--mod-checkbox-content-color-focus", - "--mod-checkbox-content-color-hover", - "--mod-checkbox-control-color-default", - "--mod-checkbox-control-color-disabled", - "--mod-checkbox-control-color-down", - "--mod-checkbox-control-color-focus", - "--mod-checkbox-control-color-hover", - "--mod-checkbox-control-corner-radius", - "--mod-checkbox-control-selected-color-default", - "--mod-checkbox-control-selected-color-down", - "--mod-checkbox-control-selected-color-hover", - "--mod-checkbox-control-size", - "--mod-checkbox-focus-indicator-color", - "--mod-checkbox-focus-indicator-gap", - "--mod-checkbox-focus-indicator-thickness", - "--mod-checkbox-font-size", - "--mod-checkbox-height", - "--mod-checkbox-line-height", - "--mod-checkbox-line-height-cjk", - "--mod-checkbox-margin-block", - "--mod-checkbox-selected-border-width", - "--mod-checkbox-text-to-control", - "--mod-checkbox-top-to-text", - "--mod-focus-indicator-thickness" - ], "component": [ "--spectrum-checkbox-animation-duration", "--spectrum-checkbox-background-color", @@ -109,10 +76,6 @@ "--spectrum-checkbox-control-selected-color-down", "--spectrum-checkbox-control-selected-color-hover", "--spectrum-checkbox-control-size", - "--spectrum-checkbox-control-size-extra-large", - "--spectrum-checkbox-control-size-large", - "--spectrum-checkbox-control-size-medium", - "--spectrum-checkbox-control-size-small", "--spectrum-checkbox-emphasized-color-default", "--spectrum-checkbox-emphasized-color-down", "--spectrum-checkbox-emphasized-color-focus", @@ -133,10 +96,6 @@ "--spectrum-checkbox-text-font-weight", "--spectrum-checkbox-text-to-control", "--spectrum-checkbox-top-to-control", - "--spectrum-checkbox-top-to-control-extra-large", - "--spectrum-checkbox-top-to-control-large", - "--spectrum-checkbox-top-to-control-medium", - "--spectrum-checkbox-top-to-control-small", "--spectrum-checkbox-top-to-text" ], "global": [ @@ -146,6 +105,14 @@ "--spectrum-accent-content-color-key-focus", "--spectrum-animation-duration-100", "--spectrum-border-width-200", + "--spectrum-checkbox-control-size-extra-large", + "--spectrum-checkbox-control-size-large", + "--spectrum-checkbox-control-size-medium", + "--spectrum-checkbox-control-size-small", + "--spectrum-checkbox-top-to-control-extra-large", + "--spectrum-checkbox-top-to-control-large", + "--spectrum-checkbox-top-to-control-medium", + "--spectrum-checkbox-top-to-control-small", "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", diff --git a/components/clearbutton/dist/metadata.json b/components/clearbutton/dist/metadata.json index dd50b142662..68505e096a6 100644 --- a/components/clearbutton/dist/metadata.json +++ b/components/clearbutton/dist/metadata.json @@ -21,21 +21,6 @@ ".spectrum-ClearButton:not(:disabled):hover", ".spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill" ], - "modifiers": [ - "--mod-clear-button-background-color", - "--mod-clear-button-background-color-disabled", - "--mod-clear-button-background-color-down", - "--mod-clear-button-background-color-hover", - "--mod-clear-button-background-color-key-focus", - "--mod-clear-button-height", - "--mod-clear-button-icon-color", - "--mod-clear-button-icon-color-disabled", - "--mod-clear-button-icon-color-down", - "--mod-clear-button-icon-color-hover", - "--mod-clear-button-icon-color-key-focus", - "--mod-clear-button-padding", - "--mod-clear-button-width" - ], "component": [ "--spectrum-clear-button-background-color", "--spectrum-clear-button-background-color-down", diff --git a/components/closebutton/dist/metadata.json b/components/closebutton/dist/metadata.json index 6c74f8bf61f..ccb360ab5e9 100644 --- a/components/closebutton/dist/metadata.json +++ b/components/closebutton/dist/metadata.json @@ -30,27 +30,6 @@ ".spectrum-CloseButton:not(:disabled):hover .spectrum-CloseButton-UIIcon", "a.spectrum-CloseButton" ], - "modifiers": [ - "--mod-closebutton-align-self", - "--mod-closebutton-animation-duraction", - "--mod-closebutton-animation-duration", - "--mod-closebutton-background-color-default", - "--mod-closebutton-background-color-down", - "--mod-closebutton-background-color-focus", - "--mod-closebutton-background-color-hover", - "--mod-closebutton-border-radius", - "--mod-closebutton-focus-indicator-color", - "--mod-closebutton-focus-indicator-gap", - "--mod-closebutton-focus-indicator-thickness", - "--mod-closebutton-icon-color-default", - "--mod-closebutton-icon-color-disabled", - "--mod-closebutton-icon-color-down", - "--mod-closebutton-icon-color-focus", - "--mod-closebutton-icon-color-hover", - "--mod-closebutton-margin-inline", - "--mod-closebutton-margin-top", - "--mod-closebutton-size" - ], "component": [ "--spectrum-closebutton-animation-duration", "--spectrum-closebutton-background-color-default", @@ -97,11 +76,7 @@ "--spectrum-transparent-white-800", "--spectrum-transparent-white-900" ], - "passthroughs": [ - "--mod-button-animation-duration", - "--mod-button-font-family", - "--mod-button-line-height" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-closebutton-background-color-default", "--highcontrast-closebutton-focus-indicator-color", diff --git a/components/coachindicator/dist/metadata.json b/components/coachindicator/dist/metadata.json index 0bed4172eef..9ae7cf29a8d 100644 --- a/components/coachindicator/dist/metadata.json +++ b/components/coachindicator/dist/metadata.json @@ -10,47 +10,28 @@ ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticBlack", ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite" ], - "modifiers": [ - "--mod-coach-animation-indicator-ring-center-delay-multiple", - "--mod-coach-animation-indicator-ring-duration", - "--mod-coach-animation-indicator-ring-outer-delay-multiple", - "--mod-coach-indicator-animation-name", - "--mod-coach-indicator-block-size", - "--mod-coach-indicator-gap", - "--mod-coach-indicator-inline-size", - "--mod-coach-indicator-inner-animation-delay-multiple", - "--mod-coach-indicator-left", - "--mod-coach-indicator-min-block-size", - "--mod-coach-indicator-min-inline-size", - "--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple", - "--mod-coach-indicator-quiet-ring-diameter", - "--mod-coach-indicator-ring-block-size", - "--mod-coach-indicator-ring-border-size", - "--mod-coach-indicator-ring-default-color", - "--mod-coach-indicator-ring-diameter", - "--mod-coach-indicator-ring-inline-size", - "--mod-coach-indicator-top" - ], "component": [ "--spectrum-coach-indicator-animation-keyframe-scale-initial", "--spectrum-coach-indicator-animation-ring-inner-delay-multiple", "--spectrum-coach-indicator-block-size", - "--spectrum-coach-indicator-gap", "--spectrum-coach-indicator-inline-size", "--spectrum-coach-indicator-min-block-size", "--spectrum-coach-indicator-min-inline-size", - "--spectrum-coach-indicator-quiet-ring-diameter", "--spectrum-coach-indicator-ring-border-size", "--spectrum-coach-indicator-ring-default-color", - "--spectrum-coach-indicator-ring-diameter", "--spectrum-coach-indicator-ring-diameter-size", "--spectrum-coach-indicator-sizing-multiple" ], "global": [ "--spectrum-animation-duration-6000", "--spectrum-black", + "--spectrum-blue-700", + "--spectrum-blue-800", "--spectrum-border-width-200", "--spectrum-coach-animation-indicator-ring-duration", + "--spectrum-coach-indicator-gap", + "--spectrum-coach-indicator-quiet-ring-diameter", + "--spectrum-coach-indicator-ring-diameter", "--spectrum-white" ], "passthroughs": [], diff --git a/components/coachindicator/index.css b/components/coachindicator/index.css index c3bb2754d30..5e018e0b2fb 100644 --- a/components/coachindicator/index.css +++ b/components/coachindicator/index.css @@ -12,6 +12,9 @@ */ .spectrum-CoachIndicator { + /** default light colors */ + --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); + --spectrum-coach-indicator-ring-border-size: var(--spectrum-border-width-200); --spectrum-coach-indicator-sizing-multiple: 3; --spectrum-coach-indicator-ring-diameter-size: var(--mod-coach-indicator-ring-diameter, var(--spectrum-coach-indicator-ring-diameter)); @@ -51,6 +54,12 @@ block-size: var(--spectrum-coach-indicator-block-size); } +@media (prefers-color-scheme: dark) { + .spectrum-CoachIndicator { + --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); + } +} + .spectrum-CoachIndicator-ring { display: block; position: absolute; diff --git a/components/coachmark/dist/metadata.json b/components/coachmark/dist/metadata.json index 9286c817c5f..d997d0f1ab2 100644 --- a/components/coachmark/dist/metadata.json +++ b/components/coachmark/dist/metadata.json @@ -16,57 +16,11 @@ ".spectrum-CoachMark-step", ".spectrum-CoachMark-title" ], - "modifiers": [ - "--mod-coachmark-action-menu-vertical-offset", - "--mod-coachmark-body-to-footer", - "--mod-coachmark-border-radius", - "--mod-coachmark-border-size", - "--mod-coachmark-content-font-color", - "--mod-coachmark-content-font-family", - "--mod-coachmark-content-font-size", - "--mod-coachmark-content-font-style", - "--mod-coachmark-content-font-weight", - "--mod-coachmark-content-line-height", - "--mod-coachmark-header-to-body", - "--mod-coachmark-heading-to-action-button", - "--mod-coachmark-image-to-heading", - "--mod-coachmark-max-width", - "--mod-coachmark-media-fixed-height", - "--mod-coachmark-media-min-height", - "--mod-coachmark-min-width", - "--mod-coachmark-padding", - "--mod-coachmark-step-color", - "--mod-coachmark-step-font-size", - "--mod-coachmark-step-font-style", - "--mod-coachmark-step-text-font-weight", - "--mod-coachmark-step-text-line-height", - "--mod-coachmark-step-to-bottom", - "--mod-coachmark-title-color", - "--mod-coachmark-title-font-family", - "--mod-coachmark-title-font-size", - "--mod-coachmark-title-font-style", - "--mod-coachmark-title-text-font-weight", - "--mod-coachmark-title-text-line-height", - "--mod-coachmark-width" - ], "component": [ - "--spectrum-coach-mark-body-font-size", - "--spectrum-coach-mark-edge-to-content", - "--spectrum-coach-mark-maximum-width", - "--spectrum-coach-mark-media-height", - "--spectrum-coach-mark-media-minimum-height", - "--spectrum-coach-mark-minimum-width", - "--spectrum-coach-mark-pagination-body-font-size", - "--spectrum-coach-mark-pagination-color", - "--spectrum-coach-mark-pagination-text-to-bottom-edge", - "--spectrum-coach-mark-title-font-size", - "--spectrum-coach-mark-width", - "--spectrum-coachmark-action-menu-vertical-offset", "--spectrum-coachmark-body-to-footer", "--spectrum-coachmark-border-radius", "--spectrum-coachmark-border-size", "--spectrum-coachmark-buttongroup-display", - "--spectrum-coachmark-buttongroup-mobile-display", "--spectrum-coachmark-content-font-size", "--spectrum-coachmark-content-font-weight", "--spectrum-coachmark-header-to-body", @@ -75,7 +29,6 @@ "--spectrum-coachmark-media-fixed-height", "--spectrum-coachmark-media-min-height", "--spectrum-coachmark-menu-display", - "--spectrum-coachmark-menu-mobile-display", "--spectrum-coachmark-min-width", "--spectrum-coachmark-padding", "--spectrum-coachmark-step-color", @@ -99,12 +52,26 @@ "--spectrum-body-sans-serif-font-weight", "--spectrum-body-serif-font-style", "--spectrum-border-width-100", + "--spectrum-coach-mark-body-font-size", + "--spectrum-coach-mark-edge-to-content", + "--spectrum-coach-mark-maximum-width", + "--spectrum-coach-mark-media-height", + "--spectrum-coach-mark-media-minimum-height", + "--spectrum-coach-mark-minimum-width", + "--spectrum-coach-mark-pagination-body-font-size", + "--spectrum-coach-mark-pagination-color", + "--spectrum-coach-mark-pagination-text-to-bottom-edge", + "--spectrum-coach-mark-title-font-size", + "--spectrum-coach-mark-width", + "--spectrum-coachmark-action-menu-vertical-offset", + "--spectrum-coachmark-buttongroup-mobile-display", + "--spectrum-coachmark-menu-mobile-display", "--spectrum-corner-radius-large-default", "--spectrum-heading-color", "--spectrum-line-height-200", "--spectrum-medium-font-weight", "--spectrum-popover-edge-to-content-area", - "--spectrum-sans-serif-font", + "--spectrum-sans-font-family-stack", "--spectrum-spacing-100", "--spectrum-spacing-200", "--spectrum-spacing-300", @@ -112,13 +79,6 @@ "--spectrum-title-sans-serif-font-weight", "--spectrum-title-serif-font-style" ], - "passthroughs": [ - "--mod-button-edge-to-visual-only", - "--mod-buttongroup-justify-content", - "--mod-buttongroup-spacing", - "--mod-popover-border-width", - "--mod-popover-content-area-spacing", - "--mod-popover-corner-radius" - ], + "passthroughs": [], "high-contrast": [] } diff --git a/components/coachmark/index.css b/components/coachmark/index.css index 3d78766e888..c42b463cc10 100644 --- a/components/coachmark/index.css +++ b/components/coachmark/index.css @@ -30,7 +30,7 @@ /* font */ --spectrum-coachmark-title-color: var(--spectrum-heading-color); - --spectrum-coachmark-title-font-family: var(--spectrum-sans-serif-font); + --spectrum-coachmark-title-font-family: var(--spectrum-sans-font-family-stack); --spectrum-coachmark-title-font-size: var(--spectrum-coach-mark-title-font-size); --spectrum-coachmark-title-font-style: var(--spectrum-title-serif-font-style); --spectrum-coachmark-title-text-font-weight: var(--spectrum-title-sans-serif-font-weight); @@ -143,7 +143,7 @@ color: var(--mod-coachmark-content-font-color, var(--spectrum-body-color)); font-size: var(--mod-coachmark-content-font-size, var(--spectrum-coachmark-content-font-size)); font-weight: var(--mod-coachmark-content-font-weight, var(--spectrum-coachmark-content-font-weight)); - font-family: var(--mod-coachmark-content-font-family, var(--spectrum-sans-serif-font)); + font-family: var(--mod-coachmark-content-font-family, var(--spectrum-sans-font-family-stack)); font-style: var(--mod-coachmark-content-font-style, var(--spectrum-body-sans-serif-font-style)); line-height: var(--mod-coachmark-content-line-height, var(--spectrum-body-line-height)); } @@ -164,7 +164,7 @@ color: var(--mod-coachmark-step-color, var(--spectrum-coachmark-step-color)); font-size: var(--mod-coachmark-step-font-size, var(--spectrum-coachmark-step-font-size)); font-weight: var(--mod-coachmark-step-text-font-weight, var(--spectrum-coachmark-step-text-font-weight)); - font-family: var(--spectrum-sans-serif-font); + font-family: var(--spectrum-sans-font-family-stack); font-style: var(--mod-coachmark-step-font-style, var(--spectrum-coachmark-step-font-style)); line-height: var(--mod-coachmark-step-text-line-height, var(--spectrum-coachmark-step-text-line-height)); white-space: nowrap; diff --git a/components/colorarea/dist/metadata.json b/components/colorarea/dist/metadata.json index 2580a3d0eab..995dbecabfc 100644 --- a/components/colorarea/dist/metadata.json +++ b/components/colorarea/dist/metadata.json @@ -11,24 +11,7 @@ ".spectrum-ColorArea.is-focused", ".spectrum-ColorHandle-color" ], - "modifiers": [ - "--mod-colorarea-border-color", - "--mod-colorarea-border-radius", - "--mod-colorarea-border-width", - "--mod-colorarea-disabled-background-color", - "--mod-colorarea-height", - "--mod-colorarea-min-height", - "--mod-colorarea-min-width", - "--mod-colorarea-width" - ], "component": [ - "--spectrum-color-area-border-opacity", - "--spectrum-color-area-border-rounding", - "--spectrum-color-area-border-width", - "--spectrum-color-area-height", - "--spectrum-color-area-minimum-height", - "--spectrum-color-area-minimum-width", - "--spectrum-color-area-width", "--spectrum-colorarea-border-color", "--spectrum-colorarea-border-color-rgb", "--spectrum-colorarea-border-radius", @@ -40,6 +23,13 @@ "--spectrum-colorarea-width" ], "global": [ + "--spectrum-color-area-border-opacity", + "--spectrum-color-area-border-rounding", + "--spectrum-color-area-border-width", + "--spectrum-color-area-height", + "--spectrum-color-area-minimum-height", + "--spectrum-color-area-minimum-width", + "--spectrum-color-area-width", "--spectrum-disabled-background-color", "--spectrum-gray-1000-rgb" ], diff --git a/components/colorhandle/dist/metadata.json b/components/colorhandle/dist/metadata.json index cbd2b5d599f..7a80a4ffed3 100644 --- a/components/colorhandle/dist/metadata.json +++ b/components/colorhandle/dist/metadata.json @@ -9,30 +9,7 @@ ".spectrum-ColorHandle:after", ".spectrum-ColorHandle:focus-visible" ], - "modifiers": [ - "--mod-colorhandle-animation-duration", - "--mod-colorhandle-animation-easing", - "--mod-colorhandle-border-color", - "--mod-colorhandle-border-color-disabled", - "--mod-colorhandle-border-width", - "--mod-colorhandle-fill-color-disabled", - "--mod-colorhandle-focused-size", - "--mod-colorhandle-hitarea-border-radius", - "--mod-colorhandle-hitarea-size", - "--mod-colorhandle-inner-border-color", - "--mod-colorhandle-inner-border-width", - "--mod-colorhandle-outer-border-color", - "--mod-colorhandle-outer-border-width", - "--mod-colorhandle-size" - ], "component": [ - "--spectrum-color-handle-border-width", - "--spectrum-color-handle-inner-border-opacity", - "--spectrum-color-handle-inner-border-width", - "--spectrum-color-handle-outer-border-opacity", - "--spectrum-color-handle-outer-border-width", - "--spectrum-color-handle-size", - "--spectrum-color-handle-size-key-focus", "--spectrum-colorhandle-inner-border-color", "--spectrum-colorhandle-outer-border-color", "--spectrum-colorhandle-outer-border-width" @@ -41,12 +18,19 @@ "--spectrum-animation-duration-100", "--spectrum-black-rgb", "--spectrum-color-control-track-width", + "--spectrum-color-handle-border-width", + "--spectrum-color-handle-inner-border-opacity", + "--spectrum-color-handle-inner-border-width", + "--spectrum-color-handle-outer-border-opacity", + "--spectrum-color-handle-outer-border-width", + "--spectrum-color-handle-size", + "--spectrum-color-handle-size-key-focus", "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", "--spectrum-picked-color", "--spectrum-white" ], - "passthroughs": ["--mod-opacity-checkerboard-position"], + "passthroughs": [], "high-contrast": [ "--highcontrast-colorhandle-border-color-disabled", "--highcontrast-colorhandle-fill-color-disabled" diff --git a/components/colorloupe/dist/metadata.json b/components/colorloupe/dist/metadata.json index 8ec7836e2ed..17da9ae8870 100644 --- a/components/colorloupe/dist/metadata.json +++ b/components/colorloupe/dist/metadata.json @@ -11,29 +11,9 @@ ".spectrum-ColorLoupe.is-open", ".spectrum-ColorLoupe:dir(rtl)" ], - "modifiers": [ - "--mod-colorloupe-animation-distance", - "--mod-colorloupe-drop-shadow-blur", - "--mod-colorloupe-drop-shadow-color", - "--mod-colorloupe-drop-shadow-x", - "--mod-colorloupe-drop-shadow-y", - "--mod-colorloupe-inner-border-color", - "--mod-colorloupe-inner-border-width", - "--mod-colorloupe-offset", - "--mod-colorloupe-outer-border-color", - "--mod-colorloupe-outer-border-width" - ], "component": [ - "--spectrum-color-loupe-bottom-to-color-handle", - "--spectrum-color-loupe-height", - "--spectrum-color-loupe-inner-border", - "--spectrum-color-loupe-inner-border-width", - "--spectrum-color-loupe-outer-border", - "--spectrum-color-loupe-outer-border-width", - "--spectrum-color-loupe-width", "--spectrum-colorloupe-animation-distance", "--spectrum-colorloupe-checkerboard-dark-color", - "--spectrum-colorloupe-checkerboard-fill", "--spectrum-colorloupe-checkerboard-light-color", "--spectrum-colorloupe-drop-shadow-blur", "--spectrum-colorloupe-drop-shadow-color", @@ -50,6 +30,14 @@ "global": [ "--spectrum-color-handle-outer-border-width", "--spectrum-color-handle-size", + "--spectrum-color-loupe-bottom-to-color-handle", + "--spectrum-color-loupe-height", + "--spectrum-color-loupe-inner-border", + "--spectrum-color-loupe-inner-border-width", + "--spectrum-color-loupe-outer-border", + "--spectrum-color-loupe-outer-border-width", + "--spectrum-color-loupe-width", + "--spectrum-colorloupe-checkerboard-fill", "--spectrum-drop-shadow-elevated-blur", "--spectrum-drop-shadow-elevated-color", "--spectrum-drop-shadow-elevated-x", diff --git a/components/colorslider/dist/metadata.json b/components/colorslider/dist/metadata.json index aad9494baf6..1cdeb9d23d1 100644 --- a/components/colorslider/dist/metadata.json +++ b/components/colorslider/dist/metadata.json @@ -15,38 +15,23 @@ ".spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-gradient", ".spectrum-ColorSlider.is-focused" ], - "modifiers": [ - "--mod-color-slider-background-color-disabled", - "--mod-color-slider-border-color", - "--mod-color-slider-border-color-disabled", - "--mod-color-slider-border-rounding", - "--mod-color-slider-border-width", - "--mod-color-slider-control-track-height", - "--mod-color-slider-control-track-width", - "--mod-color-slider-handle-hitarea-border-radius", - "--mod-color-slider-length", - "--mod-color-slider-minimum-length", - "--mod-color-slider-vertical-control-track-width", - "--mod-color-slider-vertical-height", - "--mod-color-slider-vertical-minimum-height" - ], "component": [ "--spectrum-color-slider-border-color-default", "--spectrum-color-slider-border-color-local", - "--spectrum-color-slider-border-opacity", - "--spectrum-color-slider-border-rounding", - "--spectrum-color-slider-border-width", "--spectrum-color-slider-control-track-width", - "--spectrum-color-slider-fill-color-disabled", - "--spectrum-color-slider-length", - "--spectrum-color-slider-minimum-length" + "--spectrum-color-slider-fill-color-disabled" ], "global": [ "--spectrum-color-control-track-width", + "--spectrum-color-slider-border-opacity", + "--spectrum-color-slider-border-rounding", + "--spectrum-color-slider-border-width", + "--spectrum-color-slider-length", + "--spectrum-color-slider-minimum-length", "--spectrum-disabled-background-color", "--spectrum-gray-1000-rgb" ], - "passthroughs": ["--mod-colorhandle-hitarea-border-radius"], + "passthroughs": [], "high-contrast": [ "--highcontrast-color-slider-background-color-disabled", "--highcontrast-color-slider-border-color", diff --git a/components/colorwheel/dist/metadata.json b/components/colorwheel/dist/metadata.json index 1c087a7f50f..5159ebda2c6 100644 --- a/components/colorwheel/dist/metadata.json +++ b/components/colorwheel/dist/metadata.json @@ -19,35 +19,25 @@ ".spectrum-ColorWheel:after", ".spectrum-ColorWheel:before" ], - "modifiers": [ - "--mod-colorwheel-block-size", - "--mod-colorwheel-border-color", - "--mod-colorwheel-colorarea-container-size", - "--mod-colorwheel-fill-color-disabled", - "--mod-colorwheel-inline-size", - "--mod-colorwheel-min-inline-size", - "--mod-colorwheel-path", - "--mod-colorwheel-track-width" - ], "component": [ - "--spectrum-color-wheel-border-opacity", - "--spectrum-color-wheel-minimum-width", - "--spectrum-color-wheel-width", "--spectrum-colorwheel-block-size", "--spectrum-colorwheel-border-color", "--spectrum-colorwheel-border-color-rgb", "--spectrum-colorwheel-border-opacity", "--spectrum-colorwheel-border-width", - "--spectrum-colorwheel-colorarea-container-size", "--spectrum-colorwheel-fill-color-disabled", "--spectrum-colorwheel-inline-size", "--spectrum-colorwheel-min-inline-size", - "--spectrum-colorwheel-path", "--spectrum-colorwheel-track-width" ], "global": [ "--spectrum-border-width-100", "--spectrum-color-control-track-width", + "--spectrum-color-wheel-border-opacity", + "--spectrum-color-wheel-minimum-width", + "--spectrum-color-wheel-width", + "--spectrum-colorwheel-colorarea-container-size", + "--spectrum-colorwheel-path", "--spectrum-disabled-background-color", "--spectrum-gray-1000-rgb" ], diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index ee4f97630eb..71781450d5f 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -91,63 +91,7 @@ ".spectrum-Textfield.is-loading .spectrum-Textfield-validationIcon", ".spectrum-Textfield.is-readOnly .spectrum-Textfield-validationIcon" ], - "modifiers": [ - "--mod-combobox-alert-icon-color", - "--mod-combobox-background-color-default", - "--mod-combobox-background-color-disabled", - "--mod-combobox-background-color-focus", - "--mod-combobox-background-color-focus-hover", - "--mod-combobox-background-color-hover", - "--mod-combobox-background-color-key-focus", - "--mod-combobox-block-size", - "--mod-combobox-block-spacing-edge-to-icon", - "--mod-combobox-block-spacing-edge-to-progress-circle", - "--mod-combobox-border-color-default", - "--mod-combobox-border-color-disabled", - "--mod-combobox-border-color-focus", - "--mod-combobox-border-color-focus-hover", - "--mod-combobox-border-color-hover", - "--mod-combobox-border-color-invalid-default", - "--mod-combobox-border-color-invalid-focus", - "--mod-combobox-border-color-invalid-focus-hover", - "--mod-combobox-border-color-invalid-hover", - "--mod-combobox-border-color-invalid-key-focus", - "--mod-combobox-border-color-key-focus", - "--mod-combobox-border-radius", - "--mod-combobox-border-width", - "--mod-combobox-button-width", - "--mod-combobox-focus-indicator-color", - "--mod-combobox-focus-indicator-gap", - "--mod-combobox-focus-indicator-thickness", - "--mod-combobox-font-color-default", - "--mod-combobox-font-color-disabled", - "--mod-combobox-font-color-focus", - "--mod-combobox-font-color-focus-hover", - "--mod-combobox-font-color-hover", - "--mod-combobox-font-color-key-focus", - "--mod-combobox-font-color-placeholder", - "--mod-combobox-font-family", - "--mod-combobox-icon-size", - "--mod-combobox-inline-size", - "--mod-combobox-line-height", - "--mod-combobox-line-height-cjk", - "--mod-combobox-min-inline-size", - "--mod-combobox-popover-animation-distance", - "--mod-combobox-readonly-border-color-disabled", - "--mod-combobox-spacing-alert-icon-to-text", - "--mod-combobox-spacing-block-end-edge-to-text", - "--mod-combobox-spacing-block-start-edge-to-text", - "--mod-combobox-spacing-inline-icon-to-button", - "--mod-combobox-spacing-inline-icon-to-text", - "--mod-combobox-spacing-inline-start-edge-to-text", - "--mod-combobox-spacing-label-to-combobox", - "--mod-combobox-spacing-side-label-to-field", - "--mod-combobox-spacing-to-help-text", - "--mod-combobox-textfield-background-color" - ], "component": [ - "--spectrum-combo-box-minimum-width-multiplier", - "--spectrum-combo-box-visual-to-field-button", "--spectrum-combobox-background-color-autofill", "--spectrum-combobox-background-color-default", "--spectrum-combobox-background-color-disabled", @@ -198,6 +142,8 @@ "--spectrum-blue-900-rgb", "--spectrum-border-width-200", "--spectrum-cjk-line-height-100", + "--spectrum-combo-box-minimum-width-multiplier", + "--spectrum-combo-box-visual-to-field-button", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", "--spectrum-component-bottom-to-text-300", @@ -270,47 +216,7 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "passthroughs": [ - "--mod-divider-inline-minimum-size", - "--mod-picker-button-background-color", - "--mod-picker-button-background-color-disabled", - "--mod-picker-button-border-color", - "--mod-picker-button-border-color-disabled", - "--mod-picker-button-border-width", - "--mod-picker-button-font-color-disabled", - "--mod-popover-animation-distance", - "--mod-textfield-background-color", - "--mod-textfield-background-color-disabled", - "--mod-textfield-border-color", - "--mod-textfield-border-color-disabled", - "--mod-textfield-border-color-focus", - "--mod-textfield-border-color-focus-hover", - "--mod-textfield-border-color-hover", - "--mod-textfield-border-color-invalid-default", - "--mod-textfield-border-color-invalid-focus", - "--mod-textfield-border-color-invalid-focus-hover", - "--mod-textfield-border-color-invalid-hover", - "--mod-textfield-border-color-invalid-keyboard-focus", - "--mod-textfield-border-color-keyboard-focus", - "--mod-textfield-border-width", - "--mod-textfield-corner-radius", - "--mod-textfield-focus-indicator-color", - "--mod-textfield-focus-indicator-gap", - "--mod-textfield-focus-indicator-width", - "--mod-textfield-font-family", - "--mod-textfield-font-size", - "--mod-textfield-font-style", - "--mod-textfield-font-weight", - "--mod-textfield-icon-color-invalid", - "--mod-textfield-spacing-block-end", - "--mod-textfield-spacing-block-start", - "--mod-textfield-text-color-default", - "--mod-textfield-text-color-disabled", - "--mod-textfield-text-color-focus", - "--mod-textfield-text-color-focus-hover", - "--mod-textfield-text-color-hover", - "--mod-textfield-text-color-keyboard-focus" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-combobox-background-color-default", "--highcontrast-combobox-border-color-highlight", diff --git a/components/contextualhelp/dist/metadata.json b/components/contextualhelp/dist/metadata.json index a64ded05750..84af82b7b10 100644 --- a/components/contextualhelp/dist/metadata.json +++ b/components/contextualhelp/dist/metadata.json @@ -8,48 +8,29 @@ ".spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body", ".spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading" ], - "modifiers": [ - "--mod-contextual-help-body-color", - "--mod-contextual-help-body-line-height", - "--mod-contextual-help-body-sans-serif-font-family", - "--mod-contextual-help-body-sans-serif-font-style", - "--mod-contextual-help-body-sans-serif-font-weight", - "--mod-contextual-help-body-size", - "--mod-contextual-help-content-spacing", - "--mod-contextual-help-heading-size", - "--mod-contextual-help-link-spacing", - "--mod-contextual-help-min-inline-size", - "--mod-contextual-help-padding", - "--mod-contextual-help-popover-maximum-width", - "--mod-contextual-help-title-color", - "--mod-contextual-help-title-font-style", - "--mod-contextual-help-title-font-weight", - "--mod-contextual-help-title-line-height", - "--mod-contextual-help-title-sans-serif-font-family" - ], "component": [ "--spectrum-contextual-help-body-color", "--spectrum-contextual-help-body-line-height", "--spectrum-contextual-help-body-sans-serif-font-family", "--spectrum-contextual-help-body-sans-serif-font-style", "--spectrum-contextual-help-body-sans-serif-font-weight", - "--spectrum-contextual-help-body-size", - "--spectrum-contextual-help-content-spacing", "--spectrum-contextual-help-link-spacing", "--spectrum-contextual-help-min-inline-size", - "--spectrum-contextual-help-minimum-width", "--spectrum-contextual-help-padding", "--spectrum-contextual-help-title-color", "--spectrum-contextual-help-title-font-style", "--spectrum-contextual-help-title-font-weight", "--spectrum-contextual-help-title-line-height", - "--spectrum-contextual-help-title-sans-serif-font-family", - "--spectrum-contextual-help-title-size" + "--spectrum-contextual-help-title-sans-serif-font-family" ], "global": [ "--spectrum-body-color", "--spectrum-body-sans-serif-font-style", "--spectrum-body-sans-serif-font-weight", + "--spectrum-contextual-help-body-size", + "--spectrum-contextual-help-content-spacing", + "--spectrum-contextual-help-minimum-width", + "--spectrum-contextual-help-title-size", "--spectrum-corner-radius-large-default", "--spectrum-line-height-200", "--spectrum-sans-font-family-stack", @@ -61,10 +42,7 @@ "--spectrum-title-sans-serif-font-style", "--spectrum-title-sans-serif-font-weight" ], - "passthroughs": [ - "--mod-popover-animation-distance", - "--mod-popover-corner-radius" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-contextual-help-body-color", "--highcontrast-contextual-help-title-color" diff --git a/components/datepicker/dist/metadata.json b/components/datepicker/dist/metadata.json index cf8fffe86db..f0bdeef233f 100644 --- a/components/datepicker/dist/metadata.json +++ b/components/datepicker/dist/metadata.json @@ -36,41 +36,6 @@ ".spectrum-DatePicker.spectrum-DatePicker--quiet.is-invalid", ".spectrum-DatePicker:not(.spectrum-DatePicker--quiet, .is-disabled)" ], - "modifiers": [ - "--mod-datepicker-border-color-disabled", - "--mod-datepicker-border-radius", - "--mod-datepicker-border-radius-quiet", - "--mod-datepicker-dash-color", - "--mod-datepicker-dash-color-disabled", - "--mod-datepicker-dash-font-size", - "--mod-datepicker-dash-line-height", - "--mod-datepicker-datetime-input-width", - "--mod-datepicker-datetime-input-width-first", - "--mod-datepicker-datetime-quiet-input-width", - "--mod-datepicker-datetime-quiet-input-width-first", - "--mod-datepicker-focus-animation", - "--mod-datepicker-focus-line-gap", - "--mod-datepicker-focus-ring-color", - "--mod-datepicker-focus-ring-gap", - "--mod-datepicker-focus-ring-width", - "--mod-datepicker-focus-thickness", - "--mod-datepicker-generic-padding", - "--mod-datepicker-input-width", - "--mod-datepicker-input-width-quiet", - "--mod-datepicker-invalid-quiet-color", - "--mod-datepicker-min-width", - "--mod-datepicker-padding-inline", - "--mod-datepicker-padding-inline-end-invalid-quiet", - "--mod-datepicker-padding-inline-quiet", - "--mod-datepicker-pickerbutton-border-color", - "--mod-datepicker-pickerbutton-border-color-invalid", - "--mod-datepicker-quiet-border-color-hover", - "--mod-datepicker-quiet-button-offset", - "--mod-datepicker-range-dash-margin-left", - "--mod-datepicker-range-dash-padding-top", - "--mod-datepicker-range-input-width-first", - "--mod-datepicker-range-input-width-quiet-first" - ], "component": [ "--spectrum-datepicker-border-color-disabled", "--spectrum-datepicker-border-radius", @@ -78,29 +43,22 @@ "--spectrum-datepicker-border-width", "--spectrum-datepicker-dash-color", "--spectrum-datepicker-dash-font-size", - "--spectrum-datepicker-dash-line-height", "--spectrum-datepicker-datetime-input-width", "--spectrum-datepicker-datetime-input-width-first", "--spectrum-datepicker-datetime-quiet-input-width", "--spectrum-datepicker-datetime-quiet-input-width-first", - "--spectrum-datepicker-datetime-width-first", "--spectrum-datepicker-focus-animation", "--spectrum-datepicker-focus-line-gap", "--spectrum-datepicker-focus-ring-color", "--spectrum-datepicker-focus-ring-gap", "--spectrum-datepicker-focus-ring-width", "--spectrum-datepicker-focus-thickness", - "--spectrum-datepicker-generic-padding", "--spectrum-datepicker-icon-size", "--spectrum-datepicker-icon-to-text", "--spectrum-datepicker-initial-height", - "--spectrum-datepicker-initial-width", - "--spectrum-datepicker-input-datetime-width", "--spectrum-datepicker-input-width", "--spectrum-datepicker-input-width-base", "--spectrum-datepicker-input-width-quiet", - "--spectrum-datepicker-invalid-icon-to-button", - "--spectrum-datepicker-invalid-icon-to-button-quiet", "--spectrum-datepicker-invalid-quiet-color", "--spectrum-datepicker-min-width", "--spectrum-datepicker-padding-inline-end", @@ -115,9 +73,7 @@ "--spectrum-datepicker-range-dash-marin-inline-start", "--spectrum-datepicker-range-dash-padding-top", "--spectrum-datepicker-range-input-width-first", - "--spectrum-datepicker-range-input-width-quiet-first", - "--spectrum-datepicker-width-quiet-first", - "--spectrum-datepicker-width-quiet-second" + "--spectrum-datepicker-range-input-width-quiet-first" ], "global": [ "--spectrum-animation-duration-100", @@ -125,6 +81,15 @@ "--spectrum-component-edge-to-text-100", "--spectrum-component-height-100", "--spectrum-corner-radius-100", + "--spectrum-datepicker-dash-line-height", + "--spectrum-datepicker-datetime-width-first", + "--spectrum-datepicker-generic-padding", + "--spectrum-datepicker-initial-width", + "--spectrum-datepicker-input-datetime-width", + "--spectrum-datepicker-invalid-icon-to-button", + "--spectrum-datepicker-invalid-icon-to-button-quiet", + "--spectrum-datepicker-width-quiet-first", + "--spectrum-datepicker-width-quiet-second", "--spectrum-disabled-border-color", "--spectrum-disabled-content-color", "--spectrum-field-edge-to-disclosure-icon-100", @@ -140,15 +105,7 @@ "--spectrum-text-to-visual-100", "--spectrum-workflow-icon-size-100" ], - "passthroughs": [ - "--mod-picker-button-background-color", - "--mod-picker-button-background-color-hover-disabled", - "--mod-picker-button-border-color", - "--mod-picker-button-border-color-disabled", - "--mod-textfield-border-color-disabled", - "--mod-textfield-icon-spacing-inline-end-invalid", - "--mod-textfield-icon-spacing-inline-end-quiet-invalid" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-datepicker-dash-color", "--highcontrast-datepicker-focus-ring-color", diff --git a/components/dial/dist/metadata.json b/components/dial/dist/metadata.json index 1d91c2bb539..00ec588b5fd 100644 --- a/components/dial/dist/metadata.json +++ b/components/dial/dist/metadata.json @@ -35,51 +35,14 @@ ".u-isGrabbing .spectrum-Dial .spectrum-Dial-label", ".u-isGrabbing .spectrum-Dial .spectrum-Dial-value" ], - "modifiers": [ - "--mod-dial-background-color-default", - "--mod-dial-border-color", - "--mod-dial-border-color-hover", - "--mod-dial-border-radius", - "--mod-dial-container-width", - "--mod-dial-controls-margin", - "--mod-dial-controls-min-height", - "--mod-dial-handle-block-margin", - "--mod-dial-handle-border-color-disabled", - "--mod-dial-handle-border-size", - "--mod-dial-handle-inline-margin", - "--mod-dial-handle-marker-border-radius", - "--mod-dial-handle-marker-color", - "--mod-dial-handle-marker-color-hover", - "--mod-dial-handle-marker-color-key-focus", - "--mod-dial-handle-marker-color-mouse-focus", - "--mod-dial-handle-marker-height", - "--mod-dial-handle-marker-width", - "--mod-dial-handle-position", - "--mod-dial-handle-size", - "--mod-dial-height", - "--mod-dial-label-container-top-to-text", - "--mod-dial-label-gap-y", - "--mod-dial-label-line-height", - "--mod-dial-label-text-color", - "--mod-dial-label-text-color-disabled", - "--mod-dial-label-text-size", - "--mod-dial-min-height", - "--mod-dial-min-max-tick-angles", - "--mod-dial-min-max-tick-color", - "--mod-dial-width" - ], "component": [ "--spectrum-dial-background-color-default", "--spectrum-dial-border-color", "--spectrum-dial-border-color-hover", - "--spectrum-dial-border-radius", "--spectrum-dial-container-width", - "--spectrum-dial-controls-margin", "--spectrum-dial-controls-min-height", - "--spectrum-dial-handle-block-margin", "--spectrum-dial-handle-border-color-disabled", "--spectrum-dial-handle-border-size", - "--spectrum-dial-handle-inline-margin", "--spectrum-dial-handle-marker-border-radius", "--spectrum-dial-handle-marker-color", "--spectrum-dial-handle-marker-color-hover", @@ -87,11 +50,8 @@ "--spectrum-dial-handle-marker-color-mouse-focus", "--spectrum-dial-handle-marker-height", "--spectrum-dial-handle-marker-width", - "--spectrum-dial-handle-position", "--spectrum-dial-handle-size", "--spectrum-dial-height", - "--spectrum-dial-label-container-top-to-text", - "--spectrum-dial-label-gap-y", "--spectrum-dial-label-line-height", "--spectrum-dial-label-text-color", "--spectrum-dial-label-text-color-disabled", @@ -103,6 +63,13 @@ ], "global": [ "--spectrum-border-width-200", + "--spectrum-dial-border-radius", + "--spectrum-dial-controls-margin", + "--spectrum-dial-handle-block-margin", + "--spectrum-dial-handle-inline-margin", + "--spectrum-dial-handle-position", + "--spectrum-dial-label-container-top-to-text", + "--spectrum-dial-label-gap-y", "--spectrum-font-size-75", "--spectrum-gray-25", "--spectrum-gray-400", diff --git a/components/dialog/dist/metadata.json b/components/dialog/dist/metadata.json index 738156392db..9e72232c8e4 100644 --- a/components/dialog/dist/metadata.json +++ b/components/dialog/dist/metadata.json @@ -41,33 +41,6 @@ ".spectrum-Dialog-heading", ".spectrum-Dialog-hero" ], - "modifiers": [ - "--mod-standard-dialog-background-color", - "--mod-standard-dialog-border-radius", - "--mod-standard-dialog-description-font-size", - "--mod-standard-dialog-description-font-weight", - "--mod-standard-dialog-description-line-height", - "--mod-standard-dialog-description-text-color", - "--mod-standard-dialog-header-content-font-size", - "--mod-standard-dialog-heading-font-size", - "--mod-standard-dialog-heading-font-weight", - "--mod-standard-dialog-heading-line-height", - "--mod-standard-dialog-heading-text-color", - "--mod-standard-dialog-hero-block-size", - "--mod-standard-dialog-max-width", - "--mod-standard-dialog-max-width-large", - "--mod-standard-dialog-max-width-small", - "--mod-standard-dialog-min-inline-size", - "--mod-standard-dialog-spacing-description-to-footer", - "--mod-standard-dialog-spacing-edge-to-close-button", - "--mod-standard-dialog-spacing-footer-to-button-group", - "--mod-standard-dialog-spacing-grid-padding", - "--mod-standard-dialog-spacing-title-to-description", - "--mod-standard-dialog-spacing-title-to-header-content", - "--mod-takeover-dialog-grid-spacing", - "--mod-takeover-dialog-spacing-header-content-gap", - "--mod-takeover-dialog-title-font-size" - ], "component": [], "global": [ "--spectrum-background-layer-2-color", @@ -133,9 +106,6 @@ "--spectrum-title-sans-serif-font-weight", "--spectrum-title-size-xxl" ], - "passthroughs": [ - "--mod-buttongroup-flex-wrap", - "--mod-buttongroup-justify-content" - ], + "passthroughs": [], "high-contrast": [] } diff --git a/components/divider/dist/metadata.json b/components/divider/dist/metadata.json index 94ce19f83fd..d20fdc90816 100644 --- a/components/divider/dist/metadata.json +++ b/components/divider/dist/metadata.json @@ -11,27 +11,18 @@ ".spectrum-Divider--vertical", ".spectrum-Divider:not(.spectrum-Divider.spectrum-Divider--vertical)" ], - "modifiers": [ - "--mod-divider-background-color", - "--mod-divider-block-minimum-size", - "--mod-divider-inline-minimum-size", - "--mod-divider-thickness", - "--mod-divider-vertical-align", - "--mod-divider-vertical-height", - "--mod-divider-vertical-margin" - ], "component": [ "--spectrum-divider-background-color", "--spectrum-divider-block-minimum-size", - "--spectrum-divider-horizontal-minimum-width", "--spectrum-divider-inline-minimum-size", - "--spectrum-divider-thickness", + "--spectrum-divider-thickness" + ], + "global": [ + "--spectrum-divider-horizontal-minimum-width", "--spectrum-divider-thickness-large", "--spectrum-divider-thickness-medium", "--spectrum-divider-thickness-small", - "--spectrum-divider-vertical-minimum-height" - ], - "global": [ + "--spectrum-divider-vertical-minimum-height", "--spectrum-gray-200", "--spectrum-gray-800", "--spectrum-transparent-black-200", diff --git a/components/dropindicator/dist/metadata.json b/components/dropindicator/dist/metadata.json index 294d6ad70bb..8461bf013a7 100644 --- a/components/dropindicator/dist/metadata.json +++ b/components/dropindicator/dist/metadata.json @@ -11,18 +11,16 @@ ".spectrum-DropIndicator:after", ".spectrum-DropIndicator:before" ], - "modifiers": [ - "--mod-dropindicator-border-color", - "--mod-dropindicator-border-size", - "--mod-dropindicator-circle-color", - "--mod-dropindicator-circle-size" - ], "component": [ "--spectrum-dropindicator-border-size", "--spectrum-dropindicator-circle-size", "--spectrum-dropindicator-color" ], - "global": ["--spectrum-border-width-200"], + "global": [ + "--spectrum-blue-700", + "--spectrum-blue-800", + "--spectrum-border-width-200" + ], "passthroughs": [], "high-contrast": ["--highcontrast-dropindicator-color"] } diff --git a/components/dropindicator/index.css b/components/dropindicator/index.css index c603c785e02..040cbbbabb2 100644 --- a/components/dropindicator/index.css +++ b/components/dropindicator/index.css @@ -18,6 +18,9 @@ } .spectrum-DropIndicator { + /** default light colors */ + --spectrum-dropindicator-color: var(--spectrum-blue-800); + --spectrum-dropindicator-border-size: var(--spectrum-border-width-200); --spectrum-dropindicator-circle-size: 12px; @@ -37,6 +40,12 @@ } } +@media (prefers-color-scheme: dark) { + .spectrum-DropIndicator { + --spectrum-dropindicator-color: var(--spectrum-blue-700); + } +} + .spectrum-DropIndicator--horizontal { block-size: var(--mod-dropindicator-border-size, var(--spectrum-dropindicator-border-size)); margin: 0 var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)); diff --git a/components/dropzone/dist/metadata.json b/components/dropzone/dist/metadata.json index e91812f2d27..f96657c43cc 100644 --- a/components/dropzone/dist/metadata.json +++ b/components/dropzone/dist/metadata.json @@ -20,46 +20,12 @@ ".spectrum-DropZone:focus-visible", ".spectrum-DropZone:has(.spectrum-DropZone-stroke)" ], - "modifiers": [ - "--mod-drop-zone-background-color", - "--mod-drop-zone-background-color-opacity", - "--mod-drop-zone-background-color-opacity-filled", - "--mod-drop-zone-body-font-size", - "--mod-drop-zone-body-to-action", - "--mod-drop-zone-border-color", - "--mod-drop-zone-border-color-hover", - "--mod-drop-zone-border-dash-gap", - "--mod-drop-zone-border-dash-length", - "--mod-drop-zone-border-style", - "--mod-drop-zone-border-style-dragged", - "--mod-drop-zone-border-width", - "--mod-drop-zone-content-background-color", - "--mod-drop-zone-content-bottom-to-text", - "--mod-drop-zone-content-font-family", - "--mod-drop-zone-content-font-size", - "--mod-drop-zone-content-font-weight", - "--mod-drop-zone-content-height", - "--mod-drop-zone-content-max-width", - "--mod-drop-zone-content-maximum-width", - "--mod-drop-zone-content-top-to-text", - "--mod-drop-zone-corner-radius", - "--mod-drop-zone-edge-to-text", - "--mod-drop-zone-illustration-color-hover", - "--mod-drop-zone-inline-size", - "--mod-drop-zone-padding", - "--mod-drop-zone-title-line-height" - ], "component": [ "--spectrum-drop-zone-background-color", - "--spectrum-drop-zone-background-color-opacity", - "--spectrum-drop-zone-background-color-opacity-filled", "--spectrum-drop-zone-background-color-rgb", - "--spectrum-drop-zone-body-font-size", "--spectrum-drop-zone-body-to-action", "--spectrum-drop-zone-border-color", "--spectrum-drop-zone-border-color-hover", - "--spectrum-drop-zone-border-dash-gap", - "--spectrum-drop-zone-border-dash-length", "--spectrum-drop-zone-border-width", "--spectrum-drop-zone-component-height", "--spectrum-drop-zone-content-background-color", @@ -68,7 +34,6 @@ "--spectrum-drop-zone-content-font-size", "--spectrum-drop-zone-content-font-weight", "--spectrum-drop-zone-content-max-width", - "--spectrum-drop-zone-content-maximum-width", "--spectrum-drop-zone-content-top-to-text", "--spectrum-drop-zone-corner-radius", "--spectrum-drop-zone-dragged-background-color", @@ -78,12 +43,13 @@ "--spectrum-drop-zone-padding", "--spectrum-drop-zone-stroke-dash-gap", "--spectrum-drop-zone-stroke-dash-length", - "--spectrum-drop-zone-title-line-height", - "--spectrum-drop-zone-width" + "--spectrum-drop-zone-title-line-height" ], "global": [ "--spectrum-accent-content-color-default", "--spectrum-accent-visual-color", + "--spectrum-blue-800-rgb", + "--spectrum-blue-900-rgb", "--spectrum-bold-font-weight", "--spectrum-border-width-200", "--spectrum-component-bottom-to-text-300", @@ -92,6 +58,13 @@ "--spectrum-component-top-to-text-300", "--spectrum-corner-radius-500", "--spectrum-corner-radius-700", + "--spectrum-drop-zone-background-color-opacity", + "--spectrum-drop-zone-background-color-opacity-filled", + "--spectrum-drop-zone-body-font-size", + "--spectrum-drop-zone-border-dash-gap", + "--spectrum-drop-zone-border-dash-length", + "--spectrum-drop-zone-content-maximum-width", + "--spectrum-drop-zone-width", "--spectrum-font-size-300", "--spectrum-gray-300", "--spectrum-line-height-100", @@ -99,16 +72,7 @@ "--spectrum-spacing-300", "--spectrum-spacing-400" ], - "passthroughs": [ - "--mod-button-border-radius", - "--mod-illustrated-message-description-font-size", - "--mod-illustrated-message-description-position", - "--mod-illustrated-message-description-to-action", - "--mod-illustrated-message-description-z-index", - "--mod-illustrated-message-display", - "--mod-illustrated-message-illustration-color", - "--mod-illustrated-message-vertical-maximum-width" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-drop-zone-border-color", "--highcontrast-drop-zone-border-color-hover", diff --git a/components/dropzone/index.css b/components/dropzone/index.css index b495fc596e1..aac2fafe3f9 100644 --- a/components/dropzone/index.css +++ b/components/dropzone/index.css @@ -12,6 +12,9 @@ */ .spectrum-DropZone { + /** default light colors */ + --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); /* var(--spectrum-accent-color-900); */ + /* Sizing */ --spectrum-drop-zone-padding: var(--spectrum-spacing-400); --spectrum-drop-zone-border-width: var(--spectrum-border-width-200); @@ -53,6 +56,12 @@ --mod-drop-zone-content-height: 280px; } +@media (prefers-color-scheme: dark) { + .spectrum-DropZone { + --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900); */ + } +} + .spectrum-DropZone { display: flex; justify-content: center; diff --git a/components/fieldgroup/dist/metadata.json b/components/fieldgroup/dist/metadata.json index 3c2343b1019..dafd2eecd45 100644 --- a/components/fieldgroup/dist/metadata.json +++ b/components/fieldgroup/dist/metadata.json @@ -10,7 +10,6 @@ ".spectrum-FieldGroup--vertical .spectrum-FieldGroupInputLayout", ".spectrum-FieldGroupInputLayout" ], - "modifiers": [], "component": [], "global": ["--spectrum-spacing-300"], "passthroughs": [], diff --git a/components/fieldlabel/dist/metadata.json b/components/fieldlabel/dist/metadata.json index 2a55dbd82f4..dabbe2c6536 100644 --- a/components/fieldlabel/dist/metadata.json +++ b/components/fieldlabel/dist/metadata.json @@ -15,29 +15,7 @@ ".spectrum-FieldLabel:lang(ko)", ".spectrum-FieldLabel:lang(zh)" ], - "modifiers": [ - "--mod-fieldlabel-asterisk-vertical-align", - "--mod-fieldlabel-bottom-to-text", - "--mod-fieldlabel-font-size", - "--mod-fieldlabel-font-weight", - "--mod-fieldlabel-line-height", - "--mod-fieldlabel-line-height-cjk", - "--mod-fieldlabel-min-height", - "--mod-fieldlabel-padding-inline", - "--mod-fieldlabel-side-margin-block-start", - "--mod-fieldlabel-side-padding-right", - "--mod-fieldlabel-text-to-asterisk", - "--mod-fieldlabel-top-to-text" - ], "component": [ - "--spectrum-field-label-text-to-asterisk-extra-large", - "--spectrum-field-label-text-to-asterisk-large", - "--spectrum-field-label-text-to-asterisk-medium", - "--spectrum-field-label-text-to-asterisk-small", - "--spectrum-field-label-top-margin-extra-large", - "--spectrum-field-label-top-margin-large", - "--spectrum-field-label-top-margin-medium", - "--spectrum-field-label-top-margin-small", "--spectrum-fieldlabel-bottom-to-text", "--spectrum-fieldlabel-color", "--spectrum-fieldlabel-font-size", @@ -65,6 +43,14 @@ "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", "--spectrum-disabled-content-color", + "--spectrum-field-label-text-to-asterisk-extra-large", + "--spectrum-field-label-text-to-asterisk-large", + "--spectrum-field-label-text-to-asterisk-medium", + "--spectrum-field-label-text-to-asterisk-small", + "--spectrum-field-label-top-margin-extra-large", + "--spectrum-field-label-top-margin-large", + "--spectrum-field-label-top-margin-medium", + "--spectrum-field-label-top-margin-small", "--spectrum-font-size-100", "--spectrum-font-size-200", "--spectrum-font-size-300", diff --git a/components/floatingactionbutton/dist/metadata.json b/components/floatingactionbutton/dist/metadata.json index 0ddd22d190a..98f7a0372dd 100644 --- a/components/floatingactionbutton/dist/metadata.json +++ b/components/floatingactionbutton/dist/metadata.json @@ -13,36 +13,11 @@ ".spectrum-FloatingActionButton:hover .spectrum-FloatingActionButton-icon", ".spectrum-Icon.spectrum-FloatingActionButton-icon" ], - "modifiers": [ - "--mod-afloating-action-button-focus-ring-color", - "--mod-floating-action-button-background-color", - "--mod-floating-action-button-background-color-down", - "--mod-floating-action-button-background-color-hover", - "--mod-floating-action-button-background-color-key-focus", - "--mod-floating-action-button-border-radius", - "--mod-floating-action-button-drop-shadow-blur", - "--mod-floating-action-button-drop-shadow-color", - "--mod-floating-action-button-drop-shadow-x", - "--mod-floating-action-button-drop-shadow-y", - "--mod-floating-action-button-focus-ring-gap", - "--mod-floating-action-button-focus-ring-width", - "--mod-floating-action-button-icon-color", - "--mod-floating-action-button-icon-color-down", - "--mod-floating-action-button-icon-color-hover", - "--mod-floating-action-button-icon-color-key-focus", - "--mod-floating-action-button-icon-size", - "--mod-floating-action-button-margin", - "--mod-floating-action-button-padding", - "--mod-floating-action-button-size" - ], "component": [ "--spectrum-floating-action-button-background-color", "--spectrum-floating-action-button-background-color-down", "--spectrum-floating-action-button-background-color-hover", "--spectrum-floating-action-button-background-color-key-focus", - "--spectrum-floating-action-button-drop-shadow-blur", - "--spectrum-floating-action-button-drop-shadow-color", - "--spectrum-floating-action-button-drop-shadow-y", "--spectrum-floating-action-button-icon-color", "--spectrum-floating-action-button-icon-color-down", "--spectrum-floating-action-button-icon-color-hover", @@ -61,6 +36,9 @@ "--spectrum-component-height-200", "--spectrum-component-pill-edge-to-visual-only-200", "--spectrum-drop-shadow-x", + "--spectrum-floating-action-button-drop-shadow-blur", + "--spectrum-floating-action-button-drop-shadow-color", + "--spectrum-floating-action-button-drop-shadow-y", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", diff --git a/components/form/dist/metadata.json b/components/form/dist/metadata.json index c07dfdca8d9..5f2910ee9ea 100644 --- a/components/form/dist/metadata.json +++ b/components/form/dist/metadata.json @@ -11,14 +11,6 @@ ".spectrum-Form-itemLabel.is-disabled", ".spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon" ], - "modifiers": [ - "--mod-disabled-content-color", - "--mod-form-grid-template-columns", - "--mod-form-grid-template-columns-labels-above", - "--mod-form-inline-size", - "--mod-form-item-block-spacing", - "--mod-form-item-block-spacing-labels-above" - ], "component": [ "--spectrum-form-grid-template-columns", "--spectrum-form-grid-template-columns-labels-above", diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index 4ed0075bb8c..56046eb11eb 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -20,23 +20,6 @@ ".spectrum-HelpText:lang(ko)", ".spectrum-HelpText:lang(zh)" ], - "modifiers": [ - "--mod-helptext-bottom-edge-to-workflow-icon", - "--mod-helptext-bottom-to-text", - "--mod-helptext-content-color-default", - "--mod-helptext-font-family", - "--mod-helptext-font-size", - "--mod-helptext-font-style", - "--mod-helptext-font-weight", - "--mod-helptext-icon-color-default", - "--mod-helptext-icon-size", - "--mod-helptext-line-height", - "--mod-helptext-line-height-cjk", - "--mod-helptext-min-height", - "--mod-helptext-text-to-visual", - "--mod-helptext-top-edge-to-workflow-icon", - "--mod-helptext-top-to-text" - ], "component": [ "--spectrum-helptext-bottom-to-text", "--spectrum-helptext-content-color-default", diff --git a/components/icon/dist/metadata.json b/components/icon/dist/metadata.json index 7fcad33c95b..51845d66471 100644 --- a/components/icon/dist/metadata.json +++ b/components/icon/dist/metadata.json @@ -114,12 +114,6 @@ ".spectrum-UIIcon-LinkOut400", ".spectrum-UIIcon-LinkOut75" ], - "modifiers": [ - "--mod-icon-block-size", - "--mod-icon-color", - "--mod-icon-inline-size", - "--mod-icon-size" - ], "component": [ "--spectrum-icon-block-size", "--spectrum-icon-inline-size", diff --git a/components/illustratedmessage/dist/metadata.json b/components/illustratedmessage/dist/metadata.json index 12705f6822e..8f64622fb02 100644 --- a/components/illustratedmessage/dist/metadata.json +++ b/components/illustratedmessage/dist/metadata.json @@ -21,34 +21,6 @@ ".spectrum-IllustratedMessage:lang(ko)", ".spectrum-IllustratedMessage:lang(zh)" ], - "modifiers": [ - "--mod-illustrated-message-description-color", - "--mod-illustrated-message-description-font-family", - "--mod-illustrated-message-description-font-size", - "--mod-illustrated-message-description-font-style", - "--mod-illustrated-message-description-font-weight", - "--mod-illustrated-message-description-line-height", - "--mod-illustrated-message-description-pointer-events", - "--mod-illustrated-message-description-position", - "--mod-illustrated-message-description-to-action", - "--mod-illustrated-message-description-z-index", - "--mod-illustrated-message-display", - "--mod-illustrated-message-heading-to-description", - "--mod-illustrated-message-horizontal-maximum-width", - "--mod-illustrated-message-illustrated-inline-size", - "--mod-illustrated-message-illustration-block-size", - "--mod-illustrated-message-illustration-color", - "--mod-illustrated-message-illustration-size", - "--mod-illustrated-message-illustration-to-heading", - "--mod-illustrated-message-pointer-events", - "--mod-illustrated-message-title-color", - "--mod-illustrated-message-title-font-family", - "--mod-illustrated-message-title-font-size", - "--mod-illustrated-message-title-font-style", - "--mod-illustrated-message-title-font-weight", - "--mod-illustrated-message-title-line-height", - "--mod-illustrated-message-vertical-maximum-width" - ], "component": [ "--spectrum-illustrated-message-description-color", "--spectrum-illustrated-message-description-font-family", @@ -58,33 +30,33 @@ "--spectrum-illustrated-message-description-line-height", "--spectrum-illustrated-message-description-to-action", "--spectrum-illustrated-message-heading-to-description", - "--spectrum-illustrated-message-horizontal-maximum-width", "--spectrum-illustrated-message-illustration-color", "--spectrum-illustrated-message-illustration-size", "--spectrum-illustrated-message-illustration-to-content", "--spectrum-illustrated-message-illustration-to-heading", - "--spectrum-illustrated-message-large-body-font-size", - "--spectrum-illustrated-message-large-cjk-title-font-size", - "--spectrum-illustrated-message-large-title-font-size", - "--spectrum-illustrated-message-medium-body-font-size", - "--spectrum-illustrated-message-medium-cjk-title-font-size", - "--spectrum-illustrated-message-medium-title-font-size", - "--spectrum-illustrated-message-small-body-font-size", - "--spectrum-illustrated-message-small-cjk-title-font-size", - "--spectrum-illustrated-message-small-title-font-size", "--spectrum-illustrated-message-title-color", "--spectrum-illustrated-message-title-font-family", "--spectrum-illustrated-message-title-font-size", "--spectrum-illustrated-message-title-font-style", "--spectrum-illustrated-message-title-font-weight", - "--spectrum-illustrated-message-title-line-height", - "--spectrum-illustrated-message-vertical-maximum-width" + "--spectrum-illustrated-message-title-line-height" ], "global": [ "--spectrum-body-color", "--spectrum-body-sans-serif-font-style", "--spectrum-body-sans-serif-font-weight", "--spectrum-heading-color", + "--spectrum-illustrated-message-horizontal-maximum-width", + "--spectrum-illustrated-message-large-body-font-size", + "--spectrum-illustrated-message-large-cjk-title-font-size", + "--spectrum-illustrated-message-large-title-font-size", + "--spectrum-illustrated-message-medium-body-font-size", + "--spectrum-illustrated-message-medium-cjk-title-font-size", + "--spectrum-illustrated-message-medium-title-font-size", + "--spectrum-illustrated-message-small-body-font-size", + "--spectrum-illustrated-message-small-cjk-title-font-size", + "--spectrum-illustrated-message-small-title-font-size", + "--spectrum-illustrated-message-vertical-maximum-width", "--spectrum-line-height-200", "--spectrum-neutral-content-color-default", "--spectrum-sans-font-family-stack", @@ -96,6 +68,6 @@ "--spectrum-title-sans-serif-font-style", "--spectrum-title-sans-serif-font-weight" ], - "passthroughs": ["--mod-buttongroup-justify-content"], + "passthroughs": [], "high-contrast": ["--highcontrast-illustrated-message-illustration-color"] } diff --git a/components/infieldbutton/dist/metadata.json b/components/infieldbutton/dist/metadata.json index 98a823a73c7..aaad18d73de 100644 --- a/components/infieldbutton/dist/metadata.json +++ b/components/infieldbutton/dist/metadata.json @@ -25,41 +25,7 @@ ".spectrum-InfieldButton:not(:disabled):focus-visible", ".spectrum-InfieldButton:not(:disabled):hover" ], - "modifiers": [ - "--mod-infield-button-background-color", - "--mod-infield-button-background-color-disabled", - "--mod-infield-button-background-color-down", - "--mod-infield-button-background-color-down-disabled", - "--mod-infield-button-background-color-down-quiet", - "--mod-infield-button-background-color-hover", - "--mod-infield-button-background-color-hover-disabled", - "--mod-infield-button-background-color-hover-quiet", - "--mod-infield-button-background-color-quiet", - "--mod-infield-button-background-color-quiet-disabled", - "--mod-infield-button-border-radius", - "--mod-infield-button-edge-to-fill", - "--mod-infield-button-field-edge-to-icon", - "--mod-infield-button-fill-justify-content", - "--mod-infield-button-fill-padding", - "--mod-infield-button-height", - "--mod-infield-button-icon-color", - "--mod-infield-button-icon-color-disabled", - "--mod-infield-button-icon-color-down", - "--mod-infield-button-icon-color-down-disabled", - "--mod-infield-button-icon-color-hover", - "--mod-infield-button-icon-color-hover-disabled", - "--mod-infield-button-side-edge-to-fill", - "--mod-infield-button-width" - ], "component": [ - "--spectrum-in-field-button-edge-to-fill-extra-large", - "--spectrum-in-field-button-edge-to-fill-large", - "--spectrum-in-field-button-edge-to-fill-medium", - "--spectrum-in-field-button-edge-to-fill-small", - "--spectrum-in-field-button-side-edge-to-fill-extra-large", - "--spectrum-in-field-button-side-edge-to-fill-large", - "--spectrum-in-field-button-side-edge-to-fill-medium", - "--spectrum-in-field-button-side-edge-to-fill-small", "--spectrum-infield-button-background-color", "--spectrum-infield-button-background-color-down", "--spectrum-infield-button-background-color-hover", @@ -104,6 +70,12 @@ "--spectrum-field-edge-to-icon-75", "--spectrum-gray-100", "--spectrum-gray-200", + "--spectrum-in-field-button-edge-to-fill-extra-large", + "--spectrum-in-field-button-edge-to-fill-large", + "--spectrum-in-field-button-edge-to-fill-medium", + "--spectrum-in-field-button-edge-to-fill-small", + "--spectrum-in-field-button-side-edge-to-fill-medium", + "--spectrum-in-field-button-side-edge-to-fill-small", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover" diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css index a1e54ecb1de..a8d340fc642 100644 --- a/components/infieldbutton/index.css +++ b/components/infieldbutton/index.css @@ -64,7 +64,7 @@ --spectrum-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill-large); --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-small-size-large); --spectrum-infield-button-field-edge-to-disclosure-icon: var(--spectrum-field-edge-to-disclosure-icon-200); - --spectrum-infield-button-inline-edge-to-fill: var(--spectrum-in-field-button-side-edge-to-fill-large); + --spectrum-infield-button-inline-edge-to-fill: 4px; --spectrum-infield-button-inline-field-edge-to-icon: var(--spectrum-field-edge-to-icon-200); } @@ -74,7 +74,7 @@ --spectrum-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill-extra-large); --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-small-size-extra-large); --spectrum-infield-button-field-edge-to-disclosure-icon: var(--spectrum-field-edge-to-disclosure-icon-300); - --spectrum-infield-button-inline-edge-to-fill: var(--spectrum-in-field-button-side-edge-to-fill-extra-large); + --spectrum-infield-button-inline-edge-to-fill: 4px; --spectrum-infield-button-inline-field-edge-to-icon: var(--spectrum-field-edge-to-icon-300); } diff --git a/components/infieldprogresscircle/dist/metadata.json b/components/infieldprogresscircle/dist/metadata.json index ffc95f11390..b0625574184 100644 --- a/components/infieldprogresscircle/dist/metadata.json +++ b/components/infieldprogresscircle/dist/metadata.json @@ -7,19 +7,15 @@ ".spectrum-InfieldProgressCircle--sizeS", ".spectrum-InfieldProgressCircle--sizeXL" ], - "modifiers": [], - "component": [ + "component": ["--spectrum-infieldprogresscircle-padding-block"], + "global": [ "--spectrum-in-field-progress-circle-edge-to-fill", "--spectrum-in-field-progress-circle-size-100", "--spectrum-in-field-progress-circle-size-200", "--spectrum-in-field-progress-circle-size-300", "--spectrum-in-field-progress-circle-size-75", - "--spectrum-infieldprogresscircle-padding-block" - ], - "global": ["--spectrum-progress-circle-thickness-small"], - "passthroughs": [ - "--mod-progress-circle-size", - "--mod-progress-circle-thickness" + "--spectrum-progress-circle-thickness-small" ], + "passthroughs": [], "high-contrast": [] } diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json index 81ebe4df638..4cae7b72abc 100644 --- a/components/inlinealert/dist/metadata.json +++ b/components/inlinealert/dist/metadata.json @@ -26,33 +26,7 @@ ".spectrum-InLineAlert.spectrum-InLineAlert--positive.spectrum-InLineAlert--subtle", ".spectrum-InLineAlert.spectrum-InLineAlert--subtle" ], - "modifiers": [ - "--mod-inlinealert-background-color", - "--mod-inlinealert-border-and-icon-color", - "--mod-inlinealert-border-radius", - "--mod-inlinealert-border-width", - "--mod-inlinealert-content-color", - "--mod-inlinealert-content-font-family", - "--mod-inlinealert-content-font-size", - "--mod-inlinealert-content-font-style", - "--mod-inlinealert-content-font-weight", - "--mod-inlinealert-content-line-height", - "--mod-inlinealert-header-color", - "--mod-inlinealert-header-min-block-size", - "--mod-inlinealert-heading-font-family", - "--mod-inlinealert-heading-font-size", - "--mod-inlinealert-heading-font-style", - "--mod-inlinealert-heading-font-weight", - "--mod-inlinealert-heading-line-height", - "--mod-inlinealert-icon-size", - "--mod-inlinealert-min-inline-size", - "--mod-inlinealert-min-spacing-header-to-icon", - "--mod-inlinealert-spacing-content-link-button", - "--mod-inlinealert-spacing-edge-to-text", - "--mod-inlinealert-spacing-header-content" - ], "component": [ - "--spectrum-in-line-alert-minimum-width", "--spectrum-inlinealert-background-color", "--spectrum-inlinealert-border-and-icon-color", "--spectrum-inlinealert-border-radius", @@ -93,6 +67,7 @@ "--spectrum-heading-sans-serif-font-style", "--spectrum-heading-sans-serif-font-weight", "--spectrum-heading-size-xxs", + "--spectrum-in-line-alert-minimum-width", "--spectrum-informative-background-color-default", "--spectrum-informative-subtle-background-color-default", "--spectrum-informative-visual-color", diff --git a/components/link/dist/metadata.json b/components/link/dist/metadata.json index 9c83915a752..d642676d095 100644 --- a/components/link/dist/metadata.json +++ b/components/link/dist/metadata.json @@ -15,21 +15,6 @@ ".spectrum-Link:lang(ko)", ".spectrum-Link:lang(zh)" ], - "modifiers": [ - "--mod-link-animation-duration", - "--mod-link-inline-font-weight", - "--mod-link-line-height-cjk", - "--mod-link-text-color", - "--mod-link-text-color-active", - "--mod-link-text-color-black", - "--mod-link-text-color-focus", - "--mod-link-text-color-hover", - "--mod-link-text-color-secondary-active", - "--mod-link-text-color-secondary-default", - "--mod-link-text-color-secondary-focus", - "--mod-link-text-color-secondary-hover", - "--mod-link-text-color-white" - ], "component": [ "--spectrum-link-corner-radius", "--spectrum-link-default-font-family", diff --git a/components/logicbutton/dist/metadata.json b/components/logicbutton/dist/metadata.json index 195d8c87082..79e74b541c9 100644 --- a/components/logicbutton/dist/metadata.json +++ b/components/logicbutton/dist/metadata.json @@ -14,38 +14,6 @@ ".spectrum-LogicButton:focus-visible", ".spectrum-LogicButton:focus-visible:after" ], - "modifiers": [ - "--mod-focus-indicator-gap", - "--mod-logic-button-and-background-color", - "--mod-logic-button-and-background-color-disabled", - "--mod-logic-button-and-background-color-hover", - "--mod-logic-button-and-background-color-hover-disabled", - "--mod-logic-button-and-border-color", - "--mod-logic-button-and-border-color-disabled", - "--mod-logic-button-and-border-color-hover", - "--mod-logic-button-and-border-color-hover-disabled", - "--mod-logic-button-and-text-color", - "--mod-logic-button-and-text-color-disabled", - "--mod-logic-button-border-radius", - "--mod-logic-button-border-width", - "--mod-logic-button-focus-indicator-color", - "--mod-logic-button-focus-indicator-gap", - "--mod-logic-button-focus-indicator-width", - "--mod-logic-button-font-size", - "--mod-logic-button-font-weight", - "--mod-logic-button-height", - "--mod-logic-button-or-background-color", - "--mod-logic-button-or-background-color-disabled", - "--mod-logic-button-or-background-color-hover", - "--mod-logic-button-or-background-color-hover-disabled", - "--mod-logic-button-or-border-color", - "--mod-logic-button-or-border-color-disabled", - "--mod-logic-button-or-border-color-hover", - "--mod-logic-button-or-border-color-hover-disabled", - "--mod-logic-button-or-text-color", - "--mod-logic-button-or-text-color-disabled", - "--mod-logic-button-padding" - ], "component": [ "--spectrum-logic-button-and-background-color", "--spectrum-logic-button-and-background-color-disabled", @@ -70,7 +38,10 @@ ], "global": [ "--spectrum-animation-duration-100", + "--spectrum-blue-1000", "--spectrum-blue-1100", + "--spectrum-blue-800", + "--spectrum-blue-900", "--spectrum-bold-font-weight", "--spectrum-border-width-200", "--spectrum-component-edge-to-text-50", @@ -82,15 +53,13 @@ "--spectrum-gray-100", "--spectrum-gray-500", "--spectrum-line-height-100", + "--spectrum-magenta-1100", + "--spectrum-magenta-700", + "--spectrum-magenta-900", "--spectrum-sans-font-family-stack", "--spectrum-white" ], - "passthroughs": [ - "--mod-button-animation-duration", - "--mod-button-focus-indicator-gap", - "--mod-button-font-family", - "--mod-button-line-height" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-logic-button-and-background-color", "--highcontrast-logic-button-and-background-color-hover", diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css index 9c61d275d30..59f75ae9978 100644 --- a/components/logicbutton/index.css +++ b/components/logicbutton/index.css @@ -14,6 +14,16 @@ @import "@spectrum-css/commons/basebutton.css"; .spectrum-LogicButton { + /** default light colors */ + --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); + --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); + --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); + --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-1100); + --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); + --spectrum-logic-button-and-background-color-disabled: var(--spectrum-gray-100); --spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-100); --spectrum-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-100); @@ -76,6 +86,19 @@ } } +@media (prefers-color-scheme: dark) { + .spectrum-LogicButton { + --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); + --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); + } +} + .spectrum-LogicButton--and { background-color: var(--highcontrast-logic-button-and-background-color, var(--mod-logic-button-and-background-color, var(--spectrum-logic-button-and-background-color))); border-color: var(--highcontrast-logic-button-and-border-color, var(--mod-logic-button-and-border-color, var(--spectrum-logic-button-and-border-color))); diff --git a/components/menu/dist/metadata.json b/components/menu/dist/metadata.json index 3693f34c5dc..ee3372b523d 100644 --- a/components/menu/dist/metadata.json +++ b/components/menu/dist/metadata.json @@ -149,99 +149,6 @@ ".spectrum-Menu:lang(ko)", ".spectrum-Menu:lang(zh)" ], - "modifiers": [ - "--mod-menu-back-heading-color", - "--mod-menu-back-icon-color-default", - "--mod-menu-back-icon-margin-block", - "--mod-menu-back-icon-margin-inline", - "--mod-menu-back-padding-block-end", - "--mod-menu-back-padding-block-start", - "--mod-menu-back-padding-inline-end", - "--mod-menu-back-padding-inline-start", - "--mod-menu-checkmark-display", - "--mod-menu-checkmark-icon-color-default", - "--mod-menu-checkmark-icon-color-down", - "--mod-menu-checkmark-icon-color-focus", - "--mod-menu-checkmark-icon-color-hover", - "--mod-menu-collapsible-icon-color", - "--mod-menu-drillin-icon-color-default", - "--mod-menu-drillin-icon-color-down", - "--mod-menu-drillin-icon-color-focus", - "--mod-menu-drillin-icon-color-hover", - "--mod-menu-inline-size", - "--mod-menu-item-background-color-default", - "--mod-menu-item-background-color-down", - "--mod-menu-item-background-color-hover", - "--mod-menu-item-background-color-key-focus", - "--mod-menu-item-bottom-edge-to-text", - "--mod-menu-item-checkmark-height", - "--mod-menu-item-checkmark-width", - "--mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start", - "--mod-menu-item-corner-radius", - "--mod-menu-item-description-color-default", - "--mod-menu-item-description-color-disabled", - "--mod-menu-item-description-color-down", - "--mod-menu-item-description-color-focus", - "--mod-menu-item-description-color-hover", - "--mod-menu-item-description-font-size", - "--mod-menu-item-description-line-height", - "--mod-menu-item-description-line-height-cjk", - "--mod-menu-item-focus-indicator-color", - "--mod-menu-item-focus-indicator-width", - "--mod-menu-item-icon-height", - "--mod-menu-item-icon-width", - "--mod-menu-item-label-content-color-default", - "--mod-menu-item-label-content-color-disabled", - "--mod-menu-item-label-content-color-down", - "--mod-menu-item-label-content-color-focus", - "--mod-menu-item-label-content-color-hover", - "--mod-menu-item-label-font-size", - "--mod-menu-item-label-icon-color-default", - "--mod-menu-item-label-icon-color-disabled", - "--mod-menu-item-label-icon-color-down", - "--mod-menu-item-label-icon-color-focus", - "--mod-menu-item-label-icon-color-hover", - "--mod-menu-item-label-inline-edge-to-content", - "--mod-menu-item-label-line-height", - "--mod-menu-item-label-line-height-cjk", - "--mod-menu-item-label-text-to-visual", - "--mod-menu-item-label-to-description-spacing", - "--mod-menu-item-label-to-value-area-min-spacing", - "--mod-menu-item-linkout-icon-height", - "--mod-menu-item-linkout-icon-width", - "--mod-menu-item-min-height", - "--mod-menu-item-selectable-edge-to-text-not-selected", - "--mod-menu-item-text-to-control", - "--mod-menu-item-thumbnail-height", - "--mod-menu-item-thumbnail-opacity-disabled", - "--mod-menu-item-thumbnail-to-label", - "--mod-menu-item-thumbnail-width", - "--mod-menu-item-top-edge-to-text", - "--mod-menu-item-top-to-action", - "--mod-menu-item-top-to-checkbox", - "--mod-menu-item-top-to-checkmark", - "--mod-menu-item-top-to-thumbnail", - "--mod-menu-item-top-to-workflow-icon", - "--mod-menu-item-value-color-default", - "--mod-menu-item-value-color-down", - "--mod-menu-item-value-color-focus", - "--mod-menu-item-value-color-hover", - "--mod-menu-section-description-color", - "--mod-menu-section-description-font-size", - "--mod-menu-section-description-font-weight", - "--mod-menu-section-description-line-height", - "--mod-menu-section-description-line-height-cjk", - "--mod-menu-section-divider-margin-block", - "--mod-menu-section-header-bottom-edge-to-text", - "--mod-menu-section-header-color", - "--mod-menu-section-header-font-size", - "--mod-menu-section-header-font-weight", - "--mod-menu-section-header-line-height", - "--mod-menu-section-header-line-height-cjk", - "--mod-menu-section-header-min-width", - "--mod-menu-section-header-to-description", - "--mod-menu-section-header-top-edge-to-text" - ], "component": [ "--spectrum-menu-back-icon-margin", "--spectrum-menu-checkmark-display", @@ -258,9 +165,6 @@ "--spectrum-menu-drillin-icon-color-focus", "--spectrum-menu-drillin-icon-color-hover", "--spectrum-menu-item-background-color-default", - "--spectrum-menu-item-background-color-down", - "--spectrum-menu-item-background-color-hover", - "--spectrum-menu-item-background-color-keyboard-focus", "--spectrum-menu-item-bottom-edge-to-text", "--spectrum-menu-item-checkmark-height", "--spectrum-menu-item-checkmark-width", @@ -300,20 +204,11 @@ "--spectrum-menu-item-label-line-height-cjk", "--spectrum-menu-item-label-text-to-visual", "--spectrum-menu-item-label-to-description", - "--spectrum-menu-item-label-to-description-extra-large", - "--spectrum-menu-item-label-to-description-large", - "--spectrum-menu-item-label-to-description-medium", - "--spectrum-menu-item-label-to-description-small", "--spectrum-menu-item-label-to-value-area-min-spacing", "--spectrum-menu-item-linkout-icon-height", "--spectrum-menu-item-linkout-icon-width", "--spectrum-menu-item-min-height", - "--spectrum-menu-item-section-divider-height", "--spectrum-menu-item-selectable-edge-to-text-not-selected", - "--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large", - "--spectrum-menu-item-selectable-edge-to-text-not-selected-large", - "--spectrum-menu-item-selectable-edge-to-text-not-selected-medium", - "--spectrum-menu-item-selectable-edge-to-text-not-selected-small", "--spectrum-menu-item-text-to-control", "--spectrum-menu-item-thumbnail-height", "--spectrum-menu-item-thumbnail-opacity-disabled", @@ -323,15 +218,7 @@ "--spectrum-menu-item-top-to-action", "--spectrum-menu-item-top-to-checkbox", "--spectrum-menu-item-top-to-checkmark", - "--spectrum-menu-item-top-to-selected-icon-extra-large", - "--spectrum-menu-item-top-to-selected-icon-large", - "--spectrum-menu-item-top-to-selected-icon-medium", - "--spectrum-menu-item-top-to-selected-icon-small", "--spectrum-menu-item-top-to-thumbnail", - "--spectrum-menu-item-top-to-thumbnail-extra-large", - "--spectrum-menu-item-top-to-thumbnail-large", - "--spectrum-menu-item-top-to-thumbnail-medium", - "--spectrum-menu-item-top-to-thumbnail-small", "--spectrum-menu-item-top-to-workflow-icon", "--spectrum-menu-item-value-color-default", "--spectrum-menu-item-value-color-down", @@ -348,11 +235,7 @@ "--spectrum-menu-section-header-line-height", "--spectrum-menu-section-header-line-height-cjk", "--spectrum-menu-section-header-min-width", - "--spectrum-menu-section-header-to-description", - "--spectrum-menu-section-header-to-description-extra-large", - "--spectrum-menu-section-header-to-description-large", - "--spectrum-menu-section-header-to-description-medium", - "--spectrum-menu-section-header-to-description-small" + "--spectrum-menu-section-header-to-description" ], "global": [ "--spectrum-accent-color-1000", @@ -412,6 +295,30 @@ "--spectrum-link-out-icon-size-100", "--spectrum-link-out-icon-size-200", "--spectrum-link-out-icon-size-75", + "--spectrum-menu-item-background-color-down", + "--spectrum-menu-item-background-color-hover", + "--spectrum-menu-item-background-color-keyboard-focus", + "--spectrum-menu-item-label-to-description-extra-large", + "--spectrum-menu-item-label-to-description-large", + "--spectrum-menu-item-label-to-description-medium", + "--spectrum-menu-item-label-to-description-small", + "--spectrum-menu-item-section-divider-height", + "--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large", + "--spectrum-menu-item-selectable-edge-to-text-not-selected-large", + "--spectrum-menu-item-selectable-edge-to-text-not-selected-medium", + "--spectrum-menu-item-selectable-edge-to-text-not-selected-small", + "--spectrum-menu-item-top-to-selected-icon-extra-large", + "--spectrum-menu-item-top-to-selected-icon-large", + "--spectrum-menu-item-top-to-selected-icon-medium", + "--spectrum-menu-item-top-to-selected-icon-small", + "--spectrum-menu-item-top-to-thumbnail-extra-large", + "--spectrum-menu-item-top-to-thumbnail-large", + "--spectrum-menu-item-top-to-thumbnail-medium", + "--spectrum-menu-item-top-to-thumbnail-small", + "--spectrum-menu-section-header-to-description-extra-large", + "--spectrum-menu-section-header-to-description-large", + "--spectrum-menu-section-header-to-description-medium", + "--spectrum-menu-section-header-to-description-small", "--spectrum-navigational-indicator-top-to-back-icon-extra-large", "--spectrum-navigational-indicator-top-to-back-icon-large", "--spectrum-navigational-indicator-top-to-back-icon-medium", @@ -446,14 +353,15 @@ "--spectrum-workflow-icon-size-75" ], "passthroughs": [ - "--mod-checkbox-text-to-control", - "--mod-checkbox-top-to-text", - "--mod-switch-control-label-spacing", - "--mod-switch-spacing-top-to-label" - ], - "high-contrast": [ "--highcontrast-checkbox-highlight-color-default", "--highcontrast-checkbox-highlight-color-hover", + "--highcontrast-switch-background-color-selected-default", + "--highcontrast-switch-background-color-selected-hover", + "--highcontrast-switch-handle-border-color-hover", + "--highcontrast-switch-handle-border-color-selected-default", + "--highcontrast-switch-handle-border-color-selected-hover" + ], + "high-contrast": [ "--highcontrast-menu-checkmark-icon-color-default", "--highcontrast-menu-item-background-color-default", "--highcontrast-menu-item-background-color-focus", @@ -462,11 +370,6 @@ "--highcontrast-menu-item-color-focus", "--highcontrast-menu-item-focus-indicator-color", "--highcontrast-menu-item-selected-background-color", - "--highcontrast-menu-item-selected-color", - "--highcontrast-switch-background-color-selected-default", - "--highcontrast-switch-background-color-selected-hover", - "--highcontrast-switch-handle-border-color-hover", - "--highcontrast-switch-handle-border-color-selected-default", - "--highcontrast-switch-handle-border-color-selected-hover" + "--highcontrast-menu-item-selected-color" ] } diff --git a/components/meter/dist/metadata.json b/components/meter/dist/metadata.json index 53ce94ace9a..c0dbd86d677 100644 --- a/components/meter/dist/metadata.json +++ b/components/meter/dist/metadata.json @@ -10,31 +10,19 @@ ".spectrum-Meter.spectrum-Meter--sizeS", ".spectrum-Meter.spectrum-Meter--sizeXL" ], - "modifiers": [ - "--mod-meter-help-text-to-progress-bar", - "--mod-meter-max-width", - "--mod-meter-min-width" - ], - "component": [ - "--spectrum-meter-help-text-to-progress-bar", + "component": ["--spectrum-meter-help-text-to-progress-bar"], + "global": [ "--spectrum-meter-maximum-width", "--spectrum-meter-minimum-width", "--spectrum-meter-thickness-extra-large", "--spectrum-meter-thickness-large", "--spectrum-meter-thickness-medium", - "--spectrum-meter-thickness-small" - ], - "global": [ + "--spectrum-meter-thickness-small", "--spectrum-negative-visual-color", "--spectrum-notice-visual-color", "--spectrum-positive-visual-color", "--spectrum-spacing-75" ], - "passthroughs": [ - "--mod-progressbar-fill-color", - "--mod-progressbar-max-size", - "--mod-progressbar-min-size", - "--mod-progressbar-thickness" - ], + "passthroughs": [], "high-contrast": [] } diff --git a/components/miller/dist/metadata.json b/components/miller/dist/metadata.json index fbb3770d558..b4fdb6226bc 100644 --- a/components/miller/dist/metadata.json +++ b/components/miller/dist/metadata.json @@ -5,12 +5,6 @@ ".spectrum-MillerColumns-item", ".spectrum-MillerColumns-item:first-child" ], - "modifiers": [ - "--mod-millercolumns-inline-size", - "--mod-millercolumns-margin-inline-end", - "--mod-millercolumns-margin-inline-start", - "--mod-millercolumns-padding" - ], "component": [], "global": ["--spectrum-spacing-100"], "passthroughs": [], diff --git a/components/modal/dist/metadata.json b/components/modal/dist/metadata.json index c27c44872d7..cdf5978f2aa 100644 --- a/components/modal/dist/metadata.json +++ b/components/modal/dist/metadata.json @@ -11,18 +11,6 @@ ".spectrum-Modal-wrapper.is-open", ".spectrum-Modal.is-open" ], - "modifiers": [ - "--mod-modal-background-color", - "--mod-modal-confirm-border-radius", - "--mod-modal-confirm-entry-animation-delay", - "--mod-modal-confirm-entry-animation-duration", - "--mod-modal-confirm-exit-animation-delay", - "--mod-modal-confirm-exit-animation-duration", - "--mod-modal-fullscreen-margin", - "--mod-modal-max-height", - "--mod-modal-max-width", - "--mod-modal-transition-animation-duration" - ], "component": [ "--spectrum-modal-background-color", "--spectrum-modal-confirm-border-radius", diff --git a/components/opacitycheckerboard/dist/metadata.json b/components/opacitycheckerboard/dist/metadata.json index 31fd76317b9..eb2eb9c0aa7 100644 --- a/components/opacitycheckerboard/dist/metadata.json +++ b/components/opacitycheckerboard/dist/metadata.json @@ -4,23 +4,18 @@ ".spectrum-OpacityCheckerboard", ".spectrum-OpacityCheckerboard--sizeS" ], - "modifiers": [ - "--mod-opacity-checkerboard-dark", - "--mod-opacity-checkerboard-light", - "--mod-opacity-checkerboard-position", - "--mod-opacity-checkerboard-size" - ], "component": [ "--spectrum-opacity-checkerboard-dark", "--spectrum-opacity-checkerboard-light", "--spectrum-opacity-checkerboard-position", - "--spectrum-opacity-checkerboard-size", + "--spectrum-opacity-checkerboard-size" + ], + "global": [ "--spectrum-opacity-checkerboard-square-dark", "--spectrum-opacity-checkerboard-square-light", "--spectrum-opacity-checkerboard-square-size-medium", "--spectrum-opacity-checkerboard-square-size-small" ], - "global": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/page/dist/metadata.json b/components/page/dist/metadata.json index 4e3ac035552..2d7d3fe8f65 100644 --- a/components/page/dist/metadata.json +++ b/components/page/dist/metadata.json @@ -1,7 +1,6 @@ { "sourceFile": "index.css", "selectors": [":root"], - "modifiers": ["--mod-page-background", "--mod-page-content-tap-highlight"], "component": [ "--spectrum-page-background-color", "--spectrum-page-content-tap-highlight" diff --git a/components/pagination/dist/metadata.json b/components/pagination/dist/metadata.json index 6c52ad62e8c..fb0db3ac338 100644 --- a/components/pagination/dist/metadata.json +++ b/components/pagination/dist/metadata.json @@ -12,27 +12,20 @@ ".spectrum-Pagination-textfield", ".spectrum-Pagination:dir(rtl)" ], - "modifiers": [ - "--mod-pagination-counter-color", - "--mod-pagination-counter-font-size", - "--mod-pagination-counter-line-height", - "--mod-pagination-page-button-inline-spacing", - "--mod-pagination-textfield-width" - ], "component": [ "--spectrum-pagination-counter-color", "--spectrum-pagination-counter-font-size", "--spectrum-pagination-counter-inline-spacing", - "--spectrum-pagination-counter-line-height", - "--spectrum-pagination-item-inline-spacing", - "--spectrum-pagination-textfield-width" + "--spectrum-pagination-counter-line-height" ], "global": [ "--spectrum-font-size-100", "--spectrum-line-height-100", "--spectrum-logical-rotation", - "--spectrum-neutral-subdued-content-color-default" + "--spectrum-neutral-subdued-content-color-default", + "--spectrum-pagination-item-inline-spacing", + "--spectrum-pagination-textfield-width" ], - "passthroughs": ["--mod-textfield-min-width", "--mod-textfield-width"], + "passthroughs": [], "high-contrast": [] } diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index 9138a452800..26974cf3751 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -63,67 +63,6 @@ ".spectrum-Picker:lang(ko) .spectrum-Picker-label", ".spectrum-Picker:lang(zh) .spectrum-Picker-label" ], - "modifiers": [ - "--mod-picker-animation-duration", - "--mod-picker-background-color-active", - "--mod-picker-background-color-default", - "--mod-picker-background-color-default-open", - "--mod-picker-background-color-hover", - "--mod-picker-background-color-hover-open", - "--mod-picker-background-color-key-focus", - "--mod-picker-block-size", - "--mod-picker-border-active", - "--mod-picker-border-color-default", - "--mod-picker-border-color-error-active", - "--mod-picker-border-color-error-default", - "--mod-picker-border-color-error-default-open", - "--mod-picker-border-color-error-hover", - "--mod-picker-border-color-error-hover-open", - "--mod-picker-border-color-error-key-focus", - "--mod-picker-border-color-hover", - "--mod-picker-border-color-hover-open", - "--mod-picker-border-color-key-focus", - "--mod-picker-border-default-open", - "--mod-picker-border-radius", - "--mod-picker-border-width", - "--mod-picker-focus-indicator-color", - "--mod-picker-focus-indicator-gap", - "--mod-picker-focus-indicator-thickness", - "--mod-picker-font-color-active", - "--mod-picker-font-color-default", - "--mod-picker-font-color-default-open", - "--mod-picker-font-color-disabled", - "--mod-picker-font-color-hover", - "--mod-picker-font-color-hover-open", - "--mod-picker-font-color-key-focus", - "--mod-picker-font-size", - "--mod-picker-font-weight", - "--mod-picker-icon-color-active", - "--mod-picker-icon-color-default", - "--mod-picker-icon-color-default-open", - "--mod-picker-icon-color-disabled", - "--mod-picker-icon-color-error", - "--mod-picker-icon-color-hover", - "--mod-picker-icon-color-hover-open", - "--mod-picker-icon-color-key-focus", - "--mod-picker-inline-size", - "--mod-picker-line-height", - "--mod-picker-line-height-cjk", - "--mod-picker-min-inline-size", - "--mod-picker-placeholder-font-style", - "--mod-picker-placeholder-font-weight", - "--mod-picker-spacing-bottom-to-text", - "--mod-picker-spacing-edge-to-disclosure-icon", - "--mod-picker-spacing-edge-to-text", - "--mod-picker-spacing-icon-to-disclosure-icon", - "--mod-picker-spacing-label-to-picker", - "--mod-picker-spacing-starting-icon-to-text", - "--mod-picker-spacing-text-to-icon-inline-end", - "--mod-picker-spacing-top-to-alert-icon", - "--mod-picker-spacing-top-to-disclosure-icon", - "--mod-picker-spacing-top-to-progress-circle", - "--mod-picker-spacing-top-to-text" - ], "component": [ "--spectrum-picker-animation-duration", "--spectrum-picker-background-color-active", @@ -171,7 +110,6 @@ "--spectrum-picker-line-height", "--spectrum-picker-line-height-cjk", "--spectrum-picker-min-inline-size", - "--spectrum-picker-minimum-width-multiplier", "--spectrum-picker-placeholder-font-style", "--spectrum-picker-popover-animation-distance", "--spectrum-picker-spacing-bottom-to-text", @@ -184,11 +122,7 @@ "--spectrum-picker-spacing-top-to-alert-icon", "--spectrum-picker-spacing-top-to-disclosure-icon", "--spectrum-picker-spacing-top-to-progress-circle", - "--spectrum-picker-spacing-top-to-text", - "--spectrum-picker-visual-to-disclosure-icon-extra-large", - "--spectrum-picker-visual-to-disclosure-icon-large", - "--spectrum-picker-visual-to-disclosure-icon-medium", - "--spectrum-picker-visual-to-disclosure-icon-small" + "--spectrum-picker-spacing-top-to-text" ], "global": [ "--spectrum-animation-duration-100", @@ -268,6 +202,11 @@ "--spectrum-neutral-content-color-focus-hover", "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", + "--spectrum-picker-minimum-width-multiplier", + "--spectrum-picker-visual-to-disclosure-icon-extra-large", + "--spectrum-picker-visual-to-disclosure-icon-large", + "--spectrum-picker-visual-to-disclosure-icon-medium", + "--spectrum-picker-visual-to-disclosure-icon-small", "--spectrum-regular-font-weight", "--spectrum-sans-font-family-stack", "--spectrum-text-to-visual-100", @@ -275,12 +214,7 @@ "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-75" ], - "passthroughs": [ - "--mod-button-animation-duration", - "--mod-button-font-family", - "--mod-button-line-height", - "--mod-popover-animation-distance" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-picker-background-color", "--highcontrast-picker-border-color-default", diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json index 4b3d33be65e..0683c954396 100644 --- a/components/pickerbutton/dist/metadata.json +++ b/components/pickerbutton/dist/metadata.json @@ -24,30 +24,6 @@ ".spectrum-PickerButton:not(:disabled):focus-visible", ".spectrum-PickerButton:not(:disabled):hover" ], - "modifiers": [ - "--mod-picker-button-background-animation-duration", - "--mod-picker-button-background-color", - "--mod-picker-button-background-color-disabled", - "--mod-picker-button-background-color-down", - "--mod-picker-button-background-color-down-disabled", - "--mod-picker-button-background-color-down-quiet", - "--mod-picker-button-background-color-hover", - "--mod-picker-button-background-color-hover-disabled", - "--mod-picker-button-background-color-hover-quiet", - "--mod-picker-button-background-color-quiet", - "--mod-picker-button-background-color-quiet-disabled", - "--mod-picker-button-border-radius", - "--mod-picker-button-fill-padding", - "--mod-picker-button-height", - "--mod-picker-button-icon-color", - "--mod-picker-button-icon-color-disabled", - "--mod-picker-button-icon-color-down", - "--mod-picker-button-icon-color-down-disabled", - "--mod-picker-button-icon-color-hover", - "--mod-picker-button-icon-color-hover-disabled", - "--mod-picker-button-padding", - "--mod-picker-button-width" - ], "component": [ "--spectrum-picker-button-background-animation-duration", "--spectrum-picker-button-background-color", diff --git a/components/popover/dist/metadata.json b/components/popover/dist/metadata.json index f78a1db58ae..f729c9da0d5 100644 --- a/components/popover/dist/metadata.json +++ b/components/popover/dist/metadata.json @@ -85,31 +85,11 @@ ".spectrum-Popover.spectrum-Popover--withTip", ".spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle" ], - "modifiers": [ - "--mod-overlay-animation-duration", - "--mod-overlay-animation-duration-opened", - "--mod-popover-animation-distance", - "--mod-popover-background-color", - "--mod-popover-border-color", - "--mod-popover-border-width", - "--mod-popover-box-shadow", - "--mod-popover-content-area-spacing", - "--mod-popover-corner-radius", - "--mod-popover-drop-shadow-blur", - "--mod-popover-drop-shadow-color", - "--mod-popover-drop-shadow-x", - "--mod-popover-drop-shadow-y", - "--mod-popover-filter", - "--mod-popover-pointer-edge-spacing", - "--mod-popover-pointer-height", - "--mod-popover-pointer-width" - ], "component": [ "--spectrum-popover-animation-distance", "--spectrum-popover-background-color", "--spectrum-popover-border-color-rgb", "--spectrum-popover-border-color-with-transparency", - "--spectrum-popover-border-opacity", "--spectrum-popover-border-transparency", "--spectrum-popover-border-width", "--spectrum-popover-box-shadow", @@ -119,14 +99,11 @@ "--spectrum-popover-drop-shadow-color", "--spectrum-popover-drop-shadow-x", "--spectrum-popover-drop-shadow-y", - "--spectrum-popover-edge-to-content-area", "--spectrum-popover-filter", "--spectrum-popover-pointer-edge-offset", "--spectrum-popover-pointer-edge-spacing", "--spectrum-popover-pointer-height", - "--spectrum-popover-pointer-width", - "--spectrum-popover-tip-height", - "--spectrum-popover-tip-width" + "--spectrum-popover-pointer-width" ], "global": [ "--spectrum-animation-duration-0", @@ -139,6 +116,10 @@ "--spectrum-drop-shadow-elevated-x", "--spectrum-drop-shadow-elevated-y", "--spectrum-gray-200-rgb", + "--spectrum-popover-border-opacity", + "--spectrum-popover-edge-to-content-area", + "--spectrum-popover-tip-height", + "--spectrum-popover-tip-width", "--spectrum-spacing-100" ], "passthroughs": [], diff --git a/components/progressbar/dist/metadata.json b/components/progressbar/dist/metadata.json index 3caa917a2a5..38a0d90ebb7 100644 --- a/components/progressbar/dist/metadata.json +++ b/components/progressbar/dist/metadata.json @@ -31,36 +31,7 @@ ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-track", ".spectrum-ProgressBar-track" ], - "modifiers": [ - "--mod-progressbar-animation-duration-indeterminate", - "--mod-progressbar-animation-ease-in-out-indeterminate", - "--mod-progressbar-fill-color", - "--mod-progressbar-fill-color-black", - "--mod-progressbar-fill-color-white", - "--mod-progressbar-fill-size-indeterminate", - "--mod-progressbar-font-size", - "--mod-progressbar-inline-size", - "--mod-progressbar-label-and-value-black", - "--mod-progressbar-label-and-value-white", - "--mod-progressbar-line-height", - "--mod-progressbar-line-height-cjk", - "--mod-progressbar-max-size", - "--mod-progressbar-min-size", - "--mod-progressbar-spacing-label-to-progressbar", - "--mod-progressbar-spacing-label-to-text", - "--mod-progressbar-spacing-top-to-text", - "--mod-progressbar-text-color", - "--mod-progressbar-thickness", - "--mod-progressbar-track-color", - "--mod-spacing-progressbar-label-to-text" - ], "component": [ - "--spectrum-progress-bar-maximum-width", - "--spectrum-progress-bar-minimum-width", - "--spectrum-progress-bar-thickness-extra-large", - "--spectrum-progress-bar-thickness-large", - "--spectrum-progress-bar-thickness-medium", - "--spectrum-progress-bar-thickness-small", "--spectrum-progressbar-animation-duration-indeterminate", "--spectrum-progressbar-animation-ease-in-out-indeterminate", "--spectrum-progressbar-corner-radius", @@ -102,6 +73,12 @@ "--spectrum-line-height-100", "--spectrum-meter-width", "--spectrum-neutral-subdued-content-color-default", + "--spectrum-progress-bar-maximum-width", + "--spectrum-progress-bar-minimum-width", + "--spectrum-progress-bar-thickness-extra-large", + "--spectrum-progress-bar-thickness-large", + "--spectrum-progress-bar-thickness-medium", + "--spectrum-progress-bar-thickness-small", "--spectrum-spacing-200", "--spectrum-spacing-75", "--spectrum-static-black-text-color", diff --git a/components/progresscircle/dist/metadata.json b/components/progresscircle/dist/metadata.json index a252d2638db..234c4da87f3 100644 --- a/components/progresscircle/dist/metadata.json +++ b/components/progresscircle/dist/metadata.json @@ -12,27 +12,20 @@ ".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-innerCircle", ".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-outerCircle" ], - "modifiers": [ - "--mod-progress-circle-fill-border-color", - "--mod-progress-circle-position", - "--mod-progress-circle-size", - "--mod-progress-circle-thickness", - "--mod-progress-circle-track-border-color" - ], "component": [ "--spectrum-progress-circle-fill-border-color", "--spectrum-progress-circle-size", + "--spectrum-progress-circle-thickness", + "--spectrum-progress-circle-track-border-color" + ], + "global": [ + "--spectrum-accent-content-color-default", "--spectrum-progress-circle-size-large", "--spectrum-progress-circle-size-medium", "--spectrum-progress-circle-size-small", - "--spectrum-progress-circle-thickness", "--spectrum-progress-circle-thickness-large", "--spectrum-progress-circle-thickness-medium", "--spectrum-progress-circle-thickness-small", - "--spectrum-progress-circle-track-border-color" - ], - "global": [ - "--spectrum-accent-content-color-default", "--spectrum-static-black-track-color", "--spectrum-static-black-track-indicator-color", "--spectrum-static-white-track-color", diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json index 5671fe2386a..0f3bd0babd7 100644 --- a/components/radio/dist/metadata.json +++ b/components/radio/dist/metadata.json @@ -50,38 +50,6 @@ ".spectrum-Radio:lang(zh)", ".spectrum-Radio:not(.is-readOnly):active .spectrum-Radio-input:not(:disabled) + .spectrum-Radio-button" ], - "modifiers": [ - "--mod-radio-animation-duration", - "--mod-radio-border-width", - "--mod-radio-button-background-color", - "--mod-radio-button-border-color-default", - "--mod-radio-button-border-color-down", - "--mod-radio-button-border-color-focus", - "--mod-radio-button-border-color-hover", - "--mod-radio-button-checked-border-color-default", - "--mod-radio-button-checked-border-color-down", - "--mod-radio-button-checked-border-color-focus", - "--mod-radio-button-checked-border-color-hover", - "--mod-radio-button-control-size", - "--mod-radio-button-top-to-control", - "--mod-radio-disabled-border-color", - "--mod-radio-disabled-content-color", - "--mod-radio-emphasized-accent-color", - "--mod-radio-emphasized-accent-color-down", - "--mod-radio-emphasized-accent-color-focus", - "--mod-radio-emphasized-accent-color-hover", - "--mod-radio-focus-indicator-color", - "--mod-radio-focus-indicator-thickness", - "--mod-radio-font-size", - "--mod-radio-height", - "--mod-radio-line-height", - "--mod-radio-line-height-cjk", - "--mod-radio-neutral-content-color", - "--mod-radio-neutral-content-color-down", - "--mod-radio-neutral-content-color-focus", - "--mod-radio-neutral-content-color-hover", - "--mod-radio-text-to-control" - ], "component": [ "--spectrum-radio-animation-duration", "--spectrum-radio-border-width", @@ -91,16 +59,7 @@ "--spectrum-radio-button-border-color-focus", "--spectrum-radio-button-border-color-hover", "--spectrum-radio-button-control-size", - "--spectrum-radio-button-control-size-extra-large", - "--spectrum-radio-button-control-size-large", - "--spectrum-radio-button-control-size-medium", - "--spectrum-radio-button-control-size-small", - "--spectrum-radio-button-selection-indicator", "--spectrum-radio-button-top-to-control", - "--spectrum-radio-button-top-to-control-extra-large", - "--spectrum-radio-button-top-to-control-large", - "--spectrum-radio-button-top-to-control-medium", - "--spectrum-radio-button-top-to-control-small", "--spectrum-radio-disabled-border-color", "--spectrum-radio-disabled-content-color", "--spectrum-radio-emphasized-accent-color", @@ -161,6 +120,15 @@ "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", + "--spectrum-radio-button-control-size-extra-large", + "--spectrum-radio-button-control-size-large", + "--spectrum-radio-button-control-size-medium", + "--spectrum-radio-button-control-size-small", + "--spectrum-radio-button-selection-indicator", + "--spectrum-radio-button-top-to-control-extra-large", + "--spectrum-radio-button-top-to-control-large", + "--spectrum-radio-button-top-to-control-medium", + "--spectrum-radio-button-top-to-control-small", "--spectrum-regular-font-weight", "--spectrum-text-to-control-100", "--spectrum-text-to-control-200", diff --git a/components/rating/dist/metadata.json b/components/rating/dist/metadata.json index 591d987a853..3ef5b76dd04 100644 --- a/components/rating/dist/metadata.json +++ b/components/rating/dist/metadata.json @@ -38,37 +38,10 @@ ".spectrum-Rating:hover .spectrum-Rating-starInactive", ".spectrum-Rating:not(.is-readOnly) .spectrum-Rating-input:not(:disabled) ~ .spectrum-Rating-icon:active" ], - "modifiers": [ - "--mod-rating-border-radius", - "--mod-rating-bottom-to-content-area", - "--mod-rating-edge-to-content-area", - "--mod-rating-emphasized-icon-color-default", - "--mod-rating-emphasized-icon-color-down", - "--mod-rating-emphasized-icon-color-hover", - "--mod-rating-emphasized-icon-color-key-focus", - "--mod-rating-focus-indicator-color", - "--mod-rating-focus-indicator-gap", - "--mod-rating-focus-indicator-thickness", - "--mod-rating-height", - "--mod-rating-icon-color-default", - "--mod-rating-icon-color-disabled", - "--mod-rating-icon-color-down", - "--mod-rating-icon-color-hover", - "--mod-rating-icon-fill", - "--mod-rating-icon-height", - "--mod-rating-icon-spacing", - "--mod-rating-icon-width", - "--mod-rating-top-to-content-area", - "--mod-rating-width" - ], "component": [ "--spectrum-rating-border-radius", "--spectrum-rating-bottom-to-content-area", - "--spectrum-rating-bottom-to-content-area-medium", - "--spectrum-rating-bottom-to-content-area-small", "--spectrum-rating-edge-to-content-area", - "--spectrum-rating-edge-to-content-area-medium", - "--spectrum-rating-edge-to-content-area-small", "--spectrum-rating-emphasized-icon-color-default", "--spectrum-rating-emphasized-icon-color-down", "--spectrum-rating-emphasized-icon-color-hover", @@ -77,8 +50,6 @@ "--spectrum-rating-focus-indicator-gap", "--spectrum-rating-focus-indicator-thickness", "--spectrum-rating-height", - "--spectrum-rating-height-medium", - "--spectrum-rating-height-small", "--spectrum-rating-icon-color-default", "--spectrum-rating-icon-color-disabled", "--spectrum-rating-icon-color-down", @@ -88,11 +59,7 @@ "--spectrum-rating-icon-spacing", "--spectrum-rating-icon-width", "--spectrum-rating-top-to-content-area", - "--spectrum-rating-top-to-content-area-medium", - "--spectrum-rating-top-to-content-area-small", - "--spectrum-rating-width", - "--spectrum-rating-width-medium", - "--spectrum-rating-width-small" + "--spectrum-rating-width" ], "global": [ "--spectrum-accent-content-color-default", @@ -109,6 +76,16 @@ "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover", + "--spectrum-rating-bottom-to-content-area-medium", + "--spectrum-rating-bottom-to-content-area-small", + "--spectrum-rating-edge-to-content-area-medium", + "--spectrum-rating-edge-to-content-area-small", + "--spectrum-rating-height-medium", + "--spectrum-rating-height-small", + "--spectrum-rating-top-to-content-area-medium", + "--spectrum-rating-top-to-content-area-small", + "--spectrum-rating-width-medium", + "--spectrum-rating-width-small", "--spectrum-spacing-75", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-75" diff --git a/components/search/dist/metadata.json b/components/search/dist/metadata.json index 0d4bd84abfe..cb6dc69d59e 100644 --- a/components/search/dist/metadata.json +++ b/components/search/dist/metadata.json @@ -29,43 +29,6 @@ ".spectrum-Search:lang(ko)", ".spectrum-Search:lang(zh)" ], - "modifiers": [ - "--mod-search-background-color", - "--mod-search-background-color-disabled", - "--mod-search-block-size", - "--mod-search-border-color-default", - "--mod-search-border-color-disabled", - "--mod-search-border-color-focus", - "--mod-search-border-color-focus-hover", - "--mod-search-border-color-hover", - "--mod-search-border-color-key-focus", - "--mod-search-border-radius", - "--mod-search-border-width", - "--mod-search-bottom-to-text", - "--mod-search-button-inline-size", - "--mod-search-collapsed-animation-duration", - "--mod-search-color-default", - "--mod-search-color-disabled", - "--mod-search-color-focus", - "--mod-search-color-focus-hover", - "--mod-search-color-hover", - "--mod-search-color-key-focus", - "--mod-search-edge-to-visual", - "--mod-search-focus-indicator-color", - "--mod-search-focus-indicator-gap", - "--mod-search-focus-indicator-thickness", - "--mod-search-font-family", - "--mod-search-font-style", - "--mod-search-font-weight", - "--mod-search-icon-size", - "--mod-search-inline-size", - "--mod-search-line-height", - "--mod-search-min-inline-size", - "--mod-search-text-to-icon", - "--mod-search-to-help-text", - "--mod-search-top-to-icon", - "--mod-search-top-to-text" - ], "component": [ "--spectrum-search-background-color", "--spectrum-search-background-color-disabled", @@ -89,7 +52,6 @@ "--spectrum-search-color-hover", "--spectrum-search-color-key-focus", "--spectrum-search-edge-to-visual", - "--spectrum-search-field-minimum-width-multiplier", "--spectrum-search-focus-indicator-color", "--spectrum-search-focus-indicator-gap", "--spectrum-search-focus-indicator-thickness", @@ -155,6 +117,7 @@ "--spectrum-neutral-content-color-key-focus", "--spectrum-regular-font-weight", "--spectrum-sans-font-family-stack", + "--spectrum-search-field-minimum-width-multiplier", "--spectrum-text-to-visual-100", "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-300", @@ -164,30 +127,7 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "passthroughs": [ - "--mod-textfield-background-color", - "--mod-textfield-background-color-disabled", - "--mod-textfield-border-color", - "--mod-textfield-border-color-disabled", - "--mod-textfield-border-color-focus", - "--mod-textfield-border-color-focus-hover", - "--mod-textfield-border-color-hover", - "--mod-textfield-border-color-keyboard-focus", - "--mod-textfield-border-width", - "--mod-textfield-corner-radius", - "--mod-textfield-focus-indicator-color", - "--mod-textfield-focus-indicator-gap", - "--mod-textfield-focus-indicator-width", - "--mod-textfield-font-family", - "--mod-textfield-font-weight", - "--mod-textfield-placeholder-font-size", - "--mod-textfield-text-color-default", - "--mod-textfield-text-color-disabled", - "--mod-textfield-text-color-focus", - "--mod-textfield-text-color-focus-hover", - "--mod-textfield-text-color-hover", - "--mod-textfield-text-color-keyboard-focus" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-search-color-default", "--highcontrast-search-color-disabled", diff --git a/components/sidenav/dist/metadata.json b/components/sidenav/dist/metadata.json index 0215529e384..43cfc48c43c 100644 --- a/components/sidenav/dist/metadata.json +++ b/components/sidenav/dist/metadata.json @@ -27,73 +27,7 @@ ".spectrum-SideNav:lang(ko)", ".spectrum-SideNav:lang(zh)" ], - "modifiers": [ - "--mod-sidenav-background-default", - "--mod-sidenav-background-disabled", - "--mod-sidenav-background-hover", - "--mod-sidenav-background-hover-selected", - "--mod-sidenav-background-key-focus", - "--mod-sidenav-background-key-focus-selected", - "--mod-sidenav-border-radius", - "--mod-sidenav-bottom-to-label", - "--mod-sidenav-content-color-default", - "--mod-sidenav-content-color-default-selected", - "--mod-sidenav-content-color-down", - "--mod-sidenav-content-color-down-selected", - "--mod-sidenav-content-color-hover", - "--mod-sidenav-content-color-hover-selected", - "--mod-sidenav-content-color-key-focus", - "--mod-sidenav-content-color-key-focus-selected", - "--mod-sidenav-content-disabled-color", - "--mod-sidenav-focus-ring-color", - "--mod-sidenav-focus-ring-gap", - "--mod-sidenav-focus-ring-size", - "--mod-sidenav-gap", - "--mod-sidenav-header-color", - "--mod-sidenav-header-font-size", - "--mod-sidenav-header-font-style", - "--mod-sidenav-header-font-weight", - "--mod-sidenav-header-line-height", - "--mod-sidenav-heading-bottom-margin", - "--mod-sidenav-heading-top-margin", - "--mod-sidenav-icon-size", - "--mod-sidenav-icon-spacing", - "--mod-sidenav-inline-padding", - "--mod-sidenav-item-background-default-selected", - "--mod-sidenav-item-background-down", - "--mod-sidenav-item-background-down-selected", - "--mod-sidenav-max-width", - "--mod-sidenav-min-height", - "--mod-sidenav-min-width", - "--mod-sidenav-start-to-content-second-level", - "--mod-sidenav-start-to-content-third-level", - "--mod-sidenav-start-to-content-with-icon-second-level", - "--mod-sidenav-start-to-content-with-icon-third-level", - "--mod-sidenav-text-font-family", - "--mod-sidenav-text-font-size", - "--mod-sidenav-text-font-style", - "--mod-sidenav-text-font-weight", - "--mod-sidenav-text-line-height", - "--mod-sidenav-top-level-font-family", - "--mod-sidenav-top-level-font-size", - "--mod-sidenav-top-level-font-style", - "--mod-sidenav-top-level-font-weight", - "--mod-sidenav-top-level-line-height", - "--mod-sidenav-top-to-icon", - "--mod-sidenav-top-to-label", - "--mod-sidenav-width" - ], "component": [ - "--spectrum-side-navigation-bottom-to-text", - "--spectrum-side-navigation-header-to-item", - "--spectrum-side-navigation-item-to-header", - "--spectrum-side-navigation-item-to-item", - "--spectrum-side-navigation-maximum-width", - "--spectrum-side-navigation-minimum-width", - "--spectrum-side-navigation-second-level-edge-to-text", - "--spectrum-side-navigation-third-level-edge-to-text", - "--spectrum-side-navigation-with-icon-second-level-edge-to-text", - "--spectrum-side-navigation-with-icon-third-level-edge-to-text", "--spectrum-sidenav-background-default", "--spectrum-sidenav-background-disabled", "--spectrum-sidenav-background-hover", @@ -177,6 +111,16 @@ "--spectrum-neutral-content-color-key-focus", "--spectrum-regular-font-weight", "--spectrum-sans-font-family-stack", + "--spectrum-side-navigation-bottom-to-text", + "--spectrum-side-navigation-header-to-item", + "--spectrum-side-navigation-item-to-header", + "--spectrum-side-navigation-item-to-item", + "--spectrum-side-navigation-maximum-width", + "--spectrum-side-navigation-minimum-width", + "--spectrum-side-navigation-second-level-edge-to-text", + "--spectrum-side-navigation-third-level-edge-to-text", + "--spectrum-side-navigation-with-icon-second-level-edge-to-text", + "--spectrum-side-navigation-with-icon-third-level-edge-to-text", "--spectrum-text-to-visual-100", "--spectrum-workflow-icon-size-100" ], diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 7eaea714d74..178d384f879 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -117,86 +117,12 @@ ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover", ".spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)" ], - "modifiers": [ - "--mod-animation-duration-100", - "--mod-focus-indicator-gap", - "--mod-font-size-75", - "--mod-line-height-100", - "--mod-slider-cjk-line-height", - "--mod-slider-control-height", - "--mod-slider-control-to-side-field-label", - "--mod-slider-control-to-text-field", - "--mod-slider-controls-margin", - "--mod-slider-disabled-border-color", - "--mod-slider-editable-field-inline-size", - "--mod-slider-emphasized-tick-mark-color", - "--mod-slider-emphasized-track-fill-color", - "--mod-slider-font-size", - "--mod-slider-handle-background-color", - "--mod-slider-handle-background-color-disabled", - "--mod-slider-handle-border-color", - "--mod-slider-handle-border-color-disabled", - "--mod-slider-handle-border-color-down", - "--mod-slider-handle-border-color-hover", - "--mod-slider-handle-border-color-key-focus", - "--mod-slider-handle-border-radius", - "--mod-slider-handle-border-width", - "--mod-slider-handle-disabled-background-color", - "--mod-slider-handle-focus-ring-color-key-focus", - "--mod-slider-handle-size", - "--mod-slider-inline-size", - "--mod-slider-input-left", - "--mod-slider-input-top-size", - "--mod-slider-label-font-family", - "--mod-slider-label-font-style", - "--mod-slider-label-font-weight", - "--mod-slider-label-margin-start", - "--mod-slider-label-text-color", - "--mod-slider-label-text-color-disabled", - "--mod-slider-ramp-track-color", - "--mod-slider-ramp-track-color-disabled", - "--mod-slider-ramp-track-fill-color", - "--mod-slider-ramp-track-height", - "--mod-slider-range-track-reset", - "--mod-slider-tick-label-color", - "--mod-slider-tick-mark-border-radius", - "--mod-slider-tick-mark-color", - "--mod-slider-tick-mark-color-filled-track", - "--mod-slider-tick-mark-height", - "--mod-slider-tick-mark-width", - "--mod-slider-ticks-handle-background-color", - "--mod-slider-track-color", - "--mod-slider-track-color-disabled", - "--mod-slider-track-corner-radius", - "--mod-slider-track-fill-color", - "--mod-slider-track-fill-color-disabled", - "--mod-slider-track-fill-thickness", - "--mod-slider-track-height-medium", - "--mod-slider-track-thickness", - "--mod-slider-value-inline-size" - ], "component": [ "--spectrum-slider-cjk-line-height", "--spectrum-slider-control-height", "--spectrum-slider-control-to-field-label", - "--spectrum-slider-control-to-field-label-editable-extra-large", - "--spectrum-slider-control-to-field-label-editable-large", - "--spectrum-slider-control-to-field-label-editable-medium", - "--spectrum-slider-control-to-field-label-editable-small", - "--spectrum-slider-control-to-field-label-extra-large", - "--spectrum-slider-control-to-field-label-large", - "--spectrum-slider-control-to-field-label-medium", - "--spectrum-slider-control-to-field-label-side-extra-large", - "--spectrum-slider-control-to-field-label-side-large", - "--spectrum-slider-control-to-field-label-side-medium", - "--spectrum-slider-control-to-field-label-side-small", - "--spectrum-slider-control-to-field-label-small", "--spectrum-slider-control-to-side-field-label", "--spectrum-slider-control-to-text-field", - "--spectrum-slider-control-to-text-field-extra-large", - "--spectrum-slider-control-to-text-field-large", - "--spectrum-slider-control-to-text-field-medium", - "--spectrum-slider-control-to-text-field-small", "--spectrum-slider-controls-margin", "--spectrum-slider-downstate-perspective", "--spectrum-slider-editable-control-to-field-label", @@ -217,14 +143,9 @@ "--spectrum-slider-handle-border-color-key-focus", "--spectrum-slider-handle-border-radius", "--spectrum-slider-handle-border-width", - "--spectrum-slider-handle-extra-large", "--spectrum-slider-handle-focus-ring-color-key-focus", - "--spectrum-slider-handle-gap", - "--spectrum-slider-handle-large", "--spectrum-slider-handle-margin-left", - "--spectrum-slider-handle-medium", "--spectrum-slider-handle-size", - "--spectrum-slider-handle-small", "--spectrum-slider-inline-size", "--spectrum-slider-input-left", "--spectrum-slider-input-top-size", @@ -235,19 +156,13 @@ "--spectrum-slider-label-text-color", "--spectrum-slider-label-text-color-disabled", "--spectrum-slider-precision-handle-height", - "--spectrum-slider-precision-handle-height-extra-large", - "--spectrum-slider-precision-handle-height-large", - "--spectrum-slider-precision-handle-height-medium", - "--spectrum-slider-precision-handle-height-small", "--spectrum-slider-precision-handle-width", "--spectrum-slider-ramp-track-color-disabled", - "--spectrum-slider-ramp-track-height", "--spectrum-slider-range-track-reset", "--spectrum-slider-tick-label-color", "--spectrum-slider-tick-mark-border-radius", "--spectrum-slider-tick-mark-color", "--spectrum-slider-tick-mark-color-filled-track", - "--spectrum-slider-tick-mark-height", "--spectrum-slider-tick-mark-width", "--spectrum-slider-ticks-handle-background-color", "--spectrum-slider-track-color", @@ -256,8 +171,6 @@ "--spectrum-slider-track-fill-color", "--spectrum-slider-track-fill-color-disabled", "--spectrum-slider-track-fill-thickness", - "--spectrum-slider-track-height-large", - "--spectrum-slider-track-height-medium", "--spectrum-slider-value-inline-size" ], "global": [ @@ -308,15 +221,40 @@ "--spectrum-neutral-subdued-content-color-default", "--spectrum-regular-font-weight", "--spectrum-sans-font-family-stack", + "--spectrum-slider-control-to-field-label-editable-extra-large", + "--spectrum-slider-control-to-field-label-editable-large", + "--spectrum-slider-control-to-field-label-editable-medium", + "--spectrum-slider-control-to-field-label-editable-small", + "--spectrum-slider-control-to-field-label-extra-large", + "--spectrum-slider-control-to-field-label-large", + "--spectrum-slider-control-to-field-label-medium", + "--spectrum-slider-control-to-field-label-side-extra-large", + "--spectrum-slider-control-to-field-label-side-large", + "--spectrum-slider-control-to-field-label-side-medium", + "--spectrum-slider-control-to-field-label-side-small", + "--spectrum-slider-control-to-field-label-small", + "--spectrum-slider-control-to-text-field-extra-large", + "--spectrum-slider-control-to-text-field-large", + "--spectrum-slider-control-to-text-field-medium", + "--spectrum-slider-control-to-text-field-small", + "--spectrum-slider-handle-extra-large", + "--spectrum-slider-handle-gap", + "--spectrum-slider-handle-large", + "--spectrum-slider-handle-medium", + "--spectrum-slider-handle-small", + "--spectrum-slider-precision-handle-height-extra-large", + "--spectrum-slider-precision-handle-height-large", + "--spectrum-slider-precision-handle-height-medium", + "--spectrum-slider-precision-handle-height-small", + "--spectrum-slider-ramp-track-height", + "--spectrum-slider-tick-mark-height", + "--spectrum-slider-track-height-large", + "--spectrum-slider-track-height-medium", "--spectrum-spacing-300", "--spectrum-text-to-visual-75", "--spectrum-track-color" ], - "passthroughs": [ - "--mod-fieldlabel-bottom-to-text", - "--mod-fieldlabel-top-to-text", - "--mod-textfield-width" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-slider-filled-track-fill-color", "--highcontrast-slider-handle-background-color", diff --git a/components/slider/index.css b/components/slider/index.css index ed933f03039..a9ff0b0c714 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -24,6 +24,11 @@ /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 18px; + --spectrum-slider-precision-handle-width: 6px; + --spectrum-slider-editable-field-inline-size-small: 56px; + --spectrum-slider-editable-field-inline-size-medium: 70px; + --spectrum-slider-editable-field-inline-size-large: 82px; + --spectrum-slider-editable-field-inline-size-extra-large: 94px; --spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); @@ -92,9 +97,11 @@ --spectrum-slider-precision-handle-height: var(--spectrum-slider-precision-handle-height-small); --spectrum-slider-control-to-text-field: var(--spectrum-slider-control-to-text-field-small); --spectrum-slider-editable-control-to-field-label: var(--spectrum-slider-control-to-field-label-editable-small); + /* @passthrough start */ --mod-textfield-width: var(--spectrum-slider-editable-field-inline-size-small); --mod-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); --mod-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + /* @passthrough end */ } .spectrum-Slider--sizeL { @@ -109,9 +116,11 @@ --spectrum-slider-precision-handle-height: var(--spectrum-slider-precision-handle-height-large); --spectrum-slider-control-to-text-field: var(--spectrum-slider-control-to-text-field-large); --spectrum-slider-editable-control-to-field-label: var(--spectrum-slider-control-to-field-label-editable-large); + /* @passthrough start */ --mod-textfield-width: var(--spectrum-slider-editable-field-inline-size-large); --mod-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200); --mod-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + /* @passthrough end */ /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 18px; @@ -128,9 +137,11 @@ --spectrum-slider-precision-handle-height: var(--spectrum-slider-precision-handle-height-extra-large); --spectrum-slider-control-to-text-field: var(--spectrum-slider-control-to-text-field-extra-large); --spectrum-slider-editable-control-to-field-label: var(--spectrum-slider-control-to-field-label-editable-extra-large); + /* @passthrough start */ --mod-textfield-width: var(--spectrum-slider-editable-field-inline-size-extra-large); --mod-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-300); --mod-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + /* @passthrough end */ /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 22px; diff --git a/components/splitview/dist/metadata.json b/components/splitview/dist/metadata.json index c6925723f7c..bd7a6308e59 100644 --- a/components/splitview/dist/metadata.json +++ b/components/splitview/dist/metadata.json @@ -35,24 +35,6 @@ ".spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper", ".spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper:before" ], - "modifiers": [ - "--mod-splitview-background-color", - "--mod-splitview-content-color", - "--mod-splitview-gripper-border-radius", - "--mod-splitview-gripper-border-width-horizontal", - "--mod-splitview-gripper-border-width-vertical", - "--mod-splitview-gripper-height", - "--mod-splitview-gripper-width", - "--mod-splitview-handle-background-color", - "--mod-splitview-handle-background-color-down", - "--mod-splitview-handle-background-color-focus", - "--mod-splitview-handle-background-color-hover", - "--mod-splitview-handle-width", - "--mod-splitview-vertical-gripper-outer-width", - "--mod-splitview-vertical-gripper-reset", - "--mod-splitview-vertical-gripper-width", - "--mod-splitview-vertical-width" - ], "component": [ "--spectrum-splitview-background-color", "--spectrum-splitview-content-color", diff --git a/components/statuslight/dist/metadata.json b/components/statuslight/dist/metadata.json index 07f3510d851..2397ce9d84c 100644 --- a/components/statuslight/dist/metadata.json +++ b/components/statuslight/dist/metadata.json @@ -35,61 +35,7 @@ ".spectrum-StatusLight:lang(ko)", ".spectrum-StatusLight:lang(zh)" ], - "modifiers": [ - "--mod-statuslight-border-width", - "--mod-statuslight-content-color-default", - "--mod-statuslight-corner-radius", - "--mod-statuslight-dot-size", - "--mod-statuslight-font-family", - "--mod-statuslight-font-size", - "--mod-statuslight-font-style", - "--mod-statuslight-font-weight", - "--mod-statuslight-height", - "--mod-statuslight-line-height", - "--mod-statuslight-line-height-cjk", - "--mod-statuslight-nonsemantic-blue-color", - "--mod-statuslight-nonsemantic-brown-color", - "--mod-statuslight-nonsemantic-celery-color", - "--mod-statuslight-nonsemantic-chartreuse-color", - "--mod-statuslight-nonsemantic-cinnamon-color", - "--mod-statuslight-nonsemantic-cyan-color", - "--mod-statuslight-nonsemantic-fuchsia-color", - "--mod-statuslight-nonsemantic-gray-color", - "--mod-statuslight-nonsemantic-green-color", - "--mod-statuslight-nonsemantic-indigo-color", - "--mod-statuslight-nonsemantic-magenta-color", - "--mod-statuslight-nonsemantic-orange-color", - "--mod-statuslight-nonsemantic-pink-color", - "--mod-statuslight-nonsemantic-purple-color", - "--mod-statuslight-nonsemantic-red-color", - "--mod-statuslight-nonsemantic-seafoam-color", - "--mod-statuslight-nonsemantic-silver-color", - "--mod-statuslight-nonsemantic-turquoise-color", - "--mod-statuslight-nonsemantic-yellow-color", - "--mod-statuslight-semantic-info-color", - "--mod-statuslight-semantic-negative-color", - "--mod-statuslight-semantic-neutral-color", - "--mod-statuslight-semantic-notice-color", - "--mod-statuslight-semantic-positive-color", - "--mod-statuslight-spacing-bottom-to-label", - "--mod-statuslight-spacing-dot-to-label", - "--mod-statuslight-spacing-top-to-dot", - "--mod-statuslight-spacing-top-to-label", - "--mod-statuslight-subdued-content-color-default" - ], "component": [ - "--spectrum-status-light-dot-size-extra-large", - "--spectrum-status-light-dot-size-large", - "--spectrum-status-light-dot-size-medium", - "--spectrum-status-light-dot-size-small", - "--spectrum-status-light-text-to-visual-100", - "--spectrum-status-light-text-to-visual-200", - "--spectrum-status-light-text-to-visual-300", - "--spectrum-status-light-text-to-visual-75", - "--spectrum-status-light-top-to-dot-extra-large", - "--spectrum-status-light-top-to-dot-large", - "--spectrum-status-light-top-to-dot-medium", - "--spectrum-status-light-top-to-dot-small", "--spectrum-statuslight-border-width", "--spectrum-statuslight-content-color-default", "--spectrum-statuslight-corner-radius", @@ -181,6 +127,18 @@ "--spectrum-sans-font-family-stack", "--spectrum-seafoam-visual-color", "--spectrum-silver-visual-color", + "--spectrum-status-light-dot-size-extra-large", + "--spectrum-status-light-dot-size-large", + "--spectrum-status-light-dot-size-medium", + "--spectrum-status-light-dot-size-small", + "--spectrum-status-light-text-to-visual-100", + "--spectrum-status-light-text-to-visual-200", + "--spectrum-status-light-text-to-visual-300", + "--spectrum-status-light-text-to-visual-75", + "--spectrum-status-light-top-to-dot-extra-large", + "--spectrum-status-light-top-to-dot-large", + "--spectrum-status-light-top-to-dot-medium", + "--spectrum-status-light-top-to-dot-small", "--spectrum-turquoise-visual-color", "--spectrum-yellow-visual-color" ], diff --git a/components/steplist/dist/metadata.json b/components/steplist/dist/metadata.json index 27faf429c11..fcfee3d1755 100644 --- a/components/steplist/dist/metadata.json +++ b/components/steplist/dist/metadata.json @@ -42,26 +42,6 @@ ".spectrum-Steplist-markerContainer", ".spectrum-Steplist-segment" ], - "modifiers": [ - "--mod-steplist-complete-label-text-color", - "--mod-steplist-complete-marker-background-color", - "--mod-steplist-complete-segment-border-block-end-color", - "--mod-steplist-current-label-text-color", - "--mod-steplist-current-marker-color", - "--mod-steplist-current-marker-color-key-focus", - "--mod-steplist-incomplete-label-color", - "--mod-steplist-incomplete-marker-border-color", - "--mod-steplist-incomplete-segment-border-block-end-color", - "--mod-steplist-label-labelOffset", - "--mod-steplist-label-text-size", - "--mod-steplist-marker-diameter", - "--mod-steplist-marker-hitArea", - "--mod-steplist-segment-height", - "--mod-steplist-sidePadding", - "--mod-steplist-small-topPadding", - "--mod-steplist-step-width", - "--mod-steplist-topPadding" - ], "component": [ "--spectrum-steplist-complete-label-text-color", "--spectrum-steplist-complete-marker-background-color", @@ -83,6 +63,8 @@ "--spectrum-steplist-topPadding" ], "global": [ + "--spectrum-blue-700", + "--spectrum-blue-800", "--spectrum-gray-200", "--spectrum-gray-600", "--spectrum-gray-700", diff --git a/components/steplist/index.css b/components/steplist/index.css index 62900591018..29fa92bb2d0 100644 --- a/components/steplist/index.css +++ b/components/steplist/index.css @@ -12,6 +12,9 @@ */ .spectrum-Steplist { + /** default light colors */ + --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800); + --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-200); --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-200); @@ -63,6 +66,12 @@ line-height: 16px; /* in case the container changes it */ } +@media (prefers-color-scheme: dark) { + .spectrum-Steplist { + --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700); + } +} + .spectrum-Steplist--interactive { .spectrum-Steplist-label, .spectrum-Steplist-markerContainer { diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index a8b7ec49b01..43c40a70f86 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -67,51 +67,6 @@ ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus:hover", ".spectrum-NumberField:not(.is-disabled, .is-readOnly):hover" ], - "modifiers": [ - "--mod-numberfield-background-color", - "--mod-numberfield-background-color-disabled", - "--mod-numberfield-block-size", - "--mod-numberfield-border-color", - "--mod-numberfield-border-color-disabled", - "--mod-numberfield-border-color-focus", - "--mod-numberfield-border-color-focus-hover", - "--mod-numberfield-border-color-focus-hover-invalid", - "--mod-numberfield-border-color-focus-invalid", - "--mod-numberfield-border-color-hover", - "--mod-numberfield-border-color-hover-invalid", - "--mod-numberfield-border-color-invalid", - "--mod-numberfield-border-color-invalid-default", - "--mod-numberfield-border-color-invalid-focus", - "--mod-numberfield-border-color-invalid-focus-hover", - "--mod-numberfield-border-color-invalid-hover", - "--mod-numberfield-border-color-invalid-keyboard-focus", - "--mod-numberfield-border-color-keyboard-focus", - "--mod-numberfield-border-color-keyboard-focus-invalid", - "--mod-numberfield-border-radius", - "--mod-numberfield-border-width", - "--mod-numberfield-button-inline-offset", - "--mod-numberfield-focus-indicator-color", - "--mod-numberfield-focus-indicator-gap", - "--mod-numberfield-focus-indicator-width", - "--mod-numberfield-font-family", - "--mod-numberfield-font-size", - "--mod-numberfield-font-style", - "--mod-numberfield-font-weight", - "--mod-numberfield-hidden-stepper-min-inline-size", - "--mod-numberfield-inline-size", - "--mod-numberfield-label-to-field", - "--mod-numberfield-line-height", - "--mod-numberfield-min-inline-size", - "--mod-numberfield-spacing-block-end-edge-to-text", - "--mod-numberfield-spacing-block-start-edge-to-text", - "--mod-numberfield-spacing-field-to-helptext", - "--mod-numberfield-text-color", - "--mod-numberfield-text-color-disabled", - "--mod-numberfield-text-color-focus", - "--mod-numberfield-text-color-focus-hover", - "--mod-numberfield-text-color-hover", - "--mod-numberfield-text-color-keyboard-focus" - ], "component": [], "global": [ "--spectrum-border-width-200", @@ -223,7 +178,6 @@ "--spectrum-numberfield-inline-size", "--spectrum-numberfield-line-height", "--spectrum-numberfield-min-inline-size", - "--spectrum-numberfield-spacing-block-end-edge-to-alert-icon", "--spectrum-numberfield-spacing-block-end-edge-to-text", "--spectrum-numberfield-spacing-block-start-edge-to-alert-icon", "--spectrum-numberfield-spacing-block-start-edge-to-text", @@ -252,22 +206,7 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "passthroughs": [ - "--mod-textfield-background-color", - "--mod-textfield-background-color-disabled", - "--mod-textfield-font-family", - "--mod-textfield-font-size", - "--mod-textfield-font-style", - "--mod-textfield-font-weight", - "--mod-textfield-height", - "--mod-textfield-icon-spacing-block-invalid", - "--mod-textfield-spacing-block-end", - "--mod-textfield-spacing-block-start", - "--mod-textfield-text-color-default", - "--mod-textfield-text-color-disabled", - "--mod-textfield-text-color-focus", - "--mod-textfield-width" - ], + "passthroughs": ["--highcontrast-textfield-border-color"], "high-contrast": [ "--highcontrast-numberfield-background-color", "--highcontrast-numberfield-border-color", @@ -275,7 +214,6 @@ "--highcontrast-numberfield-border-color-focus-hover", "--highcontrast-numberfield-border-color-hover", "--highcontrast-numberfield-border-color-keyboard-focus", - "--highcontrast-numberfield-focus-indicator-color", - "--highcontrast-textfield-border-color" + "--highcontrast-numberfield-focus-indicator-color" ] } diff --git a/components/swatch/dist/metadata.json b/components/swatch/dist/metadata.json index 5b40e74c96e..14c9a89fc49 100644 --- a/components/swatch/dist/metadata.json +++ b/components/swatch/dist/metadata.json @@ -55,42 +55,12 @@ ".spectrum-Swatch[disabled]", ".spectrum-Swatch[disabled] .spectrum-Swatch-disabledIcon" ], - "modifiers": [ - "--mod-add-button-background", - "--mod-add-button-background-down", - "--mod-add-button-background-hover", - "--mod-add-button-background-keyboard-focus", - "--mod-animation-duration-100", - "--mod-corner-radius-full", - "--mod-mixed-button-background", - "--mod-swatch-border", - "--mod-swatch-border-color", - "--mod-swatch-border-color-selected", - "--mod-swatch-border-opacity", - "--mod-swatch-border-radius", - "--mod-swatch-border-thickness", - "--mod-swatch-border-thickness-selected", - "--mod-swatch-disabled-icon-color", - "--mod-swatch-disabled-icon-size", - "--mod-swatch-focus-indicator-color", - "--mod-swatch-focus-indicator-gap", - "--mod-swatch-focus-indicator-thickness", - "--mod-swatch-icon-border-color", - "--mod-swatch-icon-color", - "--mod-swatch-inner-border-color-selected", - "--mod-swatch-size", - "--mod-swatch-slash-icon-color", - "--mod-swatch-slash-thickness" - ], "component": [ "--spectrum-swatch-border", - "--spectrum-swatch-border-color", "--spectrum-swatch-border-color-selected", - "--spectrum-swatch-border-opacity", "--spectrum-swatch-border-radius", "--spectrum-swatch-border-thickness", "--spectrum-swatch-border-thickness-selected", - "--spectrum-swatch-disabled-icon-border-opacity", "--spectrum-swatch-disabled-icon-color", "--spectrum-swatch-disabled-icon-size", "--spectrum-swatch-focus-indicator-color", @@ -99,18 +69,9 @@ "--spectrum-swatch-icon-border-color", "--spectrum-swatch-icon-color", "--spectrum-swatch-inner-border-color-selected", - "--spectrum-swatch-rectangle-width-multiplier", "--spectrum-swatch-size", - "--spectrum-swatch-size-extra-small", - "--spectrum-swatch-size-large", - "--spectrum-swatch-size-medium", - "--spectrum-swatch-size-small", "--spectrum-swatch-slash-icon-color", - "--spectrum-swatch-slash-thickness", - "--spectrum-swatch-slash-thickness-extra-small", - "--spectrum-swatch-slash-thickness-large", - "--spectrum-swatch-slash-thickness-medium", - "--spectrum-swatch-slash-thickness-small" + "--spectrum-swatch-slash-thickness" ], "global": [ "--spectrum-add-button-background", @@ -134,6 +95,18 @@ "--spectrum-negative-visual-color", "--spectrum-neutral-content-color-default", "--spectrum-picked-color", + "--spectrum-swatch-border-color", + "--spectrum-swatch-border-opacity", + "--spectrum-swatch-disabled-icon-border-opacity", + "--spectrum-swatch-rectangle-width-multiplier", + "--spectrum-swatch-size-extra-small", + "--spectrum-swatch-size-large", + "--spectrum-swatch-size-medium", + "--spectrum-swatch-size-small", + "--spectrum-swatch-slash-thickness-extra-small", + "--spectrum-swatch-slash-thickness-large", + "--spectrum-swatch-slash-thickness-medium", + "--spectrum-swatch-slash-thickness-small", "--spectrum-white", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-50", diff --git a/components/swatchgroup/dist/metadata.json b/components/swatchgroup/dist/metadata.json index 73ac1e248a6..c8921819c00 100644 --- a/components/swatchgroup/dist/metadata.json +++ b/components/swatchgroup/dist/metadata.json @@ -6,16 +6,13 @@ ".spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeM, .spectrum-Swatch--sizeL)", ".spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeXS, .spectrum-Swatch--sizeS)" ], - "modifiers": ["--mod-swatchgroup-spacing"], - "component": [ - "--spectrum-swatch-group-spacing-spacious", - "--spectrum-swatchgroup-spacing" - ], + "component": ["--spectrum-swatchgroup-spacing"], "global": [ "--spectrum-spacing-100", "--spectrum-spacing-50", - "--spectrum-spacing-75" + "--spectrum-spacing-75", + "--spectrum-swatch-group-spacing-spacious" ], - "passthroughs": ["--mod-swatch-border-opacity"], + "passthroughs": [], "high-contrast": [] } diff --git a/components/switch/dist/metadata.json b/components/switch/dist/metadata.json index 03beda3b924..6a2847b6a4f 100644 --- a/components/switch/dist/metadata.json +++ b/components/switch/dist/metadata.json @@ -65,54 +65,6 @@ ".spectrum-Switch:hover .spectrum-Switch-switch:before", ".spectrum-Switch:hover ~ .spectrum-Switch-label" ], - "modifiers": [ - "--mod-switch-animation-duration-switch", - "--mod-switch-background-color", - "--mod-switch-background-color-disabled", - "--mod-switch-background-color-selected-default", - "--mod-switch-background-color-selected-disabled", - "--mod-switch-background-color-selected-down", - "--mod-switch-background-color-selected-focus", - "--mod-switch-background-color-selected-hover", - "--mod-switch-border-color-default", - "--mod-switch-border-color-disabled", - "--mod-switch-border-color-down", - "--mod-switch-border-color-focus", - "--mod-switch-border-color-hover", - "--mod-switch-border-color-selected-default", - "--mod-switch-border-color-selected-down", - "--mod-switch-border-color-selected-focus", - "--mod-switch-border-color-selected-hover", - "--mod-switch-border-radius", - "--mod-switch-border-width", - "--mod-switch-cjk-line-height", - "--mod-switch-control-height", - "--mod-switch-control-label-spacing", - "--mod-switch-control-width", - "--mod-switch-focus-indicator-color", - "--mod-switch-focus-indicator-gap", - "--mod-switch-focus-indicator-thickness", - "--mod-switch-font-size", - "--mod-switch-handle-background-color-default", - "--mod-switch-handle-background-color-disabled", - "--mod-switch-handle-background-color-down", - "--mod-switch-handle-background-color-focus", - "--mod-switch-handle-background-color-hover", - "--mod-switch-handle-background-color-selected", - "--mod-switch-handle-background-color-selected-disabled", - "--mod-switch-handle-selected-size", - "--mod-switch-handle-size", - "--mod-switch-height", - "--mod-switch-label-color-default", - "--mod-switch-label-color-disabled", - "--mod-switch-label-color-down", - "--mod-switch-label-color-focus", - "--mod-switch-label-color-hover", - "--mod-switch-line-height", - "--mod-switch-spacing-bottom-to-label", - "--mod-switch-spacing-top-to-control", - "--mod-switch-spacing-top-to-label" - ], "component": [ "--spectrum-switch-animation-duration-label", "--spectrum-switch-animation-duration-switch", @@ -136,16 +88,8 @@ "--spectrum-switch-border-width", "--spectrum-switch-cjk-line-height", "--spectrum-switch-control-height", - "--spectrum-switch-control-height-extra-large", - "--spectrum-switch-control-height-large", - "--spectrum-switch-control-height-medium", - "--spectrum-switch-control-height-small", "--spectrum-switch-control-label-spacing", "--spectrum-switch-control-width", - "--spectrum-switch-control-width-extra-large", - "--spectrum-switch-control-width-large", - "--spectrum-switch-control-width-medium", - "--spectrum-switch-control-width-small", "--spectrum-switch-focus-indicator-color", "--spectrum-switch-focus-indicator-gap", "--spectrum-switch-focus-indicator-thickness", @@ -158,15 +102,7 @@ "--spectrum-switch-handle-background-color-selected", "--spectrum-switch-handle-background-color-selected-disabled", "--spectrum-switch-handle-selected-size", - "--spectrum-switch-handle-selected-size-extra-large", - "--spectrum-switch-handle-selected-size-large", - "--spectrum-switch-handle-selected-size-medium", - "--spectrum-switch-handle-selected-size-small", "--spectrum-switch-handle-size", - "--spectrum-switch-handle-size-extra-large", - "--spectrum-switch-handle-size-large", - "--spectrum-switch-handle-size-medium", - "--spectrum-switch-handle-size-small", "--spectrum-switch-label-color-default", "--spectrum-switch-label-color-disabled", "--spectrum-switch-label-color-down", @@ -176,11 +112,7 @@ "--spectrum-switch-min-height", "--spectrum-switch-spacing-bottom-to-label", "--spectrum-switch-spacing-top-to-control", - "--spectrum-switch-spacing-top-to-label", - "--spectrum-switch-top-to-control-extra-large", - "--spectrum-switch-top-to-control-large", - "--spectrum-switch-top-to-control-medium", - "--spectrum-switch-top-to-control-small" + "--spectrum-switch-spacing-top-to-label" ], "global": [ "--spectrum-accent-background-color-default", @@ -224,6 +156,26 @@ "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", + "--spectrum-switch-control-height-extra-large", + "--spectrum-switch-control-height-large", + "--spectrum-switch-control-height-medium", + "--spectrum-switch-control-height-small", + "--spectrum-switch-control-width-extra-large", + "--spectrum-switch-control-width-large", + "--spectrum-switch-control-width-medium", + "--spectrum-switch-control-width-small", + "--spectrum-switch-handle-selected-size-extra-large", + "--spectrum-switch-handle-selected-size-large", + "--spectrum-switch-handle-selected-size-medium", + "--spectrum-switch-handle-selected-size-small", + "--spectrum-switch-handle-size-extra-large", + "--spectrum-switch-handle-size-large", + "--spectrum-switch-handle-size-medium", + "--spectrum-switch-handle-size-small", + "--spectrum-switch-top-to-control-extra-large", + "--spectrum-switch-top-to-control-large", + "--spectrum-switch-top-to-control-medium", + "--spectrum-switch-top-to-control-small", "--spectrum-text-to-control-100", "--spectrum-text-to-control-200", "--spectrum-text-to-control-300", diff --git a/components/table/dist/metadata.json b/components/table/dist/metadata.json index cf66742117b..8a78ddc4a6f 100644 --- a/components/table/dist/metadata.json +++ b/components/table/dist/metadata.json @@ -163,127 +163,22 @@ ".spectrum-Table:lang(zh)", ".spectrum-Table:not(.spectrum-Table-scroller)" ], - "modifiers": [ - "--mod-table-avatar-size", - "--mod-table-avatar-size-compact", - "--mod-table-avatar-size-spacious", - "--mod-table-border-color", - "--mod-table-border-radius", - "--mod-table-border-radius-quiet", - "--mod-table-border-width", - "--mod-table-cell-inline-spacing", - "--mod-table-checkbox-to-cell-content", - "--mod-table-collapsible-disclosure-inline-spacing", - "--mod-table-collapsible-icon-animation-duration", - "--mod-table-current-header-height", - "--mod-table-cursor-header-default", - "--mod-table-cursor-header-sortable", - "--mod-table-cursor-row-default", - "--mod-table-cursor-section-header", - "--mod-table-default-vertical-align", - "--mod-table-disclosure-icon-size", - "--mod-table-divider-color", - "--mod-table-drop-zone-background-color", - "--mod-table-drop-zone-outline-color", - "--mod-table-focus-indicator-color", - "--mod-table-focus-indicator-thickness", - "--mod-table-header-background-color", - "--mod-table-header-background-color-scrollable", - "--mod-table-header-font-family", - "--mod-table-header-font-size", - "--mod-table-header-font-style", - "--mod-table-header-font-weight", - "--mod-table-header-icons-color-active", - "--mod-table-header-icons-color-default", - "--mod-table-header-icons-color-hover", - "--mod-table-header-icons-color-key-focus", - "--mod-table-header-line-height", - "--mod-table-header-row-bottom-to-text", - "--mod-table-header-row-checkbox-block-spacing", - "--mod-table-header-row-top-to-text", - "--mod-table-header-text-color", - "--mod-table-header-text-transform", - "--mod-table-header-vertical-align", - "--mod-table-icon-color-active", - "--mod-table-icon-color-default", - "--mod-table-icon-color-focus", - "--mod-table-icon-color-focus-hover", - "--mod-table-icon-color-hover", - "--mod-table-icon-color-key-focus", - "--mod-table-min-header-height", - "--mod-table-min-row-height", - "--mod-table-min-row-height-compact", - "--mod-table-min-row-height-spacious", - "--mod-table-outer-border-inline-width", - "--mod-table-outer-border-inline-width-quiet", - "--mod-table-row-background-color", - "--mod-table-row-background-color-active", - "--mod-table-row-background-color-hover", - "--mod-table-row-bottom-to-text", - "--mod-table-row-checkbox-block-spacing", - "--mod-table-row-checkbox-block-spacing-compact", - "--mod-table-row-checkbox-block-spacing-spacious", - "--mod-table-row-font-family", - "--mod-table-row-font-size", - "--mod-table-row-font-style", - "--mod-table-row-font-weight", - "--mod-table-row-line-height", - "--mod-table-row-text-color", - "--mod-table-row-text-color-active", - "--mod-table-row-text-color-hover", - "--mod-table-row-top-to-text", - "--mod-table-section-header-background-color", - "--mod-table-section-header-block-end-spacing", - "--mod-table-section-header-block-start-spacing", - "--mod-table-section-header-font-family", - "--mod-table-section-header-font-size", - "--mod-table-section-header-font-style", - "--mod-table-section-header-font-weight", - "--mod-table-section-header-inline-start-spacing", - "--mod-table-section-header-line-height", - "--mod-table-section-header-min-height", - "--mod-table-section-header-text-color", - "--mod-table-selected-row-background-color", - "--mod-table-selected-row-background-color-focus", - "--mod-table-selected-row-background-color-non-emphasized", - "--mod-table-selected-row-background-color-non-emphasized-focus", - "--mod-table-summary-row-background-color", - "--mod-table-summary-row-bottom-to-text", - "--mod-table-summary-row-font-family", - "--mod-table-summary-row-font-size", - "--mod-table-summary-row-font-style", - "--mod-table-summary-row-font-weight", - "--mod-table-summary-row-line-height", - "--mod-table-summary-row-min-height", - "--mod-table-summary-row-text-color", - "--mod-table-summary-row-top-to-text", - "--mod-table-thumbnail-size", - "--mod-table-thumbnail-size-compact", - "--mod-table-thumbnail-size-spacious", - "--mod-table-transition-duration", - "--mod-table-visual-to-text" - ], "component": [ "--spectrum-table-avatar-size", "--spectrum-table-border-color", - "--spectrum-table-border-divider-width", "--spectrum-table-border-radius", "--spectrum-table-border-width", "--spectrum-table-cell-background-color", "--spectrum-table-cell-inline-spacing", "--spectrum-table-checkbox-to-cell-content", - "--spectrum-table-checkbox-to-text", "--spectrum-table-collapsible-disclosure-inline-spacing", "--spectrum-table-collapsible-icon-animation-duration", "--spectrum-table-collapsible-tier-indent", - "--spectrum-table-column-header-row-bottom-to-text-medium", - "--spectrum-table-column-header-row-top-to-text-medium", "--spectrum-table-default-vertical-align", "--spectrum-table-disclosure-icon-size", "--spectrum-table-divider-color", "--spectrum-table-drop-zone-background-color", "--spectrum-table-drop-zone-outline-color", - "--spectrum-table-edge-to-content", "--spectrum-table-focus-indicator-color", "--spectrum-table-focus-indicator-thickness", "--spectrum-table-focused-cell-border-radius", @@ -295,7 +190,6 @@ "--spectrum-table-header-icons-color-key-focus", "--spectrum-table-header-row-bottom-to-text", "--spectrum-table-header-row-checkbox-block-spacing", - "--spectrum-table-header-row-checkbox-to-top-medium", "--spectrum-table-header-row-top-to-text", "--spectrum-table-header-text-color", "--spectrum-table-icon-color", @@ -310,23 +204,12 @@ "--spectrum-table-row-background-color-active", "--spectrum-table-row-background-color-hover", "--spectrum-table-row-bottom-to-text", - "--spectrum-table-row-bottom-to-text-medium", - "--spectrum-table-row-bottom-to-text-medium-compact", - "--spectrum-table-row-bottom-to-text-medium-spacious", "--spectrum-table-row-checkbox-block-spacing", - "--spectrum-table-row-checkbox-to-top-medium", - "--spectrum-table-row-checkbox-to-top-medium-compact", - "--spectrum-table-row-checkbox-to-top-medium-spacious", - "--spectrum-table-row-down-opacity", "--spectrum-table-row-focus-indicator-width", "--spectrum-table-row-font-family", "--spectrum-table-row-font-size", "--spectrum-table-row-font-style", "--spectrum-table-row-font-weight", - "--spectrum-table-row-height-medium", - "--spectrum-table-row-height-medium-compact", - "--spectrum-table-row-height-medium-spacious", - "--spectrum-table-row-hover-opacity", "--spectrum-table-row-line-height", "--spectrum-table-row-text-color", "--spectrum-table-row-text-color-active", @@ -334,15 +217,11 @@ "--spectrum-table-row-text-color-key-focus", "--spectrum-table-row-tier", "--spectrum-table-row-top-to-text", - "--spectrum-table-row-top-to-text-medium", - "--spectrum-table-row-top-to-text-medium-compact", - "--spectrum-table-row-top-to-text-medium-spacious", "--spectrum-table-section-header-background-color", "--spectrum-table-section-header-block-end-spacing", "--spectrum-table-section-header-block-start-spacing", "--spectrum-table-section-header-font-weight", "--spectrum-table-section-header-min-height", - "--spectrum-table-section-header-row-height-medium", "--spectrum-table-selected-cell-background-color", "--spectrum-table-selected-cell-background-color-focus", "--spectrum-table-selected-row-background-color", @@ -351,10 +230,6 @@ "--spectrum-table-selected-row-background-color-non-emphasized", "--spectrum-table-selected-row-background-color-non-emphasized-focus", "--spectrum-table-selected-row-background-color-rgb", - "--spectrum-table-selected-row-background-opacity", - "--spectrum-table-selected-row-background-opacity-hover", - "--spectrum-table-selected-row-background-opacity-non-emphasized", - "--spectrum-table-selected-row-background-opacity-non-emphasized-hover", "--spectrum-table-summary-row-background-color", "--spectrum-table-summary-row-font-weight", "--spectrum-table-thumbnail-size", @@ -367,6 +242,8 @@ "--spectrum-avatar-size-100", "--spectrum-avatar-size-50", "--spectrum-avatar-size-75", + "--spectrum-blue-800-rgb", + "--spectrum-blue-900-rgb", "--spectrum-body-color", "--spectrum-bold-font-weight", "--spectrum-checkbox-control-size-small", @@ -402,34 +279,37 @@ "--spectrum-sans-font-family-stack", "--spectrum-side-focus-indicator", "--spectrum-spacing-300", + "--spectrum-table-border-divider-width", + "--spectrum-table-checkbox-to-text", + "--spectrum-table-column-header-row-bottom-to-text-medium", + "--spectrum-table-column-header-row-top-to-text-medium", + "--spectrum-table-edge-to-content", + "--spectrum-table-header-row-checkbox-to-top-medium", + "--spectrum-table-row-bottom-to-text-medium", + "--spectrum-table-row-bottom-to-text-medium-compact", + "--spectrum-table-row-bottom-to-text-medium-spacious", + "--spectrum-table-row-checkbox-to-top-medium", + "--spectrum-table-row-checkbox-to-top-medium-compact", + "--spectrum-table-row-checkbox-to-top-medium-spacious", + "--spectrum-table-row-down-opacity", + "--spectrum-table-row-height-medium", + "--spectrum-table-row-height-medium-compact", + "--spectrum-table-row-height-medium-spacious", + "--spectrum-table-row-hover-opacity", + "--spectrum-table-row-top-to-text-medium", + "--spectrum-table-row-top-to-text-medium-compact", + "--spectrum-table-row-top-to-text-medium-spacious", + "--spectrum-table-section-header-row-height-medium", + "--spectrum-table-selected-row-background-opacity", + "--spectrum-table-selected-row-background-opacity-hover", + "--spectrum-table-selected-row-background-opacity-non-emphasized", + "--spectrum-table-selected-row-background-opacity-non-emphasized-hover", "--spectrum-text-to-visual-300", "--spectrum-thumbnail-size-100", "--spectrum-thumbnail-size-200", "--spectrum-thumbnail-size-75" ], - "passthroughs": [ - "--mod-avatar-block-size", - "--mod-avatar-inline-size", - "--mod-button-background-color-default", - "--mod-button-background-color-down", - "--mod-button-background-color-focus", - "--mod-button-background-color-hover", - "--mod-button-border-radius", - "--mod-button-content-color-default", - "--mod-button-content-color-down", - "--mod-button-content-color-focus", - "--mod-button-content-color-hover", - "--mod-button-edge-to-text", - "--mod-button-focus-ring-border-radius", - "--mod-button-font-family", - "--mod-button-font-size", - "--mod-button-font-weight", - "--mod-button-line-height", - "--mod-button-padding-label-to-icon", - "--mod-checkbox-margin-block", - "--mod-icon-color", - "--mod-thumbnail-size" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-table-border-color", "--highcontrast-table-cell-focus-indicator-color", diff --git a/components/table/index.css b/components/table/index.css index 9f358a08f3f..b1309b770bb 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -12,6 +12,9 @@ */ .spectrum-Table { + /** default light colors */ + --spectrum-table-selected-row-background-color-rgb: var(--spectrum-blue-900-rgb); + /* Animation */ --spectrum-table-transition-duration: var(--spectrum-animation-duration-100); @@ -153,6 +156,12 @@ } } +@media (prefers-color-scheme: dark) { + .spectrum-Table { + --spectrum-table-selected-row-background-color-rgb: var(--spectrum-blue-800-rgb); + } +} + /********* VARIANTS *********/ .spectrum-Table--compact { /* Size and Spacing */ diff --git a/components/tabs/dist/metadata.json b/components/tabs/dist/metadata.json index 879d8bd7440..480b28a64ea 100644 --- a/components/tabs/dist/metadata.json +++ b/components/tabs/dist/metadata.json @@ -38,50 +38,7 @@ ".spectrum-Tabs-selectionIndicator", ".spectrum-Tabs.spectrum-Tabs--compact" ], - "modifiers": [ - "--mod-tabs-animation-duration", - "--mod-tabs-animation-ease", - "--mod-tabs-bottom-to-text", - "--mod-tabs-bottom-to-text-compact", - "--mod-tabs-color", - "--mod-tabs-color-disabled", - "--mod-tabs-color-hover", - "--mod-tabs-color-key-focus", - "--mod-tabs-color-selected", - "--mod-tabs-color-selected-hover", - "--mod-tabs-color-selected-key-focus", - "--mod-tabs-focus-indicator-border-radius", - "--mod-tabs-focus-indicator-color", - "--mod-tabs-focus-indicator-gap", - "--mod-tabs-focus-indicator-width", - "--mod-tabs-font-family", - "--mod-tabs-font-size", - "--mod-tabs-font-style", - "--mod-tabs-font-weight", - "--mod-tabs-icon-size", - "--mod-tabs-icon-to-text", - "--mod-tabs-item-border-radius", - "--mod-tabs-item-height", - "--mod-tabs-item-height-compact", - "--mod-tabs-item-horizontal-spacing", - "--mod-tabs-item-horizontal-spacing-compact", - "--mod-tabs-label-to-selection-indicator", - "--mod-tabs-label-to-selection-indicator-compact", - "--mod-tabs-line-height", - "--mod-tabs-selection-indicator-border-radius", - "--mod-tabs-selection-indicator-color", - "--mod-tabs-selection-indicator-color-disabled", - "--mod-tabs-selection-indicator-thickness", - "--mod-tabs-side-to-icon", - "--mod-tabs-side-to-icon-compact", - "--mod-tabs-start-to-edge", - "--mod-tabs-top-to-icon", - "--mod-tabs-top-to-icon-compact", - "--mod-tabs-top-to-text", - "--mod-tabs-top-to-text-compact" - ], "component": [ - "--spectrum-tab-selection-indicator-thickness", "--spectrum-tabs-animation-duration", "--spectrum-tabs-animation-ease", "--spectrum-tabs-bottom-to-text", @@ -145,8 +102,6 @@ "--spectrum-tab-item-bottom-to-text-medium", "--spectrum-tab-item-compact-height-medium", "--spectrum-tab-item-height-medium", - "--spectrum-tab-item-side-to-workflow-icon-compact-medium", - "--spectrum-tab-item-side-to-workflow-icon-medium", "--spectrum-tab-item-start-to-edge-medium", "--spectrum-tab-item-to-tab-item-compact-horizontal-medium", "--spectrum-tab-item-to-tab-item-horizontal-medium", @@ -157,7 +112,7 @@ "--spectrum-text-to-visual-100", "--spectrum-workflow-icon-size-100" ], - "passthroughs": ["--mod-picker-block-size"], + "passthroughs": [], "high-contrast": [ "--highcontrast-tabs-background-color-selected", "--highcontrast-tabs-color", diff --git a/components/tabs/index.css b/components/tabs/index.css index 0b86ec831b5..76c0a640057 100644 --- a/components/tabs/index.css +++ b/components/tabs/index.css @@ -22,7 +22,7 @@ --spectrum-tabs-icon-size: var(--mod-tabs-icon-size, var(--spectrum-workflow-icon-size-100)); --spectrum-tabs-icon-to-text: var(--mod-tabs-icon-to-text, var(--spectrum-text-to-visual-100)); --spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon, var(--spectrum-tab-item-top-to-workflow-icon-medium)); - --spectrum-tabs-side-to-icon: var(--mod-tabs-side-to-icon, var(--spectrum-tab-item-side-to-workflow-icon-medium)); + --spectrum-tabs-side-to-icon: var(--mod-tabs-side-to-icon, 6px); --spectrum-tabs-item-border-radius: var(--mod-tabs-item-border-radius, var(--spectrum-corner-radius-0)); @@ -47,7 +47,7 @@ --spectrum-tabs-focus-indicator-color: var(--highcontrast-tabs-focus-indicator-color, var(--mod-tabs-focus-indicator-color, var(--spectrum-focus-indicator-color))); --spectrum-tabs-selection-indicator-color: var(--highcontrast-tabs-selection-indicator-color, var(--mod-tabs-selection-indicator-color, var(--spectrum-neutral-subdued-content-color-down))); - --spectrum-tabs-selection-indicator-thickness: var(--mod-tabs-selection-indicator-thickness, var(--spectrum-tab-selection-indicator-thickness)); + --spectrum-tabs-selection-indicator-thickness: var(--mod-tabs-selection-indicator-thickness, 2px); --spectrum-tabs-selection-indicator-border-radius: var(--mod-tabs-selection-indicator-border-radius, var(--spectrum-corner-radius-full)); --spectrum-tabs-animation-duration: var(--mod-tabs-animation-duration, var(--spectrum-animation-duration-100)); @@ -61,7 +61,7 @@ --spectrum-tabs-label-to-selection-indicator: var(--mod-tabs-label-to-selection-indicator-compact, var(--spectrum-spacing-75)); --spectrum-tabs-item-horizontal-spacing: var(--mod-tabs-item-horizontal-spacing-compact, var(--spectrum-tab-item-to-tab-item-compact-horizontal-medium)); --spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-medium)); - --spectrum-tabs-side-to-icon: var(--mod-tabs-side-to-icon-compact, var(--spectrum-tab-item-side-to-workflow-icon-compact-medium)); + --spectrum-tabs-side-to-icon: var(--mod-tabs-side-to-icon-compact, 6px); } /* @passthrough -- picker styling for overflow tabs */ diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json index e4503014031..d75e73aef6b 100644 --- a/components/tag/dist/metadata.json +++ b/components/tag/dist/metadata.json @@ -25,65 +25,6 @@ ".spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after", ".spectrum-Tag:not(.is-disabled, .is-readOnly):hover" ], - "modifiers": [ - "--mod-tag-animation-duration", - "--mod-tag-avatar-size", - "--mod-tag-avatar-spacing-block-end", - "--mod-tag-avatar-spacing-block-start", - "--mod-tag-background-color", - "--mod-tag-background-color-active", - "--mod-tag-background-color-disabled", - "--mod-tag-background-color-emphasized", - "--mod-tag-background-color-emphasized-active", - "--mod-tag-background-color-emphasized-focus", - "--mod-tag-background-color-emphasized-hover", - "--mod-tag-background-color-focus", - "--mod-tag-background-color-hover", - "--mod-tag-background-color-selected", - "--mod-tag-background-color-selected-active", - "--mod-tag-background-color-selected-focus", - "--mod-tag-background-color-selected-hover", - "--mod-tag-border-color", - "--mod-tag-border-color-active", - "--mod-tag-border-color-disabled", - "--mod-tag-border-color-emphasized", - "--mod-tag-border-color-focus", - "--mod-tag-border-color-hover", - "--mod-tag-border-color-selected", - "--mod-tag-border-width", - "--mod-tag-clear-button-size", - "--mod-tag-clear-button-spacing-block", - "--mod-tag-content-color", - "--mod-tag-content-color-active", - "--mod-tag-content-color-disabled", - "--mod-tag-content-color-emphasized", - "--mod-tag-content-color-focus", - "--mod-tag-content-color-hover", - "--mod-tag-content-color-selected", - "--mod-tag-corner-radius", - "--mod-tag-edge-to-clear-icon", - "--mod-tag-focus-ring-color", - "--mod-tag-focus-ring-gap", - "--mod-tag-focus-ring-thickness", - "--mod-tag-font-size", - "--mod-tag-height", - "--mod-tag-icon-size", - "--mod-tag-icon-spacing-block-end", - "--mod-tag-icon-spacing-block-start", - "--mod-tag-label-font-family", - "--mod-tag-label-font-style", - "--mod-tag-label-font-weight", - "--mod-tag-label-line-height", - "--mod-tag-label-line-height-cjk", - "--mod-tag-label-spacing-block", - "--mod-tag-label-spacing-inline", - "--mod-tag-label-to-clear-icon", - "--mod-tag-maximum-width-multiplier", - "--mod-tag-min-inline-size", - "--mod-tag-thumbnail-size", - "--mod-tag-visual-spacing-inline-end", - "--mod-tag-visual-spacing-inline-start" - ], "component": [ "--spectrum-tag-animation-duration", "--spectrum-tag-avatar-size", @@ -106,9 +47,6 @@ "--spectrum-tag-content-color-hover", "--spectrum-tag-corner-radius", "--spectrum-tag-edge-to-clear-icon", - "--spectrum-tag-edge-to-clear-icon-large", - "--spectrum-tag-edge-to-clear-icon-medium", - "--spectrum-tag-edge-to-clear-icon-small", "--spectrum-tag-focus-ring-color", "--spectrum-tag-focus-ring-gap", "--spectrum-tag-focus-ring-thickness", @@ -125,21 +63,8 @@ "--spectrum-tag-label-spacing-block", "--spectrum-tag-label-spacing-inline", "--spectrum-tag-label-to-clear-icon", - "--spectrum-tag-label-to-clear-icon-large", - "--spectrum-tag-label-to-clear-icon-medium", - "--spectrum-tag-label-to-clear-icon-small", - "--spectrum-tag-maximum-width-multiplier", "--spectrum-tag-min-inline-size", - "--spectrum-tag-minimum-width-large", - "--spectrum-tag-minimum-width-medium", - "--spectrum-tag-minimum-width-small", "--spectrum-tag-thumbnail-size", - "--spectrum-tag-top-to-avatar-large", - "--spectrum-tag-top-to-avatar-medium", - "--spectrum-tag-top-to-avatar-small", - "--spectrum-tag-top-to-cross-icon-large", - "--spectrum-tag-top-to-cross-icon-medium", - "--spectrum-tag-top-to-cross-icon-small", "--spectrum-tag-visual-spacing-inline-end", "--spectrum-tag-visual-spacing-inline-start" ], @@ -203,6 +128,22 @@ "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", "--spectrum-sans-font-family-stack", + "--spectrum-tag-edge-to-clear-icon-large", + "--spectrum-tag-edge-to-clear-icon-medium", + "--spectrum-tag-edge-to-clear-icon-small", + "--spectrum-tag-label-to-clear-icon-large", + "--spectrum-tag-label-to-clear-icon-medium", + "--spectrum-tag-label-to-clear-icon-small", + "--spectrum-tag-maximum-width-multiplier", + "--spectrum-tag-minimum-width-large", + "--spectrum-tag-minimum-width-medium", + "--spectrum-tag-minimum-width-small", + "--spectrum-tag-top-to-avatar-large", + "--spectrum-tag-top-to-avatar-medium", + "--spectrum-tag-top-to-avatar-small", + "--spectrum-tag-top-to-cross-icon-large", + "--spectrum-tag-top-to-cross-icon-medium", + "--spectrum-tag-top-to-cross-icon-small", "--spectrum-text-to-visual-100", "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-75", @@ -215,20 +156,7 @@ "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-75" ], - "passthroughs": [ - "--mod-avatar-block-size", - "--mod-avatar-inline-size", - "--mod-avatar-opacity-disabled", - "--mod-clear-button-background-color", - "--mod-clear-button-height", - "--mod-clear-button-icon-color", - "--mod-clear-button-icon-color-hover", - "--mod-clear-button-icon-color-key-focus", - "--mod-clear-button-width", - "--mod-icon-size", - "--mod-thumbnail-opacity-disabled", - "--mod-thumbnail-size" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-tag-background-color", "--highcontrast-tag-background-color-active", diff --git a/components/taggroup/dist/metadata.json b/components/taggroup/dist/metadata.json index 28ca5140d81..47e74a61ca1 100644 --- a/components/taggroup/dist/metadata.json +++ b/components/taggroup/dist/metadata.json @@ -17,18 +17,6 @@ ".spectrum-TagGroup:lang(ko)", ".spectrum-TagGroup:lang(zh)" ], - "modifiers": [ - "--mod-body-cjk-line-height", - "--mod-body-font-size", - "--mod-body-line-height", - "--mod-body-margin-end", - "--mod-body-margin-start", - "--mod-tag-group-block-spacing-label-to-tags", - "--mod-tag-group-block-tag-spacing", - "--mod-tag-group-inline-spacing-label-to-tags", - "--mod-tag-group-inline-tag-spacing", - "--mod-tag-group-spacing-help-text-to-tags" - ], "component": [ "--spectrum-tag-group-block-spacing-label-to-tags", "--spectrum-tag-group-block-tag-spacing", diff --git a/components/textfield/dist/metadata.json b/components/textfield/dist/metadata.json index 073bc68dfb2..7f23cccb3b6 100644 --- a/components/textfield/dist/metadata.json +++ b/components/textfield/dist/metadata.json @@ -92,70 +92,7 @@ ".spectrum-Textfield:hover .spectrum-Textfield-input", ".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder" ], - "modifiers": [ - "--mod-text-area-min-block-size", - "--mod-text-area-min-inline-size", - "--mod-textfield-animation-duration", - "--mod-textfield-background-color", - "--mod-textfield-background-color-disabled", - "--mod-textfield-border-color", - "--mod-textfield-border-color-disabled", - "--mod-textfield-border-color-focus", - "--mod-textfield-border-color-focus-hover", - "--mod-textfield-border-color-hover", - "--mod-textfield-border-color-invalid-default", - "--mod-textfield-border-color-invalid-focus", - "--mod-textfield-border-color-invalid-focus-hover", - "--mod-textfield-border-color-invalid-hover", - "--mod-textfield-border-color-invalid-keyboard-focus", - "--mod-textfield-border-color-keyboard-focus", - "--mod-textfield-border-width", - "--mod-textfield-character-count-color", - "--mod-textfield-character-count-spacing-block", - "--mod-textfield-character-count-spacing-block-side", - "--mod-textfield-character-count-spacing-inline", - "--mod-textfield-character-count-spacing-inline-side", - "--mod-textfield-corner-radius", - "--mod-textfield-focus-indicator-color", - "--mod-textfield-focus-indicator-gap", - "--mod-textfield-focus-indicator-width", - "--mod-textfield-font-family", - "--mod-textfield-font-size", - "--mod-textfield-font-style", - "--mod-textfield-font-weight", - "--mod-textfield-height", - "--mod-textfield-helptext-spacing-block", - "--mod-textfield-icon-color-invalid", - "--mod-textfield-icon-color-valid", - "--mod-textfield-icon-size-invalid", - "--mod-textfield-icon-size-valid", - "--mod-textfield-icon-spacing-block-invalid", - "--mod-textfield-icon-spacing-block-valid", - "--mod-textfield-icon-spacing-inline-end-invalid", - "--mod-textfield-icon-spacing-inline-end-valid", - "--mod-textfield-icon-spacing-inline-start-invalid", - "--mod-textfield-icon-spacing-inline-start-valid", - "--mod-textfield-label-spacing-block", - "--mod-textfield-label-spacing-inline-side-label", - "--mod-textfield-line-height", - "--mod-textfield-line-height-cjk", - "--mod-textfield-min-width", - "--mod-textfield-spacing-block-end", - "--mod-textfield-spacing-block-start", - "--mod-textfield-spacing-inline", - "--mod-textfield-text-color-default", - "--mod-textfield-text-color-disabled", - "--mod-textfield-text-color-focus", - "--mod-textfield-text-color-focus-hover", - "--mod-textfield-text-color-hover", - "--mod-textfield-text-color-invalid", - "--mod-textfield-text-color-keyboard-focus", - "--mod-textfield-text-color-readonly", - "--mod-textfield-text-color-valid", - "--mod-textfield-width" - ], "component": [ - "--spectrum-text-field-minimum-width-multiplier", "--spectrum-textfield-animation-duration", "--spectrum-textfield-background-color", "--spectrum-textfield-background-color-disabled", @@ -303,6 +240,7 @@ "--spectrum-text-area-min-inline-size", "--spectrum-text-area-minimum-height", "--spectrum-text-area-minimum-width", + "--spectrum-text-field-minimum-width-multiplier", "--spectrum-text-to-visual-100", "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-300", diff --git a/components/thumbnail/dist/metadata.json b/components/thumbnail/dist/metadata.json index 2a5fa051ef2..07874f816b4 100644 --- a/components/thumbnail/dist/metadata.json +++ b/components/thumbnail/dist/metadata.json @@ -28,31 +28,13 @@ ".spectrum-Thumbnail.is-focused:after", ".spectrum-Thumbnail:before" ], - "modifiers": [ - "--mod-thumbnail-border-color", - "--mod-thumbnail-border-color-selected", - "--mod-thumbnail-border-radius", - "--mod-thumbnail-border-width", - "--mod-thumbnail-border-width-selected", - "--mod-thumbnail-color-opacity-disabled", - "--mod-thumbnail-focus-indicator-color", - "--mod-thumbnail-focus-indicator-gap", - "--mod-thumbnail-focus-indicator-thickness", - "--mod-thumbnail-layer-border-color-inner", - "--mod-thumbnail-layer-border-color-outer", - "--mod-thumbnail-layer-border-width-inner", - "--mod-thumbnail-layer-border-width-outer", - "--mod-thumbnail-size" - ], "component": [ "--spectrum-thumbnail-border-color", "--spectrum-thumbnail-border-color-selected", - "--spectrum-thumbnail-border-opacity", "--spectrum-thumbnail-border-radius", "--spectrum-thumbnail-border-width", "--spectrum-thumbnail-border-width-selected", "--spectrum-thumbnail-color-opacity-disabled", - "--spectrum-thumbnail-corner-radius", "--spectrum-thumbnail-focus-indicator-color", "--spectrum-thumbnail-focus-indicator-gap", "--spectrum-thumbnail-focus-indicator-thickness", @@ -60,9 +42,22 @@ "--spectrum-thumbnail-layer-border-color-outer", "--spectrum-thumbnail-layer-border-width-inner", "--spectrum-thumbnail-layer-border-width-outer", + "--spectrum-thumbnail-size" + ], + "global": [ + "--spectrum-accent-color-800", + "--spectrum-border-width-100", + "--spectrum-border-width-200", + "--spectrum-border-width-400", + "--spectrum-focus-indicator-color", + "--spectrum-focus-indicator-gap", + "--spectrum-focus-indicator-thickness", + "--spectrum-gray-500", + "--spectrum-gray-800-rgb", + "--spectrum-thumbnail-border-opacity", + "--spectrum-thumbnail-corner-radius", "--spectrum-thumbnail-opacity-checkerboard-square-size", "--spectrum-thumbnail-opacity-disabled", - "--spectrum-thumbnail-size", "--spectrum-thumbnail-size-100", "--spectrum-thumbnail-size-1000", "--spectrum-thumbnail-size-200", @@ -74,21 +69,10 @@ "--spectrum-thumbnail-size-700", "--spectrum-thumbnail-size-75", "--spectrum-thumbnail-size-800", - "--spectrum-thumbnail-size-900" - ], - "global": [ - "--spectrum-accent-color-800", - "--spectrum-border-width-100", - "--spectrum-border-width-200", - "--spectrum-border-width-400", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", - "--spectrum-focus-indicator-thickness", - "--spectrum-gray-500", - "--spectrum-gray-800-rgb", + "--spectrum-thumbnail-size-900", "--spectrum-white" ], - "passthroughs": ["--mod-opacity-checkerboard-size"], + "passthroughs": [], "high-contrast": [ "--highcontrast-thumbnail-border-color", "--highcontrast-thumbnail-border-color-selected", diff --git a/components/toast/dist/metadata.json b/components/toast/dist/metadata.json index 50e0b73d5b1..6a08b9cf0b7 100644 --- a/components/toast/dist/metadata.json +++ b/components/toast/dist/metadata.json @@ -17,46 +17,18 @@ ".spectrum-Toast.spectrum-Toast--noButton", ".spectrum-Toast:not(:has(.spectrum-Button))" ], - "modifiers": [ - "--mod-toast-background-color-default", - "--mod-toast-corner-radius", - "--mod-toast-font-family", - "--mod-toast-font-size", - "--mod-toast-font-style", - "--mod-toast-font-weight", - "--mod-toast-icon-block-size", - "--mod-toast-informative-background-color-default", - "--mod-toast-line-height", - "--mod-toast-line-height-cjk", - "--mod-toast-max-inline-size", - "--mod-toast-min-block-size", - "--mod-toast-negative-background-color-default", - "--mod-toast-positive-background-color-default", - "--mod-toast-spacing-block-close-button", - "--mod-toast-spacing-button-to-close-button-horizontal", - "--mod-toast-spacing-close-button-to-end-edge", - "--mod-toast-spacing-icon-to-text", - "--mod-toast-spacing-start-edge-to-text-and-icon", - "--mod-toast-spacing-text-to-button-vertical", - "--mod-toast-spacing-text-to-close-button", - "--mod-toast-spacing-toast-to-edge", - "--mod-toast-text-and-icon-color" - ], "component": [ "--spectrum-toast-background-color-default", - "--spectrum-toast-bottom-to-text", "--spectrum-toast-corner-radius", "--spectrum-toast-font-family", "--spectrum-toast-font-size", "--spectrum-toast-font-style", "--spectrum-toast-font-weight", - "--spectrum-toast-height", "--spectrum-toast-icon-block-size", "--spectrum-toast-informative-background-color-default", "--spectrum-toast-line-height", "--spectrum-toast-line-height-cjk", "--spectrum-toast-max-inline-size", - "--spectrum-toast-maximum-width", "--spectrum-toast-min-block-size", "--spectrum-toast-negative-background-color-default", "--spectrum-toast-positive-background-color-default", @@ -72,9 +44,7 @@ "--spectrum-toast-spacing-toast-to-edge", "--spectrum-toast-spacing-top-edge-to-icon", "--spectrum-toast-spacing-top-edge-to-text", - "--spectrum-toast-text-and-icon-color", - "--spectrum-toast-top-to-text", - "--spectrum-toast-top-to-workflow-icon" + "--spectrum-toast-text-and-icon-color" ], "global": [ "--spectrum-cjk-line-height-100", @@ -93,9 +63,14 @@ "--spectrum-spacing-300", "--spectrum-spacing-400", "--spectrum-text-to-visual-300", + "--spectrum-toast-bottom-to-text", + "--spectrum-toast-height", + "--spectrum-toast-maximum-width", + "--spectrum-toast-top-to-text", + "--spectrum-toast-top-to-workflow-icon", "--spectrum-white", "--spectrum-workflow-icon-size-100" ], - "passthroughs": ["--mod-closebutton-icon-color-default"], + "passthroughs": [], "high-contrast": [] } diff --git a/components/tooltip/dist/metadata.json b/components/tooltip/dist/metadata.json index 9c7a37c1250..7ae966c1ef4 100644 --- a/components/tooltip/dist/metadata.json +++ b/components/tooltip/dist/metadata.json @@ -249,32 +249,6 @@ ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-right", ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-start" ], - "modifiers": [ - "--mod-overlay-animation-duration", - "--mod-overlay-animation-duration-opened", - "--mod-tooltip-animation-distance", - "--mod-tooltip-background-color-default", - "--mod-tooltip-background-color-informative", - "--mod-tooltip-background-color-negative", - "--mod-tooltip-border-radius", - "--mod-tooltip-cjk-line-height", - "--mod-tooltip-content-color", - "--mod-tooltip-font-size", - "--mod-tooltip-font-weight", - "--mod-tooltip-height", - "--mod-tooltip-line-height", - "--mod-tooltip-margin", - "--mod-tooltip-max-inline-size", - "--mod-tooltip-pointer-corner-spacing", - "--mod-tooltip-spacing-block-end", - "--mod-tooltip-spacing-block-start", - "--mod-tooltip-spacing-inline", - "--mod-tooltip-tip-antialiasing-inset", - "--mod-tooltip-tip-block-size", - "--mod-tooltip-tip-corner-radius", - "--mod-tooltip-tip-height-percentage", - "--mod-tooltip-tip-square-size" - ], "component": [ "--spectrum-tooltip-animation-distance", "--spectrum-tooltip-animation-duration", @@ -290,17 +264,13 @@ "--spectrum-tooltip-line-height", "--spectrum-tooltip-margin", "--spectrum-tooltip-max-inline-size", - "--spectrum-tooltip-maximum-width", "--spectrum-tooltip-pointer-corner-spacing", "--spectrum-tooltip-spacing-block-end", "--spectrum-tooltip-spacing-block-start", "--spectrum-tooltip-spacing-inline", "--spectrum-tooltip-tip-antialiasing-inset", "--spectrum-tooltip-tip-block-size", - "--spectrum-tooltip-tip-corner-radius", - "--spectrum-tooltip-tip-height", - "--spectrum-tooltip-tip-height-percentage", - "--spectrum-tooltip-tip-square-size" + "--spectrum-tooltip-tip-height-percentage" ], "global": [ "--spectrum-animation-duration-0", @@ -317,7 +287,11 @@ "--spectrum-negative-background-color-default", "--spectrum-neutral-background-color-default", "--spectrum-regular-font-weight", - "--spectrum-spacing-75" + "--spectrum-spacing-75", + "--spectrum-tooltip-maximum-width", + "--spectrum-tooltip-tip-corner-radius", + "--spectrum-tooltip-tip-height", + "--spectrum-tooltip-tip-square-size" ], "passthroughs": [], "high-contrast": [ diff --git a/components/tray/dist/metadata.json b/components/tray/dist/metadata.json index db6c152c441..30c70ee08f9 100644 --- a/components/tray/dist/metadata.json +++ b/components/tray/dist/metadata.json @@ -6,19 +6,6 @@ ".spectrum-Tray-wrapper", ".spectrum-Tray.is-open" ], - "modifiers": [ - "--mod-tray-background-color", - "--mod-tray-bottom-to-content-area", - "--mod-tray-corner-radius", - "--mod-tray-corner-radius-portrait", - "--mod-tray-entry-animation-delay", - "--mod-tray-entry-animation-duration", - "--mod-tray-exit-animation-delay", - "--mod-tray-exit-animation-duration", - "--mod-tray-max-inline-size", - "--mod-tray-spacing-edge-to-tray-safe-zone", - "--mod-tray-top-to-content-area" - ], "component": [ "--spectrum-tray-background-color", "--spectrum-tray-corner-radius", @@ -27,15 +14,15 @@ "--spectrum-tray-exit-animation-delay", "--spectrum-tray-exit-animation-duration", "--spectrum-tray-max-inline-size", - "--spectrum-tray-spacing-edge-to-tray-safe-zone", - "--spectrum-tray-top-to-content-area" + "--spectrum-tray-spacing-edge-to-tray-safe-zone" ], "global": [ "--spectrum-animation-duration-100", "--spectrum-animation-duration-500", "--spectrum-background-layer-2-color", - "--spectrum-corner-radius-100" + "--spectrum-corner-radius-100", + "--spectrum-tray-top-to-content-area" ], - "passthroughs": ["--mod-modal-max-width"], + "passthroughs": [], "high-contrast": ["--highcontrast-tray-background-color"] } diff --git a/components/treeview/dist/metadata.json b/components/treeview/dist/metadata.json index b8515093336..1824eec8be7 100644 --- a/components/treeview/dist/metadata.json +++ b/components/treeview/dist/metadata.json @@ -50,46 +50,6 @@ ".spectrum-TreeView.spectrum-TreeView--thumbnail", ".spectrum-TreeView:dir(rtl)" ], - "modifiers": [ - "--mod-treeview-font-size", - "--mod-treeview-heading-bottom-to-text", - "--mod-treeview-heading-color", - "--mod-treeview-heading-font-weight", - "--mod-treeview-indicator-animation-duration", - "--mod-treeview-indicator-margin-inline-start", - "--mod-treeview-indicator-padding-block", - "--mod-treeview-indicator-padding-inline", - "--mod-treeview-item-background-color-focus", - "--mod-treeview-item-background-color-hover", - "--mod-treeview-item-background-color-quiet-selected", - "--mod-treeview-item-background-color-selected", - "--mod-treeview-item-border-color-focus", - "--mod-treeview-item-border-color-selected", - "--mod-treeview-item-border-color-selected-quiet", - "--mod-treeview-item-border-radius", - "--mod-treeview-item-border-radius-detached", - "--mod-treeview-item-border-size", - "--mod-treeview-item-border-size-selected", - "--mod-treeview-item-icon-color", - "--mod-treeview-item-icon-color-disabled", - "--mod-treeview-item-icon-color-focus", - "--mod-treeview-item-icon-color-hover", - "--mod-treeview-item-icon-color-selected", - "--mod-treeview-item-icon-gap", - "--mod-treeview-item-indentation", - "--mod-treeview-item-min-block-size", - "--mod-treeview-item-min-block-size-thumbnail", - "--mod-treeview-item-padding-inline-end", - "--mod-treeview-item-padding-inline-start", - "--mod-treeview-item-text-color", - "--mod-treeview-item-text-color-disabled", - "--mod-treeview-item-text-color-focus", - "--mod-treeview-item-text-color-hover", - "--mod-treeview-item-text-color-selected", - "--mod-treeview-line-height", - "--mod-treeview-margin-block", - "--mod-treeview-section-spacing" - ], "component": [ "--spectrum-treeview-font-size", "--spectrum-treeview-heading-bottom-to-text", @@ -114,13 +74,8 @@ "--spectrum-treeview-item-icon-color-selected", "--spectrum-treeview-item-icon-gap", "--spectrum-treeview-item-indentation", - "--spectrum-treeview-item-indentation-extra-large", - "--spectrum-treeview-item-indentation-large", - "--spectrum-treeview-item-indentation-medium", - "--spectrum-treeview-item-indentation-small", "--spectrum-treeview-item-min-block-size", "--spectrum-treeview-item-min-block-size-thumbnail-offset", - "--spectrum-treeview-item-min-block-size-thumbnail-offset-medium", "--spectrum-treeview-item-padding-inline-end", "--spectrum-treeview-item-padding-inline-start", "--spectrum-treeview-item-sized-indentation", @@ -136,6 +91,8 @@ "--spectrum-animation-duration-100", "--spectrum-blue-700", "--spectrum-blue-800", + "--spectrum-blue-800-rgb", + "--spectrum-blue-900-rgb", "--spectrum-bold-font-weight", "--spectrum-border-width-200", "--spectrum-component-edge-to-text-100", @@ -160,11 +117,17 @@ "--spectrum-gray-500", "--spectrum-gray-700", "--spectrum-gray-900", + "--spectrum-gray-900-rgb", "--spectrum-heading-color", "--spectrum-line-height-200", "--spectrum-logical-rotation", "--spectrum-neutral-content-color-default", - "--spectrum-text-to-visual-75" + "--spectrum-text-to-visual-75", + "--spectrum-treeview-item-indentation-extra-large", + "--spectrum-treeview-item-indentation-large", + "--spectrum-treeview-item-indentation-medium", + "--spectrum-treeview-item-indentation-small", + "--spectrum-treeview-item-min-block-size-thumbnail-offset-medium" ], "passthroughs": [], "high-contrast": [ diff --git a/components/treeview/index.css b/components/treeview/index.css index 4e203633841..fbbd4d764c4 100644 --- a/components/treeview/index.css +++ b/components/treeview/index.css @@ -12,6 +12,10 @@ */ .spectrum-TreeView { + /** default light colors */ + --spectrum-treeview-item-background-color-quiet-selected: rgb(var(--spectrum-gray-900-rgb), 0.06); + --spectrum-treeview-item-background-color-selected: rgb(var(--spectrum-blue-900-rgb), 0.1); + --spectrum-treeview-item-border-size: var(--mod-treeview-item-border-size, var(--spectrum-border-width-200)); --spectrum-treeview-item-border-size-selected: var(--mod-treeview-item-border-size-selected, 1px); --spectrum-treeview-item-border-radius: var(--mod-treeview-item-border-radius, 0px); @@ -52,7 +56,14 @@ --spectrum-treeview-indicator-margin-inline-start: var(--mod-treeview-indicator-margin-inline-start, calc(-1 * var(--spectrum-component-height-100))); --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-medium); - --spectrum-treeview-item-min-block-size-thumbnail-offset: var(--spectrum-treeview-item-min-block-size-thumbnail-offset-medium, 0); + --spectrum-treeview-item-min-block-size-thumbnail-offset: var(--spectrum-treeview-item-min-block-size-thumbnail-offset-medium); +} + +@media (prefers-color-scheme: dark) { + .spectrum-TreeView { + --spectrum-treeview-item-background-color-quiet-selected: rgb(var(--spectrum-gray-900-rgb), 0.07); + --spectrum-treeview-item-background-color-selected: rgb(var(--spectrum-blue-800-rgb), 0.15); + } } .spectrum-TreeView--sizeS { diff --git a/components/typography/dist/metadata.json b/components/typography/dist/metadata.json index 3ef566f741d..1969928cf16 100644 --- a/components/typography/dist/metadata.json +++ b/components/typography/dist/metadata.json @@ -298,208 +298,6 @@ ".spectrum-Typography:lang(ar)", ".spectrum-Typography:lang(he)" ], - "modifiers": [ - "--mod-body-cjk-emphasized-font-style", - "--mod-body-cjk-emphasized-font-weight", - "--mod-body-cjk-font-family", - "--mod-body-cjk-font-style", - "--mod-body-cjk-font-weight", - "--mod-body-cjk-letter-spacing", - "--mod-body-cjk-line-height", - "--mod-body-cjk-strong-emphasized-font-style", - "--mod-body-cjk-strong-emphasized-font-weight", - "--mod-body-cjk-strong-font-style", - "--mod-body-cjk-strong-font-weight", - "--mod-body-font-color", - "--mod-body-font-size", - "--mod-body-line-height", - "--mod-body-margin", - "--mod-body-margin-end", - "--mod-body-margin-start", - "--mod-body-sans-serif-emphasized-font-style", - "--mod-body-sans-serif-emphasized-font-weight", - "--mod-body-sans-serif-font-family", - "--mod-body-sans-serif-font-style", - "--mod-body-sans-serif-font-weight", - "--mod-body-sans-serif-strong-emphasized-font-style", - "--mod-body-sans-serif-strong-emphasized-font-weight", - "--mod-body-sans-serif-strong-font-style", - "--mod-body-sans-serif-strong-font-weight", - "--mod-body-serif-emphasized-font-style", - "--mod-body-serif-emphasized-font-weight", - "--mod-body-serif-font-family", - "--mod-body-serif-font-style", - "--mod-body-serif-font-weight", - "--mod-body-serif-strong-emphasized-font-style", - "--mod-body-serif-strong-emphasized-font-weight", - "--mod-body-serif-strong-font-style", - "--mod-body-serif-strong-font-weight", - "--mod-code-cjk-emphasized-font-style", - "--mod-code-cjk-emphasized-font-weight", - "--mod-code-cjk-font-family", - "--mod-code-cjk-font-style", - "--mod-code-cjk-font-weight", - "--mod-code-cjk-letter-spacing", - "--mod-code-cjk-line-height", - "--mod-code-cjk-strong-emphasized-font-style", - "--mod-code-cjk-strong-emphasized-font-weight", - "--mod-code-cjk-strong-font-style", - "--mod-code-cjk-strong-font-weight", - "--mod-code-emphasized-font-style", - "--mod-code-emphasized-font-weight", - "--mod-code-font-color", - "--mod-code-font-family", - "--mod-code-font-size", - "--mod-code-font-style", - "--mod-code-font-weight", - "--mod-code-line-height", - "--mod-code-margin-end", - "--mod-code-margin-start", - "--mod-code-strong-emphasized-font-style", - "--mod-code-strong-emphasized-font-weight", - "--mod-code-strong-font-style", - "--mod-code-strong-font-weight", - "--mod-detail-cjk-emphasized-font-style", - "--mod-detail-cjk-emphasized-font-weight", - "--mod-detail-cjk-font-family", - "--mod-detail-cjk-font-style", - "--mod-detail-cjk-font-weight", - "--mod-detail-cjk-light-emphasized-font-style", - "--mod-detail-cjk-light-emphasized-font-weight", - "--mod-detail-cjk-light-font-style", - "--mod-detail-cjk-light-font-weight", - "--mod-detail-cjk-light-strong-emphasized-font-style", - "--mod-detail-cjk-light-strong-emphasized-font-weight", - "--mod-detail-cjk-light-strong-font-style", - "--mod-detail-cjk-light-strong-font-weight", - "--mod-detail-cjk-line-height", - "--mod-detail-cjk-strong-emphasized-font-style", - "--mod-detail-cjk-strong-emphasized-font-weight", - "--mod-detail-cjk-strong-font-style", - "--mod-detail-cjk-strong-font-weight", - "--mod-detail-font-color", - "--mod-detail-font-size", - "--mod-detail-letter-spacing", - "--mod-detail-line-height", - "--mod-detail-margin-end", - "--mod-detail-margin-start", - "--mod-detail-sans-serif-emphasized-font-style", - "--mod-detail-sans-serif-emphasized-font-weight", - "--mod-detail-sans-serif-font-family", - "--mod-detail-sans-serif-font-style", - "--mod-detail-sans-serif-font-weight", - "--mod-detail-sans-serif-light-emphasized-font-style", - "--mod-detail-sans-serif-light-emphasized-font-weight", - "--mod-detail-sans-serif-light-font-style", - "--mod-detail-sans-serif-light-strong-emphasized-font-style", - "--mod-detail-sans-serif-light-strong-emphasized-font-weight", - "--mod-detail-sans-serif-light-strong-font-style", - "--mod-detail-sans-serif-light-strong-font-weight", - "--mod-detail-sans-serif-strong-emphasized-font-style", - "--mod-detail-sans-serif-strong-emphasized-font-weight", - "--mod-detail-sans-serif-strong-font-style", - "--mod-detail-sans-serif-strong-font-weight", - "--mod-detail-serif-emphasized-font-style", - "--mod-detail-serif-emphasized-font-weight", - "--mod-detail-serif-font-family", - "--mod-detail-serif-font-style", - "--mod-detail-serif-font-weight", - "--mod-detail-serif-light-emphasized-font-style", - "--mod-detail-serif-light-emphasized-font-weight", - "--mod-detail-serif-light-font-style", - "--mod-detail-serif-light-font-weight", - "--mod-detail-serif-light-strong-emphasized-font-style", - "--mod-detail-serif-light-strong-emphasized-font-weight", - "--mod-detail-serif-light-strong-font-style", - "--mod-detail-serif-light-strong-font-weight", - "--mod-detail-serif-strong-emphasized-font-style", - "--mod-detail-serif-strong-emphasized-font-weight", - "--mod-detail-serif-strong-font-style", - "--mod-detail-serif-strong-font-weight", - "--mod-heading-cjk-emphasized-font-style", - "--mod-heading-cjk-emphasized-font-weight", - "--mod-heading-cjk-font-family", - "--mod-heading-cjk-font-size", - "--mod-heading-cjk-font-style", - "--mod-heading-cjk-font-weight", - "--mod-heading-cjk-heavy-emphasized-font-style", - "--mod-heading-cjk-heavy-emphasized-font-weight", - "--mod-heading-cjk-heavy-font-style", - "--mod-heading-cjk-heavy-font-weight", - "--mod-heading-cjk-heavy-strong-emphasized-font-style", - "--mod-heading-cjk-heavy-strong-emphasized-font-weight", - "--mod-heading-cjk-heavy-strong-font-style", - "--mod-heading-cjk-heavy-strong-font-weight", - "--mod-heading-cjk-letter-spacing", - "--mod-heading-cjk-light-emphasized-font-style", - "--mod-heading-cjk-light-emphasized-font-weight", - "--mod-heading-cjk-light-font-style", - "--mod-heading-cjk-light-font-weight", - "--mod-heading-cjk-light-strong-emphasized-font-style", - "--mod-heading-cjk-light-strong-emphasized-font-weight", - "--mod-heading-cjk-light-strong-font-style", - "--mod-heading-cjk-light-strong-font-weight", - "--mod-heading-cjk-line-height", - "--mod-heading-cjk-strong-emphasized-font-style", - "--mod-heading-cjk-strong-emphasized-font-weight", - "--mod-heading-cjk-strong-font-style", - "--mod-heading-cjk-strong-font-weight", - "--mod-heading-font-color", - "--mod-heading-font-size", - "--mod-heading-line-height", - "--mod-heading-margin-end", - "--mod-heading-margin-start", - "--mod-heading-sans-serif-emphasized-font-style", - "--mod-heading-sans-serif-emphasized-font-weight", - "--mod-heading-sans-serif-font-family", - "--mod-heading-sans-serif-font-style", - "--mod-heading-sans-serif-font-weight", - "--mod-heading-sans-serif-heavy-emphasized-font-style", - "--mod-heading-sans-serif-heavy-emphasized-font-weight", - "--mod-heading-sans-serif-heavy-font-style", - "--mod-heading-sans-serif-heavy-font-weight", - "--mod-heading-sans-serif-heavy-strong-emphasized-font-style", - "--mod-heading-sans-serif-heavy-strong-emphasized-font-weight", - "--mod-heading-sans-serif-heavy-strong-font-style", - "--mod-heading-sans-serif-heavy-strong-font-weight", - "--mod-heading-sans-serif-light-emphasized-font-style", - "--mod-heading-sans-serif-light-emphasized-font-weight", - "--mod-heading-sans-serif-light-font-style", - "--mod-heading-sans-serif-light-font-weight", - "--mod-heading-sans-serif-light-strong-emphasized-font-style", - "--mod-heading-sans-serif-light-strong-emphasized-font-weight", - "--mod-heading-sans-serif-light-strong-font-style", - "--mod-heading-sans-serif-light-strong-font-weight", - "--mod-heading-sans-serif-strong-emphasized-font-style", - "--mod-heading-sans-serif-strong-emphasized-font-weight", - "--mod-heading-sans-serif-strong-font-style", - "--mod-heading-sans-serif-strong-font-weight", - "--mod-heading-serif-emphasized-font-style", - "--mod-heading-serif-emphasized-font-weight", - "--mod-heading-serif-font-family", - "--mod-heading-serif-font-style", - "--mod-heading-serif-font-weight", - "--mod-heading-serif-heavy-emphasized-font-style", - "--mod-heading-serif-heavy-emphasized-font-weight", - "--mod-heading-serif-heavy-font-style", - "--mod-heading-serif-heavy-font-weight", - "--mod-heading-serif-heavy-strong-emphasized-font-style", - "--mod-heading-serif-heavy-strong-emphasized-font-weight", - "--mod-heading-serif-heavy-strong-font-style", - "--mod-heading-serif-heavy-strong-font-weight", - "--mod-heading-serif-light-emphasized-font-style", - "--mod-heading-serif-light-emphasized-font-weight", - "--mod-heading-serif-light-font-style", - "--mod-heading-serif-light-font-weight", - "--mod-heading-serif-light-strong-emphasized-font-style", - "--mod-heading-serif-light-strong-emphasized-font-weight", - "--mod-heading-serif-light-strong-font-style", - "--mod-heading-serif-light-strong-font-weight", - "--mod-heading-serif-strong-emphasized-font-style", - "--mod-heading-serif-strong-emphasized-font-weight", - "--mod-heading-serif-strong-font-style", - "--mod-heading-serif-strong-font-weight" - ], "component": [], "global": [ "--spectrum-body-cjk-emphasized-font-style", @@ -576,6 +374,7 @@ "--spectrum-code-strong-emphasized-font-weight", "--spectrum-code-strong-font-style", "--spectrum-code-strong-font-weight", + "--spectrum-default-font-style", "--spectrum-detail-cjk-emphasized-font-style", "--spectrum-detail-cjk-emphasized-font-weight", "--spectrum-detail-cjk-font-family", @@ -641,11 +440,7 @@ "--spectrum-detail-size-m", "--spectrum-detail-size-s", "--spectrum-detail-size-xl", - "--spectrum-font-family", - "--spectrum-font-family-ar", - "--spectrum-font-family-he", - "--spectrum-font-size", - "--spectrum-font-style", + "--spectrum-font-size-100", "--spectrum-heading-cjk-emphasized-font-style", "--spectrum-heading-cjk-emphasized-font-weight", "--spectrum-heading-cjk-font-family", diff --git a/components/typography/index.css b/components/typography/index.css index 25ffeaa8a2f..b18b564d778 100644 --- a/components/typography/index.css +++ b/components/typography/index.css @@ -13,16 +13,38 @@ /* Typography - Default */ .spectrum-Typography { - font-family: var(--spectrum-font-family); - font-style: var(--spectrum-font-style); - font-size: var(--spectrum-font-size); + font-family: var(--spectrum-sans-font-family-stack); + font-style: var(--spectrum-default-font-style); + font-size: var(--spectrum-font-size-100); &:lang(ar) { - font-family: var(--spectrum-font-family-ar); + font-family: + myriad-arabic, + adobe-clean, + "Source Sans Pro", + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + Ubuntu, + "Trebuchet MS", + "Lucida Grande", + sans-serif; } &:lang(he) { - font-family: var(--spectrum-font-family-he); + font-family: + myriad-hebrew, + adobe-clean, + "Source Sans Pro", + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + Ubuntu, + "Trebuchet MS", + "Lucida Grande", + sans-serif; } /* Add margin when inside a Typography component */ diff --git a/components/underlay/dist/metadata.json b/components/underlay/dist/metadata.json index 21a3e4aa1d0..6c3e6ddac4b 100644 --- a/components/underlay/dist/metadata.json +++ b/components/underlay/dist/metadata.json @@ -1,16 +1,6 @@ { "sourceFile": "index.css", "selectors": [".spectrum-Underlay", ".spectrum-Underlay.is-open"], - "modifiers": [ - "--mod-overlay-animation-duration-opened", - "--mod-underlay-background-color", - "--mod-underlay-background-entry-animation-delay", - "--mod-underlay-background-entry-animation-duration", - "--mod-underlay-background-entry-animation-ease", - "--mod-underlay-background-exit-animation-delay", - "--mod-underlay-background-exit-animation-duration", - "--mod-underlay-background-exit-animation-ease" - ], "component": [ "--spectrum-underlay-background-color", "--spectrum-underlay-background-entry-animation-delay", diff --git a/components/well/dist/metadata.json b/components/well/dist/metadata.json index c9fdd7f6da1..197078b965c 100644 --- a/components/well/dist/metadata.json +++ b/components/well/dist/metadata.json @@ -1,31 +1,21 @@ { "sourceFile": "index.css", "selectors": [".spectrum-Well"], - "modifiers": [ - "--mod-well-background-color", - "--mod-well-border-color", - "--mod-well-border-radius", - "--mod-well-border-width", - "--mod-well-content-color", - "--mod-well-margin-top", - "--mod-well-min-width", - "--mod-well-padding" - ], "component": [ "--spectrum-well-background-color", "--spectrum-well-border-color", - "--spectrum-well-border-radius", "--spectrum-well-border-width", - "--spectrum-well-content-color", - "--spectrum-well-margin-top", - "--spectrum-well-min-width", - "--spectrum-well-padding" + "--spectrum-well-content-color" ], "global": [ "--spectrum-body-color", "--spectrum-border-width-100", "--spectrum-gray-1000-rgb", - "--spectrum-gray-800-rgb" + "--spectrum-gray-800-rgb", + "--spectrum-well-border-radius", + "--spectrum-well-margin-top", + "--spectrum-well-min-width", + "--spectrum-well-padding" ], "passthroughs": [], "high-contrast": [] diff --git a/nx.json b/nx.json index bf1055ed8b7..b0241c7be2d 100644 --- a/nx.json +++ b/nx.json @@ -109,7 +109,7 @@ "dependsOn": ["build", { "projects": ["bundle"], "target": "build" }], "executor": "nx:run-commands", "inputs": [ - "{workspaceRoot}/tasks/compare-compiled-output.js", + "{workspaceRoot}/tasks/component-compare.js", { "dependentTasksOutputFiles": "dist/*.css", "transitive": true }, { "externalDependencies": [ @@ -129,7 +129,7 @@ ], "options": { "commands": [ - "node --no-warnings ./tasks/compare-compiled-output.js $NX_TASK_TARGET_PROJECT" + "node --no-warnings ./tasks/component-compare.js $NX_TASK_TARGET_PROJECT" ] }, "outputs": ["{workspaceRoot}/.diff-output/**"] diff --git a/postcss.config.js b/postcss.config.js index 91f43258742..d084c33b8b8 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -113,11 +113,11 @@ module.exports = ({ reduceIdents: false, discardUnused: false, discardComments: { - remove: (comment) => !comment.includes("stylelint-"), + remove: (comment) => !comment.includes("stylelint-") && !comment.includes("deprecated"), }, // @todo yarn add -DW css-declaration-sorter cssDeclarationSorter: false, // @todo { order: "smacss" } - normalizeWhitespace: minify || isProduction, + normalizeWhitespace: minify, }, ], }, diff --git a/schemas/metadata.schema.json b/schemas/metadata.schema.json index 1352f802900..4b9deadaf04 100644 --- a/schemas/metadata.schema.json +++ b/schemas/metadata.schema.json @@ -17,14 +17,6 @@ "type": "string" } }, - "modifiers": { - "description": "These are the modifiers available for the component.", - "type": "array", - "items": { - "type": "string", - "pattern": "^--mod-" - } - }, "component": { "description": "The component-level custom properties for the component.", "type": "array", @@ -46,7 +38,7 @@ "type": "array", "items": { "type": "string", - "pattern": "^--mod-" + "pattern": "^--(spectrum|highcontrast)-" } }, "high-contrast": { @@ -58,6 +50,6 @@ } } }, - "required": ["sourceFile", "selectors", "modifiers", "component", "global", "passthroughs", "high-contrast"], + "required": ["sourceFile", "selectors", "component", "global", "passthroughs", "high-contrast"], "additionalProperties": false } diff --git a/stylelint.config.js b/stylelint.config.js index 6660f23328b..aae2f118521 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -14,8 +14,6 @@ module.exports = { // "stylelint-high-performance-animation", ], ignoreFiles: [ - // Static utility assets - "tokens/custom-*/*.css", "tools/generator/**/*.css", // Compiled and generated files "**/dist/**", @@ -171,7 +169,7 @@ module.exports = { * -------------------------------------------------------------- */ overrides: [ { - files: ["components/*/index.css", "components/*/themes/spectrum.css"], + files: ["components/*/index.css"], rules: { "selector-class-pattern": [ "^(spectrum-|is-|u-)[A-Za-z0-9-]+", { @@ -184,7 +182,6 @@ module.exports = { /** @note this is a list of custom properties that are allowed to be unknown */ ignoreList: [ /^--mod-/, - /^--system-/, /^--spectrum-picked-color$/, /^--spectrum-downstate-(height|width)$/, ], @@ -218,7 +215,7 @@ module.exports = { { files: ["tokens*/**/*.css(?inline)?", "tokens/**/*.css"], rules: { - "custom-property-pattern": [/^(spectrum|color|scale|system)/, {}], + "custom-property-pattern": [/^(spectrum|scale)/, {}], } }, { diff --git a/tasks/component-compare.js b/tasks/component-compare.js index c110233cf99..60c8206a04e 100644 --- a/tasks/component-compare.js +++ b/tasks/component-compare.js @@ -5,6 +5,7 @@ const { join, relative, dirname, basename, extname } = require("path"); const fg = require("fast-glob"); const tar = require("tar"); const _ = require("lodash"); +const semver = require("semver"); const nunjucks = require("nunjucks"); const env = new nunjucks.Environment(); @@ -158,12 +159,23 @@ async function fetchPublishedComponent(packageName, { warnings.push(err ?? `Failed to fetch ${packageName.yellow} from npm.\n`); })) ?? {}; - // If the component exists on npm, fetch the base release data - if (npmData["dist-tags"]?.[baseTag]) { - tag = npmData["dist-tags"]?.[baseTag]; + + // If a base was configured and it exists as a specific tag, use that + if (baseTag) { + if (npmData["dist-tags"]?.[baseTag]) { + tag = npmData["dist-tags"]?.[baseTag]; + } + // Otherwise try to use the base as a version number + else if (semver.valid(baseTag) && npmData.versions?.[baseTag]) { + tag = baseTag; + } + } + else if (npmData["dist-tags"]?.latest) { + tag = npmData["dist-tags"]?.latest; } + // @todo: else fetch built assets from the main branch? - if (!tag) return; + if (!tag) return { warnings: [`No base version found for ${packageName.yellow}.`] }; // Check locally to see if we have already fetched the tarball // for this tag; if not, fetch it and extract it @@ -551,13 +563,23 @@ async function main( } } -let { - _: components, - output = join(dirs.root, ".diff-output"), - cache = true, - tag = "latest", - // @todo allow to run against local main or published versions -} = yargs(hideBin(process.argv)).argv; +let { _: components, output, cache, tag } = yargs(hideBin(process.argv)) + .option("output", { + type: "string", + description: "The output directory for the diffs", + default: join(dirs.root, ".diff-output"), + }) + .option("cache", { + type: "boolean", + description: "Whether to cache the tarballs from npm", + default: true, + }) + .option("tag", { + type: "string", + description: "The base version or tag to compare against", + default: "next", + }) + .argv; main(components, output, { skipCache: !cache, tag }).then((code) => { process.exit(code); diff --git a/tasks/component-reporter.js b/tasks/component-reporter.js index b281de49bc9..33f6ca80f42 100644 --- a/tasks/component-reporter.js +++ b/tasks/component-reporter.js @@ -20,12 +20,12 @@ const yargs = require("yargs"); const postcss = require("postcss"); const prettier = require("prettier"); +const valuesParser = require("postcss-values-parser"); require("colors"); const { dirs, - extractProperties, getAllComponentNames, getPackageFromPath, writeAndReport, @@ -33,8 +33,65 @@ const { const { processCSS } = require("./component-builder.js"); + +/** + * This regex will find all the custom properties that start with --mod- + * and are defined inside a var() function. The last capture group will + * ignore any mod properties that are followed by a colon, to exclude + * sub-component passthrough properties that should not be listed as mods. + * @param {string} content + * @param {{ [string]: (string)[] }} [meta={}] + * @returns { [string]: string[] } + */ +function extractProperties(content, meta = {}) { + if (!content) return; + + const found = {}; + + // Process CSS content through the valuesParser an postcss to capture + // all the custom properties defined and used in the CSS + postcss.parse(content).walkDecls((decl) => { + Object.entries(meta).forEach(([key, values]) => { + found[key] = found[key] ?? new Map([ + ["used", new Set()], + ["defined", new Set()], + ]); + + values.forEach((value) => { + if (decl.prop.startsWith("--") && decl.prop.startsWith(`--${value}-`)) { + found[key].get("defined").add(decl.prop); + } + }); + + // Parse the value of the declaration to extract custom properties + valuesParser.parse(decl.value).walk((node) => { + if (node.type !== "word" || !node.isVariable) return; + + // Extract the custom property name from the var() function + values.forEach((value) => { + if (node.value.startsWith(`--${value}-`)) { + found[key].get("used").add(node.value); + } + }); + }); + }); + }); + + // Sort the custom properties alphabetically and return them as a map + Object.entries(found).forEach(([key, values]) => { + found[key] = new Map([ + ["used", [...values.get("used").values()].sort()], + ["defined", [...values.get("defined").values()].sort()], + ]); + }); + + console.log(Object.keys(found)); + + return found; +} + /** - * Extract custom property modifers to report + * Extract custom properties to report * @param {string} sourcePath * @param {object} [options={}] * @param {string} [options.componentName] - The name of the component being built @@ -86,7 +143,11 @@ async function extractModifiers( // Iterate over the spectrum values and see if the 2nd part of the variable // name matches the component name - const spectrum = meta.spectrum ?? []; + const used = meta.spectrum.get("used") ?? []; + const defined = meta.spectrum.get("defined") ?? []; + + // Remove the generic spectrum values from the meta object + delete meta.spectrum; function isComponentVar(value, componentName) { if (!componentName) return value; @@ -103,31 +164,32 @@ async function extractModifiers( return; } - const componentLevel = new Set(spectrum.map((value) => isComponentVar(value, componentName)).filter(Boolean)); + meta.component = [...new Set(defined.map((value) => isComponentVar(value, componentName)).filter(Boolean))].sort(); // Filter out the component level values from the global spectrum values - meta.global = spectrum.filter((value) => !componentLevel.has(value)); + meta.global = used.filter((value) => !meta.component.includes(value)).sort(); + + if (!Object.keys(meta).includes("high-contrast")) { + meta["high-contrast"] = new Map(["used", [], "defined", []]); + } - // Filter out mods that reference other components --mod--* - meta.passthroughs = meta.modifiers.filter((mod) => { + // Filter out variables that reference other components --spectrum--* + meta.passthroughs = [...meta["high-contrast"].get("defined"), ...defined].filter((v) => { if (!componentName) return false; - if (isComponentVar(mod, componentName)) return false; + if (isComponentVar(v, componentName)) return false; const otherComponents = components.filter((component) => component !== componentName); - // If the mod doesn't reference any other components, it's not a passthrough, maybe it's a global or deprecated mod? - if (!otherComponents.some((component) => isComponentVar(mod, component))) return false; + // If the variable doesn't reference any other components, it's not a passthrough + if (!otherComponents.some((component) => isComponentVar(v, component))) return false; - // Remove the mod from the modifiers list if it's a passthrough - meta.modifiers = meta.modifiers.filter((m) => m !== mod); + // Remove the variable from the global list if it's a passthrough + meta.global = meta.global.filter((m) => m !== v).sort(); return true; }); - // Remove the spectrum values from the meta object - delete meta.spectrum; - - meta.component = [...componentLevel].sort(); + meta["high-contrast"] = meta["high-contrast"].get("used"); return meta; } @@ -188,7 +250,6 @@ async function main({ componentName, baseSelectors: [".spectrum"], dataModel: { - modifiers: ["mod"], spectrum: ["spectrum"], "high-contrast": ["highcontrast"], }, @@ -201,7 +262,6 @@ async function main({ JSON.stringify({ sourceFile: meta.sourceFile, selectors: meta.selectors, - modifiers: meta.modifiers, component: meta.component, global: meta.global, passthroughs: meta.passthroughs, diff --git a/tasks/templates/compare-listing.njk b/tasks/templates/compare-listing.njk index f47eff8126e..d6200039645 100644 --- a/tasks/templates/compare-listing.njk +++ b/tasks/templates/compare-listing.njk @@ -15,7 +15,7 @@ --mod-table-cursor-row-default: auto; font-family: var(--spectrum-default-font-family); - background-color: var(--spectrum-background-layer-1-color); + background-color: var(--spectrum-background-base-color); color: var(--spectrum-neutral-content-color-default); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); @@ -50,7 +50,7 @@ } - +
{{ nav | safe }} diff --git a/tasks/templates/diff-preview.njk b/tasks/templates/diff-preview.njk index d2e0cb642d2..7a280b2ee83 100644 --- a/tasks/templates/diff-preview.njk +++ b/tasks/templates/diff-preview.njk @@ -17,7 +17,7 @@ --mod-detail-margin-start: 0; font-family: var(--spectrum-default-font-family); - background-color: var(--spectrum-background-layer-1-color); + background-color: var(--spectrum-background-base-color); color: var(--spectrum-neutral-content-color-default); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); @@ -47,7 +47,7 @@ margin-block-end: 2em; } .spectrum-Container-main section { - background-color: var(--spectrum-background-layer-2-color); + background-color: var(--spectrum-background-layer-1-color); color: var(--spectrum-neutral-content-color-default); border-radius: 4px; padding: 1rem; @@ -55,7 +55,7 @@ .d2h-code-side-linenumber { position: relative !important; } - +
{{ nav | safe }} diff --git a/tasks/utilities.js b/tasks/utilities.js index 14f55a58c89..791216dec10 100644 --- a/tasks/utilities.js +++ b/tasks/utilities.js @@ -19,8 +19,6 @@ const path = require("path"); const fg = require("fast-glob"); const { rimrafSync } = require("rimraf"); -const postcss = require("postcss"); -const valuesParser = require("postcss-values-parser"); /** * A source of truth for commonly used directories @@ -158,54 +156,6 @@ function validateComponentName(componentName) { return true; } -/** - * This regex will find all the custom properties that start with --mod- - * and are defined inside a var() function. The last capture group will - * ignore any mod properties that are followed by a colon, to exclude - * sub-component passthrough properties that should not be listed as mods. - * @param {string} content - * @param {{ [string]: (string)[] }} [meta={}] - * @returns { [string]: string[] } - */ -function extractProperties(content, meta = {}) { - if (!content) return new Set(); - - const found = {}; - - // Process CSS content through the valuesParser an postcss to capture - // all the custom properties defined and used in the CSS - postcss.parse(content).walkDecls((decl) => { - Object.entries(meta).forEach(([key, values]) => { - found[key] = found[key] ?? new Set(); - - values.forEach((value) => { - if (decl.prop.startsWith("--") && decl.prop.startsWith(`--${value}-`)) { - found[key].add(decl.prop); - } - }); - - // Parse the value of the declaration to extract custom properties - valuesParser.parse(decl.value).walk((node) => { - if (node.type !== "word" || !node.isVariable) return; - - // Extract the custom property name from the var() function - values.forEach((value) => { - if (node.value.startsWith(`--${value}-`)) { - found[key].add(node.value); - } - }); - }); - }); - }); - - // Sort the custom properties alphabetically and return them as an array - Object.keys(found).forEach((key) => { - found[key] = [...found[key]].sort(); - }); - - return found; -} - /** * Fetch content from glob input and optionally combine results * @param {(string|RegExp)[]} globs @@ -370,7 +320,6 @@ module.exports = { copy, dirs, log, - extractProperties, fetchContent, cleanAndMkdir, getAllComponentNames, diff --git a/tokens/custom-tokens.json b/tokens/custom-tokens.json new file mode 100644 index 00000000000..472f2275416 --- /dev/null +++ b/tokens/custom-tokens.json @@ -0,0 +1,837 @@ +{ + "alert-banner-close-button-spacing": { + "sets": { + "desktop": { + "value": "{spacing-100}" + }, + "mobile": { + "value": "{spacing-200}" + } + } + }, + "alert-banner-text-to-button-vertical": { + "sets": { + "desktop": { + "value": "{spacing-100}" + }, + "mobile": { + "value": "{spacing-200}" + } + } + }, + "alert-dialog-edge-to-content": { + "sets": { + "desktop": { + "value": "{spacing-500}" + }, + "mobile": { + "value": "{spacing-400}" + } + } + }, + "animation-duration-0": { + "value": "0ms" + }, + "animation-duration-100": { + "value": "130ms" + }, + "animation-duration-200": { + "value": "160ms" + }, + "animation-duration-2000": { + "value": "1000ms" + }, + "animation-duration-300": { + "value": "190ms" + }, + "animation-duration-500": { + "value": "250ms" + }, + "animation-duration-600": { + "value": "300ms" + }, + "animation-duration-6000": { + "value": "3000ms" + }, + "animation-duration-800": { + "value": "400ms" + }, + "animation-ease-in": { + "value": "cubic-bezier(0.5, 0, 1, 1)" + }, + "animation-ease-in-out": { + "value": "cubic-bezier(0.45, 0, 0.4, 1)" + }, + "animation-ease-out": { + "value": "cubic-bezier(0, 0, 0.4, 1)" + }, + "assetcard-content-font-size": { + "sets": { + "desktop": { + "value": "{body-size-s}" + }, + "mobile": { + "value": "{body-size-xs}" + } + } + }, + "assetcard-focus-ring-border-radius": { + "sets": { + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "9px" + } + } + }, + "assetcard-header-content-font-size": { + "sets": { + "desktop": { + "value": "{heading-size-xs}" + }, + "mobile": { + "value": "{heading-size-xxs}" + } + } + }, + "assetcard-selectionindicator-margin": { + "sets": { + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } + } + }, + "assetcard-title-font-size": { + "sets": { + "desktop": { + "value": "{heading-size-xs}" + }, + "mobile": { + "value": "{heading-size-xxs}" + } + } + }, + "button-bottom-to-text-extra-large": { + "sets": { + "desktop": { + "value": "13px" + }, + "mobile": { + "value": "17px" + } + } + }, + "button-bottom-to-text-large": { + "sets": { + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "13px" + } + } + }, + "button-bottom-to-text-medium": { + "sets": { + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + } + }, + "button-bottom-to-text-small": { + "sets": { + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + } + }, + "button-top-to-text-extra-large": { + "sets": { + "desktop": { + "value": "13px" + }, + "mobile": { + "value": "16px" + } + } + }, + "button-top-to-text-large": { + "sets": { + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } + } + }, + "button-top-to-text-medium": { + "sets": { + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "9px" + } + } + }, + "button-top-to-text-small": { + "sets": { + "desktop": { + "value": "5px" + }, + "mobile": { + "value": "6px" + } + } + }, + "cjk-font-family-stack": { + "value": "adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif" + }, + "coach-indicator-gap": { + "sets": { + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "8px" + } + } + }, + "coach-indicator-quiet-ring-diameter": { + "sets": { + "desktop": { + "value": "{spacing-100}" + }, + "mobile": { + "value": "10px" + } + } + }, + "coach-indicator-ring-diameter": { + "sets": { + "desktop": { + "value": "{spacing-300}" + }, + "mobile": { + "value": "20px" + } + } + }, + "coachmark-action-menu-vertical-offset": { + "sets": { + "desktop": { + "value": "-4px" + }, + "mobile": { + "value": "-6px" + } + } + }, + "coachmark-buttongroup-display": { + "sets": { + "desktop": { + "value": "flex" + }, + "mobile": { + "value": "none" + } + } + }, + "coachmark-buttongroup-mobile-display": { + "sets": { + "desktop": { + "value": "none" + }, + "mobile": { + "value": "flex" + } + } + }, + "coachmark-menu-display": { + "sets": { + "desktop": { + "value": "inline-flex" + }, + "mobile": { + "value": "none" + } + } + }, + "coachmark-menu-mobile-display": { + "sets": { + "desktop": { + "value": "none" + }, + "mobile": { + "value": "inline-flex" + } + } + }, + "code-font-family-stack": { + "value": "\"Source Code Pro\", Monaco, monospace" + }, + "colorloupe-checkerboard-fill": { + "sets": { + "desktop": { + "value": "url(#checkerboard-primary)" + }, + "mobile": { + "value": "url(#checkerboard-secondary)" + } + } + }, + "colorwheel-colorarea-container-size": { + "sets": { + "desktop": { + "value": "144px" + }, + "mobile": { + "value": "182px" + } + } + }, + "colorwheel-path": { + "sets": { + "desktop": { + "value": "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0" + }, + "mobile": { + "value": "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0" + } + } + }, + "contextual-help-content-spacing": { + "sets": { + "desktop": { + "value": "{spacing-100}" + }, + "mobile": { + "value": "{spacing-200}" + } + } + }, + "corner-radius-1000": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "9999px" + }, + "datepicker-dash-line-height": { + "sets": { + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + } + }, + "datepicker-datetime-width-first": { + "sets": { + "desktop": { + "value": "36px" + }, + "mobile": { + "value": "45px" + } + } + }, + "datepicker-generic-padding": { + "sets": { + "desktop": { + "value": "{spacing-200}" + }, + "mobile": { + "value": "15px" + } + } + }, + "datepicker-initial-width": { + "sets": { + "desktop": { + "value": "128px" + }, + "mobile": { + "value": "160px" + } + } + }, + "datepicker-input-datetime-width": { + "sets": { + "desktop": { + "value": "{spacing-400}" + }, + "mobile": { + "value": "30px" + } + } + }, + "datepicker-invalid-icon-to-button": { + "sets": { + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + } + }, + "datepicker-invalid-icon-to-button-quiet": { + "sets": { + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "9px" + } + } + }, + "datepicker-width-quiet-first": { + "sets": { + "desktop": { + "value": "72px" + }, + "mobile": { + "value": "90px" + } + } + }, + "datepicker-width-quiet-second": { + "sets": { + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + } + }, + "dial-border-radius": { + "sets": { + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + } + }, + "dial-controls-margin": { + "sets": { + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + } + }, + "dial-handle-block-margin": { + "sets": { + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + } + }, + "dial-handle-inline-margin": { + "sets": { + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + } + }, + "dial-handle-position": { + "sets": { + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + } + }, + "dial-label-container-top-to-text": { + "sets": { + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + } + }, + "dial-label-gap-y": { + "sets": { + "desktop": { + "value": "5px" + }, + "mobile": { + "value": "6px" + } + } + }, + "dialog-confirm-entry-animation-distance": { + "sets": { + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "25px" + } + } + }, + "field-edge-to-icon-100": { + "sets": { + "desktop": { + "value": "5px" + }, + "mobile": { + "value": "9px" + } + } + }, + "field-edge-to-icon-200": { + "sets": { + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "11px" + } + } + }, + "field-edge-to-icon-300": { + "sets": { + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "14px" + } + } + }, + "field-edge-to-icon-75": { + "sets": { + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "6px" + } + } + }, + "in-field-button-side-edge-to-fill-medium": { + "sets": { + "desktop": { + "value": "3px" + }, + "mobile": { + "value": "4px" + } + } + }, + "in-field-button-side-edge-to-fill-small": { + "sets": { + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "3px" + } + } + }, + "menu-item-selectable-edge-to-text-not-selected-extra-large": { + "sets": { + "desktop": { + "value": "45px" + }, + "mobile": { + "value": "54px" + } + } + }, + "menu-item-selectable-edge-to-text-not-selected-large": { + "sets": { + "desktop": { + "value": "38px" + }, + "mobile": { + "value": "47px" + } + } + }, + "menu-item-selectable-edge-to-text-not-selected-medium": { + "sets": { + "desktop": { + "value": "32px" + }, + "mobile": { + "value": "42px" + } + } + }, + "menu-item-selectable-edge-to-text-not-selected-small": { + "sets": { + "desktop": { + "value": "28px" + }, + "mobile": { + "value": "34px" + } + } + }, + "pagination-item-inline-spacing": { + "sets": { + "desktop": { + "value": "5px" + }, + "mobile": { + "value": "6px" + } + } + }, + "pagination-textfield-width": { + "sets": { + "desktop": { + "value": "{spacing-700}" + }, + "mobile": { + "value": "60px" + } + } + }, + "sans-font-family-stack": { + "value": "adobe-clean, var(--spectrum-sans-serif-font-family), \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif" + }, + "serif-font-family-stack": { + "value": "adobe-clean-serif, var(--spectrum-serif-font-family), \"Source Serif Pro\", Georgia, serif" + }, + "slider-precision-handle-height-extra-large": { + "sets": { + "desktop": { + "value": "26px" + }, + "mobile": { + "value": "32px" + } + } + }, + "slider-precision-handle-height-large": { + "sets": { + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + } + }, + "slider-precision-handle-height-medium": { + "sets": { + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "26px" + } + } + }, + "slider-precision-handle-height-small": { + "sets": { + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + } + }, + "slider-ramp-track-height": { + "sets": { + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + } + }, + "slider-tick-mark-height": { + "sets": { + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "13px" + } + } + }, + "standard-dialog-spacing-edge-to-content": { + "sets": { + "desktop": { + "value": "{spacing-500}" + }, + "mobile": { + "value": "{spacing-400}" + } + } + }, + "tab-item-to-tab-item-compact-horizontal-medium": { + "comment": "@todo: remove when tabs tokens are updated.", + "sets": { + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + } + }, + "takeover-dialog-spacing-grid-padding": { + "sets": { + "desktop": { + "value": "{spacing-500}" + }, + "mobile": { + "value": "{spacing-400}" + } + } + }, + "takeover-dialog-spacing-header-gap": { + "sets": { + "desktop": { + "value": "{spacing-400}" + }, + "mobile": { + "value": "{spacing-300}" + } + } + }, + "takeover-dialog-spacing-title-to-body": { + "sets": { + "desktop": { + "value": "{spacing-500}" + }, + "mobile": { + "value": "{spacing-400}" + } + } + }, + "tooltip-tip-square-size": { + "sets": { + "desktop": { + "comment": "To get a square that measures 10px on the diagonal, the sides have to be 8px", + "value": "8px" + }, + "mobile": { + "comment": "To get a square that measures 12px on the diagonal, the sides have to be 10px", + "value": "10px" + } + } + }, + "treeview-item-indentation-extra-large": { + "sets": { + "desktop": { + "value": "{spacing-400}" + }, + "mobile": { + "value": "30px" + } + } + }, + "treeview-item-indentation-large": { + "sets": { + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "25px" + } + } + }, + "treeview-item-indentation-medium": { + "sets": { + "desktop": { + "value": "{spacing-300}" + }, + "mobile": { + "value": "20px" + } + } + }, + "treeview-item-indentation-small": { + "sets": { + "desktop": { + "value": "{spacing-200}" + }, + "mobile": { + "value": "15px" + } + } + }, + "treeview-item-min-block-size-thumbnail-offset-medium": { + "sets": { + "desktop": { + "value": "0px" + }, + "mobile": { + "value": "2px" + } + } + }, + "well-border-radius": { + "sets": { + "desktop": { + "value": "{spacing-75}" + }, + "mobile": { + "value": "5px" + } + } + }, + "well-margin-top": { + "sets": { + "desktop": { + "value": "{spacing-75}" + }, + "mobile": { + "value": "5px" + } + } + }, + "well-min-width": { + "sets": { + "desktop": { + "value": "240px" + }, + "mobile": { + "value": "300px" + } + } + }, + "well-padding": { + "sets": { + "desktop": { + "value": "{spacing-300}" + }, + "mobile": { + "value": "20px" + } + } + } +} diff --git a/tokens/custom/dark-vars.css b/tokens/custom/dark-vars.css deleted file mode 100644 index c44ba508470..00000000000 --- a/tokens/custom/dark-vars.css +++ /dev/null @@ -1,61 +0,0 @@ -/*! - * Copyright 2025 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* This file contains overrides and additions to core tokens */ -.spectrum--dark { - /** COMPONENT-SPECIFIC OVERRIDES **/ - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgb(var(--spectrum-blue-800-rgb), 0.25); - --spectrum-assetlist-item-background-color-selected: rgb(var(--spectrum-blue-800-rgb), 0.15); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - - --spectrum-calendar-day-background-color-selected: rgb(var(--spectrum-blue-800-rgb), 0.15); - --spectrum-calendar-day-background-color-hover: rgb(var(--spectrum-white-rgb), 0.07); - --spectrum-calendar-day-today-background-color-selected-hover: rgb(var(--spectrum-blue-800-rgb), 0.25); - --spectrum-calendar-day-background-color-selected-hover: rgb(var(--spectrum-blue-800-rgb), 0.25); - --spectrum-calendar-day-background-color-down: var(--spectrum-transparent-white-200); - --spectrum-calendar-day-background-color-cap-selected: rgb(var(--spectrum-blue-800-rgb), 0.25); - --spectrum-calendar-day-background-color-key-focus: rgb(var(--spectrum-white-rgb), 0.07); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900); */ - - --spectrum-dropindicator-color: var(--spectrum-blue-700); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - - --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700); - - --spectrum-table-selected-row-background-color-rgb: var(--spectrum-blue-800-rgb); - - --spectrum-treeview-item-background-color-quiet-selected: rgb(var(--spectrum-gray-900-rgb), 0.07); - --spectrum-treeview-item-background-color-selected: rgb(var(--spectrum-blue-800-rgb), 0.15); - - color-scheme: dark; -} diff --git a/tokens/custom/global-vars.css b/tokens/custom/global-vars.css deleted file mode 100644 index cfad693ea73..00000000000 --- a/tokens/custom/global-vars.css +++ /dev/null @@ -1,66 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* This file contains overrides and additions to core tokens */ -.spectrum { - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 130ms; - --spectrum-animation-duration-200: 160ms; - --spectrum-animation-duration-300: 190ms; - --spectrum-animation-duration-400: 220ms; - --spectrum-animation-duration-500: 250ms; - --spectrum-animation-duration-600: 300ms; - --spectrum-animation-duration-700: 350ms; - --spectrum-animation-duration-800: 400ms; - --spectrum-animation-duration-900: 450ms; - --spectrum-animation-duration-1000: 500ms; - --spectrum-animation-duration-2000: 1000ms; - --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; - - --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); - - --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - - /* stylelint-disable value-keyword-case -- typography names should use their appropriate cases */ - --spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; - --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - - --spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif; - --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - - --spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace; - - --spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; - --spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; - /* stylelint-enable value-keyword-case */ - - --spectrum-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-font-style: var(--spectrum-default-font-style); - --spectrum-font-size: var(--spectrum-font-size-100); - - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; - --spectrum-cjk-font: var(--spectrum-cjk-font-family-stack); - - /* Gradient that changes with the color theme. */ - --spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500)); - - /* Gradients that do not change with the color theme, for use in static color backgrounds. */ - --spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255 241 246), rgb(238 245 255)); - --spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67)); - - --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); -} diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css deleted file mode 100644 index 64943103a1e..00000000000 --- a/tokens/custom/large-vars.css +++ /dev/null @@ -1,164 +0,0 @@ -/*! - * Copyright 2025 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* This file contains overrides and additions to core tokens */ -.spectrum--large { - --scale: large; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); - --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200); - - --spectrum-alert-dialog-edge-to-content: var(--spectrum-spacing-400); - - --spectrum-assetcard-focus-ring-border-radius: 9px; - --spectrum-assetcard-selectionindicator-margin: 15px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xxs); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - - --spectrum-button-top-to-text-small: 6px; - --spectrum-button-bottom-to-text-small: 5px; - --spectrum-button-top-to-text-medium: 9px; - --spectrum-button-bottom-to-text-medium: 10px; - --spectrum-button-top-to-text-large: 12px; - --spectrum-button-bottom-to-text-large: 13px; - --spectrum-button-top-to-text-extra-large: 16px; - --spectrum-button-bottom-to-text-extra-large: 17px; - - --spectrum-coach-indicator-gap: 8px; - --spectrum-coach-indicator-ring-diameter: 20px; - --spectrum-coach-indicator-quiet-ring-diameter: 10px; - --spectrum-coachmark-action-menu-vertical-offset: -6px; - --spectrum-coachmark-buttongroup-display: none; - --spectrum-coachmark-buttongroup-mobile-display: flex; - --spectrum-coachmark-menu-display: none; - --spectrum-coachmark-menu-mobile-display: inline-flex; - - --spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0"; - --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; - --spectrum-colorwheel-colorarea-container-size: 182px; - - --spectrum-colorloupe-checkerboard-fill: url("#checkerboard-secondary"); - - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); - - --spectrum-datepicker-initial-width: 160px; - --spectrum-datepicker-generic-padding: 15px; - --spectrum-datepicker-dash-line-height: 30px; - --spectrum-datepicker-width-quiet-first: 90px; - --spectrum-datepicker-width-quiet-second: 20px; - --spectrum-datepicker-datetime-width-first: 45px; - --spectrum-datepicker-invalid-icon-to-button: 10px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; - --spectrum-datepicker-input-datetime-width: 30px; - - --spectrum-dial-border-radius: 20px; - --spectrum-dial-handle-position: 10px; - --spectrum-dial-handle-block-margin: 20px; - --spectrum-dial-handle-inline-margin: 20px; - --spectrum-dial-controls-margin: 10px; - --spectrum-dial-label-gap-y: 6px; - --spectrum-dial-label-container-top-to-text: 5px; - - --spectrum-dialog-confirm-entry-animation-distance: 25px; - --spectrum-dialog-confirm-hero-height: 160px; - --spectrum-dialog-confirm-border-radius: 5px; - --spectrum-dialog-confirm-title-text-size: 19px; - --spectrum-dialog-confirm-description-text-size: 15px; - --spectrum-dialog-confirm-padding-grid: 24px; - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - - --spectrum-menu-item-checkmark-height-small: 12px; - --spectrum-menu-item-checkmark-height-medium: 14px; - --spectrum-menu-item-checkmark-height-large: 16px; - --spectrum-menu-item-checkmark-height-extra-large: 16px; - - --spectrum-menu-item-checkmark-width-small: 12px; - --spectrum-menu-item-checkmark-width-medium: 14px; - --spectrum-menu-item-checkmark-width-large: 16px; - --spectrum-menu-item-checkmark-width-extra-large: 16px; - - --spectrum-pagination-textfield-width: 60px; - --spectrum-pagination-item-inline-spacing: 6px; - - --spectrum-slider-precision-handle-width: 6px; - --spectrum-slider-tick-mark-height: 13px; - --spectrum-slider-ramp-track-height: 20px; - --spectrum-slider-handle-small: 22px; - --spectrum-slider-handle-medium: 24px; - --spectrum-slider-handle-large: 28px; - --spectrum-slider-handle-extra-large: 30px; - - --spectrum-slider-precision-handle-height-small: 24px; - --spectrum-slider-precision-handle-height-medium: 26px; - --spectrum-slider-precision-handle-height-large: 30px; - --spectrum-slider-precision-handle-height-extra-large: 32px; - - --spectrum-slider-editable-field-inline-size-small: 56px; - --spectrum-slider-editable-field-inline-size-medium: 70px; - --spectrum-slider-editable-field-inline-size-large: 82px; - --spectrum-slider-editable-field-inline-size-extra-large: 94px; - - --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-400); - --spectrum-takeover-dialog-spacing-grid-padding: var(--spectrum-spacing-400); - --spectrum-takeover-dialog-spacing-header-gap: var(--spectrum-spacing-300); - --spectrum-takeover-dialog-spacing-title-to-body: var(--spectrum-spacing-400); - - /* @todo: remove when tabs tokens are updated */ - --spectrum-tab-item-top-to-workflow-icon-medium: 18px; - --spectrum-tab-item-side-to-workflow-icon-medium: 6px; - --spectrum-tab-item-bottom-to-text-medium: 21px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 30px; - --spectrum-tab-selection-indicator-thickness: 2px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 7px; - --spectrum-tab-item-side-to-workflow-icon-compact-medium: 6px; - --spectrum-tab-item-to-tab-item-compact-horizontal-medium: 30px; - - --spectrum-treeview-item-indentation-medium: 20px; - --spectrum-treeview-item-indentation-small: 15px; - --spectrum-treeview-item-indentation-large: 25px; - --spectrum-treeview-item-indentation-extra-large: 30px; - --spectrum-treeview-indicator-inset-block-start: 6px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - - /* To get a square that measures 12px on the diagonal, the sides have to be 10px */ - --spectrum-tooltip-tip-square-size: 10px; - - --spectrum-ui-icon-medium-display: none; - --spectrum-ui-icon-large-display: block; - - --spectrum-well-border-radius: 5px; - --spectrum-well-margin-top: 5px; - --spectrum-well-min-width: 300px; - --spectrum-well-padding: 20px; - - /* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */ - --spectrum-workflow-icon-size-xxl: 40px; - --spectrum-workflow-icon-size-xxs: 15px; - - --spectrum-in-field-button-side-edge-to-fill-small: 3px; - --spectrum-in-field-button-side-edge-to-fill-medium: 4px; - --spectrum-in-field-button-side-edge-to-fill-large: 4px; - --spectrum-in-field-button-side-edge-to-fill-extra-large: 4px; - - --spectrum-field-edge-to-icon-75: 6px; - --spectrum-field-edge-to-icon-100: 9px; - --spectrum-field-edge-to-icon-200: 11px; - --spectrum-field-edge-to-icon-300: 14px; -} diff --git a/tokens/custom/light-vars.css b/tokens/custom/light-vars.css deleted file mode 100644 index 6c0e236668d..00000000000 --- a/tokens/custom/light-vars.css +++ /dev/null @@ -1,61 +0,0 @@ -/*! - * Copyright 2025 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* This file contains overrides and additions to core tokens */ -.spectrum--light { - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-900); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); - - --spectrum-assetlist-item-background-color-selected-hover: rgb(var(--spectrum-blue-900-rgb), 0.2); - --spectrum-assetlist-item-background-color-selected: rgb(var(--spectrum-blue-900-rgb), 0.1); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - - --spectrum-calendar-day-background-color-selected: rgb(var(--spectrum-blue-900-rgb), 0.1); - --spectrum-calendar-day-background-color-hover: rgb(var(--spectrum-black-rgb), 0.06); - --spectrum-calendar-day-today-background-color-selected-hover: rgb(var(--spectrum-blue-900-rgb), 0.2); - --spectrum-calendar-day-background-color-selected-hover: rgb(var(--spectrum-blue-900-rgb), 0.2); - --spectrum-calendar-day-background-color-down: var(--spectrum-transparent-black-200); - --spectrum-calendar-day-background-color-cap-selected: rgb(var(--spectrum-blue-900-rgb), 0.2); - --spectrum-calendar-day-background-color-key-focus: rgb(var(--spectrum-black-rgb), 0.06); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); - - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); /* var(--spectrum-accent-color-800); */ - - --spectrum-dropindicator-color: var(--spectrum-blue-800); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-1100); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); - - --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800); - - --spectrum-table-selected-row-background-color-rgb: var(--spectrum-blue-900-rgb); - - --spectrum-treeview-item-background-color-quiet-selected: rgb(var(--spectrum-gray-900-rgb), 0.06); - --spectrum-treeview-item-background-color-selected: rgb(var(--spectrum-blue-900-rgb), 0.1); - - color-scheme: light; -} diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css deleted file mode 100644 index b6e4964fd8a..00000000000 --- a/tokens/custom/medium-vars.css +++ /dev/null @@ -1,162 +0,0 @@ -/*! - * Copyright 2025 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* This file contains overrides and additions to core tokens */ -.spectrum--medium { - --scale: medium; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100); - - --spectrum-alert-dialog-edge-to-content: var(--spectrum-spacing-500); - - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - --spectrum-assetcard-focus-ring-border-radius: 8px; - --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xs); - --spectrum-assetcard-selectionindicator-margin: 12px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); - - --spectrum-button-bottom-to-text-small: 4px; - --spectrum-button-bottom-to-text-medium: 8px; - --spectrum-button-bottom-to-text-large: 10px; - --spectrum-button-bottom-to-text-extra-large: 13px; - --spectrum-button-top-to-text-small: 5px; - --spectrum-button-top-to-text-medium: 7px; - --spectrum-button-top-to-text-large: 10px; - --spectrum-button-top-to-text-extra-large: 13px; - - --spectrum-coach-indicator-gap: 6px; - --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); - --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - --spectrum-coachmark-action-menu-vertical-offset: -4px; - --spectrum-coachmark-buttongroup-display: flex; - --spectrum-coachmark-buttongroup-mobile-display: none; - --spectrum-coachmark-menu-display: inline-flex; - --spectrum-coachmark-menu-mobile-display: none; - - --spectrum-colorloupe-checkerboard-fill: url("#checkerboard-primary"); - - --spectrum-colorwheel-colorarea-container-size: 144px; - --spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0"; - --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; - - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); - - --spectrum-datepicker-dash-line-height: 24px; - --spectrum-datepicker-datetime-width-first: 36px; - --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); - --spectrum-datepicker-initial-width: 128px; - --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - --spectrum-datepicker-invalid-icon-to-button: 8px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; - --spectrum-datepicker-width-quiet-first: 72px; - --spectrum-datepicker-width-quiet-second: 16px; - - --spectrum-dial-border-radius: 16px; - --spectrum-dial-controls-margin: 8px; - --spectrum-dial-handle-block-margin: 16px; - --spectrum-dial-handle-inline-margin: 16px; - --spectrum-dial-handle-position: 8px; - --spectrum-dial-label-container-top-to-text: 4px; - --spectrum-dial-label-gap-y: 5px; - - --spectrum-dialog-confirm-border-radius: 4px; - --spectrum-dialog-confirm-description-text-size: 14px; - --spectrum-dialog-confirm-entry-animation-distance: 20px; - --spectrum-dialog-confirm-hero-height: 128px; - --spectrum-dialog-confirm-padding-grid: 40px; - --spectrum-dialog-confirm-title-text-size: 18px; - - --spectrum-menu-item-checkmark-height-small: 10px; - --spectrum-menu-item-checkmark-height-medium: 10px; - --spectrum-menu-item-checkmark-height-large: 12px; - --spectrum-menu-item-checkmark-height-extra-large: 14px; - --spectrum-menu-item-checkmark-width-small: 10px; - --spectrum-menu-item-checkmark-width-medium: 10px; - --spectrum-menu-item-checkmark-width-large: 12px; - --spectrum-menu-item-checkmark-width-extra-large: 14px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - - --spectrum-pagination-item-inline-spacing: 5px; - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); - - --spectrum-slider-ramp-track-height: 16px; - --spectrum-slider-tick-mark-height: 10px; - --spectrum-slider-handle-small: 18px; - --spectrum-slider-handle-medium: 20px; - --spectrum-slider-handle-large: 22px; - --spectrum-slider-handle-extra-large: 24px; - - --spectrum-slider-precision-handle-height-small: 20px; - --spectrum-slider-precision-handle-height-medium: 22px; - --spectrum-slider-precision-handle-height-large: 24px; - --spectrum-slider-precision-handle-height-extra-large: 26px; - - --spectrum-slider-precision-handle-width: 6px; - --spectrum-slider-editable-field-inline-size-small: 56px; - --spectrum-slider-editable-field-inline-size-medium: 70px; - --spectrum-slider-editable-field-inline-size-large: 82px; - --spectrum-slider-editable-field-inline-size-extra-large: 94px; - - --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-500); - --spectrum-takeover-dialog-spacing-grid-padding: var(--spectrum-spacing-500); - --spectrum-takeover-dialog-spacing-header-gap: var(--spectrum-spacing-400); - --spectrum-takeover-dialog-spacing-title-to-body: var(--spectrum-spacing-500); - - /* @todo: remove when tabs tokens are updated */ - --spectrum-tab-item-top-to-workflow-icon-medium: 14px; - --spectrum-tab-item-side-to-workflow-icon-medium: 6px; - --spectrum-tab-item-bottom-to-text-medium: 16px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 32px; - --spectrum-tab-selection-indicator-thickness: 2px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 6px; - --spectrum-tab-item-side-to-workflow-icon-compact-medium: 6px; - --spectrum-tab-item-to-tab-item-compact-horizontal-medium: 24px; - - --spectrum-treeview-indicator-inset-block-start: 5px; - --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); - --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400); - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - - /* To get a square that measures 10px on the diagonal, the sides have to be 8px */ - --spectrum-tooltip-tip-square-size: 8px; - - --spectrum-ui-icon-medium-display: block; - --spectrum-ui-icon-large-display: none; - - --spectrum-well-border-radius: var(--spectrum-spacing-75); - --spectrum-well-margin-top: var(--spectrum-spacing-75); - --spectrum-well-min-width: 240px; - --spectrum-well-padding: var(--spectrum-spacing-300); - - /* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */ - --spectrum-workflow-icon-size-xxl: 32px; - --spectrum-workflow-icon-size-xxs: 12px; - - --spectrum-in-field-button-side-edge-to-fill-small: 4px; - --spectrum-in-field-button-side-edge-to-fill-medium: 3px; - --spectrum-in-field-button-side-edge-to-fill-large: 4px; - --spectrum-in-field-button-side-edge-to-fill-extra-large: 4px; - - --spectrum-field-edge-to-icon-75: 4px; - --spectrum-field-edge-to-icon-100: 5px; - --spectrum-field-edge-to-icon-200: 6px; - --spectrum-field-edge-to-icon-300: 10px; -} diff --git a/tokens/dist/json/tokens.json b/tokens/dist/json/tokens.json deleted file mode 100644 index 1f9c1db7086..00000000000 --- a/tokens/dist/json/tokens.json +++ /dev/null @@ -1,20405 +0,0 @@ -{ - "accent-background-color-default": { - "prop": "--spectrum-accent-background-color-default", - "ref": "var(--spectrum-accent-color-900)", - "light": { - "value": "rgb(59, 99, 251)" - }, - "dark": { - "value": "rgb(86, 129, 255)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "accent-background-color-down": { - "prop": "--spectrum-accent-background-color-down", - "ref": "var(--spectrum-accent-color-1000)", - "light": { - "value": "rgb(39, 77, 234)" - }, - "dark": { - "value": "rgb(105, 149, 254)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "accent-background-color-hover": { - "prop": "--spectrum-accent-background-color-hover", - "ref": "var(--spectrum-accent-color-1000)", - "light": { - "value": "rgb(39, 77, 234)" - }, - "dark": { - "value": "rgb(105, 149, 254)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "accent-background-color-key-focus": { - "prop": "--spectrum-accent-background-color-key-focus", - "ref": "var(--spectrum-accent-color-1000)", - "light": { - "value": "rgb(39, 77, 234)" - }, - "dark": { - "value": "rgb(105, 149, 254)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "accent-color-100": { - "prop": "--spectrum-accent-color-100", - "ref": "var(--spectrum-blue-100)", - "light": { - "value": "rgb(245, 249, 255)" - }, - "dark": { - "value": "rgb(14, 23, 63)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "accent-color-1000": { - "prop": "--spectrum-accent-color-1000", - "ref": "var(--spectrum-blue-1000)", - "light": { - "value": "rgb(39, 77, 234)" - }, - "dark": { - "value": "rgb(105, 149, 254)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "accent-color-1100": { - "prop": "--spectrum-accent-color-1100", - "ref": "var(--spectrum-blue-1100)", - "light": { - "value": "rgb(29, 62, 207)" - }, - "dark": { - "value": "rgb(124, 169, 252)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "accent-color-1200": { - "prop": "--spectrum-accent-color-1200", - "ref": "var(--spectrum-blue-1200)", - "light": { - "value": "rgb(21, 50, 173)" - }, - "dark": { - "value": "rgb(152, 192, 252)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "accent-color-1300": { - "prop": "--spectrum-accent-color-1300", - "ref": "var(--spectrum-blue-1300)", - "light": { - "value": "rgb(16, 40, 140)" - }, - "dark": { - "value": "rgb(181, 213, 253)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "accent-color-1400": { - "prop": "--spectrum-accent-color-1400", - "ref": "var(--spectrum-blue-1400)", - "light": { - "value": "rgb(12, 31, 105)" - }, - "dark": { - "value": "rgb(213, 231, 254)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "accent-color-1500": { - "prop": "--spectrum-accent-color-1500", - "ref": "var(--spectrum-blue-1500)", - "dark": { - "value": "rgb(238, 245, 255)" - }, - "light": { - "value": "rgb(14, 24, 67)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "accent-color-1600": { - "prop": "--spectrum-accent-color-1600", - "ref": "var(--spectrum-blue-1600)", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(7, 11, 30)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "accent-color-200": { - "prop": "--spectrum-accent-color-200", - "ref": "var(--spectrum-blue-200)", - "light": { - "value": "rgb(229, 240, 254)" - }, - "dark": { - "value": "rgb(15, 28, 82)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "accent-color-300": { - "prop": "--spectrum-accent-color-300", - "ref": "var(--spectrum-blue-300)", - "light": { - "value": "rgb(203, 226, 254)" - }, - "dark": { - "value": "rgb(12, 33, 117)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "accent-color-400": { - "prop": "--spectrum-accent-color-400", - "ref": "var(--spectrum-blue-400)", - "light": { - "value": "rgb(172, 207, 253)" - }, - "dark": { - "value": "rgb(18, 45, 154)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "accent-color-500": { - "prop": "--spectrum-accent-color-500", - "ref": "var(--spectrum-blue-500)", - "light": { - "value": "rgb(142, 185, 252)" - }, - "dark": { - "value": "rgb(26, 58, 195)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "accent-color-600": { - "prop": "--spectrum-accent-color-600", - "ref": "var(--spectrum-blue-600)", - "light": { - "value": "rgb(114, 158, 253)" - }, - "dark": { - "value": "rgb(37, 73, 229)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "accent-color-700": { - "prop": "--spectrum-accent-color-700", - "ref": "var(--spectrum-blue-700)", - "light": { - "value": "rgb(93, 137, 255)" - }, - "dark": { - "value": "rgb(52, 91, 248)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "accent-color-800": { - "prop": "--spectrum-accent-color-800", - "ref": "var(--spectrum-blue-800)", - "light": { - "value": "rgb(75, 117, 255)" - }, - "dark": { - "value": "rgb(64, 105, 253)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "accent-color-900": { - "prop": "--spectrum-accent-color-900", - "ref": "var(--spectrum-blue-900)", - "light": { - "value": "rgb(59, 99, 251)" - }, - "dark": { - "value": "rgb(86, 129, 255)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "accent-content-color-default": { - "prop": "--spectrum-accent-content-color-default", - "ref": "var(--spectrum-accent-color-900)", - "light": { - "value": "rgb(59, 99, 251)" - }, - "dark": { - "value": "rgb(86, 129, 255)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "accent-content-color-down": { - "prop": "--spectrum-accent-content-color-down", - "ref": "var(--spectrum-accent-color-1000)", - "light": { - "value": "rgb(39, 77, 234)" - }, - "dark": { - "value": "rgb(105, 149, 254)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "accent-content-color-hover": { - "prop": "--spectrum-accent-content-color-hover", - "ref": "var(--spectrum-accent-color-1000)", - "light": { - "value": "rgb(39, 77, 234)" - }, - "dark": { - "value": "rgb(105, 149, 254)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "accent-content-color-key-focus": { - "prop": "--spectrum-accent-content-color-key-focus", - "ref": "var(--spectrum-accent-color-1000)", - "light": { - "value": "rgb(39, 77, 234)" - }, - "dark": { - "value": "rgb(105, 149, 254)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "accent-content-color-selected": { - "prop": "--spectrum-accent-content-color-selected", - "ref": "var(--spectrum-accent-content-color-down)", - "light": { - "value": "rgb(39, 77, 234)" - }, - "dark": { - "value": "rgb(105, 149, 254)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "accent-subtle-background-color-default": { - "prop": "--spectrum-accent-subtle-background-color-default", - "ref": "var(--spectrum-accent-color-200)", - "light": { - "value": "rgb(229, 240, 254)" - }, - "dark": { - "value": "rgb(15, 28, 82)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "accent-visual-color": { - "prop": "--spectrum-accent-visual-color", - "ref": "var(--spectrum-accent-color-800)", - "light": { - "value": "rgb(75, 117, 255)" - }, - "dark": { - "value": "rgb(64, 105, 253)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "accordion-bottom-to-text-compact-extra-large": { - "prop": "--spectrum-accordion-bottom-to-text-compact-extra-large", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "accordion-bottom-to-text-compact-large": { - "prop": "--spectrum-accordion-bottom-to-text-compact-large", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "9px" - } - }, - "accordion-bottom-to-text-compact-medium": { - "prop": "--spectrum-accordion-bottom-to-text-compact-medium", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "8px" - } - }, - "accordion-bottom-to-text-compact-small": { - "prop": "--spectrum-accordion-bottom-to-text-compact-small", - "desktop": { - "value": "2px" - }, - "mobile": { - "value": "4px" - } - }, - "accordion-bottom-to-text-extra-large": { - "prop": "--spectrum-accordion-bottom-to-text-extra-large", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "accordion-bottom-to-text-large": { - "prop": "--spectrum-accordion-bottom-to-text-large", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "14px" - } - }, - "accordion-bottom-to-text-medium": { - "prop": "--spectrum-accordion-bottom-to-text-medium", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "13px" - } - }, - "accordion-bottom-to-text-regular-extra-large": { - "prop": "--spectrum-accordion-bottom-to-text-regular-extra-large", - "ref": "var(--spectrum-accordion-bottom-to-text-extra-large)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "accordion-bottom-to-text-regular-large": { - "prop": "--spectrum-accordion-bottom-to-text-regular-large", - "ref": "var(--spectrum-accordion-bottom-to-text-large)", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "14px" - } - }, - "accordion-bottom-to-text-regular-medium": { - "prop": "--spectrum-accordion-bottom-to-text-regular-medium", - "ref": "var(--spectrum-accordion-bottom-to-text-medium)", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "13px" - } - }, - "accordion-bottom-to-text-regular-small": { - "prop": "--spectrum-accordion-bottom-to-text-regular-small", - "ref": "var(--spectrum-accordion-bottom-to-text-small)", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "accordion-bottom-to-text-small": { - "prop": "--spectrum-accordion-bottom-to-text-small", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "accordion-bottom-to-text-spacious-extra-large": { - "prop": "--spectrum-accordion-bottom-to-text-spacious-extra-large", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "21px" - } - }, - "accordion-bottom-to-text-spacious-large": { - "prop": "--spectrum-accordion-bottom-to-text-spacious-large", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "19px" - } - }, - "accordion-bottom-to-text-spacious-medium": { - "prop": "--spectrum-accordion-bottom-to-text-spacious-medium", - "desktop": { - "value": "13px" - }, - "mobile": { - "value": "18px" - } - }, - "accordion-bottom-to-text-spacious-small": { - "prop": "--spectrum-accordion-bottom-to-text-spacious-small", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "15px" - } - }, - "accordion-content-area-bottom-to-content": { - "prop": "--spectrum-accordion-content-area-bottom-to-content", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "accordion-content-area-edge-to-content-extra-large": { - "prop": "--spectrum-accordion-content-area-edge-to-content-extra-large", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "19px" - } - }, - "accordion-content-area-edge-to-content-large": { - "prop": "--spectrum-accordion-content-area-edge-to-content-large", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "accordion-content-area-edge-to-content-medium": { - "prop": "--spectrum-accordion-content-area-edge-to-content-medium", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "accordion-content-area-edge-to-content-small": { - "prop": "--spectrum-accordion-content-area-edge-to-content-small", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "accordion-content-area-top-to-content": { - "prop": "--spectrum-accordion-content-area-top-to-content", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "accordion-disclosure-indicator-to-text": { - "prop": "--spectrum-accordion-disclosure-indicator-to-text", - "value": "0px" - }, - "accordion-disclosure-indicator-to-text-extra-large": { - "prop": "--spectrum-accordion-disclosure-indicator-to-text-extra-large", - "desktop": { - "value": "17px" - }, - "mobile": { - "value": "22px" - } - }, - "accordion-disclosure-indicator-to-text-large": { - "prop": "--spectrum-accordion-disclosure-indicator-to-text-large", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "accordion-disclosure-indicator-to-text-medium": { - "prop": "--spectrum-accordion-disclosure-indicator-to-text-medium", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "13px" - } - }, - "accordion-disclosure-indicator-to-text-small": { - "prop": "--spectrum-accordion-disclosure-indicator-to-text-small", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "accordion-edge-to-content-area-extra-large": { - "prop": "--spectrum-accordion-edge-to-content-area-extra-large", - "value": "17px" - }, - "accordion-edge-to-content-area-large": { - "prop": "--spectrum-accordion-edge-to-content-area-large", - "value": "14px" - }, - "accordion-edge-to-content-area-medium": { - "prop": "--spectrum-accordion-edge-to-content-area-medium", - "value": "11px" - }, - "accordion-edge-to-content-area-small": { - "prop": "--spectrum-accordion-edge-to-content-area-small", - "value": "7px" - }, - "accordion-edge-to-disclosure-indicator": { - "prop": "--spectrum-accordion-edge-to-disclosure-indicator", - "value": "0px" - }, - "accordion-edge-to-text": { - "prop": "--spectrum-accordion-edge-to-text", - "value": "0px" - }, - "accordion-focus-indicator-gap": { - "prop": "--spectrum-accordion-focus-indicator-gap", - "value": "2px" - }, - "accordion-item-to-divider": { - "prop": "--spectrum-accordion-item-to-divider", - "value": "0px" - }, - "accordion-minimum-width": { - "prop": "--spectrum-accordion-minimum-width", - "desktop": { - "value": "200px" - }, - "mobile": { - "value": "250px" - } - }, - "accordion-small-top-to-text-spacious": { - "prop": "--spectrum-accordion-small-top-to-text-spacious", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "12px" - } - }, - "accordion-top-to-text-compact-extra-large": { - "prop": "--spectrum-accordion-top-to-text-compact-extra-large", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "11px" - } - }, - "accordion-top-to-text-compact-large": { - "prop": "--spectrum-accordion-top-to-text-compact-large", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "14px" - } - }, - "accordion-top-to-text-compact-medium": { - "prop": "--spectrum-accordion-top-to-text-compact-medium", - "value": "5px" - }, - "accordion-top-to-text-compact-small": { - "prop": "--spectrum-accordion-top-to-text-compact-small", - "desktop": { - "value": "3px" - }, - "mobile": { - "value": "4px" - } - }, - "accordion-top-to-text-extra-large": { - "prop": "--spectrum-accordion-top-to-text-extra-large", - "desktop": { - "value": "13px" - }, - "mobile": { - "value": "17px" - } - }, - "accordion-top-to-text-large": { - "prop": "--spectrum-accordion-top-to-text-large", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "16px" - } - }, - "accordion-top-to-text-medium": { - "prop": "--spectrum-accordion-top-to-text-medium", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "10px" - } - }, - "accordion-top-to-text-regular-extra-large": { - "prop": "--spectrum-accordion-top-to-text-regular-extra-large", - "ref": "var(--spectrum-accordion-top-to-text-extra-large)", - "desktop": { - "value": "13px" - }, - "mobile": { - "value": "17px" - } - }, - "accordion-top-to-text-regular-large": { - "prop": "--spectrum-accordion-top-to-text-regular-large", - "ref": "var(--spectrum-accordion-top-to-text-large)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "16px" - } - }, - "accordion-top-to-text-regular-medium": { - "prop": "--spectrum-accordion-top-to-text-regular-medium", - "ref": "var(--spectrum-accordion-top-to-text-medium)", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "10px" - } - }, - "accordion-top-to-text-regular-small": { - "prop": "--spectrum-accordion-top-to-text-regular-small", - "ref": "var(--spectrum-accordion-top-to-text-small)", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "10px" - } - }, - "accordion-top-to-text-small": { - "prop": "--spectrum-accordion-top-to-text-small", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "10px" - } - }, - "accordion-top-to-text-spacious-extra-large": { - "prop": "--spectrum-accordion-top-to-text-spacious-extra-large", - "desktop": { - "value": "17px" - }, - "mobile": { - "value": "21px" - } - }, - "accordion-top-to-text-spacious-large": { - "prop": "--spectrum-accordion-top-to-text-spacious-large", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "19px" - } - }, - "accordion-top-to-text-spacious-medium": { - "prop": "--spectrum-accordion-top-to-text-spacious-medium", - "desktop": { - "value": "13px" - }, - "mobile": { - "value": "15px" - } - }, - "accordion-top-to-text-spacious-small": { - "prop": "--spectrum-accordion-top-to-text-spacious-small", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "15px" - } - }, - "action-bar-border-color": { - "prop": "--spectrum-action-bar-border-color", - "ref": "var(--spectrum-transparent-white-25)", - "value": "rgba(255, 255, 255, 0)" - }, - "action-bar-bottom-to-content-area": { - "prop": "--spectrum-action-bar-bottom-to-content-area", - "ref": "var(--spectrum-spacing-200)", - "value": "12px" - }, - "action-bar-close-button-to-counter": { - "prop": "--spectrum-action-bar-close-button-to-counter", - "ref": "var(--spectrum-text-to-control-50)", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "action-bar-counter-font-size": { - "prop": "--spectrum-action-bar-counter-font-size", - "ref": "var(--spectrum-font-size-100)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "action-bar-edge-to-content-area": { - "prop": "--spectrum-action-bar-edge-to-content-area", - "ref": "var(--spectrum-spacing-100)", - "value": "8px" - }, - "action-bar-height": { - "prop": "--spectrum-action-bar-height", - "ref": "var(--spectrum-component-height-400)", - "desktop": { - "value": "56px" - }, - "mobile": { - "value": "70px" - } - }, - "action-bar-label-to-action-group-area": { - "prop": "--spectrum-action-bar-label-to-action-group-area", - "ref": "var(--spectrum-spacing-300)", - "value": "16px" - }, - "action-bar-minimum-width": { - "prop": "--spectrum-action-bar-minimum-width", - "value": "176px" - }, - "action-bar-top-to-content-area": { - "prop": "--spectrum-action-bar-top-to-content-area", - "ref": "var(--spectrum-spacing-200)", - "value": "12px" - }, - "action-bar-top-to-item-counter": { - "prop": "--spectrum-action-bar-top-to-item-counter", - "ref": "var(--spectrum-component-top-to-text-300)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "action-button-edge-to-hold-icon-extra-large": { - "prop": "--spectrum-action-button-edge-to-hold-icon-extra-large", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "7px" - } - }, - "action-button-edge-to-hold-icon-extra-small": { - "prop": "--spectrum-action-button-edge-to-hold-icon-extra-small", - "value": "3px" - }, - "action-button-edge-to-hold-icon-large": { - "prop": "--spectrum-action-button-edge-to-hold-icon-large", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "6px" - } - }, - "action-button-edge-to-hold-icon-medium": { - "prop": "--spectrum-action-button-edge-to-hold-icon-medium", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "action-button-edge-to-hold-icon-small": { - "prop": "--spectrum-action-button-edge-to-hold-icon-small", - "value": "3px" - }, - "add-icon-size-100": { - "prop": "--spectrum-add-icon-size-100", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "14px" - } - }, - "add-icon-size-200": { - "prop": "--spectrum-add-icon-size-200", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "14px" - } - }, - "add-icon-size-300": { - "prop": "--spectrum-add-icon-size-300", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "16px" - } - }, - "add-icon-size-50": { - "prop": "--spectrum-add-icon-size-50", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "add-icon-size-75": { - "prop": "--spectrum-add-icon-size-75", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "alert-banner-bottom-to-text": { - "prop": "--spectrum-alert-banner-bottom-to-text", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "22px" - } - }, - "alert-banner-minimum-height": { - "prop": "--spectrum-alert-banner-minimum-height", - "desktop": { - "value": "56px" - }, - "mobile": { - "value": "64px" - } - }, - "alert-banner-to-bottom-text": { - "prop": "--spectrum-alert-banner-to-bottom-text", - "ref": "var(--spectrum-alert-banner-bottom-to-text)", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "22px" - } - }, - "alert-banner-to-top-text": { - "prop": "--spectrum-alert-banner-to-top-text", - "ref": "var(--spectrum-alert-banner-top-to-text)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "21px" - } - }, - "alert-banner-to-top-workflow-icon": { - "prop": "--spectrum-alert-banner-to-top-workflow-icon", - "ref": "var(--spectrum-alert-banner-top-to-workflow-icon)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "20px" - } - }, - "alert-banner-top-to-alert-icon": { - "prop": "--spectrum-alert-banner-top-to-alert-icon", - "desktop": { - "value": "37px" - }, - "mobile": { - "value": "29px" - } - }, - "alert-banner-top-to-text": { - "prop": "--spectrum-alert-banner-top-to-text", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "21px" - } - }, - "alert-banner-top-to-workflow-icon": { - "prop": "--spectrum-alert-banner-top-to-workflow-icon", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "20px" - } - }, - "alert-banner-width": { - "prop": "--spectrum-alert-banner-width", - "desktop": { - "value": "832px" - }, - "mobile": { - "value": "680px" - } - }, - "alert-dialog-description-font-size": { - "prop": "--spectrum-alert-dialog-description-font-size", - "ref": "var(--spectrum-body-size-s)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "alert-dialog-description-size": { - "prop": "--spectrum-alert-dialog-description-size", - "ref": "var(--spectrum-alert-dialog-description-font-size)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "alert-dialog-maximum-width": { - "prop": "--spectrum-alert-dialog-maximum-width", - "value": "480px" - }, - "alert-dialog-minimum-width": { - "prop": "--spectrum-alert-dialog-minimum-width", - "value": "288px" - }, - "alert-dialog-title-font-size": { - "prop": "--spectrum-alert-dialog-title-font-size", - "ref": "var(--spectrum-title-size-xl)", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "alert-dialog-title-size": { - "prop": "--spectrum-alert-dialog-title-size", - "ref": "var(--spectrum-alert-dialog-title-font-size)", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "arrow-icon-size-100": { - "prop": "--spectrum-arrow-icon-size-100", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "14px" - } - }, - "arrow-icon-size-200": { - "prop": "--spectrum-arrow-icon-size-200", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "16px" - } - }, - "arrow-icon-size-300": { - "prop": "--spectrum-arrow-icon-size-300", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "16px" - } - }, - "arrow-icon-size-400": { - "prop": "--spectrum-arrow-icon-size-400", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "18px" - } - }, - "arrow-icon-size-500": { - "prop": "--spectrum-arrow-icon-size-500", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "arrow-icon-size-600": { - "prop": "--spectrum-arrow-icon-size-600", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "arrow-icon-size-75": { - "prop": "--spectrum-arrow-icon-size-75", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "asterisk-icon-size-100": { - "prop": "--spectrum-asterisk-icon-size-100", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "asterisk-icon-size-200": { - "prop": "--spectrum-asterisk-icon-size-200", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "asterisk-icon-size-300": { - "prop": "--spectrum-asterisk-icon-size-300", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "asterisk-icon-size-75": { - "prop": "--spectrum-asterisk-icon-size-75", - "value": "8px" - }, - "avatar-border-color": { - "prop": "--spectrum-avatar-border-color", - "ref": "var(--spectrum-gray-25)", - "dark": { - "value": "rgb(17, 17, 17)" - }, - "light": { - "value": "rgb(255, 255, 255)" - }, - "wireframe": { - "value": "rgb(254, 254, 255)" - } - }, - "avatar-border-width": { - "prop": "--spectrum-avatar-border-width", - "ref": "var(--spectrum-border-width-100)", - "value": "1px" - }, - "avatar-group-size-100": { - "prop": "--spectrum-avatar-group-size-100", - "ref": "var(--spectrum-avatar-size-100)", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "28px" - } - }, - "avatar-group-size-200": { - "prop": "--spectrum-avatar-group-size-200", - "ref": "var(--spectrum-avatar-size-200)", - "desktop": { - "value": "28px" - }, - "mobile": { - "value": "32px" - } - }, - "avatar-group-size-300": { - "prop": "--spectrum-avatar-group-size-300", - "ref": "var(--spectrum-avatar-size-300)", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "36px" - } - }, - "avatar-group-size-400": { - "prop": "--spectrum-avatar-group-size-400", - "ref": "var(--spectrum-avatar-size-400)", - "desktop": { - "value": "36px" - }, - "mobile": { - "value": "40px" - } - }, - "avatar-group-size-50": { - "prop": "--spectrum-avatar-group-size-50", - "ref": "var(--spectrum-avatar-size-50)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "avatar-group-size-500": { - "prop": "--spectrum-avatar-group-size-500", - "ref": "var(--spectrum-avatar-size-500)", - "desktop": { - "value": "40px" - }, - "mobile": { - "value": "44px" - } - }, - "avatar-group-size-75": { - "prop": "--spectrum-avatar-group-size-75", - "ref": "var(--spectrum-avatar-size-75)", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "avatar-opacity-disabled": { - "prop": "--spectrum-avatar-opacity-disabled", - "ref": "var(--spectrum-opacity-disabled)", - "value": "0.3" - }, - "avatar-size-100": { - "prop": "--spectrum-avatar-size-100", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "28px" - } - }, - "avatar-size-1000": { - "prop": "--spectrum-avatar-size-1000", - "desktop": { - "value": "64px" - }, - "mobile": { - "value": "72px" - } - }, - "avatar-size-1100": { - "prop": "--spectrum-avatar-size-1100", - "desktop": { - "value": "72px" - }, - "mobile": { - "value": "80px" - } - }, - "avatar-size-1200": { - "prop": "--spectrum-avatar-size-1200", - "desktop": { - "value": "80px" - }, - "mobile": { - "value": "88px" - } - }, - "avatar-size-1300": { - "prop": "--spectrum-avatar-size-1300", - "desktop": { - "value": "88px" - }, - "mobile": { - "value": "96px" - } - }, - "avatar-size-1400": { - "prop": "--spectrum-avatar-size-1400", - "desktop": { - "value": "96px" - }, - "mobile": { - "value": "104px" - } - }, - "avatar-size-1500": { - "prop": "--spectrum-avatar-size-1500", - "desktop": { - "value": "104px" - }, - "mobile": { - "value": "112px" - } - }, - "avatar-size-200": { - "prop": "--spectrum-avatar-size-200", - "desktop": { - "value": "28px" - }, - "mobile": { - "value": "32px" - } - }, - "avatar-size-300": { - "prop": "--spectrum-avatar-size-300", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "36px" - } - }, - "avatar-size-400": { - "prop": "--spectrum-avatar-size-400", - "desktop": { - "value": "36px" - }, - "mobile": { - "value": "40px" - } - }, - "avatar-size-50": { - "prop": "--spectrum-avatar-size-50", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "avatar-size-500": { - "prop": "--spectrum-avatar-size-500", - "desktop": { - "value": "40px" - }, - "mobile": { - "value": "44px" - } - }, - "avatar-size-600": { - "prop": "--spectrum-avatar-size-600", - "desktop": { - "value": "44px" - }, - "mobile": { - "value": "48px" - } - }, - "avatar-size-700": { - "prop": "--spectrum-avatar-size-700", - "desktop": { - "value": "48px" - }, - "mobile": { - "value": "52px" - } - }, - "avatar-size-75": { - "prop": "--spectrum-avatar-size-75", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "avatar-size-800": { - "prop": "--spectrum-avatar-size-800", - "desktop": { - "value": "52px" - }, - "mobile": { - "value": "56px" - } - }, - "avatar-size-900": { - "prop": "--spectrum-avatar-size-900", - "desktop": { - "value": "56px" - }, - "mobile": { - "value": "64px" - } - }, - "avatar-to-avatar-100": { - "prop": "--spectrum-avatar-to-avatar-100", - "desktop": { - "value": "-6px" - }, - "mobile": { - "value": "-7px" - } - }, - "avatar-to-avatar-200": { - "prop": "--spectrum-avatar-to-avatar-200", - "desktop": { - "value": "-7px" - }, - "mobile": { - "value": "-8px" - } - }, - "avatar-to-avatar-300": { - "prop": "--spectrum-avatar-to-avatar-300", - "desktop": { - "value": "-8px" - }, - "mobile": { - "value": "-9px" - } - }, - "avatar-to-avatar-400": { - "prop": "--spectrum-avatar-to-avatar-400", - "desktop": { - "value": "-9px" - }, - "mobile": { - "value": "-10px" - } - }, - "avatar-to-avatar-50": { - "prop": "--spectrum-avatar-to-avatar-50", - "desktop": { - "value": "-4px" - }, - "mobile": { - "value": "-5px" - } - }, - "avatar-to-avatar-500": { - "prop": "--spectrum-avatar-to-avatar-500", - "desktop": { - "value": "-10px" - }, - "mobile": { - "value": "-11px" - } - }, - "avatar-to-avatar-75": { - "prop": "--spectrum-avatar-to-avatar-75", - "desktop": { - "value": "-5px" - }, - "mobile": { - "value": "-6px" - } - }, - "background-base-color": { - "prop": "--spectrum-background-base-color", - "ref": "var(--spectrum-gray-25)", - "dark": { - "value": "rgb(17, 17, 17)" - }, - "light": { - "value": "rgb(255, 255, 255)" - }, - "wireframe": { - "value": "rgb(254, 254, 255)" - } - }, - "background-elevated-color": { - "prop": "--spectrum-background-elevated-color", - "ref": "var(--spectrum-gray-25)", - "dark": { - "value": "rgb(17, 17, 17)" - }, - "light": { - "value": "rgb(255, 255, 255)" - }, - "wireframe": { - "value": "rgb(254, 254, 255)" - } - }, - "background-layer-1-color": { - "prop": "--spectrum-background-layer-1-color", - "ref": "var(--spectrum-gray-50)", - "light": { - "value": "rgb(248, 248, 248)" - }, - "dark": { - "value": "rgb(27, 27, 27)" - }, - "wireframe": { - "value": "rgb(246, 248, 253)" - } - }, - "background-layer-2-color": { - "prop": "--spectrum-background-layer-2-color", - "ref": "var(--spectrum-gray-25)", - "dark": { - "value": "rgb(17, 17, 17)" - }, - "light": { - "value": "rgb(255, 255, 255)" - }, - "wireframe": { - "value": "rgb(254, 254, 255)" - } - }, - "background-opacity-default": { - "prop": "--spectrum-background-opacity-default", - "value": "0" - }, - "background-opacity-down": { - "prop": "--spectrum-background-opacity-down", - "value": "0.1" - }, - "background-opacity-hover": { - "prop": "--spectrum-background-opacity-hover", - "value": "0.1" - }, - "background-opacity-key-focus": { - "prop": "--spectrum-background-opacity-key-focus", - "value": "0.1" - }, - "background-pasteboard-color": { - "prop": "--spectrum-background-pasteboard-color", - "ref": "var(--spectrum-gray-100)", - "light": { - "value": "rgb(233, 233, 233)" - }, - "dark": { - "value": "rgb(44, 44, 44)" - }, - "wireframe": { - "value": "rgb(228, 234, 249)" - } - }, - "bar-panel-gripper-color": { - "prop": "--spectrum-bar-panel-gripper-color", - "ref": "var(--spectrum-gray-200)", - "light": { - "value": "rgb(225, 225, 225)" - }, - "dark": { - "value": "rgb(50, 50, 50)" - }, - "wireframe": { - "value": "rgb(214, 224, 246)" - } - }, - "bar-panel-gripper-color-drag": { - "prop": "--spectrum-bar-panel-gripper-color-drag", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" - }, - "wireframe": { - "value": "rgb(25, 46, 93)" - } - }, - "bar-panel-maximum-width": { - "prop": "--spectrum-bar-panel-maximum-width", - "value": "72px" - }, - "bar-panel-minimum-width": { - "prop": "--spectrum-bar-panel-minimum-width", - "value": "40px" - }, - "bar-panel-spacing-extra-spacious": { - "prop": "--spectrum-bar-panel-spacing-extra-spacious", - "value": "20px" - }, - "bar-panel-width": { - "prop": "--spectrum-bar-panel-width", - "value": "56px" - }, - "black": { - "prop": "--spectrum-black", - "value": "rgb(0, 0, 0)" - }, - "black-font-weight": { - "prop": "--spectrum-black-font-weight", - "value": "900" - }, - "blue-100": { - "prop": "--spectrum-blue-100", - "light": { - "value": "rgb(245, 249, 255)" - }, - "dark": { - "value": "rgb(14, 23, 63)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "blue-1000": { - "prop": "--spectrum-blue-1000", - "light": { - "value": "rgb(39, 77, 234)" - }, - "dark": { - "value": "rgb(105, 149, 254)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "blue-1100": { - "prop": "--spectrum-blue-1100", - "light": { - "value": "rgb(29, 62, 207)" - }, - "dark": { - "value": "rgb(124, 169, 252)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "blue-1200": { - "prop": "--spectrum-blue-1200", - "light": { - "value": "rgb(21, 50, 173)" - }, - "dark": { - "value": "rgb(152, 192, 252)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "blue-1300": { - "prop": "--spectrum-blue-1300", - "light": { - "value": "rgb(16, 40, 140)" - }, - "dark": { - "value": "rgb(181, 213, 253)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "blue-1400": { - "prop": "--spectrum-blue-1400", - "light": { - "value": "rgb(12, 31, 105)" - }, - "dark": { - "value": "rgb(213, 231, 254)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "blue-1500": { - "prop": "--spectrum-blue-1500", - "dark": { - "value": "rgb(238, 245, 255)" - }, - "light": { - "value": "rgb(14, 24, 67)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "blue-1600": { - "prop": "--spectrum-blue-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(7, 11, 30)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "blue-200": { - "prop": "--spectrum-blue-200", - "light": { - "value": "rgb(229, 240, 254)" - }, - "dark": { - "value": "rgb(15, 28, 82)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "blue-300": { - "prop": "--spectrum-blue-300", - "light": { - "value": "rgb(203, 226, 254)" - }, - "dark": { - "value": "rgb(12, 33, 117)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "blue-400": { - "prop": "--spectrum-blue-400", - "light": { - "value": "rgb(172, 207, 253)" - }, - "dark": { - "value": "rgb(18, 45, 154)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "blue-500": { - "prop": "--spectrum-blue-500", - "light": { - "value": "rgb(142, 185, 252)" - }, - "dark": { - "value": "rgb(26, 58, 195)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "blue-600": { - "prop": "--spectrum-blue-600", - "light": { - "value": "rgb(114, 158, 253)" - }, - "dark": { - "value": "rgb(37, 73, 229)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "blue-700": { - "prop": "--spectrum-blue-700", - "light": { - "value": "rgb(93, 137, 255)" - }, - "dark": { - "value": "rgb(52, 91, 248)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "blue-800": { - "prop": "--spectrum-blue-800", - "light": { - "value": "rgb(75, 117, 255)" - }, - "dark": { - "value": "rgb(64, 105, 253)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "blue-900": { - "prop": "--spectrum-blue-900", - "light": { - "value": "rgb(59, 99, 251)" - }, - "dark": { - "value": "rgb(86, 129, 255)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "blue-background-color-default": { - "prop": "--spectrum-blue-background-color-default", - "ref": "var(--spectrum-blue-900)", - "light": { - "value": "rgb(59, 99, 251)" - }, - "dark": { - "value": "rgb(86, 129, 255)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "blue-subtle-background-color-default": { - "prop": "--spectrum-blue-subtle-background-color-default", - "ref": "var(--spectrum-blue-200)", - "light": { - "value": "rgb(229, 240, 254)" - }, - "dark": { - "value": "rgb(15, 28, 82)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "blue-visual-color": { - "prop": "--spectrum-blue-visual-color", - "ref": "var(--spectrum-blue-800)", - "light": { - "value": "rgb(75, 117, 255)" - }, - "dark": { - "value": "rgb(64, 105, 253)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "body-cjk-emphasized-font-style": { - "prop": "--spectrum-body-cjk-emphasized-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "body-cjk-emphasized-font-weight": { - "prop": "--spectrum-body-cjk-emphasized-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" - }, - "body-cjk-font-family": { - "prop": "--spectrum-body-cjk-font-family", - "ref": "var(--spectrum-cjk-font-family)", - "value": "Adobe Clean Han" - }, - "body-cjk-font-style": { - "prop": "--spectrum-body-cjk-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "body-cjk-font-weight": { - "prop": "--spectrum-body-cjk-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "body-cjk-line-height": { - "prop": "--spectrum-body-cjk-line-height", - "ref": "var(--spectrum-cjk-line-height-200)", - "value": "1.7" - }, - "body-cjk-size-l": { - "prop": "--spectrum-body-cjk-size-l", - "ref": "var(--spectrum-font-size-200)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "19px" - } - }, - "body-cjk-size-m": { - "prop": "--spectrum-body-cjk-size-m", - "ref": "var(--spectrum-font-size-100)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "body-cjk-size-s": { - "prop": "--spectrum-body-cjk-size-s", - "ref": "var(--spectrum-font-size-75)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "body-cjk-size-xl": { - "prop": "--spectrum-body-cjk-size-xl", - "ref": "var(--spectrum-font-size-300)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "body-cjk-size-xs": { - "prop": "--spectrum-body-cjk-size-xs", - "ref": "var(--spectrum-font-size-50)", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "13px" - } - }, - "body-cjk-size-xxl": { - "prop": "--spectrum-body-cjk-size-xxl", - "ref": "var(--spectrum-font-size-400)", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "body-cjk-size-xxs": { - "prop": "--spectrum-body-cjk-size-xxs", - "ref": "var(--spectrum-font-size-25)", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "body-cjk-size-xxxl": { - "prop": "--spectrum-body-cjk-size-xxxl", - "ref": "var(--spectrum-font-size-500)", - "desktop": { - "value": "22px" - }, - "mobile": { - "value": "27px" - } - }, - "body-cjk-strong-emphasized-font-style": { - "prop": "--spectrum-body-cjk-strong-emphasized-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "body-cjk-strong-emphasized-font-weight": { - "prop": "--spectrum-body-cjk-strong-emphasized-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" - }, - "body-cjk-strong-font-style": { - "prop": "--spectrum-body-cjk-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "body-cjk-strong-font-weight": { - "prop": "--spectrum-body-cjk-strong-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" - }, - "body-color": { - "prop": "--spectrum-body-color", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" - }, - "wireframe": { - "value": "rgb(25, 46, 93)" - } - }, - "body-line-height": { - "prop": "--spectrum-body-line-height", - "ref": "var(--spectrum-line-height-200)", - "value": "1.5" - }, - "body-margin-multiplier": { - "prop": "--spectrum-body-margin-multiplier", - "value": "0.75" - }, - "body-sans-serif-emphasized-font-style": { - "prop": "--spectrum-body-sans-serif-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "body-sans-serif-emphasized-font-weight": { - "prop": "--spectrum-body-sans-serif-emphasized-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "body-sans-serif-font-family": { - "prop": "--spectrum-body-sans-serif-font-family", - "ref": "var(--spectrum-sans-serif-font-family)", - "value": "Adobe Clean Spectrum VF" - }, - "body-sans-serif-font-style": { - "prop": "--spectrum-body-sans-serif-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "body-sans-serif-font-weight": { - "prop": "--spectrum-body-sans-serif-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "body-sans-serif-strong-emphasized-font-style": { - "prop": "--spectrum-body-sans-serif-strong-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "body-sans-serif-strong-emphasized-font-weight": { - "prop": "--spectrum-body-sans-serif-strong-emphasized-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "body-sans-serif-strong-font-style": { - "prop": "--spectrum-body-sans-serif-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "body-sans-serif-strong-font-weight": { - "prop": "--spectrum-body-sans-serif-strong-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "body-serif-emphasized-font-style": { - "prop": "--spectrum-body-serif-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "body-serif-emphasized-font-weight": { - "prop": "--spectrum-body-serif-emphasized-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "body-serif-font-family": { - "prop": "--spectrum-body-serif-font-family", - "ref": "var(--spectrum-serif-font-family)", - "value": "Adobe Clean Serif" - }, - "body-serif-font-style": { - "prop": "--spectrum-body-serif-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "body-serif-font-weight": { - "prop": "--spectrum-body-serif-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "body-serif-strong-emphasized-font-style": { - "prop": "--spectrum-body-serif-strong-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "body-serif-strong-emphasized-font-weight": { - "prop": "--spectrum-body-serif-strong-emphasized-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "body-serif-strong-font-style": { - "prop": "--spectrum-body-serif-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "body-serif-strong-font-weight": { - "prop": "--spectrum-body-serif-strong-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "body-size-l": { - "prop": "--spectrum-body-size-l", - "ref": "var(--spectrum-font-size-300)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "body-size-m": { - "prop": "--spectrum-body-size-m", - "ref": "var(--spectrum-font-size-200)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "19px" - } - }, - "body-size-s": { - "prop": "--spectrum-body-size-s", - "ref": "var(--spectrum-font-size-100)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "body-size-xl": { - "prop": "--spectrum-body-size-xl", - "ref": "var(--spectrum-font-size-400)", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "body-size-xs": { - "prop": "--spectrum-body-size-xs", - "ref": "var(--spectrum-font-size-75)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "body-size-xxl": { - "prop": "--spectrum-body-size-xxl", - "ref": "var(--spectrum-font-size-500)", - "desktop": { - "value": "22px" - }, - "mobile": { - "value": "27px" - } - }, - "body-size-xxs": { - "prop": "--spectrum-body-size-xxs", - "ref": "var(--spectrum-font-size-50)", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "13px" - } - }, - "body-size-xxxl": { - "prop": "--spectrum-body-size-xxxl", - "ref": "var(--spectrum-font-size-600)", - "desktop": { - "value": "25px" - }, - "mobile": { - "value": "31px" - } - }, - "bold-font-weight": { - "prop": "--spectrum-bold-font-weight", - "value": "700" - }, - "border-width-100": { - "prop": "--spectrum-border-width-100", - "value": "1px" - }, - "border-width-200": { - "prop": "--spectrum-border-width-200", - "value": "2px" - }, - "border-width-400": { - "prop": "--spectrum-border-width-400", - "value": "4px" - }, - "breadcrumbs-bottom-to-text": { - "prop": "--spectrum-breadcrumbs-bottom-to-text", - "ref": "var(--spectrum-component-bottom-to-text-200)", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "14px" - } - }, - "breadcrumbs-bottom-to-text-compact": { - "prop": "--spectrum-breadcrumbs-bottom-to-text-compact", - "ref": "var(--spectrum-component-bottom-to-text-100)", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "breadcrumbs-bottom-to-text-multiline": { - "prop": "--spectrum-breadcrumbs-bottom-to-text-multiline", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "breadcrumbs-end-edge-to-text": { - "prop": "--spectrum-breadcrumbs-end-edge-to-text", - "value": "0px" - }, - "breadcrumbs-height": { - "prop": "--spectrum-breadcrumbs-height", - "ref": "var(--spectrum-component-height-200)", - "desktop": { - "value": "40px" - }, - "mobile": { - "value": "50px" - } - }, - "breadcrumbs-height-compact": { - "prop": "--spectrum-breadcrumbs-height-compact", - "ref": "var(--spectrum-component-height-100)", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "40px" - } - }, - "breadcrumbs-height-multiline": { - "prop": "--spectrum-breadcrumbs-height-multiline", - "desktop": { - "value": "72px" - }, - "mobile": { - "value": "90px" - } - }, - "breadcrumbs-separator-icon-to-bottom-text-multiline": { - "prop": "--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline", - "ref": "var(--spectrum-breadcrumbs-separator-to-bottom-text-multiline)", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "15px" - } - }, - "breadcrumbs-separator-to-bottom-text-multiline": { - "prop": "--spectrum-breadcrumbs-separator-to-bottom-text-multiline", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "15px" - } - }, - "breadcrumbs-start-edge-to-text": { - "prop": "--spectrum-breadcrumbs-start-edge-to-text", - "ref": "var(--spectrum-breadcrumbs-start-edge-to-text-large)", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "breadcrumbs-start-edge-to-text-large": { - "prop": "--spectrum-breadcrumbs-start-edge-to-text-large", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "breadcrumbs-start-edge-to-text-medium": { - "prop": "--spectrum-breadcrumbs-start-edge-to-text-medium", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "breadcrumbs-start-edge-to-text-multiline": { - "prop": "--spectrum-breadcrumbs-start-edge-to-text-multiline", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "breadcrumbs-start-edge-to-truncated-menu": { - "prop": "--spectrum-breadcrumbs-start-edge-to-truncated-menu", - "value": "0px" - }, - "breadcrumbs-text-to-separator-large": { - "prop": "--spectrum-breadcrumbs-text-to-separator-large", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "breadcrumbs-text-to-separator-medium": { - "prop": "--spectrum-breadcrumbs-text-to-separator-medium", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "breadcrumbs-text-to-separator-multiline": { - "prop": "--spectrum-breadcrumbs-text-to-separator-multiline", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "breadcrumbs-top-text-to-bottom-text": { - "prop": "--spectrum-breadcrumbs-top-text-to-bottom-text", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "breadcrumbs-top-to-separator-icon": { - "prop": "--spectrum-breadcrumbs-top-to-separator-icon", - "ref": "var(--spectrum-breadcrumbs-top-to-separator-large)", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "20px" - } - }, - "breadcrumbs-top-to-separator-icon-compact": { - "prop": "--spectrum-breadcrumbs-top-to-separator-icon-compact", - "ref": "var(--spectrum-breadcrumbs-top-to-separator-medium)", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "15px" - } - }, - "breadcrumbs-top-to-separator-icon-multiline": { - "prop": "--spectrum-breadcrumbs-top-to-separator-icon-multiline", - "ref": "var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline)", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "15px" - } - }, - "breadcrumbs-top-to-separator-large": { - "prop": "--spectrum-breadcrumbs-top-to-separator-large", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "20px" - } - }, - "breadcrumbs-top-to-separator-medium": { - "prop": "--spectrum-breadcrumbs-top-to-separator-medium", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "15px" - } - }, - "breadcrumbs-top-to-separator-multiline": { - "prop": "--spectrum-breadcrumbs-top-to-separator-multiline", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "10px" - } - }, - "breadcrumbs-top-to-text": { - "prop": "--spectrum-breadcrumbs-top-to-text", - "ref": "var(--spectrum-component-top-to-text-200)", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "12px" - } - }, - "breadcrumbs-top-to-text-compact": { - "prop": "--spectrum-breadcrumbs-top-to-text-compact", - "ref": "var(--spectrum-component-top-to-text-100)", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "breadcrumbs-top-to-text-multiline": { - "prop": "--spectrum-breadcrumbs-top-to-text-multiline", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "breadcrumbs-top-to-truncated-menu": { - "prop": "--spectrum-breadcrumbs-top-to-truncated-menu", - "value": "0px" - }, - "breadcrumbs-top-to-truncated-menu-compact": { - "prop": "--spectrum-breadcrumbs-top-to-truncated-menu-compact", - "ref": "var(--spectrum-breadcrumbs-top-to-truncated-menu)", - "value": "0px" - }, - "breadcrumbs-truncated-menu-to-bottom-text": { - "prop": "--spectrum-breadcrumbs-truncated-menu-to-bottom-text", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "breadcrumbs-truncated-menu-to-separator": { - "prop": "--spectrum-breadcrumbs-truncated-menu-to-separator", - "value": "0px" - }, - "breadcrumbs-truncated-menu-to-separator-icon": { - "prop": "--spectrum-breadcrumbs-truncated-menu-to-separator-icon", - "ref": "var(--spectrum-breadcrumbs-truncated-menu-to-separator)", - "value": "0px" - }, - "brown-100": { - "prop": "--spectrum-brown-100", - "dark": { - "value": "rgb(35, 24, 8)" - }, - "light": { - "value": "rgb(252, 247, 242)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "brown-1000": { - "prop": "--spectrum-brown-1000", - "dark": { - "value": "rgb(181, 147, 98)" - }, - "light": { - "value": "rgb(119, 91, 50)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "brown-1100": { - "prop": "--spectrum-brown-1100", - "dark": { - "value": "rgb(199, 163, 112)" - }, - "light": { - "value": "rgb(103, 76, 35)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "brown-1200": { - "prop": "--spectrum-brown-1200", - "dark": { - "value": "rgb(222, 185, 130)" - }, - "light": { - "value": "rgb(88, 61, 21)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "brown-1300": { - "prop": "--spectrum-brown-1300", - "dark": { - "value": "rgb(232, 207, 169)" - }, - "light": { - "value": "rgb(70, 49, 17)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "brown-1400": { - "prop": "--spectrum-brown-1400", - "dark": { - "value": "rgb(242, 227, 206)" - }, - "light": { - "value": "rgb(52, 37, 13)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "brown-1500": { - "prop": "--spectrum-brown-1500", - "dark": { - "value": "rgb(250, 244, 236)" - }, - "light": { - "value": "rgb(38, 26, 9)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "brown-1600": { - "prop": "--spectrum-brown-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(16, 12, 4)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "brown-200": { - "prop": "--spectrum-brown-200", - "dark": { - "value": "rgb(44, 31, 11)" - }, - "light": { - "value": "rgb(247, 238, 225)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "brown-300": { - "prop": "--spectrum-brown-300", - "dark": { - "value": "rgb(58, 40, 14)" - }, - "light": { - "value": "rgb(239, 221, 195)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "brown-400": { - "prop": "--spectrum-brown-400", - "dark": { - "value": "rgb(78, 55, 19)" - }, - "light": { - "value": "rgb(229, 200, 157)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "brown-500": { - "prop": "--spectrum-brown-500", - "dark": { - "value": "rgb(98, 71, 30)" - }, - "light": { - "value": "rgb(214, 177, 123)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "brown-600": { - "prop": "--spectrum-brown-600", - "dark": { - "value": "rgb(115, 88, 47)" - }, - "light": { - "value": "rgb(190, 155, 104)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "brown-700": { - "prop": "--spectrum-brown-700", - "dark": { - "value": "rgb(132, 104, 61)" - }, - "light": { - "value": "rgb(171, 138, 90)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "brown-800": { - "prop": "--spectrum-brown-800", - "dark": { - "value": "rgb(143, 114, 69)" - }, - "light": { - "value": "rgb(154, 123, 77)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "brown-900": { - "prop": "--spectrum-brown-900", - "dark": { - "value": "rgb(163, 132, 84)" - }, - "light": { - "value": "rgb(139, 109, 66)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "brown-background-color-default": { - "prop": "--spectrum-brown-background-color-default", - "ref": "var(--spectrum-brown-900)", - "dark": { - "value": "rgb(163, 132, 84)" - }, - "light": { - "value": "rgb(139, 109, 66)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "brown-subtle-background-color-default": { - "prop": "--spectrum-brown-subtle-background-color-default", - "ref": "var(--spectrum-brown-200)", - "dark": { - "value": "rgb(44, 31, 11)" - }, - "light": { - "value": "rgb(247, 238, 225)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "brown-visual-color": { - "prop": "--spectrum-brown-visual-color", - "ref": "var(--spectrum-brown-800)", - "dark": { - "value": "rgb(143, 114, 69)" - }, - "light": { - "value": "rgb(154, 123, 77)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "button-minimum-width-multiplier": { - "prop": "--spectrum-button-minimum-width-multiplier", - "value": "2.25" - }, - "card-background-loading-color": { - "prop": "--spectrum-card-background-loading-color", - "ref": "var(--spectrum-gray-100)", - "light": { - "value": "rgb(233, 233, 233)" - }, - "dark": { - "value": "rgb(44, 44, 44)" - }, - "wireframe": { - "value": "rgb(228, 234, 249)" - } - }, - "card-background-well-color": { - "prop": "--spectrum-card-background-well-color", - "ref": "var(--spectrum-gray-100)", - "light": { - "value": "rgb(233, 233, 233)" - }, - "dark": { - "value": "rgb(44, 44, 44)" - }, - "wireframe": { - "value": "rgb(228, 234, 249)" - } - }, - "card-default-width-extra-large": { - "prop": "--spectrum-card-default-width-extra-large", - "value": "400px" - }, - "card-default-width-extra-small": { - "prop": "--spectrum-card-default-width-extra-small", - "value": "120px" - }, - "card-default-width-large": { - "prop": "--spectrum-card-default-width-large", - "value": "320px" - }, - "card-default-width-medium": { - "prop": "--spectrum-card-default-width-medium", - "value": "240px" - }, - "card-default-width-small": { - "prop": "--spectrum-card-default-width-small", - "value": "180px" - }, - "card-description-to-footer": { - "prop": "--spectrum-card-description-to-footer", - "ref": "var(--spectrum-spacing-300)", - "value": "16px" - }, - "card-edge-to-content-compact-extra-large": { - "prop": "--spectrum-card-edge-to-content-compact-extra-large", - "value": "20px" - }, - "card-edge-to-content-compact-extra-small": { - "prop": "--spectrum-card-edge-to-content-compact-extra-small", - "value": "6px" - }, - "card-edge-to-content-compact-large": { - "prop": "--spectrum-card-edge-to-content-compact-large", - "value": "16px" - }, - "card-edge-to-content-compact-medium": { - "prop": "--spectrum-card-edge-to-content-compact-medium", - "value": "12px" - }, - "card-edge-to-content-compact-small": { - "prop": "--spectrum-card-edge-to-content-compact-small", - "value": "8px" - }, - "card-edge-to-content-default-extra-large": { - "prop": "--spectrum-card-edge-to-content-default-extra-large", - "value": "24px" - }, - "card-edge-to-content-default-extra-small": { - "prop": "--spectrum-card-edge-to-content-default-extra-small", - "value": "8px" - }, - "card-edge-to-content-default-large": { - "prop": "--spectrum-card-edge-to-content-default-large", - "value": "20px" - }, - "card-edge-to-content-default-medium": { - "prop": "--spectrum-card-edge-to-content-default-medium", - "value": "16px" - }, - "card-edge-to-content-default-small": { - "prop": "--spectrum-card-edge-to-content-default-small", - "value": "12px" - }, - "card-edge-to-content-spacious-extra-large": { - "prop": "--spectrum-card-edge-to-content-spacious-extra-large", - "value": "28px" - }, - "card-edge-to-content-spacious-extra-small": { - "prop": "--spectrum-card-edge-to-content-spacious-extra-small", - "value": "12px" - }, - "card-edge-to-content-spacious-large": { - "prop": "--spectrum-card-edge-to-content-spacious-large", - "value": "24px" - }, - "card-edge-to-content-spacious-medium": { - "prop": "--spectrum-card-edge-to-content-spacious-medium", - "value": "20px" - }, - "card-edge-to-content-spacious-small": { - "prop": "--spectrum-card-edge-to-content-spacious-small", - "value": "16px" - }, - "card-header-to-description": { - "prop": "--spectrum-card-header-to-description", - "ref": "var(--spectrum-spacing-75)", - "value": "4px" - }, - "card-horizontal-edge-to-content-compact": { - "prop": "--spectrum-card-horizontal-edge-to-content-compact", - "value": "12px" - }, - "card-horizontal-edge-to-content-default": { - "prop": "--spectrum-card-horizontal-edge-to-content-default", - "value": "16px" - }, - "card-horizontal-edge-to-content-spacious": { - "prop": "--spectrum-card-horizontal-edge-to-content-spacious", - "value": "20px" - }, - "card-maximum-width-extra-large": { - "prop": "--spectrum-card-maximum-width-extra-large", - "value": "460px" - }, - "card-maximum-width-extra-small": { - "prop": "--spectrum-card-maximum-width-extra-small", - "value": "140px" - }, - "card-maximum-width-large": { - "prop": "--spectrum-card-maximum-width-large", - "value": "370px" - }, - "card-maximum-width-medium": { - "prop": "--spectrum-card-maximum-width-medium", - "value": "280px" - }, - "card-maximum-width-small": { - "prop": "--spectrum-card-maximum-width-small", - "value": "210px" - }, - "card-minimum-height-extra-large": { - "prop": "--spectrum-card-minimum-height-extra-large", - "value": "300px" - }, - "card-minimum-height-extra-small": { - "prop": "--spectrum-card-minimum-height-extra-small", - "value": "90px" - }, - "card-minimum-height-large": { - "prop": "--spectrum-card-minimum-height-large", - "value": "240px" - }, - "card-minimum-height-medium": { - "prop": "--spectrum-card-minimum-height-medium", - "value": "180px" - }, - "card-minimum-height-small": { - "prop": "--spectrum-card-minimum-height-small", - "value": "135px" - }, - "card-minimum-width": { - "prop": "--spectrum-card-minimum-width", - "ref": "var(--spectrum-card-minimum-width-default)", - "value": "100px" - }, - "card-minimum-width-default": { - "prop": "--spectrum-card-minimum-width-default", - "value": "100px" - }, - "card-minimum-width-extra-large": { - "prop": "--spectrum-card-minimum-width-extra-large", - "value": "340px" - }, - "card-minimum-width-extra-small": { - "prop": "--spectrum-card-minimum-width-extra-small", - "value": "100px" - }, - "card-minimum-width-large": { - "prop": "--spectrum-card-minimum-width-large", - "value": "270px" - }, - "card-minimum-width-medium": { - "prop": "--spectrum-card-minimum-width-medium", - "value": "200px" - }, - "card-minimum-width-small": { - "prop": "--spectrum-card-minimum-width-small", - "value": "150px" - }, - "card-preview-minimum-height": { - "prop": "--spectrum-card-preview-minimum-height", - "value": "130px" - }, - "card-selection-background-color": { - "prop": "--spectrum-card-selection-background-color", - "ref": "var(--spectrum-transparent-black-600)", - "value": "rgba(0, 0, 0, 0.56)" - }, - "card-selection-background-color-opacity": { - "prop": "--spectrum-card-selection-background-color-opacity", - "value": "0.95" - }, - "card-selection-background-size": { - "prop": "--spectrum-card-selection-background-size", - "value": "40px" - }, - "card-selection-background-size-extra-large": { - "prop": "--spectrum-card-selection-background-size-extra-large", - "value": "28px" - }, - "card-selection-background-size-large": { - "prop": "--spectrum-card-selection-background-size-large", - "value": "26px" - }, - "card-selection-background-size-medium": { - "prop": "--spectrum-card-selection-background-size-medium", - "value": "24px" - }, - "card-selection-background-size-small": { - "prop": "--spectrum-card-selection-background-size-small", - "value": "22px" - }, - "celery-100": { - "prop": "--spectrum-celery-100", - "light": { - "value": "rgb(235, 255, 220)" - }, - "dark": { - "value": "rgb(11, 31, 0)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "celery-1000": { - "prop": "--spectrum-celery-1000", - "light": { - "value": "rgb(52, 109, 12)" - }, - "dark": { - "value": "rgb(88, 172, 28)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "celery-1100": { - "prop": "--spectrum-celery-1100", - "light": { - "value": "rgb(44, 92, 9)" - }, - "dark": { - "value": "rgb(100, 190, 35)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "celery-1200": { - "prop": "--spectrum-celery-1200", - "light": { - "value": "rgb(35, 75, 6)" - }, - "dark": { - "value": "rgb(116, 213, 46)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "celery-1300": { - "prop": "--spectrum-celery-1300", - "light": { - "value": "rgb(27, 60, 3)" - }, - "dark": { - "value": "rgb(136, 234, 65)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "celery-1400": { - "prop": "--spectrum-celery-1400", - "light": { - "value": "rgb(19, 46, 0)" - }, - "dark": { - "value": "rgb(170, 251, 112)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "celery-1500": { - "prop": "--spectrum-celery-1500", - "dark": { - "value": "rgb(222, 255, 198)" - }, - "light": { - "value": "rgb(12, 33, 0)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "celery-1600": { - "prop": "--spectrum-celery-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(4, 15, 0)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "celery-200": { - "prop": "--spectrum-celery-200", - "light": { - "value": "rgb(197, 255, 156)" - }, - "dark": { - "value": "rgb(15, 38, 0)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "celery-300": { - "prop": "--spectrum-celery-300", - "light": { - "value": "rgb(157, 247, 92)" - }, - "dark": { - "value": "rgb(21, 51, 1)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "celery-400": { - "prop": "--spectrum-celery-400", - "light": { - "value": "rgb(129, 228, 58)" - }, - "dark": { - "value": "rgb(31, 67, 4)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "celery-500": { - "prop": "--spectrum-celery-500", - "light": { - "value": "rgb(110, 206, 42)" - }, - "dark": { - "value": "rgb(41, 86, 8)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "celery-600": { - "prop": "--spectrum-celery-600", - "light": { - "value": "rgb(93, 180, 31)" - }, - "dark": { - "value": "rgb(50, 105, 11)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "celery-700": { - "prop": "--spectrum-celery-700", - "light": { - "value": "rgb(82, 161, 25)" - }, - "dark": { - "value": "rgb(60, 122, 15)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "celery-800": { - "prop": "--spectrum-celery-800", - "light": { - "value": "rgb(72, 144, 20)" - }, - "dark": { - "value": "rgb(66, 134, 18)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "celery-900": { - "prop": "--spectrum-celery-900", - "light": { - "value": "rgb(64, 129, 17)" - }, - "dark": { - "value": "rgb(78, 154, 23)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "celery-background-color-default": { - "prop": "--spectrum-celery-background-color-default", - "ref": "var(--spectrum-celery-600)", - "light": { - "value": "rgb(93, 180, 31)" - }, - "dark": { - "value": "rgb(50, 105, 11)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "celery-subtle-background-color-default": { - "prop": "--spectrum-celery-subtle-background-color-default", - "ref": "var(--spectrum-celery-200)", - "light": { - "value": "rgb(197, 255, 156)" - }, - "dark": { - "value": "rgb(15, 38, 0)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "celery-visual-color": { - "prop": "--spectrum-celery-visual-color", - "ref": "var(--spectrum-celery-700)", - "light": { - "value": "rgb(82, 161, 25)" - }, - "dark": { - "value": "rgb(60, 122, 15)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "character-count-to-field-quiet-extra-large": { - "prop": "--spectrum-character-count-to-field-quiet-extra-large", - "desktop": { - "value": "-4px" - }, - "mobile": { - "value": "-5px" - } - }, - "character-count-to-field-quiet-large": { - "prop": "--spectrum-character-count-to-field-quiet-large", - "desktop": { - "value": "-3px" - }, - "mobile": { - "value": "-4px" - } - }, - "character-count-to-field-quiet-medium": { - "prop": "--spectrum-character-count-to-field-quiet-medium", - "desktop": { - "value": "-3px" - }, - "mobile": { - "value": "-4px" - } - }, - "character-count-to-field-quiet-small": { - "prop": "--spectrum-character-count-to-field-quiet-small", - "desktop": { - "value": "-3px" - }, - "mobile": { - "value": "-4px" - } - }, - "chartreuse-100": { - "prop": "--spectrum-chartreuse-100", - "light": { - "value": "rgb(246, 251, 222)" - }, - "dark": { - "value": "rgb(23, 28, 0)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "chartreuse-1000": { - "prop": "--spectrum-chartreuse-1000", - "light": { - "value": "rgb(86, 103, 0)" - }, - "dark": { - "value": "rgb(136, 164, 0)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "chartreuse-1100": { - "prop": "--spectrum-chartreuse-1100", - "light": { - "value": "rgb(73, 87, 0)" - }, - "dark": { - "value": "rgb(151, 181, 0)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "chartreuse-1200": { - "prop": "--spectrum-chartreuse-1200", - "light": { - "value": "rgb(60, 71, 0)" - }, - "dark": { - "value": "rgb(169, 203, 0)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "chartreuse-1300": { - "prop": "--spectrum-chartreuse-1300", - "light": { - "value": "rgb(47, 57, 0)" - }, - "dark": { - "value": "rgb(187, 225, 0)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "chartreuse-1400": { - "prop": "--spectrum-chartreuse-1400", - "light": { - "value": "rgb(35, 43, 0)" - }, - "dark": { - "value": "rgb(219, 240, 117)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "chartreuse-1500": { - "prop": "--spectrum-chartreuse-1500", - "dark": { - "value": "rgb(242, 249, 206)" - }, - "light": { - "value": "rgb(25, 30, 0)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "chartreuse-1600": { - "prop": "--spectrum-chartreuse-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(11, 14, 0)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "chartreuse-200": { - "prop": "--spectrum-chartreuse-200", - "light": { - "value": "rgb(234, 246, 173)" - }, - "dark": { - "value": "rgb(30, 36, 0)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "chartreuse-300": { - "prop": "--spectrum-chartreuse-300", - "light": { - "value": "rgb(208, 236, 70)" - }, - "dark": { - "value": "rgb(39, 47, 0)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "chartreuse-400": { - "prop": "--spectrum-chartreuse-400", - "light": { - "value": "rgb(182, 219, 0)" - }, - "dark": { - "value": "rgb(53, 63, 0)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "chartreuse-500": { - "prop": "--spectrum-chartreuse-500", - "light": { - "value": "rgb(163, 196, 0)" - }, - "dark": { - "value": "rgb(68, 82, 0)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "chartreuse-600": { - "prop": "--spectrum-chartreuse-600", - "light": { - "value": "rgb(143, 172, 0)" - }, - "dark": { - "value": "rgb(83, 100, 0)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "chartreuse-700": { - "prop": "--spectrum-chartreuse-700", - "light": { - "value": "rgb(128, 153, 0)" - }, - "dark": { - "value": "rgb(97, 116, 0)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "chartreuse-800": { - "prop": "--spectrum-chartreuse-800", - "light": { - "value": "rgb(114, 137, 0)" - }, - "dark": { - "value": "rgb(106, 127, 0)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "chartreuse-900": { - "prop": "--spectrum-chartreuse-900", - "light": { - "value": "rgb(102, 122, 0)" - }, - "dark": { - "value": "rgb(122, 147, 0)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "chartreuse-background-color-default": { - "prop": "--spectrum-chartreuse-background-color-default", - "ref": "var(--spectrum-chartreuse-500)", - "light": { - "value": "rgb(163, 196, 0)" - }, - "dark": { - "value": "rgb(68, 82, 0)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "chartreuse-subtle-background-color-default": { - "prop": "--spectrum-chartreuse-subtle-background-color-default", - "ref": "var(--spectrum-chartreuse-200)", - "light": { - "value": "rgb(234, 246, 173)" - }, - "dark": { - "value": "rgb(30, 36, 0)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "chartreuse-visual-color": { - "prop": "--spectrum-chartreuse-visual-color", - "ref": "var(--spectrum-chartreuse-600)", - "light": { - "value": "rgb(143, 172, 0)" - }, - "dark": { - "value": "rgb(83, 100, 0)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "checkbox-control-size-extra-large": { - "prop": "--spectrum-checkbox-control-size-extra-large", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "26px" - } - }, - "checkbox-control-size-large": { - "prop": "--spectrum-checkbox-control-size-large", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "checkbox-control-size-medium": { - "prop": "--spectrum-checkbox-control-size-medium", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "checkbox-control-size-small": { - "prop": "--spectrum-checkbox-control-size-small", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "18px" - } - }, - "checkbox-top-to-control-extra-large": { - "prop": "--spectrum-checkbox-top-to-control-extra-large", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "checkbox-top-to-control-large": { - "prop": "--spectrum-checkbox-top-to-control-large", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "14px" - } - }, - "checkbox-top-to-control-medium": { - "prop": "--spectrum-checkbox-top-to-control-medium", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "checkbox-top-to-control-small": { - "prop": "--spectrum-checkbox-top-to-control-small", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "6px" - } - }, - "checkmark-icon-size-100": { - "prop": "--spectrum-checkmark-icon-size-100", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "14px" - } - }, - "checkmark-icon-size-200": { - "prop": "--spectrum-checkmark-icon-size-200", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "14px" - } - }, - "checkmark-icon-size-300": { - "prop": "--spectrum-checkmark-icon-size-300", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "16px" - } - }, - "checkmark-icon-size-400": { - "prop": "--spectrum-checkmark-icon-size-400", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "18px" - } - }, - "checkmark-icon-size-50": { - "prop": "--spectrum-checkmark-icon-size-50", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "checkmark-icon-size-500": { - "prop": "--spectrum-checkmark-icon-size-500", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "checkmark-icon-size-600": { - "prop": "--spectrum-checkmark-icon-size-600", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "24px" - } - }, - "checkmark-icon-size-75": { - "prop": "--spectrum-checkmark-icon-size-75", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "chevron-icon-size-100": { - "prop": "--spectrum-chevron-icon-size-100", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "14px" - } - }, - "chevron-icon-size-200": { - "prop": "--spectrum-chevron-icon-size-200", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "14px" - } - }, - "chevron-icon-size-300": { - "prop": "--spectrum-chevron-icon-size-300", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "16px" - } - }, - "chevron-icon-size-400": { - "prop": "--spectrum-chevron-icon-size-400", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "18px" - } - }, - "chevron-icon-size-50": { - "prop": "--spectrum-chevron-icon-size-50", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "chevron-icon-size-500": { - "prop": "--spectrum-chevron-icon-size-500", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "chevron-icon-size-600": { - "prop": "--spectrum-chevron-icon-size-600", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "24px" - } - }, - "chevron-icon-size-75": { - "prop": "--spectrum-chevron-icon-size-75", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "cinnamon-100": { - "prop": "--spectrum-cinnamon-100", - "dark": { - "value": "rgb(48, 17, 4)" - }, - "light": { - "value": "rgb(253, 247, 243)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "cinnamon-1000": { - "prop": "--spectrum-cinnamon-1000", - "dark": { - "value": "rgb(206, 136, 99)" - }, - "light": { - "value": "rgb(147, 77, 43)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "cinnamon-1100": { - "prop": "--spectrum-cinnamon-1100", - "dark": { - "value": "rgb(220, 154, 118)" - }, - "light": { - "value": "rgb(128, 62, 32)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "cinnamon-1200": { - "prop": "--spectrum-cinnamon-1200", - "dark": { - "value": "rgb(232, 179, 149)" - }, - "light": { - "value": "rgb(110, 48, 21)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "cinnamon-1300": { - "prop": "--spectrum-cinnamon-1300", - "dark": { - "value": "rgb(239, 203, 183)" - }, - "light": { - "value": "rgb(92, 35, 11)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "cinnamon-1400": { - "prop": "--spectrum-cinnamon-1400", - "dark": { - "value": "rgb(246, 225, 214)" - }, - "light": { - "value": "rgb(72, 25, 6)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "cinnamon-1500": { - "prop": "--spectrum-cinnamon-1500", - "dark": { - "value": "rgb(252, 244, 239)" - }, - "light": { - "value": "rgb(52, 18, 4)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "cinnamon-1600": { - "prop": "--spectrum-cinnamon-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(24, 8, 2)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "cinnamon-200": { - "prop": "--spectrum-cinnamon-200", - "dark": { - "value": "rgb(59, 21, 5)" - }, - "light": { - "value": "rgb(249, 236, 229)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "cinnamon-300": { - "prop": "--spectrum-cinnamon-300", - "dark": { - "value": "rgb(79, 28, 7)" - }, - "light": { - "value": "rgb(244, 218, 203)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "cinnamon-400": { - "prop": "--spectrum-cinnamon-400", - "dark": { - "value": "rgb(100, 41, 15)" - }, - "light": { - "value": "rgb(237, 196, 172)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "cinnamon-500": { - "prop": "--spectrum-cinnamon-500", - "dark": { - "value": "rgb(122, 57, 28)" - }, - "light": { - "value": "rgb(229, 170, 136)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "cinnamon-600": { - "prop": "--spectrum-cinnamon-600", - "dark": { - "value": "rgb(143, 74, 40)" - }, - "light": { - "value": "rgb(212, 145, 108)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "cinnamon-700": { - "prop": "--spectrum-cinnamon-700", - "dark": { - "value": "rgb(163, 88, 52)" - }, - "light": { - "value": "rgb(198, 126, 88)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "cinnamon-800": { - "prop": "--spectrum-cinnamon-800", - "dark": { - "value": "rgb(176, 98, 59)" - }, - "light": { - "value": "rgb(184, 109, 70)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "cinnamon-900": { - "prop": "--spectrum-cinnamon-900", - "dark": { - "value": "rgb(192, 119, 80)" - }, - "light": { - "value": "rgb(170, 94, 56)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "cinnamon-background-color-default": { - "prop": "--spectrum-cinnamon-background-color-default", - "ref": "var(--spectrum-cinnamon-900)", - "dark": { - "value": "rgb(192, 119, 80)" - }, - "light": { - "value": "rgb(170, 94, 56)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "cinnamon-subtle-background-color-default": { - "prop": "--spectrum-cinnamon-subtle-background-color-default", - "ref": "var(--spectrum-cinnamon-200)", - "dark": { - "value": "rgb(59, 21, 5)" - }, - "light": { - "value": "rgb(249, 236, 229)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "cinnamon-visual-color": { - "prop": "--spectrum-cinnamon-visual-color", - "ref": "var(--spectrum-cinnamon-800)", - "dark": { - "value": "rgb(176, 98, 59)" - }, - "light": { - "value": "rgb(184, 109, 70)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "cjk-font-family": { - "prop": "--spectrum-cjk-font-family", - "value": "Adobe Clean Han" - }, - "cjk-letter-spacing": { - "prop": "--spectrum-cjk-letter-spacing", - "ref": "var(--spectrum-letter-spacing)", - "value": "0em" - }, - "cjk-line-height-100": { - "prop": "--spectrum-cjk-line-height-100", - "value": "1.5" - }, - "cjk-line-height-200": { - "prop": "--spectrum-cjk-line-height-200", - "value": "1.7" - }, - "coach-indicator-collapsed-gap": { - "prop": "--spectrum-coach-indicator-collapsed-gap", - "value": "2px" - }, - "coach-indicator-collapsed-ring-rounding-increment": { - "prop": "--spectrum-coach-indicator-collapsed-ring-rounding-increment", - "value": "6px" - }, - "coach-indicator-collapsed-ring-thickness": { - "prop": "--spectrum-coach-indicator-collapsed-ring-thickness", - "value": "4px" - }, - "coach-indicator-color": { - "prop": "--spectrum-coach-indicator-color", - "ref": "var(--spectrum-blue-800)", - "light": { - "value": "rgb(75, 117, 255)" - }, - "dark": { - "value": "rgb(64, 105, 253)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "coach-indicator-expanded-gap": { - "prop": "--spectrum-coach-indicator-expanded-gap", - "value": "6px" - }, - "coach-indicator-expanded-ring-rounding-increment": { - "prop": "--spectrum-coach-indicator-expanded-ring-rounding-increment", - "value": "14px" - }, - "coach-indicator-expanded-ring-thickness": { - "prop": "--spectrum-coach-indicator-expanded-ring-thickness", - "value": "8px" - }, - "coach-indicator-opacity": { - "prop": "--spectrum-coach-indicator-opacity", - "value": "0.2" - }, - "coach-mark-body-font-size": { - "prop": "--spectrum-coach-mark-body-font-size", - "ref": "var(--spectrum-body-size-s)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "coach-mark-body-size": { - "prop": "--spectrum-coach-mark-body-size", - "ref": "var(--spectrum-coach-mark-body-font-size)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "coach-mark-edge-to-content": { - "prop": "--spectrum-coach-mark-edge-to-content", - "ref": "var(--spectrum-spacing-300)", - "value": "16px" - }, - "coach-mark-maximum-width": { - "prop": "--spectrum-coach-mark-maximum-width", - "desktop": { - "value": "380px" - }, - "mobile": { - "value": "248px" - } - }, - "coach-mark-media-height": { - "prop": "--spectrum-coach-mark-media-height", - "desktop": { - "value": "222px" - }, - "mobile": { - "value": "162px" - } - }, - "coach-mark-media-minimum-height": { - "prop": "--spectrum-coach-mark-media-minimum-height", - "desktop": { - "value": "166px" - }, - "mobile": { - "value": "121px" - } - }, - "coach-mark-minimum-width": { - "prop": "--spectrum-coach-mark-minimum-width", - "desktop": { - "value": "296px" - }, - "mobile": { - "value": "216px" - } - }, - "coach-mark-pagination-body-font-size": { - "prop": "--spectrum-coach-mark-pagination-body-font-size", - "ref": "var(--spectrum-body-size-xs)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "coach-mark-pagination-body-size": { - "prop": "--spectrum-coach-mark-pagination-body-size", - "ref": "var(--spectrum-coach-mark-pagination-body-font-size)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "coach-mark-pagination-color": { - "prop": "--spectrum-coach-mark-pagination-color", - "ref": "var(--spectrum-gray-600)", - "light": { - "value": "rgb(113, 113, 113)" - }, - "dark": { - "value": "rgb(138, 138, 138)" - }, - "wireframe": { - "value": "rgb(72, 110, 194)" - } - }, - "coach-mark-pagination-text-to-bottom-edge": { - "prop": "--spectrum-coach-mark-pagination-text-to-bottom-edge", - "desktop": { - "value": "33px" - }, - "mobile": { - "value": "22px" - } - }, - "coach-mark-title-font-size": { - "prop": "--spectrum-coach-mark-title-font-size", - "ref": "var(--spectrum-title-size-s)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "coach-mark-title-size": { - "prop": "--spectrum-coach-mark-title-size", - "ref": "var(--spectrum-coach-mark-title-font-size)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "coach-mark-width": { - "prop": "--spectrum-coach-mark-width", - "desktop": { - "value": "296px" - }, - "mobile": { - "value": "216px" - } - }, - "code-cjk-emphasized-font-style": { - "prop": "--spectrum-code-cjk-emphasized-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "code-cjk-emphasized-font-weight": { - "prop": "--spectrum-code-cjk-emphasized-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "code-cjk-font-family": { - "prop": "--spectrum-code-cjk-font-family", - "ref": "var(--spectrum-code-font-family)", - "value": "Source Code Pro" - }, - "code-cjk-font-style": { - "prop": "--spectrum-code-cjk-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "code-cjk-font-weight": { - "prop": "--spectrum-code-cjk-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "code-cjk-line-height": { - "prop": "--spectrum-code-cjk-line-height", - "ref": "var(--spectrum-cjk-line-height-200)", - "value": "1.7" - }, - "code-cjk-size-l": { - "prop": "--spectrum-code-cjk-size-l", - "ref": "var(--spectrum-code-size-l)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "code-cjk-size-m": { - "prop": "--spectrum-code-cjk-size-m", - "ref": "var(--spectrum-code-size-m)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "19px" - } - }, - "code-cjk-size-s": { - "prop": "--spectrum-code-cjk-size-s", - "ref": "var(--spectrum-code-size-s)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "code-cjk-size-xl": { - "prop": "--spectrum-code-cjk-size-xl", - "ref": "var(--spectrum-code-size-xl)", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "code-cjk-size-xs": { - "prop": "--spectrum-code-cjk-size-xs", - "ref": "var(--spectrum-code-size-xs)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "code-cjk-strong-emphasized-font-style": { - "prop": "--spectrum-code-cjk-strong-emphasized-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "code-cjk-strong-emphasized-font-weight": { - "prop": "--spectrum-code-cjk-strong-emphasized-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "code-cjk-strong-font-style": { - "prop": "--spectrum-code-cjk-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "code-cjk-strong-font-weight": { - "prop": "--spectrum-code-cjk-strong-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "code-color": { - "prop": "--spectrum-code-color", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" - }, - "wireframe": { - "value": "rgb(25, 46, 93)" - } - }, - "code-emphasized-font-style": { - "prop": "--spectrum-code-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "code-emphasized-font-weight": { - "prop": "--spectrum-code-emphasized-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "code-font-family": { - "prop": "--spectrum-code-font-family", - "value": "Source Code Pro" - }, - "code-font-style": { - "prop": "--spectrum-code-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "code-font-weight": { - "prop": "--spectrum-code-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "code-line-height": { - "prop": "--spectrum-code-line-height", - "ref": "var(--spectrum-line-height-200)", - "value": "1.5" - }, - "code-size-l": { - "prop": "--spectrum-code-size-l", - "ref": "var(--spectrum-font-size-300)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "code-size-m": { - "prop": "--spectrum-code-size-m", - "ref": "var(--spectrum-font-size-200)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "19px" - } - }, - "code-size-s": { - "prop": "--spectrum-code-size-s", - "ref": "var(--spectrum-font-size-100)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "code-size-xl": { - "prop": "--spectrum-code-size-xl", - "ref": "var(--spectrum-font-size-400)", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "code-size-xs": { - "prop": "--spectrum-code-size-xs", - "ref": "var(--spectrum-font-size-75)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "code-strong-emphasized-font-style": { - "prop": "--spectrum-code-strong-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "code-strong-emphasized-font-weight": { - "prop": "--spectrum-code-strong-emphasized-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "code-strong-font-style": { - "prop": "--spectrum-code-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "code-strong-font-weight": { - "prop": "--spectrum-code-strong-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "collection-card-minimum-height-extra-large": { - "prop": "--spectrum-collection-card-minimum-height-extra-large", - "value": "249px" - }, - "collection-card-minimum-height-extra-small": { - "prop": "--spectrum-collection-card-minimum-height-extra-small", - "value": "88px" - }, - "collection-card-minimum-height-hero-extra-large": { - "prop": "--spectrum-collection-card-minimum-height-hero-extra-large", - "value": "514px" - }, - "collection-card-minimum-height-hero-extra-small": { - "prop": "--spectrum-collection-card-minimum-height-hero-extra-small", - "value": "168px" - }, - "collection-card-minimum-height-hero-large": { - "prop": "--spectrum-collection-card-minimum-height-hero-large", - "value": "414px" - }, - "collection-card-minimum-height-hero-medium": { - "prop": "--spectrum-collection-card-minimum-height-hero-medium", - "value": "317px" - }, - "collection-card-minimum-height-hero-small": { - "prop": "--spectrum-collection-card-minimum-height-hero-small", - "value": "243px" - }, - "collection-card-minimum-height-large": { - "prop": "--spectrum-collection-card-minimum-height-large", - "value": "202px" - }, - "collection-card-minimum-height-medium": { - "prop": "--spectrum-collection-card-minimum-height-medium", - "value": "157px" - }, - "collection-card-minimum-height-small": { - "prop": "--spectrum-collection-card-minimum-height-small", - "value": "124px" - }, - "color-area-border-color": { - "prop": "--spectrum-color-area-border-color", - "ref": "var(--spectrum-gray-1000)", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(0, 0, 0)" - }, - "wireframe": { - "value": "rgb(0, 0, 0)" - } - }, - "color-area-border-opacity": { - "prop": "--spectrum-color-area-border-opacity", - "value": "0.1" - }, - "color-area-border-rounding": { - "prop": "--spectrum-color-area-border-rounding", - "ref": "var(--spectrum-corner-radius-medium-size-small)", - "value": "7px" - }, - "color-area-border-width": { - "prop": "--spectrum-color-area-border-width", - "ref": "var(--spectrum-border-width-100)", - "value": "1px" - }, - "color-area-height": { - "prop": "--spectrum-color-area-height", - "desktop": { - "value": "192px" - }, - "mobile": { - "value": "240px" - } - }, - "color-area-minimum-height": { - "prop": "--spectrum-color-area-minimum-height", - "desktop": { - "value": "64px" - }, - "mobile": { - "value": "80px" - } - }, - "color-area-minimum-width": { - "prop": "--spectrum-color-area-minimum-width", - "desktop": { - "value": "64px" - }, - "mobile": { - "value": "80px" - } - }, - "color-area-width": { - "prop": "--spectrum-color-area-width", - "desktop": { - "value": "192px" - }, - "mobile": { - "value": "240px" - } - }, - "color-control-track-width": { - "prop": "--spectrum-color-control-track-width", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "30px" - } - }, - "color-handle-border-width": { - "prop": "--spectrum-color-handle-border-width", - "ref": "var(--spectrum-border-width-200)", - "value": "2px" - }, - "color-handle-drop-shadow-blur": { - "prop": "--spectrum-color-handle-drop-shadow-blur", - "value": "0" - }, - "color-handle-drop-shadow-color": { - "prop": "--spectrum-color-handle-drop-shadow-color", - "ref": "var(--spectrum-drop-shadow-color)", - "light": { - "value": "rgba(0, 0, 0, 0.12)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.36)" - }, - "wireframe": { - "value": "rgba(0, 0, 0, 0.12)" - } - }, - "color-handle-drop-shadow-x": { - "prop": "--spectrum-color-handle-drop-shadow-x", - "value": "0" - }, - "color-handle-drop-shadow-y": { - "prop": "--spectrum-color-handle-drop-shadow-y", - "value": "0" - }, - "color-handle-inner-border-color": { - "prop": "--spectrum-color-handle-inner-border-color", - "ref": "var(--spectrum-black)", - "value": "rgb(0, 0, 0)" - }, - "color-handle-inner-border-opacity": { - "prop": "--spectrum-color-handle-inner-border-opacity", - "value": "0.42" - }, - "color-handle-inner-border-width": { - "prop": "--spectrum-color-handle-inner-border-width", - "value": "1px" - }, - "color-handle-outer-border-color": { - "prop": "--spectrum-color-handle-outer-border-color", - "ref": "var(--spectrum-black)", - "value": "rgb(0, 0, 0)" - }, - "color-handle-outer-border-opacity": { - "prop": "--spectrum-color-handle-outer-border-opacity", - "ref": "var(--spectrum-color-handle-inner-border-opacity)", - "value": "0.42" - }, - "color-handle-outer-border-width": { - "prop": "--spectrum-color-handle-outer-border-width", - "value": "1px" - }, - "color-handle-size": { - "prop": "--spectrum-color-handle-size", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "color-handle-size-key-focus": { - "prop": "--spectrum-color-handle-size-key-focus", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "40px" - } - }, - "color-loupe-bottom-to-color-handle": { - "prop": "--spectrum-color-loupe-bottom-to-color-handle", - "value": "12px" - }, - "color-loupe-drop-shadow-blur": { - "prop": "--spectrum-color-loupe-drop-shadow-blur", - "ref": "var(--spectrum-drop-shadow-elevated-blur)", - "value": "8px" - }, - "color-loupe-drop-shadow-color": { - "prop": "--spectrum-color-loupe-drop-shadow-color", - "ref": "var(--spectrum-drop-shadow-elevated-color)", - "light": { - "value": "rgba(0, 0, 0, 0.16)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.48)" - }, - "wireframe": { - "value": "rgba(0, 0, 0, 0.16)" - } - }, - "color-loupe-drop-shadow-y": { - "prop": "--spectrum-color-loupe-drop-shadow-y", - "ref": "var(--spectrum-drop-shadow-elevated-y)", - "value": "2px" - }, - "color-loupe-height": { - "prop": "--spectrum-color-loupe-height", - "value": "64px" - }, - "color-loupe-inner-border": { - "prop": "--spectrum-color-loupe-inner-border", - "ref": "var(--spectrum-transparent-black-200)", - "value": "rgba(0, 0, 0, 0.12)" - }, - "color-loupe-inner-border-width": { - "prop": "--spectrum-color-loupe-inner-border-width", - "value": "1px" - }, - "color-loupe-outer-border": { - "prop": "--spectrum-color-loupe-outer-border", - "ref": "var(--spectrum-white)", - "value": "rgb(255, 255, 255)" - }, - "color-loupe-outer-border-width": { - "prop": "--spectrum-color-loupe-outer-border-width", - "ref": "var(--spectrum-border-width-200)", - "value": "2px" - }, - "color-loupe-width": { - "prop": "--spectrum-color-loupe-width", - "value": "48px" - }, - "color-slider-border-color": { - "prop": "--spectrum-color-slider-border-color", - "ref": "var(--spectrum-gray-1000)", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(0, 0, 0)" - }, - "wireframe": { - "value": "rgb(0, 0, 0)" - } - }, - "color-slider-border-opacity": { - "prop": "--spectrum-color-slider-border-opacity", - "value": "0.1" - }, - "color-slider-border-rounding": { - "prop": "--spectrum-color-slider-border-rounding", - "ref": "var(--spectrum-corner-radius-medium-size-small)", - "value": "7px" - }, - "color-slider-border-width": { - "prop": "--spectrum-color-slider-border-width", - "value": "1px" - }, - "color-slider-length": { - "prop": "--spectrum-color-slider-length", - "desktop": { - "value": "192px" - }, - "mobile": { - "value": "240px" - } - }, - "color-slider-minimum-length": { - "prop": "--spectrum-color-slider-minimum-length", - "desktop": { - "value": "80px" - }, - "mobile": { - "value": "100px" - } - }, - "color-wheel-border-color": { - "prop": "--spectrum-color-wheel-border-color", - "ref": "var(--spectrum-gray-1000)", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(0, 0, 0)" - }, - "wireframe": { - "value": "rgb(0, 0, 0)" - } - }, - "color-wheel-border-opacity": { - "prop": "--spectrum-color-wheel-border-opacity", - "value": "0.1" - }, - "color-wheel-color-area-margin": { - "prop": "--spectrum-color-wheel-color-area-margin", - "value": "12px" - }, - "color-wheel-minimum-width": { - "prop": "--spectrum-color-wheel-minimum-width", - "desktop": { - "value": "175px" - }, - "mobile": { - "value": "219px" - } - }, - "color-wheel-width": { - "prop": "--spectrum-color-wheel-width", - "desktop": { - "value": "192px" - }, - "mobile": { - "value": "240px" - } - }, - "combo-box-minimum-width-multiplier": { - "prop": "--spectrum-combo-box-minimum-width-multiplier", - "value": "2.5" - }, - "combo-box-quiet-minimum-width-multiplier": { - "prop": "--spectrum-combo-box-quiet-minimum-width-multiplier", - "value": "2" - }, - "combo-box-visual-to-field-button": { - "prop": "--spectrum-combo-box-visual-to-field-button", - "value": "0px" - }, - "combo-box-visual-to-field-button-extra-large": { - "prop": "--spectrum-combo-box-visual-to-field-button-extra-large", - "ref": "var(--spectrum-combo-box-visual-to-field-button)", - "value": "0px" - }, - "combo-box-visual-to-field-button-large": { - "prop": "--spectrum-combo-box-visual-to-field-button-large", - "ref": "var(--spectrum-combo-box-visual-to-field-button)", - "value": "0px" - }, - "combo-box-visual-to-field-button-medium": { - "prop": "--spectrum-combo-box-visual-to-field-button-medium", - "ref": "var(--spectrum-combo-box-visual-to-field-button)", - "value": "0px" - }, - "combo-box-visual-to-field-button-quiet": { - "prop": "--spectrum-combo-box-visual-to-field-button-quiet", - "ref": "var(--spectrum-combo-box-visual-to-field-button)", - "value": "0px" - }, - "combo-box-visual-to-field-button-small": { - "prop": "--spectrum-combo-box-visual-to-field-button-small", - "ref": "var(--spectrum-combo-box-visual-to-field-button)", - "value": "0px" - }, - "component-bottom-to-text-100": { - "prop": "--spectrum-component-bottom-to-text-100", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "component-bottom-to-text-200": { - "prop": "--spectrum-component-bottom-to-text-200", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "14px" - } - }, - "component-bottom-to-text-300": { - "prop": "--spectrum-component-bottom-to-text-300", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "18px" - } - }, - "component-bottom-to-text-50": { - "prop": "--spectrum-component-bottom-to-text-50", - "desktop": { - "value": "3px" - }, - "mobile": { - "value": "6px" - } - }, - "component-bottom-to-text-75": { - "prop": "--spectrum-component-bottom-to-text-75", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "6px" - } - }, - "component-edge-to-text-100": { - "prop": "--spectrum-component-edge-to-text-100", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "component-edge-to-text-200": { - "prop": "--spectrum-component-edge-to-text-200", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "19px" - } - }, - "component-edge-to-text-300": { - "prop": "--spectrum-component-edge-to-text-300", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "component-edge-to-text-50": { - "prop": "--spectrum-component-edge-to-text-50", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "component-edge-to-text-75": { - "prop": "--spectrum-component-edge-to-text-75", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "component-edge-to-visual-100": { - "prop": "--spectrum-component-edge-to-visual-100", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "component-edge-to-visual-200": { - "prop": "--spectrum-component-edge-to-visual-200", - "desktop": { - "value": "13px" - }, - "mobile": { - "value": "16px" - } - }, - "component-edge-to-visual-300": { - "prop": "--spectrum-component-edge-to-visual-300", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "19px" - } - }, - "component-edge-to-visual-50": { - "prop": "--spectrum-component-edge-to-visual-50", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "7px" - } - }, - "component-edge-to-visual-75": { - "prop": "--spectrum-component-edge-to-visual-75", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "component-edge-to-visual-only-100": { - "prop": "--spectrum-component-edge-to-visual-only-100", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "component-edge-to-visual-only-200": { - "prop": "--spectrum-component-edge-to-visual-only-200", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "component-edge-to-visual-only-300": { - "prop": "--spectrum-component-edge-to-visual-only-300", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "15px" - } - }, - "component-edge-to-visual-only-50": { - "prop": "--spectrum-component-edge-to-visual-only-50", - "desktop": { - "value": "3px" - }, - "mobile": { - "value": "5px" - } - }, - "component-edge-to-visual-only-75": { - "prop": "--spectrum-component-edge-to-visual-only-75", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "6px" - } - }, - "component-height-100": { - "prop": "--spectrum-component-height-100", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "40px" - } - }, - "component-height-200": { - "prop": "--spectrum-component-height-200", - "desktop": { - "value": "40px" - }, - "mobile": { - "value": "50px" - } - }, - "component-height-300": { - "prop": "--spectrum-component-height-300", - "desktop": { - "value": "48px" - }, - "mobile": { - "value": "60px" - } - }, - "component-height-400": { - "prop": "--spectrum-component-height-400", - "desktop": { - "value": "56px" - }, - "mobile": { - "value": "70px" - } - }, - "component-height-50": { - "prop": "--spectrum-component-height-50", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "26px" - } - }, - "component-height-500": { - "prop": "--spectrum-component-height-500", - "desktop": { - "value": "64px" - }, - "mobile": { - "value": "80px" - } - }, - "component-height-75": { - "prop": "--spectrum-component-height-75", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "30px" - } - }, - "component-l-bold-font-family": { - "prop": "--spectrum-component-l-bold-font-family", - "ref": "var(--spectrum-sans-serif-font-family)", - "value": "Adobe Clean Spectrum VF" - }, - "component-l-bold-font-size": { - "prop": "--spectrum-component-l-bold-font-size", - "ref": "var(--spectrum-font-size-200)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "19px" - } - }, - "component-l-bold-font-weight": { - "prop": "--spectrum-component-l-bold-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "component-l-bold-letter-spacing": { - "prop": "--spectrum-component-l-bold-letter-spacing", - "ref": "var(--spectrum-letter-spacing)", - "value": "0em" - }, - "component-l-bold-line-height": { - "prop": "--spectrum-component-l-bold-line-height", - "ref": "var(--spectrum-line-height-font-size-200)", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "component-l-medium-font-family": { - "prop": "--spectrum-component-l-medium-font-family", - "ref": "var(--spectrum-sans-serif-font-family)", - "value": "Adobe Clean Spectrum VF" - }, - "component-l-medium-font-size": { - "prop": "--spectrum-component-l-medium-font-size", - "ref": "var(--spectrum-font-size-200)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "19px" - } - }, - "component-l-medium-font-weight": { - "prop": "--spectrum-component-l-medium-font-weight", - "ref": "var(--spectrum-medium-font-weight)", - "value": "500" - }, - "component-l-medium-letter-spacing": { - "prop": "--spectrum-component-l-medium-letter-spacing", - "ref": "var(--spectrum-letter-spacing)", - "value": "0em" - }, - "component-l-medium-line-height": { - "prop": "--spectrum-component-l-medium-line-height", - "ref": "var(--spectrum-line-height-font-size-200)", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "component-l-regular-font-family": { - "prop": "--spectrum-component-l-regular-font-family", - "ref": "var(--spectrum-sans-serif-font-family)", - "value": "Adobe Clean Spectrum VF" - }, - "component-l-regular-font-size": { - "prop": "--spectrum-component-l-regular-font-size", - "ref": "var(--spectrum-font-size-200)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "19px" - } - }, - "component-l-regular-font-weight": { - "prop": "--spectrum-component-l-regular-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "component-l-regular-letter-spacing": { - "prop": "--spectrum-component-l-regular-letter-spacing", - "ref": "var(--spectrum-letter-spacing)", - "value": "0em" - }, - "component-l-regular-line-height": { - "prop": "--spectrum-component-l-regular-line-height", - "ref": "var(--spectrum-line-height-font-size-200)", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "component-m-bold-font-family": { - "prop": "--spectrum-component-m-bold-font-family", - "ref": "var(--spectrum-sans-serif-font-family)", - "value": "Adobe Clean Spectrum VF" - }, - "component-m-bold-font-size": { - "prop": "--spectrum-component-m-bold-font-size", - "ref": "var(--spectrum-font-size-100)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "component-m-bold-font-weight": { - "prop": "--spectrum-component-m-bold-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "component-m-bold-letter-spacing": { - "prop": "--spectrum-component-m-bold-letter-spacing", - "ref": "var(--spectrum-letter-spacing)", - "value": "0em" - }, - "component-m-bold-line-height": { - "prop": "--spectrum-component-m-bold-line-height", - "ref": "var(--spectrum-line-height-font-size-100)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "component-m-medium-font-family": { - "prop": "--spectrum-component-m-medium-font-family", - "ref": "var(--spectrum-sans-serif-font-family)", - "value": "Adobe Clean Spectrum VF" - }, - "component-m-medium-font-size": { - "prop": "--spectrum-component-m-medium-font-size", - "ref": "var(--spectrum-font-size-100)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "component-m-medium-font-weight": { - "prop": "--spectrum-component-m-medium-font-weight", - "ref": "var(--spectrum-medium-font-weight)", - "value": "500" - }, - "component-m-medium-letter-spacing": { - "prop": "--spectrum-component-m-medium-letter-spacing", - "ref": "var(--spectrum-letter-spacing)", - "value": "0em" - }, - "component-m-medium-line-height": { - "prop": "--spectrum-component-m-medium-line-height", - "ref": "var(--spectrum-line-height-font-size-100)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "component-m-regular-font-family": { - "prop": "--spectrum-component-m-regular-font-family", - "ref": "var(--spectrum-sans-serif-font-family)", - "value": "Adobe Clean Spectrum VF" - }, - "component-m-regular-font-size": { - "prop": "--spectrum-component-m-regular-font-size", - "ref": "var(--spectrum-font-size-100)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "component-m-regular-font-weight": { - "prop": "--spectrum-component-m-regular-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "component-m-regular-letter-spacing": { - "prop": "--spectrum-component-m-regular-letter-spacing", - "ref": "var(--spectrum-letter-spacing)", - "value": "0em" - }, - "component-m-regular-line-height": { - "prop": "--spectrum-component-m-regular-line-height", - "ref": "var(--spectrum-line-height-font-size-100)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "component-padding-vertical-100": { - "prop": "--spectrum-component-padding-vertical-100", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "component-padding-vertical-200": { - "prop": "--spectrum-component-padding-vertical-200", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "13px" - } - }, - "component-padding-vertical-300": { - "prop": "--spectrum-component-padding-vertical-300", - "desktop": { - "value": "13px" - }, - "mobile": { - "value": "17px" - } - }, - "component-padding-vertical-50": { - "prop": "--spectrum-component-padding-vertical-50", - "desktop": { - "value": "3px" - }, - "mobile": { - "value": "5px" - } - }, - "component-padding-vertical-75": { - "prop": "--spectrum-component-padding-vertical-75", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "component-pill-edge-to-text-100": { - "prop": "--spectrum-component-pill-edge-to-text-100", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "component-pill-edge-to-text-200": { - "prop": "--spectrum-component-pill-edge-to-text-200", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "25px" - } - }, - "component-pill-edge-to-text-300": { - "prop": "--spectrum-component-pill-edge-to-text-300", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "30px" - } - }, - "component-pill-edge-to-text-75": { - "prop": "--spectrum-component-pill-edge-to-text-75", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "component-pill-edge-to-visual-100": { - "prop": "--spectrum-component-pill-edge-to-visual-100", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "component-pill-edge-to-visual-200": { - "prop": "--spectrum-component-pill-edge-to-visual-200", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "component-pill-edge-to-visual-300": { - "prop": "--spectrum-component-pill-edge-to-visual-300", - "desktop": { - "value": "21px" - }, - "mobile": { - "value": "27px" - } - }, - "component-pill-edge-to-visual-75": { - "prop": "--spectrum-component-pill-edge-to-visual-75", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "13px" - } - }, - "component-pill-edge-to-visual-only-100": { - "prop": "--spectrum-component-pill-edge-to-visual-only-100", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "component-pill-edge-to-visual-only-200": { - "prop": "--spectrum-component-pill-edge-to-visual-only-200", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "component-pill-edge-to-visual-only-300": { - "prop": "--spectrum-component-pill-edge-to-visual-only-300", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "15px" - } - }, - "component-pill-edge-to-visual-only-75": { - "prop": "--spectrum-component-pill-edge-to-visual-only-75", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "6px" - } - }, - "component-s-bold-font-family": { - "prop": "--spectrum-component-s-bold-font-family", - "ref": "var(--spectrum-sans-serif-font-family)", - "value": "Adobe Clean Spectrum VF" - }, - "component-s-bold-font-size": { - "prop": "--spectrum-component-s-bold-font-size", - "ref": "var(--spectrum-font-size-75)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "component-s-bold-font-weight": { - "prop": "--spectrum-component-s-bold-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "component-s-bold-letter-spacing": { - "prop": "--spectrum-component-s-bold-letter-spacing", - "ref": "var(--spectrum-letter-spacing)", - "value": "0em" - }, - "component-s-bold-line-height": { - "prop": "--spectrum-component-s-bold-line-height", - "ref": "var(--spectrum-line-height-font-size-75)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "component-s-medium-font-family": { - "prop": "--spectrum-component-s-medium-font-family", - "ref": "var(--spectrum-sans-serif-font-family)", - "value": "Adobe Clean Spectrum VF" - }, - "component-s-medium-font-size": { - "prop": "--spectrum-component-s-medium-font-size", - "ref": "var(--spectrum-font-size-75)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "component-s-medium-font-weight": { - "prop": "--spectrum-component-s-medium-font-weight", - "ref": "var(--spectrum-medium-font-weight)", - "value": "500" - }, - "component-s-medium-letter-spacing": { - "prop": "--spectrum-component-s-medium-letter-spacing", - "ref": "var(--spectrum-letter-spacing)", - "value": "0em" - }, - "component-s-medium-line-height": { - "prop": "--spectrum-component-s-medium-line-height", - "ref": "var(--spectrum-line-height-font-size-75)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "component-s-regular-font-family": { - "prop": "--spectrum-component-s-regular-font-family", - "ref": "var(--spectrum-sans-serif-font-family)", - "value": "Adobe Clean Spectrum VF" - }, - "component-s-regular-font-size": { - "prop": "--spectrum-component-s-regular-font-size", - "ref": "var(--spectrum-font-size-75)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "component-s-regular-font-weight": { - "prop": "--spectrum-component-s-regular-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "component-s-regular-letter-spacing": { - "prop": "--spectrum-component-s-regular-letter-spacing", - "ref": "var(--spectrum-letter-spacing)", - "value": "0em" - }, - "component-s-regular-line-height": { - "prop": "--spectrum-component-s-regular-line-height", - "ref": "var(--spectrum-line-height-font-size-75)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "component-size-difference-down": { - "prop": "--spectrum-component-size-difference-down", - "value": "-2px" - }, - "component-size-maximum-perspective-down": { - "prop": "--spectrum-component-size-maximum-perspective-down", - "value": "96px" - }, - "component-size-minimum-perspective-down": { - "prop": "--spectrum-component-size-minimum-perspective-down", - "value": "24px" - }, - "component-size-width-ratio-down": { - "prop": "--spectrum-component-size-width-ratio-down", - "value": "0.3333" - }, - "component-to-menu-extra-large": { - "prop": "--spectrum-component-to-menu-extra-large", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "component-to-menu-large": { - "prop": "--spectrum-component-to-menu-large", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "component-to-menu-medium": { - "prop": "--spectrum-component-to-menu-medium", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "component-to-menu-small": { - "prop": "--spectrum-component-to-menu-small", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "7px" - } - }, - "component-top-to-text-100": { - "prop": "--spectrum-component-top-to-text-100", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "component-top-to-text-200": { - "prop": "--spectrum-component-top-to-text-200", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "12px" - } - }, - "component-top-to-text-300": { - "prop": "--spectrum-component-top-to-text-300", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "component-top-to-text-50": { - "prop": "--spectrum-component-top-to-text-50", - "desktop": { - "value": "3px" - }, - "mobile": { - "value": "4px" - } - }, - "component-top-to-text-75": { - "prop": "--spectrum-component-top-to-text-75", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "component-top-to-workflow-icon-100": { - "prop": "--spectrum-component-top-to-workflow-icon-100", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "component-top-to-workflow-icon-200": { - "prop": "--spectrum-component-top-to-workflow-icon-200", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "component-top-to-workflow-icon-300": { - "prop": "--spectrum-component-top-to-workflow-icon-300", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "15px" - } - }, - "component-top-to-workflow-icon-50": { - "prop": "--spectrum-component-top-to-workflow-icon-50", - "desktop": { - "value": "3px" - }, - "mobile": { - "value": "5px" - } - }, - "component-top-to-workflow-icon-75": { - "prop": "--spectrum-component-top-to-workflow-icon-75", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "6px" - } - }, - "component-xl-bold-font-family": { - "prop": "--spectrum-component-xl-bold-font-family", - "ref": "var(--spectrum-sans-serif-font-family)", - "value": "Adobe Clean Spectrum VF" - }, - "component-xl-bold-font-size": { - "prop": "--spectrum-component-xl-bold-font-size", - "ref": "var(--spectrum-font-size-300)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "component-xl-bold-font-weight": { - "prop": "--spectrum-component-xl-bold-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "component-xl-bold-letter-spacing": { - "prop": "--spectrum-component-xl-bold-letter-spacing", - "ref": "var(--spectrum-letter-spacing)", - "value": "0em" - }, - "component-xl-bold-line-height": { - "prop": "--spectrum-component-xl-bold-line-height", - "ref": "var(--spectrum-line-height-font-size-300)", - "desktop": { - "value": "22px" - }, - "mobile": { - "value": "26px" - } - }, - "component-xl-medium-font-family": { - "prop": "--spectrum-component-xl-medium-font-family", - "ref": "var(--spectrum-sans-serif-font-family)", - "value": "Adobe Clean Spectrum VF" - }, - "component-xl-medium-font-size": { - "prop": "--spectrum-component-xl-medium-font-size", - "ref": "var(--spectrum-font-size-300)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "component-xl-medium-font-weight": { - "prop": "--spectrum-component-xl-medium-font-weight", - "ref": "var(--spectrum-medium-font-weight)", - "value": "500" - }, - "component-xl-medium-letter-spacing": { - "prop": "--spectrum-component-xl-medium-letter-spacing", - "ref": "var(--spectrum-letter-spacing)", - "value": "0em" - }, - "component-xl-medium-line-height": { - "prop": "--spectrum-component-xl-medium-line-height", - "ref": "var(--spectrum-line-height-font-size-300)", - "desktop": { - "value": "22px" - }, - "mobile": { - "value": "26px" - } - }, - "component-xl-regular-font-family": { - "prop": "--spectrum-component-xl-regular-font-family", - "ref": "var(--spectrum-sans-serif-font-family)", - "value": "Adobe Clean Spectrum VF" - }, - "component-xl-regular-font-size": { - "prop": "--spectrum-component-xl-regular-font-size", - "ref": "var(--spectrum-font-size-300)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "component-xl-regular-font-weight": { - "prop": "--spectrum-component-xl-regular-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "component-xl-regular-letter-spacing": { - "prop": "--spectrum-component-xl-regular-letter-spacing", - "ref": "var(--spectrum-letter-spacing)", - "value": "0em" - }, - "component-xl-regular-line-height": { - "prop": "--spectrum-component-xl-regular-line-height", - "ref": "var(--spectrum-line-height-font-size-300)", - "desktop": { - "value": "22px" - }, - "mobile": { - "value": "26px" - } - }, - "component-xs-bold-font-family": { - "prop": "--spectrum-component-xs-bold-font-family", - "ref": "var(--spectrum-sans-serif-font-family)", - "value": "Adobe Clean Spectrum VF" - }, - "component-xs-bold-font-size": { - "prop": "--spectrum-component-xs-bold-font-size", - "ref": "var(--spectrum-font-size-50)", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "13px" - } - }, - "component-xs-bold-font-weight": { - "prop": "--spectrum-component-xs-bold-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "component-xs-bold-letter-spacing": { - "prop": "--spectrum-component-xs-bold-letter-spacing", - "ref": "var(--spectrum-letter-spacing)", - "value": "0em" - }, - "component-xs-bold-line-height": { - "prop": "--spectrum-component-xs-bold-line-height", - "ref": "var(--spectrum-line-height-font-size-50)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "16px" - } - }, - "component-xs-medium-font-family": { - "prop": "--spectrum-component-xs-medium-font-family", - "ref": "var(--spectrum-sans-serif-font-family)", - "value": "Adobe Clean Spectrum VF" - }, - "component-xs-medium-font-size": { - "prop": "--spectrum-component-xs-medium-font-size", - "ref": "var(--spectrum-font-size-50)", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "13px" - } - }, - "component-xs-medium-font-weight": { - "prop": "--spectrum-component-xs-medium-font-weight", - "ref": "var(--spectrum-medium-font-weight)", - "value": "500" - }, - "component-xs-medium-letter-spacing": { - "prop": "--spectrum-component-xs-medium-letter-spacing", - "ref": "var(--spectrum-letter-spacing)", - "value": "0em" - }, - "component-xs-medium-line-height": { - "prop": "--spectrum-component-xs-medium-line-height", - "ref": "var(--spectrum-line-height-font-size-50)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "16px" - } - }, - "component-xs-regular-font-family": { - "prop": "--spectrum-component-xs-regular-font-family", - "ref": "var(--spectrum-sans-serif-font-family)", - "value": "Adobe Clean Spectrum VF" - }, - "component-xs-regular-font-size": { - "prop": "--spectrum-component-xs-regular-font-size", - "ref": "var(--spectrum-font-size-50)", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "13px" - } - }, - "component-xs-regular-font-weight": { - "prop": "--spectrum-component-xs-regular-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "component-xs-regular-letter-spacing": { - "prop": "--spectrum-component-xs-regular-letter-spacing", - "ref": "var(--spectrum-letter-spacing)", - "value": "0em" - }, - "component-xs-regular-line-height": { - "prop": "--spectrum-component-xs-regular-line-height", - "ref": "var(--spectrum-line-height-font-size-50)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "16px" - } - }, - "contextual-help-body-font-size": { - "prop": "--spectrum-contextual-help-body-font-size", - "ref": "var(--spectrum-body-size-xs)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "contextual-help-body-size": { - "prop": "--spectrum-contextual-help-body-size", - "ref": "var(--spectrum-contextual-help-body-font-size)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "contextual-help-minimum-width": { - "prop": "--spectrum-contextual-help-minimum-width", - "value": "268px" - }, - "contextual-help-title-font-size": { - "prop": "--spectrum-contextual-help-title-font-size", - "ref": "var(--spectrum-title-size-s)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "contextual-help-title-size": { - "prop": "--spectrum-contextual-help-title-size", - "ref": "var(--spectrum-contextual-help-title-font-size)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "corner-radius-0": { - "prop": "--spectrum-corner-radius-0", - "value": "0px" - }, - "corner-radius-100": { - "prop": "--spectrum-corner-radius-100", - "value": "4px" - }, - "corner-radius-1000": { - "prop": "--spectrum-corner-radius-1000", - "value": "9999px" - }, - "corner-radius-200": { - "prop": "--spectrum-corner-radius-200", - "value": "5px" - }, - "corner-radius-300": { - "prop": "--spectrum-corner-radius-300", - "value": "6px" - }, - "corner-radius-400": { - "prop": "--spectrum-corner-radius-400", - "value": "7px" - }, - "corner-radius-500": { - "prop": "--spectrum-corner-radius-500", - "value": "8px" - }, - "corner-radius-600": { - "prop": "--spectrum-corner-radius-600", - "value": "9px" - }, - "corner-radius-700": { - "prop": "--spectrum-corner-radius-700", - "value": "10px" - }, - "corner-radius-75": { - "prop": "--spectrum-corner-radius-75", - "value": "3px" - }, - "corner-radius-800": { - "prop": "--spectrum-corner-radius-800", - "value": "16px" - }, - "corner-radius-extra-large-default": { - "prop": "--spectrum-corner-radius-extra-large-default", - "ref": "var(--spectrum-corner-radius-800)", - "value": "16px" - }, - "corner-radius-full": { - "prop": "--spectrum-corner-radius-full", - "ref": "var(--spectrum-corner-radius-1000)", - "value": "9999px" - }, - "corner-radius-large-default": { - "prop": "--spectrum-corner-radius-large-default", - "ref": "var(--spectrum-corner-radius-700)", - "value": "10px" - }, - "corner-radius-medium-default": { - "prop": "--spectrum-corner-radius-medium-default", - "ref": "var(--spectrum-corner-radius-500)", - "value": "8px" - }, - "corner-radius-medium-size-extra-large": { - "prop": "--spectrum-corner-radius-medium-size-extra-large", - "ref": "var(--spectrum-corner-radius-700)", - "value": "10px" - }, - "corner-radius-medium-size-extra-small": { - "prop": "--spectrum-corner-radius-medium-size-extra-small", - "ref": "var(--spectrum-corner-radius-300)", - "value": "6px" - }, - "corner-radius-medium-size-large": { - "prop": "--spectrum-corner-radius-medium-size-large", - "ref": "var(--spectrum-corner-radius-600)", - "value": "9px" - }, - "corner-radius-medium-size-medium": { - "prop": "--spectrum-corner-radius-medium-size-medium", - "ref": "var(--spectrum-corner-radius-500)", - "value": "8px" - }, - "corner-radius-medium-size-small": { - "prop": "--spectrum-corner-radius-medium-size-small", - "ref": "var(--spectrum-corner-radius-400)", - "value": "7px" - }, - "corner-radius-none": { - "prop": "--spectrum-corner-radius-none", - "ref": "var(--spectrum-corner-radius-0)", - "value": "0px" - }, - "corner-radius-small-default": { - "prop": "--spectrum-corner-radius-small-default", - "ref": "var(--spectrum-corner-radius-100)", - "value": "4px" - }, - "corner-radius-small-size-extra-large": { - "prop": "--spectrum-corner-radius-small-size-extra-large", - "ref": "var(--spectrum-corner-radius-300)", - "value": "6px" - }, - "corner-radius-small-size-large": { - "prop": "--spectrum-corner-radius-small-size-large", - "ref": "var(--spectrum-corner-radius-200)", - "value": "5px" - }, - "corner-radius-small-size-medium": { - "prop": "--spectrum-corner-radius-small-size-medium", - "ref": "var(--spectrum-corner-radius-100)", - "value": "4px" - }, - "corner-radius-small-size-small": { - "prop": "--spectrum-corner-radius-small-size-small", - "ref": "var(--spectrum-corner-radius-75)", - "value": "3px" - }, - "corner-triangle-icon-size-100": { - "prop": "--spectrum-corner-triangle-icon-size-100", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "7px" - } - }, - "corner-triangle-icon-size-200": { - "prop": "--spectrum-corner-triangle-icon-size-200", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "corner-triangle-icon-size-300": { - "prop": "--spectrum-corner-triangle-icon-size-300", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "8px" - } - }, - "corner-triangle-icon-size-75": { - "prop": "--spectrum-corner-triangle-icon-size-75", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "6px" - } - }, - "cross-icon-size-100": { - "prop": "--spectrum-cross-icon-size-100", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "cross-icon-size-200": { - "prop": "--spectrum-cross-icon-size-200", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "cross-icon-size-300": { - "prop": "--spectrum-cross-icon-size-300", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "14px" - } - }, - "cross-icon-size-400": { - "prop": "--spectrum-cross-icon-size-400", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "16px" - } - }, - "cross-icon-size-500": { - "prop": "--spectrum-cross-icon-size-500", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "16px" - } - }, - "cross-icon-size-600": { - "prop": "--spectrum-cross-icon-size-600", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "18px" - } - }, - "cross-icon-size-75": { - "prop": "--spectrum-cross-icon-size-75", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "cyan-100": { - "prop": "--spectrum-cyan-100", - "light": { - "value": "rgb(238, 250, 254)" - }, - "dark": { - "value": "rgb(0, 29, 39)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "cyan-1000": { - "prop": "--spectrum-cyan-1000", - "light": { - "value": "rgb(4, 102, 145)" - }, - "dark": { - "value": "rgb(38, 159, 244)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "cyan-1100": { - "prop": "--spectrum-cyan-1100", - "light": { - "value": "rgb(0, 87, 121)" - }, - "dark": { - "value": "rgb(63, 177, 255)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "cyan-1200": { - "prop": "--spectrum-cyan-1200", - "light": { - "value": "rgb(0, 71, 98)" - }, - "dark": { - "value": "rgb(107, 199, 255)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "cyan-1300": { - "prop": "--spectrum-cyan-1300", - "light": { - "value": "rgb(0, 57, 78)" - }, - "dark": { - "value": "rgb(152, 219, 255)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "cyan-1400": { - "prop": "--spectrum-cyan-1400", - "light": { - "value": "rgb(0, 43, 59)" - }, - "dark": { - "value": "rgb(195, 236, 252)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "cyan-1500": { - "prop": "--spectrum-cyan-1500", - "dark": { - "value": "rgb(230, 248, 253)" - }, - "light": { - "value": "rgb(0, 31, 43)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "cyan-1600": { - "prop": "--spectrum-cyan-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(0, 14, 20)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "cyan-200": { - "prop": "--spectrum-cyan-200", - "light": { - "value": "rgb(217, 244, 253)" - }, - "dark": { - "value": "rgb(0, 36, 49)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "cyan-300": { - "prop": "--spectrum-cyan-300", - "light": { - "value": "rgb(183, 231, 252)" - }, - "dark": { - "value": "rgb(0, 48, 65)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "cyan-400": { - "prop": "--spectrum-cyan-400", - "light": { - "value": "rgb(138, 213, 255)" - }, - "dark": { - "value": "rgb(0, 64, 88)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "cyan-500": { - "prop": "--spectrum-cyan-500", - "light": { - "value": "rgb(92, 192, 255)" - }, - "dark": { - "value": "rgb(0, 82, 113)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "cyan-600": { - "prop": "--spectrum-cyan-600", - "light": { - "value": "rgb(48, 167, 254)" - }, - "dark": { - "value": "rgb(3, 99, 140)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "cyan-700": { - "prop": "--spectrum-cyan-700", - "light": { - "value": "rgb(29, 149, 231)" - }, - "dark": { - "value": "rgb(8, 115, 168)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "cyan-800": { - "prop": "--spectrum-cyan-800", - "light": { - "value": "rgb(18, 134, 205)" - }, - "dark": { - "value": "rgb(13, 125, 186)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "cyan-900": { - "prop": "--spectrum-cyan-900", - "light": { - "value": "rgb(11, 120, 179)" - }, - "dark": { - "value": "rgb(24, 142, 220)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "cyan-background-color-default": { - "prop": "--spectrum-cyan-background-color-default", - "ref": "var(--spectrum-cyan-900)", - "light": { - "value": "rgb(11, 120, 179)" - }, - "dark": { - "value": "rgb(24, 142, 220)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "cyan-subtle-background-color-default": { - "prop": "--spectrum-cyan-subtle-background-color-default", - "ref": "var(--spectrum-cyan-200)", - "light": { - "value": "rgb(217, 244, 253)" - }, - "dark": { - "value": "rgb(0, 36, 49)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "cyan-visual-color": { - "prop": "--spectrum-cyan-visual-color", - "ref": "var(--spectrum-cyan-600)", - "light": { - "value": "rgb(48, 167, 254)" - }, - "dark": { - "value": "rgb(3, 99, 140)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "dash-icon-size-100": { - "prop": "--spectrum-dash-icon-size-100", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "dash-icon-size-200": { - "prop": "--spectrum-dash-icon-size-200", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "14px" - } - }, - "dash-icon-size-300": { - "prop": "--spectrum-dash-icon-size-300", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "16px" - } - }, - "dash-icon-size-400": { - "prop": "--spectrum-dash-icon-size-400", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "18px" - } - }, - "dash-icon-size-50": { - "prop": "--spectrum-dash-icon-size-50", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "dash-icon-size-500": { - "prop": "--spectrum-dash-icon-size-500", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "dash-icon-size-600": { - "prop": "--spectrum-dash-icon-size-600", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "dash-icon-size-75": { - "prop": "--spectrum-dash-icon-size-75", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "date-field-minimum-width": { - "prop": "--spectrum-date-field-minimum-width", - "value": "152px" - }, - "date-field-text-to-visual": { - "prop": "--spectrum-date-field-text-to-visual", - "value": "20px" - }, - "date-picker-minimum-width": { - "prop": "--spectrum-date-picker-minimum-width", - "value": "152px" - }, - "date-picker-text-to-visual": { - "prop": "--spectrum-date-picker-text-to-visual", - "value": "0px" - }, - "date-picker-visual-to-field-button": { - "prop": "--spectrum-date-picker-visual-to-field-button", - "value": "0px" - }, - "default-font-family": { - "prop": "--spectrum-default-font-family", - "ref": "var(--spectrum-sans-serif-font-family)", - "value": "Adobe Clean Spectrum VF" - }, - "default-font-style": { - "prop": "--spectrum-default-font-style", - "value": "normal" - }, - "detail-cjk-emphasized-font-style": { - "prop": "--spectrum-detail-cjk-emphasized-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "detail-cjk-emphasized-font-weight": { - "prop": "--spectrum-detail-cjk-emphasized-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" - }, - "detail-cjk-font-family": { - "prop": "--spectrum-detail-cjk-font-family", - "ref": "var(--spectrum-cjk-font-family)", - "value": "Adobe Clean Han" - }, - "detail-cjk-font-style": { - "prop": "--spectrum-detail-cjk-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "detail-cjk-font-weight": { - "prop": "--spectrum-detail-cjk-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "detail-cjk-light-emphasized-font-style": { - "prop": "--spectrum-detail-cjk-light-emphasized-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "detail-cjk-light-emphasized-font-weight": { - "prop": "--spectrum-detail-cjk-light-emphasized-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "detail-cjk-light-font-style": { - "prop": "--spectrum-detail-cjk-light-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "detail-cjk-light-font-weight": { - "prop": "--spectrum-detail-cjk-light-font-weight", - "ref": "var(--spectrum-light-font-weight)", - "value": "300" - }, - "detail-cjk-light-strong-emphasized-font-style": { - "prop": "--spectrum-detail-cjk-light-strong-emphasized-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "detail-cjk-light-strong-emphasized-font-weight": { - "prop": "--spectrum-detail-cjk-light-strong-emphasized-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" - }, - "detail-cjk-light-strong-font-style": { - "prop": "--spectrum-detail-cjk-light-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "detail-cjk-light-strong-font-weight": { - "prop": "--spectrum-detail-cjk-light-strong-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" - }, - "detail-cjk-line-height": { - "prop": "--spectrum-detail-cjk-line-height", - "ref": "var(--spectrum-cjk-line-height-100)", - "value": "1.5" - }, - "detail-cjk-size-l": { - "prop": "--spectrum-detail-cjk-size-l", - "ref": "var(--spectrum-font-size-100)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "detail-cjk-size-m": { - "prop": "--spectrum-detail-cjk-size-m", - "ref": "var(--spectrum-font-size-75)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "detail-cjk-size-s": { - "prop": "--spectrum-detail-cjk-size-s", - "ref": "var(--spectrum-font-size-50)", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "13px" - } - }, - "detail-cjk-size-xl": { - "prop": "--spectrum-detail-cjk-size-xl", - "ref": "var(--spectrum-font-size-200)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "19px" - } - }, - "detail-cjk-size-xs": { - "prop": "--spectrum-detail-cjk-size-xs", - "ref": "var(--spectrum-font-size-25)", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "detail-cjk-strong-emphasized-font-style": { - "prop": "--spectrum-detail-cjk-strong-emphasized-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "detail-cjk-strong-emphasized-font-weight": { - "prop": "--spectrum-detail-cjk-strong-emphasized-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" - }, - "detail-cjk-strong-font-style": { - "prop": "--spectrum-detail-cjk-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "detail-cjk-strong-font-weight": { - "prop": "--spectrum-detail-cjk-strong-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" - }, - "detail-color": { - "prop": "--spectrum-detail-color", - "ref": "var(--spectrum-gray-600)", - "light": { - "value": "rgb(113, 113, 113)" - }, - "dark": { - "value": "rgb(138, 138, 138)" - }, - "wireframe": { - "value": "rgb(72, 110, 194)" - } - }, - "detail-letter-spacing": { - "prop": "--spectrum-detail-letter-spacing", - "value": "0.06em" - }, - "detail-line-height": { - "prop": "--spectrum-detail-line-height", - "ref": "var(--spectrum-line-height-100)", - "value": "1.3" - }, - "detail-margin-bottom-multiplier": { - "prop": "--spectrum-detail-margin-bottom-multiplier", - "value": "0.25" - }, - "detail-margin-top-multiplier": { - "prop": "--spectrum-detail-margin-top-multiplier", - "value": "0.88888889" - }, - "detail-sans-serif-emphasized-font-style": { - "prop": "--spectrum-detail-sans-serif-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "detail-sans-serif-emphasized-font-weight": { - "prop": "--spectrum-detail-sans-serif-emphasized-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "detail-sans-serif-font-family": { - "prop": "--spectrum-detail-sans-serif-font-family", - "ref": "var(--spectrum-sans-serif-font-family)", - "value": "Adobe Clean Spectrum VF" - }, - "detail-sans-serif-font-style": { - "prop": "--spectrum-detail-sans-serif-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "detail-sans-serif-font-weight": { - "prop": "--spectrum-detail-sans-serif-font-weight", - "ref": "var(--spectrum-medium-font-weight)", - "value": "500" - }, - "detail-sans-serif-light-emphasized-font-style": { - "prop": "--spectrum-detail-sans-serif-light-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "detail-sans-serif-light-emphasized-font-weight": { - "prop": "--spectrum-detail-sans-serif-light-emphasized-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "detail-sans-serif-light-font-style": { - "prop": "--spectrum-detail-sans-serif-light-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "detail-sans-serif-light-font-weight": { - "prop": "--spectrum-detail-sans-serif-light-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "detail-sans-serif-light-strong-emphasized-font-style": { - "prop": "--spectrum-detail-sans-serif-light-strong-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "detail-sans-serif-light-strong-emphasized-font-weight": { - "prop": "--spectrum-detail-sans-serif-light-strong-emphasized-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "detail-sans-serif-light-strong-font-style": { - "prop": "--spectrum-detail-sans-serif-light-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "detail-sans-serif-light-strong-font-weight": { - "prop": "--spectrum-detail-sans-serif-light-strong-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "detail-sans-serif-strong-emphasized-font-style": { - "prop": "--spectrum-detail-sans-serif-strong-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "detail-sans-serif-strong-emphasized-font-weight": { - "prop": "--spectrum-detail-sans-serif-strong-emphasized-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "detail-sans-serif-strong-font-style": { - "prop": "--spectrum-detail-sans-serif-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "detail-sans-serif-strong-font-weight": { - "prop": "--spectrum-detail-sans-serif-strong-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "detail-sans-serif-text-transform": { - "prop": "--spectrum-detail-sans-serif-text-transform", - "value": "uppercase" - }, - "detail-serif-emphasized-font-style": { - "prop": "--spectrum-detail-serif-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "detail-serif-emphasized-font-weight": { - "prop": "--spectrum-detail-serif-emphasized-font-weight", - "ref": "var(--spectrum-medium-font-weight)", - "value": "500" - }, - "detail-serif-font-family": { - "prop": "--spectrum-detail-serif-font-family", - "ref": "var(--spectrum-serif-font-family)", - "value": "Adobe Clean Serif" - }, - "detail-serif-font-style": { - "prop": "--spectrum-detail-serif-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "detail-serif-font-weight": { - "prop": "--spectrum-detail-serif-font-weight", - "ref": "var(--spectrum-medium-font-weight)", - "value": "500" - }, - "detail-serif-light-emphasized-font-style": { - "prop": "--spectrum-detail-serif-light-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "detail-serif-light-emphasized-font-weight": { - "prop": "--spectrum-detail-serif-light-emphasized-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "detail-serif-light-font-style": { - "prop": "--spectrum-detail-serif-light-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "detail-serif-light-font-weight": { - "prop": "--spectrum-detail-serif-light-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "detail-serif-light-strong-emphasized-font-style": { - "prop": "--spectrum-detail-serif-light-strong-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "detail-serif-light-strong-emphasized-font-weight": { - "prop": "--spectrum-detail-serif-light-strong-emphasized-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "detail-serif-light-strong-font-style": { - "prop": "--spectrum-detail-serif-light-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "detail-serif-light-strong-font-weight": { - "prop": "--spectrum-detail-serif-light-strong-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "detail-serif-strong-emphasized-font-style": { - "prop": "--spectrum-detail-serif-strong-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "detail-serif-strong-emphasized-font-weight": { - "prop": "--spectrum-detail-serif-strong-emphasized-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "detail-serif-strong-font-style": { - "prop": "--spectrum-detail-serif-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "detail-serif-strong-font-weight": { - "prop": "--spectrum-detail-serif-strong-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "detail-serif-text-transform": { - "prop": "--spectrum-detail-serif-text-transform", - "value": "uppercase" - }, - "detail-size-l": { - "prop": "--spectrum-detail-size-l", - "ref": "var(--spectrum-font-size-200)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "19px" - } - }, - "detail-size-m": { - "prop": "--spectrum-detail-size-m", - "ref": "var(--spectrum-font-size-100)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "detail-size-s": { - "prop": "--spectrum-detail-size-s", - "ref": "var(--spectrum-font-size-75)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "detail-size-xl": { - "prop": "--spectrum-detail-size-xl", - "ref": "var(--spectrum-font-size-300)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "detail-size-xs": { - "prop": "--spectrum-detail-size-xs", - "ref": "var(--spectrum-font-size-50)", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "13px" - } - }, - "disabled-background-color": { - "prop": "--spectrum-disabled-background-color", - "ref": "var(--spectrum-gray-100)", - "light": { - "value": "rgb(233, 233, 233)" - }, - "dark": { - "value": "rgb(44, 44, 44)" - }, - "wireframe": { - "value": "rgb(228, 234, 249)" - } - }, - "disabled-border-color": { - "prop": "--spectrum-disabled-border-color", - "ref": "var(--spectrum-gray-300)", - "light": { - "value": "rgb(218, 218, 218)" - }, - "dark": { - "value": "rgb(57, 57, 57)" - }, - "wireframe": { - "value": "rgb(207, 219, 245)" - } - }, - "disabled-content-color": { - "prop": "--spectrum-disabled-content-color", - "ref": "var(--spectrum-gray-400)", - "light": { - "value": "rgb(198, 198, 198)" - }, - "dark": { - "value": "rgb(68, 68, 68)" - }, - "wireframe": { - "value": "rgb(180, 199, 239)" - } - }, - "disabled-static-black-background-color": { - "prop": "--spectrum-disabled-static-black-background-color", - "ref": "var(--spectrum-transparent-black-100)", - "value": "rgba(0, 0, 0, 0.09)" - }, - "disabled-static-black-border-color": { - "prop": "--spectrum-disabled-static-black-border-color", - "ref": "var(--spectrum-transparent-black-300)", - "value": "rgba(0, 0, 0, 0.15)" - }, - "disabled-static-black-content-color": { - "prop": "--spectrum-disabled-static-black-content-color", - "ref": "var(--spectrum-transparent-black-400)", - "value": "rgba(0, 0, 0, 0.22)" - }, - "disabled-static-white-background-color": { - "prop": "--spectrum-disabled-static-white-background-color", - "ref": "var(--spectrum-transparent-white-100)", - "value": "rgba(255, 255, 255, 0.11)" - }, - "disabled-static-white-border-color": { - "prop": "--spectrum-disabled-static-white-border-color", - "ref": "var(--spectrum-transparent-white-300)", - "value": "rgba(255, 255, 255, 0.17)" - }, - "disabled-static-white-content-color": { - "prop": "--spectrum-disabled-static-white-content-color", - "ref": "var(--spectrum-transparent-white-400)", - "value": "rgba(255, 255, 255, 0.21)" - }, - "disclosure-indicator-top-to-disclosure-icon-extra-large": { - "prop": "--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large", - "desktop": { - "value": "17px" - }, - "mobile": { - "value": "22px" - } - }, - "disclosure-indicator-top-to-disclosure-icon-large": { - "prop": "--spectrum-disclosure-indicator-top-to-disclosure-icon-large", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "disclosure-indicator-top-to-disclosure-icon-medium": { - "prop": "--spectrum-disclosure-indicator-top-to-disclosure-icon-medium", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "13px" - } - }, - "disclosure-indicator-top-to-disclosure-icon-small": { - "prop": "--spectrum-disclosure-indicator-top-to-disclosure-icon-small", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "divider-horizontal-minimum-width": { - "prop": "--spectrum-divider-horizontal-minimum-width", - "value": "200px" - }, - "divider-thickness-large": { - "prop": "--spectrum-divider-thickness-large", - "value": "4px" - }, - "divider-thickness-medium": { - "prop": "--spectrum-divider-thickness-medium", - "value": "2px" - }, - "divider-thickness-small": { - "prop": "--spectrum-divider-thickness-small", - "value": "1px" - }, - "divider-vertical-minimum-height": { - "prop": "--spectrum-divider-vertical-minimum-height", - "value": "200px" - }, - "double-calendar-popover-minimum-height": { - "prop": "--spectrum-double-calendar-popover-minimum-height", - "value": "320px" - }, - "double-calendar-popover-minimum-width": { - "prop": "--spectrum-double-calendar-popover-minimum-width", - "value": "616px" - }, - "drag-handle-icon-size-100": { - "prop": "--spectrum-drag-handle-icon-size-100", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "drag-handle-icon-size-200": { - "prop": "--spectrum-drag-handle-icon-size-200", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "14px" - } - }, - "drag-handle-icon-size-300": { - "prop": "--spectrum-drag-handle-icon-size-300", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "16px" - } - }, - "drag-handle-icon-size-75": { - "prop": "--spectrum-drag-handle-icon-size-75", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "drop-shadow-ambient-color": { - "prop": "--spectrum-drop-shadow-ambient-color", - "light": { - "value": "rgba(0, 0, 0, 0.08)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.24)" - }, - "wireframe": { - "value": "rgba(0, 0, 0, 0.08)" - } - }, - "drop-shadow-blur": { - "prop": "--spectrum-drop-shadow-blur", - "ref": "var(--spectrum-drop-shadow-blur-100)", - "value": "6px" - }, - "drop-shadow-blur-100": { - "prop": "--spectrum-drop-shadow-blur-100", - "value": "6px" - }, - "drop-shadow-blur-200": { - "prop": "--spectrum-drop-shadow-blur-200", - "value": "8px" - }, - "drop-shadow-blur-300": { - "prop": "--spectrum-drop-shadow-blur-300", - "value": "16px" - }, - "drop-shadow-color": { - "prop": "--spectrum-drop-shadow-color", - "ref": "var(--spectrum-drop-shadow-color-100)", - "light": { - "value": "rgba(0, 0, 0, 0.12)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.36)" - }, - "wireframe": { - "value": "rgba(0, 0, 0, 0.12)" - } - }, - "drop-shadow-color-100": { - "prop": "--spectrum-drop-shadow-color-100", - "light": { - "value": "rgba(0, 0, 0, 0.12)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.36)" - }, - "wireframe": { - "value": "rgba(0, 0, 0, 0.12)" - } - }, - "drop-shadow-color-200": { - "prop": "--spectrum-drop-shadow-color-200", - "light": { - "value": "rgba(0, 0, 0, 0.16)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.48)" - }, - "wireframe": { - "value": "rgba(0, 0, 0, 0.16)" - } - }, - "drop-shadow-color-300": { - "prop": "--spectrum-drop-shadow-color-300", - "light": { - "value": "rgba(0, 0, 0, 0.2)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.6)" - }, - "wireframe": { - "value": "rgba(0, 0, 0, 0.2)" - } - }, - "drop-shadow-dragged": { - "prop": "--spectrum-drop-shadow-dragged" - }, - "drop-shadow-dragged-blur": { - "prop": "--spectrum-drop-shadow-dragged-blur", - "ref": "var(--spectrum-drop-shadow-blur-300)", - "value": "16px" - }, - "drop-shadow-dragged-color": { - "prop": "--spectrum-drop-shadow-dragged-color", - "ref": "var(--spectrum-drop-shadow-color-300)", - "light": { - "value": "rgba(0, 0, 0, 0.2)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.6)" - }, - "wireframe": { - "value": "rgba(0, 0, 0, 0.2)" - } - }, - "drop-shadow-dragged-key-color": { - "prop": "--spectrum-drop-shadow-dragged-key-color", - "light": { - "value": "rgba(0, 0, 0, 0.16)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.48)" - }, - "wireframe": { - "value": "rgba(0, 0, 0, 0.16)" - } - }, - "drop-shadow-dragged-x": { - "prop": "--spectrum-drop-shadow-dragged-x", - "ref": "var(--spectrum-drop-shadow-x-300)", - "value": "0px" - }, - "drop-shadow-dragged-y": { - "prop": "--spectrum-drop-shadow-dragged-y", - "ref": "var(--spectrum-drop-shadow-y-300)", - "value": "6px" - }, - "drop-shadow-elevated": { - "prop": "--spectrum-drop-shadow-elevated" - }, - "drop-shadow-elevated-blur": { - "prop": "--spectrum-drop-shadow-elevated-blur", - "ref": "var(--spectrum-drop-shadow-blur-200)", - "value": "8px" - }, - "drop-shadow-elevated-color": { - "prop": "--spectrum-drop-shadow-elevated-color", - "ref": "var(--spectrum-drop-shadow-color-200)", - "light": { - "value": "rgba(0, 0, 0, 0.16)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.48)" - }, - "wireframe": { - "value": "rgba(0, 0, 0, 0.16)" - } - }, - "drop-shadow-elevated-key-color": { - "prop": "--spectrum-drop-shadow-elevated-key-color", - "light": { - "value": "rgba(0, 0, 0, 0.12)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.36)" - }, - "wireframe": { - "value": "rgba(0, 0, 0, 0.12)" - } - }, - "drop-shadow-elevated-x": { - "prop": "--spectrum-drop-shadow-elevated-x", - "ref": "var(--spectrum-drop-shadow-x-200)", - "value": "0px" - }, - "drop-shadow-elevated-y": { - "prop": "--spectrum-drop-shadow-elevated-y", - "ref": "var(--spectrum-drop-shadow-y-200)", - "value": "2px" - }, - "drop-shadow-emphasized": { - "prop": "--spectrum-drop-shadow-emphasized" - }, - "drop-shadow-emphasized-default-blur": { - "prop": "--spectrum-drop-shadow-emphasized-default-blur", - "ref": "var(--spectrum-drop-shadow-blur-100)", - "value": "6px" - }, - "drop-shadow-emphasized-default-color": { - "prop": "--spectrum-drop-shadow-emphasized-default-color", - "ref": "var(--spectrum-drop-shadow-color-100)", - "light": { - "value": "rgba(0, 0, 0, 0.12)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.36)" - }, - "wireframe": { - "value": "rgba(0, 0, 0, 0.12)" - } - }, - "drop-shadow-emphasized-default-x": { - "prop": "--spectrum-drop-shadow-emphasized-default-x", - "ref": "var(--spectrum-drop-shadow-x-100)", - "value": "0px" - }, - "drop-shadow-emphasized-default-y": { - "prop": "--spectrum-drop-shadow-emphasized-default-y", - "ref": "var(--spectrum-drop-shadow-y-100)", - "value": "1px" - }, - "drop-shadow-emphasized-hover": { - "prop": "--spectrum-drop-shadow-emphasized-hover" - }, - "drop-shadow-emphasized-hover-blur": { - "prop": "--spectrum-drop-shadow-emphasized-hover-blur", - "ref": "var(--spectrum-drop-shadow-blur-200)", - "value": "8px" - }, - "drop-shadow-emphasized-hover-color": { - "prop": "--spectrum-drop-shadow-emphasized-hover-color", - "ref": "var(--spectrum-drop-shadow-color-200)", - "light": { - "value": "rgba(0, 0, 0, 0.16)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.48)" - }, - "wireframe": { - "value": "rgba(0, 0, 0, 0.16)" - } - }, - "drop-shadow-emphasized-hover-key-color": { - "prop": "--spectrum-drop-shadow-emphasized-hover-key-color", - "light": { - "value": "rgba(0, 0, 0, 0.12)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.36)" - }, - "wireframe": { - "value": "rgba(0, 0, 0, 0.12)" - } - }, - "drop-shadow-emphasized-hover-x": { - "prop": "--spectrum-drop-shadow-emphasized-hover-x", - "ref": "var(--spectrum-drop-shadow-x-200)", - "value": "0px" - }, - "drop-shadow-emphasized-hover-y": { - "prop": "--spectrum-drop-shadow-emphasized-hover-y", - "ref": "var(--spectrum-drop-shadow-y-200)", - "value": "2px" - }, - "drop-shadow-emphasized-key-color": { - "prop": "--spectrum-drop-shadow-emphasized-key-color", - "light": { - "value": "rgba(0, 0, 0, 0.08)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.24)" - }, - "wireframe": { - "value": "rgba(0, 0, 0, 0.08)" - } - }, - "drop-shadow-transition-color": { - "prop": "--spectrum-drop-shadow-transition-color", - "light": { - "value": "rgba(0, 0, 0, 0.04)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.12)" - }, - "wireframe": { - "value": "rgba(0, 0, 0, 0.04)" - } - }, - "drop-shadow-x": { - "prop": "--spectrum-drop-shadow-x", - "ref": "var(--spectrum-drop-shadow-x-100)", - "value": "0px" - }, - "drop-shadow-x-100": { - "prop": "--spectrum-drop-shadow-x-100", - "value": "0px" - }, - "drop-shadow-x-200": { - "prop": "--spectrum-drop-shadow-x-200", - "value": "0px" - }, - "drop-shadow-x-300": { - "prop": "--spectrum-drop-shadow-x-300", - "value": "0px" - }, - "drop-shadow-y": { - "prop": "--spectrum-drop-shadow-y", - "ref": "var(--spectrum-drop-shadow-y-100)", - "value": "1px" - }, - "drop-shadow-y-100": { - "prop": "--spectrum-drop-shadow-y-100", - "value": "1px" - }, - "drop-shadow-y-200": { - "prop": "--spectrum-drop-shadow-y-200", - "value": "2px" - }, - "drop-shadow-y-300": { - "prop": "--spectrum-drop-shadow-y-300", - "value": "6px" - }, - "drop-zone-background-color": { - "prop": "--spectrum-drop-zone-background-color", - "ref": "var(--spectrum-accent-visual-color)", - "light": { - "value": "rgb(75, 117, 255)" - }, - "dark": { - "value": "rgb(64, 105, 253)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "drop-zone-background-color-opacity": { - "prop": "--spectrum-drop-zone-background-color-opacity", - "value": "0.1" - }, - "drop-zone-background-color-opacity-filled": { - "prop": "--spectrum-drop-zone-background-color-opacity-filled", - "value": "0.3" - }, - "drop-zone-body-font-size": { - "prop": "--spectrum-drop-zone-body-font-size", - "ref": "var(--spectrum-illustrated-message-medium-body-font-size)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "drop-zone-body-size": { - "prop": "--spectrum-drop-zone-body-size", - "ref": "var(--spectrum-drop-zone-body-font-size)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "drop-zone-border-dash-gap": { - "prop": "--spectrum-drop-zone-border-dash-gap", - "value": "6px" - }, - "drop-zone-border-dash-length": { - "prop": "--spectrum-drop-zone-border-dash-length", - "value": "8px" - }, - "drop-zone-cjk-title-font-size": { - "prop": "--spectrum-drop-zone-cjk-title-font-size", - "ref": "var(--spectrum-illustrated-message-medium-cjk-title-font-size)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "19px" - } - }, - "drop-zone-cjk-title-size": { - "prop": "--spectrum-drop-zone-cjk-title-size", - "ref": "var(--spectrum-drop-zone-cjk-title-font-size)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "19px" - } - }, - "drop-zone-content-maximum-width": { - "prop": "--spectrum-drop-zone-content-maximum-width", - "ref": "var(--spectrum-illustrated-message-maximum-width)", - "value": "380px" - }, - "drop-zone-title-font-size": { - "prop": "--spectrum-drop-zone-title-font-size", - "ref": "var(--spectrum-illustrated-message-medium-title-font-size)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "drop-zone-title-size": { - "prop": "--spectrum-drop-zone-title-size", - "ref": "var(--spectrum-drop-zone-title-font-size)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "drop-zone-width": { - "prop": "--spectrum-drop-zone-width", - "value": "428px" - }, - "extra-bold-font-weight": { - "prop": "--spectrum-extra-bold-font-weight", - "value": "800" - }, - "field-default-width-extra-large": { - "prop": "--spectrum-field-default-width-extra-large", - "desktop": { - "value": "240px" - }, - "mobile": { - "value": "288px" - } - }, - "field-default-width-large": { - "prop": "--spectrum-field-default-width-large", - "desktop": { - "value": "224px" - }, - "mobile": { - "value": "272px" - } - }, - "field-default-width-medium": { - "prop": "--spectrum-field-default-width-medium", - "desktop": { - "value": "208px" - }, - "mobile": { - "value": "256px" - } - }, - "field-default-width-small": { - "prop": "--spectrum-field-default-width-small", - "desktop": { - "value": "192px" - }, - "mobile": { - "value": "240px" - } - }, - "field-edge-to-alert-icon-extra-large": { - "prop": "--spectrum-field-edge-to-alert-icon-extra-large", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "field-edge-to-alert-icon-large": { - "prop": "--spectrum-field-edge-to-alert-icon-large", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "19px" - } - }, - "field-edge-to-alert-icon-medium": { - "prop": "--spectrum-field-edge-to-alert-icon-medium", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "field-edge-to-alert-icon-quiet": { - "prop": "--spectrum-field-edge-to-alert-icon-quiet", - "value": "0px" - }, - "field-edge-to-alert-icon-small": { - "prop": "--spectrum-field-edge-to-alert-icon-small", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "field-edge-to-border-quiet": { - "prop": "--spectrum-field-edge-to-border-quiet", - "value": "0px" - }, - "field-edge-to-disclosure-icon-100": { - "prop": "--spectrum-field-edge-to-disclosure-icon-100", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "13px" - } - }, - "field-edge-to-disclosure-icon-200": { - "prop": "--spectrum-field-edge-to-disclosure-icon-200", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "field-edge-to-disclosure-icon-300": { - "prop": "--spectrum-field-edge-to-disclosure-icon-300", - "desktop": { - "value": "17px" - }, - "mobile": { - "value": "22px" - } - }, - "field-edge-to-disclosure-icon-75": { - "prop": "--spectrum-field-edge-to-disclosure-icon-75", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "field-edge-to-text-quiet": { - "prop": "--spectrum-field-edge-to-text-quiet", - "value": "0px" - }, - "field-edge-to-validation-icon-extra-large": { - "prop": "--spectrum-field-edge-to-validation-icon-extra-large", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "field-edge-to-validation-icon-large": { - "prop": "--spectrum-field-edge-to-validation-icon-large", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "19px" - } - }, - "field-edge-to-validation-icon-medium": { - "prop": "--spectrum-field-edge-to-validation-icon-medium", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "field-edge-to-validation-icon-quiet": { - "prop": "--spectrum-field-edge-to-validation-icon-quiet", - "value": "0px" - }, - "field-edge-to-validation-icon-small": { - "prop": "--spectrum-field-edge-to-validation-icon-small", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "field-edge-to-visual-quiet": { - "prop": "--spectrum-field-edge-to-visual-quiet", - "value": "0px" - }, - "field-end-edge-to-disclosure-icon-100": { - "prop": "--spectrum-field-end-edge-to-disclosure-icon-100", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "13px" - } - }, - "field-end-edge-to-disclosure-icon-200": { - "prop": "--spectrum-field-end-edge-to-disclosure-icon-200", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "field-end-edge-to-disclosure-icon-300": { - "prop": "--spectrum-field-end-edge-to-disclosure-icon-300", - "desktop": { - "value": "17px" - }, - "mobile": { - "value": "22px" - } - }, - "field-end-edge-to-disclosure-icon-75": { - "prop": "--spectrum-field-end-edge-to-disclosure-icon-75", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "field-label-text-to-asterisk-extra-large": { - "prop": "--spectrum-field-label-text-to-asterisk-extra-large", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "6px" - } - }, - "field-label-text-to-asterisk-large": { - "prop": "--spectrum-field-label-text-to-asterisk-large", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "6px" - } - }, - "field-label-text-to-asterisk-medium": { - "prop": "--spectrum-field-label-text-to-asterisk-medium", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "field-label-text-to-asterisk-small": { - "prop": "--spectrum-field-label-text-to-asterisk-small", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "field-label-to-component": { - "prop": "--spectrum-field-label-to-component", - "value": "0px" - }, - "field-label-to-component-quiet-extra-large": { - "prop": "--spectrum-field-label-to-component-quiet-extra-large", - "desktop": { - "value": "-15px" - }, - "mobile": { - "value": "-19px" - } - }, - "field-label-to-component-quiet-large": { - "prop": "--spectrum-field-label-to-component-quiet-large", - "desktop": { - "value": "-12px" - }, - "mobile": { - "value": "-15px" - } - }, - "field-label-to-component-quiet-medium": { - "prop": "--spectrum-field-label-to-component-quiet-medium", - "desktop": { - "value": "-8px" - }, - "mobile": { - "value": "-10px" - } - }, - "field-label-to-component-quiet-small": { - "prop": "--spectrum-field-label-to-component-quiet-small", - "desktop": { - "value": "-8px" - }, - "mobile": { - "value": "-10px" - } - }, - "field-label-top-margin-extra-large": { - "prop": "--spectrum-field-label-top-margin-extra-large", - "value": "0px" - }, - "field-label-top-margin-large": { - "prop": "--spectrum-field-label-top-margin-large", - "value": "0px" - }, - "field-label-top-margin-medium": { - "prop": "--spectrum-field-label-top-margin-medium", - "value": "0px" - }, - "field-label-top-margin-small": { - "prop": "--spectrum-field-label-top-margin-small", - "value": "0px" - }, - "field-label-top-to-asterisk-extra-large": { - "prop": "--spectrum-field-label-top-to-asterisk-extra-large", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "24px" - } - }, - "field-label-top-to-asterisk-large": { - "prop": "--spectrum-field-label-top-to-asterisk-large", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "19px" - } - }, - "field-label-top-to-asterisk-medium": { - "prop": "--spectrum-field-label-top-to-asterisk-medium", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "field-label-top-to-asterisk-small": { - "prop": "--spectrum-field-label-top-to-asterisk-small", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "11px" - } - }, - "field-text-to-alert-icon-extra-large": { - "prop": "--spectrum-field-text-to-alert-icon-extra-large", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "field-text-to-alert-icon-large": { - "prop": "--spectrum-field-text-to-alert-icon-large", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "19px" - } - }, - "field-text-to-alert-icon-medium": { - "prop": "--spectrum-field-text-to-alert-icon-medium", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "field-text-to-alert-icon-small": { - "prop": "--spectrum-field-text-to-alert-icon-small", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "field-text-to-validation-icon-extra-large": { - "prop": "--spectrum-field-text-to-validation-icon-extra-large", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "field-text-to-validation-icon-large": { - "prop": "--spectrum-field-text-to-validation-icon-large", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "19px" - } - }, - "field-text-to-validation-icon-medium": { - "prop": "--spectrum-field-text-to-validation-icon-medium", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "field-text-to-validation-icon-small": { - "prop": "--spectrum-field-text-to-validation-icon-small", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "field-top-to-alert-icon-extra-large": { - "prop": "--spectrum-field-top-to-alert-icon-extra-large", - "desktop": { - "value": "13px" - }, - "mobile": { - "value": "16px" - } - }, - "field-top-to-alert-icon-large": { - "prop": "--spectrum-field-top-to-alert-icon-large", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "13px" - } - }, - "field-top-to-alert-icon-medium": { - "prop": "--spectrum-field-top-to-alert-icon-medium", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "field-top-to-alert-icon-small": { - "prop": "--spectrum-field-top-to-alert-icon-small", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "field-top-to-disclosure-icon-100": { - "prop": "--spectrum-field-top-to-disclosure-icon-100", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "13px" - } - }, - "field-top-to-disclosure-icon-200": { - "prop": "--spectrum-field-top-to-disclosure-icon-200", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "field-top-to-disclosure-icon-300": { - "prop": "--spectrum-field-top-to-disclosure-icon-300", - "desktop": { - "value": "17px" - }, - "mobile": { - "value": "22px" - } - }, - "field-top-to-disclosure-icon-75": { - "prop": "--spectrum-field-top-to-disclosure-icon-75", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "field-top-to-disclosure-icon-compact-extra-large": { - "prop": "--spectrum-field-top-to-disclosure-icon-compact-extra-large", - "desktop": { - "value": "17px" - }, - "mobile": { - "value": "21px" - } - }, - "field-top-to-disclosure-icon-compact-large": { - "prop": "--spectrum-field-top-to-disclosure-icon-compact-large", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "field-top-to-disclosure-icon-compact-medium": { - "prop": "--spectrum-field-top-to-disclosure-icon-compact-medium", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "13px" - } - }, - "field-top-to-disclosure-icon-compact-small": { - "prop": "--spectrum-field-top-to-disclosure-icon-compact-small", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "field-top-to-disclosure-icon-extra-large": { - "prop": "--spectrum-field-top-to-disclosure-icon-extra-large", - "desktop": { - "value": "21px" - }, - "mobile": { - "value": "26px" - } - }, - "field-top-to-disclosure-icon-large": { - "prop": "--spectrum-field-top-to-disclosure-icon-large", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "field-top-to-disclosure-icon-medium": { - "prop": "--spectrum-field-top-to-disclosure-icon-medium", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "18px" - } - }, - "field-top-to-disclosure-icon-small": { - "prop": "--spectrum-field-top-to-disclosure-icon-small", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "13px" - } - }, - "field-top-to-disclosure-icon-spacious-extra-large": { - "prop": "--spectrum-field-top-to-disclosure-icon-spacious-extra-large", - "desktop": { - "value": "25px" - }, - "mobile": { - "value": "31px" - } - }, - "field-top-to-disclosure-icon-spacious-large": { - "prop": "--spectrum-field-top-to-disclosure-icon-spacious-large", - "desktop": { - "value": "22px" - }, - "mobile": { - "value": "27px" - } - }, - "field-top-to-disclosure-icon-spacious-medium": { - "prop": "--spectrum-field-top-to-disclosure-icon-spacious-medium", - "desktop": { - "value": "19px" - }, - "mobile": { - "value": "23px" - } - }, - "field-top-to-disclosure-icon-spacious-small": { - "prop": "--spectrum-field-top-to-disclosure-icon-spacious-small", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "18px" - } - }, - "field-top-to-progress-circle-extra-large": { - "prop": "--spectrum-field-top-to-progress-circle-extra-large", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "15px" - } - }, - "field-top-to-progress-circle-large": { - "prop": "--spectrum-field-top-to-progress-circle-large", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "field-top-to-progress-circle-medium": { - "prop": "--spectrum-field-top-to-progress-circle-medium", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "field-top-to-progress-circle-small": { - "prop": "--spectrum-field-top-to-progress-circle-small", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "6px" - } - }, - "field-top-to-validation-icon-extra-large": { - "prop": "--spectrum-field-top-to-validation-icon-extra-large", - "desktop": { - "value": "17px" - }, - "mobile": { - "value": "22px" - } - }, - "field-top-to-validation-icon-large": { - "prop": "--spectrum-field-top-to-validation-icon-large", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "field-top-to-validation-icon-medium": { - "prop": "--spectrum-field-top-to-validation-icon-medium", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "13px" - } - }, - "field-top-to-validation-icon-small": { - "prop": "--spectrum-field-top-to-validation-icon-small", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "field-width": { - "prop": "--spectrum-field-width", - "ref": "var(--spectrum-field-width-small)", - "desktop": { - "value": "192px" - }, - "mobile": { - "value": "240px" - } - }, - "field-width-extra-large": { - "prop": "--spectrum-field-width-extra-large", - "ref": "var(--spectrum-field-default-width-extra-large)", - "desktop": { - "value": "240px" - }, - "mobile": { - "value": "288px" - } - }, - "field-width-large": { - "prop": "--spectrum-field-width-large", - "ref": "var(--spectrum-field-default-width-large)", - "desktop": { - "value": "224px" - }, - "mobile": { - "value": "272px" - } - }, - "field-width-medium": { - "prop": "--spectrum-field-width-medium", - "ref": "var(--spectrum-field-default-width-medium)", - "desktop": { - "value": "208px" - }, - "mobile": { - "value": "256px" - } - }, - "field-width-small": { - "prop": "--spectrum-field-width-small", - "ref": "var(--spectrum-field-default-width-small)", - "desktop": { - "value": "192px" - }, - "mobile": { - "value": "240px" - } - }, - "floating-action-button-drop-shadow-blur": { - "prop": "--spectrum-floating-action-button-drop-shadow-blur", - "value": "12px" - }, - "floating-action-button-drop-shadow-color": { - "prop": "--spectrum-floating-action-button-drop-shadow-color", - "ref": "var(--spectrum-transparent-black-300)", - "value": "rgba(0, 0, 0, 0.15)" - }, - "floating-action-button-drop-shadow-y": { - "prop": "--spectrum-floating-action-button-drop-shadow-y", - "value": "4px" - }, - "floating-action-button-shadow-color": { - "prop": "--spectrum-floating-action-button-shadow-color", - "ref": "var(--spectrum-floating-action-button-drop-shadow-color)", - "value": "rgba(0, 0, 0, 0.15)" - }, - "focus-indicator-color": { - "prop": "--spectrum-focus-indicator-color", - "ref": "var(--spectrum-blue-800)", - "light": { - "value": "rgb(75, 117, 255)" - }, - "dark": { - "value": "rgb(64, 105, 253)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "focus-indicator-gap": { - "prop": "--spectrum-focus-indicator-gap", - "value": "2px" - }, - "focus-indicator-thickness": { - "prop": "--spectrum-focus-indicator-thickness", - "value": "2px" - }, - "font-size-100": { - "prop": "--spectrum-font-size-100", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "font-size-1000": { - "prop": "--spectrum-font-size-1000", - "desktop": { - "value": "40px" - }, - "mobile": { - "value": "49px" - } - }, - "font-size-1100": { - "prop": "--spectrum-font-size-1100", - "desktop": { - "value": "45px" - }, - "mobile": { - "value": "55px" - } - }, - "font-size-1200": { - "prop": "--spectrum-font-size-1200", - "desktop": { - "value": "51px" - }, - "mobile": { - "value": "62px" - } - }, - "font-size-1300": { - "prop": "--spectrum-font-size-1300", - "desktop": { - "value": "58px" - }, - "mobile": { - "value": "70px" - } - }, - "font-size-1400": { - "prop": "--spectrum-font-size-1400", - "desktop": { - "value": "65px" - }, - "mobile": { - "value": "79px" - } - }, - "font-size-1500": { - "prop": "--spectrum-font-size-1500", - "desktop": { - "value": "73px" - }, - "mobile": { - "value": "88px" - } - }, - "font-size-200": { - "prop": "--spectrum-font-size-200", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "19px" - } - }, - "font-size-25": { - "prop": "--spectrum-font-size-25", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "font-size-300": { - "prop": "--spectrum-font-size-300", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "font-size-400": { - "prop": "--spectrum-font-size-400", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "font-size-50": { - "prop": "--spectrum-font-size-50", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "13px" - } - }, - "font-size-500": { - "prop": "--spectrum-font-size-500", - "desktop": { - "value": "22px" - }, - "mobile": { - "value": "27px" - } - }, - "font-size-600": { - "prop": "--spectrum-font-size-600", - "desktop": { - "value": "25px" - }, - "mobile": { - "value": "31px" - } - }, - "font-size-700": { - "prop": "--spectrum-font-size-700", - "desktop": { - "value": "28px" - }, - "mobile": { - "value": "34px" - } - }, - "font-size-75": { - "prop": "--spectrum-font-size-75", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "font-size-800": { - "prop": "--spectrum-font-size-800", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "39px" - } - }, - "font-size-900": { - "prop": "--spectrum-font-size-900", - "desktop": { - "value": "36px" - }, - "mobile": { - "value": "44px" - } - }, - "fuchsia-100": { - "prop": "--spectrum-fuchsia-100", - "light": { - "value": "rgb(254, 246, 255)" - }, - "dark": { - "value": "rgb(50, 0, 61)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "fuchsia-1000": { - "prop": "--spectrum-fuchsia-1000", - "light": { - "value": "rgb(156, 40, 175)" - }, - "dark": { - "value": "rgb(232, 91, 253)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "fuchsia-1100": { - "prop": "--spectrum-fuchsia-1100", - "light": { - "value": "rgb(135, 27, 154)" - }, - "dark": { - "value": "rgb(240, 122, 255)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "fuchsia-1200": { - "prop": "--spectrum-fuchsia-1200", - "light": { - "value": "rgb(113, 15, 131)" - }, - "dark": { - "value": "rgb(245, 159, 255)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "fuchsia-1300": { - "prop": "--spectrum-fuchsia-1300", - "light": { - "value": "rgb(92, 4, 109)" - }, - "dark": { - "value": "rgb(248, 191, 255)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "fuchsia-1400": { - "prop": "--spectrum-fuchsia-1400", - "light": { - "value": "rgb(72, 0, 88)" - }, - "dark": { - "value": "rgb(251, 219, 255)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "fuchsia-1500": { - "prop": "--spectrum-fuchsia-1500", - "dark": { - "value": "rgb(253, 241, 255)" - }, - "light": { - "value": "rgb(54, 0, 66)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "fuchsia-1600": { - "prop": "--spectrum-fuchsia-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(29, 0, 35)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "fuchsia-200": { - "prop": "--spectrum-fuchsia-200", - "light": { - "value": "rgb(253, 233, 255)" - }, - "dark": { - "value": "rgb(61, 0, 74)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "fuchsia-300": { - "prop": "--spectrum-fuchsia-300", - "light": { - "value": "rgb(250, 211, 255)" - }, - "dark": { - "value": "rgb(79, 0, 95)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "fuchsia-400": { - "prop": "--spectrum-fuchsia-400", - "light": { - "value": "rgb(247, 181, 255)" - }, - "dark": { - "value": "rgb(102, 9, 120)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "fuchsia-500": { - "prop": "--spectrum-fuchsia-500", - "light": { - "value": "rgb(243, 147, 255)" - }, - "dark": { - "value": "rgb(127, 23, 146)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "fuchsia-600": { - "prop": "--spectrum-fuchsia-600", - "light": { - "value": "rgb(236, 105, 255)" - }, - "dark": { - "value": "rgb(151, 38, 170)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "fuchsia-700": { - "prop": "--spectrum-fuchsia-700", - "light": { - "value": "rgb(223, 77, 245)" - }, - "dark": { - "value": "rgb(173, 51, 192)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "fuchsia-800": { - "prop": "--spectrum-fuchsia-800", - "light": { - "value": "rgb(200, 68, 220)" - }, - "dark": { - "value": "rgb(186, 60, 206)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "fuchsia-900": { - "prop": "--spectrum-fuchsia-900", - "light": { - "value": "rgb(181, 57, 200)" - }, - "dark": { - "value": "rgb(213, 73, 235)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "fuchsia-background-color-default": { - "prop": "--spectrum-fuchsia-background-color-default", - "ref": "var(--spectrum-fuchsia-900)", - "light": { - "value": "rgb(181, 57, 200)" - }, - "dark": { - "value": "rgb(213, 73, 235)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "fuchsia-subtle-background-color-default": { - "prop": "--spectrum-fuchsia-subtle-background-color-default", - "ref": "var(--spectrum-fuchsia-200)", - "light": { - "value": "rgb(253, 233, 255)" - }, - "dark": { - "value": "rgb(61, 0, 74)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "fuchsia-visual-color": { - "prop": "--spectrum-fuchsia-visual-color", - "ref": "var(--spectrum-fuchsia-800)", - "light": { - "value": "rgb(200, 68, 220)" - }, - "dark": { - "value": "rgb(186, 60, 206)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "gradient-stop-1-avatar": { - "prop": "--spectrum-gradient-stop-1-avatar", - "value": "0" - }, - "gradient-stop-1-genai": { - "prop": "--spectrum-gradient-stop-1-genai", - "value": "0" - }, - "gradient-stop-1-premium": { - "prop": "--spectrum-gradient-stop-1-premium", - "value": "0" - }, - "gradient-stop-2-avatar": { - "prop": "--spectrum-gradient-stop-2-avatar", - "value": "0.6666" - }, - "gradient-stop-2-genai": { - "prop": "--spectrum-gradient-stop-2-genai", - "value": "0.3333" - }, - "gradient-stop-2-premium": { - "prop": "--spectrum-gradient-stop-2-premium", - "value": "0.6666" - }, - "gradient-stop-3-avatar": { - "prop": "--spectrum-gradient-stop-3-avatar", - "value": "1" - }, - "gradient-stop-3-genai": { - "prop": "--spectrum-gradient-stop-3-genai", - "value": "1" - }, - "gradient-stop-3-premium": { - "prop": "--spectrum-gradient-stop-3-premium", - "value": "1" - }, - "gray-100": { - "prop": "--spectrum-gray-100", - "light": { - "value": "rgb(233, 233, 233)" - }, - "dark": { - "value": "rgb(44, 44, 44)" - }, - "wireframe": { - "value": "rgb(228, 234, 249)" - } - }, - "gray-1000": { - "prop": "--spectrum-gray-1000", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(0, 0, 0)" - }, - "wireframe": { - "value": "rgb(0, 0, 0)" - } - }, - "gray-200": { - "prop": "--spectrum-gray-200", - "light": { - "value": "rgb(225, 225, 225)" - }, - "dark": { - "value": "rgb(50, 50, 50)" - }, - "wireframe": { - "value": "rgb(214, 224, 246)" - } - }, - "gray-25": { - "prop": "--spectrum-gray-25", - "dark": { - "value": "rgb(17, 17, 17)" - }, - "light": { - "value": "rgb(255, 255, 255)" - }, - "wireframe": { - "value": "rgb(254, 254, 255)" - } - }, - "gray-300": { - "prop": "--spectrum-gray-300", - "light": { - "value": "rgb(218, 218, 218)" - }, - "dark": { - "value": "rgb(57, 57, 57)" - }, - "wireframe": { - "value": "rgb(207, 219, 245)" - } - }, - "gray-400": { - "prop": "--spectrum-gray-400", - "light": { - "value": "rgb(198, 198, 198)" - }, - "dark": { - "value": "rgb(68, 68, 68)" - }, - "wireframe": { - "value": "rgb(180, 199, 239)" - } - }, - "gray-50": { - "prop": "--spectrum-gray-50", - "light": { - "value": "rgb(248, 248, 248)" - }, - "dark": { - "value": "rgb(27, 27, 27)" - }, - "wireframe": { - "value": "rgb(246, 248, 253)" - } - }, - "gray-500": { - "prop": "--spectrum-gray-500", - "light": { - "value": "rgb(143, 143, 143)" - }, - "dark": { - "value": "rgb(109, 109, 109)" - }, - "wireframe": { - "value": "rgb(108, 142, 217)" - } - }, - "gray-600": { - "prop": "--spectrum-gray-600", - "light": { - "value": "rgb(113, 113, 113)" - }, - "dark": { - "value": "rgb(138, 138, 138)" - }, - "wireframe": { - "value": "rgb(72, 110, 194)" - } - }, - "gray-700": { - "prop": "--spectrum-gray-700", - "light": { - "value": "rgb(80, 80, 80)" - }, - "dark": { - "value": "rgb(175, 175, 175)" - }, - "wireframe": { - "value": "rgb(44, 77, 149)" - } - }, - "gray-75": { - "prop": "--spectrum-gray-75", - "light": { - "value": "rgb(243, 243, 243)" - }, - "dark": { - "value": "rgb(34, 34, 34)" - }, - "wireframe": { - "value": "rgb(241, 244, 251)" - } - }, - "gray-800": { - "prop": "--spectrum-gray-800", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" - }, - "wireframe": { - "value": "rgb(25, 46, 93)" - } - }, - "gray-900": { - "prop": "--spectrum-gray-900", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - }, - "wireframe": { - "value": "rgb(10, 19, 39)" - } - }, - "gray-background-color-default": { - "prop": "--spectrum-gray-background-color-default", - "ref": "var(--spectrum-gray-700)", - "light": { - "value": "rgb(80, 80, 80)" - }, - "dark": { - "value": "rgb(175, 175, 175)" - }, - "wireframe": { - "value": "rgb(44, 77, 149)" - } - }, - "gray-subtle-background-color-default": { - "prop": "--spectrum-gray-subtle-background-color-default", - "ref": "var(--spectrum-gray-100)", - "light": { - "value": "rgb(233, 233, 233)" - }, - "dark": { - "value": "rgb(44, 44, 44)" - }, - "wireframe": { - "value": "rgb(228, 234, 249)" - } - }, - "gray-visual-color": { - "prop": "--spectrum-gray-visual-color", - "ref": "var(--spectrum-gray-500)", - "light": { - "value": "rgb(143, 143, 143)" - }, - "dark": { - "value": "rgb(109, 109, 109)" - }, - "wireframe": { - "value": "rgb(108, 142, 217)" - } - }, - "green-100": { - "prop": "--spectrum-green-100", - "light": { - "value": "rgb(237, 252, 241)" - }, - "dark": { - "value": "rgb(0, 30, 23)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "green-1000": { - "prop": "--spectrum-green-1000", - "light": { - "value": "rgb(3, 110, 69)" - }, - "dark": { - "value": "rgb(14, 175, 98)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "green-1100": { - "prop": "--spectrum-green-1100", - "light": { - "value": "rgb(2, 93, 60)" - }, - "dark": { - "value": "rgb(24, 193, 110)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "green-1200": { - "prop": "--spectrum-green-1200", - "light": { - "value": "rgb(1, 76, 52)" - }, - "dark": { - "value": "rgb(57, 215, 134)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "green-1300": { - "prop": "--spectrum-green-1300", - "light": { - "value": "rgb(0, 61, 44)" - }, - "dark": { - "value": "rgb(126, 231, 172)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "green-1400": { - "prop": "--spectrum-green-1400", - "light": { - "value": "rgb(0, 46, 34)" - }, - "dark": { - "value": "rgb(189, 241, 208)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "green-1500": { - "prop": "--spectrum-green-1500", - "dark": { - "value": "rgb(229, 250, 236)" - }, - "light": { - "value": "rgb(0, 33, 25)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "green-1600": { - "prop": "--spectrum-green-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(0, 15, 12)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "green-200": { - "prop": "--spectrum-green-200", - "light": { - "value": "rgb(215, 247, 225)" - }, - "dark": { - "value": "rgb(0, 38, 29)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "green-300": { - "prop": "--spectrum-green-300", - "light": { - "value": "rgb(173, 238, 197)" - }, - "dark": { - "value": "rgb(0, 51, 38)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "green-400": { - "prop": "--spectrum-green-400", - "light": { - "value": "rgb(107, 227, 162)" - }, - "dark": { - "value": "rgb(0, 68, 48)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "green-500": { - "prop": "--spectrum-green-500", - "light": { - "value": "rgb(43, 209, 125)" - }, - "dark": { - "value": "rgb(2, 87, 58)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "green-600": { - "prop": "--spectrum-green-600", - "light": { - "value": "rgb(18, 184, 103)" - }, - "dark": { - "value": "rgb(3, 106, 67)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "green-700": { - "prop": "--spectrum-green-700", - "light": { - "value": "rgb(11, 164, 93)" - }, - "dark": { - "value": "rgb(4, 124, 75)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "green-800": { - "prop": "--spectrum-green-800", - "light": { - "value": "rgb(7, 147, 85)" - }, - "dark": { - "value": "rgb(6, 136, 80)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "green-900": { - "prop": "--spectrum-green-900", - "light": { - "value": "rgb(5, 131, 78)" - }, - "dark": { - "value": "rgb(9, 157, 89)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "green-background-color-default": { - "prop": "--spectrum-green-background-color-default", - "ref": "var(--spectrum-green-900)", - "light": { - "value": "rgb(5, 131, 78)" - }, - "dark": { - "value": "rgb(9, 157, 89)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "green-subtle-background-color-default": { - "prop": "--spectrum-green-subtle-background-color-default", - "ref": "var(--spectrum-green-200)", - "light": { - "value": "rgb(215, 247, 225)" - }, - "dark": { - "value": "rgb(0, 38, 29)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "green-visual-color": { - "prop": "--spectrum-green-visual-color", - "ref": "var(--spectrum-green-700)", - "light": { - "value": "rgb(11, 164, 93)" - }, - "dark": { - "value": "rgb(4, 124, 75)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "gripper-icon-size-100": { - "prop": "--spectrum-gripper-icon-size-100", - "value": "24px" - }, - "heading-cjk-emphasized-font-style": { - "prop": "--spectrum-heading-cjk-emphasized-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-cjk-emphasized-font-weight": { - "prop": "--spectrum-heading-cjk-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" - }, - "heading-cjk-font-family": { - "prop": "--spectrum-heading-cjk-font-family", - "ref": "var(--spectrum-cjk-font-family)", - "value": "Adobe Clean Han" - }, - "heading-cjk-font-style": { - "prop": "--spectrum-heading-cjk-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-cjk-font-weight": { - "prop": "--spectrum-heading-cjk-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" - }, - "heading-cjk-heavy-emphasized-font-style": { - "prop": "--spectrum-heading-cjk-heavy-emphasized-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-cjk-heavy-emphasized-font-weight": { - "prop": "--spectrum-heading-cjk-heavy-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" - }, - "heading-cjk-heavy-font-style": { - "prop": "--spectrum-heading-cjk-heavy-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-cjk-heavy-font-weight": { - "prop": "--spectrum-heading-cjk-heavy-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" - }, - "heading-cjk-heavy-strong-emphasized-font-style": { - "prop": "--spectrum-heading-cjk-heavy-strong-emphasized-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-cjk-heavy-strong-emphasized-font-weight": { - "prop": "--spectrum-heading-cjk-heavy-strong-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" - }, - "heading-cjk-heavy-strong-font-style": { - "prop": "--spectrum-heading-cjk-heavy-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-cjk-heavy-strong-font-weight": { - "prop": "--spectrum-heading-cjk-heavy-strong-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" - }, - "heading-cjk-light-emphasized-font-style": { - "prop": "--spectrum-heading-cjk-light-emphasized-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-cjk-light-emphasized-font-weight": { - "prop": "--spectrum-heading-cjk-light-emphasized-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "heading-cjk-light-font-style": { - "prop": "--spectrum-heading-cjk-light-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-cjk-light-font-weight": { - "prop": "--spectrum-heading-cjk-light-font-weight", - "ref": "var(--spectrum-light-font-weight)", - "value": "300" - }, - "heading-cjk-light-strong-emphasized-font-style": { - "prop": "--spectrum-heading-cjk-light-strong-emphasized-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-cjk-light-strong-emphasized-font-weight": { - "prop": "--spectrum-heading-cjk-light-strong-emphasized-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" - }, - "heading-cjk-light-strong-font-style": { - "prop": "--spectrum-heading-cjk-light-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-cjk-light-strong-font-weight": { - "prop": "--spectrum-heading-cjk-light-strong-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" - }, - "heading-cjk-line-height": { - "prop": "--spectrum-heading-cjk-line-height", - "ref": "var(--spectrum-cjk-line-height-100)", - "value": "1.5" - }, - "heading-cjk-size-l": { - "prop": "--spectrum-heading-cjk-size-l", - "ref": "var(--spectrum-font-size-600)", - "desktop": { - "value": "25px" - }, - "mobile": { - "value": "31px" - } - }, - "heading-cjk-size-m": { - "prop": "--spectrum-heading-cjk-size-m", - "ref": "var(--spectrum-font-size-400)", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "heading-cjk-size-s": { - "prop": "--spectrum-heading-cjk-size-s", - "ref": "var(--spectrum-font-size-300)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "heading-cjk-size-xl": { - "prop": "--spectrum-heading-cjk-size-xl", - "ref": "var(--spectrum-font-size-800)", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "39px" - } - }, - "heading-cjk-size-xs": { - "prop": "--spectrum-heading-cjk-size-xs", - "ref": "var(--spectrum-font-size-200)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "19px" - } - }, - "heading-cjk-size-xxl": { - "prop": "--spectrum-heading-cjk-size-xxl", - "ref": "var(--spectrum-font-size-1000)", - "desktop": { - "value": "40px" - }, - "mobile": { - "value": "49px" - } - }, - "heading-cjk-size-xxs": { - "prop": "--spectrum-heading-cjk-size-xxs", - "ref": "var(--spectrum-font-size-100)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "heading-cjk-size-xxxl": { - "prop": "--spectrum-heading-cjk-size-xxxl", - "ref": "var(--spectrum-font-size-1200)", - "desktop": { - "value": "51px" - }, - "mobile": { - "value": "62px" - } - }, - "heading-cjk-size-xxxxl": { - "prop": "--spectrum-heading-cjk-size-xxxxl", - "ref": "var(--spectrum-font-size-1400)", - "desktop": { - "value": "65px" - }, - "mobile": { - "value": "79px" - } - }, - "heading-cjk-strong-emphasized-font-style": { - "prop": "--spectrum-heading-cjk-strong-emphasized-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-cjk-strong-emphasized-font-weight": { - "prop": "--spectrum-heading-cjk-strong-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" - }, - "heading-cjk-strong-font-style": { - "prop": "--spectrum-heading-cjk-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-cjk-strong-font-weight": { - "prop": "--spectrum-heading-cjk-strong-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" - }, - "heading-color": { - "prop": "--spectrum-heading-color", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - }, - "wireframe": { - "value": "rgb(10, 19, 39)" - } - }, - "heading-line-height": { - "prop": "--spectrum-heading-line-height", - "ref": "var(--spectrum-line-height-100)", - "value": "1.3" - }, - "heading-margin-bottom-multiplier": { - "prop": "--spectrum-heading-margin-bottom-multiplier", - "value": "0.25" - }, - "heading-margin-top-multiplier": { - "prop": "--spectrum-heading-margin-top-multiplier", - "value": "0.88888889" - }, - "heading-sans-serif-emphasized-font-style": { - "prop": "--spectrum-heading-sans-serif-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "heading-sans-serif-emphasized-font-weight": { - "prop": "--spectrum-heading-sans-serif-emphasized-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" - }, - "heading-sans-serif-font-family": { - "prop": "--spectrum-heading-sans-serif-font-family", - "ref": "var(--spectrum-sans-serif-font-family)", - "value": "Adobe Clean Spectrum VF" - }, - "heading-sans-serif-font-style": { - "prop": "--spectrum-heading-sans-serif-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-sans-serif-font-weight": { - "prop": "--spectrum-heading-sans-serif-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" - }, - "heading-sans-serif-heavy-emphasized-font-style": { - "prop": "--spectrum-heading-sans-serif-heavy-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "heading-sans-serif-heavy-emphasized-font-weight": { - "prop": "--spectrum-heading-sans-serif-heavy-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" - }, - "heading-sans-serif-heavy-font-style": { - "prop": "--spectrum-heading-sans-serif-heavy-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-sans-serif-heavy-font-weight": { - "prop": "--spectrum-heading-sans-serif-heavy-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" - }, - "heading-sans-serif-heavy-strong-emphasized-font-style": { - "prop": "--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "heading-sans-serif-heavy-strong-emphasized-font-weight": { - "prop": "--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" - }, - "heading-sans-serif-heavy-strong-font-style": { - "prop": "--spectrum-heading-sans-serif-heavy-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-sans-serif-heavy-strong-font-weight": { - "prop": "--spectrum-heading-sans-serif-heavy-strong-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" - }, - "heading-sans-serif-light-emphasized-font-style": { - "prop": "--spectrum-heading-sans-serif-light-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "heading-sans-serif-light-emphasized-font-weight": { - "prop": "--spectrum-heading-sans-serif-light-emphasized-font-weight", - "ref": "var(--spectrum-light-font-weight)", - "value": "300" - }, - "heading-sans-serif-light-font-style": { - "prop": "--spectrum-heading-sans-serif-light-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-sans-serif-light-font-weight": { - "prop": "--spectrum-heading-sans-serif-light-font-weight", - "ref": "var(--spectrum-light-font-weight)", - "value": "300" - }, - "heading-sans-serif-light-strong-emphasized-font-style": { - "prop": "--spectrum-heading-sans-serif-light-strong-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "heading-sans-serif-light-strong-emphasized-font-weight": { - "prop": "--spectrum-heading-sans-serif-light-strong-emphasized-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "heading-sans-serif-light-strong-font-style": { - "prop": "--spectrum-heading-sans-serif-light-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-sans-serif-light-strong-font-weight": { - "prop": "--spectrum-heading-sans-serif-light-strong-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "heading-sans-serif-strong-emphasized-font-style": { - "prop": "--spectrum-heading-sans-serif-strong-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "heading-sans-serif-strong-emphasized-font-weight": { - "prop": "--spectrum-heading-sans-serif-strong-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" - }, - "heading-sans-serif-strong-font-style": { - "prop": "--spectrum-heading-sans-serif-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-sans-serif-strong-font-weight": { - "prop": "--spectrum-heading-sans-serif-strong-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" - }, - "heading-serif-emphasized-font-style": { - "prop": "--spectrum-heading-serif-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "heading-serif-emphasized-font-weight": { - "prop": "--spectrum-heading-serif-emphasized-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "heading-serif-font-family": { - "prop": "--spectrum-heading-serif-font-family", - "ref": "var(--spectrum-serif-font-family)", - "value": "Adobe Clean Serif" - }, - "heading-serif-font-style": { - "prop": "--spectrum-heading-serif-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-serif-font-weight": { - "prop": "--spectrum-heading-serif-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "heading-serif-heavy-emphasized-font-style": { - "prop": "--spectrum-heading-serif-heavy-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "heading-serif-heavy-emphasized-font-weight": { - "prop": "--spectrum-heading-serif-heavy-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" - }, - "heading-serif-heavy-font-style": { - "prop": "--spectrum-heading-serif-heavy-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-serif-heavy-font-weight": { - "prop": "--spectrum-heading-serif-heavy-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" - }, - "heading-serif-heavy-strong-emphasized-font-style": { - "prop": "--spectrum-heading-serif-heavy-strong-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "heading-serif-heavy-strong-emphasized-font-weight": { - "prop": "--spectrum-heading-serif-heavy-strong-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" - }, - "heading-serif-heavy-strong-font-style": { - "prop": "--spectrum-heading-serif-heavy-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-serif-heavy-strong-font-weight": { - "prop": "--spectrum-heading-serif-heavy-strong-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" - }, - "heading-serif-light-emphasized-font-style": { - "prop": "--spectrum-heading-serif-light-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "heading-serif-light-emphasized-font-weight": { - "prop": "--spectrum-heading-serif-light-emphasized-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "heading-serif-light-font-style": { - "prop": "--spectrum-heading-serif-light-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-serif-light-font-weight": { - "prop": "--spectrum-heading-serif-light-font-weight", - "ref": "var(--spectrum-regular-font-weight)", - "value": "400" - }, - "heading-serif-light-strong-emphasized-font-style": { - "prop": "--spectrum-heading-serif-light-strong-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "heading-serif-light-strong-emphasized-font-weight": { - "prop": "--spectrum-heading-serif-light-strong-emphasized-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "heading-serif-light-strong-font-style": { - "prop": "--spectrum-heading-serif-light-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-serif-light-strong-font-weight": { - "prop": "--spectrum-heading-serif-light-strong-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "heading-serif-strong-emphasized-font-style": { - "prop": "--spectrum-heading-serif-strong-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "heading-serif-strong-emphasized-font-weight": { - "prop": "--spectrum-heading-serif-strong-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" - }, - "heading-serif-strong-font-style": { - "prop": "--spectrum-heading-serif-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "heading-serif-strong-font-weight": { - "prop": "--spectrum-heading-serif-strong-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" - }, - "heading-size-l": { - "prop": "--spectrum-heading-size-l", - "ref": "var(--spectrum-font-size-700)", - "desktop": { - "value": "28px" - }, - "mobile": { - "value": "34px" - } - }, - "heading-size-m": { - "prop": "--spectrum-heading-size-m", - "ref": "var(--spectrum-font-size-500)", - "desktop": { - "value": "22px" - }, - "mobile": { - "value": "27px" - } - }, - "heading-size-s": { - "prop": "--spectrum-heading-size-s", - "ref": "var(--spectrum-font-size-400)", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "heading-size-xl": { - "prop": "--spectrum-heading-size-xl", - "ref": "var(--spectrum-font-size-900)", - "desktop": { - "value": "36px" - }, - "mobile": { - "value": "44px" - } - }, - "heading-size-xs": { - "prop": "--spectrum-heading-size-xs", - "ref": "var(--spectrum-font-size-300)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "heading-size-xxl": { - "prop": "--spectrum-heading-size-xxl", - "ref": "var(--spectrum-font-size-1100)", - "desktop": { - "value": "45px" - }, - "mobile": { - "value": "55px" - } - }, - "heading-size-xxs": { - "prop": "--spectrum-heading-size-xxs", - "ref": "var(--spectrum-font-size-100)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "heading-size-xxxl": { - "prop": "--spectrum-heading-size-xxxl", - "ref": "var(--spectrum-font-size-1300)", - "desktop": { - "value": "58px" - }, - "mobile": { - "value": "70px" - } - }, - "heading-size-xxxxl": { - "prop": "--spectrum-heading-size-xxxxl", - "ref": "var(--spectrum-font-size-1500)", - "desktop": { - "value": "73px" - }, - "mobile": { - "value": "88px" - } - }, - "help-text-to-component": { - "prop": "--spectrum-help-text-to-component", - "value": "0px" - }, - "help-text-top-to-workflow-icon-extra-large": { - "prop": "--spectrum-help-text-top-to-workflow-icon-extra-large", - "ref": "var(--spectrum-component-top-to-workflow-icon-300)", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "15px" - } - }, - "help-text-top-to-workflow-icon-large": { - "prop": "--spectrum-help-text-top-to-workflow-icon-large", - "ref": "var(--spectrum-component-top-to-workflow-icon-200)", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "help-text-top-to-workflow-icon-medium": { - "prop": "--spectrum-help-text-top-to-workflow-icon-medium", - "ref": "var(--spectrum-component-top-to-workflow-icon-100)", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "help-text-top-to-workflow-icon-small": { - "prop": "--spectrum-help-text-top-to-workflow-icon-small", - "ref": "var(--spectrum-component-top-to-workflow-icon-75)", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "6px" - } - }, - "icon-color-blue-background": { - "prop": "--spectrum-icon-color-blue-background", - "ref": "var(--spectrum-blue-200)", - "light": { - "value": "rgb(229, 240, 254)" - }, - "dark": { - "value": "rgb(15, 28, 82)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "icon-color-blue-primary-default": { - "prop": "--spectrum-icon-color-blue-primary-default", - "ref": "var(--spectrum-blue-900)", - "light": { - "value": "rgb(59, 99, 251)" - }, - "dark": { - "value": "rgb(86, 129, 255)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "icon-color-blue-primary-down": { - "prop": "--spectrum-icon-color-blue-primary-down", - "ref": "var(--spectrum-blue-1100)", - "light": { - "value": "rgb(29, 62, 207)" - }, - "dark": { - "value": "rgb(124, 169, 252)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "icon-color-blue-primary-hover": { - "prop": "--spectrum-icon-color-blue-primary-hover", - "ref": "var(--spectrum-blue-1000)", - "light": { - "value": "rgb(39, 77, 234)" - }, - "dark": { - "value": "rgb(105, 149, 254)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "icon-color-brown-background": { - "prop": "--spectrum-icon-color-brown-background", - "ref": "var(--spectrum-brown-200)", - "dark": { - "value": "rgb(44, 31, 11)" - }, - "light": { - "value": "rgb(247, 238, 225)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "icon-color-brown-primary-default": { - "prop": "--spectrum-icon-color-brown-primary-default", - "ref": "var(--spectrum-brown-800)", - "dark": { - "value": "rgb(143, 114, 69)" - }, - "light": { - "value": "rgb(154, 123, 77)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "icon-color-brown-primary-down": { - "prop": "--spectrum-icon-color-brown-primary-down", - "ref": "var(--spectrum-brown-1000)", - "dark": { - "value": "rgb(181, 147, 98)" - }, - "light": { - "value": "rgb(119, 91, 50)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "icon-color-brown-primary-hover": { - "prop": "--spectrum-icon-color-brown-primary-hover", - "ref": "var(--spectrum-brown-900)", - "dark": { - "value": "rgb(163, 132, 84)" - }, - "light": { - "value": "rgb(139, 109, 66)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "icon-color-celery-background": { - "prop": "--spectrum-icon-color-celery-background", - "ref": "var(--spectrum-celery-100)", - "light": { - "value": "rgb(235, 255, 220)" - }, - "dark": { - "value": "rgb(11, 31, 0)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "icon-color-celery-primary-default": { - "prop": "--spectrum-icon-color-celery-primary-default", - "ref": "var(--spectrum-celery-700)", - "light": { - "value": "rgb(82, 161, 25)" - }, - "dark": { - "value": "rgb(60, 122, 15)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "icon-color-celery-primary-down": { - "prop": "--spectrum-icon-color-celery-primary-down", - "ref": "var(--spectrum-celery-900)", - "light": { - "value": "rgb(64, 129, 17)" - }, - "dark": { - "value": "rgb(78, 154, 23)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "icon-color-celery-primary-hover": { - "prop": "--spectrum-icon-color-celery-primary-hover", - "ref": "var(--spectrum-celery-800)", - "light": { - "value": "rgb(72, 144, 20)" - }, - "dark": { - "value": "rgb(66, 134, 18)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "icon-color-chartreuse-background": { - "prop": "--spectrum-icon-color-chartreuse-background", - "ref": "var(--spectrum-chartreuse-200)", - "light": { - "value": "rgb(234, 246, 173)" - }, - "dark": { - "value": "rgb(30, 36, 0)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "icon-color-chartreuse-primary-default": { - "prop": "--spectrum-icon-color-chartreuse-primary-default", - "ref": "var(--spectrum-chartreuse-600)", - "light": { - "value": "rgb(143, 172, 0)" - }, - "dark": { - "value": "rgb(83, 100, 0)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "icon-color-chartreuse-primary-down": { - "prop": "--spectrum-icon-color-chartreuse-primary-down", - "ref": "var(--spectrum-chartreuse-800)", - "light": { - "value": "rgb(114, 137, 0)" - }, - "dark": { - "value": "rgb(106, 127, 0)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "icon-color-chartreuse-primary-hover": { - "prop": "--spectrum-icon-color-chartreuse-primary-hover", - "ref": "var(--spectrum-chartreuse-700)", - "light": { - "value": "rgb(128, 153, 0)" - }, - "dark": { - "value": "rgb(97, 116, 0)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "icon-color-cinnamon-background": { - "prop": "--spectrum-icon-color-cinnamon-background", - "ref": "var(--spectrum-cinnamon-200)", - "dark": { - "value": "rgb(59, 21, 5)" - }, - "light": { - "value": "rgb(249, 236, 229)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "icon-color-cinnamon-primary-default": { - "prop": "--spectrum-icon-color-cinnamon-primary-default", - "ref": "var(--spectrum-cinnamon-800)", - "dark": { - "value": "rgb(176, 98, 59)" - }, - "light": { - "value": "rgb(184, 109, 70)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "icon-color-cinnamon-primary-down": { - "prop": "--spectrum-icon-color-cinnamon-primary-down", - "ref": "var(--spectrum-cinnamon-1000)", - "dark": { - "value": "rgb(206, 136, 99)" - }, - "light": { - "value": "rgb(147, 77, 43)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "icon-color-cinnamon-primary-hover": { - "prop": "--spectrum-icon-color-cinnamon-primary-hover", - "ref": "var(--spectrum-cinnamon-900)", - "dark": { - "value": "rgb(192, 119, 80)" - }, - "light": { - "value": "rgb(170, 94, 56)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "icon-color-cyan-background": { - "prop": "--spectrum-icon-color-cyan-background", - "ref": "var(--spectrum-cyan-100)", - "light": { - "value": "rgb(238, 250, 254)" - }, - "dark": { - "value": "rgb(0, 29, 39)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "icon-color-cyan-primary-default": { - "prop": "--spectrum-icon-color-cyan-primary-default", - "ref": "var(--spectrum-cyan-800)", - "light": { - "value": "rgb(18, 134, 205)" - }, - "dark": { - "value": "rgb(13, 125, 186)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "icon-color-cyan-primary-down": { - "prop": "--spectrum-icon-color-cyan-primary-down", - "ref": "var(--spectrum-cyan-1000)", - "light": { - "value": "rgb(4, 102, 145)" - }, - "dark": { - "value": "rgb(38, 159, 244)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "icon-color-cyan-primary-hover": { - "prop": "--spectrum-icon-color-cyan-primary-hover", - "ref": "var(--spectrum-cyan-900)", - "light": { - "value": "rgb(11, 120, 179)" - }, - "dark": { - "value": "rgb(24, 142, 220)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "icon-color-disabled-primary": { - "prop": "--spectrum-icon-color-disabled-primary", - "ref": "var(--spectrum-gray-400)", - "light": { - "value": "rgb(198, 198, 198)" - }, - "dark": { - "value": "rgb(68, 68, 68)" - }, - "wireframe": { - "value": "rgb(180, 199, 239)" - } - }, - "icon-color-emphasized-background": { - "prop": "--spectrum-icon-color-emphasized-background", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - }, - "wireframe": { - "value": "rgb(10, 19, 39)" - } - }, - "icon-color-fuchsia-background": { - "prop": "--spectrum-icon-color-fuchsia-background", - "ref": "var(--spectrum-fuchsia-200)", - "light": { - "value": "rgb(253, 233, 255)" - }, - "dark": { - "value": "rgb(61, 0, 74)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "icon-color-fuchsia-primary-default": { - "prop": "--spectrum-icon-color-fuchsia-primary-default", - "ref": "var(--spectrum-fuchsia-900)", - "light": { - "value": "rgb(181, 57, 200)" - }, - "dark": { - "value": "rgb(213, 73, 235)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "icon-color-fuchsia-primary-down": { - "prop": "--spectrum-icon-color-fuchsia-primary-down", - "ref": "var(--spectrum-fuchsia-1100)", - "light": { - "value": "rgb(135, 27, 154)" - }, - "dark": { - "value": "rgb(240, 122, 255)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "icon-color-fuchsia-primary-hover": { - "prop": "--spectrum-icon-color-fuchsia-primary-hover", - "ref": "var(--spectrum-fuchsia-1000)", - "light": { - "value": "rgb(156, 40, 175)" - }, - "dark": { - "value": "rgb(232, 91, 253)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "icon-color-green-background": { - "prop": "--spectrum-icon-color-green-background", - "ref": "var(--spectrum-green-100)", - "light": { - "value": "rgb(237, 252, 241)" - }, - "dark": { - "value": "rgb(0, 30, 23)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "icon-color-green-primary-default": { - "prop": "--spectrum-icon-color-green-primary-default", - "ref": "var(--spectrum-green-800)", - "light": { - "value": "rgb(7, 147, 85)" - }, - "dark": { - "value": "rgb(6, 136, 80)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "icon-color-green-primary-down": { - "prop": "--spectrum-icon-color-green-primary-down", - "ref": "var(--spectrum-green-1000)", - "light": { - "value": "rgb(3, 110, 69)" - }, - "dark": { - "value": "rgb(14, 175, 98)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "icon-color-green-primary-hover": { - "prop": "--spectrum-icon-color-green-primary-hover", - "ref": "var(--spectrum-green-900)", - "light": { - "value": "rgb(5, 131, 78)" - }, - "dark": { - "value": "rgb(9, 157, 89)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "icon-color-indigo-background": { - "prop": "--spectrum-icon-color-indigo-background", - "ref": "var(--spectrum-indigo-200)", - "light": { - "value": "rgb(235, 238, 255)" - }, - "dark": { - "value": "rgb(35, 0, 110)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "icon-color-indigo-primary-default": { - "prop": "--spectrum-icon-color-indigo-primary-default", - "ref": "var(--spectrum-indigo-900)", - "light": { - "value": "rgb(113, 85, 250)" - }, - "dark": { - "value": "rgb(128, 119, 254)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "icon-color-indigo-primary-down": { - "prop": "--spectrum-icon-color-indigo-primary-down", - "ref": "var(--spectrum-indigo-1100)", - "light": { - "value": "rgb(84, 36, 219)" - }, - "dark": { - "value": "rgb(153, 161, 255)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "icon-color-indigo-primary-hover": { - "prop": "--spectrum-icon-color-indigo-primary-hover", - "ref": "var(--spectrum-indigo-1000)", - "light": { - "value": "rgb(99, 56, 238)" - }, - "dark": { - "value": "rgb(139, 141, 254)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "icon-color-informative": { - "prop": "--spectrum-icon-color-informative", - "ref": "var(--spectrum-informative-visual-color)", - "light": { - "value": "rgb(75, 117, 255)" - }, - "dark": { - "value": "rgb(64, 105, 253)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "icon-color-inverse": { - "prop": "--spectrum-icon-color-inverse", - "ref": "var(--spectrum-gray-50)", - "light": { - "value": "rgb(248, 248, 248)" - }, - "dark": { - "value": "rgb(27, 27, 27)" - }, - "wireframe": { - "value": "rgb(246, 248, 253)" - } - }, - "icon-color-inverse-background": { - "prop": "--spectrum-icon-color-inverse-background", - "ref": "var(--spectrum-gray-50)", - "light": { - "value": "rgb(248, 248, 248)" - }, - "dark": { - "value": "rgb(27, 27, 27)" - }, - "wireframe": { - "value": "rgb(246, 248, 253)" - } - }, - "icon-color-magenta-background": { - "prop": "--spectrum-icon-color-magenta-background", - "ref": "var(--spectrum-magenta-200)", - "light": { - "value": "rgb(255, 232, 240)" - }, - "dark": { - "value": "rgb(74, 0, 27)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "icon-color-magenta-primary-default": { - "prop": "--spectrum-icon-color-magenta-primary-default", - "ref": "var(--spectrum-magenta-900)", - "light": { - "value": "rgb(217, 35, 97)" - }, - "dark": { - "value": "rgb(255, 51, 119)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "icon-color-magenta-primary-down": { - "prop": "--spectrum-icon-color-magenta-primary-down", - "ref": "var(--spectrum-magenta-1100)", - "light": { - "value": "rgb(163, 5, 62)" - }, - "dark": { - "value": "rgb(255, 128, 171)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "icon-color-magenta-primary-hover": { - "prop": "--spectrum-icon-color-magenta-primary-hover", - "ref": "var(--spectrum-magenta-1000)", - "light": { - "value": "rgb(186, 22, 80)" - }, - "dark": { - "value": "rgb(255, 96, 149)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "icon-color-negative": { - "prop": "--spectrum-icon-color-negative", - "ref": "var(--spectrum-negative-visual-color)", - "light": { - "value": "rgb(240, 56, 35)" - }, - "dark": { - "value": "rgb(223, 52, 34)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "icon-color-neutral": { - "prop": "--spectrum-icon-color-neutral", - "ref": "var(--spectrum-neutral-visual-color)", - "light": { - "value": "rgb(143, 143, 143)" - }, - "dark": { - "value": "rgb(109, 109, 109)" - }, - "wireframe": { - "value": "rgb(108, 142, 217)" - } - }, - "icon-color-notice": { - "prop": "--spectrum-icon-color-notice", - "ref": "var(--spectrum-notice-visual-color)", - "light": { - "value": "rgb(212, 91, 0)" - }, - "dark": { - "value": "rgb(199, 82, 0)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "icon-color-orange-background": { - "prop": "--spectrum-icon-color-orange-background", - "ref": "var(--spectrum-orange-200)", - "light": { - "value": "rgb(255, 236, 207)" - }, - "dark": { - "value": "rgb(61, 21, 0)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "icon-color-orange-primary-default": { - "prop": "--spectrum-icon-color-orange-primary-default", - "ref": "var(--spectrum-orange-700)", - "light": { - "value": "rgb(232, 106, 0)" - }, - "dark": { - "value": "rgb(185, 73, 0)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "icon-color-orange-primary-down": { - "prop": "--spectrum-icon-color-orange-primary-down", - "ref": "var(--spectrum-orange-900)", - "light": { - "value": "rgb(194, 78, 0)" - }, - "dark": { - "value": "rgb(224, 100, 0)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "icon-color-orange-primary-hover": { - "prop": "--spectrum-icon-color-orange-primary-hover", - "ref": "var(--spectrum-orange-800)", - "light": { - "value": "rgb(212, 91, 0)" - }, - "dark": { - "value": "rgb(199, 82, 0)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "icon-color-pink-background": { - "prop": "--spectrum-icon-color-pink-background", - "ref": "var(--spectrum-pink-200)", - "dark": { - "value": "rgb(71, 0, 44)" - }, - "light": { - "value": "rgb(255, 232, 247)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "icon-color-pink-primary-default": { - "prop": "--spectrum-icon-color-pink-primary-default", - "ref": "var(--spectrum-pink-800)", - "dark": { - "value": "rgb(213, 45, 151)" - }, - "light": { - "value": "rgb(228, 52, 163)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "icon-color-pink-primary-down": { - "prop": "--spectrum-icon-color-pink-primary-down", - "ref": "var(--spectrum-pink-1000)", - "dark": { - "value": "rgb(251, 90, 196)" - }, - "light": { - "value": "rgb(176, 31, 123)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "icon-color-pink-primary-hover": { - "prop": "--spectrum-icon-color-pink-primary-hover", - "ref": "var(--spectrum-pink-900)", - "dark": { - "value": "rgb(236, 67, 175)" - }, - "light": { - "value": "rgb(206, 42, 146)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "icon-color-positive": { - "prop": "--spectrum-icon-color-positive", - "ref": "var(--spectrum-positive-visual-color)", - "light": { - "value": "rgb(7, 147, 85)" - }, - "dark": { - "value": "rgb(6, 136, 80)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "icon-color-primary-default": { - "prop": "--spectrum-icon-color-primary-default", - "ref": "var(--spectrum-neutral-content-color-default)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" - }, - "wireframe": { - "value": "rgb(25, 46, 93)" - } - }, - "icon-color-primary-down": { - "prop": "--spectrum-icon-color-primary-down", - "ref": "var(--spectrum-neutral-content-color-down)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - }, - "wireframe": { - "value": "rgb(10, 19, 39)" - } - }, - "icon-color-primary-hover": { - "prop": "--spectrum-icon-color-primary-hover", - "ref": "var(--spectrum-neutral-content-color-hover)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - }, - "wireframe": { - "value": "rgb(10, 19, 39)" - } - }, - "icon-color-purple-background": { - "prop": "--spectrum-icon-color-purple-background", - "ref": "var(--spectrum-purple-200)", - "light": { - "value": "rgb(244, 235, 252)" - }, - "dark": { - "value": "rgb(50, 0, 96)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "icon-color-purple-primary-default": { - "prop": "--spectrum-icon-color-purple-primary-default", - "ref": "var(--spectrum-purple-900)", - "light": { - "value": "rgb(154, 71, 226)" - }, - "dark": { - "value": "rgb(173, 105, 233)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "icon-color-purple-primary-down": { - "prop": "--spectrum-icon-color-purple-primary-down", - "ref": "var(--spectrum-purple-1100)", - "light": { - "value": "rgb(115, 13, 204)" - }, - "dark": { - "value": "rgb(197, 149, 240)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "icon-color-purple-primary-hover": { - "prop": "--spectrum-icon-color-purple-primary-hover", - "ref": "var(--spectrum-purple-1000)", - "light": { - "value": "rgb(134, 40, 217)" - }, - "dark": { - "value": "rgb(186, 127, 237)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "icon-color-red-background": { - "prop": "--spectrum-icon-color-red-background", - "ref": "var(--spectrum-red-200)", - "light": { - "value": "rgb(255, 235, 232)" - }, - "dark": { - "value": "rgb(68, 13, 5)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "icon-color-red-primary-default": { - "prop": "--spectrum-icon-color-red-primary-default", - "ref": "var(--spectrum-red-900)", - "light": { - "value": "rgb(215, 50, 32)" - }, - "dark": { - "value": "rgb(252, 67, 46)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "icon-color-red-primary-down": { - "prop": "--spectrum-icon-color-red-primary-down", - "ref": "var(--spectrum-red-1100)", - "light": { - "value": "rgb(156, 33, 19)" - }, - "dark": { - "value": "rgb(255, 134, 120)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "icon-color-red-primary-hover": { - "prop": "--spectrum-icon-color-red-primary-hover", - "ref": "var(--spectrum-red-1000)", - "light": { - "value": "rgb(183, 40, 24)" - }, - "dark": { - "value": "rgb(255, 103, 86)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "icon-color-seafoam-background": { - "prop": "--spectrum-icon-color-seafoam-background", - "ref": "var(--spectrum-seafoam-200)", - "light": { - "value": "rgb(211, 246, 234)" - }, - "dark": { - "value": "rgb(0, 39, 35)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "icon-color-seafoam-primary-default": { - "prop": "--spectrum-icon-color-seafoam-primary-default", - "ref": "var(--spectrum-seafoam-800)", - "light": { - "value": "rgb(9, 144, 120)" - }, - "dark": { - "value": "rgb(8, 134, 112)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "icon-color-seafoam-primary-down": { - "prop": "--spectrum-icon-color-seafoam-primary-down", - "ref": "var(--spectrum-seafoam-1000)", - "light": { - "value": "rgb(5, 108, 92)" - }, - "dark": { - "value": "rgb(12, 173, 142)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "icon-color-seafoam-primary-hover": { - "prop": "--spectrum-icon-color-seafoam-primary-hover", - "ref": "var(--spectrum-seafoam-900)", - "light": { - "value": "rgb(7, 129, 109)" - }, - "dark": { - "value": "rgb(10, 154, 128)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "icon-color-silver-background": { - "prop": "--spectrum-icon-color-silver-background", - "ref": "var(--spectrum-silver-200)", - "dark": { - "value": "rgb(33, 33, 33)" - }, - "light": { - "value": "rgb(239, 239, 239)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "icon-color-silver-primary-default": { - "prop": "--spectrum-icon-color-silver-primary-default", - "ref": "var(--spectrum-silver-700)", - "dark": { - "value": "rgb(108, 108, 108)" - }, - "light": { - "value": "rgb(143, 143, 143)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "icon-color-silver-primary-down": { - "prop": "--spectrum-icon-color-silver-primary-down", - "ref": "var(--spectrum-silver-900)", - "dark": { - "value": "rgb(137, 137, 137)" - }, - "light": { - "value": "rgb(114, 114, 114)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "icon-color-silver-primary-hover": { - "prop": "--spectrum-icon-color-silver-primary-hover", - "ref": "var(--spectrum-silver-800)", - "dark": { - "value": "rgb(118, 118, 118)" - }, - "light": { - "value": "rgb(128, 128, 128)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "icon-color-turquoise-background": { - "prop": "--spectrum-icon-color-turquoise-background", - "ref": "var(--spectrum-turquoise-200)", - "dark": { - "value": "rgb(0, 37, 41)" - }, - "light": { - "value": "rgb(209, 245, 245)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "icon-color-turquoise-primary-default": { - "prop": "--spectrum-icon-color-turquoise-primary-default", - "ref": "var(--spectrum-turquoise-700)", - "dark": { - "value": "rgb(7, 120, 131)" - }, - "light": { - "value": "rgb(12, 158, 171)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "icon-color-turquoise-primary-down": { - "prop": "--spectrum-icon-color-turquoise-primary-down", - "ref": "var(--spectrum-turquoise-900)", - "dark": { - "value": "rgb(11, 151, 164)" - }, - "light": { - "value": "rgb(8, 126, 137)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "icon-color-turquoise-primary-hover": { - "prop": "--spectrum-icon-color-turquoise-primary-hover", - "ref": "var(--spectrum-turquoise-800)", - "dark": { - "value": "rgb(9, 131, 142)" - }, - "light": { - "value": "rgb(10, 141, 153)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "icon-color-yellow-background": { - "prop": "--spectrum-icon-color-yellow-background", - "ref": "var(--spectrum-yellow-100)", - "light": { - "value": "rgb(255, 248, 204)" - }, - "dark": { - "value": "rgb(37, 23, 0)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "icon-color-yellow-primary-default": { - "prop": "--spectrum-icon-color-yellow-primary-default", - "ref": "var(--spectrum-yellow-400)", - "light": { - "value": "rgb(245, 199, 0)" - }, - "dark": { - "value": "rgb(83, 52, 0)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "icon-color-yellow-primary-down": { - "prop": "--spectrum-icon-color-yellow-primary-down", - "ref": "var(--spectrum-yellow-600)", - "light": { - "value": "rgb(210, 149, 0)" - }, - "dark": { - "value": "rgb(130, 82, 0)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "icon-color-yellow-primary-hover": { - "prop": "--spectrum-icon-color-yellow-primary-hover", - "ref": "var(--spectrum-yellow-500)", - "light": { - "value": "rgb(230, 175, 0)" - }, - "dark": { - "value": "rgb(107, 67, 0)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "illustrated-message-body-size": { - "prop": "--spectrum-illustrated-message-body-size", - "ref": "var(--spectrum-illustrated-message-large-body-font-size)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "illustrated-message-cjk-title-size": { - "prop": "--spectrum-illustrated-message-cjk-title-size", - "ref": "var(--spectrum-illustrated-message-large-cjk-title-font-size)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "illustrated-message-horizontal-maximum-width": { - "prop": "--spectrum-illustrated-message-horizontal-maximum-width", - "value": "535px" - }, - "illustrated-message-large-body-font-size": { - "prop": "--spectrum-illustrated-message-large-body-font-size", - "ref": "var(--spectrum-body-size-xs)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "illustrated-message-large-cjk-title-font-size": { - "prop": "--spectrum-illustrated-message-large-cjk-title-font-size", - "ref": "var(--spectrum-title-cjk-size-xl)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "illustrated-message-large-title-font-size": { - "prop": "--spectrum-illustrated-message-large-title-font-size", - "ref": "var(--spectrum-title-size-xl)", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "illustrated-message-maximum-width": { - "prop": "--spectrum-illustrated-message-maximum-width", - "ref": "var(--spectrum-illustrated-message-vertical-maximum-width)", - "value": "380px" - }, - "illustrated-message-medium-body-font-size": { - "prop": "--spectrum-illustrated-message-medium-body-font-size", - "ref": "var(--spectrum-body-size-xs)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "illustrated-message-medium-cjk-title-font-size": { - "prop": "--spectrum-illustrated-message-medium-cjk-title-font-size", - "ref": "var(--spectrum-title-cjk-size-l)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "19px" - } - }, - "illustrated-message-medium-title-font-size": { - "prop": "--spectrum-illustrated-message-medium-title-font-size", - "ref": "var(--spectrum-title-size-l)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "illustrated-message-small-body-font-size": { - "prop": "--spectrum-illustrated-message-small-body-font-size", - "ref": "var(--spectrum-body-size-xs)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "illustrated-message-small-cjk-title-font-size": { - "prop": "--spectrum-illustrated-message-small-cjk-title-font-size", - "ref": "var(--spectrum-title-cjk-size-s)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "illustrated-message-small-title-font-size": { - "prop": "--spectrum-illustrated-message-small-title-font-size", - "ref": "var(--spectrum-title-size-s)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "illustrated-message-title-size": { - "prop": "--spectrum-illustrated-message-title-size", - "ref": "var(--spectrum-illustrated-message-large-title-font-size)", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "illustrated-message-vertical-maximum-width": { - "prop": "--spectrum-illustrated-message-vertical-maximum-width", - "value": "380px" - }, - "in-field-button-edge-to-disclosure-icon-stacked-extra-large": { - "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large", - "value": "16px" - }, - "in-field-button-edge-to-disclosure-icon-stacked-large": { - "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large", - "value": "13px" - }, - "in-field-button-edge-to-disclosure-icon-stacked-medium": { - "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium", - "value": "9px" - }, - "in-field-button-edge-to-disclosure-icon-stacked-small": { - "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small", - "value": "7px" - }, - "in-field-button-edge-to-fill": { - "prop": "--spectrum-in-field-button-edge-to-fill", - "value": "0px" - }, - "in-field-button-edge-to-fill-extra-large": { - "prop": "--spectrum-in-field-button-edge-to-fill-extra-large", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "in-field-button-edge-to-fill-large": { - "prop": "--spectrum-in-field-button-edge-to-fill-large", - "value": "8px" - }, - "in-field-button-edge-to-fill-medium": { - "prop": "--spectrum-in-field-button-edge-to-fill-medium", - "value": "6px" - }, - "in-field-button-edge-to-fill-small": { - "prop": "--spectrum-in-field-button-edge-to-fill-small", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "in-field-button-fill-stacked-inner-border-rounding": { - "prop": "--spectrum-in-field-button-fill-stacked-inner-border-rounding", - "value": "0px" - }, - "in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large": { - "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large", - "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large)", - "value": "5px" - }, - "in-field-button-inner-edge-to-disclosure-icon-stacked-large": { - "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large", - "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large)", - "value": "4px" - }, - "in-field-button-inner-edge-to-disclosure-icon-stacked-medium": { - "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium", - "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium)", - "value": "3px" - }, - "in-field-button-inner-edge-to-disclosure-icon-stacked-small": { - "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small", - "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small)", - "value": "3px" - }, - "in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large": { - "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large", - "value": "5px" - }, - "in-field-button-outer-edge-to-disclosure-icon-stacked-large": { - "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large", - "value": "4px" - }, - "in-field-button-outer-edge-to-disclosure-icon-stacked-medium": { - "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium", - "value": "3px" - }, - "in-field-button-outer-edge-to-disclosure-icon-stacked-small": { - "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small", - "value": "3px" - }, - "in-field-button-stacked-inner-edge-to-fill": { - "prop": "--spectrum-in-field-button-stacked-inner-edge-to-fill", - "value": "0px" - }, - "in-field-button-width-stacked-extra-large": { - "prop": "--spectrum-in-field-button-width-stacked-extra-large", - "value": "44px" - }, - "in-field-button-width-stacked-large": { - "prop": "--spectrum-in-field-button-width-stacked-large", - "value": "36px" - }, - "in-field-button-width-stacked-medium": { - "prop": "--spectrum-in-field-button-width-stacked-medium", - "value": "28px" - }, - "in-field-button-width-stacked-small": { - "prop": "--spectrum-in-field-button-width-stacked-small", - "value": "20px" - }, - "in-field-progress-circle-edge-to-fill": { - "prop": "--spectrum-in-field-progress-circle-edge-to-fill", - "desktop": { - "value": "1px" - }, - "mobile": { - "value": "2px" - } - }, - "in-field-progress-circle-size-100": { - "prop": "--spectrum-in-field-progress-circle-size-100", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "in-field-progress-circle-size-200": { - "prop": "--spectrum-in-field-progress-circle-size-200", - "desktop": { - "value": "22px" - }, - "mobile": { - "value": "28px" - } - }, - "in-field-progress-circle-size-300": { - "prop": "--spectrum-in-field-progress-circle-size-300", - "desktop": { - "value": "26px" - }, - "mobile": { - "value": "30px" - } - }, - "in-field-progress-circle-size-75": { - "prop": "--spectrum-in-field-progress-circle-size-75", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "18px" - } - }, - "in-field-stepper-to-end-extra-large": { - "prop": "--spectrum-in-field-stepper-to-end-extra-large", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "in-field-stepper-to-end-large": { - "prop": "--spectrum-in-field-stepper-to-end-large", - "value": "4px" - }, - "in-field-stepper-to-end-medium": { - "prop": "--spectrum-in-field-stepper-to-end-medium", - "value": "3px" - }, - "in-field-stepper-to-end-small": { - "prop": "--spectrum-in-field-stepper-to-end-small", - "desktop": { - "value": "0px" - }, - "mobile": { - "value": "3px" - } - }, - "in-line-alert-minimum-width": { - "prop": "--spectrum-in-line-alert-minimum-width", - "value": "240px" - }, - "indigo-100": { - "prop": "--spectrum-indigo-100", - "light": { - "value": "rgb(247, 248, 255)" - }, - "dark": { - "value": "rgb(30, 0, 93)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "indigo-1000": { - "prop": "--spectrum-indigo-1000", - "light": { - "value": "rgb(99, 56, 238)" - }, - "dark": { - "value": "rgb(139, 141, 254)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "indigo-1100": { - "prop": "--spectrum-indigo-1100", - "light": { - "value": "rgb(84, 36, 219)" - }, - "dark": { - "value": "rgb(153, 161, 255)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "indigo-1200": { - "prop": "--spectrum-indigo-1200", - "light": { - "value": "rgb(69, 19, 191)" - }, - "dark": { - "value": "rgb(176, 186, 255)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "indigo-1300": { - "prop": "--spectrum-indigo-1300", - "light": { - "value": "rgb(55, 6, 160)" - }, - "dark": { - "value": "rgb(199, 208, 255)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "indigo-1400": { - "prop": "--spectrum-indigo-1400", - "light": { - "value": "rgb(42, 0, 129)" - }, - "dark": { - "value": "rgb(223, 228, 255)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "indigo-1500": { - "prop": "--spectrum-indigo-1500", - "dark": { - "value": "rgb(243, 244, 255)" - }, - "light": { - "value": "rgb(31, 0, 98)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "indigo-1600": { - "prop": "--spectrum-indigo-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(17, 0, 54)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "indigo-200": { - "prop": "--spectrum-indigo-200", - "light": { - "value": "rgb(235, 238, 255)" - }, - "dark": { - "value": "rgb(35, 0, 110)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "indigo-300": { - "prop": "--spectrum-indigo-300", - "light": { - "value": "rgb(216, 222, 255)" - }, - "dark": { - "value": "rgb(47, 0, 140)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "indigo-400": { - "prop": "--spectrum-indigo-400", - "light": { - "value": "rgb(192, 201, 255)" - }, - "dark": { - "value": "rgb(62, 12, 174)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "indigo-500": { - "prop": "--spectrum-indigo-500", - "light": { - "value": "rgb(167, 178, 255)" - }, - "dark": { - "value": "rgb(79, 30, 209)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "indigo-600": { - "prop": "--spectrum-indigo-600", - "light": { - "value": "rgb(145, 151, 254)" - }, - "dark": { - "value": "rgb(95, 52, 235)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "indigo-700": { - "prop": "--spectrum-indigo-700", - "light": { - "value": "rgb(132, 128, 254)" - }, - "dark": { - "value": "rgb(109, 75, 248)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "indigo-800": { - "prop": "--spectrum-indigo-800", - "light": { - "value": "rgb(122, 106, 253)" - }, - "dark": { - "value": "rgb(116, 91, 252)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "indigo-900": { - "prop": "--spectrum-indigo-900", - "light": { - "value": "rgb(113, 85, 250)" - }, - "dark": { - "value": "rgb(128, 119, 254)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "indigo-background-color-default": { - "prop": "--spectrum-indigo-background-color-default", - "ref": "var(--spectrum-indigo-900)", - "light": { - "value": "rgb(113, 85, 250)" - }, - "dark": { - "value": "rgb(128, 119, 254)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "indigo-subtle-background-color-default": { - "prop": "--spectrum-indigo-subtle-background-color-default", - "ref": "var(--spectrum-indigo-200)", - "light": { - "value": "rgb(235, 238, 255)" - }, - "dark": { - "value": "rgb(35, 0, 110)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "indigo-visual-color": { - "prop": "--spectrum-indigo-visual-color", - "ref": "var(--spectrum-indigo-800)", - "light": { - "value": "rgb(122, 106, 253)" - }, - "dark": { - "value": "rgb(116, 91, 252)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "informative-background-color-default": { - "prop": "--spectrum-informative-background-color-default", - "ref": "var(--spectrum-informative-color-900)", - "light": { - "value": "rgb(59, 99, 251)" - }, - "dark": { - "value": "rgb(86, 129, 255)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "informative-background-color-down": { - "prop": "--spectrum-informative-background-color-down", - "ref": "var(--spectrum-informative-color-1000)", - "light": { - "value": "rgb(39, 77, 234)" - }, - "dark": { - "value": "rgb(105, 149, 254)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "informative-background-color-hover": { - "prop": "--spectrum-informative-background-color-hover", - "ref": "var(--spectrum-informative-color-1000)", - "light": { - "value": "rgb(39, 77, 234)" - }, - "dark": { - "value": "rgb(105, 149, 254)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "informative-background-color-key-focus": { - "prop": "--spectrum-informative-background-color-key-focus", - "ref": "var(--spectrum-informative-color-1000)", - "light": { - "value": "rgb(39, 77, 234)" - }, - "dark": { - "value": "rgb(105, 149, 254)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "informative-color-100": { - "prop": "--spectrum-informative-color-100", - "ref": "var(--spectrum-blue-100)", - "light": { - "value": "rgb(245, 249, 255)" - }, - "dark": { - "value": "rgb(14, 23, 63)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "informative-color-1000": { - "prop": "--spectrum-informative-color-1000", - "ref": "var(--spectrum-blue-1000)", - "light": { - "value": "rgb(39, 77, 234)" - }, - "dark": { - "value": "rgb(105, 149, 254)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "informative-color-1100": { - "prop": "--spectrum-informative-color-1100", - "ref": "var(--spectrum-blue-1100)", - "light": { - "value": "rgb(29, 62, 207)" - }, - "dark": { - "value": "rgb(124, 169, 252)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "informative-color-1200": { - "prop": "--spectrum-informative-color-1200", - "ref": "var(--spectrum-blue-1200)", - "light": { - "value": "rgb(21, 50, 173)" - }, - "dark": { - "value": "rgb(152, 192, 252)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "informative-color-1300": { - "prop": "--spectrum-informative-color-1300", - "ref": "var(--spectrum-blue-1300)", - "light": { - "value": "rgb(16, 40, 140)" - }, - "dark": { - "value": "rgb(181, 213, 253)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "informative-color-1400": { - "prop": "--spectrum-informative-color-1400", - "ref": "var(--spectrum-blue-1400)", - "light": { - "value": "rgb(12, 31, 105)" - }, - "dark": { - "value": "rgb(213, 231, 254)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "informative-color-1500": { - "prop": "--spectrum-informative-color-1500", - "ref": "var(--spectrum-blue-1500)", - "dark": { - "value": "rgb(238, 245, 255)" - }, - "light": { - "value": "rgb(14, 24, 67)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "informative-color-1600": { - "prop": "--spectrum-informative-color-1600", - "ref": "var(--spectrum-blue-1600)", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(7, 11, 30)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "informative-color-200": { - "prop": "--spectrum-informative-color-200", - "ref": "var(--spectrum-blue-200)", - "light": { - "value": "rgb(229, 240, 254)" - }, - "dark": { - "value": "rgb(15, 28, 82)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "informative-color-300": { - "prop": "--spectrum-informative-color-300", - "ref": "var(--spectrum-blue-300)", - "light": { - "value": "rgb(203, 226, 254)" - }, - "dark": { - "value": "rgb(12, 33, 117)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "informative-color-400": { - "prop": "--spectrum-informative-color-400", - "ref": "var(--spectrum-blue-400)", - "light": { - "value": "rgb(172, 207, 253)" - }, - "dark": { - "value": "rgb(18, 45, 154)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "informative-color-500": { - "prop": "--spectrum-informative-color-500", - "ref": "var(--spectrum-blue-500)", - "light": { - "value": "rgb(142, 185, 252)" - }, - "dark": { - "value": "rgb(26, 58, 195)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "informative-color-600": { - "prop": "--spectrum-informative-color-600", - "ref": "var(--spectrum-blue-600)", - "light": { - "value": "rgb(114, 158, 253)" - }, - "dark": { - "value": "rgb(37, 73, 229)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "informative-color-700": { - "prop": "--spectrum-informative-color-700", - "ref": "var(--spectrum-blue-700)", - "light": { - "value": "rgb(93, 137, 255)" - }, - "dark": { - "value": "rgb(52, 91, 248)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "informative-color-800": { - "prop": "--spectrum-informative-color-800", - "ref": "var(--spectrum-blue-800)", - "light": { - "value": "rgb(75, 117, 255)" - }, - "dark": { - "value": "rgb(64, 105, 253)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "informative-color-900": { - "prop": "--spectrum-informative-color-900", - "ref": "var(--spectrum-blue-900)", - "light": { - "value": "rgb(59, 99, 251)" - }, - "dark": { - "value": "rgb(86, 129, 255)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "informative-subtle-background-color-default": { - "prop": "--spectrum-informative-subtle-background-color-default", - "ref": "var(--spectrum-informative-color-200)", - "light": { - "value": "rgb(229, 240, 254)" - }, - "dark": { - "value": "rgb(15, 28, 82)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "informative-visual-color": { - "prop": "--spectrum-informative-visual-color", - "ref": "var(--spectrum-informative-color-800)", - "light": { - "value": "rgb(75, 117, 255)" - }, - "dark": { - "value": "rgb(64, 105, 253)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "italic-font-style": { - "prop": "--spectrum-italic-font-style", - "value": "italic" - }, - "label-to-description-0": { - "prop": "--spectrum-label-to-description-0", - "value": "0px" - }, - "letter-spacing": { - "prop": "--spectrum-letter-spacing", - "value": "0em" - }, - "light-font-weight": { - "prop": "--spectrum-light-font-weight", - "value": "300" - }, - "line-height-100": { - "prop": "--spectrum-line-height-100", - "value": "1.3" - }, - "line-height-200": { - "prop": "--spectrum-line-height-200", - "value": "1.5" - }, - "line-height-font-size-100": { - "prop": "--spectrum-line-height-font-size-100", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "line-height-font-size-1000": { - "prop": "--spectrum-line-height-font-size-1000", - "desktop": { - "value": "46px" - }, - "mobile": { - "value": "56px" - } - }, - "line-height-font-size-1100": { - "prop": "--spectrum-line-height-font-size-1100", - "desktop": { - "value": "52px" - }, - "mobile": { - "value": "64px" - } - }, - "line-height-font-size-1200": { - "prop": "--spectrum-line-height-font-size-1200", - "desktop": { - "value": "58px" - }, - "mobile": { - "value": "72px" - } - }, - "line-height-font-size-1300": { - "prop": "--spectrum-line-height-font-size-1300", - "desktop": { - "value": "66px" - }, - "mobile": { - "value": "80px" - } - }, - "line-height-font-size-1400": { - "prop": "--spectrum-line-height-font-size-1400", - "desktop": { - "value": "74px" - }, - "mobile": { - "value": "90px" - } - }, - "line-height-font-size-1500": { - "prop": "--spectrum-line-height-font-size-1500", - "desktop": { - "value": "84px" - }, - "mobile": { - "value": "102px" - } - }, - "line-height-font-size-200": { - "prop": "--spectrum-line-height-font-size-200", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "line-height-font-size-25": { - "prop": "--spectrum-line-height-font-size-25", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "14px" - } - }, - "line-height-font-size-300": { - "prop": "--spectrum-line-height-font-size-300", - "desktop": { - "value": "22px" - }, - "mobile": { - "value": "26px" - } - }, - "line-height-font-size-400": { - "prop": "--spectrum-line-height-font-size-400", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "28px" - } - }, - "line-height-font-size-50": { - "prop": "--spectrum-line-height-font-size-50", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "16px" - } - }, - "line-height-font-size-500": { - "prop": "--spectrum-line-height-font-size-500", - "desktop": { - "value": "26px" - }, - "mobile": { - "value": "32px" - } - }, - "line-height-font-size-600": { - "prop": "--spectrum-line-height-font-size-600", - "desktop": { - "value": "30px" - }, - "mobile": { - "value": "36px" - } - }, - "line-height-font-size-700": { - "prop": "--spectrum-line-height-font-size-700", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "40px" - } - }, - "line-height-font-size-75": { - "prop": "--spectrum-line-height-font-size-75", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "line-height-font-size-800": { - "prop": "--spectrum-line-height-font-size-800", - "desktop": { - "value": "36px" - }, - "mobile": { - "value": "44px" - } - }, - "line-height-font-size-900": { - "prop": "--spectrum-line-height-font-size-900", - "desktop": { - "value": "42px" - }, - "mobile": { - "value": "50px" - } - }, - "link-out-icon-size-100": { - "prop": "--spectrum-link-out-icon-size-100", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "14px" - } - }, - "link-out-icon-size-200": { - "prop": "--spectrum-link-out-icon-size-200", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "16px" - } - }, - "link-out-icon-size-300": { - "prop": "--spectrum-link-out-icon-size-300", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "16px" - } - }, - "link-out-icon-size-400": { - "prop": "--spectrum-link-out-icon-size-400", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "18px" - } - }, - "link-out-icon-size-75": { - "prop": "--spectrum-link-out-icon-size-75", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "list-view-end-edge-to-content": { - "prop": "--spectrum-list-view-end-edge-to-content", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "list-view-item-bottom-corner-radius": { - "prop": "--spectrum-list-view-item-bottom-corner-radius", - "ref": "var(--spectrum-corner-radius-medium-default)", - "value": "8px" - }, - "list-view-item-top-corner-radius": { - "prop": "--spectrum-list-view-item-top-corner-radius", - "ref": "var(--spectrum-corner-radius-medium-default)", - "value": "8px" - }, - "list-view-minimum-height": { - "prop": "--spectrum-list-view-minimum-height", - "desktop": { - "value": "40px" - }, - "mobile": { - "value": "50px" - } - }, - "list-view-minimum-width": { - "prop": "--spectrum-list-view-minimum-width", - "desktop": { - "value": "200px" - }, - "mobile": { - "value": "240px" - } - }, - "magenta-100": { - "prop": "--spectrum-magenta-100", - "light": { - "value": "rgb(255, 245, 248)" - }, - "dark": { - "value": "rgb(59, 0, 22)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "magenta-1000": { - "prop": "--spectrum-magenta-1000", - "light": { - "value": "rgb(186, 22, 80)" - }, - "dark": { - "value": "rgb(255, 96, 149)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "magenta-1100": { - "prop": "--spectrum-magenta-1100", - "light": { - "value": "rgb(163, 5, 62)" - }, - "dark": { - "value": "rgb(255, 128, 171)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "magenta-1200": { - "prop": "--spectrum-magenta-1200", - "light": { - "value": "rgb(136, 0, 51)" - }, - "dark": { - "value": "rgb(255, 163, 194)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "magenta-1300": { - "prop": "--spectrum-magenta-1300", - "light": { - "value": "rgb(111, 0, 40)" - }, - "dark": { - "value": "rgb(255, 193, 214)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "magenta-1400": { - "prop": "--spectrum-magenta-1400", - "light": { - "value": "rgb(86, 0, 30)" - }, - "dark": { - "value": "rgb(255, 220, 232)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "magenta-1500": { - "prop": "--spectrum-magenta-1500", - "dark": { - "value": "rgb(255, 241, 246)" - }, - "light": { - "value": "rgb(64, 0, 22)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "magenta-1600": { - "prop": "--spectrum-magenta-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(35, 0, 12)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "magenta-200": { - "prop": "--spectrum-magenta-200", - "light": { - "value": "rgb(255, 232, 240)" - }, - "dark": { - "value": "rgb(74, 0, 27)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "magenta-300": { - "prop": "--spectrum-magenta-300", - "light": { - "value": "rgb(255, 213, 227)" - }, - "dark": { - "value": "rgb(93, 0, 34)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "magenta-400": { - "prop": "--spectrum-magenta-400", - "light": { - "value": "rgb(255, 185, 208)" - }, - "dark": { - "value": "rgb(123, 0, 45)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "magenta-500": { - "prop": "--spectrum-magenta-500", - "light": { - "value": "rgb(255, 152, 187)" - }, - "dark": { - "value": "rgb(152, 7, 60)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "magenta-600": { - "prop": "--spectrum-magenta-600", - "light": { - "value": "rgb(255, 112, 159)" - }, - "dark": { - "value": "rgb(181, 19, 76)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "magenta-700": { - "prop": "--spectrum-magenta-700", - "light": { - "value": "rgb(255, 72, 133)" - }, - "dark": { - "value": "rgb(207, 31, 92)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "magenta-800": { - "prop": "--spectrum-magenta-800", - "light": { - "value": "rgb(240, 45, 110)" - }, - "dark": { - "value": "rgb(224, 38, 101)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "magenta-900": { - "prop": "--spectrum-magenta-900", - "light": { - "value": "rgb(217, 35, 97)" - }, - "dark": { - "value": "rgb(255, 51, 119)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "magenta-background-color-default": { - "prop": "--spectrum-magenta-background-color-default", - "ref": "var(--spectrum-magenta-900)", - "light": { - "value": "rgb(217, 35, 97)" - }, - "dark": { - "value": "rgb(255, 51, 119)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "magenta-subtle-background-color-default": { - "prop": "--spectrum-magenta-subtle-background-color-default", - "ref": "var(--spectrum-magenta-200)", - "light": { - "value": "rgb(255, 232, 240)" - }, - "dark": { - "value": "rgb(74, 0, 27)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "magenta-visual-color": { - "prop": "--spectrum-magenta-visual-color", - "ref": "var(--spectrum-magenta-800)", - "light": { - "value": "rgb(240, 45, 110)" - }, - "dark": { - "value": "rgb(224, 38, 101)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "medium-font-weight": { - "prop": "--spectrum-medium-font-weight", - "value": "500" - }, - "menu-item-background-color-default": { - "prop": "--spectrum-menu-item-background-color-default", - "ref": "var(--spectrum-gray-100)", - "light": { - "value": "rgb(233, 233, 233)" - }, - "dark": { - "value": "rgb(44, 44, 44)" - }, - "wireframe": { - "value": "rgb(228, 234, 249)" - } - }, - "menu-item-background-color-disabled": { - "prop": "--spectrum-menu-item-background-color-disabled", - "ref": "var(--spectrum-gray-100)", - "light": { - "value": "rgb(233, 233, 233)" - }, - "dark": { - "value": "rgb(44, 44, 44)" - }, - "wireframe": { - "value": "rgb(228, 234, 249)" - } - }, - "menu-item-background-color-down": { - "prop": "--spectrum-menu-item-background-color-down", - "ref": "var(--spectrum-gray-100)", - "light": { - "value": "rgb(233, 233, 233)" - }, - "dark": { - "value": "rgb(44, 44, 44)" - }, - "wireframe": { - "value": "rgb(228, 234, 249)" - } - }, - "menu-item-background-color-hover": { - "prop": "--spectrum-menu-item-background-color-hover", - "ref": "var(--spectrum-gray-100)", - "light": { - "value": "rgb(233, 233, 233)" - }, - "dark": { - "value": "rgb(44, 44, 44)" - }, - "wireframe": { - "value": "rgb(228, 234, 249)" - } - }, - "menu-item-background-color-keyboard-focus": { - "prop": "--spectrum-menu-item-background-color-keyboard-focus", - "ref": "var(--spectrum-gray-100)", - "light": { - "value": "rgb(233, 233, 233)" - }, - "dark": { - "value": "rgb(44, 44, 44)" - }, - "wireframe": { - "value": "rgb(228, 234, 249)" - } - }, - "menu-item-background-opacity": { - "prop": "--spectrum-menu-item-background-opacity", - "value": "0" - }, - "menu-item-edge-to-content-not-selected-extra-large": { - "prop": "--spectrum-menu-item-edge-to-content-not-selected-extra-large", - "desktop": { - "value": "45px" - }, - "mobile": { - "value": "54px" - } - }, - "menu-item-edge-to-content-not-selected-large": { - "prop": "--spectrum-menu-item-edge-to-content-not-selected-large", - "desktop": { - "value": "38px" - }, - "mobile": { - "value": "47px" - } - }, - "menu-item-edge-to-content-not-selected-medium": { - "prop": "--spectrum-menu-item-edge-to-content-not-selected-medium", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "42px" - } - }, - "menu-item-edge-to-content-not-selected-small": { - "prop": "--spectrum-menu-item-edge-to-content-not-selected-small", - "desktop": { - "value": "28px" - }, - "mobile": { - "value": "24px" - } - }, - "menu-item-label-to-description": { - "prop": "--spectrum-menu-item-label-to-description", - "ref": "var(--spectrum-menu-item-label-to-description-medium)", - "value": "1px" - }, - "menu-item-label-to-description-extra-large": { - "prop": "--spectrum-menu-item-label-to-description-extra-large", - "value": "2px" - }, - "menu-item-label-to-description-large": { - "prop": "--spectrum-menu-item-label-to-description-large", - "value": "2px" - }, - "menu-item-label-to-description-medium": { - "prop": "--spectrum-menu-item-label-to-description-medium", - "value": "1px" - }, - "menu-item-label-to-description-small": { - "prop": "--spectrum-menu-item-label-to-description-small", - "value": "1px" - }, - "menu-item-section-divider-height": { - "prop": "--spectrum-menu-item-section-divider-height", - "value": "12px" - }, - "menu-item-top-to-disclosure-icon-extra-large": { - "prop": "--spectrum-menu-item-top-to-disclosure-icon-extra-large", - "desktop": { - "value": "17px" - }, - "mobile": { - "value": "22px" - } - }, - "menu-item-top-to-disclosure-icon-large": { - "prop": "--spectrum-menu-item-top-to-disclosure-icon-large", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "menu-item-top-to-disclosure-icon-medium": { - "prop": "--spectrum-menu-item-top-to-disclosure-icon-medium", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "13px" - } - }, - "menu-item-top-to-disclosure-icon-small": { - "prop": "--spectrum-menu-item-top-to-disclosure-icon-small", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "menu-item-top-to-selected-icon-extra-large": { - "prop": "--spectrum-menu-item-top-to-selected-icon-extra-large", - "desktop": { - "value": "17px" - }, - "mobile": { - "value": "22px" - } - }, - "menu-item-top-to-selected-icon-large": { - "prop": "--spectrum-menu-item-top-to-selected-icon-large", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "menu-item-top-to-selected-icon-medium": { - "prop": "--spectrum-menu-item-top-to-selected-icon-medium", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "13px" - } - }, - "menu-item-top-to-selected-icon-small": { - "prop": "--spectrum-menu-item-top-to-selected-icon-small", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "menu-item-top-to-thumbnail-extra-large": { - "prop": "--spectrum-menu-item-top-to-thumbnail-extra-large", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "13px" - } - }, - "menu-item-top-to-thumbnail-large": { - "prop": "--spectrum-menu-item-top-to-thumbnail-large", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "menu-item-top-to-thumbnail-medium": { - "prop": "--spectrum-menu-item-top-to-thumbnail-medium", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "menu-item-top-to-thumbnail-small": { - "prop": "--spectrum-menu-item-top-to-thumbnail-small", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "menu-section-header-to-description-extra-large": { - "prop": "--spectrum-menu-section-header-to-description-extra-large", - "value": "2px" - }, - "menu-section-header-to-description-large": { - "prop": "--spectrum-menu-section-header-to-description-large", - "value": "2px" - }, - "menu-section-header-to-description-medium": { - "prop": "--spectrum-menu-section-header-to-description-medium", - "value": "1px" - }, - "menu-section-header-to-description-small": { - "prop": "--spectrum-menu-section-header-to-description-small", - "value": "1px" - }, - "meter-default-width": { - "prop": "--spectrum-meter-default-width", - "ref": "var(--spectrum-meter-width)", - "desktop": { - "value": "192px" - }, - "mobile": { - "value": "240px" - } - }, - "meter-maximum-width": { - "prop": "--spectrum-meter-maximum-width", - "value": "768px" - }, - "meter-minimum-width": { - "prop": "--spectrum-meter-minimum-width", - "value": "48px" - }, - "meter-thickness-extra-large": { - "prop": "--spectrum-meter-thickness-extra-large", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "13px" - } - }, - "meter-thickness-large": { - "prop": "--spectrum-meter-thickness-large", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "meter-thickness-medium": { - "prop": "--spectrum-meter-thickness-medium", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "meter-thickness-small": { - "prop": "--spectrum-meter-thickness-small", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "meter-width": { - "prop": "--spectrum-meter-width", - "desktop": { - "value": "192px" - }, - "mobile": { - "value": "240px" - } - }, - "navigational-indicator-top-to-back-icon-extra-large": { - "prop": "--spectrum-navigational-indicator-top-to-back-icon-extra-large", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "19px" - } - }, - "navigational-indicator-top-to-back-icon-large": { - "prop": "--spectrum-navigational-indicator-top-to-back-icon-large", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "16px" - } - }, - "navigational-indicator-top-to-back-icon-medium": { - "prop": "--spectrum-navigational-indicator-top-to-back-icon-medium", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "12px" - } - }, - "navigational-indicator-top-to-back-icon-small": { - "prop": "--spectrum-navigational-indicator-top-to-back-icon-small", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "7px" - } - }, - "negative-background-color-default": { - "prop": "--spectrum-negative-background-color-default", - "ref": "var(--spectrum-negative-color-900)", - "light": { - "value": "rgb(215, 50, 32)" - }, - "dark": { - "value": "rgb(252, 67, 46)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "negative-background-color-down": { - "prop": "--spectrum-negative-background-color-down", - "ref": "var(--spectrum-negative-color-1000)", - "light": { - "value": "rgb(183, 40, 24)" - }, - "dark": { - "value": "rgb(255, 103, 86)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "negative-background-color-hover": { - "prop": "--spectrum-negative-background-color-hover", - "ref": "var(--spectrum-negative-color-1000)", - "light": { - "value": "rgb(183, 40, 24)" - }, - "dark": { - "value": "rgb(255, 103, 86)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "negative-background-color-key-focus": { - "prop": "--spectrum-negative-background-color-key-focus", - "ref": "var(--spectrum-negative-color-1000)", - "light": { - "value": "rgb(183, 40, 24)" - }, - "dark": { - "value": "rgb(255, 103, 86)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "negative-border-color-default": { - "prop": "--spectrum-negative-border-color-default", - "ref": "var(--spectrum-negative-color-900)", - "light": { - "value": "rgb(215, 50, 32)" - }, - "dark": { - "value": "rgb(252, 67, 46)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "negative-border-color-down": { - "prop": "--spectrum-negative-border-color-down", - "ref": "var(--spectrum-negative-color-1100)", - "light": { - "value": "rgb(156, 33, 19)" - }, - "dark": { - "value": "rgb(255, 134, 120)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "negative-border-color-focus": { - "prop": "--spectrum-negative-border-color-focus", - "ref": "var(--spectrum-negative-color-1000)", - "light": { - "value": "rgb(183, 40, 24)" - }, - "dark": { - "value": "rgb(255, 103, 86)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "negative-border-color-focus-hover": { - "prop": "--spectrum-negative-border-color-focus-hover", - "ref": "var(--spectrum-negative-border-color-down)", - "light": { - "value": "rgb(156, 33, 19)" - }, - "dark": { - "value": "rgb(255, 134, 120)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "negative-border-color-hover": { - "prop": "--spectrum-negative-border-color-hover", - "ref": "var(--spectrum-negative-color-1000)", - "light": { - "value": "rgb(183, 40, 24)" - }, - "dark": { - "value": "rgb(255, 103, 86)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "negative-border-color-key-focus": { - "prop": "--spectrum-negative-border-color-key-focus", - "ref": "var(--spectrum-negative-color-1000)", - "light": { - "value": "rgb(183, 40, 24)" - }, - "dark": { - "value": "rgb(255, 103, 86)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "negative-color-100": { - "prop": "--spectrum-negative-color-100", - "ref": "var(--spectrum-red-100)", - "light": { - "value": "rgb(255, 246, 245)" - }, - "dark": { - "value": "rgb(54, 10, 3)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "negative-color-1000": { - "prop": "--spectrum-negative-color-1000", - "ref": "var(--spectrum-red-1000)", - "light": { - "value": "rgb(183, 40, 24)" - }, - "dark": { - "value": "rgb(255, 103, 86)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "negative-color-1100": { - "prop": "--spectrum-negative-color-1100", - "ref": "var(--spectrum-red-1100)", - "light": { - "value": "rgb(156, 33, 19)" - }, - "dark": { - "value": "rgb(255, 134, 120)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "negative-color-1200": { - "prop": "--spectrum-negative-color-1200", - "ref": "var(--spectrum-red-1200)", - "light": { - "value": "rgb(129, 27, 14)" - }, - "dark": { - "value": "rgb(255, 167, 157)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "negative-color-1300": { - "prop": "--spectrum-negative-color-1300", - "ref": "var(--spectrum-red-1300)", - "light": { - "value": "rgb(104, 21, 10)" - }, - "dark": { - "value": "rgb(255, 196, 189)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "negative-color-1400": { - "prop": "--spectrum-negative-color-1400", - "ref": "var(--spectrum-red-1400)", - "light": { - "value": "rgb(80, 16, 6)" - }, - "dark": { - "value": "rgb(255, 222, 219)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "negative-color-1500": { - "prop": "--spectrum-negative-color-1500", - "ref": "var(--spectrum-red-1500)", - "dark": { - "value": "rgb(255, 242, 240)" - }, - "light": { - "value": "rgb(59, 11, 4)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "negative-color-1600": { - "prop": "--spectrum-negative-color-1600", - "ref": "var(--spectrum-red-1600)", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(29, 5, 2)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "negative-color-200": { - "prop": "--spectrum-negative-color-200", - "ref": "var(--spectrum-red-200)", - "light": { - "value": "rgb(255, 235, 232)" - }, - "dark": { - "value": "rgb(68, 13, 5)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "negative-color-300": { - "prop": "--spectrum-negative-color-300", - "ref": "var(--spectrum-red-300)", - "light": { - "value": "rgb(255, 214, 209)" - }, - "dark": { - "value": "rgb(87, 17, 7)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "negative-color-400": { - "prop": "--spectrum-negative-color-400", - "ref": "var(--spectrum-red-400)", - "light": { - "value": "rgb(255, 188, 180)" - }, - "dark": { - "value": "rgb(115, 24, 11)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "negative-color-500": { - "prop": "--spectrum-negative-color-500", - "ref": "var(--spectrum-red-500)", - "light": { - "value": "rgb(255, 157, 145)" - }, - "dark": { - "value": "rgb(147, 31, 17)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "negative-color-600": { - "prop": "--spectrum-negative-color-600", - "ref": "var(--spectrum-red-600)", - "light": { - "value": "rgb(255, 118, 101)" - }, - "dark": { - "value": "rgb(177, 38, 23)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "negative-color-700": { - "prop": "--spectrum-negative-color-700", - "ref": "var(--spectrum-red-700)", - "light": { - "value": "rgb(255, 81, 61)" - }, - "dark": { - "value": "rgb(205, 46, 29)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "negative-color-800": { - "prop": "--spectrum-negative-color-800", - "ref": "var(--spectrum-red-800)", - "light": { - "value": "rgb(240, 56, 35)" - }, - "dark": { - "value": "rgb(223, 52, 34)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "negative-color-900": { - "prop": "--spectrum-negative-color-900", - "ref": "var(--spectrum-red-900)", - "light": { - "value": "rgb(215, 50, 32)" - }, - "dark": { - "value": "rgb(252, 67, 46)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "negative-content-color-default": { - "prop": "--spectrum-negative-content-color-default", - "ref": "var(--spectrum-negative-color-900)", - "light": { - "value": "rgb(215, 50, 32)" - }, - "dark": { - "value": "rgb(252, 67, 46)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "negative-content-color-down": { - "prop": "--spectrum-negative-content-color-down", - "ref": "var(--spectrum-negative-color-1000)", - "light": { - "value": "rgb(183, 40, 24)" - }, - "dark": { - "value": "rgb(255, 103, 86)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "negative-content-color-hover": { - "prop": "--spectrum-negative-content-color-hover", - "ref": "var(--spectrum-negative-color-1000)", - "light": { - "value": "rgb(183, 40, 24)" - }, - "dark": { - "value": "rgb(255, 103, 86)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "negative-content-color-key-focus": { - "prop": "--spectrum-negative-content-color-key-focus", - "ref": "var(--spectrum-negative-color-1000)", - "light": { - "value": "rgb(183, 40, 24)" - }, - "dark": { - "value": "rgb(255, 103, 86)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "negative-subdued-background-color-default": { - "prop": "--spectrum-negative-subdued-background-color-default", - "ref": "var(--spectrum-negative-subtle-background-color-default)", - "light": { - "value": "rgb(255, 235, 232)" - }, - "dark": { - "value": "rgb(68, 13, 5)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "negative-subdued-background-color-down": { - "prop": "--spectrum-negative-subdued-background-color-down", - "ref": "var(--spectrum-negative-color-300)", - "light": { - "value": "rgb(255, 214, 209)" - }, - "dark": { - "value": "rgb(87, 17, 7)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "negative-subdued-background-color-hover": { - "prop": "--spectrum-negative-subdued-background-color-hover", - "ref": "var(--spectrum-negative-color-300)", - "light": { - "value": "rgb(255, 214, 209)" - }, - "dark": { - "value": "rgb(87, 17, 7)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "negative-subdued-background-color-key-focus": { - "prop": "--spectrum-negative-subdued-background-color-key-focus", - "ref": "var(--spectrum-negative-color-300)", - "light": { - "value": "rgb(255, 214, 209)" - }, - "dark": { - "value": "rgb(87, 17, 7)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "negative-subtle-background-color-default": { - "prop": "--spectrum-negative-subtle-background-color-default", - "ref": "var(--spectrum-negative-color-200)", - "light": { - "value": "rgb(255, 235, 232)" - }, - "dark": { - "value": "rgb(68, 13, 5)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "negative-visual-color": { - "prop": "--spectrum-negative-visual-color", - "ref": "var(--spectrum-negative-color-800)", - "light": { - "value": "rgb(240, 56, 35)" - }, - "dark": { - "value": "rgb(223, 52, 34)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "neutral-background-color-default": { - "prop": "--spectrum-neutral-background-color-default", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" - }, - "wireframe": { - "value": "rgb(25, 46, 93)" - } - }, - "neutral-background-color-down": { - "prop": "--spectrum-neutral-background-color-down", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - }, - "wireframe": { - "value": "rgb(10, 19, 39)" - } - }, - "neutral-background-color-hover": { - "prop": "--spectrum-neutral-background-color-hover", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - }, - "wireframe": { - "value": "rgb(10, 19, 39)" - } - }, - "neutral-background-color-key-focus": { - "prop": "--spectrum-neutral-background-color-key-focus", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - }, - "wireframe": { - "value": "rgb(10, 19, 39)" - } - }, - "neutral-background-color-selected-default": { - "prop": "--spectrum-neutral-background-color-selected-default", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" - }, - "wireframe": { - "value": "rgb(25, 46, 93)" - } - }, - "neutral-background-color-selected-down": { - "prop": "--spectrum-neutral-background-color-selected-down", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - }, - "wireframe": { - "value": "rgb(10, 19, 39)" - } - }, - "neutral-background-color-selected-hover": { - "prop": "--spectrum-neutral-background-color-selected-hover", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - }, - "wireframe": { - "value": "rgb(10, 19, 39)" - } - }, - "neutral-background-color-selected-key-focus": { - "prop": "--spectrum-neutral-background-color-selected-key-focus", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - }, - "wireframe": { - "value": "rgb(10, 19, 39)" - } - }, - "neutral-content-color-default": { - "prop": "--spectrum-neutral-content-color-default", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" - }, - "wireframe": { - "value": "rgb(25, 46, 93)" - } - }, - "neutral-content-color-down": { - "prop": "--spectrum-neutral-content-color-down", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - }, - "wireframe": { - "value": "rgb(10, 19, 39)" - } - }, - "neutral-content-color-focus": { - "prop": "--spectrum-neutral-content-color-focus", - "ref": "var(--spectrum-neutral-content-color-down)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - }, - "wireframe": { - "value": "rgb(10, 19, 39)" - } - }, - "neutral-content-color-focus-hover": { - "prop": "--spectrum-neutral-content-color-focus-hover", - "ref": "var(--spectrum-neutral-content-color-down)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - }, - "wireframe": { - "value": "rgb(10, 19, 39)" - } - }, - "neutral-content-color-hover": { - "prop": "--spectrum-neutral-content-color-hover", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - }, - "wireframe": { - "value": "rgb(10, 19, 39)" - } - }, - "neutral-content-color-key-focus": { - "prop": "--spectrum-neutral-content-color-key-focus", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - }, - "wireframe": { - "value": "rgb(10, 19, 39)" - } - }, - "neutral-subdued-background-color-default": { - "prop": "--spectrum-neutral-subdued-background-color-default", - "ref": "var(--spectrum-gray-700)", - "light": { - "value": "rgb(80, 80, 80)" - }, - "dark": { - "value": "rgb(175, 175, 175)" - }, - "wireframe": { - "value": "rgb(44, 77, 149)" - } - }, - "neutral-subdued-background-color-down": { - "prop": "--spectrum-neutral-subdued-background-color-down", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" - }, - "wireframe": { - "value": "rgb(25, 46, 93)" - } - }, - "neutral-subdued-background-color-hover": { - "prop": "--spectrum-neutral-subdued-background-color-hover", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" - }, - "wireframe": { - "value": "rgb(25, 46, 93)" - } - }, - "neutral-subdued-background-color-key-focus": { - "prop": "--spectrum-neutral-subdued-background-color-key-focus", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" - }, - "wireframe": { - "value": "rgb(25, 46, 93)" - } - }, - "neutral-subdued-content-color-default": { - "prop": "--spectrum-neutral-subdued-content-color-default", - "ref": "var(--spectrum-gray-700)", - "light": { - "value": "rgb(80, 80, 80)" - }, - "dark": { - "value": "rgb(175, 175, 175)" - }, - "wireframe": { - "value": "rgb(44, 77, 149)" - } - }, - "neutral-subdued-content-color-down": { - "prop": "--spectrum-neutral-subdued-content-color-down", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" - }, - "wireframe": { - "value": "rgb(25, 46, 93)" - } - }, - "neutral-subdued-content-color-hover": { - "prop": "--spectrum-neutral-subdued-content-color-hover", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" - }, - "wireframe": { - "value": "rgb(25, 46, 93)" - } - }, - "neutral-subdued-content-color-key-focus": { - "prop": "--spectrum-neutral-subdued-content-color-key-focus", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" - }, - "wireframe": { - "value": "rgb(25, 46, 93)" - } - }, - "neutral-subdued-content-color-selected": { - "prop": "--spectrum-neutral-subdued-content-color-selected", - "ref": "var(--spectrum-neutral-subdued-content-color-down)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" - }, - "wireframe": { - "value": "rgb(25, 46, 93)" - } - }, - "neutral-subtle-background-color-default": { - "prop": "--spectrum-neutral-subtle-background-color-default", - "ref": "var(--spectrum-gray-100)", - "light": { - "value": "rgb(233, 233, 233)" - }, - "dark": { - "value": "rgb(44, 44, 44)" - }, - "wireframe": { - "value": "rgb(228, 234, 249)" - } - }, - "neutral-visual-color": { - "prop": "--spectrum-neutral-visual-color", - "ref": "var(--spectrum-gray-500)", - "light": { - "value": "rgb(143, 143, 143)" - }, - "dark": { - "value": "rgb(109, 109, 109)" - }, - "wireframe": { - "value": "rgb(108, 142, 217)" - } - }, - "notice-background-color-default": { - "prop": "--spectrum-notice-background-color-default", - "ref": "var(--spectrum-notice-color-600)", - "light": { - "value": "rgb(252, 125, 0)" - }, - "dark": { - "value": "rgb(162, 59, 0)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "notice-color-100": { - "prop": "--spectrum-notice-color-100", - "ref": "var(--spectrum-orange-100)", - "light": { - "value": "rgb(255, 246, 231)" - }, - "dark": { - "value": "rgb(49, 16, 0)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "notice-color-1000": { - "prop": "--spectrum-notice-color-1000", - "ref": "var(--spectrum-orange-1000)", - "light": { - "value": "rgb(167, 62, 0)" - }, - "dark": { - "value": "rgb(243, 117, 0)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "notice-color-1100": { - "prop": "--spectrum-notice-color-1100", - "ref": "var(--spectrum-orange-1100)", - "light": { - "value": "rgb(144, 51, 0)" - }, - "dark": { - "value": "rgb(255, 137, 0)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "notice-color-1200": { - "prop": "--spectrum-notice-color-1200", - "ref": "var(--spectrum-orange-1200)", - "light": { - "value": "rgb(118, 41, 0)" - }, - "dark": { - "value": "rgb(255, 173, 45)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "notice-color-1300": { - "prop": "--spectrum-notice-color-1300", - "ref": "var(--spectrum-orange-1300)", - "light": { - "value": "rgb(95, 32, 0)" - }, - "dark": { - "value": "rgb(255, 201, 116)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "notice-color-1400": { - "prop": "--spectrum-notice-color-1400", - "ref": "var(--spectrum-orange-1400)", - "light": { - "value": "rgb(73, 24, 0)" - }, - "dark": { - "value": "rgb(255, 225, 178)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "notice-color-1500": { - "prop": "--spectrum-notice-color-1500", - "ref": "var(--spectrum-orange-1500)", - "dark": { - "value": "rgb(255, 243, 225)" - }, - "light": { - "value": "rgb(52, 18, 0)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "notice-color-1600": { - "prop": "--spectrum-notice-color-1600", - "ref": "var(--spectrum-orange-1600)", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(25, 8, 0)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "notice-color-200": { - "prop": "--spectrum-notice-color-200", - "ref": "var(--spectrum-orange-200)", - "light": { - "value": "rgb(255, 236, 207)" - }, - "dark": { - "value": "rgb(61, 21, 0)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "notice-color-300": { - "prop": "--spectrum-notice-color-300", - "ref": "var(--spectrum-orange-300)", - "light": { - "value": "rgb(255, 218, 158)" - }, - "dark": { - "value": "rgb(80, 27, 0)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "notice-color-400": { - "prop": "--spectrum-notice-color-400", - "ref": "var(--spectrum-orange-400)", - "light": { - "value": "rgb(255, 193, 94)" - }, - "dark": { - "value": "rgb(106, 36, 0)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "notice-color-500": { - "prop": "--spectrum-notice-color-500", - "ref": "var(--spectrum-orange-500)", - "light": { - "value": "rgb(255, 162, 19)" - }, - "dark": { - "value": "rgb(135, 47, 0)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "notice-color-600": { - "prop": "--spectrum-notice-color-600", - "ref": "var(--spectrum-orange-600)", - "light": { - "value": "rgb(252, 125, 0)" - }, - "dark": { - "value": "rgb(162, 59, 0)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "notice-color-700": { - "prop": "--spectrum-notice-color-700", - "ref": "var(--spectrum-orange-700)", - "light": { - "value": "rgb(232, 106, 0)" - }, - "dark": { - "value": "rgb(185, 73, 0)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "notice-color-800": { - "prop": "--spectrum-notice-color-800", - "ref": "var(--spectrum-orange-800)", - "light": { - "value": "rgb(212, 91, 0)" - }, - "dark": { - "value": "rgb(199, 82, 0)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "notice-color-900": { - "prop": "--spectrum-notice-color-900", - "ref": "var(--spectrum-orange-900)", - "light": { - "value": "rgb(194, 78, 0)" - }, - "dark": { - "value": "rgb(224, 100, 0)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "notice-subtle-background-color-default": { - "prop": "--spectrum-notice-subtle-background-color-default", - "ref": "var(--spectrum-notice-color-200)", - "light": { - "value": "rgb(255, 236, 207)" - }, - "dark": { - "value": "rgb(61, 21, 0)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "notice-visual-color": { - "prop": "--spectrum-notice-visual-color", - "ref": "var(--spectrum-notice-color-800)", - "light": { - "value": "rgb(212, 91, 0)" - }, - "dark": { - "value": "rgb(199, 82, 0)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "number-field-minimum-width-multiplier": { - "prop": "--spectrum-number-field-minimum-width-multiplier", - "value": "1.25" - }, - "number-field-visual-to-in-field-stepper-extra-large": { - "prop": "--spectrum-number-field-visual-to-in-field-stepper-extra-large", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "number-field-visual-to-in-field-stepper-large": { - "prop": "--spectrum-number-field-visual-to-in-field-stepper-large", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "number-field-visual-to-in-field-stepper-medium": { - "prop": "--spectrum-number-field-visual-to-in-field-stepper-medium", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "number-field-visual-to-in-field-stepper-small": { - "prop": "--spectrum-number-field-visual-to-in-field-stepper-small", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "7px" - } - }, - "number-field-with-stepper-minimum-width-extra-large": { - "prop": "--spectrum-number-field-with-stepper-minimum-width-extra-large", - "desktop": { - "value": "168px" - }, - "mobile": { - "value": "198px" - } - }, - "number-field-with-stepper-minimum-width-large": { - "prop": "--spectrum-number-field-with-stepper-minimum-width-large", - "desktop": { - "value": "144px" - }, - "mobile": { - "value": "174px" - } - }, - "number-field-with-stepper-minimum-width-medium": { - "prop": "--spectrum-number-field-with-stepper-minimum-width-medium", - "desktop": { - "value": "120px" - }, - "mobile": { - "value": "150px" - } - }, - "number-field-with-stepper-minimum-width-small": { - "prop": "--spectrum-number-field-with-stepper-minimum-width-small", - "desktop": { - "value": "104px" - }, - "mobile": { - "value": "126px" - } - }, - "opacity-checkerboard-square-dark": { - "prop": "--spectrum-opacity-checkerboard-square-dark", - "ref": "var(--spectrum-gray-200)", - "light": { - "value": "rgb(225, 225, 225)" - }, - "dark": { - "value": "rgb(50, 50, 50)" - }, - "wireframe": { - "value": "rgb(214, 224, 246)" - } - }, - "opacity-checkerboard-square-light": { - "prop": "--spectrum-opacity-checkerboard-square-light", - "ref": "var(--spectrum-white)", - "value": "rgb(255, 255, 255)" - }, - "opacity-checkerboard-square-size": { - "prop": "--spectrum-opacity-checkerboard-square-size", - "ref": "var(--spectrum-opacity-checkerboard-square-size-medium)", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "opacity-checkerboard-square-size-medium": { - "prop": "--spectrum-opacity-checkerboard-square-size-medium", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "opacity-checkerboard-square-size-small": { - "prop": "--spectrum-opacity-checkerboard-square-size-small", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "opacity-disabled": { - "prop": "--spectrum-opacity-disabled", - "value": "0.3" - }, - "orange-100": { - "prop": "--spectrum-orange-100", - "light": { - "value": "rgb(255, 246, 231)" - }, - "dark": { - "value": "rgb(49, 16, 0)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "orange-1000": { - "prop": "--spectrum-orange-1000", - "light": { - "value": "rgb(167, 62, 0)" - }, - "dark": { - "value": "rgb(243, 117, 0)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "orange-1100": { - "prop": "--spectrum-orange-1100", - "light": { - "value": "rgb(144, 51, 0)" - }, - "dark": { - "value": "rgb(255, 137, 0)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "orange-1200": { - "prop": "--spectrum-orange-1200", - "light": { - "value": "rgb(118, 41, 0)" - }, - "dark": { - "value": "rgb(255, 173, 45)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "orange-1300": { - "prop": "--spectrum-orange-1300", - "light": { - "value": "rgb(95, 32, 0)" - }, - "dark": { - "value": "rgb(255, 201, 116)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "orange-1400": { - "prop": "--spectrum-orange-1400", - "light": { - "value": "rgb(73, 24, 0)" - }, - "dark": { - "value": "rgb(255, 225, 178)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "orange-1500": { - "prop": "--spectrum-orange-1500", - "dark": { - "value": "rgb(255, 243, 225)" - }, - "light": { - "value": "rgb(52, 18, 0)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "orange-1600": { - "prop": "--spectrum-orange-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(25, 8, 0)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "orange-200": { - "prop": "--spectrum-orange-200", - "light": { - "value": "rgb(255, 236, 207)" - }, - "dark": { - "value": "rgb(61, 21, 0)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "orange-300": { - "prop": "--spectrum-orange-300", - "light": { - "value": "rgb(255, 218, 158)" - }, - "dark": { - "value": "rgb(80, 27, 0)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "orange-400": { - "prop": "--spectrum-orange-400", - "light": { - "value": "rgb(255, 193, 94)" - }, - "dark": { - "value": "rgb(106, 36, 0)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "orange-500": { - "prop": "--spectrum-orange-500", - "light": { - "value": "rgb(255, 162, 19)" - }, - "dark": { - "value": "rgb(135, 47, 0)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "orange-600": { - "prop": "--spectrum-orange-600", - "light": { - "value": "rgb(252, 125, 0)" - }, - "dark": { - "value": "rgb(162, 59, 0)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "orange-700": { - "prop": "--spectrum-orange-700", - "light": { - "value": "rgb(232, 106, 0)" - }, - "dark": { - "value": "rgb(185, 73, 0)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "orange-800": { - "prop": "--spectrum-orange-800", - "light": { - "value": "rgb(212, 91, 0)" - }, - "dark": { - "value": "rgb(199, 82, 0)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "orange-900": { - "prop": "--spectrum-orange-900", - "light": { - "value": "rgb(194, 78, 0)" - }, - "dark": { - "value": "rgb(224, 100, 0)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "orange-background-color-default": { - "prop": "--spectrum-orange-background-color-default", - "ref": "var(--spectrum-orange-600)", - "light": { - "value": "rgb(252, 125, 0)" - }, - "dark": { - "value": "rgb(162, 59, 0)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "orange-subtle-background-color-default": { - "prop": "--spectrum-orange-subtle-background-color-default", - "ref": "var(--spectrum-orange-200)", - "light": { - "value": "rgb(255, 236, 207)" - }, - "dark": { - "value": "rgb(61, 21, 0)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "orange-visual-color": { - "prop": "--spectrum-orange-visual-color", - "ref": "var(--spectrum-orange-700)", - "light": { - "value": "rgb(232, 106, 0)" - }, - "dark": { - "value": "rgb(185, 73, 0)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "overlay-color": { - "prop": "--spectrum-overlay-color", - "ref": "var(--spectrum-black)", - "value": "rgb(0, 0, 0)" - }, - "overlay-opacity": { - "prop": "--spectrum-overlay-opacity", - "light": { - "value": "0.4" - }, - "dark": { - "value": "0.6" - }, - "wireframe": { - "value": "0.4" - } - }, - "picker-border-width": { - "prop": "--spectrum-picker-border-width", - "ref": "var(--spectrum-border-width-100)", - "value": "1px" - }, - "picker-end-edge-to-disclosure-icon-quiet": { - "prop": "--spectrum-picker-end-edge-to-disclosure-icon-quiet", - "value": "0px" - }, - "picker-end-edge-to-disclousure-icon-quiet": { - "prop": "--spectrum-picker-end-edge-to-disclousure-icon-quiet", - "ref": "var(--spectrum-picker-end-edge-to-disclosure-icon-quiet)", - "value": "0px" - }, - "picker-minimum-width-multiplier": { - "prop": "--spectrum-picker-minimum-width-multiplier", - "value": "2" - }, - "picker-visual-to-disclosure-icon-extra-large": { - "prop": "--spectrum-picker-visual-to-disclosure-icon-extra-large", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "13px" - } - }, - "picker-visual-to-disclosure-icon-large": { - "prop": "--spectrum-picker-visual-to-disclosure-icon-large", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "picker-visual-to-disclosure-icon-medium": { - "prop": "--spectrum-picker-visual-to-disclosure-icon-medium", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "picker-visual-to-disclosure-icon-small": { - "prop": "--spectrum-picker-visual-to-disclosure-icon-small", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "pink-100": { - "prop": "--spectrum-pink-100", - "dark": { - "value": "rgb(58, 0, 37)" - }, - "light": { - "value": "rgb(255, 246, 252)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "pink-1000": { - "prop": "--spectrum-pink-1000", - "dark": { - "value": "rgb(251, 90, 196)" - }, - "light": { - "value": "rgb(176, 31, 123)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "pink-1100": { - "prop": "--spectrum-pink-1100", - "dark": { - "value": "rgb(255, 122, 210)" - }, - "light": { - "value": "rgb(152, 22, 104)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "pink-1200": { - "prop": "--spectrum-pink-1200", - "dark": { - "value": "rgb(255, 159, 223)" - }, - "light": { - "value": "rgb(128, 12, 85)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "pink-1300": { - "prop": "--spectrum-pink-1300", - "dark": { - "value": "rgb(255, 191, 234)" - }, - "light": { - "value": "rgb(105, 3, 68)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "pink-1400": { - "prop": "--spectrum-pink-1400", - "dark": { - "value": "rgb(255, 219, 243)" - }, - "light": { - "value": "rgb(83, 0, 53)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "pink-1500": { - "prop": "--spectrum-pink-1500", - "dark": { - "value": "rgb(255, 241, 250)" - }, - "light": { - "value": "rgb(62, 0, 39)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "pink-1600": { - "prop": "--spectrum-pink-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(33, 0, 21)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "pink-200": { - "prop": "--spectrum-pink-200", - "dark": { - "value": "rgb(71, 0, 44)" - }, - "light": { - "value": "rgb(255, 232, 247)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "pink-300": { - "prop": "--spectrum-pink-300", - "dark": { - "value": "rgb(90, 0, 57)" - }, - "light": { - "value": "rgb(255, 211, 240)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "pink-400": { - "prop": "--spectrum-pink-400", - "dark": { - "value": "rgb(115, 7, 75)" - }, - "light": { - "value": "rgb(255, 181, 230)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "pink-500": { - "prop": "--spectrum-pink-500", - "dark": { - "value": "rgb(143, 18, 97)" - }, - "light": { - "value": "rgb(255, 148, 219)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "pink-600": { - "prop": "--spectrum-pink-600", - "dark": { - "value": "rgb(171, 29, 119)" - }, - "light": { - "value": "rgb(255, 103, 204)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "pink-700": { - "prop": "--spectrum-pink-700", - "dark": { - "value": "rgb(196, 39, 138)" - }, - "light": { - "value": "rgb(242, 76, 184)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "pink-800": { - "prop": "--spectrum-pink-800", - "dark": { - "value": "rgb(213, 45, 151)" - }, - "light": { - "value": "rgb(228, 52, 163)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "pink-900": { - "prop": "--spectrum-pink-900", - "dark": { - "value": "rgb(236, 67, 175)" - }, - "light": { - "value": "rgb(206, 42, 146)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "pink-background-color-default": { - "prop": "--spectrum-pink-background-color-default", - "ref": "var(--spectrum-pink-900)", - "dark": { - "value": "rgb(236, 67, 175)" - }, - "light": { - "value": "rgb(206, 42, 146)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "pink-subtle-background-color-default": { - "prop": "--spectrum-pink-subtle-background-color-default", - "ref": "var(--spectrum-pink-200)", - "dark": { - "value": "rgb(71, 0, 44)" - }, - "light": { - "value": "rgb(255, 232, 247)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "pink-visual-color": { - "prop": "--spectrum-pink-visual-color", - "ref": "var(--spectrum-pink-800)", - "dark": { - "value": "rgb(213, 45, 151)" - }, - "light": { - "value": "rgb(228, 52, 163)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "popover-border-color": { - "prop": "--spectrum-popover-border-color", - "ref": "var(--spectrum-gray-200)", - "light": { - "value": "rgb(225, 225, 225)" - }, - "dark": { - "value": "rgb(50, 50, 50)" - }, - "wireframe": { - "value": "rgb(214, 224, 246)" - } - }, - "popover-border-opacity": { - "prop": "--spectrum-popover-border-opacity", - "light": { - "value": "0" - }, - "dark": { - "value": "1.0" - }, - "wireframe": { - "value": "0" - } - }, - "popover-edge-to-content-area": { - "prop": "--spectrum-popover-edge-to-content-area", - "ref": "var(--spectrum-spacing-100)", - "value": "8px" - }, - "popover-tip-height": { - "prop": "--spectrum-popover-tip-height", - "value": "8px" - }, - "popover-tip-width": { - "prop": "--spectrum-popover-tip-width", - "value": "16px" - }, - "popover-top-to-content-area": { - "prop": "--spectrum-popover-top-to-content-area", - "ref": "var(--spectrum-popover-edge-to-content-area)", - "value": "8px" - }, - "positive-background-color-default": { - "prop": "--spectrum-positive-background-color-default", - "ref": "var(--spectrum-positive-color-900)", - "light": { - "value": "rgb(5, 131, 78)" - }, - "dark": { - "value": "rgb(9, 157, 89)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "positive-background-color-down": { - "prop": "--spectrum-positive-background-color-down", - "ref": "var(--spectrum-positive-color-1000)", - "light": { - "value": "rgb(3, 110, 69)" - }, - "dark": { - "value": "rgb(14, 175, 98)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "positive-background-color-hover": { - "prop": "--spectrum-positive-background-color-hover", - "ref": "var(--spectrum-positive-color-1000)", - "light": { - "value": "rgb(3, 110, 69)" - }, - "dark": { - "value": "rgb(14, 175, 98)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "positive-background-color-key-focus": { - "prop": "--spectrum-positive-background-color-key-focus", - "ref": "var(--spectrum-positive-color-1000)", - "light": { - "value": "rgb(3, 110, 69)" - }, - "dark": { - "value": "rgb(14, 175, 98)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "positive-color-100": { - "prop": "--spectrum-positive-color-100", - "ref": "var(--spectrum-green-100)", - "light": { - "value": "rgb(237, 252, 241)" - }, - "dark": { - "value": "rgb(0, 30, 23)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "positive-color-1000": { - "prop": "--spectrum-positive-color-1000", - "ref": "var(--spectrum-green-1000)", - "light": { - "value": "rgb(3, 110, 69)" - }, - "dark": { - "value": "rgb(14, 175, 98)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "positive-color-1100": { - "prop": "--spectrum-positive-color-1100", - "ref": "var(--spectrum-green-1100)", - "light": { - "value": "rgb(2, 93, 60)" - }, - "dark": { - "value": "rgb(24, 193, 110)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "positive-color-1200": { - "prop": "--spectrum-positive-color-1200", - "ref": "var(--spectrum-green-1200)", - "light": { - "value": "rgb(1, 76, 52)" - }, - "dark": { - "value": "rgb(57, 215, 134)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "positive-color-1300": { - "prop": "--spectrum-positive-color-1300", - "ref": "var(--spectrum-green-1300)", - "light": { - "value": "rgb(0, 61, 44)" - }, - "dark": { - "value": "rgb(126, 231, 172)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "positive-color-1400": { - "prop": "--spectrum-positive-color-1400", - "ref": "var(--spectrum-green-1400)", - "light": { - "value": "rgb(0, 46, 34)" - }, - "dark": { - "value": "rgb(189, 241, 208)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "positive-color-1500": { - "prop": "--spectrum-positive-color-1500", - "ref": "var(--spectrum-green-1500)", - "dark": { - "value": "rgb(229, 250, 236)" - }, - "light": { - "value": "rgb(0, 33, 25)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "positive-color-1600": { - "prop": "--spectrum-positive-color-1600", - "ref": "var(--spectrum-green-1600)", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(0, 15, 12)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "positive-color-200": { - "prop": "--spectrum-positive-color-200", - "ref": "var(--spectrum-green-200)", - "light": { - "value": "rgb(215, 247, 225)" - }, - "dark": { - "value": "rgb(0, 38, 29)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "positive-color-300": { - "prop": "--spectrum-positive-color-300", - "ref": "var(--spectrum-green-300)", - "light": { - "value": "rgb(173, 238, 197)" - }, - "dark": { - "value": "rgb(0, 51, 38)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "positive-color-400": { - "prop": "--spectrum-positive-color-400", - "ref": "var(--spectrum-green-400)", - "light": { - "value": "rgb(107, 227, 162)" - }, - "dark": { - "value": "rgb(0, 68, 48)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "positive-color-500": { - "prop": "--spectrum-positive-color-500", - "ref": "var(--spectrum-green-500)", - "light": { - "value": "rgb(43, 209, 125)" - }, - "dark": { - "value": "rgb(2, 87, 58)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "positive-color-600": { - "prop": "--spectrum-positive-color-600", - "ref": "var(--spectrum-green-600)", - "light": { - "value": "rgb(18, 184, 103)" - }, - "dark": { - "value": "rgb(3, 106, 67)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "positive-color-700": { - "prop": "--spectrum-positive-color-700", - "ref": "var(--spectrum-green-700)", - "light": { - "value": "rgb(11, 164, 93)" - }, - "dark": { - "value": "rgb(4, 124, 75)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "positive-color-800": { - "prop": "--spectrum-positive-color-800", - "ref": "var(--spectrum-green-800)", - "light": { - "value": "rgb(7, 147, 85)" - }, - "dark": { - "value": "rgb(6, 136, 80)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "positive-color-900": { - "prop": "--spectrum-positive-color-900", - "ref": "var(--spectrum-green-900)", - "light": { - "value": "rgb(5, 131, 78)" - }, - "dark": { - "value": "rgb(9, 157, 89)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "positive-subtle-background-color-default": { - "prop": "--spectrum-positive-subtle-background-color-default", - "ref": "var(--spectrum-positive-color-200)", - "light": { - "value": "rgb(215, 247, 225)" - }, - "dark": { - "value": "rgb(0, 38, 29)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "positive-visual-color": { - "prop": "--spectrum-positive-visual-color", - "ref": "var(--spectrum-positive-color-800)", - "light": { - "value": "rgb(7, 147, 85)" - }, - "dark": { - "value": "rgb(6, 136, 80)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "progress-bar-maximum-width": { - "prop": "--spectrum-progress-bar-maximum-width", - "value": "768px" - }, - "progress-bar-minimum-width": { - "prop": "--spectrum-progress-bar-minimum-width", - "value": "48px" - }, - "progress-bar-thickness-extra-large": { - "prop": "--spectrum-progress-bar-thickness-extra-large", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "13px" - } - }, - "progress-bar-thickness-large": { - "prop": "--spectrum-progress-bar-thickness-large", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "progress-bar-thickness-medium": { - "prop": "--spectrum-progress-bar-thickness-medium", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "progress-bar-thickness-small": { - "prop": "--spectrum-progress-bar-thickness-small", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "progress-circle-size-large": { - "prop": "--spectrum-progress-circle-size-large", - "desktop": { - "value": "64px" - }, - "mobile": { - "value": "80px" - } - }, - "progress-circle-size-medium": { - "prop": "--spectrum-progress-circle-size-medium", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "40px" - } - }, - "progress-circle-size-small": { - "prop": "--spectrum-progress-circle-size-small", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "progress-circle-thickness-large": { - "prop": "--spectrum-progress-circle-thickness-large", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "progress-circle-thickness-medium": { - "prop": "--spectrum-progress-circle-thickness-medium", - "desktop": { - "value": "3px" - }, - "mobile": { - "value": "4px" - } - }, - "progress-circle-thickness-small": { - "prop": "--spectrum-progress-circle-thickness-small", - "desktop": { - "value": "2px" - }, - "mobile": { - "value": "3px" - } - }, - "purple-100": { - "prop": "--spectrum-purple-100", - "light": { - "value": "rgb(251, 247, 254)" - }, - "dark": { - "value": "rgb(41, 0, 79)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "purple-1000": { - "prop": "--spectrum-purple-1000", - "light": { - "value": "rgb(134, 40, 217)" - }, - "dark": { - "value": "rgb(186, 127, 237)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "purple-1100": { - "prop": "--spectrum-purple-1100", - "light": { - "value": "rgb(115, 13, 204)" - }, - "dark": { - "value": "rgb(197, 149, 240)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "purple-1200": { - "prop": "--spectrum-purple-1200", - "light": { - "value": "rgb(93, 0, 177)" - }, - "dark": { - "value": "rgb(212, 176, 244)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "purple-1300": { - "prop": "--spectrum-purple-1300", - "light": { - "value": "rgb(75, 0, 144)" - }, - "dark": { - "value": "rgb(225, 201, 247)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "purple-1400": { - "prop": "--spectrum-purple-1400", - "light": { - "value": "rgb(59, 0, 111)" - }, - "dark": { - "value": "rgb(238, 224, 250)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "purple-1500": { - "prop": "--spectrum-purple-1500", - "dark": { - "value": "rgb(248, 243, 253)" - }, - "light": { - "value": "rgb(44, 0, 84)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "purple-1600": { - "prop": "--spectrum-purple-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(23, 0, 45)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "purple-200": { - "prop": "--spectrum-purple-200", - "light": { - "value": "rgb(244, 235, 252)" - }, - "dark": { - "value": "rgb(50, 0, 96)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "purple-300": { - "prop": "--spectrum-purple-300", - "light": { - "value": "rgb(235, 218, 249)" - }, - "dark": { - "value": "rgb(64, 0, 122)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "purple-400": { - "prop": "--spectrum-purple-400", - "light": { - "value": "rgb(221, 193, 246)" - }, - "dark": { - "value": "rgb(83, 0, 159)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "purple-500": { - "prop": "--spectrum-purple-500", - "light": { - "value": "rgb(208, 167, 243)" - }, - "dark": { - "value": "rgb(107, 6, 195)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "purple-600": { - "prop": "--spectrum-purple-600", - "light": { - "value": "rgb(191, 138, 238)" - }, - "dark": { - "value": "rgb(130, 34, 215)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "purple-700": { - "prop": "--spectrum-purple-700", - "light": { - "value": "rgb(178, 114, 235)" - }, - "dark": { - "value": "rgb(148, 62, 224)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "purple-800": { - "prop": "--spectrum-purple-800", - "light": { - "value": "rgb(166, 92, 231)" - }, - "dark": { - "value": "rgb(157, 78, 228)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "purple-900": { - "prop": "--spectrum-purple-900", - "light": { - "value": "rgb(154, 71, 226)" - }, - "dark": { - "value": "rgb(173, 105, 233)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "purple-background-color-default": { - "prop": "--spectrum-purple-background-color-default", - "ref": "var(--spectrum-purple-900)", - "light": { - "value": "rgb(154, 71, 226)" - }, - "dark": { - "value": "rgb(173, 105, 233)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "purple-subtle-background-color-default": { - "prop": "--spectrum-purple-subtle-background-color-default", - "ref": "var(--spectrum-purple-200)", - "light": { - "value": "rgb(244, 235, 252)" - }, - "dark": { - "value": "rgb(50, 0, 96)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "purple-visual-color": { - "prop": "--spectrum-purple-visual-color", - "ref": "var(--spectrum-purple-800)", - "light": { - "value": "rgb(166, 92, 231)" - }, - "dark": { - "value": "rgb(157, 78, 228)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "radio-button-control-size-extra-large": { - "prop": "--spectrum-radio-button-control-size-extra-large", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "radio-button-control-size-large": { - "prop": "--spectrum-radio-button-control-size-large", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "radio-button-control-size-medium": { - "prop": "--spectrum-radio-button-control-size-medium", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "18px" - } - }, - "radio-button-control-size-small": { - "prop": "--spectrum-radio-button-control-size-small", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "16px" - } - }, - "radio-button-selection-indicator": { - "prop": "--spectrum-radio-button-selection-indicator", - "value": "4px" - }, - "radio-button-top-to-control-extra-large": { - "prop": "--spectrum-radio-button-top-to-control-extra-large", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "19px" - } - }, - "radio-button-top-to-control-large": { - "prop": "--spectrum-radio-button-top-to-control-large", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "radio-button-top-to-control-medium": { - "prop": "--spectrum-radio-button-top-to-control-medium", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "radio-button-top-to-control-small": { - "prop": "--spectrum-radio-button-top-to-control-small", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "7px" - } - }, - "rating-bottom-to-content-area-medium": { - "prop": "--spectrum-rating-bottom-to-content-area-medium", - "value": "6px" - }, - "rating-bottom-to-content-area-small": { - "prop": "--spectrum-rating-bottom-to-content-area-small", - "ref": "var(--spectrum-spacing-75)", - "value": "4px" - }, - "rating-edge-to-content-area-medium": { - "prop": "--spectrum-rating-edge-to-content-area-medium", - "value": "6px" - }, - "rating-edge-to-content-area-small": { - "prop": "--spectrum-rating-edge-to-content-area-small", - "ref": "var(--spectrum-spacing-75)", - "value": "4px" - }, - "rating-height-medium": { - "prop": "--spectrum-rating-height-medium", - "ref": "var(--spectrum-component-height-100)", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "40px" - } - }, - "rating-height-small": { - "prop": "--spectrum-rating-height-small", - "ref": "var(--spectrum-component-height-75)", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "30px" - } - }, - "rating-indicator-to-icon": { - "prop": "--spectrum-rating-indicator-to-icon", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "rating-indicator-width": { - "prop": "--spectrum-rating-indicator-width", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "rating-top-to-content-area-medium": { - "prop": "--spectrum-rating-top-to-content-area-medium", - "value": "6px" - }, - "rating-top-to-content-area-small": { - "prop": "--spectrum-rating-top-to-content-area-small", - "ref": "var(--spectrum-spacing-75)", - "value": "4px" - }, - "rating-width-medium": { - "prop": "--spectrum-rating-width-medium", - "value": "128px" - }, - "rating-width-small": { - "prop": "--spectrum-rating-width-small", - "value": "104px" - }, - "red-100": { - "prop": "--spectrum-red-100", - "light": { - "value": "rgb(255, 246, 245)" - }, - "dark": { - "value": "rgb(54, 10, 3)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "red-1000": { - "prop": "--spectrum-red-1000", - "light": { - "value": "rgb(183, 40, 24)" - }, - "dark": { - "value": "rgb(255, 103, 86)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "red-1100": { - "prop": "--spectrum-red-1100", - "light": { - "value": "rgb(156, 33, 19)" - }, - "dark": { - "value": "rgb(255, 134, 120)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "red-1200": { - "prop": "--spectrum-red-1200", - "light": { - "value": "rgb(129, 27, 14)" - }, - "dark": { - "value": "rgb(255, 167, 157)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "red-1300": { - "prop": "--spectrum-red-1300", - "light": { - "value": "rgb(104, 21, 10)" - }, - "dark": { - "value": "rgb(255, 196, 189)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "red-1400": { - "prop": "--spectrum-red-1400", - "light": { - "value": "rgb(80, 16, 6)" - }, - "dark": { - "value": "rgb(255, 222, 219)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "red-1500": { - "prop": "--spectrum-red-1500", - "dark": { - "value": "rgb(255, 242, 240)" - }, - "light": { - "value": "rgb(59, 11, 4)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "red-1600": { - "prop": "--spectrum-red-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(29, 5, 2)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "red-200": { - "prop": "--spectrum-red-200", - "light": { - "value": "rgb(255, 235, 232)" - }, - "dark": { - "value": "rgb(68, 13, 5)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "red-300": { - "prop": "--spectrum-red-300", - "light": { - "value": "rgb(255, 214, 209)" - }, - "dark": { - "value": "rgb(87, 17, 7)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "red-400": { - "prop": "--spectrum-red-400", - "light": { - "value": "rgb(255, 188, 180)" - }, - "dark": { - "value": "rgb(115, 24, 11)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "red-500": { - "prop": "--spectrum-red-500", - "light": { - "value": "rgb(255, 157, 145)" - }, - "dark": { - "value": "rgb(147, 31, 17)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "red-600": { - "prop": "--spectrum-red-600", - "light": { - "value": "rgb(255, 118, 101)" - }, - "dark": { - "value": "rgb(177, 38, 23)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "red-700": { - "prop": "--spectrum-red-700", - "light": { - "value": "rgb(255, 81, 61)" - }, - "dark": { - "value": "rgb(205, 46, 29)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "red-800": { - "prop": "--spectrum-red-800", - "light": { - "value": "rgb(240, 56, 35)" - }, - "dark": { - "value": "rgb(223, 52, 34)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "red-900": { - "prop": "--spectrum-red-900", - "light": { - "value": "rgb(215, 50, 32)" - }, - "dark": { - "value": "rgb(252, 67, 46)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "red-background-color-default": { - "prop": "--spectrum-red-background-color-default", - "ref": "var(--spectrum-red-900)", - "light": { - "value": "rgb(215, 50, 32)" - }, - "dark": { - "value": "rgb(252, 67, 46)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "red-subtle-background-color-default": { - "prop": "--spectrum-red-subtle-background-color-default", - "ref": "var(--spectrum-red-200)", - "light": { - "value": "rgb(255, 235, 232)" - }, - "dark": { - "value": "rgb(68, 13, 5)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "red-visual-color": { - "prop": "--spectrum-red-visual-color", - "ref": "var(--spectrum-red-800)", - "light": { - "value": "rgb(240, 56, 35)" - }, - "dark": { - "value": "rgb(223, 52, 34)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "regular-font-weight": { - "prop": "--spectrum-regular-font-weight", - "value": "400" - }, - "sans-serif-font-family": { - "prop": "--spectrum-sans-serif-font-family", - "value": "Adobe Clean Spectrum VF" - }, - "seafoam-100": { - "prop": "--spectrum-seafoam-100", - "light": { - "value": "rgb(235, 251, 246)" - }, - "dark": { - "value": "rgb(0, 30, 27)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "seafoam-1000": { - "prop": "--spectrum-seafoam-1000", - "light": { - "value": "rgb(5, 108, 92)" - }, - "dark": { - "value": "rgb(12, 173, 142)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "seafoam-1100": { - "prop": "--spectrum-seafoam-1100", - "light": { - "value": "rgb(3, 92, 80)" - }, - "dark": { - "value": "rgb(14, 190, 156)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "seafoam-1200": { - "prop": "--spectrum-seafoam-1200", - "light": { - "value": "rgb(1, 75, 67)" - }, - "dark": { - "value": "rgb(29, 214, 176)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "seafoam-1300": { - "prop": "--spectrum-seafoam-1300", - "light": { - "value": "rgb(0, 60, 54)" - }, - "dark": { - "value": "rgb(122, 229, 203)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "seafoam-1400": { - "prop": "--spectrum-seafoam-1400", - "light": { - "value": "rgb(0, 46, 40)" - }, - "dark": { - "value": "rgb(186, 241, 222)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "seafoam-1500": { - "prop": "--spectrum-seafoam-1500", - "dark": { - "value": "rgb(229, 249, 243)" - }, - "light": { - "value": "rgb(0, 33, 29)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "seafoam-1600": { - "prop": "--spectrum-seafoam-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(0, 15, 14)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "seafoam-200": { - "prop": "--spectrum-seafoam-200", - "light": { - "value": "rgb(211, 246, 234)" - }, - "dark": { - "value": "rgb(0, 39, 35)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "seafoam-300": { - "prop": "--spectrum-seafoam-300", - "light": { - "value": "rgb(169, 237, 216)" - }, - "dark": { - "value": "rgb(0, 50, 44)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "seafoam-400": { - "prop": "--spectrum-seafoam-400", - "light": { - "value": "rgb(92, 225, 194)" - }, - "dark": { - "value": "rgb(0, 67, 59)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "seafoam-500": { - "prop": "--spectrum-seafoam-500", - "light": { - "value": "rgb(16, 207, 169)" - }, - "dark": { - "value": "rgb(2, 86, 75)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "seafoam-600": { - "prop": "--spectrum-seafoam-600", - "light": { - "value": "rgb(13, 181, 149)" - }, - "dark": { - "value": "rgb(4, 105, 89)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "seafoam-700": { - "prop": "--spectrum-seafoam-700", - "light": { - "value": "rgb(11, 162, 134)" - }, - "dark": { - "value": "rgb(6, 122, 103)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "seafoam-800": { - "prop": "--spectrum-seafoam-800", - "light": { - "value": "rgb(9, 144, 120)" - }, - "dark": { - "value": "rgb(8, 134, 112)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "seafoam-900": { - "prop": "--spectrum-seafoam-900", - "light": { - "value": "rgb(7, 129, 109)" - }, - "dark": { - "value": "rgb(10, 154, 128)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "seafoam-background-color-default": { - "prop": "--spectrum-seafoam-background-color-default", - "ref": "var(--spectrum-seafoam-900)", - "light": { - "value": "rgb(7, 129, 109)" - }, - "dark": { - "value": "rgb(10, 154, 128)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "seafoam-subtle-background-color-default": { - "prop": "--spectrum-seafoam-subtle-background-color-default", - "ref": "var(--spectrum-seafoam-200)", - "light": { - "value": "rgb(211, 246, 234)" - }, - "dark": { - "value": "rgb(0, 39, 35)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "seafoam-visual-color": { - "prop": "--spectrum-seafoam-visual-color", - "ref": "var(--spectrum-seafoam-700)", - "light": { - "value": "rgb(11, 162, 134)" - }, - "dark": { - "value": "rgb(6, 122, 103)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "search-field-minimum-width-multiplier": { - "prop": "--spectrum-search-field-minimum-width-multiplier", - "value": "4" - }, - "segmented-control-item-height": { - "prop": "--spectrum-segmented-control-item-height", - "ref": "var(--spectrum-component-height-100)", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "40px" - } - }, - "segmented-control-item-maximum-width": { - "prop": "--spectrum-segmented-control-item-maximum-width", - "value": "265px" - }, - "segmented-control-selection-border-width": { - "prop": "--spectrum-segmented-control-selection-border-width", - "ref": "var(--spectrum-border-width-200)", - "value": "2px" - }, - "segmented-text-field-gap": { - "prop": "--spectrum-segmented-text-field-gap", - "value": "0px" - }, - "segmented-text-field-rounding": { - "prop": "--spectrum-segmented-text-field-rounding", - "value": "2px" - }, - "select-box-edge-to-checkbox": { - "prop": "--spectrum-select-box-edge-to-checkbox", - "value": "8px" - }, - "select-box-horizontal-end-to-content": { - "prop": "--spectrum-select-box-horizontal-end-to-content", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "40px" - } - }, - "select-box-horizontal-illustration-to-label": { - "prop": "--spectrum-select-box-horizontal-illustration-to-label", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "select-box-horizontal-label-to-description": { - "prop": "--spectrum-select-box-horizontal-label-to-description", - "desktop": { - "value": "2px" - }, - "mobile": { - "value": "3px" - } - }, - "select-box-horizontal-minimum-height": { - "prop": "--spectrum-select-box-horizontal-minimum-height", - "desktop": { - "value": "80px" - }, - "mobile": { - "value": "100px" - } - }, - "select-box-horizontal-minimum-width": { - "prop": "--spectrum-select-box-horizontal-minimum-width", - "desktop": { - "value": "188px" - }, - "mobile": { - "value": "220px" - } - }, - "select-box-horizontal-start-to-content": { - "prop": "--spectrum-select-box-horizontal-start-to-content", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "30px" - } - }, - "select-box-horizontal-top-to-content": { - "prop": "--spectrum-select-box-horizontal-top-to-content", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "select-box-horizontal-width": { - "prop": "--spectrum-select-box-horizontal-width", - "desktop": { - "value": "368px" - }, - "mobile": { - "value": "460px" - } - }, - "select-box-selected-border-color": { - "prop": "--spectrum-select-box-selected-border-color", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" - }, - "wireframe": { - "value": "rgb(25, 46, 93)" - } - }, - "select-box-top-to-checkbox": { - "prop": "--spectrum-select-box-top-to-checkbox", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "select-box-vertical-edge-to-content": { - "prop": "--spectrum-select-box-vertical-edge-to-content", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "30px" - } - }, - "select-box-vertical-height": { - "prop": "--spectrum-select-box-vertical-height", - "desktop": { - "value": "170px" - }, - "mobile": { - "value": "212px" - } - }, - "select-box-vertical-illustration-to-label": { - "prop": "--spectrum-select-box-vertical-illustration-to-label", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "serif-font-family": { - "prop": "--spectrum-serif-font-family", - "value": "Adobe Clean Serif" - }, - "side-focus-indicator": { - "prop": "--spectrum-side-focus-indicator", - "value": "4px" - }, - "side-label-character-count-to-field": { - "prop": "--spectrum-side-label-character-count-to-field", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "side-label-character-count-top-margin-extra-large": { - "prop": "--spectrum-side-label-character-count-top-margin-extra-large", - "value": "0px" - }, - "side-label-character-count-top-margin-large": { - "prop": "--spectrum-side-label-character-count-top-margin-large", - "value": "0px" - }, - "side-label-character-count-top-margin-medium": { - "prop": "--spectrum-side-label-character-count-top-margin-medium", - "value": "0px" - }, - "side-label-character-count-top-margin-small": { - "prop": "--spectrum-side-label-character-count-top-margin-small", - "value": "0px" - }, - "side-navigation-bottom-to-text": { - "prop": "--spectrum-side-navigation-bottom-to-text", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "side-navigation-header-to-item": { - "prop": "--spectrum-side-navigation-header-to-item", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "side-navigation-item-to-header": { - "prop": "--spectrum-side-navigation-item-to-header", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "30px" - } - }, - "side-navigation-item-to-item": { - "prop": "--spectrum-side-navigation-item-to-item", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "side-navigation-maximum-width": { - "prop": "--spectrum-side-navigation-maximum-width", - "desktop": { - "value": "240px" - }, - "mobile": { - "value": "300px" - } - }, - "side-navigation-minimum-width": { - "prop": "--spectrum-side-navigation-minimum-width", - "desktop": { - "value": "160px" - }, - "mobile": { - "value": "200px" - } - }, - "side-navigation-second-level-edge-to-text": { - "prop": "--spectrum-side-navigation-second-level-edge-to-text", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "30px" - } - }, - "side-navigation-third-level-edge-to-text": { - "prop": "--spectrum-side-navigation-third-level-edge-to-text", - "desktop": { - "value": "36px" - }, - "mobile": { - "value": "45px" - } - }, - "side-navigation-width": { - "prop": "--spectrum-side-navigation-width", - "desktop": { - "value": "192px" - }, - "mobile": { - "value": "240px" - } - }, - "side-navigation-with-icon-second-level-edge-to-text": { - "prop": "--spectrum-side-navigation-with-icon-second-level-edge-to-text", - "desktop": { - "value": "50px" - }, - "mobile": { - "value": "62px" - } - }, - "side-navigation-with-icon-third-level-edge-to-text": { - "prop": "--spectrum-side-navigation-with-icon-third-level-edge-to-text", - "desktop": { - "value": "62px" - }, - "mobile": { - "value": "77px" - } - }, - "silver-100": { - "prop": "--spectrum-silver-100", - "dark": { - "value": "rgb(26, 26, 26)" - }, - "light": { - "value": "rgb(247, 247, 247)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "silver-1000": { - "prop": "--spectrum-silver-1000", - "dark": { - "value": "rgb(152, 152, 152)" - }, - "light": { - "value": "rgb(96, 96, 96)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "silver-1100": { - "prop": "--spectrum-silver-1100", - "dark": { - "value": "rgb(169, 169, 169)" - }, - "light": { - "value": "rgb(81, 81, 81)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "silver-1200": { - "prop": "--spectrum-silver-1200", - "dark": { - "value": "rgb(190, 190, 190)" - }, - "light": { - "value": "rgb(66, 66, 66)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "silver-1300": { - "prop": "--spectrum-silver-1300", - "dark": { - "value": "rgb(211, 211, 211)" - }, - "light": { - "value": "rgb(52, 52, 52)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "silver-1400": { - "prop": "--spectrum-silver-1400", - "dark": { - "value": "rgb(229, 229, 229)" - }, - "light": { - "value": "rgb(39, 39, 39)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "silver-1500": { - "prop": "--spectrum-silver-1500", - "dark": { - "value": "rgb(244, 244, 244)" - }, - "light": { - "value": "rgb(28, 28, 28)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "silver-1600": { - "prop": "--spectrum-silver-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(12, 12, 12)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "silver-200": { - "prop": "--spectrum-silver-200", - "dark": { - "value": "rgb(33, 33, 33)" - }, - "light": { - "value": "rgb(239, 239, 239)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "silver-300": { - "prop": "--spectrum-silver-300", - "dark": { - "value": "rgb(44, 44, 44)" - }, - "light": { - "value": "rgb(223, 223, 223)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "silver-400": { - "prop": "--spectrum-silver-400", - "dark": { - "value": "rgb(59, 59, 59)" - }, - "light": { - "value": "rgb(204, 204, 204)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "silver-500": { - "prop": "--spectrum-silver-500", - "dark": { - "value": "rgb(76, 76, 76)" - }, - "light": { - "value": "rgb(183, 183, 183)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "silver-600": { - "prop": "--spectrum-silver-600", - "dark": { - "value": "rgb(92, 92, 92)" - }, - "light": { - "value": "rgb(160, 160, 160)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "silver-700": { - "prop": "--spectrum-silver-700", - "dark": { - "value": "rgb(108, 108, 108)" - }, - "light": { - "value": "rgb(143, 143, 143)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "silver-800": { - "prop": "--spectrum-silver-800", - "dark": { - "value": "rgb(118, 118, 118)" - }, - "light": { - "value": "rgb(128, 128, 128)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "silver-900": { - "prop": "--spectrum-silver-900", - "dark": { - "value": "rgb(137, 137, 137)" - }, - "light": { - "value": "rgb(114, 114, 114)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "silver-background-color-default": { - "prop": "--spectrum-silver-background-color-default", - "ref": "var(--spectrum-silver-900)", - "dark": { - "value": "rgb(137, 137, 137)" - }, - "light": { - "value": "rgb(114, 114, 114)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "silver-subtle-background-color-default": { - "prop": "--spectrum-silver-subtle-background-color-default", - "ref": "var(--spectrum-silver-200)", - "dark": { - "value": "rgb(33, 33, 33)" - }, - "light": { - "value": "rgb(239, 239, 239)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "silver-visual-color": { - "prop": "--spectrum-silver-visual-color", - "ref": "var(--spectrum-silver-800)", - "dark": { - "value": "rgb(118, 118, 118)" - }, - "light": { - "value": "rgb(128, 128, 128)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "single-calendar-popover-minimum-height": { - "prop": "--spectrum-single-calendar-popover-minimum-height", - "value": "320px" - }, - "single-calendar-popover-minimum-width": { - "prop": "--spectrum-single-calendar-popover-minimum-width", - "value": "320px" - }, - "slider-bottom-to-handle-extra-large": { - "prop": "--spectrum-slider-bottom-to-handle-extra-large", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "slider-bottom-to-handle-large": { - "prop": "--spectrum-slider-bottom-to-handle-large", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "14px" - } - }, - "slider-bottom-to-handle-medium": { - "prop": "--spectrum-slider-bottom-to-handle-medium", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "slider-bottom-to-handle-small": { - "prop": "--spectrum-slider-bottom-to-handle-small", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "6px" - } - }, - "slider-control-height-extra-large": { - "prop": "--spectrum-slider-control-height-extra-large", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "26px" - } - }, - "slider-control-height-large": { - "prop": "--spectrum-slider-control-height-large", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "slider-control-height-medium": { - "prop": "--spectrum-slider-control-height-medium", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "slider-control-height-small": { - "prop": "--spectrum-slider-control-height-small", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "18px" - } - }, - "slider-control-to-field-label-editable-extra-large": { - "prop": "--spectrum-slider-control-to-field-label-editable-extra-large", - "desktop": { - "value": "-20px" - }, - "mobile": { - "value": "-24px" - } - }, - "slider-control-to-field-label-editable-large": { - "prop": "--spectrum-slider-control-to-field-label-editable-large", - "desktop": { - "value": "-16px" - }, - "mobile": { - "value": "-20px" - } - }, - "slider-control-to-field-label-editable-medium": { - "prop": "--spectrum-slider-control-to-field-label-editable-medium", - "desktop": { - "value": "-12px" - }, - "mobile": { - "value": "-16px" - } - }, - "slider-control-to-field-label-editable-small": { - "prop": "--spectrum-slider-control-to-field-label-editable-small", - "desktop": { - "value": "-4px" - }, - "mobile": { - "value": "-8px" - } - }, - "slider-control-to-field-label-extra-large": { - "prop": "--spectrum-slider-control-to-field-label-extra-large", - "desktop": { - "value": "-20px" - }, - "mobile": { - "value": "-28px" - } - }, - "slider-control-to-field-label-large": { - "prop": "--spectrum-slider-control-to-field-label-large", - "desktop": { - "value": "-16px" - }, - "mobile": { - "value": "-20px" - } - }, - "slider-control-to-field-label-medium": { - "prop": "--spectrum-slider-control-to-field-label-medium", - "desktop": { - "value": "-12px" - }, - "mobile": { - "value": "-16px" - } - }, - "slider-control-to-field-label-side-extra-large": { - "prop": "--spectrum-slider-control-to-field-label-side-extra-large", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "28px" - } - }, - "slider-control-to-field-label-side-large": { - "prop": "--spectrum-slider-control-to-field-label-side-large", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "slider-control-to-field-label-side-medium": { - "prop": "--spectrum-slider-control-to-field-label-side-medium", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "slider-control-to-field-label-side-small": { - "prop": "--spectrum-slider-control-to-field-label-side-small", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "slider-control-to-field-label-small": { - "prop": "--spectrum-slider-control-to-field-label-small", - "desktop": { - "value": "-4px" - }, - "mobile": { - "value": "-8px" - } - }, - "slider-control-to-text-field-extra-large": { - "prop": "--spectrum-slider-control-to-text-field-extra-large", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "28px" - } - }, - "slider-control-to-text-field-large": { - "prop": "--spectrum-slider-control-to-text-field-large", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "slider-control-to-text-field-medium": { - "prop": "--spectrum-slider-control-to-text-field-medium", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "slider-control-to-text-field-small": { - "prop": "--spectrum-slider-control-to-text-field-small", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "slider-handle-border-width-down-extra-large": { - "prop": "--spectrum-slider-handle-border-width-down-extra-large", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "11px" - } - }, - "slider-handle-border-width-down-large": { - "prop": "--spectrum-slider-handle-border-width-down-large", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "slider-handle-border-width-down-medium": { - "prop": "--spectrum-slider-handle-border-width-down-medium", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "slider-handle-border-width-down-small": { - "prop": "--spectrum-slider-handle-border-width-down-small", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "7px" - } - }, - "slider-handle-extra-large": { - "prop": "--spectrum-slider-handle-extra-large", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "30px" - } - }, - "slider-handle-gap": { - "prop": "--spectrum-slider-handle-gap", - "value": "4px" - }, - "slider-handle-height-precision-extra-large": { - "prop": "--spectrum-slider-handle-height-precision-extra-large", - "desktop": { - "value": "26px" - }, - "mobile": { - "value": "32px" - } - }, - "slider-handle-height-precision-large": { - "prop": "--spectrum-slider-handle-height-precision-large", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "30px" - } - }, - "slider-handle-height-precision-medium": { - "prop": "--spectrum-slider-handle-height-precision-medium", - "desktop": { - "value": "22px" - }, - "mobile": { - "value": "26px" - } - }, - "slider-handle-height-precision-small": { - "prop": "--spectrum-slider-handle-height-precision-small", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "slider-handle-large": { - "prop": "--spectrum-slider-handle-large", - "desktop": { - "value": "22px" - }, - "mobile": { - "value": "28px" - } - }, - "slider-handle-medium": { - "prop": "--spectrum-slider-handle-medium", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "slider-handle-precision-width": { - "prop": "--spectrum-slider-handle-precision-width", - "value": "6px" - }, - "slider-handle-size-extra-large": { - "prop": "--spectrum-slider-handle-size-extra-large", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "26px" - } - }, - "slider-handle-size-large": { - "prop": "--spectrum-slider-handle-size-large", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "slider-handle-size-medium": { - "prop": "--spectrum-slider-handle-size-medium", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "slider-handle-size-small": { - "prop": "--spectrum-slider-handle-size-small", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "18px" - } - }, - "slider-handle-small": { - "prop": "--spectrum-slider-handle-small", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "slider-track-height-large": { - "prop": "--spectrum-slider-track-height-large", - "value": "16px" - }, - "slider-track-height-medium": { - "prop": "--spectrum-slider-track-height-medium", - "value": "4px" - }, - "slider-track-thickness": { - "prop": "--spectrum-slider-track-thickness", - "value": "2px" - }, - "spacing-100": { - "prop": "--spectrum-spacing-100", - "value": "8px" - }, - "spacing-1000": { - "prop": "--spectrum-spacing-1000", - "value": "96px" - }, - "spacing-200": { - "prop": "--spectrum-spacing-200", - "value": "12px" - }, - "spacing-300": { - "prop": "--spectrum-spacing-300", - "value": "16px" - }, - "spacing-400": { - "prop": "--spectrum-spacing-400", - "value": "24px" - }, - "spacing-50": { - "prop": "--spectrum-spacing-50", - "value": "2px" - }, - "spacing-500": { - "prop": "--spectrum-spacing-500", - "value": "32px" - }, - "spacing-600": { - "prop": "--spectrum-spacing-600", - "value": "40px" - }, - "spacing-700": { - "prop": "--spectrum-spacing-700", - "value": "48px" - }, - "spacing-75": { - "prop": "--spectrum-spacing-75", - "value": "4px" - }, - "spacing-800": { - "prop": "--spectrum-spacing-800", - "value": "64px" - }, - "spacing-900": { - "prop": "--spectrum-spacing-900", - "value": "80px" - }, - "stack-item-action-to-navigation": { - "prop": "--spectrum-stack-item-action-to-navigation", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "6px" - } - }, - "stack-item-background-color-down": { - "prop": "--spectrum-stack-item-background-color-down", - "ref": "var(--spectrum-gray-100)", - "light": { - "value": "rgb(233, 233, 233)" - }, - "dark": { - "value": "rgb(44, 44, 44)" - }, - "wireframe": { - "value": "rgb(228, 234, 249)" - } - }, - "stack-item-background-color-hover": { - "prop": "--spectrum-stack-item-background-color-hover", - "ref": "var(--spectrum-gray-100)", - "light": { - "value": "rgb(233, 233, 233)" - }, - "dark": { - "value": "rgb(44, 44, 44)" - }, - "wireframe": { - "value": "rgb(228, 234, 249)" - } - }, - "stack-item-background-color-key-focus": { - "prop": "--spectrum-stack-item-background-color-key-focus", - "ref": "var(--spectrum-gray-100)", - "light": { - "value": "rgb(233, 233, 233)" - }, - "dark": { - "value": "rgb(44, 44, 44)" - }, - "wireframe": { - "value": "rgb(228, 234, 249)" - } - }, - "stack-item-drag-handle-to-control": { - "prop": "--spectrum-stack-item-drag-handle-to-control", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "stack-item-edge-to-control": { - "prop": "--spectrum-stack-item-edge-to-control", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "stack-item-edge-to-visual": { - "prop": "--spectrum-stack-item-edge-to-visual", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "stack-item-header-minimum-width": { - "prop": "--spectrum-stack-item-header-minimum-width", - "desktop": { - "value": "200px" - }, - "mobile": { - "value": "240px" - } - }, - "stack-item-header-to-item": { - "prop": "--spectrum-stack-item-header-to-item", - "value": "0px" - }, - "stack-item-item-to-item": { - "prop": "--spectrum-stack-item-item-to-item", - "value": "-1px" - }, - "stack-item-selected-background-color-default": { - "prop": "--spectrum-stack-item-selected-background-color-default", - "ref": "var(--spectrum-gray-100)", - "light": { - "value": "rgb(233, 233, 233)" - }, - "dark": { - "value": "rgb(44, 44, 44)" - }, - "wireframe": { - "value": "rgb(228, 234, 249)" - } - }, - "stack-item-selected-background-color-down": { - "prop": "--spectrum-stack-item-selected-background-color-down", - "ref": "var(--spectrum-gray-200)", - "light": { - "value": "rgb(225, 225, 225)" - }, - "dark": { - "value": "rgb(50, 50, 50)" - }, - "wireframe": { - "value": "rgb(214, 224, 246)" - } - }, - "stack-item-selected-background-color-emphasized": { - "prop": "--spectrum-stack-item-selected-background-color-emphasized", - "ref": "var(--spectrum-accent-background-color-default)", - "light": { - "value": "rgb(59, 99, 251)" - }, - "dark": { - "value": "rgb(86, 129, 255)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "stack-item-selected-background-color-hover": { - "prop": "--spectrum-stack-item-selected-background-color-hover", - "ref": "var(--spectrum-gray-200)", - "light": { - "value": "rgb(225, 225, 225)" - }, - "dark": { - "value": "rgb(50, 50, 50)" - }, - "wireframe": { - "value": "rgb(214, 224, 246)" - } - }, - "stack-item-selected-background-color-key-focus": { - "prop": "--spectrum-stack-item-selected-background-color-key-focus", - "ref": "var(--spectrum-gray-200)", - "light": { - "value": "rgb(225, 225, 225)" - }, - "dark": { - "value": "rgb(50, 50, 50)" - }, - "wireframe": { - "value": "rgb(214, 224, 246)" - } - }, - "stack-item-selected-background-opacity-emphasized": { - "prop": "--spectrum-stack-item-selected-background-opacity-emphasized", - "value": "0.1" - }, - "stack-item-selected-background-opacity-emphasized-down": { - "prop": "--spectrum-stack-item-selected-background-opacity-emphasized-down", - "value": "0.15" - }, - "stack-item-selected-background-opacity-emphasized-hover": { - "prop": "--spectrum-stack-item-selected-background-opacity-emphasized-hover", - "value": "0.15" - }, - "stack-item-selected-background-opacity-emphasized-key-focus": { - "prop": "--spectrum-stack-item-selected-background-opacity-emphasized-key-focus", - "value": "0.15" - }, - "stack-item-start-edge-to-content": { - "prop": "--spectrum-stack-item-start-edge-to-content", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "stack-item-text-to-control": { - "prop": "--spectrum-stack-item-text-to-control", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "standard-dialog-body-font-size": { - "prop": "--spectrum-standard-dialog-body-font-size", - "ref": "var(--spectrum-body-size-s)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "standard-dialog-maximum-width-large": { - "prop": "--spectrum-standard-dialog-maximum-width-large", - "value": "640px" - }, - "standard-dialog-maximum-width-medium": { - "prop": "--spectrum-standard-dialog-maximum-width-medium", - "value": "480px" - }, - "standard-dialog-maximum-width-small": { - "prop": "--spectrum-standard-dialog-maximum-width-small", - "value": "400px" - }, - "standard-dialog-minimum-width": { - "prop": "--spectrum-standard-dialog-minimum-width", - "value": "288px" - }, - "standard-dialog-title-font-size": { - "prop": "--spectrum-standard-dialog-title-font-size", - "ref": "var(--spectrum-title-size-xl)", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "standard-panel-edge-to-close-button-compact": { - "prop": "--spectrum-standard-panel-edge-to-close-button-compact", - "value": "3px" - }, - "standard-panel-edge-to-close-button-regular": { - "prop": "--spectrum-standard-panel-edge-to-close-button-regular", - "value": "7px" - }, - "standard-panel-edge-to-close-button-spacious": { - "prop": "--spectrum-standard-panel-edge-to-close-button-spacious", - "value": "15px" - }, - "standard-panel-gripper-color": { - "prop": "--spectrum-standard-panel-gripper-color", - "ref": "var(--spectrum-gray-500)", - "light": { - "value": "rgb(143, 143, 143)" - }, - "dark": { - "value": "rgb(109, 109, 109)" - }, - "wireframe": { - "value": "rgb(108, 142, 217)" - } - }, - "standard-panel-gripper-color-drag": { - "prop": "--spectrum-standard-panel-gripper-color-drag", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" - }, - "wireframe": { - "value": "rgb(25, 46, 93)" - } - }, - "standard-panel-maximum-width": { - "prop": "--spectrum-standard-panel-maximum-width", - "value": "400px" - }, - "standard-panel-minimum-width": { - "prop": "--spectrum-standard-panel-minimum-width", - "value": "200px" - }, - "standard-panel-title-font-size": { - "prop": "--spectrum-standard-panel-title-font-size", - "ref": "var(--spectrum-title-size-s)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "standard-panel-top-to-close-button-compact": { - "prop": "--spectrum-standard-panel-top-to-close-button-compact", - "value": "5px" - }, - "standard-panel-top-to-close-button-regular": { - "prop": "--spectrum-standard-panel-top-to-close-button-regular", - "value": "9px" - }, - "standard-panel-top-to-close-button-spacious": { - "prop": "--spectrum-standard-panel-top-to-close-button-spacious", - "value": "17px" - }, - "standard-panel-width": { - "prop": "--spectrum-standard-panel-width", - "value": "260px" - }, - "static-black-focus-indicator-color": { - "prop": "--spectrum-static-black-focus-indicator-color", - "ref": "var(--spectrum-black)", - "value": "rgb(0, 0, 0)" - }, - "static-black-text-color": { - "prop": "--spectrum-static-black-text-color", - "ref": "var(--spectrum-black)", - "value": "rgb(0, 0, 0)" - }, - "static-black-track-color": { - "prop": "--spectrum-static-black-track-color", - "ref": "var(--spectrum-transparent-black-300)", - "value": "rgba(0, 0, 0, 0.15)" - }, - "static-black-track-indicator-color": { - "prop": "--spectrum-static-black-track-indicator-color", - "ref": "var(--spectrum-transparent-black-900)", - "value": "rgba(0, 0, 0, 0.93)" - }, - "static-blue-1000": { - "prop": "--spectrum-static-blue-1000", - "value": "rgb(39, 77, 234)" - }, - "static-blue-900": { - "prop": "--spectrum-static-blue-900", - "value": "rgb(59, 99, 251)" - }, - "static-chartreuse-400": { - "prop": "--spectrum-static-chartreuse-400", - "value": "rgb(182, 219, 0)" - }, - "static-chartreuse-600": { - "prop": "--spectrum-static-chartreuse-600", - "value": "rgb(143, 172, 0)" - }, - "static-chartreuse-800": { - "prop": "--spectrum-static-chartreuse-800", - "value": "rgb(114, 137, 0)" - }, - "static-cyan-400": { - "prop": "--spectrum-static-cyan-400", - "value": "rgb(138, 213, 255)" - }, - "static-cyan-600": { - "prop": "--spectrum-static-cyan-600", - "value": "rgb(48, 167, 254)" - }, - "static-cyan-800": { - "prop": "--spectrum-static-cyan-800", - "value": "rgb(18, 134, 205)" - }, - "static-fuchsia-1000": { - "prop": "--spectrum-static-fuchsia-1000", - "value": "rgb(156, 40, 175)" - }, - "static-fuchsia-400": { - "prop": "--spectrum-static-fuchsia-400", - "value": "rgb(247, 181, 255)" - }, - "static-fuchsia-600": { - "prop": "--spectrum-static-fuchsia-600", - "value": "rgb(236, 105, 255)" - }, - "static-fuchsia-800": { - "prop": "--spectrum-static-fuchsia-800", - "value": "rgb(200, 68, 220)" - }, - "static-fuchsia-900": { - "prop": "--spectrum-static-fuchsia-900", - "value": "rgb(181, 57, 200)" - }, - "static-green-400": { - "prop": "--spectrum-static-green-400", - "value": "rgb(107, 227, 162)" - }, - "static-green-600": { - "prop": "--spectrum-static-green-600", - "value": "rgb(18, 184, 103)" - }, - "static-green-800": { - "prop": "--spectrum-static-green-800", - "value": "rgb(7, 147, 85)" - }, - "static-indigo-1000": { - "prop": "--spectrum-static-indigo-1000", - "value": "rgb(99, 56, 238)" - }, - "static-indigo-400": { - "prop": "--spectrum-static-indigo-400", - "value": "rgb(192, 201, 255)" - }, - "static-indigo-600": { - "prop": "--spectrum-static-indigo-600", - "value": "rgb(145, 151, 254)" - }, - "static-indigo-800": { - "prop": "--spectrum-static-indigo-800", - "value": "rgb(122, 106, 253)" - }, - "static-indigo-900": { - "prop": "--spectrum-static-indigo-900", - "value": "rgb(113, 85, 250)" - }, - "static-magenta-1000": { - "prop": "--spectrum-static-magenta-1000", - "value": "rgb(186, 22, 80)" - }, - "static-magenta-400": { - "prop": "--spectrum-static-magenta-400", - "value": "rgb(255, 185, 208)" - }, - "static-magenta-600": { - "prop": "--spectrum-static-magenta-600", - "value": "rgb(255, 112, 159)" - }, - "static-magenta-800": { - "prop": "--spectrum-static-magenta-800", - "value": "rgb(240, 45, 110)" - }, - "static-magenta-900": { - "prop": "--spectrum-static-magenta-900", - "value": "rgb(217, 35, 97)" - }, - "static-orange-400": { - "prop": "--spectrum-static-orange-400", - "value": "rgb(255, 193, 94)" - }, - "static-orange-600": { - "prop": "--spectrum-static-orange-600", - "value": "rgb(252, 125, 0)" - }, - "static-orange-800": { - "prop": "--spectrum-static-orange-800", - "value": "rgb(212, 91, 0)" - }, - "static-purple-400": { - "prop": "--spectrum-static-purple-400", - "value": "rgb(221, 193, 246)" - }, - "static-purple-600": { - "prop": "--spectrum-static-purple-600", - "value": "rgb(191, 138, 238)" - }, - "static-purple-800": { - "prop": "--spectrum-static-purple-800", - "value": "rgb(166, 92, 231)" - }, - "static-red-1000": { - "prop": "--spectrum-static-red-1000", - "value": "rgb(183, 40, 24)" - }, - "static-red-400": { - "prop": "--spectrum-static-red-400", - "value": "rgb(255, 188, 180)" - }, - "static-red-600": { - "prop": "--spectrum-static-red-600", - "value": "rgb(255, 118, 101)" - }, - "static-red-800": { - "prop": "--spectrum-static-red-800", - "value": "rgb(240, 56, 35)" - }, - "static-red-900": { - "prop": "--spectrum-static-red-900", - "value": "rgb(215, 50, 32)" - }, - "static-turquoise-400": { - "prop": "--spectrum-static-turquoise-400", - "value": "rgb(111, 221, 228)" - }, - "static-turquoise-600": { - "prop": "--spectrum-static-turquoise-600", - "value": "rgb(15, 177, 192)" - }, - "static-turquoise-800": { - "prop": "--spectrum-static-turquoise-800", - "value": "rgb(10, 141, 153)" - }, - "static-white-focus-indicator-color": { - "prop": "--spectrum-static-white-focus-indicator-color", - "ref": "var(--spectrum-white)", - "value": "rgb(255, 255, 255)" - }, - "static-white-text-color": { - "prop": "--spectrum-static-white-text-color", - "ref": "var(--spectrum-white)", - "value": "rgb(255, 255, 255)" - }, - "static-white-track-color": { - "prop": "--spectrum-static-white-track-color", - "ref": "var(--spectrum-transparent-white-300)", - "value": "rgba(255, 255, 255, 0.17)" - }, - "static-white-track-indicator-color": { - "prop": "--spectrum-static-white-track-indicator-color", - "ref": "var(--spectrum-transparent-white-900)", - "value": "rgba(255, 255, 255, 0.94)" - }, - "status-light-dot-size-extra-large": { - "prop": "--spectrum-status-light-dot-size-extra-large", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "16px" - } - }, - "status-light-dot-size-large": { - "prop": "--spectrum-status-light-dot-size-large", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "14px" - } - }, - "status-light-dot-size-medium": { - "prop": "--spectrum-status-light-dot-size-medium", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "status-light-dot-size-small": { - "prop": "--spectrum-status-light-dot-size-small", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "status-light-text-to-visual-100": { - "prop": "--spectrum-status-light-text-to-visual-100", - "ref": "var(--spectrum-text-to-visual-100)", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "status-light-text-to-visual-200": { - "prop": "--spectrum-status-light-text-to-visual-200", - "ref": "var(--spectrum-text-to-visual-200)", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "status-light-text-to-visual-300": { - "prop": "--spectrum-status-light-text-to-visual-300", - "ref": "var(--spectrum-text-to-visual-300)", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "status-light-text-to-visual-75": { - "prop": "--spectrum-status-light-text-to-visual-75", - "ref": "var(--spectrum-text-to-visual-75)", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "7px" - } - }, - "status-light-top-to-dot-extra-large": { - "prop": "--spectrum-status-light-top-to-dot-extra-large", - "desktop": { - "value": "17px" - }, - "mobile": { - "value": "22px" - } - }, - "status-light-top-to-dot-large": { - "prop": "--spectrum-status-light-top-to-dot-large", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "18px" - } - }, - "status-light-top-to-dot-medium": { - "prop": "--spectrum-status-light-top-to-dot-medium", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "14px" - } - }, - "status-light-top-to-dot-small": { - "prop": "--spectrum-status-light-top-to-dot-small", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "steplist-bottom-to-text": { - "prop": "--spectrum-steplist-bottom-to-text", - "value": "1px" - }, - "steplist-step-default-height-extra-large": { - "prop": "--spectrum-steplist-step-default-height-extra-large", - "value": "78px" - }, - "steplist-step-default-height-large": { - "prop": "--spectrum-steplist-step-default-height-large", - "value": "70px" - }, - "steplist-step-default-height-medium": { - "prop": "--spectrum-steplist-step-default-height-medium", - "value": "54px" - }, - "steplist-step-default-height-small": { - "prop": "--spectrum-steplist-step-default-height-small", - "value": "46px" - }, - "steplist-step-default-width-extra-large": { - "prop": "--spectrum-steplist-step-default-width-extra-large", - "value": "78px" - }, - "steplist-step-default-width-large": { - "prop": "--spectrum-steplist-step-default-width-large", - "value": "70px" - }, - "steplist-step-default-width-medium": { - "prop": "--spectrum-steplist-step-default-width-medium", - "value": "54px" - }, - "steplist-step-default-width-small": { - "prop": "--spectrum-steplist-step-default-width-small", - "value": "46px" - }, - "steplist-step-to-track-size-extra-large": { - "prop": "--spectrum-steplist-step-to-track-size-extra-large", - "value": "9px" - }, - "steplist-step-to-track-size-large": { - "prop": "--spectrum-steplist-step-to-track-size-large", - "value": "8px" - }, - "steplist-step-to-track-size-medium": { - "prop": "--spectrum-steplist-step-to-track-size-medium", - "value": "7px" - }, - "steplist-step-to-track-size-small": { - "prop": "--spectrum-steplist-step-to-track-size-small", - "value": "6px" - }, - "steplist-track-thickness-medium": { - "prop": "--spectrum-steplist-track-thickness-medium", - "value": "2px" - }, - "steplist-visual-size-extra-large": { - "prop": "--spectrum-steplist-visual-size-extra-large", - "value": "32px" - }, - "steplist-visual-size-large": { - "prop": "--spectrum-steplist-visual-size-large", - "value": "24px" - }, - "steplist-visual-size-medium": { - "prop": "--spectrum-steplist-visual-size-medium", - "value": "16px" - }, - "steplist-visual-size-small": { - "prop": "--spectrum-steplist-visual-size-small", - "value": "8px" - }, - "swatch-border-color": { - "prop": "--spectrum-swatch-border-color", - "ref": "var(--spectrum-gray-1000)", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(0, 0, 0)" - }, - "wireframe": { - "value": "rgb(0, 0, 0)" - } - }, - "swatch-border-opacity": { - "prop": "--spectrum-swatch-border-opacity", - "value": "0.42" - }, - "swatch-disabled-icon-border-color": { - "prop": "--spectrum-swatch-disabled-icon-border-color", - "ref": "var(--spectrum-black)", - "value": "rgb(0, 0, 0)" - }, - "swatch-disabled-icon-border-opacity": { - "prop": "--spectrum-swatch-disabled-icon-border-opacity", - "value": "0.42" - }, - "swatch-group-border-color": { - "prop": "--spectrum-swatch-group-border-color", - "ref": "var(--spectrum-gray-1000)", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(0, 0, 0)" - }, - "wireframe": { - "value": "rgb(0, 0, 0)" - } - }, - "swatch-group-border-opacity": { - "prop": "--spectrum-swatch-group-border-opacity", - "value": "0.2" - }, - "swatch-group-spacing-spacious": { - "prop": "--spectrum-swatch-group-spacing-spacious", - "value": "6px" - }, - "swatch-rectangle-width-multiplier": { - "prop": "--spectrum-swatch-rectangle-width-multiplier", - "value": "2" - }, - "swatch-size-extra-small": { - "prop": "--spectrum-swatch-size-extra-small", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "swatch-size-large": { - "prop": "--spectrum-swatch-size-large", - "desktop": { - "value": "40px" - }, - "mobile": { - "value": "50px" - } - }, - "swatch-size-medium": { - "prop": "--spectrum-swatch-size-medium", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "40px" - } - }, - "swatch-size-small": { - "prop": "--spectrum-swatch-size-small", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "30px" - } - }, - "swatch-slash-thickness-extra-small": { - "prop": "--spectrum-swatch-slash-thickness-extra-small", - "value": "2px" - }, - "swatch-slash-thickness-large": { - "prop": "--spectrum-swatch-slash-thickness-large", - "value": "5px" - }, - "swatch-slash-thickness-medium": { - "prop": "--spectrum-swatch-slash-thickness-medium", - "value": "4px" - }, - "swatch-slash-thickness-small": { - "prop": "--spectrum-swatch-slash-thickness-small", - "value": "3px" - }, - "switch-control-height-extra-large": { - "prop": "--spectrum-switch-control-height-extra-large", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "26px" - } - }, - "switch-control-height-large": { - "prop": "--spectrum-switch-control-height-large", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "switch-control-height-medium": { - "prop": "--spectrum-switch-control-height-medium", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "switch-control-height-small": { - "prop": "--spectrum-switch-control-height-small", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "18px" - } - }, - "switch-control-width-extra-large": { - "prop": "--spectrum-switch-control-width-extra-large", - "desktop": { - "value": "34px" - }, - "mobile": { - "value": "46px" - } - }, - "switch-control-width-large": { - "prop": "--spectrum-switch-control-width-large", - "desktop": { - "value": "30px" - }, - "mobile": { - "value": "38px" - } - }, - "switch-control-width-medium": { - "prop": "--spectrum-switch-control-width-medium", - "desktop": { - "value": "26px" - }, - "mobile": { - "value": "34px" - } - }, - "switch-control-width-small": { - "prop": "--spectrum-switch-control-width-small", - "desktop": { - "value": "22px" - }, - "mobile": { - "value": "30px" - } - }, - "switch-handle-selected-size-extra-large": { - "prop": "--spectrum-switch-handle-selected-size-extra-large", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "20px" - } - }, - "switch-handle-selected-size-large": { - "prop": "--spectrum-switch-handle-selected-size-large", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "16px" - } - }, - "switch-handle-selected-size-medium": { - "prop": "--spectrum-switch-handle-selected-size-medium", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "14px" - } - }, - "switch-handle-selected-size-small": { - "prop": "--spectrum-switch-handle-selected-size-small", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "12px" - } - }, - "switch-handle-size-extra-large": { - "prop": "--spectrum-switch-handle-size-extra-large", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "18px" - } - }, - "switch-handle-size-large": { - "prop": "--spectrum-switch-handle-size-large", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "14px" - } - }, - "switch-handle-size-medium": { - "prop": "--spectrum-switch-handle-size-medium", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "12px" - } - }, - "switch-handle-size-small": { - "prop": "--spectrum-switch-handle-size-small", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "10px" - } - }, - "switch-top-to-control-extra-large": { - "prop": "--spectrum-switch-top-to-control-extra-large", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "19px" - } - }, - "switch-top-to-control-large": { - "prop": "--spectrum-switch-top-to-control-large", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "switch-top-to-control-medium": { - "prop": "--spectrum-switch-top-to-control-medium", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "switch-top-to-control-small": { - "prop": "--spectrum-switch-top-to-control-small", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "7px" - } - }, - "tab-item-bottom-to-text-compact-extra-large": { - "prop": "--spectrum-tab-item-bottom-to-text-compact-extra-large", - "desktop": { - "value": "13px" - }, - "mobile": { - "value": "17px" - } - }, - "tab-item-bottom-to-text-compact-large": { - "prop": "--spectrum-tab-item-bottom-to-text-compact-large", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "14px" - } - }, - "tab-item-bottom-to-text-compact-medium": { - "prop": "--spectrum-tab-item-bottom-to-text-compact-medium", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "tab-item-bottom-to-text-compact-small": { - "prop": "--spectrum-tab-item-bottom-to-text-compact-small", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "6px" - } - }, - "tab-item-bottom-to-text-extra-large": { - "prop": "--spectrum-tab-item-bottom-to-text-extra-large", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "25px" - } - }, - "tab-item-bottom-to-text-large": { - "prop": "--spectrum-tab-item-bottom-to-text-large", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "tab-item-bottom-to-text-medium": { - "prop": "--spectrum-tab-item-bottom-to-text-medium", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "19px" - } - }, - "tab-item-bottom-to-text-small": { - "prop": "--spectrum-tab-item-bottom-to-text-small", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "tab-item-compact-height-extra-large": { - "prop": "--spectrum-tab-item-compact-height-extra-large", - "ref": "var(--spectrum-component-height-300)", - "desktop": { - "value": "48px" - }, - "mobile": { - "value": "60px" - } - }, - "tab-item-compact-height-large": { - "prop": "--spectrum-tab-item-compact-height-large", - "ref": "var(--spectrum-component-height-200)", - "desktop": { - "value": "40px" - }, - "mobile": { - "value": "50px" - } - }, - "tab-item-compact-height-medium": { - "prop": "--spectrum-tab-item-compact-height-medium", - "ref": "var(--spectrum-component-height-100)", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "40px" - } - }, - "tab-item-compact-height-small": { - "prop": "--spectrum-tab-item-compact-height-small", - "ref": "var(--spectrum-component-height-75)", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "30px" - } - }, - "tab-item-focus-indicator-gap-extra-large": { - "prop": "--spectrum-tab-item-focus-indicator-gap-extra-large", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "tab-item-focus-indicator-gap-large": { - "prop": "--spectrum-tab-item-focus-indicator-gap-large", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "tab-item-focus-indicator-gap-medium": { - "prop": "--spectrum-tab-item-focus-indicator-gap-medium", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "tab-item-focus-indicator-gap-small": { - "prop": "--spectrum-tab-item-focus-indicator-gap-small", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "tab-item-height-extra-large": { - "prop": "--spectrum-tab-item-height-extra-large", - "ref": "var(--spectrum-component-height-500)", - "desktop": { - "value": "64px" - }, - "mobile": { - "value": "80px" - } - }, - "tab-item-height-large": { - "prop": "--spectrum-tab-item-height-large", - "ref": "var(--spectrum-component-height-400)", - "desktop": { - "value": "56px" - }, - "mobile": { - "value": "70px" - } - }, - "tab-item-height-medium": { - "prop": "--spectrum-tab-item-height-medium", - "ref": "var(--spectrum-component-height-300)", - "desktop": { - "value": "48px" - }, - "mobile": { - "value": "60px" - } - }, - "tab-item-height-small": { - "prop": "--spectrum-tab-item-height-small", - "ref": "var(--spectrum-component-height-200)", - "desktop": { - "value": "40px" - }, - "mobile": { - "value": "50px" - } - }, - "tab-item-start-to-edge-extra-large": { - "prop": "--spectrum-tab-item-start-to-edge-extra-large", - "desktop": { - "value": "13px" - }, - "mobile": { - "value": "19px" - } - }, - "tab-item-start-to-edge-large": { - "prop": "--spectrum-tab-item-start-to-edge-large", - "desktop": { - "value": "13px" - }, - "mobile": { - "value": "17px" - } - }, - "tab-item-start-to-edge-medium": { - "prop": "--spectrum-tab-item-start-to-edge-medium", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "tab-item-start-to-edge-quiet": { - "prop": "--spectrum-tab-item-start-to-edge-quiet", - "value": "0px" - }, - "tab-item-start-to-edge-small": { - "prop": "--spectrum-tab-item-start-to-edge-small", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "13px" - } - }, - "tab-item-to-tab-item-horizontal-extra-large": { - "prop": "--spectrum-tab-item-to-tab-item-horizontal-extra-large", - "desktop": { - "value": "30px" - }, - "mobile": { - "value": "36px" - } - }, - "tab-item-to-tab-item-horizontal-large": { - "prop": "--spectrum-tab-item-to-tab-item-horizontal-large", - "desktop": { - "value": "27px" - }, - "mobile": { - "value": "33px" - } - }, - "tab-item-to-tab-item-horizontal-medium": { - "prop": "--spectrum-tab-item-to-tab-item-horizontal-medium", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "30px" - } - }, - "tab-item-to-tab-item-horizontal-small": { - "prop": "--spectrum-tab-item-to-tab-item-horizontal-small", - "desktop": { - "value": "21px" - }, - "mobile": { - "value": "27px" - } - }, - "tab-item-to-tab-item-vertical-extra-large": { - "prop": "--spectrum-tab-item-to-tab-item-vertical-extra-large", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "6px" - } - }, - "tab-item-to-tab-item-vertical-large": { - "prop": "--spectrum-tab-item-to-tab-item-vertical-large", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "6px" - } - }, - "tab-item-to-tab-item-vertical-medium": { - "prop": "--spectrum-tab-item-to-tab-item-vertical-medium", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "tab-item-to-tab-item-vertical-small": { - "prop": "--spectrum-tab-item-to-tab-item-vertical-small", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "tab-item-top-to-text-compact-extra-large": { - "prop": "--spectrum-tab-item-top-to-text-compact-extra-large", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "tab-item-top-to-text-compact-large": { - "prop": "--spectrum-tab-item-top-to-text-compact-large", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "tab-item-top-to-text-compact-medium": { - "prop": "--spectrum-tab-item-top-to-text-compact-medium", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "9px" - } - }, - "tab-item-top-to-text-compact-small": { - "prop": "--spectrum-tab-item-top-to-text-compact-small", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "tab-item-top-to-text-extra-large": { - "prop": "--spectrum-tab-item-top-to-text-extra-large", - "desktop": { - "value": "19px" - }, - "mobile": { - "value": "25px" - } - }, - "tab-item-top-to-text-large": { - "prop": "--spectrum-tab-item-top-to-text-large", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "22px" - } - }, - "tab-item-top-to-text-medium": { - "prop": "--spectrum-tab-item-top-to-text-medium", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "18px" - } - }, - "tab-item-top-to-text-small": { - "prop": "--spectrum-tab-item-top-to-text-small", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "14px" - } - }, - "tab-item-top-to-workflow-icon-compact-extra-large": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-compact-extra-large", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "16px" - } - }, - "tab-item-top-to-workflow-icon-compact-large": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-compact-large", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "13px" - } - }, - "tab-item-top-to-workflow-icon-compact-medium": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-compact-medium", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "tab-item-top-to-workflow-icon-compact-small": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-compact-small", - "desktop": { - "value": "3px" - }, - "mobile": { - "value": "5px" - } - }, - "tab-item-top-to-workflow-icon-extra-large": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-extra-large", - "desktop": { - "value": "19px" - }, - "mobile": { - "value": "26px" - } - }, - "tab-item-top-to-workflow-icon-large": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-large", - "desktop": { - "value": "17px" - }, - "mobile": { - "value": "23px" - } - }, - "tab-item-top-to-workflow-icon-medium": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-medium", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "19px" - } - }, - "tab-item-top-to-workflow-icon-small": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-small", - "desktop": { - "value": "13px" - }, - "mobile": { - "value": "15px" - } - }, - "table-border-divider-width": { - "prop": "--spectrum-table-border-divider-width", - "value": "1px" - }, - "table-checkbox-to-text": { - "prop": "--spectrum-table-checkbox-to-text", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "30px" - } - }, - "table-column-header-row-bottom-to-text-extra-large": { - "prop": "--spectrum-table-column-header-row-bottom-to-text-extra-large", - "desktop": { - "value": "13px" - }, - "mobile": { - "value": "17px" - } - }, - "table-column-header-row-bottom-to-text-large": { - "prop": "--spectrum-table-column-header-row-bottom-to-text-large", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "13px" - } - }, - "table-column-header-row-bottom-to-text-medium": { - "prop": "--spectrum-table-column-header-row-bottom-to-text-medium", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "table-column-header-row-bottom-to-text-small": { - "prop": "--spectrum-table-column-header-row-bottom-to-text-small", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "table-column-header-row-top-to-text-extra-large": { - "prop": "--spectrum-table-column-header-row-top-to-text-extra-large", - "desktop": { - "value": "13px" - }, - "mobile": { - "value": "16px" - } - }, - "table-column-header-row-top-to-text-large": { - "prop": "--spectrum-table-column-header-row-top-to-text-large", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "13px" - } - }, - "table-column-header-row-top-to-text-medium": { - "prop": "--spectrum-table-column-header-row-top-to-text-medium", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "9px" - } - }, - "table-column-header-row-top-to-text-small": { - "prop": "--spectrum-table-column-header-row-top-to-text-small", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "table-edge-to-content": { - "prop": "--spectrum-table-edge-to-content", - "value": "16px" - }, - "table-header-row-checkbox-to-top-extra-large": { - "prop": "--spectrum-table-header-row-checkbox-to-top-extra-large", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "21px" - } - }, - "table-header-row-checkbox-to-top-large": { - "prop": "--spectrum-table-header-row-checkbox-to-top-large", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "17px" - } - }, - "table-header-row-checkbox-to-top-medium": { - "prop": "--spectrum-table-header-row-checkbox-to-top-medium", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "11px" - } - }, - "table-header-row-checkbox-to-top-small": { - "prop": "--spectrum-table-header-row-checkbox-to-top-small", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "14px" - } - }, - "table-row-bottom-to-text-extra-large": { - "prop": "--spectrum-table-row-bottom-to-text-extra-large", - "desktop": { - "value": "17px" - }, - "mobile": { - "value": "22px" - } - }, - "table-row-bottom-to-text-extra-large-compact": { - "prop": "--spectrum-table-row-bottom-to-text-extra-large-compact", - "ref": "var(--spectrum-component-bottom-to-text-300)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "18px" - } - }, - "table-row-bottom-to-text-extra-large-regular": { - "prop": "--spectrum-table-row-bottom-to-text-extra-large-regular", - "ref": "var(--spectrum-table-row-bottom-to-text-extra-large)", - "desktop": { - "value": "17px" - }, - "mobile": { - "value": "22px" - } - }, - "table-row-bottom-to-text-extra-large-spacious": { - "prop": "--spectrum-table-row-bottom-to-text-extra-large-spacious", - "desktop": { - "value": "21px" - }, - "mobile": { - "value": "27px" - } - }, - "table-row-bottom-to-text-large": { - "prop": "--spectrum-table-row-bottom-to-text-large", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "18px" - } - }, - "table-row-bottom-to-text-large-compact": { - "prop": "--spectrum-table-row-bottom-to-text-large-compact", - "ref": "var(--spectrum-component-bottom-to-text-200)", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "14px" - } - }, - "table-row-bottom-to-text-large-regular": { - "prop": "--spectrum-table-row-bottom-to-text-large-regular", - "ref": "var(--spectrum-table-row-bottom-to-text-large)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "18px" - } - }, - "table-row-bottom-to-text-large-spacious": { - "prop": "--spectrum-table-row-bottom-to-text-large-spacious", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "23px" - } - }, - "table-row-bottom-to-text-medium": { - "prop": "--spectrum-table-row-bottom-to-text-medium", - "desktop": { - "value": "13px" - }, - "mobile": { - "value": "15px" - } - }, - "table-row-bottom-to-text-medium-compact": { - "prop": "--spectrum-table-row-bottom-to-text-medium-compact", - "ref": "var(--spectrum-component-bottom-to-text-100)", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "table-row-bottom-to-text-medium-regular": { - "prop": "--spectrum-table-row-bottom-to-text-medium-regular", - "ref": "var(--spectrum-table-row-bottom-to-text-medium)", - "desktop": { - "value": "13px" - }, - "mobile": { - "value": "15px" - } - }, - "table-row-bottom-to-text-medium-spacious": { - "prop": "--spectrum-table-row-bottom-to-text-medium-spacious", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "18px" - } - }, - "table-row-bottom-to-text-small": { - "prop": "--spectrum-table-row-bottom-to-text-small", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "table-row-bottom-to-text-small-compact": { - "prop": "--spectrum-table-row-bottom-to-text-small-compact", - "ref": "var(--spectrum-component-bottom-to-text-75)", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "6px" - } - }, - "table-row-bottom-to-text-small-regular": { - "prop": "--spectrum-table-row-bottom-to-text-small-regular", - "ref": "var(--spectrum-table-row-bottom-to-text-small)", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "table-row-bottom-to-text-small-spacious": { - "prop": "--spectrum-table-row-bottom-to-text-small-spacious", - "desktop": { - "value": "13px" - }, - "mobile": { - "value": "16px" - } - }, - "table-row-checkbox-to-top-extra-large": { - "prop": "--spectrum-table-row-checkbox-to-top-extra-large", - "desktop": { - "value": "19px" - }, - "mobile": { - "value": "26px" - } - }, - "table-row-checkbox-to-top-extra-large-compact": { - "prop": "--spectrum-table-row-checkbox-to-top-extra-large-compact", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "21px" - } - }, - "table-row-checkbox-to-top-extra-large-regular": { - "prop": "--spectrum-table-row-checkbox-to-top-extra-large-regular", - "ref": "var(--spectrum-table-row-checkbox-to-top-extra-large)", - "desktop": { - "value": "19px" - }, - "mobile": { - "value": "26px" - } - }, - "table-row-checkbox-to-top-extra-large-spacious": { - "prop": "--spectrum-table-row-checkbox-to-top-extra-large-spacious", - "desktop": { - "value": "23px" - }, - "mobile": { - "value": "31px" - } - }, - "table-row-checkbox-to-top-large": { - "prop": "--spectrum-table-row-checkbox-to-top-large", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "22px" - } - }, - "table-row-checkbox-to-top-large-compact": { - "prop": "--spectrum-table-row-checkbox-to-top-large-compact", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "17px" - } - }, - "table-row-checkbox-to-top-large-regular": { - "prop": "--spectrum-table-row-checkbox-to-top-large-regular", - "ref": "var(--spectrum-table-row-checkbox-to-top-large)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "22px" - } - }, - "table-row-checkbox-to-top-large-spacious": { - "prop": "--spectrum-table-row-checkbox-to-top-large-spacious", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "27px" - } - }, - "table-row-checkbox-to-top-medium": { - "prop": "--spectrum-table-row-checkbox-to-top-medium", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "16px" - } - }, - "table-row-checkbox-to-top-medium-compact": { - "prop": "--spectrum-table-row-checkbox-to-top-medium-compact", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "11px" - } - }, - "table-row-checkbox-to-top-medium-regular": { - "prop": "--spectrum-table-row-checkbox-to-top-medium-regular", - "ref": "var(--spectrum-table-row-checkbox-to-top-medium)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "16px" - } - }, - "table-row-checkbox-to-top-medium-spacious": { - "prop": "--spectrum-table-row-checkbox-to-top-medium-spacious", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "21px" - } - }, - "table-row-checkbox-to-top-small": { - "prop": "--spectrum-table-row-checkbox-to-top-small", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "14px" - } - }, - "table-row-checkbox-to-top-small-compact": { - "prop": "--spectrum-table-row-checkbox-to-top-small-compact", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "9px" - } - }, - "table-row-checkbox-to-top-small-regular": { - "prop": "--spectrum-table-row-checkbox-to-top-small-regular", - "ref": "var(--spectrum-table-row-checkbox-to-top-small)", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "14px" - } - }, - "table-row-checkbox-to-top-small-spacious": { - "prop": "--spectrum-table-row-checkbox-to-top-small-spacious", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "19px" - } - }, - "table-row-down-opacity": { - "prop": "--spectrum-table-row-down-opacity", - "value": "0.1" - }, - "table-row-height-extra-large": { - "prop": "--spectrum-table-row-height-extra-large", - "desktop": { - "value": "56px" - }, - "mobile": { - "value": "70px" - } - }, - "table-row-height-extra-large-compact": { - "prop": "--spectrum-table-row-height-extra-large-compact", - "ref": "var(--spectrum-component-height-300)", - "desktop": { - "value": "48px" - }, - "mobile": { - "value": "60px" - } - }, - "table-row-height-extra-large-regular": { - "prop": "--spectrum-table-row-height-extra-large-regular", - "ref": "var(--spectrum-table-row-height-extra-large)", - "desktop": { - "value": "56px" - }, - "mobile": { - "value": "70px" - } - }, - "table-row-height-extra-large-spacious": { - "prop": "--spectrum-table-row-height-extra-large-spacious", - "desktop": { - "value": "64px" - }, - "mobile": { - "value": "80px" - } - }, - "table-row-height-large": { - "prop": "--spectrum-table-row-height-large", - "desktop": { - "value": "48px" - }, - "mobile": { - "value": "60px" - } - }, - "table-row-height-large-compact": { - "prop": "--spectrum-table-row-height-large-compact", - "ref": "var(--spectrum-component-height-200)", - "desktop": { - "value": "40px" - }, - "mobile": { - "value": "50px" - } - }, - "table-row-height-large-regular": { - "prop": "--spectrum-table-row-height-large-regular", - "ref": "var(--spectrum-table-row-height-large)", - "desktop": { - "value": "48px" - }, - "mobile": { - "value": "60px" - } - }, - "table-row-height-large-spacious": { - "prop": "--spectrum-table-row-height-large-spacious", - "desktop": { - "value": "56px" - }, - "mobile": { - "value": "70px" - } - }, - "table-row-height-medium": { - "prop": "--spectrum-table-row-height-medium", - "desktop": { - "value": "40px" - }, - "mobile": { - "value": "50px" - } - }, - "table-row-height-medium-compact": { - "prop": "--spectrum-table-row-height-medium-compact", - "ref": "var(--spectrum-component-height-100)", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "40px" - } - }, - "table-row-height-medium-regular": { - "prop": "--spectrum-table-row-height-medium-regular", - "ref": "var(--spectrum-table-row-height-medium)", - "desktop": { - "value": "40px" - }, - "mobile": { - "value": "50px" - } - }, - "table-row-height-medium-spacious": { - "prop": "--spectrum-table-row-height-medium-spacious", - "desktop": { - "value": "48px" - }, - "mobile": { - "value": "60px" - } - }, - "table-row-height-small": { - "prop": "--spectrum-table-row-height-small", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "40px" - } - }, - "table-row-height-small-compact": { - "prop": "--spectrum-table-row-height-small-compact", - "ref": "var(--spectrum-component-height-75)", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "30px" - } - }, - "table-row-height-small-regular": { - "prop": "--spectrum-table-row-height-small-regular", - "ref": "var(--spectrum-table-row-height-small)", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "40px" - } - }, - "table-row-height-small-spacious": { - "prop": "--spectrum-table-row-height-small-spacious", - "desktop": { - "value": "40px" - }, - "mobile": { - "value": "50px" - } - }, - "table-row-hover-color": { - "prop": "--spectrum-table-row-hover-color", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - }, - "wireframe": { - "value": "rgb(10, 19, 39)" - } - }, - "table-row-hover-opacity": { - "prop": "--spectrum-table-row-hover-opacity", - "value": "0.07" - }, - "table-row-top-to-text-extra-large": { - "prop": "--spectrum-table-row-top-to-text-extra-large", - "desktop": { - "value": "17px" - }, - "mobile": { - "value": "21px" - } - }, - "table-row-top-to-text-extra-large-compact": { - "prop": "--spectrum-table-row-top-to-text-extra-large-compact", - "ref": "var(--spectrum-component-top-to-text-300)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "table-row-top-to-text-extra-large-regular": { - "prop": "--spectrum-table-row-top-to-text-extra-large-regular", - "ref": "var(--spectrum-table-row-top-to-text-extra-large)", - "desktop": { - "value": "17px" - }, - "mobile": { - "value": "21px" - } - }, - "table-row-top-to-text-extra-large-spacious": { - "prop": "--spectrum-table-row-top-to-text-extra-large-spacious", - "desktop": { - "value": "21px" - }, - "mobile": { - "value": "26px" - } - }, - "table-row-top-to-text-large": { - "prop": "--spectrum-table-row-top-to-text-large", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "18px" - } - }, - "table-row-top-to-text-large-compact": { - "prop": "--spectrum-table-row-top-to-text-large-compact", - "ref": "var(--spectrum-component-top-to-text-200)", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "12px" - } - }, - "table-row-top-to-text-large-regular": { - "prop": "--spectrum-table-row-top-to-text-large-regular", - "ref": "var(--spectrum-table-row-top-to-text-large)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "18px" - } - }, - "table-row-top-to-text-large-spacious": { - "prop": "--spectrum-table-row-top-to-text-large-spacious", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "23px" - } - }, - "table-row-top-to-text-medium": { - "prop": "--spectrum-table-row-top-to-text-medium", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "14px" - } - }, - "table-row-top-to-text-medium-compact": { - "prop": "--spectrum-table-row-top-to-text-medium-compact", - "ref": "var(--spectrum-component-top-to-text-100)", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "table-row-top-to-text-medium-regular": { - "prop": "--spectrum-table-row-top-to-text-medium-regular", - "ref": "var(--spectrum-table-row-top-to-text-medium)", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "14px" - } - }, - "table-row-top-to-text-medium-spacious": { - "prop": "--spectrum-table-row-top-to-text-medium-spacious", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "16px" - } - }, - "table-row-top-to-text-small": { - "prop": "--spectrum-table-row-top-to-text-small", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "table-row-top-to-text-small-compact": { - "prop": "--spectrum-table-row-top-to-text-small-compact", - "ref": "var(--spectrum-component-top-to-text-75)", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "table-row-top-to-text-small-regular": { - "prop": "--spectrum-table-row-top-to-text-small-regular", - "ref": "var(--spectrum-table-row-top-to-text-small)", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "table-row-top-to-text-small-spacious": { - "prop": "--spectrum-table-row-top-to-text-small-spacious", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "table-section-header-row-height-extra-large": { - "prop": "--spectrum-table-section-header-row-height-extra-large", - "desktop": { - "value": "48px" - }, - "mobile": { - "value": "60px" - } - }, - "table-section-header-row-height-large": { - "prop": "--spectrum-table-section-header-row-height-large", - "desktop": { - "value": "40px" - }, - "mobile": { - "value": "50px" - } - }, - "table-section-header-row-height-medium": { - "prop": "--spectrum-table-section-header-row-height-medium", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "40px" - } - }, - "table-section-header-row-height-small": { - "prop": "--spectrum-table-section-header-row-height-small", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "30px" - } - }, - "table-selected-row-background-color": { - "prop": "--spectrum-table-selected-row-background-color", - "ref": "var(--spectrum-informative-background-color-default)", - "light": { - "value": "rgb(59, 99, 251)" - }, - "dark": { - "value": "rgb(86, 129, 255)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "table-selected-row-background-color-non-emphasized": { - "prop": "--spectrum-table-selected-row-background-color-non-emphasized", - "ref": "var(--spectrum-neutral-background-color-selected-default)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" - }, - "wireframe": { - "value": "rgb(25, 46, 93)" - } - }, - "table-selected-row-background-opacity": { - "prop": "--spectrum-table-selected-row-background-opacity", - "value": "0.1" - }, - "table-selected-row-background-opacity-hover": { - "prop": "--spectrum-table-selected-row-background-opacity-hover", - "value": "0.15" - }, - "table-selected-row-background-opacity-non-emphasized": { - "prop": "--spectrum-table-selected-row-background-opacity-non-emphasized", - "value": "0.1" - }, - "table-selected-row-background-opacity-non-emphasized-hover": { - "prop": "--spectrum-table-selected-row-background-opacity-non-emphasized-hover", - "value": "0.15" - }, - "table-thumbnail-to-top-minimum-extra-large": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "table-thumbnail-to-top-minimum-extra-large-compact": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large-compact", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "table-thumbnail-to-top-minimum-extra-large-regular": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large-regular", - "ref": "var(--spectrum-table-thumbnail-to-top-minimum-extra-large)", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "table-thumbnail-to-top-minimum-extra-large-spacious": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "table-thumbnail-to-top-minimum-large": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-large", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "table-thumbnail-to-top-minimum-large-compact": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-large-compact", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "table-thumbnail-to-top-minimum-large-regular": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-large-regular", - "ref": "var(--spectrum-table-thumbnail-to-top-minimum-large)", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "table-thumbnail-to-top-minimum-large-spacious": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-large-spacious", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "table-thumbnail-to-top-minimum-medium": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-medium", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "table-thumbnail-to-top-minimum-medium-compact": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-medium-compact", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "6px" - } - }, - "table-thumbnail-to-top-minimum-medium-regular": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-medium-regular", - "ref": "var(--spectrum-table-thumbnail-to-top-minimum-medium)", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "table-thumbnail-to-top-minimum-medium-spacious": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-medium-spacious", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "table-thumbnail-to-top-minimum-small": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-small", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "6px" - } - }, - "table-thumbnail-to-top-minimum-small-compact": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-small-compact", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "table-thumbnail-to-top-minimum-small-regular": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-small-regular", - "ref": "var(--spectrum-table-thumbnail-to-top-minimum-small)", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "6px" - } - }, - "table-thumbnail-to-top-minimum-small-spacious": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-small-spacious", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "tag-edge-to-clear-icon-large": { - "prop": "--spectrum-tag-edge-to-clear-icon-large", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "19px" - } - }, - "tag-edge-to-clear-icon-medium": { - "prop": "--spectrum-tag-edge-to-clear-icon-medium", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "tag-edge-to-clear-icon-small": { - "prop": "--spectrum-tag-edge-to-clear-icon-small", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "tag-field-default-width-large": { - "prop": "--spectrum-tag-field-default-width-large", - "desktop": { - "value": "288px" - }, - "mobile": { - "value": "312px" - } - }, - "tag-field-default-width-medium": { - "prop": "--spectrum-tag-field-default-width-medium", - "desktop": { - "value": "264px" - }, - "mobile": { - "value": "288px" - } - }, - "tag-field-default-width-small": { - "prop": "--spectrum-tag-field-default-width-small", - "desktop": { - "value": "240px" - }, - "mobile": { - "value": "264px" - } - }, - "tag-field-edge-to-content-large": { - "prop": "--spectrum-tag-field-edge-to-content-large", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "16px" - } - }, - "tag-field-edge-to-content-medium": { - "prop": "--spectrum-tag-field-edge-to-content-medium", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "14px" - } - }, - "tag-field-edge-to-content-small": { - "prop": "--spectrum-tag-field-edge-to-content-small", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "tag-field-minimum-height-large": { - "prop": "--spectrum-tag-field-minimum-height-large", - "desktop": { - "value": "68px" - }, - "mobile": { - "value": "82px" - } - }, - "tag-field-minimum-height-medium": { - "prop": "--spectrum-tag-field-minimum-height-medium", - "desktop": { - "value": "56px" - }, - "mobile": { - "value": "68px" - } - }, - "tag-field-minimum-height-small": { - "prop": "--spectrum-tag-field-minimum-height-small", - "desktop": { - "value": "44px" - }, - "mobile": { - "value": "54px" - } - }, - "tag-field-minimum-width": { - "prop": "--spectrum-tag-field-minimum-width", - "desktop": { - "value": "180px" - }, - "mobile": { - "value": "200px" - } - }, - "tag-label-to-clear-icon-large": { - "prop": "--spectrum-tag-label-to-clear-icon-large", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "19px" - } - }, - "tag-label-to-clear-icon-medium": { - "prop": "--spectrum-tag-label-to-clear-icon-medium", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "tag-label-to-clear-icon-small": { - "prop": "--spectrum-tag-label-to-clear-icon-small", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "tag-maximum-width-multiplier": { - "prop": "--spectrum-tag-maximum-width-multiplier", - "value": "7" - }, - "tag-minimum-width-large": { - "prop": "--spectrum-tag-minimum-width-large", - "desktop": { - "value": "33px" - }, - "mobile": { - "value": "42px" - } - }, - "tag-minimum-width-medium": { - "prop": "--spectrum-tag-minimum-width-medium", - "desktop": { - "value": "27px" - }, - "mobile": { - "value": "34px" - } - }, - "tag-minimum-width-multiplier": { - "prop": "--spectrum-tag-minimum-width-multiplier", - "value": "1" - }, - "tag-minimum-width-small": { - "prop": "--spectrum-tag-minimum-width-small", - "desktop": { - "value": "21px" - }, - "mobile": { - "value": "25px" - } - }, - "tag-top-to-avatar-large": { - "prop": "--spectrum-tag-top-to-avatar-large", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "tag-top-to-avatar-medium": { - "prop": "--spectrum-tag-top-to-avatar-medium", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "7px" - } - }, - "tag-top-to-avatar-small": { - "prop": "--spectrum-tag-top-to-avatar-small", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "tag-top-to-cross-icon-large": { - "prop": "--spectrum-tag-top-to-cross-icon-large", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "19px" - } - }, - "tag-top-to-cross-icon-medium": { - "prop": "--spectrum-tag-top-to-cross-icon-medium", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "tag-top-to-cross-icon-small": { - "prop": "--spectrum-tag-top-to-cross-icon-small", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "takeover-dialog-height": { - "prop": "--spectrum-takeover-dialog-height", - "value": "100%" - }, - "takeover-dialog-width": { - "prop": "--spectrum-takeover-dialog-width", - "value": "100%" - }, - "text-align-center": { - "prop": "--spectrum-text-align-center", - "value": "center" - }, - "text-align-end": { - "prop": "--spectrum-text-align-end", - "value": "end" - }, - "text-align-start": { - "prop": "--spectrum-text-align-start", - "value": "start" - }, - "text-area-minimum-height": { - "prop": "--spectrum-text-area-minimum-height", - "desktop": { - "value": "56px" - }, - "mobile": { - "value": "70px" - } - }, - "text-area-minimum-width": { - "prop": "--spectrum-text-area-minimum-width", - "desktop": { - "value": "112px" - }, - "mobile": { - "value": "140px" - } - }, - "text-field-minimum-width-multiplier": { - "prop": "--spectrum-text-field-minimum-width-multiplier", - "value": "1.5" - }, - "text-to-control-100": { - "prop": "--spectrum-text-to-control-100", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "13px" - } - }, - "text-to-control-200": { - "prop": "--spectrum-text-to-control-200", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "14px" - } - }, - "text-to-control-300": { - "prop": "--spectrum-text-to-control-300", - "desktop": { - "value": "13px" - }, - "mobile": { - "value": "16px" - } - }, - "text-to-control-50": { - "prop": "--spectrum-text-to-control-50", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "text-to-control-75": { - "prop": "--spectrum-text-to-control-75", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "text-to-visual-100": { - "prop": "--spectrum-text-to-visual-100", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "text-to-visual-200": { - "prop": "--spectrum-text-to-visual-200", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } - }, - "text-to-visual-300": { - "prop": "--spectrum-text-to-visual-300", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "text-to-visual-400": { - "prop": "--spectrum-text-to-visual-400", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "text-to-visual-50": { - "prop": "--spectrum-text-to-visual-50", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "7px" - } - }, - "text-to-visual-75": { - "prop": "--spectrum-text-to-visual-75", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "7px" - } - }, - "text-underline-gap": { - "prop": "--spectrum-text-underline-gap", - "value": "1px" - }, - "text-underline-thickness": { - "prop": "--spectrum-text-underline-thickness", - "value": "1px" - }, - "thumbnail-border-color": { - "prop": "--spectrum-thumbnail-border-color", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" - }, - "wireframe": { - "value": "rgb(25, 46, 93)" - } - }, - "thumbnail-border-opacity": { - "prop": "--spectrum-thumbnail-border-opacity", - "value": "0.1" - }, - "thumbnail-corner-radius": { - "prop": "--spectrum-thumbnail-corner-radius", - "ref": "var(--spectrum-corner-radius-75)", - "value": "3px" - }, - "thumbnail-opacity-checkerboard-square-size": { - "prop": "--spectrum-thumbnail-opacity-checkerboard-square-size", - "value": "4px" - }, - "thumbnail-opacity-disabled": { - "prop": "--spectrum-thumbnail-opacity-disabled", - "ref": "var(--spectrum-opacity-disabled)", - "value": "0.3" - }, - "thumbnail-size-100": { - "prop": "--spectrum-thumbnail-size-100", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "28px" - } - }, - "thumbnail-size-1000": { - "prop": "--spectrum-thumbnail-size-1000", - "desktop": { - "value": "64px" - }, - "mobile": { - "value": "72px" - } - }, - "thumbnail-size-200": { - "prop": "--spectrum-thumbnail-size-200", - "desktop": { - "value": "28px" - }, - "mobile": { - "value": "32px" - } - }, - "thumbnail-size-300": { - "prop": "--spectrum-thumbnail-size-300", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "36px" - } - }, - "thumbnail-size-400": { - "prop": "--spectrum-thumbnail-size-400", - "desktop": { - "value": "36px" - }, - "mobile": { - "value": "40px" - } - }, - "thumbnail-size-50": { - "prop": "--spectrum-thumbnail-size-50", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "thumbnail-size-500": { - "prop": "--spectrum-thumbnail-size-500", - "desktop": { - "value": "40px" - }, - "mobile": { - "value": "44px" - } - }, - "thumbnail-size-600": { - "prop": "--spectrum-thumbnail-size-600", - "desktop": { - "value": "44px" - }, - "mobile": { - "value": "48px" - } - }, - "thumbnail-size-700": { - "prop": "--spectrum-thumbnail-size-700", - "desktop": { - "value": "48px" - }, - "mobile": { - "value": "52px" - } - }, - "thumbnail-size-75": { - "prop": "--spectrum-thumbnail-size-75", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "thumbnail-size-800": { - "prop": "--spectrum-thumbnail-size-800", - "desktop": { - "value": "52px" - }, - "mobile": { - "value": "56px" - } - }, - "thumbnail-size-900": { - "prop": "--spectrum-thumbnail-size-900", - "desktop": { - "value": "56px" - }, - "mobile": { - "value": "64px" - } - }, - "time-field-minimum-width": { - "prop": "--spectrum-time-field-minimum-width", - "value": "2.5" - }, - "time-field-text-to-visual": { - "prop": "--spectrum-time-field-text-to-visual", - "value": "20px" - }, - "title-cjk-emphasized-font-style": { - "prop": "--spectrum-title-cjk-emphasized-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "title-cjk-emphasized-font-weight": { - "prop": "--spectrum-title-cjk-emphasized-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" - }, - "title-cjk-font-family": { - "prop": "--spectrum-title-cjk-font-family", - "ref": "var(--spectrum-cjk-font-family)", - "value": "Adobe Clean Han" - }, - "title-cjk-font-style": { - "prop": "--spectrum-title-cjk-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "title-cjk-font-weight": { - "prop": "--spectrum-title-cjk-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "title-cjk-line-height": { - "prop": "--spectrum-title-cjk-line-height", - "ref": "var(--spectrum-cjk-line-height-100)", - "value": "1.5" - }, - "title-cjk-size-l": { - "prop": "--spectrum-title-cjk-size-l", - "ref": "var(--spectrum-font-size-200)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "19px" - } - }, - "title-cjk-size-m": { - "prop": "--spectrum-title-cjk-size-m", - "ref": "var(--spectrum-font-size-100)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "title-cjk-size-s": { - "prop": "--spectrum-title-cjk-size-s", - "ref": "var(--spectrum-font-size-75)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "title-cjk-size-xl": { - "prop": "--spectrum-title-cjk-size-xl", - "ref": "var(--spectrum-font-size-300)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "title-cjk-size-xs": { - "prop": "--spectrum-title-cjk-size-xs", - "ref": "var(--spectrum-font-size-50)", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "13px" - } - }, - "title-cjk-size-xxl": { - "prop": "--spectrum-title-cjk-size-xxl", - "ref": "var(--spectrum-font-size-400)", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "title-cjk-size-xxxl": { - "prop": "--spectrum-title-cjk-size-xxxl", - "ref": "var(--spectrum-font-size-500)", - "desktop": { - "value": "22px" - }, - "mobile": { - "value": "27px" - } - }, - "title-cjk-strong-emphasized-font-style": { - "prop": "--spectrum-title-cjk-strong-emphasized-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "title-cjk-strong-emphasized-font-weight": { - "prop": "--spectrum-title-cjk-strong-emphasized-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" - }, - "title-cjk-strong-font-style": { - "prop": "--spectrum-title-cjk-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "title-cjk-strong-font-weight": { - "prop": "--spectrum-title-cjk-strong-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" - }, - "title-color": { - "prop": "--spectrum-title-color", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - }, - "wireframe": { - "value": "rgb(10, 19, 39)" - } - }, - "title-line-height": { - "prop": "--spectrum-title-line-height", - "ref": "var(--spectrum-line-height-100)", - "value": "1.3" - }, - "title-margin-bottom-multiplier": { - "prop": "--spectrum-title-margin-bottom-multiplier", - "value": "0.25" - }, - "title-margin-top-multiplier": { - "prop": "--spectrum-title-margin-top-multiplier", - "value": "0.88888889" - }, - "title-sans-serif-emphasized-font-style": { - "prop": "--spectrum-title-sans-serif-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "title-sans-serif-emphasized-font-weight": { - "prop": "--spectrum-title-sans-serif-emphasized-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "title-sans-serif-font-family": { - "prop": "--spectrum-title-sans-serif-font-family", - "ref": "var(--spectrum-sans-serif-font-family)", - "value": "Adobe Clean Spectrum VF" - }, - "title-sans-serif-font-style": { - "prop": "--spectrum-title-sans-serif-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "title-sans-serif-font-weight": { - "prop": "--spectrum-title-sans-serif-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "title-sans-serif-strong-emphasized-font-style": { - "prop": "--spectrum-title-sans-serif-strong-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "title-sans-serif-strong-emphasized-font-weight": { - "prop": "--spectrum-title-sans-serif-strong-emphasized-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" - }, - "title-sans-serif-strong-font-style": { - "prop": "--spectrum-title-sans-serif-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "title-sans-serif-strong-font-weight": { - "prop": "--spectrum-title-sans-serif-strong-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" - }, - "title-serif-emphasized-font-style": { - "prop": "--spectrum-title-serif-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "title-serif-emphasized-font-weight": { - "prop": "--spectrum-title-serif-emphasized-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "title-serif-font-family": { - "prop": "--spectrum-title-serif-font-family", - "ref": "var(--spectrum-serif-font-family)", - "value": "Adobe Clean Serif" - }, - "title-serif-font-style": { - "prop": "--spectrum-title-serif-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "title-serif-font-weight": { - "prop": "--spectrum-title-serif-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "title-serif-strong-emphasized-font-style": { - "prop": "--spectrum-title-serif-strong-emphasized-font-style", - "ref": "var(--spectrum-italic-font-style)", - "value": "italic" - }, - "title-serif-strong-emphasized-font-weight": { - "prop": "--spectrum-title-serif-strong-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" - }, - "title-serif-strong-font-style": { - "prop": "--spectrum-title-serif-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "title-serif-strong-font-weight": { - "prop": "--spectrum-title-serif-strong-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" - }, - "title-size-l": { - "prop": "--spectrum-title-size-l", - "ref": "var(--spectrum-font-size-300)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "title-size-m": { - "prop": "--spectrum-title-size-m", - "ref": "var(--spectrum-font-size-200)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "19px" - } - }, - "title-size-s": { - "prop": "--spectrum-title-size-s", - "ref": "var(--spectrum-font-size-100)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "title-size-xl": { - "prop": "--spectrum-title-size-xl", - "ref": "var(--spectrum-font-size-400)", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "title-size-xs": { - "prop": "--spectrum-title-size-xs", - "ref": "var(--spectrum-font-size-75)", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "title-size-xxl": { - "prop": "--spectrum-title-size-xxl", - "ref": "var(--spectrum-font-size-500)", - "desktop": { - "value": "22px" - }, - "mobile": { - "value": "27px" - } - }, - "title-size-xxxl": { - "prop": "--spectrum-title-size-xxxl", - "ref": "var(--spectrum-font-size-600)", - "desktop": { - "value": "25px" - }, - "mobile": { - "value": "31px" - } - }, - "toast-bottom-to-text": { - "prop": "--spectrum-toast-bottom-to-text", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "22px" - } - }, - "toast-height": { - "prop": "--spectrum-toast-height", - "desktop": { - "value": "52px" - }, - "mobile": { - "value": "60px" - } - }, - "toast-maximum-width": { - "prop": "--spectrum-toast-maximum-width", - "desktop": { - "value": "336px" - }, - "mobile": { - "value": "420px" - } - }, - "toast-top-to-text": { - "prop": "--spectrum-toast-top-to-text", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "20px" - } - }, - "toast-top-to-workflow-icon": { - "prop": "--spectrum-toast-top-to-workflow-icon", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "20px" - } - }, - "tooltip-maximum-width": { - "prop": "--spectrum-tooltip-maximum-width", - "desktop": { - "value": "160px" - }, - "mobile": { - "value": "200px" - } - }, - "tooltip-tip-corner-radius": { - "prop": "--spectrum-tooltip-tip-corner-radius", - "value": "1px" - }, - "tooltip-tip-height": { - "prop": "--spectrum-tooltip-tip-height", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "6px" - } - }, - "tooltip-tip-width": { - "prop": "--spectrum-tooltip-tip-width", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "track-color": { - "prop": "--spectrum-track-color", - "ref": "var(--spectrum-gray-300)", - "light": { - "value": "rgb(218, 218, 218)" - }, - "dark": { - "value": "rgb(57, 57, 57)" - }, - "wireframe": { - "value": "rgb(207, 219, 245)" - } - }, - "transparent-black-100": { - "prop": "--spectrum-transparent-black-100", - "value": "rgba(0, 0, 0, 0.09)" - }, - "transparent-black-1000": { - "prop": "--spectrum-transparent-black-1000", - "value": "rgb(0, 0, 0)" - }, - "transparent-black-200": { - "prop": "--spectrum-transparent-black-200", - "value": "rgba(0, 0, 0, 0.12)" - }, - "transparent-black-25": { - "prop": "--spectrum-transparent-black-25", - "value": "rgba(0, 0, 0, 0)" - }, - "transparent-black-300": { - "prop": "--spectrum-transparent-black-300", - "value": "rgba(0, 0, 0, 0.15)" - }, - "transparent-black-400": { - "prop": "--spectrum-transparent-black-400", - "value": "rgba(0, 0, 0, 0.22)" - }, - "transparent-black-50": { - "prop": "--spectrum-transparent-black-50", - "value": "rgba(0, 0, 0, 0.03)" - }, - "transparent-black-500": { - "prop": "--spectrum-transparent-black-500", - "value": "rgba(0, 0, 0, 0.44)" - }, - "transparent-black-600": { - "prop": "--spectrum-transparent-black-600", - "value": "rgba(0, 0, 0, 0.56)" - }, - "transparent-black-700": { - "prop": "--spectrum-transparent-black-700", - "value": "rgba(0, 0, 0, 0.69)" - }, - "transparent-black-75": { - "prop": "--spectrum-transparent-black-75", - "value": "rgba(0, 0, 0, 0.05)" - }, - "transparent-black-800": { - "prop": "--spectrum-transparent-black-800", - "value": "rgba(0, 0, 0, 0.84)" - }, - "transparent-black-900": { - "prop": "--spectrum-transparent-black-900", - "value": "rgba(0, 0, 0, 0.93)" - }, - "transparent-white-100": { - "prop": "--spectrum-transparent-white-100", - "value": "rgba(255, 255, 255, 0.11)" - }, - "transparent-white-1000": { - "prop": "--spectrum-transparent-white-1000", - "value": "rgb(255, 255, 255)" - }, - "transparent-white-200": { - "prop": "--spectrum-transparent-white-200", - "value": "rgba(255, 255, 255, 0.14)" - }, - "transparent-white-25": { - "prop": "--spectrum-transparent-white-25", - "value": "rgba(255, 255, 255, 0)" - }, - "transparent-white-300": { - "prop": "--spectrum-transparent-white-300", - "value": "rgba(255, 255, 255, 0.17)" - }, - "transparent-white-400": { - "prop": "--spectrum-transparent-white-400", - "value": "rgba(255, 255, 255, 0.21)" - }, - "transparent-white-50": { - "prop": "--spectrum-transparent-white-50", - "value": "rgba(255, 255, 255, 0.04)" - }, - "transparent-white-500": { - "prop": "--spectrum-transparent-white-500", - "value": "rgba(255, 255, 255, 0.39)" - }, - "transparent-white-600": { - "prop": "--spectrum-transparent-white-600", - "value": "rgba(255, 255, 255, 0.51)" - }, - "transparent-white-700": { - "prop": "--spectrum-transparent-white-700", - "value": "rgba(255, 255, 255, 0.66)" - }, - "transparent-white-75": { - "prop": "--spectrum-transparent-white-75", - "value": "rgba(255, 255, 255, 0.07)" - }, - "transparent-white-800": { - "prop": "--spectrum-transparent-white-800", - "value": "rgba(255, 255, 255, 0.85)" - }, - "transparent-white-900": { - "prop": "--spectrum-transparent-white-900", - "value": "rgba(255, 255, 255, 0.94)" - }, - "tray-top-to-content-area": { - "prop": "--spectrum-tray-top-to-content-area", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "tree-view-bottom-to-label": { - "prop": "--spectrum-tree-view-bottom-to-label", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "16px" - } - }, - "tree-view-disclosure-indicator-height": { - "prop": "--spectrum-tree-view-disclosure-indicator-height", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "40px" - } - }, - "tree-view-disclosure-indicator-width": { - "prop": "--spectrum-tree-view-disclosure-indicator-width", - "desktop": { - "value": "34px" - }, - "mobile": { - "value": "42px" - } - }, - "tree-view-drag-handle-to-checkbox": { - "prop": "--spectrum-tree-view-drag-handle-to-checkbox", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "tree-view-edge-to-checkbox": { - "prop": "--spectrum-tree-view-edge-to-checkbox", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "tree-view-edge-to-drag-handle": { - "prop": "--spectrum-tree-view-edge-to-drag-handle", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "tree-view-end-edge-to-action-area": { - "prop": "--spectrum-tree-view-end-edge-to-action-area", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "7px" - } - }, - "tree-view-header-to-item": { - "prop": "--spectrum-tree-view-header-to-item", - "value": "-1px" - }, - "tree-view-item-to-header": { - "prop": "--spectrum-tree-view-item-to-header", - "desktop": { - "value": "24px" - }, - "mobile": { - "value": "30px" - } - }, - "tree-view-item-to-item": { - "prop": "--spectrum-tree-view-item-to-item", - "ref": "var(--spectrum-tree-view-item-to-item-default)", - "value": "-1px" - }, - "tree-view-item-to-item-default": { - "prop": "--spectrum-tree-view-item-to-item-default", - "value": "-1px" - }, - "tree-view-item-to-item-detached": { - "prop": "--spectrum-tree-view-item-to-item-detached", - "value": "2px" - }, - "tree-view-label-to-action-area": { - "prop": "--spectrum-tree-view-label-to-action-area", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "tree-view-level-increment": { - "prop": "--spectrum-tree-view-level-increment", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "tree-view-minimum-height": { - "prop": "--spectrum-tree-view-minimum-height", - "desktop": { - "value": "40px" - }, - "mobile": { - "value": "50px" - } - }, - "tree-view-minimum-top-to-context-area": { - "prop": "--spectrum-tree-view-minimum-top-to-context-area", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "tree-view-minimum-width": { - "prop": "--spectrum-tree-view-minimum-width", - "desktop": { - "value": "160px" - }, - "mobile": { - "value": "200px" - } - }, - "tree-view-row-background-hover": { - "prop": "--spectrum-tree-view-row-background-hover", - "ref": "var(--spectrum-gray-100)", - "light": { - "value": "rgb(233, 233, 233)" - }, - "dark": { - "value": "rgb(44, 44, 44)" - }, - "wireframe": { - "value": "rgb(228, 234, 249)" - } - }, - "tree-view-selected-row-background-color-emphasized": { - "prop": "--spectrum-tree-view-selected-row-background-color-emphasized", - "ref": "var(--spectrum-informative-background-color-default)", - "light": { - "value": "rgb(59, 99, 251)" - }, - "dark": { - "value": "rgb(86, 129, 255)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "tree-view-selected-row-background-default": { - "prop": "--spectrum-tree-view-selected-row-background-default", - "ref": "var(--spectrum-gray-100)", - "light": { - "value": "rgb(233, 233, 233)" - }, - "dark": { - "value": "rgb(44, 44, 44)" - }, - "wireframe": { - "value": "rgb(228, 234, 249)" - } - }, - "tree-view-selected-row-background-hover": { - "prop": "--spectrum-tree-view-selected-row-background-hover", - "ref": "var(--spectrum-gray-100)", - "light": { - "value": "rgb(233, 233, 233)" - }, - "dark": { - "value": "rgb(44, 44, 44)" - }, - "wireframe": { - "value": "rgb(228, 234, 249)" - } - }, - "tree-view-selected-row-background-opacity-emphasized": { - "prop": "--spectrum-tree-view-selected-row-background-opacity-emphasized", - "value": "0.1" - }, - "tree-view-selected-row-background-opacity-emphasized-hover": { - "prop": "--spectrum-tree-view-selected-row-background-opacity-emphasized-hover", - "value": "0.15" - }, - "tree-view-top-to-action-button": { - "prop": "--spectrum-tree-view-top-to-action-button", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "tree-view-top-to-checkbox": { - "prop": "--spectrum-tree-view-top-to-checkbox", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "tree-view-top-to-disclosure-indicator": { - "prop": "--spectrum-tree-view-top-to-disclosure-indicator", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "19px" - } - }, - "tree-view-top-to-drag-handle": { - "prop": "--spectrum-tree-view-top-to-drag-handle", - "desktop": { - "value": "15px" - }, - "mobile": { - "value": "19px" - } - }, - "tree-view-top-to-label": { - "prop": "--spectrum-tree-view-top-to-label", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "13px" - } - }, - "triple-calendar-popover-minimum-height": { - "prop": "--spectrum-triple-calendar-popover-minimum-height", - "value": "320px" - }, - "triple-calendar-popover-minimum-width": { - "prop": "--spectrum-triple-calendar-popover-minimum-width", - "value": "912px" - }, - "turquoise-100": { - "prop": "--spectrum-turquoise-100", - "dark": { - "value": "rgb(0, 30, 33)" - }, - "light": { - "value": "rgb(238, 251, 251)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "turquoise-1000": { - "prop": "--spectrum-turquoise-1000", - "dark": { - "value": "rgb(13, 168, 182)" - }, - "light": { - "value": "rgb(5, 107, 116)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "turquoise-1100": { - "prop": "--spectrum-turquoise-1100", - "dark": { - "value": "rgb(16, 186, 202)" - }, - "light": { - "value": "rgb(3, 90, 98)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "turquoise-1200": { - "prop": "--spectrum-turquoise-1200", - "dark": { - "value": "rgb(64, 208, 220)" - }, - "light": { - "value": "rgb(1, 74, 81)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "turquoise-1300": { - "prop": "--spectrum-turquoise-1300", - "dark": { - "value": "rgb(128, 225, 231)" - }, - "light": { - "value": "rgb(0, 59, 65)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "turquoise-1400": { - "prop": "--spectrum-turquoise-1400", - "dark": { - "value": "rgb(183, 240, 240)" - }, - "light": { - "value": "rgb(0, 44, 49)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "turquoise-1500": { - "prop": "--spectrum-turquoise-1500", - "dark": { - "value": "rgb(228, 249, 249)" - }, - "light": { - "value": "rgb(0, 32, 35)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "turquoise-1600": { - "prop": "--spectrum-turquoise-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(0, 15, 17)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "turquoise-200": { - "prop": "--spectrum-turquoise-200", - "dark": { - "value": "rgb(0, 37, 41)" - }, - "light": { - "value": "rgb(209, 245, 245)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "turquoise-300": { - "prop": "--spectrum-turquoise-300", - "dark": { - "value": "rgb(0, 49, 54)" - }, - "light": { - "value": "rgb(169, 236, 237)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "turquoise-400": { - "prop": "--spectrum-turquoise-400", - "dark": { - "value": "rgb(0, 66, 72)" - }, - "light": { - "value": "rgb(111, 221, 228)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "turquoise-500": { - "prop": "--spectrum-turquoise-500", - "dark": { - "value": "rgb(3, 84, 92)" - }, - "light": { - "value": "rgb(39, 202, 216)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "turquoise-600": { - "prop": "--spectrum-turquoise-600", - "dark": { - "value": "rgb(5, 103, 112)" - }, - "light": { - "value": "rgb(15, 177, 192)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "turquoise-700": { - "prop": "--spectrum-turquoise-700", - "dark": { - "value": "rgb(7, 120, 131)" - }, - "light": { - "value": "rgb(12, 158, 171)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "turquoise-800": { - "prop": "--spectrum-turquoise-800", - "dark": { - "value": "rgb(9, 131, 142)" - }, - "light": { - "value": "rgb(10, 141, 153)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "turquoise-900": { - "prop": "--spectrum-turquoise-900", - "dark": { - "value": "rgb(11, 151, 164)" - }, - "light": { - "value": "rgb(8, 126, 137)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "turquoise-background-color-default": { - "prop": "--spectrum-turquoise-background-color-default", - "ref": "var(--spectrum-turquoise-900)", - "dark": { - "value": "rgb(11, 151, 164)" - }, - "light": { - "value": "rgb(8, 126, 137)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "turquoise-subtle-background-color-default": { - "prop": "--spectrum-turquoise-subtle-background-color-default", - "ref": "var(--spectrum-turquoise-200)", - "dark": { - "value": "rgb(0, 37, 41)" - }, - "light": { - "value": "rgb(209, 245, 245)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "turquoise-visual-color": { - "prop": "--spectrum-turquoise-visual-color", - "ref": "var(--spectrum-turquoise-800)", - "dark": { - "value": "rgb(9, 131, 142)" - }, - "light": { - "value": "rgb(10, 141, 153)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "user-card-minimum-height-extra-large": { - "prop": "--spectrum-user-card-minimum-height-extra-large", - "value": "236px" - }, - "user-card-minimum-height-large": { - "prop": "--spectrum-user-card-minimum-height-large", - "value": "219px" - }, - "user-card-minimum-height-medium": { - "prop": "--spectrum-user-card-minimum-height-medium", - "value": "202px" - }, - "user-card-minimum-height-small": { - "prop": "--spectrum-user-card-minimum-height-small", - "value": "192px" - }, - "user-card-minimum-height-title-below-extra-large": { - "prop": "--spectrum-user-card-minimum-height-title-below-extra-large", - "value": "263px" - }, - "user-card-minimum-height-title-below-large": { - "prop": "--spectrum-user-card-minimum-height-title-below-large", - "value": "244px" - }, - "user-card-minimum-height-title-below-medium": { - "prop": "--spectrum-user-card-minimum-height-title-below-medium", - "value": "224px" - }, - "user-card-minimum-height-title-below-small": { - "prop": "--spectrum-user-card-minimum-height-title-below-small", - "value": "212px" - }, - "visual-to-control-100": { - "prop": "--spectrum-visual-to-control-100", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "white": { - "prop": "--spectrum-white", - "value": "rgb(255, 255, 255)" - }, - "window-to-edge": { - "prop": "--spectrum-window-to-edge", - "ref": "var(--spectrum-spacing-600)", - "value": "40px" - }, - "workflow-icon-size-100": { - "prop": "--spectrum-workflow-icon-size-100", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "workflow-icon-size-200": { - "prop": "--spectrum-workflow-icon-size-200", - "desktop": { - "value": "22px" - }, - "mobile": { - "value": "28px" - } - }, - "workflow-icon-size-300": { - "prop": "--spectrum-workflow-icon-size-300", - "desktop": { - "value": "26px" - }, - "mobile": { - "value": "30px" - } - }, - "workflow-icon-size-50": { - "prop": "--spectrum-workflow-icon-size-50", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "16px" - } - }, - "workflow-icon-size-75": { - "prop": "--spectrum-workflow-icon-size-75", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "18px" - } - }, - "yellow-100": { - "prop": "--spectrum-yellow-100", - "light": { - "value": "rgb(255, 248, 204)" - }, - "dark": { - "value": "rgb(37, 23, 0)" - }, - "wireframe": { - "value": "rgb(246, 248, 252)" - } - }, - "yellow-1000": { - "prop": "--spectrum-yellow-1000", - "light": { - "value": "rgb(134, 85, 0)" - }, - "dark": { - "value": "rgb(203, 141, 0)" - }, - "wireframe": { - "value": "rgb(61, 94, 165)" - } - }, - "yellow-1100": { - "prop": "--spectrum-yellow-1100", - "light": { - "value": "rgb(114, 72, 0)" - }, - "dark": { - "value": "rgb(218, 159, 0)" - }, - "wireframe": { - "value": "rgb(52, 79, 140)" - } - }, - "yellow-1200": { - "prop": "--spectrum-yellow-1200", - "light": { - "value": "rgb(93, 59, 0)" - }, - "dark": { - "value": "rgb(235, 183, 0)" - }, - "wireframe": { - "value": "rgb(42, 65, 114)" - } - }, - "yellow-1300": { - "prop": "--spectrum-yellow-1300", - "light": { - "value": "rgb(75, 47, 0)" - }, - "dark": { - "value": "rgb(249, 206, 0)" - }, - "wireframe": { - "value": "rgb(34, 51, 91)" - } - }, - "yellow-1400": { - "prop": "--spectrum-yellow-1400", - "light": { - "value": "rgb(56, 35, 0)" - }, - "dark": { - "value": "rgb(255, 230, 86)" - }, - "wireframe": { - "value": "rgb(25, 39, 69)" - } - }, - "yellow-1500": { - "prop": "--spectrum-yellow-1500", - "dark": { - "value": "rgb(255, 246, 195)" - }, - "light": { - "value": "rgb(40, 25, 0)" - }, - "wireframe": { - "value": "rgb(18, 27, 48)" - } - }, - "yellow-1600": { - "prop": "--spectrum-yellow-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(18, 11, 0)" - }, - "wireframe": { - "value": "rgb(8, 12, 22)" - } - }, - "yellow-200": { - "prop": "--spectrum-yellow-200", - "light": { - "value": "rgb(255, 241, 151)" - }, - "dark": { - "value": "rgb(47, 29, 0)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "yellow-300": { - "prop": "--spectrum-yellow-300", - "light": { - "value": "rgb(255, 222, 44)" - }, - "dark": { - "value": "rgb(61, 39, 0)" - }, - "wireframe": { - "value": "rgb(216, 224, 242)" - } - }, - "yellow-400": { - "prop": "--spectrum-yellow-400", - "light": { - "value": "rgb(245, 199, 0)" - }, - "dark": { - "value": "rgb(83, 52, 0)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "yellow-500": { - "prop": "--spectrum-yellow-500", - "light": { - "value": "rgb(230, 175, 0)" - }, - "dark": { - "value": "rgb(107, 67, 0)" - }, - "wireframe": { - "value": "rgb(164, 183, 225)" - } - }, - "yellow-600": { - "prop": "--spectrum-yellow-600", - "light": { - "value": "rgb(210, 149, 0)" - }, - "dark": { - "value": "rgb(130, 82, 0)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - }, - "yellow-700": { - "prop": "--spectrum-yellow-700", - "light": { - "value": "rgb(193, 131, 0)" - }, - "dark": { - "value": "rgb(151, 97, 0)" - }, - "wireframe": { - "value": "rgb(113, 142, 208)" - } - }, - "yellow-800": { - "prop": "--spectrum-yellow-800", - "light": { - "value": "rgb(175, 116, 0)" - }, - "dark": { - "value": "rgb(164, 106, 0)" - }, - "wireframe": { - "value": "rgb(93, 127, 201)" - } - }, - "yellow-900": { - "prop": "--spectrum-yellow-900", - "light": { - "value": "rgb(158, 102, 0)" - }, - "dark": { - "value": "rgb(186, 124, 0)" - }, - "wireframe": { - "value": "rgb(74, 111, 195)" - } - }, - "yellow-background-color-default": { - "prop": "--spectrum-yellow-background-color-default", - "ref": "var(--spectrum-yellow-400)", - "light": { - "value": "rgb(245, 199, 0)" - }, - "dark": { - "value": "rgb(83, 52, 0)" - }, - "wireframe": { - "value": "rgb(192, 205, 234)" - } - }, - "yellow-subtle-background-color-default": { - "prop": "--spectrum-yellow-subtle-background-color-default", - "ref": "var(--spectrum-yellow-200)", - "light": { - "value": "rgb(255, 241, 151)" - }, - "dark": { - "value": "rgb(47, 29, 0)" - }, - "wireframe": { - "value": "rgb(235, 239, 248)" - } - }, - "yellow-visual-color": { - "prop": "--spectrum-yellow-visual-color", - "ref": "var(--spectrum-yellow-600)", - "light": { - "value": "rgb(210, 149, 0)" - }, - "dark": { - "value": "rgb(130, 82, 0)" - }, - "wireframe": { - "value": "rgb(135, 160, 215)" - } - } -} \ No newline at end of file diff --git a/tokens/package.json b/tokens/package.json index 385a0611e9c..7fbd4a51532 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -31,8 +31,12 @@ "glob": "^11.0.3", "lodash-es": "^4.17.21", "postcss": "^8.5.6", + "postcss-cli": "^11.0.1", "postcss-sorting": "^9.1.0", - "style-dictionary": "^4.4.0" + "prettier": "^3.6.2", + "rimraf": "^6.0.1", + "style-dictionary": "^4.4.0", + "yargs": "^18.0.0" }, "keywords": [ "design-system", diff --git a/tokens/postcss.config.js b/tokens/postcss.config.js index 1a7d7d22cfa..8db1d18cb21 100644 --- a/tokens/postcss.config.js +++ b/tokens/postcss.config.js @@ -13,10 +13,21 @@ import postcssConfig from "../postcss.config.js"; -export default (options) => postcssConfig({ - ...options, +import yargs from "yargs"; +import { hideBin } from "yargs/helpers"; + +const { ext } = yargs(hideBin(process.argv)) + .option("ext", { + type: "string", + default: ".css", + }) + .argv; + +/** @type {import("postcss").ProcessOptions} */ +export default (ctx = {}) => postcssConfig({ + ...ctx, + minify: ext?.includes("min.") ?? false, env: "production", - map: false, additionalPlugins: { "@spectrum-tools/postcss-rgb-mapping": { colorFunctionalNotation: false, @@ -25,20 +36,5 @@ export default (options) => postcssConfig({ order: ["custom-properties", "declarations", "at-rules", "rules"], "properties-order": "alphabetical", }, - cssnano: { - preset: [ - "cssnano-preset-advanced", - { - colormin: false, - discardComments: { removeAll: true }, - // @todo yarn add -DW css-declaration-sorter - cssDeclarationSorter: false, // @todo { order: "smacss" }, - normalizeWhitespace: false, - }, - ], - }, - "postcss-licensing": { - filename: "../COPYRIGHT", - }, }, }); diff --git a/tokens/project.json b/tokens/project.json index 4b7ae1b556c..6862ff4d702 100644 --- a/tokens/project.json +++ b/tokens/project.json @@ -2,28 +2,46 @@ "name": "tokens", "tag": ["tokens"], "namedInputs": { - "core": [ - "{projectRoot}/custom/*.css" + "core": ["{projectRoot}/custom-tokens.json"], + "scripts": [ + "{projectRoot}/style-dictionary.config.js", + "{projectRoot}/utilities/*.js" ], - "scripts": ["{projectRoot}/style-dictionary.config.js", "{projectRoot}/utilities/*.js"], - "tools": ["{projectRoot}/postcss.config.js", "{projectRoot}/tasks/token-rollup.js"] + "tools": ["{projectRoot}/postcss.config.js"] }, "targets": { "build": { "cache": false, - "dependsOn": ["clean", "style-dictionary"], + "dependsOn": ["clean"], "executor": "nx:run-commands", - "inputs": ["core", "tools", { "externalDependencies": ["postcss"] }], + "inputs": [ + "core", + "tools", + { + "externalDependencies": [ + "postcss", + "postcss-cli", + "prettier", + "@adobe/spectrum-tokens" + ] + } + ], "options": { "commands": [ - "node --no-warnings ./tasks/token-rollup.js" + "style-dictionary build --config style-dictionary.config.js --verbose", + "postcss ./dist/css/index.css ./dist/css/mobile.css --replace", + "postcss ./dist/css/index.css ./dist/css/mobile.css --dir ./dist/css --ext min.css" ], "cwd": "{projectRoot}", "parallel": false }, "outputs": [ - "{projectRoot}/dist/css/*-vars.css", - "{projectRoot}/dist/css/index.css" + "{projectRoot}/dist/css/index.css", + "{projectRoot}/dist/css/mobile.css", + "{projectRoot}/dist/css/index.min.css", + "{projectRoot}/dist/css/mobile.min.css", + "{projectRoot}/dist/json/tokens.json", + "{projectRoot}/dist/json/raw.json" ] }, "clean": { @@ -39,46 +57,22 @@ }, "outputs": [] }, - "diff": { + "compare": { "cache": true, "executor": "nx:run-commands", - "inputs": [{ "externalDependencies": ["glob", "@adobe/token-diff-generator"] }], + "inputs": [ + { "externalDependencies": ["glob", "@adobe/token-diff-generator"] } + ], "options": { "commands": [ "tdiff report --old-token-version @adobe/spectrum-tokens@{args.v1} --new-token-version @adobe/spectrum-tokens@{args.v2} --format markdown --output {projectRoot}/dist/tokens-diff.md" ], "forwardAllArgs": true, - "v1": "13.13.0", - "v2": "13.14.0" + "v1": "13.15.0" }, - "outputs": [ - "{projectRoot}/dist/tokens-diff.md" - ] + "outputs": ["{projectRoot}/dist/tokens-diff.md"] }, "format": {}, - "lint": {}, - "style-dictionary": { - "dependsOn": ["clean"], - "executor": "nx:run-commands", - "inputs": [ - "{projectRoot}/postcss.config.js", - "{projectRoot}/style-dictionary.config.js", - "{projectRoot}/utilities/style-dictionary.utils.js" - ], - "options": { - "commands": [ - "style-dictionary build --config style-dictionary.config.js" - ], - "cwd": "{projectRoot}" - }, - "outputs": [ - "{projectRoot}/dist/css/global-vars.css", - "{projectRoot}/dist/css/light-vars.css", - "{projectRoot}/dist/css/dark-vars.css", - "{projectRoot}/dist/css/medium-vars.css", - "{projectRoot}/dist/css/large-vars.css", - "{projectRoot}/dist/json/tokens.json" - ] - } + "lint": {} } } diff --git a/tokens/style-dictionary.config.js b/tokens/style-dictionary.config.js index 25dbaaa04a0..636c3fd6eb2 100644 --- a/tokens/style-dictionary.config.js +++ b/tokens/style-dictionary.config.js @@ -15,19 +15,16 @@ import { dirname, join, sep } from "path"; import StyleDictionary from "style-dictionary"; import { - AttributeSetsTransform, CSSBorderRoundingTransform, + CSSOpacityPercentTransform, CSSOpenTypeTransform, CSSSetsFormatter, DataJsonFormatter, - NameKebabTransfom, } from "./utilities/index.js"; StyleDictionary.registerTransform(CSSOpenTypeTransform); StyleDictionary.registerTransform(CSSBorderRoundingTransform); -StyleDictionary.registerTransform(NameKebabTransfom); -StyleDictionary.registerTransform(AttributeSetsTransform); - +StyleDictionary.registerTransform(CSSOpacityPercentTransform); StyleDictionary.registerFormat(CSSSetsFormatter); StyleDictionary.registerFormat(DataJsonFormatter); @@ -39,100 +36,51 @@ StyleDictionary.registerFormat(DataJsonFormatter); const tokensPath = import.meta.resolve("@adobe/spectrum-tokens/package.json")?.replace(/file:\/\//, ""); const tokensDir = dirname(tokensPath); +/** + * @type {import('style-dictionary').Config} + */ export default { - source: [join(tokensDir, "src", "*.json")], + source: [join(tokensDir, "src", "*.json"), "custom-tokens.json"], hooks: { transforms: { - [AttributeSetsTransform.name]: AttributeSetsTransform, - [NameKebabTransfom.name]: NameKebabTransfom, [CSSOpenTypeTransform.name]: CSSOpenTypeTransform, [CSSBorderRoundingTransform.name]: CSSBorderRoundingTransform, + [CSSOpacityPercentTransform.name]: CSSOpacityPercentTransform, }, }, platforms: { css: { buildPath: join("dist", "css") + sep, + prefix: "spectrum", + outputReferences: true, + outputReferenceFallbacks: false, + showFileHeader: false, transforms: [ - AttributeSetsTransform.name, - NameKebabTransfom.name, + "name/kebab", CSSOpenTypeTransform.name, CSSBorderRoundingTransform.name, + CSSOpacityPercentTransform.name, ], - prefix: "spectrum", files: [ { format: "css/sets", - options: { showFileHeader: false, outputReferences: true }, - destination: "global-vars.css", - filter: (token) => { - const tokenSets = token.path.filter((_, idx, array) => array[idx - 1] == "sets"); - if (tokenSets.includes("wireframe")) return false; - if (tokenSets.length === 0) return true; - return false; - }, - }, - { - format: "css/sets", - options: { - showFileHeader: false, - outputReferences: true, - sets: ["desktop"], - }, - destination: "medium-vars.css", filter: (token) => { - const tokenSets = token.path.filter((_, idx, array) => array[idx - 1] == "sets"); - if (tokenSets.includes("wireframe")) return false; - if (!tokenSets.includes("desktop")) return false; - if (tokenSets.length === 1) return true; - return false; + // filter out tokens that are in the local components folder + if (token.filePath?.split(sep)?.includes("components")) return false; + if (token.name.includes("android-")) return false; + if (token.path.includes("sets") && token.path.includes("mobile")) return false; + return true; }, + destination: "index.css", }, { format: "css/sets", - options: { - showFileHeader: false, - outputReferences: true, - sets: ["mobile"], - }, - destination: "large-vars.css", + destination: "mobile.css", filter: (token) => { - // Fetch the sets for this token - const tokenSets = token.path.filter((_, idx, array) => array[idx - 1] == "sets"); - if (tokenSets.includes("wireframe")) return false; - if (!tokenSets.includes("mobile")) return false; - if (tokenSets.length === 1) return true; - return false; - }, - }, - { - format: "css/sets", - options: { - showFileHeader: false, - outputReferences: true, - sets: ["light"], - }, - destination: "light-vars.css", - filter: (token) => { - const tokenSets = token.path.filter((_, idx, array) => array[idx - 1] == "sets"); - if (tokenSets.includes("wireframe")) return false; - if (!tokenSets.includes("light")) return false; - if (tokenSets.length === 1) return true; - return false; - }, - }, - { - format: "css/sets", - options: { - showFileHeader: false, - outputReferences: true, - sets: ["dark"], - }, - destination: "dark-vars.css", - filter: (token) => { - const tokenSets = token.path.filter((_, idx, array) => array[idx - 1] == "sets"); - if (tokenSets.includes("wireframe")) return false; - if (!tokenSets.includes("dark")) return false; - if (tokenSets.length === 1) return true; + // filter out tokens that are in the local components folder + if (token.filePath?.split(sep)?.includes("components")) return false; + if (token.name.includes("android-")) return false; + if (token.path.includes("sets") && token.path.includes("mobile")) return true; return false; }, }, @@ -140,16 +88,16 @@ export default { }, JSON: { buildPath: join("dist", "json") + sep, + prefix: "spectrum", transforms: [ "attribute/cti", "attribute/color", "name/kebab", "fontFamily/css", - AttributeSetsTransform.name, CSSOpenTypeTransform.name, CSSBorderRoundingTransform.name, + CSSOpacityPercentTransform.name, ], - prefix: "spectrum", files: [ { format: "json/nested", diff --git a/tokens/tasks/token-rollup.js b/tokens/tasks/token-rollup.js deleted file mode 100644 index a7348bd394d..00000000000 --- a/tokens/tasks/token-rollup.js +++ /dev/null @@ -1,167 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* eslint-disable no-console */ - -import fs, { existsSync, mkdirSync } from "fs"; -import { join } from "path"; -const fsp = fs.promises; - -import fg from "fast-glob"; - -import { processCSS } from "../../tasks/component-builder.js"; -import { fetchContent } from "../../tasks/utilities.js"; - -import "colors"; - -/** - * Create a tagline for the CSS file based on the package.json data - * @param {Object} [packageJson={}] - * @param {string} packageJson.name - * @param {string} packageJson.version - * @returns - */ -function generateTagline({ name, version } = {}) { - if (!name) return ""; - if (!version) return `/* ${name} */\n\n`; - return `/* ${name}@v${version} */\n\n`; -} - -/** - * The builder for the main entry point - * @param {object} config - * @param {string} config.cwd - Current working directory for the component being built - * @param {boolean} config.clean - Should the built assets be cleaned before running the build - * @returns Promise - */ -async function index(inputGlob, outputPath, { cwd = process.cwd(), clean = false } = {}) { - // Read in the package version from the package.json file - const packageJson = await fsp.readFile(join(cwd, "package.json"), "utf-8").then(JSON.parse); - - const inputs = await fg(inputGlob, { cwd }); - const contents = inputs.map(input => `@import "@spectrum-css/tokens/${input}";`).join("\n"); - if (!contents) return; - - return processCSS(contents, undefined, outputPath, { - cwd, - clean, - configPath: cwd, - map: false, - customTagline: generateTagline(packageJson), - }); -} - -/** - * Append custom/*-vars.css files to the end of the dist/css/*-vars.css files - * @param {Object} config - * @param {string} [config.cwd=process.cwd()] - Current working directory for the component - * @returns {Promise} - */ -async function appendCustomOverrides({ cwd = process.cwd(), packageJson = {} } = {}) { - const promises = []; - - // Add custom/*-vars.css to the end of the dist/css/*-vars.css files and run through postcss before writing back to the dist/css/*-vars.css file - const customFiles = await fg(["*-vars.css"], { cwd: join(cwd, "custom"), onlyFiles: true }); - const globalFiles = await fg(["*-vars.css"], { cwd: join(cwd, "dist", "css"), onlyFiles: true }); - - // Create a list that combines the custom and dist files - const combinedFiles = [...new Set([...customFiles, ...globalFiles])]; - for (const file of combinedFiles) { - // Read in the custom file and the dist file and combine them into one file - const combinedContent = await fetchContent([ - join("dist", "css", file), - join("custom", file) - ], { cwd, shouldCombine: true }); - - if (!combinedContent || !combinedContent?.[0]?.content) continue; - - promises.push( - processCSS(combinedContent[0].content, join(cwd, "dist", "css", file), join(cwd, "dist", "css", file), { - cwd, - configPath: cwd, - customTagline: generateTagline(packageJson), - }) - ); - } - - return Promise.all(promises); -} - -/** - * The main entry point for this tool; this builds a CSS component - * @param {object} config - * @param {string} [config.componentName=process.env.NX_TASK_TARGET_PROJECT] - Current working directory for the component being built - * @param {string} [config.cwd=] - Current working directory for the component being built - * @param {boolean} [config.clean=false] - Should the built assets be cleaned before running the build - * @returns Promise - */ -async function main({ - cwd = process.cwd(), - clean, -} = {}) { - const key = `[build] ${"@spectrum-css/tokens".cyan} index`; - console.time(key); - - const compiledOutputPath = join(cwd, "dist"); - - // Ensure the dist directory exists - if (!existsSync(compiledOutputPath)) { - mkdirSync(compiledOutputPath); - } - - const reports = []; - const errors = []; - - // Read in the package version from the package.json file - const packageJson = await fsp.readFile(join(cwd, "package.json"), "utf-8").then(JSON.parse); - - // Wait for all the custom files to be processed - await appendCustomOverrides({ packageJson, cwd }).then((report) => { reports.push(report); }).catch((err) => { errors.push(err); }); - - // Then build the index.css file - await index(["dist/css/*-vars.css"], join(compiledOutputPath, "css", "index.css"), { cwd, clean }).then((report) => { reports.push(report); }).catch((err) => { errors.push(err); }); - - // Combine all the reports into a single log output - const logs = reports.flat(Infinity).filter(Boolean); - const errorLogs = errors.flat(Infinity).filter(Boolean); - - console.log(`\n\n${key} 🔨`); - console.log(`${"".padStart(30, "-")}`); - - if (!(errorLogs && errorLogs.length > 0)) { - if (logs && logs.length > 0) { - logs.forEach(log => { - // Strip the ../../tokens/ from the paths - console.log(log.replace(/(\.\.\/)+tokens\//g, "")); - }); - } - else console.log("No assets created.".gray); - } - else { - errorLogs.forEach(log => { - console.error(log); - }); - } - - console.log(`${"".padStart(30, "-")}`); - console.timeEnd(key); - console.log(""); - - if (errorLogs && errorLogs.length > 0) { - process.exit(1); - } -} - -main(); - -export { main as default }; diff --git a/tokens/utilities/attribute-sets-transform.js b/tokens/utilities/attribute-sets-transform.js deleted file mode 100644 index 143b9971e76..00000000000 --- a/tokens/utilities/attribute-sets-transform.js +++ /dev/null @@ -1,12 +0,0 @@ -export default { - type: "attribute", - name: "attribute/sets", - filter: (token) => token.path.includes("sets"), - transform: (token) => { - return { - sets: token.path.filter( - (_, index, array) => array[index - 1] == "sets" - ), - }; - }, -}; diff --git a/tokens/utilities/css-border-rounding-transform.js b/tokens/utilities/css-border-rounding-transform.js index 1a84a1a4553..965666c5a64 100644 --- a/tokens/utilities/css-border-rounding-transform.js +++ b/tokens/utilities/css-border-rounding-transform.js @@ -1,3 +1,7 @@ +/** + * @description Generates a kebab-case name for a token + * @type {import('style-dictionary/types').ValueTransform} + */ export default { type: "value", name: "border/rounding", diff --git a/tokens/utilities/css-font-open-type-transform.js b/tokens/utilities/css-font-open-type-transform.js index a2a7b9002a9..f865a9e6aa0 100644 --- a/tokens/utilities/css-font-open-type-transform.js +++ b/tokens/utilities/css-font-open-type-transform.js @@ -1,3 +1,7 @@ +/** + * @description Converts a font-weight token to a number + * @type {import('style-dictionary/types').ValueTransform} + */ export default { type: "value", name: "font/openType", diff --git a/tokens/utilities/css-opacity-percent-transform.js b/tokens/utilities/css-opacity-percent-transform.js new file mode 100644 index 00000000000..e561620c464 --- /dev/null +++ b/tokens/utilities/css-opacity-percent-transform.js @@ -0,0 +1,28 @@ +/** + * @description Converts a number to a percentage + * @type {import('style-dictionary/types').ValueTransform} +*/ +export default { + type: "value", + name: "opacity/percent", + filter: (token) => token.name?.includes?.("opacity"), + transform: (token) => { + // If the token is a percentage, return it as-is + if (token.value?.includes?.("%")) { + return token.value; + } + + // Check if the token is a number + if (typeof token.value === "number") { + return `${token.value * 100}%`; + } + + // If the token is a string, convert it to a number + if (typeof token.value === "string" && !isNaN(Number(token.value))) { + return `${Number(token.value) * 100}%`; + } + + // If the token is not a number or a string, return the value + return token.value; + }, +}; diff --git a/tokens/utilities/css-sets-formatter.js b/tokens/utilities/css-sets-formatter.js index dcbbf06f52e..f4f6d167411 100644 --- a/tokens/utilities/css-sets-formatter.js +++ b/tokens/utilities/css-sets-formatter.js @@ -1,55 +1,141 @@ -import { fetchDefinition } from "./shared-logic.js"; +import { cssTemplate } from "./css.template.js"; +import { pushToMap, referenceToVarFunction } from "./utilities.js"; + +const DEFAULT_SETS = ["light", "desktop"]; /** - * The format function to split out the token set data into distinct CSS variables - * @type {import('style-dictionary/types').FormatFn} format + * @param {import('style-dictionary/types').DesignToken} token + * @param {string} set The context of the set to resolve + * @param {import('style-dictionary/types').PlatformConfig} [platform={}] + * @returns {string} */ -export const format = ({ dictionary, platform, options }) => { - const { prefix } = platform; - let selector = ".spectrum"; - const context = options.sets?.[0]; - - const definitions = []; - - dictionary.allTokens.forEach((token) => { - if (!token) return; - - const values = fetchDefinition(token, { prefix }); - if (!values || values.length === 0) return; +function resolveSetValues(value, set, platform = {}) { + const { outputReferences = true, outputReferenceFallbacks = true, modifier = false } = platform; + if (typeof value === "object") { + // If we're outputing the references, return it in the format of {} + if (outputReferences && typeof value.name !== "undefined") { + // If we're outputing the references, return it in the format of {} + return referenceToVarFunction(`{${value.name}}`, { prefix: platform.prefix, fallback: outputReferenceFallbacks ? value.value : undefined, modifier }); + } + else if (!outputReferences && typeof value.value !== "undefined") { + // If we're not outputing the references, return the value + return resolveSetValues(value.value, set, platform); + } + else if (typeof value.sets !== "undefined") { + // Check if the value has a sets object + if (typeof set === "undefined") { + // Capture the default set value if found, otherwise it gets lost in the forEach loop context + let capture; - values.forEach(({ key, prop, value, ref, ...sets }) => { - if (key.includes("android")) return; + // Check for default set values + DEFAULT_SETS.forEach((defaultSet) => { + if (typeof value.sets[defaultSet] !== "undefined") { + capture = resolveSetValues(value.sets[defaultSet], set, platform); + } + }); - // If there are no default values, check for contextual values - if (!value) { - if (context && sets[context] && sets[context].value) definitions.push(`${prop}: ${sets[context].value};`); - else if (sets.light && sets.light.value) definitions.push(`${prop}: ${sets.light.value};`); - else if (sets.desktop && sets.desktop.value) definitions.push(`${prop}: ${sets.desktop.value};`); - /* @todo: this is where we could use the useReferences option to resolve the value fully */ - else if (ref) definitions.push(`${prop}: ${ref};`); + // If a default set value was found, return it + if (typeof capture !== "undefined") return capture; + } + else if (typeof value.sets[set] !== "undefined") { + return resolveSetValues(value.sets[set], set, platform); } - else definitions.push(`${prop}: ${value};`); - }); - }); - - if (context) { - switch (context) { - case "mobile": - selector = ".spectrum--large"; - break; - case "desktop": - selector = ".spectrum--medium"; - break; - default: - selector = `.spectrum--${context}`; } } - return `${selector} { ${definitions.join(" ")} }`; -}; -format.nested = true; + // If the value is not an object, we can do a minor conversion of the reference to a CSS variable if needed + return referenceToVarFunction(value, { prefix: platform.prefix, modifier }); +} +/** + * @type {import('style-dictionary/types').Format} + */ export default { name: "css/sets", - format, + format: async function ({ dictionary, options = {}, file, platform = {} }) { + let layers = new Map(); + // @todo: this should be a configuration option + const layerDefinitions = { + core: [...DEFAULT_SETS, "size-m"], + dark: ["dark"], + large: ["mobile"], + }; + + // Iterate over the provided tokens and sort them into buckets based on their set data + for (const token of [...dictionary.tokenMap.values()]) { + const set = token.path && token.path.includes("sets") ? token.path[token.path.length - 1] : undefined; + const prop = token.path[0]; + platform.modifier = token.modifier; + + const value = resolveSetValues(token.value, set, platform); + + // Why would a value not be found? + if (typeof value === "undefined") continue; + + if (typeof set === "undefined") { + layers = pushToMap(layers, "core", new Map([[prop, { + value, + deprecated: token.deprecated, + deprecated_comment: token.deprecated_comment, + }]])); + continue; + } + + // Skip wireframe tokens for CSS + if (set === "wireframe") continue; + + let added = false; + for (const layer of Object.keys(layerDefinitions)) { + if (layerDefinitions[layer].includes(set)) { + layers = pushToMap(layers, layer, new Map([[prop, { + value, + deprecated: token.deprecated, + deprecated_comment: token.deprecated_comment, + }]])); + added = true; + break; + } + } + + if (added) continue; + } + + if (layers.has("dark") && layers.get("dark").size > 0) { + // Check if any of the dark values match the light values and delete the extra entries from the dark layer + for (const [darkKey, darkData] of layers.get("dark")) { + // Get the light value with the same key + const lightData = layers.get("core")?.get(darkKey) ?? {}; + + // So far only 2 edge-cases match this + if (typeof lightData.value === "undefined") { + const initial = dictionary.tokenMap.get(`{${darkKey.replace("spectrum-", "")}.sets.light}`); + if (initial?.original?.value) { + const originalValue = referenceToVarFunction(initial.original.value, { prefix: platform.prefix, modifier: initial?.original?.modifier }); + if (typeof originalValue === "undefined") continue; + + lightData.value = originalValue; + lightData.deprecated = initial.original.deprecated; + lightData.deprecated_comment = initial.original.deprecated_comment; + + // Update the core layer with the new value + layers.get("core")?.set(darkKey, lightData); + } + + continue; + } + + if (lightData?.value === darkData?.value) { + layers.get("dark")?.delete(darkKey); + continue; + } + } + } + + return await cssTemplate(layers, { + ...options, + file, + dictionary, + platform, + }); + }, }; diff --git a/tokens/utilities/css.template.js b/tokens/utilities/css.template.js new file mode 100644 index 00000000000..70e16c04d6d --- /dev/null +++ b/tokens/utilities/css.template.js @@ -0,0 +1,98 @@ +import { fileHeader } from "style-dictionary/utils"; +import { processCSS } from "../../tasks/component-builder.js"; +import { cleanVariableName } from "./utilities.js"; + +/** + * @param {string} name + * @param {string} value + * @param {Object} [options={}] + * @param {string} [options.prefix] + * @param {boolean} [options.deprecated] + * @param {string} [options.deprecated_comment] + */ +const variableDefinition = (name, value, { prefix, deprecated, deprecated_comment } = {}) => { + const varName = `--${cleanVariableName(name, prefix)}`; + if (!deprecated) return `${varName}: ${value};`; + + // Find a string with multiple words joined by a dash + const captureVarName = deprecated_comment?.match(/(\w+(-\w+)+)/)?.[0]; + const commentVarName = captureVarName ? `--${prefix ? `${prefix}-` : ""}${captureVarName}` : undefined; + const comment = `/** @deprecated ${varName}${deprecated_comment ? ` -- ${deprecated_comment.replace(captureVarName, commentVarName)}` : ""} */`; + return [comment, `${varName}: ${value};`].filter(Boolean).join("\n\t"); +}; + +/** + * Remove prefix because the prefix option for createPropertyFormatter + * is not the same as the prefix inside header comment + * @param {FormattingOverrides} [formatting] + */ +function getFormattingCloneWithoutPrefix(formatting) { + const formattingWithoutPrefix = structuredClone(formatting) ?? {}; + delete formattingWithoutPrefix.prefix; + return formattingWithoutPrefix; +} + +/** + * @typedef {import('style-dictionary/types').TransformedTokens} TransformedTokens + * @param {Map} layers + * @param {import('style-dictionary/types').LocalOptions & { + * file: import('style-dictionary/types').File, + * dictionary: import('style-dictionary/types').Dictionary, + * platform: import('style-dictionary/types').PlatformConfig, + * selector: string | string[] + * }} [options={}] + * @returns {Promise} + */ +export const cssTemplate = async (layers, options = {}) => { + // Deconstruct the options object for easier reuse below + const { file, showFileHeader, formatting, platform = {}, selector = [":root"] } = options; + const selectors = Array.isArray(selector) ? selector : [selector]; + + const header = showFileHeader ? await fileHeader({ + file, + formatting: getFormattingCloneWithoutPrefix(formatting), + options, + }) : ""; + + const content = [...layers.entries()].sort((a) => { + // Force the global layer to be first + if (a[0] === "global") return -1; + return 0; + }).map(([context, layer]) => { + const variables = [...layer.entries()] + // Sort entries by name, alphanumerically + .sort((a, b) => a[0].localeCompare(b[0], "en", { numeric: true })) + .map(([name, { value, deprecated, deprecated_comment }]) => variableDefinition(name, value, { prefix: platform.prefix, deprecated, deprecated_comment })); + + const items = selectors.map((s) => { + if (s === ":root" && context !== "dark") return [":root"]; + if (s !== ":root" && context === "core") return [`@scope (${s})`, ":scope"]; + if (context === "dark") return ["@media (prefers-color-scheme: dark)", s]; + if (s !== ":scope" && s !== ":root") return [`${s}--${context}`]; + return [[options.prefix, context].filter(Boolean).join("-"), s]; + }).flat(); + + return items.reverse().reduce((previous, currentSelector, index) => { + const indentation = (formatting?.indentation || " ").repeat(selectors.length - index); + return `${indentation}${currentSelector} {\n${previous.split("\n").map((line) => `${indentation}${indentation}${line}`).join("\n")}\n${indentation}}\n`; + }, variables.join("\n")); + }).join("\n\n"); + + const result = [header, content].filter(Boolean).join("\n") + "\n"; + + // Run styles through the css processor, if possible + if (typeof processCSS === "function") { + return processCSS(result, undefined, undefined, { + cwd: platform?.buildPath ?? process.cwd(), + clean: true, + map: false, + }).catch((error) => { + // eslint-disable-next-line no-console + if (error) console.log(error); + + return result; + }); + } + + return result; +}; diff --git a/tokens/utilities/data-json-formatter.js b/tokens/utilities/data-json-formatter.js index 3a64dc9d65b..4e83a37d8eb 100644 --- a/tokens/utilities/data-json-formatter.js +++ b/tokens/utilities/data-json-formatter.js @@ -1,59 +1,75 @@ -import { fetchDefinition, varToRef } from "./shared-logic.js"; +import { format as JSONSetsFormat } from "./json-sets-formatter.js"; /** - * Formats the data file for the given platform. - * @type {import('style-dictionary/types').FormatFn} format + * @description Formats the JSON sets + * @type {import('style-dictionary/types').FormatFn} */ -export const format = ({ dictionary, platform }) => { - const { prefix } = platform; +export const format = ({ dictionary, platform, file, options }) => { + const prefix = platform.prefix ? platform.prefix : false; let result = {}; - dictionary.allTokens.forEach((token) => { - if (!token) return; + const jsonSets = JSON.parse( + JSONSetsFormat({ dictionary, platform, file, options }) + ); - const values = fetchDefinition(token, { prefix }); - if (!values || values.length === 0) return; + const convertRef = (ref) => { + return typeof ref === "string" ? ref.replace(/\{(.*?)\}/g, `var(--${prefix}-$1)`) : ref; + }; - values.forEach(({ key, ...data }) => { - if (key.includes("android")) return; - result[key] = { - ...(result[key] ?? {}), - ...data, - }; - }); - }); + const deconstructSets = (obj, scope = undefined) => { + let ret = obj; + Object.entries(obj.sets ?? {}).forEach(([context, data]) => { + if (context === "wireframe") return; + if (typeof scope !== "undefined" && scope !== context) return; + + delete data.uuid; + + if (data.ref) { + data.ref = convertRef(data.ref); - function resolveNestedRefs(value, { prefix, result } = {}) { - if (Object.keys(value).length < 3 && value.ref) { - const subKey = varToRef(value.ref, prefix); - let subValue = result[subKey]; - if (subValue) { - if (Object.keys(subValue).length < 3 && subValue.ref && subValue.prop) { - subValue = resolveNestedRefs(subValue, { prefix, result }); + if (String(data.ref) === String(data.value)) { + delete data.ref; } + } + + if (data.sets) { + data = deconstructSets(data, context); - Object.entries(subValue).forEach(([k, v]) => { - if (k === "prop") return; - if (k === "ref") return; - value[k] = v; - }); + ret = { + ...ret, + ...data + }; } + else { + ret[context] = data; + } + + delete ret.sets; + }); + + delete ret.uuid; + if (ret.ref) ret.ref = convertRef(ret.ref); + + if (ret.ref === ret.value) { + delete ret.ref; } - return value; - } + return ret; + }; - /** - * Sorts two arrays of [key, value] pairs lexicographically by the key. - * @param {Array} a - The first array. - * @param {Array} b - The second array. - * @returns {number} The comparison result. - */ - const sortLexically = (a, b) => a[0].localeCompare(b[0]); + Object.keys(jsonSets).forEach((tokenName) => { + const tokenValue = jsonSets[tokenName]; + + // Add the property to the results object + result[tokenName] = { + prop: (prefix)? `--${prefix}-${tokenName}` : `--${tokenName}`, + ...(deconstructSets(tokenValue) ?? {}), + }; + }); // Sort the result alphabetically by keys - result = Object.entries(result).sort(sortLexically).reduce((acc, [key, value]) => { - acc[key] = resolveNestedRefs(value, { prefix, result }); + result = Object.entries(result).sort().reduce((acc, [key, value]) => { + acc[key] = value; return acc; }, {}); @@ -62,6 +78,9 @@ export const format = ({ dictionary, platform }) => { format.nested = true; +/** + * @type {import('style-dictionary/types').Format} + */ export default { name: "json/sets", format, diff --git a/tokens/utilities/index.js b/tokens/utilities/index.js index f209e8a4825..4d05914a31c 100644 --- a/tokens/utilities/index.js +++ b/tokens/utilities/index.js @@ -1,6 +1,12 @@ -export { default as AttributeSetsTransform } from "./attribute-sets-transform.js"; +/** + * @note These are custom transforms that are used by Style Dictionary + */ export { default as CSSBorderRoundingTransform } from "./css-border-rounding-transform.js"; export { default as CSSOpenTypeTransform } from "./css-font-open-type-transform.js"; +export { default as CSSOpacityPercentTransform } from "./css-opacity-percent-transform.js"; + +/** + * @note These are custom formatters that are used by Style Dictionary + */ export { default as CSSSetsFormatter } from "./css-sets-formatter.js"; export { default as DataJsonFormatter } from "./data-json-formatter.js"; -export { default as NameKebabTransfom } from "./name-kebab-transform.js"; diff --git a/tokens/utilities/json-sets-formatter.js b/tokens/utilities/json-sets-formatter.js new file mode 100644 index 00000000000..43dca349b31 --- /dev/null +++ b/tokens/utilities/json-sets-formatter.js @@ -0,0 +1,80 @@ +import merge from "deepmerge"; +import { usesReferences } from "style-dictionary/utils"; + +/** + * @description Checks if a value is an object + * @param {unknown} value + * @returns {boolean} + */ +const isObject = (item) => { + return typeof item === "object" && !Array.isArray(item) && item !== null; +}; + +/** + * @description Converts an array to an object + * @param {string[]} pathAr + * @param {unknown} value + * @returns {Record} + */ +const pathToObj = (pathAr, value) => + pathAr.reduceRight((value, key) => ({ [key]: value }), value); + +/** + * @description Checks if a value is a set + * @param {unknown} value + * @returns {boolean} + */ +const isASet = (value) => { + return isObject(value) && "sets" in value; +}; + +/** + * @description Gets the value of a token + * @param {import('style-dictionary').Token} token + * @param {import('style-dictionary').Dictionary} dictionary + * @returns {Record} + */ +const getValue = (token, dictionary) => { + if (usesReferences(token)) { + const ref = token.original.value; + if (isASet(token.value)) { + const sets = {}; + for (const setName in token.value.sets) { + sets[setName] = getValue(token.value.sets[setName], dictionary); + } + const uuidObj = (Object.hasOwn(token, "uuid")) ? {uuid: token.uuid}: {}; + return { ref, sets, ...uuidObj }; + } + else { + const uuidObj = (Object.hasOwn(token, "uuid")) ? {uuid: token.uuid}: {}; + return { ref, value: token.value, ...uuidObj }; + } + } + else { + const uuidObj = (Object.hasOwn(token, "uuid")) ? {uuid: token.uuid}: {}; + return { value: token.value, ...uuidObj }; + } +}; + +/** + * @description Formats the JSON sets + * @type {import('style-dictionary/types').FormatFn} + */ +export const format = ({ dictionary }) => { + let resultObj = {}; + dictionary.allTokens.forEach((token) => { + const value = getValue(token, dictionary); + resultObj = merge(resultObj, pathToObj(token.path, value)); + }); + return JSON.stringify(resultObj, null, 2); +}; + +format.nested = true; + +/** + * @type {import('style-dictionary/types').Format} + */ +export default { + name: "json/sets", + format, +}; diff --git a/tokens/utilities/name-kebab-transform.js b/tokens/utilities/name-kebab-transform.js deleted file mode 100644 index 606a52caaca..00000000000 --- a/tokens/utilities/name-kebab-transform.js +++ /dev/null @@ -1,8 +0,0 @@ -import { kebabCase } from "lodash-es"; - -export default { - type: "name", - name: "name/kebab", - transform: (token, options) => - kebabCase([options.prefix].concat(token.path).join(" ")), -}; diff --git a/tokens/utilities/shared-logic.js b/tokens/utilities/shared-logic.js deleted file mode 100644 index 060eeb59a01..00000000000 --- a/tokens/utilities/shared-logic.js +++ /dev/null @@ -1,109 +0,0 @@ -import { kebabCase } from "lodash-es"; -import { usesReferences } from "style-dictionary/utils"; - -const isObject = (item) => { - return typeof item === "object" && !Array.isArray(item) && item !== null; -}; - -const isASet = (value) => { - return isObject(value) && "sets" in value; -}; - -const generateNameArray = (parts) => { - const name = []; - for (let i = 0; i < parts.length; i++) { - if (parts[i] === "sets") i++; - else name.push(parts[i]); - } - return name; -}; - -export const refToVarFunction = (ref, prefix) => { - if (ref.startsWith("{") && ref.endsWith("}")) { - ref = ref.slice(1, -1); - } - return `var(--${prefix ? `${prefix}-` : ""}${ref})`; -}; - -export const varToRef = (varName, prefix) => { - const regex = new RegExp(`var\\(--${prefix ? `${prefix}-` : ""}(.*?)\\)$`); - return varName.replace(regex, "$1").replace(/^--/, ""); -}; - -/** - * @description Formats the value of a token for CSS - * @param {import('style-dictionary/types').TransformedToken} token - * @param {Object} options - * @param {string} options.prefix - * @param {string} options.subtype - * @returns {import('style-dictionary/types').TransformedToken[]} - */ -export const fetchDefinition = (token, { prefix } = {}) => { - if (!token) return []; - - let path = token.original?.path ?? token?.path ?? []; - let context = token.attributes?.sets?.[0]; - - let value; - if (usesReferences(token.original?.value)) { - value = valueFormatter(token.original?.value, { prefix, context, token }); - } - else { - value = valueFormatter(token?.value, { prefix, context, token }); - } - - const parts = generateNameArray(path); - - if (Array.isArray(value)) { - return value.map(({ subtype, ...valueObj }) => { - return { - key: [...parts, subtype].join("-"), - prop: ["-", prefix, ...parts, subtype].filter(Boolean).join("-"), - ...valueObj, - }; - }); - } - else { - return [{ - key: parts.join("-"), - prop: ["-", prefix, ...parts].filter(Boolean).join("-"), - ...value, - }]; - } -}; - -function valueFormatter(value, { prefix, context, token } = {}) { - let ret = {}; - - if (isObject(value)) { - if (isASet(value)) { - Object.entries(value.sets).forEach(([set, data]) => { - const resolvedSet = valueFormatter(data, { prefix, context: set, token }); - ret[set] = resolvedSet[set] ?? resolvedSet; - }); - } - else { - // Parsing composited tokens - return Object.entries(value).map(([k, v]) => { - return { - ...valueFormatter(v, { prefix, context, token }), - subtype: kebabCase(k), - }; - }).flat(); - } - } - else if (["string", "number", "boolean"].includes(typeof value)) { - value = String(value); - if (usesReferences(value)) { - const ref = refToVarFunction(value, prefix); - if (ref) ret.ref = ref; - } - else { - if (context) ret[context] = { value }; - else ret.value = value; - } - } - else return; - - return ret; -} diff --git a/tokens/utilities/utilities.js b/tokens/utilities/utilities.js new file mode 100644 index 00000000000..dba1d544aeb --- /dev/null +++ b/tokens/utilities/utilities.js @@ -0,0 +1,78 @@ +/** + * @description Pushes a value to a map; supports nested maps and arrays + * @param {Map} map + * @param {string} key + * @param {any} value + * @returns {Map} + */ +export const pushToMap = (map, key, value) => { + if (!map.has(key)) { + map.set(key, value); + return map; + } + + let existing = map.get(key); + + // Check if the value is a Map + if (value instanceof Map) { + // Merge the two maps + for (const [k, v] of value.entries()) { + existing.set(k, v); + } + } + else if (value instanceof Object) { + // Merge the two objects + for (const [k, v] of Object.entries(value)) { + existing[k] = v; + } + } + else if (Array.isArray(value)) { + // Merge the two arrays + existing.push(...value); + } + else { + // If it's a primitive value, just set it + existing = value; + } + + map.set(key, existing); + return map; +}; + +/** + * @param {string} ref The reference to another token + * @param {string} [prefix] The prefix to add to the reference, if provided + * @returns {string} The cleaned reference string + */ +export const cleanVariableName = (ref, prefix = undefined) => { + // Clean up the key by removing any "sets-*" content + if (ref?.includes("sets-")) { + ref = ref.replace(/-sets-\w+/g, ""); + } + + // Ensure all keys start with the prefix + if (prefix && !ref.startsWith(prefix)) { + ref = prefix + "-" + ref; + } + + return ref; +}; + +/** + * @param {string} ref The reference to another token + * @param {string} [prefix] The prefix to add to the reference, if provided + * @param {string} [fallback] The fallback to add to the reference, if provided + * @returns {string} The converted reference string + */ +export const referenceToVarFunction = (ref, { prefix, fallback, modifier = false } = {}) => { + if (typeof ref === "string") { + if (!ref.startsWith("{") && !ref.startsWith("spectrum-")) return ref; + + const [, name] = ref.match(/^{?(.*?)(?:-sets-\w+)?}?$/); + if (typeof name === "string") { + return `${modifier ? `var(--${cleanVariableName(name, "mod")}, ` : ""}var(--${cleanVariableName(name, prefix)}${fallback ? `, ${fallback}` : ""})${modifier ? ")" : ""}`; + } + } + + return ref; +}; diff --git a/yarn.lock b/yarn.lock index e990a544099..0e7c428d4fd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5655,8 +5655,12 @@ __metadata: glob: "npm:^11.0.3" lodash-es: "npm:^4.17.21" postcss: "npm:^8.5.6" + postcss-cli: "npm:^11.0.1" postcss-sorting: "npm:^9.1.0" + prettier: "npm:^3.6.2" + rimraf: "npm:^6.0.1" style-dictionary: "npm:^4.4.0" + yargs: "npm:^18.0.0" languageName: unknown linkType: soft @@ -7214,7 +7218,7 @@ __metadata: languageName: node linkType: hard -"anymatch@npm:^3.0.3": +"anymatch@npm:^3.0.3, anymatch@npm:~3.1.2": version: 3.1.3 resolution: "anymatch@npm:3.1.3" dependencies: @@ -7764,6 +7768,13 @@ __metadata: languageName: node linkType: hard +"binary-extensions@npm:^2.0.0": + version: 2.3.0 + resolution: "binary-extensions@npm:2.3.0" + checksum: 10c0/75a59cafc10fb12a11d510e77110c6c7ae3f4ca22463d52487709ca7f18f69d886aa387557cc9864fbdb10153d0bdb4caacabf11541f55e89ed6e18d12ece2b5 + languageName: node + linkType: hard + "binary@npm:^0.3.0": version: 0.3.0 resolution: "binary@npm:0.3.0" @@ -7834,7 +7845,7 @@ __metadata: languageName: node linkType: hard -"braces@npm:^3.0.3": +"braces@npm:^3.0.3, braces@npm:~3.0.2": version: 3.0.3 resolution: "braces@npm:3.0.3" dependencies: @@ -8375,6 +8386,25 @@ __metadata: languageName: node linkType: hard +"chokidar@npm:^3.3.0": + version: 3.6.0 + resolution: "chokidar@npm:3.6.0" + dependencies: + anymatch: "npm:~3.1.2" + braces: "npm:~3.0.2" + fsevents: "npm:~2.3.2" + glob-parent: "npm:~5.1.2" + is-binary-path: "npm:~2.1.0" + is-glob: "npm:~4.0.1" + normalize-path: "npm:~3.0.0" + readdirp: "npm:~3.6.0" + dependenciesMeta: + fsevents: + optional: true + checksum: 10c0/8361dcd013f2ddbe260eacb1f3cb2f2c6f2b0ad118708a343a5ed8158941a39cb8fb1d272e0f389712e74ee90ce8ba864eece9e0e62b9705cb468a2f6d917462 + languageName: node + linkType: hard + "chownr@npm:^3.0.0": version: 3.0.0 resolution: "chownr@npm:3.0.0" @@ -9532,6 +9562,13 @@ __metadata: languageName: node linkType: hard +"dependency-graph@npm:^1.0.0": + version: 1.0.0 + resolution: "dependency-graph@npm:1.0.0" + checksum: 10c0/10d1e248ab68a33654335559bae5ec142c51959cbff1cba8b35cdccfdc12eb8d136227df85c31b71b9ee9fed1b2bfbd01721661b4f927e12d890d13c4230788f + languageName: node + linkType: hard + "deprecation@npm:^2.0.0, deprecation@npm:^2.3.1": version: 2.3.1 resolution: "deprecation@npm:2.3.1" @@ -11253,6 +11290,17 @@ __metadata: languageName: node linkType: hard +"fs-extra@npm:^11.0.0": + version: 11.3.2 + resolution: "fs-extra@npm:11.3.2" + dependencies: + graceful-fs: "npm:^4.2.0" + jsonfile: "npm:^6.0.1" + universalify: "npm:^2.0.0" + checksum: 10c0/f5d629e1bb646d5dedb4d8b24c5aad3deb8cc1d5438979d6f237146cd10e113b49a949ae1b54212c2fbc98e2d0995f38009a9a1d0520f0287943335e65fe919b + languageName: node + linkType: hard + "fs-extra@npm:^11.1.1": version: 11.3.1 resolution: "fs-extra@npm:11.3.1" @@ -11501,7 +11549,7 @@ __metadata: languageName: node linkType: hard -"glob-parent@npm:^5.1.2": +"glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2": version: 5.1.2 resolution: "glob-parent@npm:5.1.2" dependencies: @@ -12362,6 +12410,15 @@ __metadata: languageName: node linkType: hard +"is-binary-path@npm:~2.1.0": + version: 2.1.0 + resolution: "is-binary-path@npm:2.1.0" + dependencies: + binary-extensions: "npm:^2.0.0" + checksum: 10c0/a16eaee59ae2b315ba36fad5c5dcaf8e49c3e27318f8ab8fa3cdb8772bf559c8d1ba750a589c2ccb096113bb64497084361a25960899cb6172a6925ab6123d38 + languageName: node + linkType: hard + "is-boolean-object@npm:^1.2.1": version: 1.2.2 resolution: "is-boolean-object@npm:1.2.2" @@ -12517,7 +12574,7 @@ __metadata: languageName: node linkType: hard -"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3": +"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1": version: 4.0.3 resolution: "is-glob@npm:4.0.3" dependencies: @@ -15506,7 +15563,7 @@ __metadata: languageName: node linkType: hard -"normalize-path@npm:^3.0.0": +"normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0": version: 3.0.0 resolution: "normalize-path@npm:3.0.0" checksum: 10c0/e008c8142bcc335b5e38cf0d63cfd39d6cf2d97480af9abdbe9a439221fd4d749763bab492a8ee708ce7a194bb00c9da6d0a115018672310850489137b3da046 @@ -16345,7 +16402,7 @@ __metadata: languageName: node linkType: hard -"picomatch@npm:^2.0.4, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1": +"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1": version: 2.3.1 resolution: "picomatch@npm:2.3.1" checksum: 10c0/26c02b8d06f03206fc2ab8d16f19960f2ff9e81a658f831ecb656d8f17d9edc799e8364b1f4a7873e89d9702dff96204be0fa26fe4181f6843f040f819dac4be @@ -16520,6 +16577,29 @@ __metadata: languageName: node linkType: hard +"postcss-cli@npm:^11.0.1": + version: 11.0.1 + resolution: "postcss-cli@npm:11.0.1" + dependencies: + chokidar: "npm:^3.3.0" + dependency-graph: "npm:^1.0.0" + fs-extra: "npm:^11.0.0" + picocolors: "npm:^1.0.0" + postcss-load-config: "npm:^5.0.0" + postcss-reporter: "npm:^7.0.0" + pretty-hrtime: "npm:^1.0.3" + read-cache: "npm:^1.0.0" + slash: "npm:^5.0.0" + tinyglobby: "npm:^0.2.12" + yargs: "npm:^17.0.0" + peerDependencies: + postcss: ^8.0.0 + bin: + postcss: index.js + checksum: 10c0/4aa0b517269e27d288cbbcff54f572f95ca45fe082e49b77e9c3c3582ad0312bc65f98d98d3d98d18d8f64c473546277596e85ce6572b4d3e9c3b4ef8a1aff71 + languageName: node + linkType: hard + "postcss-color-functional-notation@npm:^7.0.11": version: 7.0.11 resolution: "postcss-color-functional-notation@npm:7.0.11" @@ -16810,6 +16890,27 @@ __metadata: languageName: node linkType: hard +"postcss-load-config@npm:^5.0.0": + version: 5.1.0 + resolution: "postcss-load-config@npm:5.1.0" + dependencies: + lilconfig: "npm:^3.1.1" + yaml: "npm:^2.4.2" + peerDependencies: + jiti: ">=1.21.0" + postcss: ">=8.0.9" + tsx: ^4.8.1 + peerDependenciesMeta: + jiti: + optional: true + postcss: + optional: true + tsx: + optional: true + checksum: 10c0/1631f2869619387166cf0aa900b5f3f652578862c0abbd8d9e9e1d679929c42720dd65f7ce60ccf930f94d4440ebdc3aa6b69d33e2df82b761a079d8cba87e23 + languageName: node + linkType: hard + "postcss-load-config@npm:^6.0.1": version: 6.0.1 resolution: "postcss-load-config@npm:6.0.1" @@ -17295,7 +17396,7 @@ __metadata: languageName: node linkType: hard -"postcss-reporter@npm:^7.1.0": +"postcss-reporter@npm:^7.0.0, postcss-reporter@npm:^7.1.0": version: 7.1.0 resolution: "postcss-reporter@npm:7.1.0" dependencies: @@ -17525,6 +17626,13 @@ __metadata: languageName: node linkType: hard +"pretty-hrtime@npm:^1.0.3": + version: 1.0.3 + resolution: "pretty-hrtime@npm:1.0.3" + checksum: 10c0/67cb3fc283a72252b49ac488647e6a01b78b7aa1b8f2061834aa1650691229081518ef3ca940f77f41cc8a8f02ba9eeb74b843481596670209e493062f2e89e0 + languageName: node + linkType: hard + "pretty-ms@npm:^9.2.0": version: 9.2.0 resolution: "pretty-ms@npm:9.2.0" @@ -17830,6 +17938,15 @@ __metadata: languageName: node linkType: hard +"readdirp@npm:~3.6.0": + version: 3.6.0 + resolution: "readdirp@npm:3.6.0" + dependencies: + picomatch: "npm:^2.2.1" + checksum: 10c0/6fa848cf63d1b82ab4e985f4cf72bd55b7dcfd8e0a376905804e48c3634b7e749170940ba77b32804d5fe93b3cc521aa95a8d7e7d725f830da6d93f3669ce66b + languageName: node + linkType: hard + "recast@npm:^0.23.5": version: 0.23.11 resolution: "recast@npm:0.23.11" @@ -20696,7 +20813,7 @@ __metadata: languageName: node linkType: hard -"yaml@npm:^2.2.2, yaml@npm:^2.8.1": +"yaml@npm:^2.2.2, yaml@npm:^2.4.2, yaml@npm:^2.8.1": version: 2.8.1 resolution: "yaml@npm:2.8.1" bin: