From 690e07a8ba285e05ce8e8f074c9782a5e8a57f9e Mon Sep 17 00:00:00 2001 From: castastrophe Date: Wed, 27 Aug 2025 13:46:39 -0400 Subject: [PATCH 1/2] feat(tokens): leverage light-dark theming in css --- .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 +- .../converting-css-properties-to-tokens.mdx | 189 + .storybook/manager.js | 11 +- components/accordion/tokens.json | 388 + components/actionbar/tokens.json | 98 + components/actionbutton/tokens.json | 79 + components/actiongroup/tokens.json | 60 + components/actionmenu/tokens.json | 1 + components/alertbanner/tokens.json | 181 + components/alertdialog/tokens.json | 135 + components/asset/tokens.json | 22 + components/assetcard/dist/metadata.json | 1 - components/assetcard/index.css | 6 +- components/assetcard/tokens.json | 142 + components/assetlist/tokens.json | 129 + components/avatar/tokens.json | 52 + components/badge/tokens.json | 402 + components/breadcrumb/dist/metadata.json | 2 +- components/breadcrumb/index.css | 2 +- components/breadcrumb/tokens.json | 209 + components/button/tokens.json | 347 + components/buttongroup/tokens.json | 37 + components/calendar/dist/metadata.json | 2 +- components/calendar/index.css | 4 +- components/calendar/tokens.json | 408 + components/card/dist/metadata.json | 4 +- components/card/index.css | 2 +- components/card/tokens.json | 221 + components/checkbox/tokens.json | 280 + components/clearbutton/tokens.json | 108 + components/closebutton/tokens.json | 209 + components/coachindicator/tokens.json | 143 + components/coachmark/tokens.json | 197 + components/colorarea/dist/metadata.json | 6 +- components/colorarea/index.css | 39 +- components/colorarea/tokens.json | 65 + components/colorhandle/dist/metadata.json | 3 +- components/colorhandle/index.css | 6 +- components/colorhandle/tokens.json | 72 + components/colorloupe/tokens.json | 86 + components/colorslider/dist/metadata.json | 4 +- components/colorslider/index.css | 4 +- components/colorslider/tokens.json | 45 + components/colorwheel/dist/metadata.json | 3 +- components/colorwheel/index.css | 5 +- components/colorwheel/tokens.json | 40 + components/combobox/dist/metadata.json | 2 +- components/combobox/index.css | 2 +- components/combobox/tokens.json | 305 + components/contextualhelp/tokens.json | 53 + components/datepicker/tokens.json | 313 + components/dial/tokens.json | 220 + components/dialog/dist/metadata.json | 2 +- components/dialog/index.css | 5 +- components/dialog/tokens.json | 302 + components/divider/tokens.json | 22 + components/dropindicator/tokens.json | 26 + components/dropzone/dist/metadata.json | 1 - components/dropzone/index.css | 5 +- components/dropzone/tokens.json | 121 + components/fieldgroup/tokens.json | 7 + components/fieldlabel/tokens.json | 58 + components/floatingactionbutton/tokens.json | 125 + components/form/tokens.json | 27 + components/helptext/tokens.json | 198 + components/icon/tokens.json | 17 + components/illustratedmessage/tokens.json | 145 + components/infieldbutton/tokens.json | 186 + components/infieldprogresscircle/tokens.json | 7 + components/inlinealert/tokens.json | 141 + components/link/tokens.json | 84 + components/logicbutton/tokens.json | 229 + components/menu/tokens.json | 804 + components/meter/tokens.json | 27 + components/miller/tokens.json | 22 + components/modal/tokens.json | 57 + components/opacitycheckerboard/tokens.json | 28 + components/page/index.css | 7 +- components/page/tokens.json | 12 + components/pagination/tokens.json | 50 + components/picker/tokens.json | 475 + components/pickerbutton/tokens.json | 147 + components/popover/tokens.json | 83 + components/progressbar/tokens.json | 135 + components/progresscircle/tokens.json | 34 + components/radio/tokens.json | 157 + components/rating/tokens.json | 140 + components/search/tokens.json | 208 + components/sidenav/tokens.json | 379 + components/slider/tokens.json | 353 + components/splitview/tokens.json | 106 + components/statuslight/tokens.json | 214 + components/steplist/tokens.json | 117 + components/stepper/tokens.json | 79 + components/swatch/tokens.json | 139 + components/swatchgroup/tokens.json | 17 + components/switch/tokens.json | 267 + components/table/dist/metadata.json | 9 +- components/table/index.css | 20 +- components/table/tokens.json | 438 + components/tabs/tokens.json | 200 + components/tag/tokens.json | 450 + components/taggroup/tokens.json | 12 + components/textfield/tokens.json | 445 + components/thumbnail/dist/metadata.json | 1 - components/thumbnail/index.css | 3 +- components/thumbnail/tokens.json | 102 + components/toast/tokens.json | 137 + components/tooltip/tokens.json | 151 + components/tray/tokens.json | 48 + components/treeview/tokens.json | 366 + components/typography/tokens.json | 128 + components/underlay/dist/metadata.json | 2 +- components/underlay/index.css | 3 +- components/underlay/tokens.json | 37 + components/well/dist/metadata.json | 4 +- components/well/index.css | 4 +- components/well/tokens.json | 78 + nx.json | 4 +- package.json | 3 +- plugins/postcss-rgb-mapping/CHANGELOG.md | 38 - plugins/postcss-rgb-mapping/README.md | 89 - .../postcss-rgb-mapping/expected/basic.css | 15 - .../postcss-rgb-mapping/expected/modern.css | 15 - .../postcss-rgb-mapping/fixtures/basic.css | 7 - plugins/postcss-rgb-mapping/index.js | 168 - plugins/postcss-rgb-mapping/package.json | 42 - plugins/postcss-rgb-mapping/project.json | 16 - plugins/postcss-rgb-mapping/test.js | 42 - postcss.config.js | 4 +- stylelint.config.js | 17 +- tasks/component-compare.js | 50 +- tasks/templates/compare-listing.njk | 4 +- tasks/templates/diff-preview.njk | 6 +- tokens/custom-tokens.json | 99 + 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 | 40798 ++++++++-------- tokens/package.json | 17 +- tokens/postcss.config.js | 35 +- tokens/project.json | 108 +- tokens/style-dictionary.config.js | 138 +- 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 | 1243 +- 166 files changed, 36044 insertions(+), 22237 deletions(-) create mode 100644 .storybook/guides/converting-css-properties-to-tokens.mdx create mode 100644 components/accordion/tokens.json create mode 100644 components/actionbar/tokens.json create mode 100644 components/actionbutton/tokens.json create mode 100644 components/actiongroup/tokens.json create mode 100644 components/actionmenu/tokens.json create mode 100644 components/alertbanner/tokens.json create mode 100644 components/alertdialog/tokens.json create mode 100644 components/asset/tokens.json create mode 100644 components/assetcard/tokens.json create mode 100644 components/assetlist/tokens.json create mode 100644 components/avatar/tokens.json create mode 100644 components/badge/tokens.json create mode 100644 components/breadcrumb/tokens.json create mode 100644 components/button/tokens.json create mode 100644 components/buttongroup/tokens.json create mode 100644 components/calendar/tokens.json create mode 100644 components/card/tokens.json create mode 100644 components/checkbox/tokens.json create mode 100644 components/clearbutton/tokens.json create mode 100644 components/closebutton/tokens.json create mode 100644 components/coachindicator/tokens.json create mode 100644 components/coachmark/tokens.json create mode 100644 components/colorarea/tokens.json create mode 100644 components/colorhandle/tokens.json create mode 100644 components/colorloupe/tokens.json create mode 100644 components/colorslider/tokens.json create mode 100644 components/colorwheel/tokens.json create mode 100644 components/combobox/tokens.json create mode 100644 components/contextualhelp/tokens.json create mode 100644 components/datepicker/tokens.json create mode 100644 components/dial/tokens.json create mode 100644 components/dialog/tokens.json create mode 100644 components/divider/tokens.json create mode 100644 components/dropindicator/tokens.json create mode 100644 components/dropzone/tokens.json create mode 100644 components/fieldgroup/tokens.json create mode 100644 components/fieldlabel/tokens.json create mode 100644 components/floatingactionbutton/tokens.json create mode 100644 components/form/tokens.json create mode 100644 components/helptext/tokens.json create mode 100644 components/icon/tokens.json create mode 100644 components/illustratedmessage/tokens.json create mode 100644 components/infieldbutton/tokens.json create mode 100644 components/infieldprogresscircle/tokens.json create mode 100644 components/inlinealert/tokens.json create mode 100644 components/link/tokens.json create mode 100644 components/logicbutton/tokens.json create mode 100644 components/menu/tokens.json create mode 100644 components/meter/tokens.json create mode 100644 components/miller/tokens.json create mode 100644 components/modal/tokens.json create mode 100644 components/opacitycheckerboard/tokens.json create mode 100644 components/page/tokens.json create mode 100644 components/pagination/tokens.json create mode 100644 components/picker/tokens.json create mode 100644 components/pickerbutton/tokens.json create mode 100644 components/popover/tokens.json create mode 100644 components/progressbar/tokens.json create mode 100644 components/progresscircle/tokens.json create mode 100644 components/radio/tokens.json create mode 100644 components/rating/tokens.json create mode 100644 components/search/tokens.json create mode 100644 components/sidenav/tokens.json create mode 100644 components/slider/tokens.json create mode 100644 components/splitview/tokens.json create mode 100644 components/statuslight/tokens.json create mode 100644 components/steplist/tokens.json create mode 100644 components/stepper/tokens.json create mode 100644 components/swatch/tokens.json create mode 100644 components/swatchgroup/tokens.json create mode 100644 components/switch/tokens.json create mode 100644 components/table/tokens.json create mode 100644 components/tabs/tokens.json create mode 100644 components/tag/tokens.json create mode 100644 components/taggroup/tokens.json create mode 100644 components/textfield/tokens.json create mode 100644 components/thumbnail/tokens.json create mode 100644 components/toast/tokens.json create mode 100644 components/tooltip/tokens.json create mode 100644 components/tray/tokens.json create mode 100644 components/treeview/tokens.json create mode 100644 components/typography/tokens.json create mode 100644 components/underlay/tokens.json create mode 100644 components/well/tokens.json delete mode 100644 plugins/postcss-rgb-mapping/CHANGELOG.md delete mode 100644 plugins/postcss-rgb-mapping/README.md delete mode 100644 plugins/postcss-rgb-mapping/expected/basic.css delete mode 100644 plugins/postcss-rgb-mapping/expected/modern.css delete mode 100644 plugins/postcss-rgb-mapping/fixtures/basic.css delete mode 100644 plugins/postcss-rgb-mapping/index.js delete mode 100644 plugins/postcss-rgb-mapping/package.json delete mode 100644 plugins/postcss-rgb-mapping/project.json delete mode 100644 plugins/postcss-rgb-mapping/test.js 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/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..d6935dfad4f 100644 --- a/.github/QUICK-START.md +++ b/.github/QUICK-START.md @@ -10,12 +10,39 @@ 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 update the cascading layers inheritance: + +```css +@layers defaults, medium; + +@media screen and (min-width: 768px) { + @layers defaults, large; +} +``` + +What's happening here is that the `defaults` layer is being overridden by the `large` layer when the screen size is greater than 768px. This means that all tokens that have a value for the `large` scale will be used instead of the default value. The most useful feature of this approach is that each application can make their own decision about which scale to leverage and at what screen size. This allows for a lot of flexibility in how the design language is applied to different applications. + 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 diff --git a/.storybook/assets/base.css b/.storybook/assets/base.css index 1644b455fb6..6c94c261869 100644 --- a/.storybook/assets/base.css +++ b/.storybook/assets/base.css @@ -11,33 +11,42 @@ * governing permissions and limitations under the License. */ -body { +:root { --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); + /* 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)); + + color-scheme: light dark; +} + +body { margin: 0; font-family: var(--spectrum-font-family); font-size: var(--spectrum-font-size); font-style: var(--spectrum-font-style); - - color: var(--spectrum-neutral-content-color-default, rgb(34, 34, 34)); - background-color: var(--spectrum-background-base-color, rgb(230, 230, 230)); } -.spectrum { - color: var(--spectrum-neutral-content-color-default); - background-color: var(--spectrum-background-base-color); +body, +.docs-story { + color: var(--spectrum-neutral-content-color-default, rgb(34, 34, 34)); + background: var(--spectrum-background-base-color, rgb(230, 230, 230)); -webkit-tap-highlight-color: rgb(0, 0, 0, 0%); } -.spectrum .spectrum-examples-static-black { - background: var(--spectrum-examples-gradient-static-black); +.spectrum-examples-static-black { + background: var(--spectrum-examples-gradient-static-black) !important; } -.spectrum .spectrum-examples-static-white { - background: var(--spectrum-examples-gradient-static-white); +.spectrum-examples-static-white { + background: var(--spectrum-examples-gradient-static-white) !important; } /* Hide the SVG elements that only include references */ diff --git a/.storybook/decorators/context.js b/.storybook/decorators/context.js index cc147ee10cd..026838f9083 100644 --- a/.storybook/decorators/context.js +++ b/.storybook/decorators/context.js @@ -47,9 +47,6 @@ export const withContextWrapper = makeDecorator({ // Start by attaching the appropriate tokens to the container toggleStyles(document.body, "tokens", tokens, true); - // add the default classes to the body to ensure labels, headings, and borders are styled correctly - document.body.classList.add("spectrum", "spectrum--light", "spectrum--medium"); - for (const container of fetchContainers(id, isDocs, isTesting)) { // Check if the container is a testing wrapper to prevent applying colors around the testing grid const isTestingWrapper = isTesting ? container.matches("body:has([data-testing-preview]),[data-testing-preview]") : false; @@ -71,9 +68,6 @@ export const withContextWrapper = makeDecorator({ // If we can't determine the static key, we can't use the static color if (!staticKey) hasStaticElement = false; - // Every container gets the spectrum class - container.classList.toggle("spectrum", true); - // Let the static color override the color if it's set if (!isTestingWrapper && hasStaticElement && staticColorSettings[staticKey]?.color) { color = staticColorSettings[staticKey].color; @@ -85,13 +79,8 @@ export const withContextWrapper = makeDecorator({ color = "light"; } - for (let c of ["light", "dark"]) { - container.classList.toggle(`spectrum--${c}`, c === color); - } - - for (const s of ["medium", "large"]) { - container.classList.toggle(`spectrum--${s}`, s === scale); - } + container.style.setProperty("color-scheme", color); + container.classList.toggle("spectrum--large", scale === "large"); if (!isTestingWrapper) { if (hasStaticElement && staticKey && staticColorSettings[staticKey]) { diff --git a/.storybook/decorators/icon-sprites.js b/.storybook/decorators/icon-sprites.js index b576632bcab..6a42df1692b 100644 --- a/.storybook/decorators/icon-sprites.js +++ b/.storybook/decorators/icon-sprites.js @@ -10,10 +10,6 @@ export const withIconSpriteSheet = makeDecorator({ name: "withIconSpriteSheet", parameterName: "spritesheet", wrapper: (StoryFn, context) => { - 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/guides/converting-css-properties-to-tokens.mdx b/.storybook/guides/converting-css-properties-to-tokens.mdx new file mode 100644 index 00000000000..6963a56d53a --- /dev/null +++ b/.storybook/guides/converting-css-properties-to-tokens.mdx @@ -0,0 +1,189 @@ +# Converting CSS custom properties to Spectrum tokens + +This document explains how to convert CSS custom properties (CSS variables) that start with `--spectrum-` into entries in the `tokens.json` file for Spectrum CSS components. + +## Overview + +Spectrum CSS components use custom properties for theming and styling. These properties are defined in the component's CSS file and should be converted to structured tokens in the `tokens.json` file for better maintainability and consistency. + +## Process + +### Identify custom properties + +Look for all custom properties in the component's CSS file that start with `--spectrum-{component-name}-`. For example, in `components/alertdialog/index.css`: + +```css +.spectrum-AlertDialog { + --spectrum-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); + --spectrum-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); + --spectrum-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); + /* ... more properties */ +} +``` + +### Convert property names + +Remove the `--spectrum-` prefix and convert the property name to kebab-case: + +| CSS Property | Token Key | +| ----------------------------------- | ------------------------ | +| `--spectrum-alert-dialog-min-width` | `alert-dialog-min-width` | +| `--spectrum-alert-dialog-max-width` | `alert-dialog-max-width` | +| `--spectrum-alert-dialog-icon-size` | `alert-dialog-icon-size` | + +### Determine token schema + +Choose the appropriate schema based on the token type: + +- **alias.json**: For simple value references to another token. + ```json + { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + } + ``` +- **scale-set.json**: For responsive values (e.g., desktop/mobile variants). + ```json + { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-700}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-600}" + } + } + } + ``` +- **color-set.json**: For color sets, often used for theming or stateful colors. + ```json + { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "value": { + "light": "#FFFFFF", + "dark": "#000000" + } + } + ``` +- **color.json**: For direct color values (RGB/RGBA format). + ```json + { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgb(255, 255, 255)" + } + ``` +- **dimension.json**: For explicit dimension values (e.g., px, em, rem) that are not references to other tokens. + ```json + { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + } + ``` + +### Map values + +Convert CSS custom property values to token references: + +| CSS value | Token value | +| ------------------------------------------ | ---------------------------- | +| `var(--spectrum-spacing-300)` | `{spacing-300}` | +| `var(--spectrum-heading-color)` | `{heading-color}` | +| `var(--spectrum-background-layer-2-color)` | `{background-layer-2-color}` | + +## Token structure + +### Basic alias token + +```json +{ + "alert-dialog-min-width": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{alert-dialog-minimum-width}" + } +} +``` + +### Scale set token (responsive) + +```json +{ + "alert-dialog-description-to-buttons": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-700}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-600}" + } + } + } +} +``` + +## Example: Alert Dialog + +### Token data + +```json +{ + "alert-dialog-min-width": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{alert-dialog-minimum-width}" + }, + "alert-dialog-max-width": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{alert-dialog-maximum-width}" + } +} +``` + +### Converted to custom properties + +```css +.spectrum-AlertDialog { + --spectrum-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); + --spectrum-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); + /* ... more properties */ +} +``` + +## Best practices + +1. **Consistent naming**: Always use kebab-case for token keys +2. **Component assignment**: Assign all tokens to the appropriate component +3. **Schema selection**: Use `alias.json` for simple references, `scale-set.json` for responsive values +4. **Value mapping**: Convert CSS custom property references to token references +5. **Preserve existing tokens**: Don't overwrite existing tokens that already have the correct structure +6. **Documentation**: Update component documentation to reflect the new token structure + +## Common value mappings + +| CSS reference | Token reference | +| ----------------------------------- | -------------------------- | +| `--spectrum-spacing-{n}` | `{spacing-{n}}` | +| `--spectrum-color-{name}` | `{color-{name}}` | +| `--spectrum-font-{property}` | `{font-{property}}` | +| `--spectrum-corner-radius-{size}` | `{corner-radius-{size}}` | +| `--spectrum-{component}-{property}` | `{{component}-{property}}` | + +## Validation + +After converting, ensure: + +1. All custom properties from the CSS file are represented in the tokens.json +2. Token keys follow the naming convention +3. Schema references are correct +4. Component assignments are accurate +5. Value references point to valid tokens + +This conversion process ensures better maintainability, consistency, and enables the Spectrum design system to properly manage component theming and styling. 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/components/accordion/tokens.json b/components/accordion/tokens.json new file mode 100644 index 00000000000..678bc1ee1c5 --- /dev/null +++ b/components/accordion/tokens.json @@ -0,0 +1,388 @@ +{ + "accordion-divider-color": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "modifier": true + }, + "accordion-item-content-disabled-color": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "modifier": true + }, + "accordion-item-content-color": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}", + "modifier": true + }, + "accordion-item-height": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-200}", + "modifier": true, + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-300}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-400}" + }, + "compact": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-300}" + } + } + } + } + }, + "accordion-disclosure-indicator-height": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}", + "modifier": false, + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-300}" + } + } + }, + "accordion-item-header-top-to-text": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-regular-medium}", + "modifier": true, + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-regular-small}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-regular-large}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-regular-extra-large}" + }, + "compact": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-compact-medium}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-compact-small}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-compact-large}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-compact-extra-large}" + } + } + }, + "spacious": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-spacious-medium}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-spacious-small}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-spacious-large}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-spacious-extra-large}" + } + } + } + } + }, + "accordion-item-header-bottom-to-text": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-regular-medium}", + "modifier": false, + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-regular-small}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-regular-large}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-regular-extra-large}" + }, + "compact": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-compact-medium}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-compact-small}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-compact-large}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-compact-extra-large}" + } + } + }, + "spacious": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-spacious-medium}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-spacious-small}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-spacious-large}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-spacious-extra-large}" + } + } + } + } + }, + "accordion-focus-indicator-gap": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "accordion-focus-indicator-thickness": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "accordion-corner-radius": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "accordion-item-content-area-top-to-content": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-content-area-top-to-content}" + }, + "accordion-item-content-area-bottom-to-content": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-content-area-bottom-to-content}" + }, + "accordion-component-edge-to-text": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-75}" + }, + "accordion-item-header-font": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "accordion-item-header-font-weight": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "accordion-item-header-font-style": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "accordion-item-header-font-size": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-300}", + "modifier": true, + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-200}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-500}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-700}" + } + } + }, + "accordion-item-header-line-height": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "1.25", + "modifier": false, + "sets": { + "lang-ja": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "lang-zh": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "lang-ko": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "spacious": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "1.278", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "1.25" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "1.273" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "1.25" + } + } + } + } + }, + "accordion-item-content-font": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "accordion-item-content-font-weight": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-weight}" + }, + "accordion-item-content-font-style": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-style}" + }, + "accordion-item-content-font-size": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-size-s}", + "modifier": true, + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-size-xs}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-size-m}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-size-l}" + } + } + }, + "accordion-item-content-line-height": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "accordion-background-color-default": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-900} {background-opacity-default}, transparent)" + }, + "accordion-background-color-hover": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-900} {background-opacity-hover}, transparent)" + }, + "accordion-background-color-down": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-900} {background-opacity-down}, transparent)" + }, + "accordion-background-color-key-focus": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-900} {background-opacity-key-focus}, transparent)" + }, + "accordion-item-header-color-default": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "accordion-item-header-color-hover": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "accordion-item-header-color-down": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "accordion-item-header-color-key-focus": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}" + }, + "accordion-item-header-disabled-color": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}" + }, + "accordion-focus-indicator-color": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "accordion-min-block-size": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "max({accordion-item-height}, calc({accordion-item-header-top-to-text} + {accordion-item-header-bottom-to-text} + ({accordion-item-header-font-size} * {accordion-item-header-line-height})))" + } +} diff --git a/components/actionbar/tokens.json b/components/actionbar/tokens.json new file mode 100644 index 00000000000..34352924e18 --- /dev/null +++ b/components/actionbar/tokens.json @@ -0,0 +1,98 @@ +{ + "actionbar-height": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{action-bar-height}" + }, + "actionbar-minimum-width": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{action-bar-minimum-width}" + }, + "actionbar-corner-radius": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-medium-size-extra-large}" + }, + "actionbar-spacing-label-to-action-group": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{action-bar-label-to-action-group-area}" + }, + "actionbar-spacing-padding-inline": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{action-bar-edge-to-content-area}" + }, + "actionbar-spacing-top-area": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{action-bar-top-to-content-area}" + }, + "actionbar-spacing-bottom-area": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{action-bar-bottom-to-content-area}" + }, + "actionbar-close-button-to-counter": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{action-bar-close-button-to-counter}" + }, + "actionbar-item-counter-line-height": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "actionbar-item-counter-color": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "actionbar-popover-background-color": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{background-elevated-color}" + }, + "actionbar-popover-border-color": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{action-bar-border-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "actionbar-spacing-outer-edge": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "actionbar-shadow-horizontal": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-x}" + }, + "actionbar-shadow-vertical": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-y}" + }, + "actionbar-shadow-blur": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-blur}" + }, + "actionbar-shadow-color": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-color}" + }, + "actionbar-item-counter-line-height-cjk": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + } +} diff --git a/components/actionbutton/tokens.json b/components/actionbutton/tokens.json new file mode 100644 index 00000000000..7cdd667e329 --- /dev/null +++ b/components/actionbutton/tokens.json @@ -0,0 +1,79 @@ +{ + "actionbutton-border-color": { + "component": "action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonBorder" + } + } + }, + "actionbutton-background-color-default": { + "component": "action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "actionbutton-content-color-default": { + "component": "action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "actionbutton-background-color-disabled": { + "component": "action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "actionbutton-content-color-disabled": { + "component": "action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "actionbutton-focus-indicator-color": { + "component": "action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "actionbutton-animation-duration": { + "component": "action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0ms" + } + } + } +} diff --git a/components/actiongroup/tokens.json b/components/actiongroup/tokens.json new file mode 100644 index 00000000000..10e21c27c18 --- /dev/null +++ b/components/actiongroup/tokens.json @@ -0,0 +1,60 @@ +{ + "actiongroup-gap-size-compact": { + "component": "actiongroup", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "actiongroup-horizontal-spacing-compact": { + "component": "actiongroup", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "-1px" + }, + "actiongroup-vertical-spacing-compact": { + "component": "actiongroup", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "-1px" + }, + "actiongroup-button-spacing-reset": { + "component": "actiongroup", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "actiongroup-border-radius-reset": { + "component": "actiongroup", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "actiongroup-border-radius": { + "component": "actiongroup", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "actiongroup-horizontal-spacing-regular": { + "component": "actiongroup", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "small": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "medium": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + } + } + }, + "actiongroup-vertical-spacing-regular": { + "component": "actiongroup", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "small": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "medium": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + } + } + } +} diff --git a/components/actionmenu/tokens.json b/components/actionmenu/tokens.json new file mode 100644 index 00000000000..0967ef424bc --- /dev/null +++ b/components/actionmenu/tokens.json @@ -0,0 +1 @@ +{} diff --git a/components/alertbanner/tokens.json b/components/alertbanner/tokens.json new file mode 100644 index 00000000000..10092ac368e --- /dev/null +++ b/components/alertbanner/tokens.json @@ -0,0 +1,181 @@ +{ + "alert-banner-close-button-spacing": { + "component": "alert-banner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + } + } + }, + "alert-banner-edge-to-button": { + "component": "alert-banner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + } + } + }, + "alert-banner-edge-to-divider": { + "component": "alert-banner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + } + } + }, + "alert-banner-text-to-button-vertical": { + "component": "alert-banner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + } + } + }, + "alert-banner-neutral-background": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-background-color-default}" + }, + "alert-banner-min-height": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{alert-banner-minimum-height}" + }, + "alert-banner-max-inline-size": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{alert-banner-width}" + }, + "alert-banner-inline-size": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "auto" + }, + "alert-banner-font-size": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "alert-banner-line-height": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}", + "sets": { + "cjk": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + } + } + }, + "alert-banner-font-family": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "alert-banner-icon-size": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "alert-banner-icon-to-text": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-300}" + }, + "alert-banner-inline-start-to-content": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "alert-banner-inline-end-to-content": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "alert-banner-text-to-button-horizontal": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "alert-banner-block-edge-to-button": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "alert-banner-close-button-to-content": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "alert-banner-close-button-to-inline-end": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{alert-banner-close-button-spacing}" + }, + "alert-banner-text-margin-block-start": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "max(0px, {alert-banner-top-to-text} - {alert-banner-block-edge-to-button})" + }, + "alert-banner-text-margin-block-end": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "max(0px, {alert-banner-bottom-to-text} - {alert-banner-block-edge-to-button})" + }, + "alert-banner-background": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-background-color-default}" + }, + "alert-banner-font-color": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "alert-banner-border-color": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "alert-banner-border-width": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "0", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "{border-width-100}" + } + } + } +} diff --git a/components/alertdialog/tokens.json b/components/alertdialog/tokens.json new file mode 100644 index 00000000000..52208bc3a16 --- /dev/null +++ b/components/alertdialog/tokens.json @@ -0,0 +1,135 @@ +{ + "alert-dialog-min-width": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{alert-dialog-minimum-width}" + }, + "alert-dialog-max-width": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{alert-dialog-maximum-width}" + }, + "alert-dialog-icon-size": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "alert-dialog-corner-radius": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-extra-large-default}" + }, + "alert-dialog-warning-icon-color": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{notice-visual-color}" + }, + "alert-dialog-error-icon-color": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-visual-color}" + }, + "alert-dialog-background-color": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{background-layer-2-color}" + }, + "alert-dialog-title-font-family": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "alert-dialog-title-font-weight": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-sans-serif-font-weight}" + }, + "alert-dialog-title-font-style": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-sans-serif-font-style}" + }, + "alert-dialog-title-line-height": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-line-height}" + }, + "alert-dialog-title-color": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-color}" + }, + "alert-dialog-heading-size": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{alert-dialog-title-font-size}" + }, + "alert-dialog-description-content-size": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{alert-dialog-description-font-size}" + }, + "alert-dialog-body-font-family": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "alert-dialog-body-font-weight": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-weight}" + }, + "alert-dialog-body-font-style": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-style}" + }, + "alert-dialog-body-line-height": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-200}" + }, + "alert-dialog-body-color": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}" + }, + "alert-dialog-title-to-description": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "alert-dialog-minimum-title-to-icon": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "alert-dialog-description-to-buttons": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-700}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-600}" + } + } + }, + "alert-dialog-padding": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-500}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + } + } + } +} diff --git a/components/asset/tokens.json b/components/asset/tokens.json new file mode 100644 index 00000000000..10fc58487e9 --- /dev/null +++ b/components/asset/tokens.json @@ -0,0 +1,22 @@ +{ + "asset-folder-background": { + "component": "asset", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "asset-file-background": { + "component": "asset", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "asset-folder-outline": { + "component": "asset", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-500}" + }, + "asset-file-outline": { + "component": "asset", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-500}" + } +} diff --git a/components/assetcard/dist/metadata.json b/components/assetcard/dist/metadata.json index 94bf07de0af..27b8245979f 100644 --- a/components/assetcard/dist/metadata.json +++ b/components/assetcard/dist/metadata.json @@ -161,7 +161,6 @@ "--spectrum-gray-600", "--spectrum-gray-700", "--spectrum-gray-75", - "--spectrum-gray-75-rgb", "--spectrum-gray-900", "--spectrum-heading-cjk-font-style", "--spectrum-heading-cjk-font-weight", diff --git a/components/assetcard/index.css b/components/assetcard/index.css index 56c40cc58c1..74724eb5ff7 100644 --- a/components/assetcard/index.css +++ b/components/assetcard/index.css @@ -13,11 +13,13 @@ /* outer container, unstyled */ .spectrum-AssetCard { + --spectrum-assetcard-overlay-background-color: rgb(27 127 245 / 10%); --spectrum-assetcard-background-color: var(--spectrum-gray-75); + --spectrum-assetcard-selectionindicator-background-color-default: color-mix(in sRGB, var(--spectrum-gray-75) 90%, transparent); + --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300); /* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */ --spectrum-assetcard-asset-size: 224px; - --spectrum-assetcard-overlay-background-color: rgb(27 127 245 / 10%); --spectrum-assetcard-asset-animation-duration: var(--spectrum-animation-duration-100); --spectrum-assetcard-asset-container-border-size: 1px; --spectrum-assetcard-header-margin-block-start: var(--spectrum-spacing-300); @@ -38,8 +40,6 @@ --spectrum-assetcard-selectionindicator-color: var(--spectrum-white); --spectrum-assetcard-selectionindicator-font-weight: var(--spectrum-bold-font-weight); --spectrum-assetcard-selectionindicator-font-size: var(--spectrum-font-size-400); - --spectrum-assetcard-selectionindicator-background-color-default: rgb(var(--spectrum-gray-75-rgb), 0.9); - --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300); /* title */ --spectrum-assetcard-title-text-color: var(--spectrum-gray-900); diff --git a/components/assetcard/tokens.json b/components/assetcard/tokens.json new file mode 100644 index 00000000000..a841fd2189a --- /dev/null +++ b/components/assetcard/tokens.json @@ -0,0 +1,142 @@ +{ + "assestcard-focus-indicator-color": { + "component": "asset-card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-700}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + } + } + }, + "assetcard-border-color-selected": { + "component": "asset-card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-900}" + } + } + }, + "assetcard-border-color-selected-down": { + "component": "asset-card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-900}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-1000}" + } + } + }, + "assetcard-border-color-selected-hover": { + "component": "asset-card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-900}" + } + } + }, + "assetcard-content-font-size": { + "component": "asset-card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-size-s}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-size-xs}" + } + } + }, + "assetcard-focus-ring-border-radius": { + "component": "asset-card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "8px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "9px" + } + } + }, + "assetcard-header-content-font-size": { + "component": "asset-card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-size-xs}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-size-xxs}" + } + } + }, + "assetcard-selectionindicator-background-color-ordered": { + "component": "asset-card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-900}" + } + } + }, + "assetcard-selectionindicator-margin": { + "component": "asset-card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "12px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "15px" + } + } + }, + "assetcard-title-font-size": { + "component": "asset-card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-size-xs}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-size-xxs}" + } + } + } +} diff --git a/components/assetlist/tokens.json b/components/assetlist/tokens.json new file mode 100644 index 00000000000..a0aca47906d --- /dev/null +++ b/components/assetlist/tokens.json @@ -0,0 +1,129 @@ +{ + "assetlist-item-background-color-down": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "assetlist-item-background-color-hover": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "assetlist-width": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "272px" + }, + "assetlist-child-indicator-animation": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "assetlist-item-height": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-600}" + }, + "assetlist-item-padding-inline-start": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "assetlist-item-padding-inline-end": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "assetlist-item-margin-block-end": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "assetlist-item-border-radius": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "assetlist-item-animation": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "assetlist-item-font-size": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "assetlist-item-font-weight": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "assetlist-thumbnail-width": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "assetlist-thumbnail-height": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "assetlist-thumbnail-margin-inline-start": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "assetlist-item-label-padding-inline-start": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "assetlist-label-color": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "assetlist-border-color-key-focus": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-700}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + } + } + }, + "assetlist-item-background-color-selected": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-800} 15%, transparent)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-900} 10%, transparent)" + } + } + }, + "assetlist-item-background-color-selected-hover": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-800} 25%, transparent)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-900} 20%, transparent)" + } + } + } +} diff --git a/components/avatar/tokens.json b/components/avatar/tokens.json new file mode 100644 index 00000000000..e387b988b9f --- /dev/null +++ b/components/avatar/tokens.json @@ -0,0 +1,52 @@ +{ + "avatar-color-opacity": { + "component": "avatar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "1" + }, + "avatar-inline-size": { + "component": "avatar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{avatar-size-100}" + }, + "avatar-block-size": { + "component": "avatar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{avatar-size-100}" + }, + "avatar-border-radius": { + "component": "avatar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{avatar-block-size}" + }, + "avatar-border-thickness": { + "component": "avatar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{avatar-border-width}" + }, + "avatar-border-color-default": { + "component": "avatar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{avatar-border-color}" + }, + "avatar-focus-indicator-thickness": { + "component": "avatar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "avatar-focus-indicator-gap": { + "component": "avatar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "avatar-focus-indicator-color": { + "component": "avatar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "avatar-color-opacity-disabled": { + "component": "avatar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{avatar-opacity-disabled}" + } +} diff --git a/components/badge/tokens.json b/components/badge/tokens.json new file mode 100644 index 00000000000..b4abcfc8d2f --- /dev/null +++ b/components/badge/tokens.json @@ -0,0 +1,402 @@ +{ + "badge-label-icon-color-primary": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{black}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + } + } + }, + "badge-border-color": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "badge-border-width": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "badge-corner-radius": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-medium-size-medium}" + }, + "badge-height": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "badge-font-size": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "badge-font-weight": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{medium-font-weight}" + }, + "badge-line-height": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "badge-line-height-cjk": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "badge-label-spacing-vertical-top": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "badge-label-spacing-vertical-bottom": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "badge-label-spacing-horizontal": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-100}" + }, + "badge-workflow-icon-size": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "badge-icon-text-spacing": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "badge-icon-spacing-horizontal": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-visual-100}" + }, + "badge-icon-spacing-vertical-top": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-100}" + }, + "badge-icon-only-spacing-horizontal": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-visual-only-100}" + }, + "badge-label-icon-color": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "badge-background-color-default": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-background-color-default}" + }, + "badge-background-color-accent": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-default}" + }, + "badge-background-color-informative": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{informative-background-color-default}" + }, + "badge-background-color-negative": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-background-color-default}" + }, + "badge-background-color-positive": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{positive-background-color-default}" + }, + "badge-background-color-notice": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{notice-background-color-default}" + }, + "badge-background-color-gray": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-background-color-default}" + }, + "badge-background-color-red": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{red-background-color-default}" + }, + "badge-background-color-orange": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{orange-background-color-default}" + }, + "badge-background-color-yellow": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{yellow-background-color-default}" + }, + "badge-background-color-chartreuse": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{chartreuse-background-color-default}" + }, + "badge-background-color-celery": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{celery-background-color-default}" + }, + "badge-background-color-green": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{green-background-color-default}" + }, + "badge-background-color-seafoam": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{seafoam-background-color-default}" + }, + "badge-background-color-cyan": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cyan-background-color-default}" + }, + "badge-background-color-blue": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-background-color-default}" + }, + "badge-background-color-indigo": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{indigo-background-color-default}" + }, + "badge-background-color-purple": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{purple-background-color-default}" + }, + "badge-background-color-fuchsia": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{fuchsia-background-color-default}" + }, + "badge-background-color-magenta": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-background-color-default}" + }, + "badge-background-color-pink": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{pink-background-color-default}" + }, + "badge-background-color-turquoise": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{turquoise-background-color-default}" + }, + "badge-background-color-brown": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{brown-background-color-default}" + }, + "badge-background-color-cinnamon": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cinnamon-background-color-default}" + }, + "badge-background-color-silver": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{silver-background-color-default}" + }, + "badge-subtle-label-icon-color": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-1000}" + }, + "badge-subtle-background-color-default": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subtle-background-color-default}" + }, + "badge-subtle-background-color-accent": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-subtle-background-color-default}" + }, + "badge-subtle-background-color-informative": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{informative-subtle-background-color-default}" + }, + "badge-subtle-background-color-negative": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-subtle-background-color-default}" + }, + "badge-subtle-background-color-positive": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{positive-subtle-background-color-default}" + }, + "badge-subtle-background-color-notice": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{notice-subtle-background-color-default}" + }, + "badge-subtle-background-color-gray": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-subtle-background-color-default}" + }, + "badge-subtle-background-color-red": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{red-subtle-background-color-default}" + }, + "badge-subtle-background-color-orange": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{orange-subtle-background-color-default}" + }, + "badge-subtle-background-color-yellow": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{yellow-subtle-background-color-default}" + }, + "badge-subtle-background-color-chartreuse": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{chartreuse-subtle-background-color-default}" + }, + "badge-subtle-background-color-celery": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{celery-subtle-background-color-default}" + }, + "badge-subtle-background-color-green": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{green-subtle-background-color-default}" + }, + "badge-subtle-background-color-seafoam": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{seafoam-subtle-background-color-default}" + }, + "badge-subtle-background-color-cyan": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cyan-subtle-background-color-default}" + }, + "badge-subtle-background-color-blue": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-subtle-background-color-default}" + }, + "badge-subtle-background-color-indigo": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{indigo-subtle-background-color-default}" + }, + "badge-subtle-background-color-purple": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{purple-subtle-background-color-default}" + }, + "badge-subtle-background-color-fuchsia": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{fuchsia-subtle-background-color-default}" + }, + "badge-subtle-background-color-magenta": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-subtle-background-color-default}" + }, + "badge-subtle-background-color-pink": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{pink-subtle-background-color-default}" + }, + "badge-subtle-background-color-turquoise": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{turquoise-subtle-background-color-default}" + }, + "badge-subtle-background-color-brown": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{brown-subtle-background-color-default}" + }, + "badge-subtle-background-color-cinnamon": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cinnamon-subtle-background-color-default}" + }, + "badge-subtle-background-color-silver": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{silver-subtle-background-color-default}" + }, + "badge-outline-label-icon-color": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-1000}" + }, + "badge-outline-background-color": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{background-layer-2-color}" + }, + "badge-outline-border-color-neutral": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-visual-color}" + }, + "badge-outline-border-color-accent": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-visual-color}" + }, + "badge-outline-border-color-informative": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{informative-visual-color}" + }, + "badge-outline-border-color-negative": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-visual-color}" + }, + "badge-outline-border-color-notice": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{notice-visual-color}" + }, + "badge-outline-border-color-positive": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{positive-visual-color}" + } +} diff --git a/components/breadcrumb/dist/metadata.json b/components/breadcrumb/dist/metadata.json index 01ed6639e32..24abc7263c6 100644 --- a/components/breadcrumb/dist/metadata.json +++ b/components/breadcrumb/dist/metadata.json @@ -133,8 +133,8 @@ "--spectrum-corner-radius-small-default", "--spectrum-default-font-style", "--spectrum-disabled-content-color", + "--spectrum-drop-zone-background-color", "--spectrum-drop-zone-background-color-opacity", - "--spectrum-drop-zone-background-color-rgb", "--spectrum-extra-bold-font-weight", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", diff --git a/components/breadcrumb/index.css b/components/breadcrumb/index.css index bc62aafbc57..076a6b026cc 100644 --- a/components/breadcrumb/index.css +++ b/components/breadcrumb/index.css @@ -61,7 +61,7 @@ --spectrum-breadcrumbs-action-button-color: var(--spectrum-neutral-subdued-content-color-default); --spectrum-breadcrumbs-action-button-color-disabled: var(--spectrum-disabled-content-color); --spectrum-breadcrumbs-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-breadcrumbs-item-dragged-background: rgb(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity)); + --spectrum-breadcrumbs-item-dragged-background: color-mix(in sRGB, var(--spectrum-drop-zone-background-color) var(--spectrum-drop-zone-background-color-opacity), transparent); /* Sub-component: heading */ --mod-heading-margin-end: 0px; diff --git a/components/breadcrumb/tokens.json b/components/breadcrumb/tokens.json new file mode 100644 index 00000000000..f291c8f6f6e --- /dev/null +++ b/components/breadcrumb/tokens.json @@ -0,0 +1,209 @@ +{ + "breadcrumbs-block-size": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "breadcrumbs-line-height": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "breadcrumbs-font-size": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "breadcrumbs-font-family": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "breadcrumbs-font-weight": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "breadcrumbs-font-style": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "breadcrumbs-font-size-current": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "breadcrumbs-font-family-current": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "breadcrumbs-font-weight-current": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "breadcrumbs-text-decoration-thickness": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-underline-thickness}" + }, + "breadcrumbs-text-decoration-gap": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-underline-gap}" + }, + "breadcrumbs-separator-spacing-inline": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{breadcrumbs-text-to-separator-medium}" + }, + "breadcrumbs-text-spacing-block-start": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "breadcrumbs-text-spacing-block-end": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "breadcrumbs-icon-spacing-block": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{breadcrumbs-top-to-separator-medium}" + }, + "breadcrumbs-title-spacing-block-start": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{breadcrumbs-text-spacing-block-start}" + }, + "breadcrumbs-title-spacing-block-end": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{breadcrumbs-text-spacing-block-end}" + }, + "breadcrumbs-inline-start": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{breadcrumbs-start-edge-to-text-medium}" + }, + "breadcrumbs-inline-end": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{breadcrumbs-end-edge-to-text}" + }, + "breadcrumbs-inline-start-to-truncated-menu": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{breadcrumbs-start-edge-to-truncated-menu}" + }, + "breadcrumbs-action-button-spacing-inline": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{breadcrumbs-truncated-menu-to-separator}" + }, + "breadcrumbs-action-button-spacing-block": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{breadcrumbs-top-to-truncated-menu}" + }, + "breadcrumbs-focus-indicator-thickness": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "breadcrumbs-focus-indicator-gap": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "breadcrumbs-item-link-border-radius": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-small-default}" + }, + "breadcrumbs-text-color": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "LinkText" + } + } + }, + "breadcrumbs-text-color-current": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "breadcrumbs-text-color-disabled": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "breadcrumbs-separator-color": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "breadcrumbs-action-button-color": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "LinkText" + } + } + }, + "breadcrumbs-action-button-color-disabled": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "breadcrumbs-focus-indicator-color": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "breadcrumbs-item-dragged-background": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {drop-zone-background-color} {drop-zone-background-color-opacity}, transparent)" + } +} diff --git a/components/button/tokens.json b/components/button/tokens.json new file mode 100644 index 00000000000..c80b535afb2 --- /dev/null +++ b/components/button/tokens.json @@ -0,0 +1,347 @@ +{ + "button-bottom-to-text-extra-large": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "13px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "17px" + } + } + }, + "button-bottom-to-text-large": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "13px" + } + } + }, + "button-bottom-to-text-medium": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "8px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + } + } + }, + "button-bottom-to-text-small": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "4px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "5px" + } + } + }, + "button-top-to-text-extra-large": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "13px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + } + } + }, + "button-top-to-text-large": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "12px" + } + } + }, + "button-top-to-text-medium": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "7px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "9px" + } + } + }, + "button-top-to-text-small": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "5px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "6px" + } + } + }, + "button-animation-duration": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "button-focus-ring-gap": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "button-focus-ring-thickness": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "button-focus-indicator-color": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "button-min-width": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({component-height-100} * {button-minimum-width-multiplier})" + }, + "button-height": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "button-border-radius": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({button-height} / 2)" + }, + "button-border-width": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "button-line-height": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "1.2" + }, + "button-font-weight": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "button-font-size": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "button-edge-to-visual": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({component-pill-edge-to-visual-100} - {button-border-width})" + }, + "button-edge-to-visual-only": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({component-pill-edge-to-visual-only-100} - {button-border-width})" + }, + "button-edge-to-text": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({component-pill-edge-to-text-100} - {button-border-width})" + }, + "button-padding-label-to-icon": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "button-top-to-text": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{button-top-to-text-medium}" + }, + "button-bottom-to-text": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{button-bottom-to-text-medium}" + }, + "button-top-to-icon": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-100}" + }, + "button-intended-icon-size": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "downstate-perspective": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "max({downstate-height}, {downstate-width} * {component-size-width-ratio-down})" + }, + "button-border-radius-icon-only": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-full}" + }, + "button-border-color-default": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonBorder" + } + } + }, + "button-border-color-hover": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonBorder" + } + } + }, + "button-border-color-down": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonBorder" + } + } + }, + "button-border-color-focus": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonBorder" + } + } + }, + "button-content-color-default": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "button-content-color-hover": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "button-content-color-down": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "button-content-color-focus": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "button-background-color-disabled": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "button-border-color-disabled": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "button-content-color-disabled": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "button-background-color-default": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-default}" + }, + "button-background-color-hover": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-hover}" + }, + "button-background-color-down": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-down}" + }, + "button-background-color-focus": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-key-focus}" + }, + "button-focus-ring-color": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + } +} diff --git a/components/buttongroup/tokens.json b/components/buttongroup/tokens.json new file mode 100644 index 00000000000..f4e31a6cac8 --- /dev/null +++ b/components/buttongroup/tokens.json @@ -0,0 +1,37 @@ +{ + "buttongroup-spacing": { + "component": "button-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "buttongroup-display": { + "component": "button-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "flex" + }, + "buttongroup-flex-direction": { + "component": "button-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "row" + }, + "buttongroup-justify-content": { + "component": "button-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "normal" + }, + "buttongroup-spacing-small": { + "component": "button-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "buttongroup-display-vertical": { + "component": "button-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "inline-flex" + }, + "buttongroup-flex-direction-vertical": { + "component": "button-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "column" + } +} diff --git a/components/calendar/dist/metadata.json b/components/calendar/dist/metadata.json index cc1fb80035c..2783c23f14b 100644 --- a/components/calendar/dist/metadata.json +++ b/components/calendar/dist/metadata.json @@ -165,7 +165,7 @@ "--spectrum-font-size-100", "--spectrum-font-size-300", "--spectrum-font-size-50", - "--spectrum-gray-100-rgb", + "--spectrum-gray-100", "--spectrum-gray-800", "--spectrum-logical-rotation", "--spectrum-neutral-content-color-default", diff --git a/components/calendar/index.css b/components/calendar/index.css index 352a388d74f..6d621068021 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -12,7 +12,7 @@ */ .spectrum-Calendar { - --spectrum-calendar-day-background-color-selected-disabled: rgb(var(--spectrum-gray-100-rgb), 0.4); + --spectrum-calendar-day-background-color-selected-disabled: color-mix(in sRGB, var(--spectrum-gray-100) 40%, transparent); --spectrum-calendar-day-width: var(--mod-calendar-day-width, var(--spectrum-component-height-100)); --spectrum-calendar-day-height: var(--mod-calendar-day-height, var(--spectrum-component-height-100)); @@ -48,7 +48,7 @@ --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))); --spectrum-calendar-day-background-selected-hover: var(--highcontrast-calendar-day-background-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover))); - --spectrum-calendar-day-background-color-selected-disabled: rgb(var(--spectrum-gray-100-rgb), 0.4); + --spectrum-calendar-day-background-color-selected-disabled: color-mix(in sRGB, var(--spectrum-gray-100) 40%, transparent); --spectrum-calendar-day-background-cap-selected: var(--highcontrast-calendar-day-background-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected))); --spectrum-calendar-day-background-hover: var(--highcontrast-calendar-day-background-hover, var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover))); --spectrum-calendar-day-background-focus: var(--highcontrast-calendar-day-background-focus, var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus))); diff --git a/components/calendar/tokens.json b/components/calendar/tokens.json new file mode 100644 index 00000000000..363c99b8035 --- /dev/null +++ b/components/calendar/tokens.json @@ -0,0 +1,408 @@ +{ + "calendar-day-background-color-cap-selected": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-800} 25%, transparent)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-900} 20%, transparent)" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "calendar-day-background-color-down": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-200}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-black-200}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "calendar-day-background-color-hover": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {white} 7%, transparent)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {black} 6%, transparent)" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "calendar-day-background-color-key-focus": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {white} 7%, transparent)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {black} 6%, transparent)" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "calendar-day-background-color-selected": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-800} 15%, transparent)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-900} 10%, transparent)" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "calendar-day-background-color-selected-hover": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-800} 25%, transparent)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-900} 20%, transparent)" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "calendar-day-border-color-key-focus": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-700}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "calendar-day-today-background-color-selected-hover": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-800} 25%, transparent)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-900} 20%, transparent)" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "calendar-day-background-color-selected-disabled": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-100} 40%, transparent)" + }, + "calendar-day-width": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "calendar-day-height": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "calendar-day-border-size": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "calendar-day-padding": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "4px" + }, + "calendar-border-radius-reset": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "calendar-border-width-reset": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "calendar-margin-y": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "24px" + }, + "calendar-margin-x": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "32px" + }, + "calendar-width": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc(({calendar-day-width} + {calendar-day-padding} * 2) * 7)" + }, + "calendar-title-text-letter-spacing": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0.06em" + }, + "calendar-title-height": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "32px" + }, + "calendar-title-text-size": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-300}" + }, + "calendar-title-text-font-weight": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "calendar-title-text-color": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "calendar-heading-text-size": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-50}" + }, + "calendar-button-icon-color": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}" + }, + "logical-rotation": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "matrix(-1, 0, 0, 1, 0, 0)" + }, + "calendar-day-background": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent" + }, + "calendar-day-background-selected": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{calendar-day-background-color-selected}" + }, + "calendar-day-background-selected-hover": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{calendar-day-background-color-selected-hover}" + }, + "calendar-day-background-cap-selected": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{calendar-day-background-color-cap-selected}" + }, + "calendar-day-background-hover": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{calendar-day-background-color-hover}" + }, + "calendar-day-background-focus": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{calendar-day-background-color-key-focus}" + }, + "calendar-day-background-down": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{calendar-day-background-color-down}" + }, + "calendar-day-background-layer-color": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent" + }, + "calendar-day-border-color": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent" + }, + "calendar-day-border-color-focus": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{calendar-day-border-color-key-focus}" + }, + "calendar-day-text-size": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "calendar-day-text-font-weight": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "calendar-day-text-font-weight-selected": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "calendar-day-text-font-weight-cap-selected": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "calendar-day-today-background-selected-hover": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{calendar-day-today-background-color-selected-hover}" + }, + "calendar-day-today-text-font-weight": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "calendar-day-today-text-color": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "calendar-day-today-border-color": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "calendar-day-text-color": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}" + }, + "calendar-day-text-color-selected": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "calendar-day-text-color-cap-selected": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "calendar-day-text-color-hover": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "calendar-day-text-color-key-focus": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "calendar-day-text-color-disabled": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}" + }, + "calendar-day-today-border-color-disabled": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-border-color}" + }, + "calendar-day-text-size-han": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-50}" + } +} diff --git a/components/card/dist/metadata.json b/components/card/dist/metadata.json index d1d22100c30..3513bde3d51 100644 --- a/components/card/dist/metadata.json +++ b/components/card/dist/metadata.json @@ -100,7 +100,7 @@ "--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-color", "--mod-card-selected-background-opacity", "--mod-card-subtitle-padding-right", "--mod-card-title-font-color", @@ -146,7 +146,7 @@ "--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-color", "--spectrum-card-selected-background-opacity", "--spectrum-card-selection-background-color", "--spectrum-card-selection-background-size", diff --git a/components/card/index.css b/components/card/index.css index 472e79504f2..0559a3efd42 100644 --- a/components/card/index.css +++ b/components/card/index.css @@ -376,7 +376,7 @@ } &.is-selected .spectrum-Card-preview::before { - background-color: rgb(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--mod-card-selected-background-opacity, var(--spectrum-card-selected-background-opacity))); + background-color: var(--mod-card-selected-background-color, color-mix(in sRGB, var(--spectrum-card-selected-background-color) var(--spectrum-card-selected-background-opacity), transparent)); } .spectrum-Card-body { diff --git a/components/card/tokens.json b/components/card/tokens.json new file mode 100644 index 00000000000..312ada09815 --- /dev/null +++ b/components/card/tokens.json @@ -0,0 +1,221 @@ +{ + "card-selected-background-color": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-500}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-900}" + } + } + }, + "card-border-color": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "card-border-color-hover": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "card-border-color-selected": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-700}" + }, + "card-divider-color": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "card-preview-background-color": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "card-preview-background-color-hover": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "card-background-color": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{background-layer-2-color}" + }, + "card-body-spacing": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "card-body-padding-block-start": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "card-title-padding-right": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "card-content-margin-top": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "card-content-margin-bottom": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "card-footer-padding-top": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "card-subtitle-padding-right": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "card-border-width": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "card-corner-radius": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "card-title-font-family": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "card-title-font-size": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-size-xxs}" + }, + "card-title-font-weight": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-sans-serif-font-weight}" + }, + "card-title-font-style": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-sans-serif-font-style}" + }, + "card-title-line-height": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-line-height}" + }, + "card-title-font-color": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-color}" + }, + "card-body-font-family": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "card-body-font-size": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-size-s}" + }, + "card-body-font-weight": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-weight}" + }, + "card-body-font-style": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-style}" + }, + "card-body-line-height": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-line-height}" + }, + "card-body-font-color": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}" + }, + "card-actions-spacing": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "card-actions-size": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{card-selection-background-size}" + }, + "card-actions-border-radius": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "card-actions-drop-shadow-color": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-color}" + }, + "card-actions-drop-shadow-x": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-x}" + }, + "card-actions-drop-shadow-y": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-y}" + }, + "card-actions-drop-shadow-blur": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-blur}" + }, + "card-focus-indicator-color": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "card-focus-indicator-width": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "card-selected-background-opacity": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0.1" + }, + "card-preview-border-width-selected": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "card-horizontal-body-padding": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "card-horizontal-preview-padding": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + } +} diff --git a/components/checkbox/tokens.json b/components/checkbox/tokens.json new file mode 100644 index 00000000000..d7683876e71 --- /dev/null +++ b/components/checkbox/tokens.json @@ -0,0 +1,280 @@ +{ + "checkbox-checkmark-color": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "checkbox-background-color": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "checkbox-content-color-default": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "checkbox-content-color-hover": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "checkbox-content-color-down": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "checkbox-content-color-focus": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "checkbox-control-color-default": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "checkbox-control-color-hover": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "checkbox-control-color-down": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "checkbox-control-color-focus": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "checkbox-focus-indicator-color": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "checkbox-control-color-disabled": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "checkbox-invalid-color-default": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-color-900}" + }, + "checkbox-invalid-color-hover": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-color-1000}" + }, + "checkbox-invalid-color-down": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-color-1000}" + }, + "checkbox-invalid-color-focus": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-color-1000}" + }, + "checkbox-emphasized-color-default": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-default}" + }, + "checkbox-emphasized-color-hover": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-hover}" + }, + "checkbox-emphasized-color-down": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-down}" + }, + "checkbox-emphasized-color-focus": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "checkbox-control-selected-color-default": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "checkbox-control-selected-color-hover": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "checkbox-control-selected-color-down": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "checkbox-font-size": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "checkbox-line-height": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "checkbox-line-height-cjk": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "checkbox-text-font-weight": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "checkbox-text-font-style": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "checkbox-height": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "checkbox-control-size": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{checkbox-control-size-medium}" + }, + "checkbox-control-corner-radius": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-small-size-medium}" + }, + "checkbox-focus-indicator-gap": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "checkbox-focus-indicator-thickness": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "checkbox-border-width": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "checkbox-animation-duration": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "checkbox-top-to-text": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "checkbox-bottom-to-text": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "checkbox-text-to-control": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-control-100}" + }, + "checkbox-top-to-control": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{checkbox-top-to-control-medium}" + }, + "checkbox-selected-border-width": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({checkbox-control-size} / 2)" + } +} diff --git a/components/clearbutton/tokens.json b/components/clearbutton/tokens.json new file mode 100644 index 00000000000..e8605a75298 --- /dev/null +++ b/components/clearbutton/tokens.json @@ -0,0 +1,108 @@ +{ + "clear-button-height": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "clear-button-width": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "clear-button-padding": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{in-field-button-edge-to-fill}" + }, + "clear-button-icon-color": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "clear-button-icon-color-hover": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "clear-button-icon-color-down": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "clear-button-icon-color-key-focus": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}" + }, + "clear-button-background-color": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent" + }, + "clear-button-background-color-hover": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent" + }, + "clear-button-background-color-down": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent" + }, + "clear-button-background-color-key-focus": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent" + }, + "clear-button-background-color-hover-static-white": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-400}" + }, + "clear-button-background-color-down-static-white": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-500}" + }, + "clear-button-background-color-key-focus-static-white": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-400}" + }, + "clear-button-icon-color-static-white": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "clear-button-icon-color-hover-static-white": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "clear-button-icon-color-down-static-white": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "clear-button-icon-color-key-focus-static-white": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "clear-button-icon-color-disabled-static-white": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-static-white-content-color}" + }, + "clear-button-icon-color-disabled": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}" + } +} diff --git a/components/closebutton/tokens.json b/components/closebutton/tokens.json new file mode 100644 index 00000000000..ee597007b22 --- /dev/null +++ b/components/closebutton/tokens.json @@ -0,0 +1,209 @@ +{ + "closebutton-border-radius": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-full}" + }, + "closebutton-icon-color-default": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "closebutton-icon-color-hover": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "closebutton-icon-color-down": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "closebutton-icon-color-focus": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "closebutton-icon-color-disabled": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "closebutton-focus-indicator-thickness": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "closebutton-focus-indicator-gap": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "closebutton-focus-indicator-color": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "closebutton-size": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "closebutton-animation-duration": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "closebutton-background-color-default": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "closebutton-background-color-hover": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "closebutton-background-color-down": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "closebutton-background-color-focus": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "closebutton-icon-color-default-static-white": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-800}" + }, + "closebutton-icon-color-hover-static-white": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-900}" + }, + "closebutton-icon-color-down-static-white": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-900}" + }, + "closebutton-icon-color-focus-static-white": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-900}" + }, + "closebutton-icon-color-disabled-static-white": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-static-white-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "closebutton-background-color-hover-static-white": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-100}" + }, + "closebutton-background-color-down-static-white": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-100}" + }, + "closebutton-background-color-focus-static-white": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-100}" + }, + "closebutton-focus-indicator-color-static-white": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{static-white-focus-indicator-color}" + }, + "closebutton-icon-color-default-static-black": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-black-800}" + }, + "closebutton-icon-color-hover-static-black": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-black-900}" + }, + "closebutton-icon-color-down-static-black": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-black-900}" + }, + "closebutton-icon-color-focus-static-black": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-black-900}" + }, + "closebutton-icon-color-disabled-static-black": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-static-black-background-color}" + }, + "closebutton-background-color-hover-static-black": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-black-100}" + }, + "closebutton-background-color-down-static-black": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-black-100}" + }, + "closebutton-background-color-focus-static-black": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-black-100}" + }, + "closebutton-focus-indicator-color-static-black": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{static-black-focus-indicator-color}" + } +} diff --git a/components/coachindicator/tokens.json b/components/coachindicator/tokens.json new file mode 100644 index 00000000000..8c3c8ceee75 --- /dev/null +++ b/components/coachindicator/tokens.json @@ -0,0 +1,143 @@ +{ + "coach-indicator-gap": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "6px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "8px" + } + } + }, + "coach-indicator-quiet-ring-diameter": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + } + } + }, + "coach-indicator-ring-default-color": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-700}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + } + } + }, + "coach-indicator-ring-diameter": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + } + } + }, + "coach-indicator-ring-static-white-color": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "coach-indicator-ring-border-size": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "coach-indicator-sizing-multiple": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "3" + }, + "coach-indicator-ring-diameter-size": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-indicator-ring-diameter}" + }, + "coach-indicator-min-inline-size": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({coach-indicator-ring-diameter-size} * {coach-indicator-sizing-multiple})" + }, + "coach-indicator-min-block-size": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({coach-indicator-ring-diameter-size} * {coach-indicator-sizing-multiple})" + }, + "coach-indicator-inline-size": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-indicator-min-inline-size}" + }, + "coach-indicator-block-size": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-indicator-min-block-size}" + }, + "coach-animation-indicator-ring-duration": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-6000}" + }, + "coach-indicator-animation-keyframe-scale-initial": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "1" + }, + "coach-indicator-animation-ring-inner-delay-multiple": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "-0.5" + }, + "coach-indicator-animation-keyframe-scale-initial-quiet": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0.8" + }, + "coach-indicator-sizing-multiple-quiet": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "2.75" + }, + "coach-indicator-ring-diameter-size-quiet": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-indicator-quiet-ring-diameter}" + }, + "coach-indicator-animation-ring-inner-delay-multiple-quiet": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "-0.33" + }, + "coach-indicator-ring-default-color-static-white": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "coach-indicator-ring-default-color-static-black": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{black}" + } +} diff --git a/components/coachmark/tokens.json b/components/coachmark/tokens.json new file mode 100644 index 00000000000..ab23c56e432 --- /dev/null +++ b/components/coachmark/tokens.json @@ -0,0 +1,197 @@ +{ + "coachmark-width": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-width}" + }, + "coachmark-min-width": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-minimum-width}" + }, + "coachmark-max-width": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-maximum-width}" + }, + "coachmark-media-min-height": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-media-minimum-height}" + }, + "coachmark-border-size": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "coachmark-border-radius": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-large-default}" + }, + "coachmark-media-fixed-height": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-media-height}" + }, + "coachmark-padding": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-edge-to-content}" + }, + "coachmark-image-to-heading": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-edge-to-content}" + }, + "coachmark-header-to-body": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "coachmark-body-to-footer": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "coachmark-title-color": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-color}" + }, + "coachmark-title-font-family": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-serif-font}" + }, + "coachmark-title-font-size": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-title-font-size}" + }, + "coachmark-title-font-style": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{title-serif-font-style}" + }, + "coachmark-title-text-font-weight": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{title-sans-serif-font-weight}" + }, + "coachmark-title-text-line-height": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{title-line-height}" + }, + "coachmark-content-font-size": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-body-font-size}" + }, + "coachmark-content-font-weight": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-weight}" + }, + "coachmark-step-color": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-pagination-color}" + }, + "coachmark-step-font-style": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-serif-font-style}" + }, + "coachmark-step-font-size": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-pagination-body-font-size}" + }, + "coachmark-step-text-font-weight": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{medium-font-weight}" + }, + "coachmark-step-text-line-height": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-200}" + }, + "coachmark-step-to-bottom": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-pagination-text-to-bottom-edge}" + }, + "coachmark-action-menu-vertical-offset": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "-4px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "-6px" + } + } + }, + "coachmark-buttongroup-display": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "flex" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "none" + } + } + }, + "coachmark-buttongroup-mobile-display": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "none" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "flex" + } + } + }, + "coachmark-menu-display": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "inline-flex" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "none" + } + } + }, + "coachmark-menu-mobile-display": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "none" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "inline-flex" + } + } + } +} diff --git a/components/colorarea/dist/metadata.json b/components/colorarea/dist/metadata.json index 2580a3d0eab..a1b67e026b5 100644 --- a/components/colorarea/dist/metadata.json +++ b/components/colorarea/dist/metadata.json @@ -30,7 +30,6 @@ "--spectrum-color-area-minimum-width", "--spectrum-color-area-width", "--spectrum-colorarea-border-color", - "--spectrum-colorarea-border-color-rgb", "--spectrum-colorarea-border-radius", "--spectrum-colorarea-border-width", "--spectrum-colorarea-disabled-background-color", @@ -39,10 +38,7 @@ "--spectrum-colorarea-min-width", "--spectrum-colorarea-width" ], - "global": [ - "--spectrum-disabled-background-color", - "--spectrum-gray-1000-rgb" - ], + "global": ["--spectrum-disabled-background-color", "--spectrum-gray-1000"], "passthroughs": [], "high-contrast": [ "--highcontrast-colorarea-border-color", diff --git a/components/colorarea/index.css b/components/colorarea/index.css index e9f1b1091f5..e48cca18fbb 100644 --- a/components/colorarea/index.css +++ b/components/colorarea/index.css @@ -12,28 +12,25 @@ */ .spectrum-ColorArea { - --spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding); - - /* @TODO: leveraging the rgb token in this case to achieve the desired border color implementation as rgb + opacity are required by the `rgba` function. */ - --spectrum-colorarea-border-color-rgb: var(--spectrum-gray-1000-rgb); - --spectrum-colorarea-border-color: rgb(var(--spectrum-colorarea-border-color-rgb), var(--spectrum-color-area-border-opacity)); - --spectrum-colorarea-border-width: var(--spectrum-color-area-border-width); - --spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color); - --spectrum-colorarea-height: var(--spectrum-color-area-height); - --spectrum-colorarea-width: var(--spectrum-color-area-width); - --spectrum-colorarea-min-width: var(--spectrum-color-area-minimum-width); - --spectrum-colorarea-min-height: var(--spectrum-color-area-minimum-height); + --spectrum-colorarea-border-radius: var(--mod-colorarea-border-radius, var(--spectrum-color-area-border-rounding)); + --spectrum-colorarea-border-color: var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, color-mix(in sRGB, var(--spectrum-gray-1000) var(--spectrum-color-area-border-opacity), transparent))); + --spectrum-colorarea-border-width: var(--mod-colorarea-border-width, var(--spectrum-color-area-border-width)); + --spectrum-colorarea-disabled-background-color: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-disabled-background-color))); + --spectrum-colorarea-height: var(--mod-colorarea-height, var(--spectrum-color-area-height)); + --spectrum-colorarea-width: var(--mod-colorarea-width, var(--spectrum-color-area-width)); + --spectrum-colorarea-min-width: var(--mod-colorarea-min-width, var(--spectrum-color-area-minimum-width)); + --spectrum-colorarea-min-height: var(--mod-colorarea-min-height, var(--spectrum-color-area-minimum-height)); position: relative; display: inline-block; cursor: default; - min-inline-size: var(--mod-colorarea-min-width, var(--spectrum-colorarea-min-width)); - min-block-size: var(--mod-colorarea-min-height, var(--spectrum-colorarea-min-height)); - inline-size: var(--mod-colorarea-width, var(--spectrum-colorarea-width)); - block-size: var(--mod-colorarea-height, var(--spectrum-colorarea-height)); + min-inline-size: var(--spectrum-colorarea-min-width); + min-block-size: var(--spectrum-colorarea-min-height); + inline-size: var(--spectrum-colorarea-width); + block-size: var(--spectrum-colorarea-height); box-sizing: border-box; - border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius)); - border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color))); + border-radius: var(--spectrum-colorarea-border-radius); + border: var(--spectrum-colorarea-border-width) solid var(--spectrum-colorarea-border-color); touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */ user-select: none; @@ -44,8 +41,8 @@ &.is-disabled { pointer-events: none; - background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-colorarea-disabled-background-color))); - border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color-disabled); + background: var(--spectrum-colorarea-disabled-background-color); + border: var(--spectrum-colorarea-border-width) solid var(--highcontrast-colorarea-border-color-disabled); .spectrum-ColorArea-gradient { display: none; @@ -54,7 +51,7 @@ } .spectrum-ColorArea-handle { - transform: translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)), 0); + transform: translate(calc(var(--spectrum-colorarea-width) - var(--spectrum-colorarea-border-width)), 0); inset-block-start: 0; &:dir(rtl) { @@ -67,7 +64,7 @@ block-size: 100%; /* calc used here to properly calculate the `border-radius` for the gradient such that it aligns with the `border-radius` of the enclosing border */ - border-radius: calc(var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius)) - var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width))); + border-radius: calc(var(--spectrum-colorarea-border-radius) - var(--spectrum-colorarea-border-width)); } .spectrum-ColorArea-slider { diff --git a/components/colorarea/tokens.json b/components/colorarea/tokens.json new file mode 100644 index 00000000000..4d865832219 --- /dev/null +++ b/components/colorarea/tokens.json @@ -0,0 +1,65 @@ +{ + "colorarea-border-radius": { + "component": "colorarea", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-area-border-rounding}" + }, + "colorarea-border-color": { + "component": "colorarea", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-1000} {color-area-border-opacity}, transparent)", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "colorarea-border-color-disabled": { + "component": "colorarea", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "colorarea-border-width": { + "component": "colorarea", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-area-border-width}" + }, + "colorarea-disabled-background-color": { + "component": "colorarea", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "colorarea-height": { + "component": "colorarea", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-area-height}" + }, + "colorarea-width": { + "component": "colorarea", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-area-width}" + }, + "colorarea-min-width": { + "component": "colorarea", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-area-minimum-width}" + }, + "colorarea-min-height": { + "component": "colorarea", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-area-minimum-height}" + } +} diff --git a/components/colorhandle/dist/metadata.json b/components/colorhandle/dist/metadata.json index cbd2b5d599f..a0c048bbb11 100644 --- a/components/colorhandle/dist/metadata.json +++ b/components/colorhandle/dist/metadata.json @@ -27,8 +27,10 @@ ], "component": [ "--spectrum-color-handle-border-width", + "--spectrum-color-handle-inner-border-color", "--spectrum-color-handle-inner-border-opacity", "--spectrum-color-handle-inner-border-width", + "--spectrum-color-handle-outer-border-color", "--spectrum-color-handle-outer-border-opacity", "--spectrum-color-handle-outer-border-width", "--spectrum-color-handle-size", @@ -39,7 +41,6 @@ ], "global": [ "--spectrum-animation-duration-100", - "--spectrum-black-rgb", "--spectrum-color-control-track-width", "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", diff --git a/components/colorhandle/index.css b/components/colorhandle/index.css index 4a44307da48..bc977fd1dd3 100644 --- a/components/colorhandle/index.css +++ b/components/colorhandle/index.css @@ -24,13 +24,11 @@ .spectrum-ColorHandle { /* outer border as box shadow on the colorhandle */ - /* TODO replace --spectrum-black-rgb with color-handle-outer-border-color when supported by RGBA */ - --spectrum-colorhandle-outer-border-color: rgb(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity)); + --spectrum-colorhandle-outer-border-color: color-mix(in sRGB, var(--spectrum-color-handle-outer-border-color) var(--spectrum-color-handle-outer-border-opacity), transparent); --spectrum-colorhandle-outer-border-width: var(--spectrum-color-handle-outer-border-width); /* inner border as inset boxshadow on the colorhandle-inner */ - /* TODO replace --spectrum-black-rgb with color-handle-inner-border-color when supported by RGBA */ - --spectrum-colorhandle-inner-border-color: rgb(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity)); + --spectrum-colorhandle-inner-border-color: color-mix(in sRGB, var(--spectrum-color-handle-inner-border-color) var(--spectrum-color-handle-inner-border-opacity), transparent); /* @passthrough -- opacity checkerboard customization */ --mod-opacity-checkerboard-position: 50%; diff --git a/components/colorhandle/tokens.json b/components/colorhandle/tokens.json new file mode 100644 index 00000000000..64727a557d7 --- /dev/null +++ b/components/colorhandle/tokens.json @@ -0,0 +1,72 @@ +{ + "colorhandle-outer-border-color": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {color-handle-outer-border-color} {color-handle-outer-border-opacity}, transparent)" + }, + "colorhandle-outer-border-width": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-handle-outer-border-width}" + }, + "colorhandle-inner-border-color": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {color-handle-inner-border-color} {color-handle-inner-border-opacity}, transparent)" + }, + "colorhandle-size": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-handle-size}" + }, + "colorhandle-border-width": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-handle-border-width}" + }, + "colorhandle-border-color": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "colorhandle-animation-duration": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "colorhandle-hitarea-size": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-control-track-width}" + }, + "colorhandle-hitarea-border-radius": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "100%" + }, + "colorhandle-focused-size": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-handle-size-key-focus}" + }, + "colorhandle-border-color-disabled": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}" + }, + "colorhandle-fill-color-disabled": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}" + }, + "colorhandle-inner-border-width": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-handle-inner-border-width}" + }, + "picked-color": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{picked-color}" + } +} diff --git a/components/colorloupe/tokens.json b/components/colorloupe/tokens.json new file mode 100644 index 00000000000..84fa2c3ef93 --- /dev/null +++ b/components/colorloupe/tokens.json @@ -0,0 +1,86 @@ +{ + "colorloupe-checkerboard-fill": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "url('#checkerboard-primary')" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "url('#checkerboard-secondary')" + } + } + }, + "colorloupe-width": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-loupe-width}" + }, + "colorloupe-height": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-loupe-height}" + }, + "colorloupe-offset": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-loupe-bottom-to-color-handle}" + }, + "colorloupe-animation-distance": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "8px" + }, + "colorloupe-drop-shadow-x": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-x}" + }, + "colorloupe-drop-shadow-y": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-y}" + }, + "colorloupe-drop-shadow-blur": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-blur}" + }, + "colorloupe-drop-shadow-color": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-color}" + }, + "colorloupe-outer-border-width": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-loupe-outer-border-width}" + }, + "colorloupe-inner-border-width": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-loupe-inner-border-width}" + }, + "colorloupe-outer-border-color": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-loupe-outer-border}" + }, + "colorloupe-inner-border-color": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-loupe-inner-border}" + }, + "colorloupe-checkerboard-dark-color": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{opacity-checkerboard-square-dark}" + }, + "colorloupe-checkerboard-light-color": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{opacity-checkerboard-square-light}" + } +} diff --git a/components/colorslider/dist/metadata.json b/components/colorslider/dist/metadata.json index aad9494baf6..a82cb5376d6 100644 --- a/components/colorslider/dist/metadata.json +++ b/components/colorslider/dist/metadata.json @@ -31,6 +31,7 @@ "--mod-color-slider-vertical-minimum-height" ], "component": [ + "--spectrum-color-slider-border-color", "--spectrum-color-slider-border-color-default", "--spectrum-color-slider-border-color-local", "--spectrum-color-slider-border-opacity", @@ -43,8 +44,7 @@ ], "global": [ "--spectrum-color-control-track-width", - "--spectrum-disabled-background-color", - "--spectrum-gray-1000-rgb" + "--spectrum-disabled-background-color" ], "passthroughs": ["--mod-colorhandle-hitarea-border-radius"], "high-contrast": [ diff --git a/components/colorslider/index.css b/components/colorslider/index.css index 8c34d8aa396..ff61f5f37bd 100644 --- a/components/colorslider/index.css +++ b/components/colorslider/index.css @@ -14,9 +14,7 @@ .spectrum-ColorSlider { /* Size and Spacing */ --spectrum-color-slider-control-track-width: var(--spectrum-color-control-track-width); - - /* @todo Refactor with --spectrum-color-slider-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */ - --spectrum-color-slider-border-color-default: rgb(var(--spectrum-gray-1000-rgb), var(--spectrum-color-slider-border-opacity)); + --spectrum-color-slider-border-color-default: color-mix(in sRGB, var(--spectrum-color-slider-border-color) var(--spectrum-color-slider-border-opacity), transparent); /* @passthrough -- settings for nested color handle */ --mod-colorhandle-hitarea-border-radius: var(--mod-color-slider-handle-hitarea-border-radius, 0px); diff --git a/components/colorslider/tokens.json b/components/colorslider/tokens.json new file mode 100644 index 00000000000..7021a179106 --- /dev/null +++ b/components/colorslider/tokens.json @@ -0,0 +1,45 @@ +{ + "color-slider-control-track-width": { + "component": "color-slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-control-track-width}" + }, + "color-slider-border-color": { + "component": "color-slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-400} {color-slider-border-opacity}, transparent)", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "color-slider-border-color-disabled": { + "component": "color-slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "color-slider-background-color-disabled": { + "component": "color-slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "color-slider-fill-color-disabled": { + "component": "color-slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}" + } +} diff --git a/components/colorwheel/dist/metadata.json b/components/colorwheel/dist/metadata.json index 1c087a7f50f..7f532d7f14a 100644 --- a/components/colorwheel/dist/metadata.json +++ b/components/colorwheel/dist/metadata.json @@ -35,7 +35,6 @@ "--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", @@ -49,7 +48,7 @@ "--spectrum-border-width-100", "--spectrum-color-control-track-width", "--spectrum-disabled-background-color", - "--spectrum-gray-1000-rgb" + "--spectrum-gray-1000" ], "passthroughs": [], "high-contrast": [ diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css index d910165d5ac..c5d2547d054 100644 --- a/components/colorwheel/index.css +++ b/components/colorwheel/index.css @@ -16,11 +16,8 @@ --spectrum-colorwheel-block-size: var(--spectrum-color-wheel-width); --spectrum-colorwheel-min-inline-size: var(--spectrum-color-wheel-minimum-width); - /* @TODO: leveraging the rgb token in this case to achieve the desired border color implementation as rgb + opacity are required by the `rgba` function. */ - --spectrum-colorwheel-border-color-rgb: var(--spectrum-gray-1000-rgb); - --spectrum-colorwheel-border-opacity: var(--spectrum-color-wheel-border-opacity); - --spectrum-colorwheel-border-color: rgb(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity)); + --spectrum-colorwheel-border-color: color-mix(in sRGB, var(--spectrum-gray-1000) var(--spectrum-colorwheel-border-opacity), transparent); --spectrum-colorwheel-border-width: var(--spectrum-border-width-100); --spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width); diff --git a/components/colorwheel/tokens.json b/components/colorwheel/tokens.json new file mode 100644 index 00000000000..b7858d104a2 --- /dev/null +++ b/components/colorwheel/tokens.json @@ -0,0 +1,40 @@ +{ + "colorwheel-colorarea-container-size": { + "component": "color-wheel", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "144px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "182px" + } + } + }, + "colorwheel-path": { + "component": "color-wheel", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "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" + } + } + }, + "colorwheel-path-borders": { + "component": "color-wheel", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "value": "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" + }, + "mobile": { + "value": "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" + } + } + } +} diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index ee4f97630eb..45e61324eb2 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -195,7 +195,7 @@ "--spectrum-combobox-spacing-to-help-text" ], "global": [ - "--spectrum-blue-900-rgb", + "--spectrum-blue-900", "--spectrum-border-width-200", "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", diff --git a/components/combobox/index.css b/components/combobox/index.css index eab2bd4feb8..f7634e9c70d 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -61,7 +61,7 @@ --spectrum-combobox-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); --spectrum-combobox-border-color-invalid-key-focus: var(--spectrum-negative-border-color-key-focus); - --spectrum-combobox-background-color-autofill: rgb(var(--spectrum-blue-900-rgb), 0.3); + --spectrum-combobox-background-color-autofill: color-mix(in sRGB, var(--spectrum-blue-900) 70%, transparent); --mod-combobox-popover-animation-distance: var(--spectrum-component-to-menu-medium); diff --git a/components/combobox/tokens.json b/components/combobox/tokens.json new file mode 100644 index 00000000000..c0fa89e1993 --- /dev/null +++ b/components/combobox/tokens.json @@ -0,0 +1,305 @@ +{ + "combobox-block-size": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "combobox-icon-size": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "combobox-font-size": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "combobox-line-height": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "combobox-spacing-inline-icon-to-button": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{combo-box-visual-to-field-button}" + }, + "combobox-block-spacing-edge-to-progress-circle": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-top-to-progress-circle-medium}" + }, + "combobox-block-spacing-edge-to-icon": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-100}" + }, + "combobox-spacing-block-start-edge-to-text": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "combobox-spacing-block-end-edge-to-text": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "combobox-spacing-inline-start-edge-to-text": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-100}" + }, + "combobox-spacing-inline-icon-to-text": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "combobox-spacing-to-help-text": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{help-text-to-component}" + }, + "combobox-inline-size": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-width-medium}" + }, + "combobox-min-inline-size": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({combo-box-minimum-width-multiplier} * {combobox-block-size})" + }, + "combobox-button-width": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{combobox-block-size}" + }, + "combobox-focus-indicator-thickness": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "combobox-focus-indicator-gap": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "combobox-focus-indicator-color": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "combobox-border-radius": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-medium-size-medium}" + }, + "combobox-border-width": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "combobox-spacing-label-to-combobox": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-label-to-component}" + }, + "combobox-spacing-side-label-to-field": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "combobox-font-style": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "combobox-font-weight": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "combobox-line-height-cjk": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "combobox-background-color-disabled": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "combobox-background-color-default": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "combobox-border-color-default": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-300}" + }, + "combobox-border-color-hover": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-400}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "combobox-border-color-focus": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "combobox-border-color-focus-hover": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "combobox-border-color-key-focus": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "combobox-border-color-disabled": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-border-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "combobox-border-color-invalid-default": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "combobox-border-color-invalid-hover": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "combobox-border-color-invalid-focus": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "combobox-border-color-invalid-focus-hover": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-focus-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "combobox-border-color-invalid-key-focus": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "combobox-background-color-autofill": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgb({blue-900-rgb}, 0.3)" + }, + "combobox-readonly-input-background-color": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{combobox-background-color-default}" + }, + "combobox-readonly-border-color-invalid-default": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-default}" + }, + "combobox-readonly-background-color-disabled": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}" + }, + "combobox-readonly-text-color-disabled": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "combobox-readonly-border-color-disabled": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-border-color}" + }, + "combobox-readonly-input-border-color": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{combobox-border-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + } +} diff --git a/components/contextualhelp/tokens.json b/components/contextualhelp/tokens.json new file mode 100644 index 00000000000..9feac5efd63 --- /dev/null +++ b/components/contextualhelp/tokens.json @@ -0,0 +1,53 @@ +{ + "contextual-help-minimum-width": { + "component": "contextual-help", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{contextual-help-minimum-width}" + }, + "contextual-help-body-size": { + "component": "contextual-help", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{contextual-help-body-size}" + }, + "contextual-help-title-size": { + "component": "contextual-help", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{contextual-help-title-size}" + }, + "contextual-help-content-spacing": { + "component": "contextual-help", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + } + } + }, + "contextual-help-heading-color": { + "component": "contextual-help", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "contextual-help-body-color": { + "component": "contextual-help", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + } +} diff --git a/components/datepicker/tokens.json b/components/datepicker/tokens.json new file mode 100644 index 00000000000..3e6c8925d8c --- /dev/null +++ b/components/datepicker/tokens.json @@ -0,0 +1,313 @@ +{ + "datepicker-dash-line-height": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "24px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "30px" + } + } + }, + "datepicker-datetime-width-first": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "36px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "45px" + } + } + }, + "datepicker-generic-padding": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "15px" + } + } + }, + "datepicker-initial-width": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "128px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "160px" + } + } + }, + "datepicker-input-datetime-width": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "30px" + } + } + }, + "datepicker-invalid-icon-to-button": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "8px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + } + } + }, + "datepicker-invalid-icon-to-button-quiet": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "7px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "9px" + } + } + }, + "datepicker-width-quiet-first": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "72px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "90px" + } + } + }, + "datepicker-width-quiet-second": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + } + } + }, + "datepicker-initial-height": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "datepicker-border-radius": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "datepicker-border-radius-quiet": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "datepicker-border-width": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "datepicker-min-width": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-width}" + }, + "datepicker-icon-size": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "datepicker-pickerbutton-border-color": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-500}" + }, + "datepicker-pickerbutton-border-color-invalid": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-default}" + }, + "datepicker-pickerbutton-width": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({field-edge-to-disclosure-icon-100} * 2 + {workflow-icon-size-100})" + }, + "datepicker-quiet-button-offset": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "datepicker-icon-to-text": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-100}" + }, + "datepicker-pickerbutton-width-quiet": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-pickerbutton-width} - {datepicker-quiet-button-offset})" + }, + "datepicker-focus-ring-gap": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "datepicker-focus-thickness": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "datepicker-focus-animation": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "datepicker-focus-ring-width": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "datepicker-focus-ring-color": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "datepicker-focus-line-gap": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "datepicker-invalid-quiet-color": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-default}" + }, + "datepicker-quiet-border-color-hover": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-500}" + }, + "datepicker-border-color-disabled": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-border-color}" + }, + "datepicker-dash-font-size": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "datepicker-dash-color": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "datepicker-range-dash-padding-top": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "datepicker-range-dash-marin-inline-start": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc(-0.5 * {datepicker-dash-font-size})" + }, + "datepicker-range-input-width-first": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-initial-width} - 2 * {datepicker-generic-padding})" + }, + "datepicker-input-width-base": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-range-input-width-first} + {datepicker-icon-size})" + }, + "datepicker-input-width": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-input-width-base} + {datepicker-initial-height})" + }, + "datepicker-range-input-width-quiet-first": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-width-quiet-first} + {datepicker-width-quiet-second})" + }, + "datepicker-input-width-quiet": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-range-input-width-quiet-first} + {datepicker-icon-size} + {datepicker-initial-height})" + }, + "datepicker-datetime-input-width-first": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-input-width-base} + {datepicker-datetime-width-first})" + }, + "datepicker-datetime-input-width": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-datetime-input-width-first} + {datepicker-icon-size} + {datepicker-initial-height})" + }, + "datepicker-datetime-quiet-input-width-first": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-input-width-base} + {datepicker-input-datetime-width})" + }, + "datepicker-datetime-quiet-input-width": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-datetime-quiet-input-width-first} + {datepicker-icon-size} + {datepicker-initial-height})" + }, + "datepicker-padding-inline-end": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-pickerbutton-width} + {component-edge-to-text-100} - {datepicker-border-width} * 2)" + }, + "datepicker-padding-inline-end-quiet": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc(({datepicker-pickerbutton-width} + {component-edge-to-text-100}) - {datepicker-quiet-button-offset})" + }, + "datepicker-padding-inline-end-invalid-quiet": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-pickerbutton-width-quiet} + {datepicker-icon-size} + {datepicker-icon-to-text})" + } +} diff --git a/components/dial/tokens.json b/components/dial/tokens.json new file mode 100644 index 00000000000..0fce94a29d5 --- /dev/null +++ b/components/dial/tokens.json @@ -0,0 +1,220 @@ +{ + "dial-background-color-default": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-75}" + }, + "dial-handle-marker-color-key-focus": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "dial-handle-marker-color": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-700}" + }, + "dial-border-color": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-700}" + }, + "dial-handle-marker-color-hover": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}" + }, + "dial-border-color-hover": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}" + }, + "dial-handle-marker-color-mouse-focus": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-700}" + }, + "dial-min-max-tick-color": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-600}" + }, + "dial-label-text-color": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-700}" + }, + "dial-label-text-color-disabled": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-700}" + }, + "dial-handle-border-color-disabled": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-400}" + }, + "dial-container-width": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "48px" + }, + "dial-handle-marker-width": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "12px" + }, + "dial-handle-marker-height": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "2px" + }, + "dial-handle-marker-border-radius": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "1px" + }, + "dial-handle-size": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "100%" + }, + "dial-min-height": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "dial-controls-min-height": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "dial-min-max-tick-angles": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "45deg" + }, + "dial-width": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "32px" + }, + "dial-height": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "32px" + }, + "dial-handle-border-size": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "dial-label-text-size": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-75}" + }, + "dial-label-line-height": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-200}" + }, + "dial-border-radius": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + } + } + }, + "dial-controls-margin": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "8px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + } + } + }, + "dial-handle-block-margin": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + } + } + }, + "dial-handle-inline-margin": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + } + } + }, + "dial-handle-position": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "8px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + } + } + }, + "dial-label-container-top-to-text": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "4px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "5px" + } + } + }, + "dial-label-gap-y": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "5px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "6px" + } + } + } +} diff --git a/components/dialog/dist/metadata.json b/components/dialog/dist/metadata.json index 738156392db..358086a3e1a 100644 --- a/components/dialog/dist/metadata.json +++ b/components/dialog/dist/metadata.json @@ -71,7 +71,7 @@ "component": [], "global": [ "--spectrum-background-layer-2-color", - "--spectrum-black-rgb", + "--spectrum-black", "--spectrum-body-color", "--spectrum-body-sans-serif-font-style", "--spectrum-body-sans-serif-font-weight", diff --git a/components/dialog/index.css b/components/dialog/index.css index 357dbd6c68f..df30fae1e16 100644 --- a/components/dialog/index.css +++ b/components/dialog/index.css @@ -50,9 +50,10 @@ /* Hero */ --spectrum-standard-dialog-hero-block-size: 140px; - /* Passthrough for nested component(s) */ + /* @passthrough start */ --mod-buttongroup-justify-content: flex-end; --mod-buttongroup-flex-wrap: nowrap; + /* @passthrough end */ /* Fullscreen/fullscreenTakeover */ --spectrum-takeover-dialog-title-font-size: var(--spectrum-title-size-xxl); @@ -444,6 +445,6 @@ @media (forced-colors: active) { .spectrum-Dialog { - border: 1px solid rgb(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)); + border: 1px solid color-mix(in sRGB, var(--spectrum-black) var(--spectrum-overlay-opacity), transparent); } } diff --git a/components/dialog/tokens.json b/components/dialog/tokens.json new file mode 100644 index 00000000000..615c30d2bce --- /dev/null +++ b/components/dialog/tokens.json @@ -0,0 +1,302 @@ +{ + "standard-dialog-max-width": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{standard-dialog-maximum-width-medium}" + }, + "standard-dialog-min-inline-size": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{standard-dialog-minimum-width}" + }, + "standard-dialog-border-radius": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-extra-large-default}" + }, + "standard-dialog-heading-font-weight": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{title-sans-serif-font-weight}" + }, + "standard-dialog-heading-font-size": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{standard-dialog-title-font-size}" + }, + "standard-dialog-heading-font-style": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{title-sans-serif-font-style}" + }, + "standard-dialog-heading-font-family": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "standard-dialog-description-font-weight": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-weight}" + }, + "standard-dialog-description-font-size": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{standard-dialog-body-font-size}" + }, + "standard-dialog-description-font-style": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-style}" + }, + "standard-dialog-description-font-family": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "standard-dialog-header-content-font-size": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{standard-dialog-body-font-size}" + }, + "standard-dialog-heading-line-height": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{title-line-height}" + }, + "standard-dialog-description-line-height": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-200}" + }, + "standard-dialog-heading-text-color": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-color}" + }, + "standard-dialog-description-text-color": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}" + }, + "standard-dialog-background-color": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{background-layer-2-color}" + }, + "standard-dialog-padding": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{standard-dialog-spacing-edge-to-content}" + }, + "standard-dialog-spacing-title-to-description": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "standard-dialog-spacing-description-to-footer": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-500}" + }, + "standard-dialog-spacing-title-to-header-content": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "standard-dialog-spacing-edge-to-header-content-inline-end": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "standard-dialog-spacing-footer-to-button-group": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "standard-dialog-spacing-grid-padding": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{standard-dialog-padding}" + }, + "standard-dialog-spacing-edge-to-close-button": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "standard-dialog-hero-block-size": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "140px" + }, + "takeover-dialog-title-font-size": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{title-size-xxl}" + }, + "takeover-dialog-grid-spacing": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{takeover-dialog-spacing-grid-padding}" + }, + "takeover-dialog-spacing-header-content-gap": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{takeover-dialog-spacing-header-gap}" + }, + "takeover-dialog-spacing-title-to-content": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{takeover-dialog-spacing-title-to-body}" + }, + "takeover-dialog-inline-size": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{takeover-dialog-width}" + }, + "takeover-dialog-block-size": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{takeover-dialog-height}" + }, + "dialog-confirm-border-radius": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "4px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "5px" + } + } + }, + "dialog-confirm-description-text-size": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "14px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "15px" + } + } + }, + "dialog-confirm-entry-animation-distance": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "25px" + } + } + }, + "dialog-confirm-hero-height": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "128px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "160px" + } + } + }, + "dialog-confirm-padding-grid": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "40px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "24px" + } + } + }, + "dialog-confirm-title-text-size": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "18px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "19px" + } + } + }, + "standard-dialog-spacing-edge-to-content": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-500}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + } + } + }, + "takeover-dialog-spacing-grid-padding": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-500}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + } + } + }, + "takeover-dialog-spacing-header-gap": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + } + } + }, + "takeover-dialog-spacing-title-to-body": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-500}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + } + } + } +} diff --git a/components/divider/tokens.json b/components/divider/tokens.json new file mode 100644 index 00000000000..b2c9a0cdfae --- /dev/null +++ b/components/divider/tokens.json @@ -0,0 +1,22 @@ +{ + "divider-background-color": { + "component": "divider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "divider-thickness": { + "component": "divider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{divider-thickness-medium}" + }, + "divider-inline-minimum-size": { + "component": "divider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{divider-horizontal-minimum-width}" + }, + "divider-block-minimum-size": { + "component": "divider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{divider-vertical-minimum-height}" + } +} diff --git a/components/dropindicator/tokens.json b/components/dropindicator/tokens.json new file mode 100644 index 00000000000..610c3829b11 --- /dev/null +++ b/components/dropindicator/tokens.json @@ -0,0 +1,26 @@ +{ + "dropindicator-border-size": { + "component": "drop-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "dropindicator-circle-size": { + "component": "drop-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "12px" + }, + "dropindicator-color": { + "component": "drop-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-700}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + } + } + } +} diff --git a/components/dropzone/dist/metadata.json b/components/dropzone/dist/metadata.json index e91812f2d27..eaf506c37eb 100644 --- a/components/dropzone/dist/metadata.json +++ b/components/dropzone/dist/metadata.json @@ -53,7 +53,6 @@ "--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", diff --git a/components/dropzone/index.css b/components/dropzone/index.css index b495fc596e1..4606c5a88a0 100644 --- a/components/dropzone/index.css +++ b/components/dropzone/index.css @@ -20,7 +20,6 @@ --spectrum-drop-zone-inline-size: var(--spectrum-drop-zone-width); /* Color */ - --spectrum-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb); --spectrum-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); --spectrum-drop-zone-illustration-color-hover: var(--spectrum-accent-content-color-default); --spectrum-drop-zone-body-to-action: var(--spectrum-spacing-300); @@ -68,7 +67,7 @@ &.is-dragged { --mod-drop-zone-border-style: var(--mod-drop-zone-border-style-dragged, solid); - --mod-drop-zone-background-color: rgb(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-dragged-background-color))); + --mod-drop-zone-background-color: color-mix(in sRGB, var(--spectrum-drop-zone-background-color) var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-dragged-background-color), transparent)); --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); /* Updated values for a nested illustrated message when state changes */ @@ -83,7 +82,7 @@ &.is-filled { /* note: the below applies to .is-filled.is-dragged but works here b/c dragged is the only state applying background color */ - --mod-drop-zone-background-color: rgb(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled))); + --mod-drop-zone-background-color: color-mix(in sRGB, var(--spectrum-drop-zone-background-color) var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled), transparent)); /* Updated values for a nested illustrated message when state changes */ --mod-illustrated-message-display: none; diff --git a/components/dropzone/tokens.json b/components/dropzone/tokens.json new file mode 100644 index 00000000000..00f0f9441ed --- /dev/null +++ b/components/dropzone/tokens.json @@ -0,0 +1,121 @@ +{ + "drop-zone-padding": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "drop-zone-border-width": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "drop-zone-corner-radius": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-700}" + }, + "drop-zone-border-color": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-300}" + }, + "drop-zone-inline-size": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-zone-width}" + }, + "drop-zone-border-color-hover": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-visual-color}" + }, + "drop-zone-illustration-color-hover": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-default}" + }, + "drop-zone-body-to-action": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "drop-zone-stroke-dash-gap": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-zone-border-dash-gap}" + }, + "drop-zone-stroke-dash-length": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-zone-border-dash-length}" + }, + "drop-zone-dragged-background-color": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-zone-background-color-opacity}" + }, + "drop-zone-content-max-width": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-zone-content-maximum-width}" + }, + "drop-zone-content-top-to-text": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-300}" + }, + "drop-zone-content-bottom-to-text": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-300}" + }, + "drop-zone-component-height": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-300}" + }, + "drop-zone-edge-to-text": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-300}" + }, + "drop-zone-content-font-family": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "drop-zone-content-font-weight": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "drop-zone-content-font-size": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-300}" + }, + "drop-zone-title-line-height": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "drop-zone-content-background-color": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-visual-color}" + }, + "drop-zone-background-color": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-color-900}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-color-800}" + } + } + } +} diff --git a/components/fieldgroup/tokens.json b/components/fieldgroup/tokens.json new file mode 100644 index 00000000000..280e6b54b37 --- /dev/null +++ b/components/fieldgroup/tokens.json @@ -0,0 +1,7 @@ +{ + "fieldgroup-item-spacing": { + "component": "field-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + } +} diff --git a/components/fieldlabel/tokens.json b/components/fieldlabel/tokens.json new file mode 100644 index 00000000000..266690c5bd7 --- /dev/null +++ b/components/fieldlabel/tokens.json @@ -0,0 +1,58 @@ +{ + "fieldlabel-min-height": { + "component": "field-label", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "fieldlabel-color": { + "component": "field-label", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "fieldlabel-top-to-text": { + "component": "field-label", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "fieldlabel-bottom-to-text": { + "component": "field-label", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "fieldlabel-text-to-asterisk": { + "component": "field-label", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-label-text-to-asterisk-medium}" + }, + "fieldlabel-font-size": { + "component": "field-label", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "fieldlabel-font-weight": { + "component": "field-label", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "fieldlabel-line-height": { + "component": "field-label", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "fieldlabel-side-margin-block-start": { + "component": "field-label", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-label-top-margin-medium}" + }, + "fieldlabel-side-padding-right": { + "component": "field-label", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + } +} diff --git a/components/floatingactionbutton/tokens.json b/components/floatingactionbutton/tokens.json new file mode 100644 index 00000000000..8100480d312 --- /dev/null +++ b/components/floatingactionbutton/tokens.json @@ -0,0 +1,125 @@ +{ + "floating-action-button-size": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-200}" + }, + "floating-action-button-icon-size": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-200}" + }, + "floating-action-button-padding": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-pill-edge-to-visual-only-200}" + }, + "floating-action-button-margin": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "floating-action-button-background-color": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "floating-action-button-background-color-hover": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "floating-action-button-background-color-down": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "floating-action-button-background-color-key-focus": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "floating-action-button-icon-color": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "floating-action-button-icon-color-hover": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "floating-action-button-icon-color-down": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "floating-action-button-icon-color-key-focus": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "floating-action-button-drop-shadow-y": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-y}" + }, + "floating-action-button-drop-shadow-blur": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-blur}" + }, + "floating-action-button-drop-shadow-color": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-color}" + } +} diff --git a/components/form/tokens.json b/components/form/tokens.json new file mode 100644 index 00000000000..3886f837d01 --- /dev/null +++ b/components/form/tokens.json @@ -0,0 +1,27 @@ +{ + "form-item-block-spacing": { + "component": "form", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "form-item-block-spacing-labels-above": { + "component": "form", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "form-grid-template-columns": { + "component": "form", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "auto auto" + }, + "form-grid-template-columns-labels-above": { + "component": "form", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "auto" + }, + "form-item-disabled-content-color": { + "component": "form", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}" + } +} diff --git a/components/helptext/tokens.json b/components/helptext/tokens.json new file mode 100644 index 00000000000..d6bbabdaeaa --- /dev/null +++ b/components/helptext/tokens.json @@ -0,0 +1,198 @@ +{ + "helptext-min-height": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{component-height-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-300}" + } + } + }, + "helptext-icon-size": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{workflow-icon-size-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-300}" + } + } + }, + "helptext-text-to-visual": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-300}" + } + } + }, + "helptext-edge-to-workflow-icon": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{component-top-to-workflow-icon-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-300}" + } + } + }, + "helptext-top-to-text": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{component-top-to-text-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-300}" + } + } + }, + "helptext-bottom-to-text": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{component-bottom-to-text-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-300}" + } + } + }, + "helptext-font-size": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{font-size-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-300}" + } + } + }, + "helptext-font-family": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "helptext-font-style": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "helptext-line-height": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "helptext-font-weight": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "helptext-content-color-default": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "helptext-icon-color-default": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "helptext-content-color-disabled": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "helptext-icon-color-disabled": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + } +} diff --git a/components/icon/tokens.json b/components/icon/tokens.json new file mode 100644 index 00000000000..fe2fe4e6e90 --- /dev/null +++ b/components/icon/tokens.json @@ -0,0 +1,17 @@ +{ + "icon-size": { + "component": "icon", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "icon-inline-size": { + "component": "icon", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{icon-size}" + }, + "icon-block-size": { + "component": "icon", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{icon-size}" + } +} diff --git a/components/illustratedmessage/tokens.json b/components/illustratedmessage/tokens.json new file mode 100644 index 00000000000..498ed06cd3f --- /dev/null +++ b/components/illustratedmessage/tokens.json @@ -0,0 +1,145 @@ +{ + "illustrated-message-heading-to-description": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "illustrated-message-illustration-to-heading": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "default": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + } + } + }, + "illustrated-message-illustration-to-content": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "default": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + } + } + }, + "illustrated-message-description-to-action": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "illustrated-message-illustration-color": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "illustrated-message-illustration-size": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "default": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "96px" + }, + "l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "160px" + } + } + }, + "illustrated-message-title-font-family": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "illustrated-message-title-font-weight": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{title-sans-serif-font-weight}" + }, + "illustrated-message-title-font-style": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{title-sans-serif-font-style}" + }, + "illustrated-message-title-font-size": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{illustrated-message-medium-title-font-size}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{illustrated-message-small-title-font-size}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{illustrated-message-large-title-font-size}" + } + } + }, + "illustrated-message-title-line-height": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{title-line-height}" + }, + "illustrated-message-title-color": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-color}" + }, + "illustrated-message-description-font-family": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "illustrated-message-description-font-weight": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-weight}" + }, + "illustrated-message-description-font-style": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-style}" + }, + "illustrated-message-description-font-size": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{illustrated-message-medium-body-font-size}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{illustrated-message-small-body-font-size}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{illustrated-message-large-body-font-size}" + } + } + }, + "illustrated-message-description-line-height": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-200}" + }, + "illustrated-message-description-color": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}" + } +} diff --git a/components/infieldbutton/tokens.json b/components/infieldbutton/tokens.json new file mode 100644 index 00000000000..acfddef5149 --- /dev/null +++ b/components/infieldbutton/tokens.json @@ -0,0 +1,186 @@ +{ + "infield-button-background-color": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "infield-button-background-color-hover": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "infield-button-background-color-down": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "infield-button-icon-color": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "infield-button-icon-color-hover": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "infield-button-icon-color-down": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "infield-button-height": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{component-height-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-300}" + } + } + }, + "infield-button-width": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{component-height-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-300}" + } + } + }, + "infield-button-border-radius": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{corner-radius-small-size-medium}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-small-size-small}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-small-size-large}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-small-size-extra-large}" + } + } + }, + "infield-button-edge-to-fill": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{in-field-button-edge-to-fill-medium}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{in-field-button-edge-to-fill-small}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{in-field-button-edge-to-fill-large}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{in-field-button-edge-to-fill-extra-large}" + } + } + }, + "infield-button-inline-field-edge-to-icon": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{field-edge-to-icon-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-edge-to-icon-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-edge-to-icon-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-edge-to-icon-300}" + } + } + }, + "infield-button-inline-edge-to-fill": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{in-field-button-side-edge-to-fill-medium}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{in-field-button-side-edge-to-fill-small}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{in-field-button-side-edge-to-fill-large}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{in-field-button-side-edge-to-fill-extra-large}" + } + } + }, + "infield-button-fill-padding": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0px" + }, + "infield-button-field-edge-to-disclosure-icon": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{field-edge-to-disclosure-icon-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-edge-to-disclosure-icon-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-edge-to-disclosure-icon-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-edge-to-disclosure-icon-300}" + } + } + }, + "infield-button-fill-justify-content": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/text-align.json", + "value": "center" + }, + "infield-button-downstate-perspective": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "max({downstate-height}, {downstate-width} * {component-size-width-ratio-down})", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-size-minimum-perspective-down}" + } + } + } +} diff --git a/components/infieldprogresscircle/tokens.json b/components/infieldprogresscircle/tokens.json new file mode 100644 index 00000000000..5c97530c6c0 --- /dev/null +++ b/components/infieldprogresscircle/tokens.json @@ -0,0 +1,7 @@ +{ + "infieldprogresscircle-padding-block": { + "component": "infield-progress-circle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{in-field-progress-circle-edge-to-fill}" + } +} diff --git a/components/inlinealert/tokens.json b/components/inlinealert/tokens.json new file mode 100644 index 00000000000..a60daed8002 --- /dev/null +++ b/components/inlinealert/tokens.json @@ -0,0 +1,141 @@ +{ + "inlinealert-heading-font-family": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "inlinealert-heading-font-weight": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-sans-serif-font-weight}" + }, + "inlinealert-heading-font-style": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-sans-serif-font-style}" + }, + "inlinealert-heading-font-size": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-size-xxs}" + }, + "inlinealert-heading-line-height": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-line-height}" + }, + "inlinealert-content-font-family": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "inlinealert-content-font-weight": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-weight}" + }, + "inlinealert-content-font-style": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-style}" + }, + "inlinealert-content-font-size": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-size-s}" + }, + "inlinealert-content-line-height": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-line-height}" + }, + "inlinealert-border-width": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "inlinealert-border-radius": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-700}" + }, + "inlinealert-icon-size": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "inlinealert-min-inline-size": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{in-line-alert-minimum-width}" + }, + "inlinealert-header-min-block-size": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-50}" + }, + "inlinealert-spacing-edge-to-text": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "inlinealert-min-spacing-header-to-icon": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "inlinealert-spacing-header-content": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "inlinealert-spacing-content-link-button": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "inlinealert-background-color": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{background-layer-2-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "inlinealert-border-and-icon-color": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-visual-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "inlinealert-header-color": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "inlinealert-content-color": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + } +} diff --git a/components/link/tokens.json b/components/link/tokens.json new file mode 100644 index 00000000000..2a67331f3be --- /dev/null +++ b/components/link/tokens.json @@ -0,0 +1,84 @@ +{ + "link-focus-indicator-color": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "LinkText" + } + } + }, + "link-focus-indicator-thickness": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "link-focus-indicator-gap": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "link-corner-radius": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "link-default-font-family": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "link-line-height": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "link-line-height-cjk": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "link-font-size": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "link-font-style": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "link-font-weight": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{medium-font-weight}" + }, + "link-text-underline-thickness": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-underline-thickness}" + }, + "link-text-underline-gap": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-underline-gap}" + }, + "link-inline-font-weight": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "link-text-color": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "LinkText" + } + } + } +} diff --git a/components/logicbutton/tokens.json b/components/logicbutton/tokens.json new file mode 100644 index 00000000000..c0c456abc4b --- /dev/null +++ b/components/logicbutton/tokens.json @@ -0,0 +1,229 @@ +{ + "logic-button-and-background-color": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-900}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "logic-button-and-background-color-hover": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-1000}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-1100}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "logic-button-and-border-color": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-900}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "logic-button-and-border-color-hover": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-1000}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-1100}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "logic-button-or-background-color": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-700}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-900}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "logic-button-or-background-color-hover": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-900}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-1100}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "logic-button-or-border-color": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-700}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-900}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "logic-button-or-border-color-hover": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-900}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-1100}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "logic-button-and-background-color-disabled": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "logic-button-and-border-color-disabled": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "logic-button-and-background-color-hover-disabled": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "logic-button-and-border-color-hover-disabled": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "logic-button-or-background-color-disabled": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "logic-button-or-border-color-disabled": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "logic-button-or-background-color-hover-disabled": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "logic-button-or-border-color-hover-disabled": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "logic-button-border-radius": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "logic-button-and-text-color": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "logic-button-or-text-color": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "logic-button-text-color-disabled": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-500}" + }, + "logic-button-focus-indicator-color": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + } +} diff --git a/components/menu/tokens.json b/components/menu/tokens.json new file mode 100644 index 00000000000..d0033e72b46 --- /dev/null +++ b/components/menu/tokens.json @@ -0,0 +1,804 @@ +{ + "menu-item-checkmark-height-extra-large": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "14px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + } + } + }, + "menu-item-checkmark-height-large": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "12px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + } + } + }, + "menu-item-checkmark-height-medium": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "14px" + } + } + }, + "menu-item-checkmark-height-small": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "12px" + } + } + }, + "menu-item-checkmark-width-extra-large": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "14px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + } + } + }, + "menu-item-checkmark-width-large": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "12px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + } + } + }, + "menu-item-checkmark-width-medium": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "14px" + } + } + }, + "menu-item-checkmark-width-small": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "12px" + } + } + }, + "menu-item-selectable-edge-to-text-not-selected-extra-large": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "45px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "54px" + } + } + }, + "menu-item-selectable-edge-to-text-not-selected-large": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "38px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "47px" + } + } + }, + "menu-item-selectable-edge-to-text-not-selected-medium": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "32px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "42px" + } + } + }, + "menu-item-selectable-edge-to-text-not-selected-small": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "28px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "34px" + } + } + }, + "menu-item-background-color-default": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "menu-item-background-color-hover": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "menu-item-background-color-down": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "menu-item-background-color-key-focus": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "menu-item-label-line-height": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "menu-item-label-line-height-cjk": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "menu-item-label-to-value-area-min-spacing": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "menu-item-label-content-color-default": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "menu-item-label-content-color-hover": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-label-content-color-down": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-label-content-color-focus": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-label-icon-color-default": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "menu-item-label-icon-color-hover": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-label-icon-color-down": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-label-icon-color-focus": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-label-content-color-disabled": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "menu-item-label-icon-color-disabled": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "menu-item-description-line-height": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "menu-item-description-line-height-cjk": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "menu-item-description-color-default": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "menu-item-description-color-hover": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-description-color-down": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-description-color-focus": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-description-color-disabled": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "menu-section-header-line-height": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "menu-section-header-line-height-cjk": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "menu-section-header-font-weight": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "menu-section-header-color": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "menu-section-header-font-size": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "menu-section-header-min-width": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "menu-section-description-line-height": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "menu-section-description-line-height-cjk": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "menu-section-description-font-weight": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "menu-section-description-color": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}" + }, + "menu-section-header-to-description": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{menu-section-header-to-description-medium}" + }, + "menu-item-label-to-description": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{menu-item-label-to-description-medium}" + }, + "menu-collapsible-icon-color": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "menu-checkmark-icon-color-default": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-color-900}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "menu-checkmark-icon-color-hover": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-color-1000}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "menu-checkmark-icon-color-down": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-color-1100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "menu-checkmark-icon-color-focus": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-color-1000}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "menu-drillin-icon-color-default": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "menu-drillin-icon-color-hover": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-drillin-icon-color-down": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-drillin-icon-color-focus": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-value-color-default": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "menu-item-value-color-hover": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-value-color-down": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-value-color-focus": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-checkmark-display-hidden": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "none" + }, + "menu-checkmark-display-shown": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "block" + }, + "menu-checkmark-display": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{menu-checkmark-display-shown}" + }, + "menu-item-min-height": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "menu-item-icon-height": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "menu-item-icon-width": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "menu-item-linkout-icon-height": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{link-out-icon-size-100}" + }, + "menu-item-linkout-icon-width": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{link-out-icon-size-100}" + }, + "menu-item-label-font-size": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "menu-item-label-text-to-visual": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "menu-item-top-to-action": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-50}" + }, + "menu-item-top-to-checkbox": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-50}" + }, + "menu-item-top-to-workflow-icon": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-100}" + }, + "menu-item-label-inline-edge-to-content": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-100}" + }, + "menu-item-top-edge-to-text": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "menu-item-bottom-edge-to-text": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "menu-item-text-to-control": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-control-100}" + }, + "menu-item-selectable-edge-to-text-not-selected": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{menu-item-selectable-edge-to-text-not-selected-medium}" + }, + "menu-item-description-font-size": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-75}" + }, + "menu-item-corner-radius": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-500}" + }, + "menu-item-checkmark-height": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{checkmark-icon-size-100}" + }, + "menu-item-checkmark-width": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{checkmark-icon-size-100}" + }, + "menu-item-top-to-checkmark": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{menu-item-top-to-selected-icon-medium}" + }, + "menu-item-chevron-height": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{chevron-icon-size-100}" + }, + "menu-item-chevron-width": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{chevron-icon-size-100}" + }, + "menu-item-top-to-thumbnail": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{menu-item-top-to-thumbnail-medium}" + }, + "menu-item-thumbnail-to-label": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-200}" + }, + "menu-item-thumbnail-height": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{thumbnail-size-700}" + }, + "menu-item-thumbnail-width": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{thumbnail-size-700}" + }, + "menu-item-thumbnail-opacity-disabled": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/opacity.json", + "value": 0.3 + }, + "menu-back-icon-margin": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{navigational-indicator-top-to-back-icon-medium}" + }, + "menu-item-focus-indicator-width": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "menu-item-focus-indicator-color": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "menu-item-focus-indicator-offset": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "menu-item-focus-indicator-outline-style": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "solid" + }, + "menu-item-focus-indicator-color-default": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{menu-item-focus-indicator-color}" + }, + "menu-item-focus-margin": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "calc({menu-item-focus-indicator-offset} + {menu-item-focus-indicator-width})" + } +} diff --git a/components/meter/tokens.json b/components/meter/tokens.json new file mode 100644 index 00000000000..6e90e53eb73 --- /dev/null +++ b/components/meter/tokens.json @@ -0,0 +1,27 @@ +{ + "meter-default-width": { + "component": "meter", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progressbar-size-default}" + }, + "meter-maximum-width": { + "component": "meter", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progressbar-max-size}" + }, + "meter-minimum-width": { + "component": "meter", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progressbar-min-size}" + }, + "meter-thickness-small": { + "component": "meter", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progressbar-thickness-small}" + }, + "meter-thickness-large": { + "component": "meter", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progressbar-thickness-large}" + } +} diff --git a/components/miller/tokens.json b/components/miller/tokens.json new file mode 100644 index 00000000000..f14eab76606 --- /dev/null +++ b/components/miller/tokens.json @@ -0,0 +1,22 @@ +{ + "millercolumns-padding": { + "component": "miller", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "millercolumns-inline-size": { + "component": "miller", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "272px" + }, + "millercolumns-margin-inline-end": { + "component": "miller", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "millercolumns-margin-inline-start": { + "component": "miller", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + } +} diff --git a/components/modal/tokens.json b/components/modal/tokens.json new file mode 100644 index 00000000000..66cdb70848f --- /dev/null +++ b/components/modal/tokens.json @@ -0,0 +1,57 @@ +{ + "modal-confirm-entry-animation-duration": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-500}" + }, + "modal-confirm-entry-animation-delay": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-200}" + }, + "modal-confirm-exit-animation-duration": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "modal-confirm-exit-animation-delay": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-0}" + }, + "modal-fullscreen-margin": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{window-to-edge}" + }, + "modal-takeover-window-to-edge": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "modal-max-height": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "90vh" + }, + "modal-max-width": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "90%" + }, + "modal-background-color": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent" + }, + "modal-confirm-border-radius": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-extra-large-default}" + }, + "modal-transition-animation-duration": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + } +} diff --git a/components/opacitycheckerboard/tokens.json b/components/opacitycheckerboard/tokens.json new file mode 100644 index 00000000000..cfe8c569830 --- /dev/null +++ b/components/opacitycheckerboard/tokens.json @@ -0,0 +1,28 @@ +{ + "opacity-checkerboard-dark": { + "component": "opacity-checkerboard", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{opacity-checkerboard-square-dark}" + }, + "opacity-checkerboard-light": { + "component": "opacity-checkerboard", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{opacity-checkerboard-square-light}" + }, + "opacity-checkerboard-size": { + "component": "opacity-checkerboard", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{opacity-checkerboard-square-size-medium}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{opacity-checkerboard-square-size-small}" + } + } + }, + "opacity-checkerboard-position": { + "component": "opacity-checkerboard", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "left top" + } +} diff --git a/components/page/index.css b/components/page/index.css index 1e6b3996eaa..b5ce5555917 100644 --- a/components/page/index.css +++ b/components/page/index.css @@ -12,11 +12,8 @@ */ :root { - --spectrum-page-background-color: var(--mod-page-background, var(--spectrum-gray-75)); - --spectrum-page-content-tap-highlight: var(--mod-page-content-tap-highlight, var(--spectrum-transparent-black-25)); - - background: var(--spectrum-page-background-color); + background: var(--mod-page-background, var(--spectrum-page-background-color, var(--spectrum-gray-75))); /* The highlight that appears over a link while it's being tapped */ - -webkit-tap-highlight-color: var(--spectrum-page-content-tap-highlight); + -webkit-tap-highlight-color: var(--mod-page-content-tap-highlight, var(--spectrum-page-content-tap-highlight, var(--spectrum-transparent-black-25))); } diff --git a/components/page/tokens.json b/components/page/tokens.json new file mode 100644 index 00000000000..748a9ef2b64 --- /dev/null +++ b/components/page/tokens.json @@ -0,0 +1,12 @@ +{ + "page-background-color": { + "component": "page", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-75}" + }, + "page-content-tap-highlight": { + "component": "page", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-black-25}" + } +} diff --git a/components/pagination/tokens.json b/components/pagination/tokens.json new file mode 100644 index 00000000000..0a1ceda7426 --- /dev/null +++ b/components/pagination/tokens.json @@ -0,0 +1,50 @@ +{ + "pagination-item-inline-spacing": { + "component": "pagination", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "5px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "6px" + } + } + }, + "pagination-textfield-width": { + "component": "pagination", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-700}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "60px" + } + } + }, + "pagination-counter-color": { + "component": "pagination", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}" + }, + "pagination-counter-font-size": { + "component": "pagination", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "pagination-counter-line-height": { + "component": "pagination", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "pagination-counter-inline-spacing": { + "component": "pagination", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{pagination-item-inline-spacing}" + } +} diff --git a/components/picker/tokens.json b/components/picker/tokens.json new file mode 100644 index 00000000000..dda134b423f --- /dev/null +++ b/components/picker/tokens.json @@ -0,0 +1,475 @@ +{ + "picker-background-color-default": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "picker-background-color-default-open": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "picker-background-color-hover": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "picker-background-color-hover-open": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "picker-background-color-active": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "picker-background-color-key-focus": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "picker-border-color-default": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonBorder" + } + } + }, + "picker-border-color-default-open": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonBorder" + } + } + }, + "picker-border-color-hover": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "picker-border-color-hover-open": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "picker-border-color-active": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonBorder" + } + } + }, + "picker-border-color-key-focus": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonBorder" + } + } + }, + "picker-font-size": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "picker-font-weight": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "picker-placeholder-font-style": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "picker-line-height": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "picker-line-height-cjk": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "picker-block-size": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "picker-inline-size": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-default-width-medium}" + }, + "picker-min-inline-size": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({picker-minimum-width-multiplier} * {picker-block-size})" + }, + "picker-border-radius": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-medium-size-medium}" + }, + "picker-border-width": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "picker-spacing-top-to-text": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "picker-spacing-bottom-to-text": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "picker-spacing-edge-to-text": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-100}" + }, + "picker-spacing-label-to-picker": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-label-to-component}" + }, + "picker-spacing-label-to-picker-quiet": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-label-to-component-quiet-medium}" + }, + "picker-spacing-starting-icon-to-text": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "picker-spacing-text-to-icon-inline-end": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "picker-spacing-icon-to-disclosure-icon": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{picker-visual-to-disclosure-icon-medium}" + }, + "picker-spacing-top-to-alert-icon": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-100}" + }, + "picker-spacing-top-to-progress-circle": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-top-to-progress-circle-medium}" + }, + "picker-spacing-top-to-disclosure-icon": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-top-to-disclosure-icon-100}" + }, + "picker-spacing-edge-to-disclosure-icon": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-end-edge-to-disclosure-icon-100}" + }, + "picker-animation-duration": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "picker-font-color-default": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-font-color-default-open": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-font-color-hover": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-font-color-hover-open": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-focus-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-font-color-active": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-font-color-key-focus": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-icon-color-default": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-icon-color-default-open": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-icon-color-hover": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-icon-color-hover-open": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-focus-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-icon-color-active": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-icon-color-key-focus": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-border-color-error-default": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-default}" + }, + "picker-border-color-error-default-open": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-focus}" + }, + "picker-border-color-error-hover": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-hover}" + }, + "picker-border-color-error-hover-open": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-focus-hover}" + }, + "picker-border-color-error-active": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-down}" + }, + "picker-border-color-error-key-focus": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-key-focus}" + }, + "picker-icon-color-error": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-visual-color}" + }, + "picker-background-color-disabled": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "picker-font-color-disabled": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "picker-icon-color-disabled": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "picker-focus-indicator-gap": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "picker-focus-indicator-thickness": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "picker-focus-indicator-color": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "picker-popover-animation-distance": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-to-menu-medium}" + } +} diff --git a/components/pickerbutton/tokens.json b/components/pickerbutton/tokens.json new file mode 100644 index 00000000000..f567555675e --- /dev/null +++ b/components/pickerbutton/tokens.json @@ -0,0 +1,147 @@ +{ + "picker-button-padding": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "4px" + }, + "picker-button-height": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "picker-button-width": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "picker-button-gap": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-50}" + }, + "picker-button-label-padding": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-50}" + }, + "picker-button-fill-padding": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-edge-to-disclosure-icon-100}" + }, + "picker-button-icon-color": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "picker-button-icon-color-hover": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "picker-button-icon-color-down": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "picker-button-icon-color-key-focus": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}" + }, + "picker-button-font-color": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "picker-button-font-color-hover": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "picker-button-font-color-down": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "picker-button-font-color-key-focus": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}" + }, + "picker-button-font-family": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "picker-button-font-style": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "picker-button-font-weight": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-weight}" + }, + "picker-button-font-size": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "picker-button-border-color": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "inherit" + }, + "picker-button-border-radius": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "picker-button-border-radius-rounded-sided": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "picker-button-border-radius-sided": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "picker-button-border-width": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "picker-button-border-radius-rounded": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-200}" + }, + "picker-button-background-color": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-50}" + }, + "picker-button-background-color-hover": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "picker-button-background-color-down": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "picker-button-background-color-key-focus": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "picker-button-background-animation-duration": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + } +} diff --git a/components/popover/tokens.json b/components/popover/tokens.json new file mode 100644 index 00000000000..d7c12633a26 --- /dev/null +++ b/components/popover/tokens.json @@ -0,0 +1,83 @@ +{ + "popover-animation-distance": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "popover-background-color": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{background-layer-2-color}" + }, + "popover-border-width": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "popover-border-color-with-transparency": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {popover-border-color} {popover-border-opacity}, transparent)", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "popover-content-area-spacing": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{popover-edge-to-content-area}" + }, + "popover-drop-shadow-x": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-x}" + }, + "popover-drop-shadow-y": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-y}" + }, + "popover-drop-shadow-blur": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-blur}" + }, + "popover-drop-shadow-color": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-color}" + }, + "popover-corner-radius": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-large-default}" + }, + "popover-pointer-width": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{popover-tip-width}" + }, + "popover-pointer-height": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{popover-tip-height}" + }, + "popover-pointer-edge-offset": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({popover-corner-radius} + ({popover-tip-width} / 2))" + }, + "popover-pointer-edge-spacing": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({popover-pointer-edge-offset} - ({popover-tip-width} / 2))" + }, + "popover-filter": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "drop-shadow({popover-drop-shadow-x} {popover-drop-shadow-y} {popover-drop-shadow-blur} {popover-drop-shadow-color})" + } +} diff --git a/components/progressbar/tokens.json b/components/progressbar/tokens.json new file mode 100644 index 00000000000..32650289297 --- /dev/null +++ b/components/progressbar/tokens.json @@ -0,0 +1,135 @@ +{ + "progressbar-animation-ease-in-out-indeterminate": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-ease-in-out}" + }, + "progressbar-animation-duration-indeterminate": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-2000}" + }, + "progressbar-corner-radius": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-full}" + }, + "progressbar-fill-size-indeterminate": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "70%" + }, + "progressbar-size-2400": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "192px" + }, + "progressbar-size-2500": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "200px" + }, + "progressbar-size-2800": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "224px" + }, + "progressbar-size-default": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progressbar-size-2400}" + }, + "progressbar-font-size": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "progressbar-line-height": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "progressbar-line-height-cjk": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "progressbar-min-size": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progress-bar-minimum-width}" + }, + "progressbar-max-size": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progress-bar-maximum-width}" + }, + "progressbar-thickness": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progress-bar-thickness-medium}" + }, + "progressbar-spacing-label-to-progressbar": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "progressbar-spacing-top-to-text": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "progressbar-spacing-label-to-text": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "progressbar-text-color": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}" + }, + "progressbar-track-color": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-300}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "progressbar-fill-color": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "progressbar-label-and-value-white": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-700}" + }, + "progressbar-track-color-white": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-300}" + }, + "progressbar-fill-color-white": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-900}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + } +} diff --git a/components/progresscircle/tokens.json b/components/progresscircle/tokens.json new file mode 100644 index 00000000000..698c620f5a9 --- /dev/null +++ b/components/progresscircle/tokens.json @@ -0,0 +1,34 @@ +{ + "progress-circle-track-border-color": { + "component": "progress-circle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{track-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Background" + } + } + }, + "progress-circle-fill-border-color": { + "component": "progress-circle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "progress-circle-size": { + "component": "progress-circle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progress-circle-size-medium}" + }, + "progress-circle-thickness": { + "component": "progress-circle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progress-circle-thickness-medium}" + } +} diff --git a/components/radio/tokens.json b/components/radio/tokens.json new file mode 100644 index 00000000000..3ba4953b9fa --- /dev/null +++ b/components/radio/tokens.json @@ -0,0 +1,157 @@ +{ + "radio-button-background-color": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "radio-neutral-content-color": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "radio-neutral-content-color-hover": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "radio-neutral-content-color-down": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "radio-neutral-content-color-focus": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}" + }, + "radio-focus-indicator-thickness": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "radio-focus-indicator-gap": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "radio-focus-indicator-color": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "radio-disabled-content-color": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}" + }, + "radio-disabled-border-color": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}" + }, + "radio-emphasized-accent-color": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-default}" + }, + "radio-emphasized-accent-color-hover": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-hover}" + }, + "radio-emphasized-accent-color-down": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-down}" + }, + "radio-emphasized-accent-color-focus": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-key-focus}" + }, + "radio-button-border-color-default": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "radio-button-border-color-hover": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "radio-button-border-color-down": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "radio-button-border-color-focus": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}" + }, + "radio-line-height": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "radio-animation-duration": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "radio-height": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "radio-button-control-size": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{radio-button-control-size-medium}" + }, + "radio-text-to-control": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-control-100}" + }, + "radio-label-top-to-text": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "radio-label-bottom-to-text": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "radio-button-top-to-control": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{radio-button-top-to-control-medium}" + }, + "radio-font-size": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "radio-border-width": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "radio-text-font-weight": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "radio-text-font-style": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "radio-line-height-cjk": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + } +} diff --git a/components/rating/tokens.json b/components/rating/tokens.json new file mode 100644 index 00000000000..0eaed0d049f --- /dev/null +++ b/components/rating/tokens.json @@ -0,0 +1,140 @@ +{ + "rating-icon-spacing": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + } + } + }, + "rating-height": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{rating-height-medium}" + }, + "rating-width": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{rating-width-medium}" + }, + "rating-icon-height": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "rating-icon-width": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "rating-icon-color-default": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "rating-icon-color-hover": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "rating-icon-color-down": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "rating-border-radius": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-medium-size-medium}" + }, + "rating-focus-indicator-thickness": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "rating-focus-indicator-color": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "rating-focus-indicator-gap": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "rating-top-to-content-area": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{rating-top-to-content-area-medium}" + }, + "rating-bottom-to-content-area": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{rating-bottom-to-content-area-medium}" + }, + "rating-edge-to-content-area": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{rating-edge-to-content-area-medium}" + }, + "rating-emphasized-icon-color-default": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "rating-emphasized-icon-color-hover": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "rating-emphasized-icon-color-down": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "rating-emphasized-icon-color-key-focus": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-default}" + }, + "rating-icon-color-disabled": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "rating-icon-fill": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "100%" + } +} diff --git a/components/search/tokens.json b/components/search/tokens.json new file mode 100644 index 00000000000..62d3deb88b8 --- /dev/null +++ b/components/search/tokens.json @@ -0,0 +1,208 @@ +{ + "search-background-color": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "search-border-color-default": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-300}" + }, + "search-border-color-hover": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-400}" + }, + "search-border-color-focus": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}" + }, + "search-border-color-focus-hover": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}" + }, + "search-border-color-key-focus": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}" + }, + "search-border-width": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "search-border-radius": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-full}" + }, + "search-inline-size": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-width}" + }, + "search-block-size": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "search-button-inline-size": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{search-block-size}" + }, + "search-min-inline-size": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({search-field-minimum-width-multiplier} * {search-block-size})" + }, + "search-icon-size": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "search-text-to-icon": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "search-to-help-text": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{help-text-to-component}" + }, + "search-top-to-text": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "search-bottom-to-text": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "search-edge-to-visual": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-pill-edge-to-visual-100}" + }, + "search-top-to-icon": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-100}" + }, + "search-focus-indicator-thickness": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "search-focus-indicator-gap": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "search-focus-indicator-color": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "search-font-family": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "search-font-weight": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "search-font-style": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "search-line-height": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "search-color-default": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "search-color-hover": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "search-color-focus": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "search-color-focus-hover": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-focus-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "search-color-key-focus": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "search-color-disabled": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "search-background-color-disabled": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "search-border-color-disabled": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-border-color}" + } +} diff --git a/components/sidenav/tokens.json b/components/sidenav/tokens.json new file mode 100644 index 00000000000..5d1ed1c4d78 --- /dev/null +++ b/components/sidenav/tokens.json @@ -0,0 +1,379 @@ +{ + "sidenav-background-hover": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "sidenav-item-background-down": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "sidenav-background-key-focus": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "sidenav-item-background-default-selected": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "SelectedItem" + } + } + }, + "sidenav-background-hover-selected": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "sidenav-item-background-down-selected": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "sidenav-background-key-focus-selected": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "sidenav-focus-ring-size": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "sidenav-focus-ring-gap": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "sidenav-focus-ring-color": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "sidenav-min-height": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "sidenav-width": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "100%" + }, + "sidenav-min-width": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-navigation-minimum-width}" + }, + "sidenav-max-width": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-navigation-maximum-width}" + }, + "sidenav-border-radius": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "sidenav-icon-size": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "sidenav-icon-spacing": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "sidenav-inline-padding": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-100}" + }, + "sidenav-gap": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-navigation-item-to-item}" + }, + "sidenav-top-to-icon": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-100}" + }, + "sidenav-top-to-label": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "sidenav-bottom-to-label": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-navigation-bottom-to-text}" + }, + "sidenav-start-to-content-second-level": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-navigation-second-level-edge-to-text}" + }, + "sidenav-start-to-content-third-level": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-navigation-third-level-edge-to-text}" + }, + "sidenav-start-to-content-with-icon-second-level": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-navigation-with-icon-second-level-edge-to-text}" + }, + "sidenav-start-to-content-with-icon-third-level": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-navigation-with-icon-third-level-edge-to-text}" + }, + "sidenav-heading-top-margin": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-navigation-item-to-header}" + }, + "sidenav-heading-bottom-margin": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-navigation-header-to-item}" + }, + "sidenav-background-disabled": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "transparent" + }, + "sidenav-background-default": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "transparent" + }, + "sidenav-header-color": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-600}" + }, + "sidenav-content-disabled-color": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "sidenav-content-color-default": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "sidenav-content-color-hover": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "sidenav-content-color-down": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "sidenav-content-color-key-focus": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "sidenav-content-color-default-selected": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "SelectedItemText" + } + } + }, + "sidenav-content-color-hover-selected": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "sidenav-content-color-down-selected": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "sidenav-content-color-key-focus-selected": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "sidenav-text-font-family": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "sidenav-text-font-weight": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "sidenav-text-font-style": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "sidenav-text-font-size": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "sidenav-text-line-height": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "sidenav-top-level-font-family": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "sidenav-top-level-font-weight": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "sidenav-top-level-font-style": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "sidenav-top-level-font-size": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "sidenav-top-level-line-height": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "sidenav-header-font-family": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "sidenav-header-font-weight": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{medium-font-weight}" + }, + "sidenav-header-font-style": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "sidenav-header-font-size": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-75}" + }, + "sidenav-header-line-height": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + } +} diff --git a/components/slider/tokens.json b/components/slider/tokens.json new file mode 100644 index 00000000000..d9b85bfa714 --- /dev/null +++ b/components/slider/tokens.json @@ -0,0 +1,353 @@ +{ + "slider-ramp-track-height": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + } + } + }, + "slider-tick-mark-height": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "13px" + } + } + }, + "slider-font-size": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-75}" + }, + "slider-handle-size": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{slider-handle-size-medium}" + }, + "slider-control-height": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "slider-handle-border-width-down": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{slider-handle-border-width-down-medium}" + }, + "slider-label-top-to-text": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-75}" + }, + "slider-control-to-field-label": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{slider-control-to-field-label-medium}" + }, + "slider-value-side-padding-inline": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "slider-value-inline-size": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "18px" + }, + "slider-cjk-line-height": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "slider-min-size": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-900}" + }, + "slider-label-margin-start": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "slider-handle-border-width": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "slider-handle-margin-left": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({slider-handle-size} / -2)" + }, + "slider-controls-margin": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({slider-handle-size} / 2)" + }, + "slider-track-margin-offset": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({slider-controls-margin} * -1)" + }, + "slider-track-middle-handleoffset": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({slider-handle-gap} + calc({slider-handle-size} / 2))" + }, + "slider-input-top-size": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({slider-handle-size} / -2 / 4)" + }, + "slider-track-fill-thickness": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{slider-track-thickness}" + }, + "slider-tick-mark-width": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "slider-tick-mark-border-radius": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "2px" + }, + "slider-tick-handle-background-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "slider-track-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "slider-track-fill-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-700}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "slider-ramp-track-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-400}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "slider-ramp-track-color-disabled": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "slider-track-color-disabled": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "slider-track-fill-color-disabled": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "slider-handle-border-color-disabled": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-border-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "slider-label-text-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "slider-tick-label-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "slider-label-text-color-disabled": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "slider-tick-mark-color-disabled": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "slider-ramp-handle-border-color-active": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "slider-handle-background-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "slider-handle-background-color-disabled": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "transparent" + }, + "slider-ramp-handle-background-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-75}" + }, + "slider-ticks-handle-background-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-75}" + }, + "slider-handle-border-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-700}" + }, + "slider-handle-disabled-background-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-75}" + }, + "slider-tick-mark-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "slider-handle-border-color-hover": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}" + }, + "slider-handle-border-color-down": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}" + }, + "slider-handle-border-color-key-focus": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}" + }, + "slider-handle-focus-ring-color-key-focus": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "slider-input-left": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({slider-handle-margin-left} / 4)" + }, + "slider-track-handleoffset": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{slider-handle-gap}" + }, + "slider-range-track-reset": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "slider-track-corner-radius": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "2px" + }, + "slider-handle-border-radius": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-500}" + } +} diff --git a/components/splitview/tokens.json b/components/splitview/tokens.json new file mode 100644 index 00000000000..6e0167f3bc5 --- /dev/null +++ b/components/splitview/tokens.json @@ -0,0 +1,106 @@ +{ + "splitview-background-color": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-75}" + }, + "splitview-handle-background-color": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "splitview-gripper-border-radius": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "2px" + }, + "splitview-vertical-width": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "100%" + }, + "splitview-vertical-gripper-width": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "50%" + }, + "splitview-vertical-gripper-outer-width": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "100%" + }, + "splitview-vertical-gripper-reset": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "splitview-content-color": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}" + }, + "splitview-handle-background-color-hover": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-400}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "splitview-handle-background-color-down": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "splitview-handle-background-color-focus": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "splitview-handle-width": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "splitview-gripper-width": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-400}" + }, + "splitview-gripper-height": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + }, + "splitview-gripper-border-width-horizontal": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "3px" + }, + "splitview-gripper-border-width-vertical": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-400}" + } +} diff --git a/components/statuslight/tokens.json b/components/statuslight/tokens.json new file mode 100644 index 00000000000..8e16314eb1b --- /dev/null +++ b/components/statuslight/tokens.json @@ -0,0 +1,214 @@ +{ + "statuslight-corner-radius": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-full}" + }, + "statuslight-border-width": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "statuslight-height": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "statuslight-dot-size": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{status-light-dot-size-medium}" + }, + "statuslight-line-height": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "statuslight-line-height-cjk": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "statuslight-font-family": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "statuslight-font-weight": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "statuslight-font-style": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "statuslight-font-size": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "statuslight-spacing-dot-to-label": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{status-light-text-to-visual-100}" + }, + "statuslight-spacing-top-to-dot": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{status-light-top-to-dot-medium}" + }, + "statuslight-spacing-top-to-label": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "statuslight-spacing-bottom-to-label": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "statuslight-content-color-default": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "statuslight-subdued-content-color-default": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-600}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "statuslight-semantic-neutral-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-visual-color}" + }, + "statuslight-semantic-negative-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-visual-color}" + }, + "statuslight-semantic-info-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{informative-visual-color}" + }, + "statuslight-semantic-notice-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{notice-visual-color}" + }, + "statuslight-semantic-positive-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{positive-visual-color}" + }, + "statuslight-nonsemantic-gray-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-visual-color}" + }, + "statuslight-nonsemantic-red-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{red-visual-color}" + }, + "statuslight-nonsemantic-orange-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{orange-visual-color}" + }, + "statuslight-nonsemantic-yellow-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{yellow-visual-color}" + }, + "statuslight-nonsemantic-chartreuse-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{chartreuse-visual-color}" + }, + "statuslight-nonsemantic-celery-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{celery-visual-color}" + }, + "statuslight-nonsemantic-green-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{green-visual-color}" + }, + "statuslight-nonsemantic-seafoam-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{seafoam-visual-color}" + }, + "statuslight-nonsemantic-cyan-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cyan-visual-color}" + }, + "statuslight-nonsemantic-blue-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-visual-color}" + }, + "statuslight-nonsemantic-indigo-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{indigo-visual-color}" + }, + "statuslight-nonsemantic-purple-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{purple-visual-color}" + }, + "statuslight-nonsemantic-fuchsia-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{fuchsia-visual-color}" + }, + "statuslight-nonsemantic-magenta-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-visual-color}" + }, + "statuslight-nonsemantic-pink-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{pink-visual-color}" + }, + "statuslight-nonsemantic-turquoise-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{turquoise-visual-color}" + }, + "statuslight-nonsemantic-cinnamon-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cinnamon-visual-color}" + }, + "statuslight-nonsemantic-brown-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{brown-visual-color}" + }, + "statuslight-nonsemantic-silver-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{silver-visual-color}" + } +} diff --git a/components/steplist/tokens.json b/components/steplist/tokens.json new file mode 100644 index 00000000000..8f1daaf277a --- /dev/null +++ b/components/steplist/tokens.json @@ -0,0 +1,117 @@ +{ + "steplist-incomplete-marker-border-color": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "steplist-incomplete-segment-border-block-end-color": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "steplist-step-width": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "80px" + }, + "steplist-marker-diameter": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "8px" + }, + "steplist-marker-hit-area": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + }, + "steplist-segment-height": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "2px" + }, + "steplist-top-padding": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "22px" + }, + "steplist-small-top-padding": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "11px" + }, + "steplist-side-padding": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "60px" + }, + "steplist-label-label-offset": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + }, + "steplist-label-text-size": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "12px" + }, + "steplist-current-label-text-color": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}" + }, + "steplist-current-marker-color": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "steplist-complete-label-text-color": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-700}" + }, + "steplist-complete-marker-background-color": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-600}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "steplist-complete-segment-border-block-end-color": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-600}" + }, + "steplist-incomplete-label-color": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-600}" + }, + "steplist-current-marker-color-key-focus": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-700}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + } +} diff --git a/components/stepper/tokens.json b/components/stepper/tokens.json new file mode 100644 index 00000000000..917d1fbcca9 --- /dev/null +++ b/components/stepper/tokens.json @@ -0,0 +1,79 @@ +{ + "stepper-border-color-default": { + "component": "stepper", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-300}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "stepper-border-color-hover": { + "component": "stepper", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-400}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "stepper-border-color-focus": { + "component": "stepper", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "stepper-border-color-keyboard-focus": { + "component": "stepper", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "stepper-border-color-focus-hover": { + "component": "stepper", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "stepper-background-color": { + "component": "stepper", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "stepper-focus-indicator-color": { + "component": "stepper", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + } +} diff --git a/components/swatch/tokens.json b/components/swatch/tokens.json new file mode 100644 index 00000000000..8eaeba4fad0 --- /dev/null +++ b/components/swatch/tokens.json @@ -0,0 +1,139 @@ +{ + "swatch-border-color": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(255 255 255 / 51%)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgb(0 0 0 / 51%)" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "swatch-border-color-light": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(255 255 255 / 20%)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0 0 0 / 20%)" + } + } + }, + "swatch-icon-border-color": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "rgb(0 0 0 / {swatch-disabled-icon-border-opacity})" + }, + "swatch-size": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{swatch-size-medium}" + }, + "swatch-border-radius": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "swatch-border-thickness": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "swatch-border-thickness-selected": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "swatch-disabled-icon-size": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-75}" + }, + "swatch-slash-thickness": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{swatch-slash-thickness-medium}" + }, + "swatch-border-color-selected": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-1000}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "swatch-inner-border-color-selected": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "swatch-disabled-icon-color": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "swatch-icon-color": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "swatch-slash-icon-color": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-visual-color}" + }, + "swatch-focus-indicator-color": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "swatch-focus-indicator-thickness": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "swatch-focus-indicator-gap": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + } +} diff --git a/components/swatchgroup/tokens.json b/components/swatchgroup/tokens.json new file mode 100644 index 00000000000..8ca71c831e3 --- /dev/null +++ b/components/swatchgroup/tokens.json @@ -0,0 +1,17 @@ +{ + "swatchgroup-spacing": { + "component": "swatch-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "swatchgroup-spacing-compact": { + "component": "swatch-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-50}" + }, + "swatchgroup-spacing-spacious-large": { + "component": "swatch-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + } +} diff --git a/components/switch/tokens.json b/components/switch/tokens.json new file mode 100644 index 00000000000..387454cd925 --- /dev/null +++ b/components/switch/tokens.json @@ -0,0 +1,267 @@ +{ + "switch-label-color-default": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "switch-label-color-hover": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "switch-label-color-down": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "switch-label-color-focus": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "switch-label-color-disabled": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "switch-border-width": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "switch-border-color-default": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "switch-border-color-hover": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "switch-border-color-down": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "switch-border-color-focus": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}" + }, + "switch-border-color-disabled": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}" + }, + "switch-border-color-selected-default": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "switch-border-color-selected-hover": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "switch-border-color-selected-down": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "switch-border-color-selected-focus": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}" + }, + "switch-background-color": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "switch-background-color-disabled": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "switch-background-color-selected-default": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-background-color-default}" + }, + "switch-background-color-selected-hover": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-background-color-hover}" + }, + "switch-background-color-selected-down": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-background-color-down}" + }, + "switch-background-color-selected-focus": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-background-color-key-focus}" + }, + "switch-background-color-selected-disabled": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}" + }, + "switch-focus-indicator-thickness": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "switch-focus-indicator-color": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "switch-focus-indicator-gap": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "switch-handle-background-color-default": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "switch-handle-background-color-hover": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "switch-handle-background-color-down": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "switch-handle-background-color-focus": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}" + }, + "switch-handle-background-color-disabled": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}" + }, + "switch-handle-background-color-selected": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "switch-handle-background-color-selected-disabled": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "switch-handle-size": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{switch-handle-size-medium}" + }, + "switch-handle-selected-size": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{switch-handle-selected-size-medium}" + }, + "switch-animation-duration-switch": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "switch-animation-duration-label": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-200}" + }, + "switch-min-height": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "switch-control-width": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{switch-control-width-medium}" + }, + "switch-control-height": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{switch-control-height-medium}" + }, + "switch-control-label-spacing": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-control-100}" + }, + "switch-spacing-top-to-control": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{switch-top-to-control-medium}" + }, + "switch-spacing-top-to-label": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "switch-spacing-bottom-to-label": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "switch-font-size": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "switch-line-height": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "switch-cjk-line-height": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "switch-border-radius": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-full}" + } +} diff --git a/components/table/dist/metadata.json b/components/table/dist/metadata.json index cf66742117b..12dada569c4 100644 --- a/components/table/dist/metadata.json +++ b/components/table/dist/metadata.json @@ -281,7 +281,6 @@ "--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", @@ -306,6 +305,7 @@ "--spectrum-table-min-header-row-height", "--spectrum-table-min-row-height", "--spectrum-table-outer-border-inline-width", + "--spectrum-table-row-active-color", "--spectrum-table-row-background-color", "--spectrum-table-row-background-color-active", "--spectrum-table-row-background-color-hover", @@ -350,7 +350,6 @@ "--spectrum-table-selected-row-background-color-hover", "--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", @@ -377,17 +376,17 @@ "--spectrum-corner-radius-medium-size-extra-small", "--spectrum-corner-radius-small-default", "--spectrum-default-font-style", + "--spectrum-drop-zone-background-color", "--spectrum-drop-zone-background-color-opacity", - "--spectrum-drop-zone-background-color-rgb", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-thickness", "--spectrum-font-size-100", "--spectrum-gray-200", "--spectrum-gray-25", "--spectrum-gray-300", - "--spectrum-gray-700-rgb", + "--spectrum-gray-700", "--spectrum-gray-75", - "--spectrum-gray-900-rgb", + "--spectrum-gray-900", "--spectrum-line-height-100", "--spectrum-logical-rotation", "--spectrum-neutral-content-color-default", diff --git a/components/table/index.css b/components/table/index.css index 9f358a08f3f..1be0d1097e0 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -23,22 +23,24 @@ --spectrum-table-section-header-background-color: var(--spectrum-gray-200); /* @todo Refactor or remove these properties once the RGB stripped value is available. */ - --spectrum-table-selected-row-background-color: rgb(var(--spectrum-table-selected-row-background-color-rgb), var(--spectrum-table-selected-row-background-opacity)); - --spectrum-table-selected-row-background-color-non-emphasized: rgb(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized)); - --spectrum-table-selected-row-background-color-hover: rgb(var(--spectrum-table-selected-row-background-color-rgb), var(--spectrum-table-selected-row-background-opacity-hover)); - --spectrum-table-selected-row-background-color-active: rgb(var(--spectrum-table-selected-row-background-color-rgb), var(--spectrum-table-selected-row-background-opacity-hover)); - --spectrum-table-selected-row-background-color-non-emphasized-focus: rgb(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover)); + --spectrum-table-selected-row-background-color: color-mix(in sRGB, var(--spectrum-table-selected-row-background-color) var(--spectrum-table-selected-row-background-opacity), transparent); + --spectrum-table-selected-row-background-color-non-emphasized: color-mix(in sRGB, var(--spectrum-gray-700) var(--spectrum-table-selected-row-background-opacity-non-emphasized), transparent); + --spectrum-table-selected-row-background-color-hover: color-mix(in sRGB, var(--spectrum-table-selected-row-background-color) var(--spectrum-table-selected-row-background-opacity-hover), transparent); + --spectrum-table-selected-row-background-color-active: color-mix(in sRGB, var(--spectrum-table-selected-row-background-color) var(--spectrum-table-selected-row-background-opacity-hover), transparent); + --spectrum-table-selected-row-background-color-non-emphasized-focus: color-mix(in sRGB, var(--spectrum-gray-700) var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover), transparent); --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-row-background-color, var(--spectrum-table-row-background-color))); --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color-non-emphasized, var(--spectrum-table-selected-row-background-color-non-emphasized))); - --spectrum-table-drop-zone-background-color: rgb(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity)); --spectrum-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); + /* Row Selection */ + --spectrum-table-row-active-color: color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-table-row-down-opacity), transparent); /* active/down state background color */ + /* Row States */ /* @todo Refactor or remove these properties once the RGB stripped value is available. */ - --spectrum-table-row-background-color-hover: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-hover-opacity)); - --spectrum-table-row-background-color-active: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-down-opacity)); /* active/down state background color */ + --spectrum-table-row-background-color-hover: color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-table-row-hover-opacity), transparent); + --spectrum-table-row-background-color-active: color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-table-row-down-opacity), transparent); /* active/down state background color */ /* Border */ --spectrum-table-border-color: var(--spectrum-gray-300); @@ -245,7 +247,7 @@ .spectrum-Table-body.is-drop-target & { --highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color); --highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color); - --spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-drop-zone-background-color, var(--spectrum-table-drop-zone-background-color))); + --spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-drop-zone-background-color, color-mix(in sRGB, var(--spectrum-drop-zone-background-color) var(--spectrum-drop-zone-background-color-opacity), transparent))); } } diff --git a/components/table/tokens.json b/components/table/tokens.json new file mode 100644 index 00000000000..2f78cd07ba8 --- /dev/null +++ b/components/table/tokens.json @@ -0,0 +1,438 @@ +{ + "table-transition-duration": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/duration.json", + "value": "0s" + } + } + }, + "table-header-background-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-25}" + }, + "table-row-background-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "table-row-background-color-hover": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-900} {table-row-hover-opacity}, transparent)", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "table-summary-row-background-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "table-section-header-background-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "table-selected-row-background-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {blue-900} {table-selected-row-background-opacity}, transparent)", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "table-selected-row-background-color-non-emphasized": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-700} {table-selected-row-background-opacity-non-emphasized}, transparent)", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "table-selected-row-background-color-focus": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {blue-900} {table-selected-row-background-opacity-hover}, transparent)", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "table-selected-row-background-color-non-emphasized-focus": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-700} {table-selected-row-background-opacity-non-emphasized-hover}, transparent)", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "table-cell-background-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-row-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "table-selected-cell-background-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-selected-row-background-color-non-emphasized}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "table-drop-zone-outline-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-visual-color}" + }, + "table-row-active-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-900} {table-row-down-opacity}, transparent)" + }, + "table-border-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-300}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "table-border-radius": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-medium-size-extra-small}" + }, + "table-border-width": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-border-divider-width}" + }, + "table-outer-border-inline-width": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-border-divider-width}" + }, + "table-divider-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-300}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "table-focus-indicator-thickness": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "table-focus-indicator-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "table-row-focus-indicator-width": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-focus-indicator}" + }, + "table-focused-cell-border-radius": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-small-default}" + }, + "table-selected-cell-background-color-focus": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-selected-row-background-color-non-emphasized-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "table-icon-color-default": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "table-icon-color-hover": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "table-icon-color-active": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "table-icon-color-focus": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "table-icon-color-focus-hover": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "table-icon-color-key-focus": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "table-disclosure-icon-size": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "table-icon-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-icon-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "table-default-vertical-align": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "middle" + }, + "table-header-font-weight": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "table-header-text-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}" + }, + "table-row-font-family": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "table-row-font-weight": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "table-row-font-style": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "table-row-line-height": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "table-row-text-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "table-row-font-size": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "table-summary-row-font-weight": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "table-section-header-font-weight": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "table-min-header-row-height": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "table-header-row-top-to-text": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-column-header-row-top-to-text-medium}" + }, + "table-header-row-bottom-to-text": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-column-header-row-bottom-to-text-medium}" + }, + "table-min-row-height": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-row-height-medium}" + }, + "table-row-top-to-text": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-row-top-to-text-medium}" + }, + "table-row-bottom-to-text": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-row-bottom-to-text-medium}" + }, + "table-header-row-checkbox-block-spacing": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-header-row-checkbox-to-top-medium}" + }, + "table-row-checkbox-block-spacing": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-row-checkbox-to-top-medium}" + }, + "table-section-header-min-height": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-section-header-row-height-medium}" + }, + "table-section-header-block-start-spacing": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "table-section-header-block-end-spacing": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "table-visual-to-text": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-300}" + }, + "table-thumbnail-size": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{thumbnail-size-100}" + }, + "table-avatar-size": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{avatar-size-75}" + }, + "table-cell-inline-spacing": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-edge-to-content}" + }, + "table-checkbox-to-cell-content": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-checkbox-to-text}" + }, + "table-collapsible-tier-indent": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "table-collapsible-disclosure-inline-spacing": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "0px" + }, + "table-collapsible-icon-animation-duration": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + } +} diff --git a/components/tabs/tokens.json b/components/tabs/tokens.json new file mode 100644 index 00000000000..a0b2552f012 --- /dev/null +++ b/components/tabs/tokens.json @@ -0,0 +1,200 @@ +{ + "tabs-font-weight": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "tabs-divider-background-color": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "{gray-500}" + } + } + }, + "tabs-item-height": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tab-item-height-medium}" + }, + "tabs-item-horizontal-spacing": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tab-item-to-tab-item-horizontal-medium}" + }, + "tabs-item-vertical-spacing": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tab-item-to-tab-item-vertical-medium}" + }, + "tabs-start-to-edge": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tab-item-start-to-edge-medium}" + }, + "tabs-top-to-text": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tab-item-top-to-text-medium}" + }, + "tabs-bottom-to-text": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tab-item-bottom-to-text-medium}" + }, + "tabs-icon-size": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-75}" + }, + "tabs-icon-to-text": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "tabs-top-to-icon": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tab-item-top-to-workflow-icon-medium}" + }, + "tabs-color": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tabs-color-selected": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "tabs-color-hover": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tabs-color-key-focus": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tabs-color-disabled": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-500}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "tabs-font-family": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "tabs-font-style": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "tabs-font-size": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "tabs-line-height": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "tabs-focus-indicator-width": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "tabs-focus-indicator-border-radius": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "tabs-focus-indicator-gap": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tab-item-focus-indicator-gap-medium}" + }, + "tabs-focus-indicator-color": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "tabs-selection-indicator-color": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "tabs-list-background-direction": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "top" + }, + "tabs-divider-size": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "tabs-divider-border-radius": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "1px" + }, + "tabs-animation-duration": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "tabs-animation-ease": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-ease-in-out}" + } +} diff --git a/components/tag/tokens.json b/components/tag/tokens.json new file mode 100644 index 00000000000..6af8c2d003e --- /dev/null +++ b/components/tag/tokens.json @@ -0,0 +1,450 @@ +{ + "tag-animation-duration": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "tag-border-width": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "tag-border-color": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tag-border-color-hover": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tag-border-color-active": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tag-border-color-focus": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tag-border-color-selected": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "tag-background-color": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "tag-background-color-hover": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "tag-background-color-active": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "tag-background-color-focus": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "tag-background-color-selected": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-background-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "tag-background-color-selected-hover": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-background-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "tag-background-color-selected-active": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-background-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "tag-background-color-selected-focus": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-background-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "tag-content-color": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tag-content-color-hover": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tag-content-color-active": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tag-content-color-focus": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tag-content-color-selected": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "tag-content-color-disabled": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "tag-focus-ring-thickness": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "tag-focus-ring-gap": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "tag-focus-ring-color": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "tag-label-line-height": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "tag-label-line-height-cjk": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "tag-label-font-family": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "tag-label-font-style": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "tag-label-font-weight": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{medium-font-weight}" + }, + "tag-height": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-75}" + }, + "tag-min-inline-size": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tag-minimum-width-small}" + }, + "tag-font-size": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-75}" + }, + "tag-icon-size": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-75}" + }, + "tag-corner-radius": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-medium-size-small}" + }, + "tag-clear-button-size": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cross-icon-size-75}" + }, + "tag-clear-button-spacing-block": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tag-top-to-cross-icon-small}" + }, + "tag-label-to-clear-icon": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tag-label-to-clear-icon-small}" + }, + "tag-edge-to-clear-icon": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tag-edge-to-clear-icon-small}" + }, + "tag-visual-spacing-inline-start": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-visual-75}" + }, + "tag-visual-spacing-inline-end": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-75}" + }, + "tag-icon-spacing-block-start": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-75}" + }, + "tag-icon-spacing-block-end": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-75}" + }, + "tag-avatar-size": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{avatar-size-50}" + }, + "tag-avatar-spacing-block-start": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tag-top-to-avatar-small}" + }, + "tag-avatar-spacing-block-end": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tag-top-to-avatar-small}" + }, + "tag-thumbnail-size": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{thumbnail-size-50}" + }, + "tag-label-spacing-block": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-75}" + }, + "tag-label-spacing-inline": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-75}" + }, + "tag-border-color-disabled": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "tag-background-color-disabled": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "tag-border-color-emphasized": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "tag-background-color-emphasized": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "tag-background-color-emphasized-hover": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "tag-background-color-emphasized-active": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "tag-background-color-emphasized-focus": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "tag-content-color-emphasized": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + } +} diff --git a/components/taggroup/tokens.json b/components/taggroup/tokens.json new file mode 100644 index 00000000000..4acb58f088e --- /dev/null +++ b/components/taggroup/tokens.json @@ -0,0 +1,12 @@ +{ + "tag-group-item-margin-block": { + "component": "tag-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "tag-group-item-margin-inline": { + "component": "tag-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + } +} diff --git a/components/textfield/tokens.json b/components/textfield/tokens.json new file mode 100644 index 00000000000..8a79e4c159b --- /dev/null +++ b/components/textfield/tokens.json @@ -0,0 +1,445 @@ +{ + "textfield-animation-duration": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "textfield-height": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "textfield-width": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-default-width-medium}" + }, + "textfield-min-width": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({textfield-height} * {text-field-minimum-width-multiplier})" + }, + "textfield-border-width": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "textfield-corner-radius": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-medium-size-medium}" + }, + "textfield-spacing-inline": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-100}" + }, + "textfield-spacing-block-start": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "textfield-spacing-block-end": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "textfield-label-spacing-block": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-label-to-component}" + }, + "textfield-label-spacing-inline-side-label": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "textfield-helptext-spacing-block": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{help-text-to-component}" + }, + "textfield-icon-size-invalid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "textfield-icon-size-valid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{checkmark-icon-size-100}" + }, + "textfield-icon-spacing-inline-start-invalid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "textfield-icon-spacing-inline-end-invalid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-edge-to-alert-icon-medium}" + }, + "textfield-icon-spacing-block-invalid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-100}" + }, + "textfield-icon-spacing-inline-start-valid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "textfield-icon-spacing-inline-end-valid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-edge-to-validation-icon-medium}" + }, + "textfield-icon-spacing-block-valid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-top-to-validation-icon-medium}" + }, + "textfield-font-family": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "textfield-font-weight": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "textfield-font-style": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "textfield-font-size": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "textfield-line-height": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "textfield-line-height-cjk": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "textfield-input-line-height": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{textfield-height}" + }, + "textfield-character-count-color": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}" + }, + "textfield-character-count-spacing-inline": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "textfield-character-count-spacing-block": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "textfield-character-count-spacing-inline-side": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-label-character-count-to-field}" + }, + "textfield-character-count-spacing-block-side": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "textfield-focus-indicator-width": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "textfield-focus-indicator-gap": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "textfield-background-color": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "textfield-border-color": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-300}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "textfield-border-color-hover": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-400}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "textfield-border-color-focus": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "textfield-border-color-focus-hover": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "textfield-border-color-keyboard-focus": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "textfield-text-color-default": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "textfield-text-color-hover": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "textfield-text-color-focus": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "textfield-text-color-focus-hover": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-focus-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "textfield-text-color-keyboard-focus": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "textfield-text-color-readonly": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "textfield-background-color-disabled": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "textfield-border-color-disabled": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-border-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "textfield-text-color-disabled": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "textfield-border-color-invalid-default": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "textfield-border-color-invalid-hover": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "textfield-border-color-invalid-focus": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "textfield-border-color-invalid-focus-hover": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-focus-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "textfield-border-color-invalid-keyboard-focus": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "textfield-icon-color-invalid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-visual-color}" + }, + "textfield-text-color-invalid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "textfield-text-color-valid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "textfield-icon-color-valid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{positive-visual-color}" + }, + "textfield-focus-indicator-color": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "text-area-min-inline-size": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-area-minimum-width}" + }, + "text-area-min-block-size": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-area-minimum-height}" + } +} diff --git a/components/thumbnail/dist/metadata.json b/components/thumbnail/dist/metadata.json index 2a5fa051ef2..01ffda45a64 100644 --- a/components/thumbnail/dist/metadata.json +++ b/components/thumbnail/dist/metadata.json @@ -85,7 +85,6 @@ "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", "--spectrum-gray-500", - "--spectrum-gray-800-rgb", "--spectrum-white" ], "passthroughs": ["--mod-opacity-checkerboard-size"], diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css index 4e28f1892e2..0ceac68a024 100644 --- a/components/thumbnail/index.css +++ b/components/thumbnail/index.css @@ -17,8 +17,7 @@ --spectrum-thumbnail-border-radius: var(--spectrum-thumbnail-corner-radius); --spectrum-thumbnail-border-width: var(--spectrum-border-width-100); - /* @todo Refactor with --spectrum-thumbnail-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */ - --spectrum-thumbnail-border-color: rgb(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-opacity)); + --spectrum-thumbnail-border-color: color-mix(in sRGB, var(--spectrum-thumbnail-border-color) var(--spectrum-thumbnail-border-opacity), transparent); --spectrum-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400); --spectrum-thumbnail-layer-border-color-inner: var(--spectrum-white); --spectrum-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100); diff --git a/components/thumbnail/tokens.json b/components/thumbnail/tokens.json new file mode 100644 index 00000000000..b1972a20740 --- /dev/null +++ b/components/thumbnail/tokens.json @@ -0,0 +1,102 @@ +{ + "thumbnail-size": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{thumbnail-size-500}" + }, + "thumbnail-border-radius": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{thumbnail-corner-radius}" + }, + "thumbnail-border-width": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "thumbnail-border-color": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {thumbnail-border-color} {thumbnail-border-opacity}, transparent)", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "thumbnail-layer-border-width-inner": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-400}" + }, + "thumbnail-layer-border-color-inner": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "thumbnail-layer-border-width-outer": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "thumbnail-layer-border-color-outer": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-500}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "thumbnail-border-width-selected": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "thumbnail-border-color-selected": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-color-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "thumbnail-focus-indicator-thickness": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "thumbnail-focus-indicator-gap": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "thumbnail-focus-indicator-color": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "thumbnail-color-opacity-disabled": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{thumbnail-opacity-disabled}" + } +} diff --git a/components/toast/tokens.json b/components/toast/tokens.json new file mode 100644 index 00000000000..dbb89beaa99 --- /dev/null +++ b/components/toast/tokens.json @@ -0,0 +1,137 @@ +{ + "toast-font-family": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "toast-font-style": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "toast-font-size": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "toast-font-weight": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "toast-corner-radius": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-800}" + }, + "toast-icon-block-size": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "toast-min-block-size": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{toast-height}" + }, + "toast-max-inline-size": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{toast-maximum-width}" + }, + "toast-line-height": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "toast-line-height-cjk": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "toast-spacing-toast-to-edge": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "toast-spacing-block-close-button": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "toast-spacing-close-button-to-end-edge": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "toast-spacing-text-to-close-button": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "toast-spacing-edge-to-button-vertical": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "toast-spacing-text-to-button-horizontal": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "toast-spacing-button-to-close-button-horizontal": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "toast-spacing-icon-to-text": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-300}" + }, + "toast-spacing-start-edge-to-text-and-icon": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "toast-spacing-top-edge-to-icon": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{toast-top-to-workflow-icon}" + }, + "toast-spacing-top-edge-to-text": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{toast-top-to-text}" + }, + "toast-spacing-bottom-edge-to-text": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{toast-bottom-to-text}" + }, + "toast-background-color-default": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-background-color-default}" + }, + "toast-negative-background-color-default": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-background-color-default}" + }, + "toast-positive-background-color-default": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{positive-background-color-default}" + }, + "toast-informative-background-color-default": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{informative-background-color-default}" + }, + "toast-text-and-icon-color": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + } +} diff --git a/components/tooltip/tokens.json b/components/tooltip/tokens.json new file mode 100644 index 00000000000..86ea3006e36 --- /dev/null +++ b/components/tooltip/tokens.json @@ -0,0 +1,151 @@ +{ + "tooltip-tip-square-size": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "note": "To get a square that measures 10px/12px on the diagonal, the sides have to be 8px/10px.", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "8px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + } + } + }, + "tooltip-animation-duration": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "tooltip-animation-distance": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "tooltip-margin": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "0px" + }, + "tooltip-height": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-75}" + }, + "tooltip-max-inline-size": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tooltip-maximum-width}" + }, + "tooltip-border-radius": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-400}" + }, + "tooltip-font-size": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-75}" + }, + "tooltip-line-height": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "1.2" + }, + "tooltip-cjk-line-height": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "tooltip-font-weight": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "tooltip-spacing-inline": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-75}" + }, + "tooltip-spacing-block-start": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-75}" + }, + "tooltip-spacing-block-end": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-75}" + }, + "tooltip-content-color": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "tooltip-background-color-default": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-background-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "tooltip-background-color-informative": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{informative-background-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "tooltip-background-color-negative": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-background-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "tooltip-tip-block-size": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tooltip-tip-height}" + }, + "tooltip-tip-height-percentage": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "100%" + }, + "tooltip-tip-antialiasing-inset": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "0.5px" + }, + "tooltip-pointer-corner-spacing": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tooltip-border-radius}" + }, + "tooltip-border-width": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "0px", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "1px" + } + } + } +} diff --git a/components/tray/tokens.json b/components/tray/tokens.json new file mode 100644 index 00000000000..756477b2b09 --- /dev/null +++ b/components/tray/tokens.json @@ -0,0 +1,48 @@ +{ + "tray-max-inline-size": { + "component": "tray", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "375px" + }, + "tray-spacing-edge-to-tray-safe-zone": { + "component": "tray", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "64px" + }, + "tray-entry-animation-delay": { + "component": "tray", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "160ms" + }, + "tray-entry-animation-duration": { + "component": "tray", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-500}" + }, + "tray-exit-animation-delay": { + "component": "tray", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "0ms" + }, + "tray-exit-animation-duration": { + "component": "tray", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "tray-corner-radius": { + "component": "tray", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "tray-background-color": { + "component": "tray", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{background-layer-2-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + } +} diff --git a/components/treeview/tokens.json b/components/treeview/tokens.json new file mode 100644 index 00000000000..4d7a717a33c --- /dev/null +++ b/components/treeview/tokens.json @@ -0,0 +1,366 @@ +{ + "treeview-indicator-inset-block-start": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "5px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "6px" + } + } + }, + "treeview-item-background-color-quiet-selected": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {gray-900} 7%, transparent)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {gray-900} 6%, transparent)" + } + } + }, + "treeview-item-background-color-selected": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-800} 15%, transparent)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-900} 15%, transparent)" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "treeview-item-indentation-extra-large": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "30px" + } + } + }, + "treeview-item-indentation-large": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "25px" + } + } + }, + "treeview-item-indentation-medium": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "{spacing-300}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + } + } + }, + "treeview-item-indentation-small": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "15px" + } + } + }, + "treeview-item-min-block-size-thumbnail-offset-medium": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "2px" + } + } + }, + "treeview-item-background-color-hover": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "treeview-item-background-color-focus": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "treeview-item-background-color-disabled": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "treeview-item-border-size": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "treeview-item-border-size-selected": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "1px" + }, + "treeview-item-border-radius": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "0px" + }, + "treeview-item-border-color-selected": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "treeview-item-border-color-focus": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-700}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "treeview-item-border-color-quiet-selected": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent" + }, + "treeview-item-icon-gap": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-75}" + }, + "treeview-item-icon-color": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-700}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "LinkText" + } + } + }, + "treeview-item-icon-color-hover": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}" + }, + "treeview-item-icon-color-focus": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "treeview-item-icon-color-selected": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "treeview-item-icon-color-disabled": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "treeview-item-text-color": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "LinkText" + } + } + }, + "treeview-item-text-color-selected": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "treeview-item-text-color-disabled": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-500}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "treeview-item-text-color-focus": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "treeview-item-text-color-hover": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}" + }, + "treeview-indicator-animation-duration": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "treeview-item-min-block-size": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{treeview-item-sized-min-block-size}" + }, + "treeview-font-size": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "treeview-item-sized-min-block-size": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "treeview-item-sized-indentation": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{treeview-item-indentation-medium}" + }, + "treeview-heading-bottom-to-text": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-100}" + }, + "treeview-item-padding-inline-start": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "treeview-item-padding-inline-end": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-100}" + }, + "treeview-indicator-margin-inline-start": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc(-1 * {component-height-100})" + }, + "treeview-indicator-padding": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disclosure-indicator-top-to-disclosure-icon-medium}" + }, + "treeview-item-min-block-size-thumbnail-offset": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "0" + }, + "treeview-item-indentation": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{treeview-item-sized-indentation}" + }, + "treeview-section-spacing": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{treeview-item-indentation}" + }, + "treeview-heading-color": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + } +} diff --git a/components/typography/tokens.json b/components/typography/tokens.json new file mode 100644 index 00000000000..e485ec2bc30 --- /dev/null +++ b/components/typography/tokens.json @@ -0,0 +1,128 @@ +{ + "heading-font-size": { + "component": "typography", + "subcomponent": "heading", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-size-m}" + }, + "heading-cjk-font-size": { + "component": "typography", + "subcomponent": "heading", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-cjk-size-m}" + }, + "heading-sans-serif-font-family": { + "component": "typography", + "subcomponent": "heading", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "heading-serif-font-family": { + "component": "typography", + "subcomponent": "heading", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{serif-font-family-stack}" + }, + "heading-cjk-font-family": { + "component": "typography", + "subcomponent": "heading", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-font-family-stack}" + }, + "heading-cjk-letter-spacing": { + "component": "typography", + "subcomponent": "heading", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-letter-spacing}" + }, + "heading-font-color": { + "component": "typography", + "subcomponent": "heading", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Text" + } + } + }, + "heading-margin-start": { + "component": "typography", + "subcomponent": "heading", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({heading-font-size} * {heading-margin-top-multiplier})" + }, + "heading-margin-end": { + "component": "typography", + "subcomponent": "heading", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({heading-font-size} * {heading-margin-bottom-multiplier})" + }, + "body-font-size": { + "component": "typography", + "subcomponent": "body", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-size-m}" + }, + "body-font-color": { + "component": "typography", + "subcomponent": "body", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Text" + } + } + }, + "body-margin-end": { + "component": "typography", + "subcomponent": "body", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({body-font-size} * {body-margin-multiplier})" + }, + "detail-font-size": { + "component": "typography", + "subcomponent": "detail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{detail-size-m}" + }, + "detail-font-color": { + "component": "typography", + "subcomponent": "detail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{detail-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Text" + } + } + }, + "detail-margin-start": { + "component": "typography", + "subcomponent": "detail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({detail-font-size} * {detail-margin-top-multiplier})" + }, + "detail-margin-end": { + "component": "typography", + "subcomponent": "detail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({detail-font-size} * {detail-margin-bottom-multiplier})" + }, + "code-font-color": { + "component": "typography", + "subcomponent": "code", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{code-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Text" + } + } + } +} diff --git a/components/underlay/dist/metadata.json b/components/underlay/dist/metadata.json index 21a3e4aa1d0..2fd93c75a3a 100644 --- a/components/underlay/dist/metadata.json +++ b/components/underlay/dist/metadata.json @@ -27,7 +27,7 @@ "--spectrum-animation-duration-600", "--spectrum-animation-ease-in", "--spectrum-animation-ease-out", - "--spectrum-black-rgb", + "--spectrum-overlay-color", "--spectrum-overlay-opacity" ], "passthroughs": [], diff --git a/components/underlay/index.css b/components/underlay/index.css index 494f736e5a0..8fba6068880 100644 --- a/components/underlay/index.css +++ b/components/underlay/index.css @@ -20,8 +20,7 @@ /* @deprecated --mod-overlay-animation-duration-opened in favor of --mod-underlay-background-entry-animation-delay */ --spectrum-underlay-background-entry-animation-delay: var(--mod-underlay-background-entry-animation-delay, var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0))); - /* TODO update to --spectrum-overlay-color token once an RGB stripped value is available */ - --spectrum-underlay-background-color: var(--mod-underlay-background-color, rgb(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity))); + --spectrum-underlay-background-color: var(--mod-underlay-background-color, color-mix(in sRGB, var(--spectrum-overlay-color) var(--spectrum-overlay-opacity), transparent)); pointer-events: none; visibility: hidden; diff --git a/components/underlay/tokens.json b/components/underlay/tokens.json new file mode 100644 index 00000000000..4a13c1eefda --- /dev/null +++ b/components/underlay/tokens.json @@ -0,0 +1,37 @@ +{ + "underlay-background-exit-animation-duration": { + "component": "underlay", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-300}" + }, + "underlay-background-exit-animation-ease": { + "component": "underlay", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-ease-in}" + }, + "underlay-background-exit-animation-delay": { + "component": "underlay", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-200}" + }, + "underlay-background-entry-animation-duration": { + "component": "underlay", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-600}" + }, + "underlay-background-entry-animation-ease": { + "component": "underlay", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-ease-out}" + }, + "underlay-background-entry-animation-delay": { + "component": "underlay", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-0}" + }, + "underlay-background-color": { + "component": "underlay", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {overlay-color} {overlay-opacity}, transparent)" + } +} diff --git a/components/well/dist/metadata.json b/components/well/dist/metadata.json index c9fdd7f6da1..56097c6784d 100644 --- a/components/well/dist/metadata.json +++ b/components/well/dist/metadata.json @@ -24,8 +24,8 @@ "global": [ "--spectrum-body-color", "--spectrum-border-width-100", - "--spectrum-gray-1000-rgb", - "--spectrum-gray-800-rgb" + "--spectrum-gray-1000", + "--spectrum-gray-800" ], "passthroughs": [], "high-contrast": [] diff --git a/components/well/index.css b/components/well/index.css index 4c24597f735..15f0394d6a0 100644 --- a/components/well/index.css +++ b/components/well/index.css @@ -12,11 +12,11 @@ */ .spectrum-Well { - --spectrum-well-border-color: rgb(var(--spectrum-gray-1000-rgb), 0.05); + --spectrum-well-border-color: color-mix(in sRGB, var(--spectrum-gray-1000) 5%, transparent); --spectrum-well-border-width: var(--spectrum-border-width-100); --spectrum-well-content-color: var(--spectrum-body-color); - --spectrum-well-background-color: rgb(var(--spectrum-gray-800-rgb), 0.02); + --spectrum-well-background-color: color-mix(in sRGB, var(--spectrum-gray-800) 2%, transparent); text-align: start; display: block; diff --git a/components/well/tokens.json b/components/well/tokens.json new file mode 100644 index 00000000000..35ac9dc9d76 --- /dev/null +++ b/components/well/tokens.json @@ -0,0 +1,78 @@ +{ + "well-border-radius": { + "component": "well", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "5px" + } + } + }, + "well-margin-top": { + "component": "well", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "5px" + } + } + }, + "well-min-width": { + "component": "well", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "240px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "300px" + } + } + }, + "well-padding": { + "component": "well", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + } + } + }, + "well-border-color": { + "component": "well", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-1000} 5%, transparent)" + }, + "well-border-width": { + "component": "well", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "well-content-color": { + "component": "well", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}" + }, + "well-background-color": { + "component": "well", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-800} 2%, transparent)" + } +} 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/package.json b/package.json index 27850af4857..660099ded1a 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "cleaner": "nx run-many --target clean --projects", "compare": "cross-env NODE_ENV=production yarn bundle && yarn component:compare", "component:build": "node --no-warnings ./tasks/component-builder.js", - "component:compare": "node --no-warnings ./tasks/component-compare.js --tag next", + "component:compare": "node --no-warnings ./tasks/component-compare.js", "component:report": "node --no-warnings ./tasks/component-reporter.js", "dev": "cross-env NODE_ENV=development nx run storybook:build:docs", "docs:report": "yarn report", @@ -69,7 +69,6 @@ "@changesets/cli": "^2.29.7", "@commitlint/cli": "^19.8.1", "@commitlint/config-conventional": "^19.8.1", - "@spectrum-tools/postcss-rgb-mapping": "1.1.0", "@yarnpkg/types": "^4.0.1", "at-rule-packer": "^0.5.0", "autoprefixer": "^10.4.21", diff --git a/plugins/postcss-rgb-mapping/CHANGELOG.md b/plugins/postcss-rgb-mapping/CHANGELOG.md deleted file mode 100644 index 9fd32bb6fba..00000000000 --- a/plugins/postcss-rgb-mapping/CHANGELOG.md +++ /dev/null @@ -1,38 +0,0 @@ -# Change Log - -## 1.1.0 - -### Minor Changes - -- [#3452](https://github.com/adobe/spectrum-css/pull/3452) [`287cff8`](https://github.com/adobe/spectrum-css/commit/287cff82b7706f0f56d6d37f48e1d9c60a6df4b9) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - Adds new functionality to better handle tokens that reference other transparent tokens. - - When a custom properties below is defined as another, specifically "transparent," variable, such as: - - ```css - --disabled-static-white-background-color: var( - --spectrum-transparent-white-100 - ); - ``` - - ...the plugin can now convert this single custom property into its `-rgb` and `-opacity` postfixed variables, that each correspond to the `-rgb` and `-opacity` variables of the definition's transparent token. It then reassembles the original, using and referencing these newly created variables. - - ```css - --disabled-static-white-background-color-rgb: var( - --spectrum-transparent-white-100-rgb - ); - --disabled-static-white-background-color-opacity: var( - --spectrum-transparent-white-100-opacity - ); - --disabled-static-white-background-color: rgba( - var(--disabled-static-white-background-color-rgb), - var(--disabled-static-white-background-color-opacity) - ); - ``` - -## 1.0.0 - -### Major Changes - -📝 [#3502](https://github.com/adobe/spectrum-css/pull/3502) [`562396e`](https://github.com/adobe/spectrum-css/commit/562396eaf21769341f78ea3761393b65f00e751b) Thanks [@castastrophe](https://github.com/castastrophe)! - -- Migrated the `postcss-rgb-mapping` package into the new `@spectrum-tools` namespace so updates may shipped and shared among other projects. diff --git a/plugins/postcss-rgb-mapping/README.md b/plugins/postcss-rgb-mapping/README.md deleted file mode 100644 index 1f7016a514c..00000000000 --- a/plugins/postcss-rgb-mapping/README.md +++ /dev/null @@ -1,89 +0,0 @@ -# postcss-rgb-mapping - -> Remaps rgb(a) values to an `rgb` postfixed variable. If an opacity is found, creates a separate `opacity` postfixed variable. -> Also remaps values that reference a transparent token (for example, `transparent-black-300`) to `rgb` and `opacity` postfixed variables. - -## Installation - -```sh -yarn add -D @spectrum-tools/postcss-rgb-mapping -postcss -u postcss-rgb-mapping -o dist/index.css src/index.css -``` - -## Usage - -### Example 1: RGB and opacity postfixed variables - -This plugin turns this: - -```css -.spectrum--lightest { - --spectrum-seafoam-100: rgba(206, 247, 243); - --spectrum-seafoam-200: rgba(170, 241, 234, 0.5); -} -``` - -Into this: - -```css -.spectrum--lightest { - /* Both --spectrum-seafoam-100 and --spectrum-seafoam-200 get split into separate - "-rgb" and "-opacity" values when applicable. */ - --spectrum-seafoam-100-rgb: 206, 247, 243; - --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb: 170, 241, 234; - --spectrum-seafoam-200-opacity: 0.5; - /* The plugin then redefines the original custom variable to use the newly created - "-rgb" and/or "-opacity" custom variables. */ - --spectrum-seafoam-200: rgba( - var(--spectrum-seafoam-200-rgb), - var(--spectrum-seafoam-200-opacity) - ); -} -``` - -### Example 2: Remapping of transparent tokens - -This plugin turns this: - -```css -.spectrum--lightest { - --spectrum-transparent-white-100-rgb: 100, 100, 100; - --spectrum-transparent-white-100-opacity: 0.5; - --spectrum-transparent-white-100: rgba( - var(--spectrum-transparent-white-100-rgb), - var(--spectrum-transparent-white-100-opacity) - ); - /* The custom properties below is defined as another, specifically "transparent," variable. */ - --disabled-static-white-background-color: var( - --spectrum-transparent-white-100 - ); -} -``` - -Into this: - -```css -.spectrum--lightest { - --spectrum-transparent-white-100-rgb: 100, 100, 100; - --spectrum-transparent-white-100-opacity: 0.5; - --spectrum-transparent-white-100: rgba( - var(--spectrum-transparent-white-100-rgb), - var(--spectrum-transparent-white-100-opacity) - ); - /* In a similar fashion, the plugin creates new "-rgb" and "-opacity" postfixed custom - variables, that correspond to the definition's transparent "-rgb" and "-opacity" - postfixed custom variables. */ - --disabled-static-white-background-color-rgb: var( - --spectrum-transparent-white-100-rgb - ); - --disabled-static-white-background-color-opacity: var( - --spectrum-transparent-white-100-opacity - ); - /* Then reassembles the original to use and reference these newly created variables. */ - --disabled-static-white-background-color: rgba( - var(--disabled-static-white-background-color-rgb), - var(--disabled-static-white-background-color-opacity) - ); -} -``` diff --git a/plugins/postcss-rgb-mapping/expected/basic.css b/plugins/postcss-rgb-mapping/expected/basic.css deleted file mode 100644 index 8a5d3f3f350..00000000000 --- a/plugins/postcss-rgb-mapping/expected/basic.css +++ /dev/null @@ -1,15 +0,0 @@ -.elements { - --seafoam-100-rgb: 206, 247, 243; - --seafoam-100: rgba(var(--seafoam-100-rgb)); - --seafoam-200-rgb: 206, 247, 243; - --seafoam-200-opacity: 0.5; - --seafoam-200: rgba(var(--seafoam-200-rgb), var(--seafoam-200-opacity)); - --seafoam-300-rgb: 206, 247, 243; - --seafoam-300: rgba(var(--seafoam-300-rgb)); - --spectrum-transparent-white-100-rgb: 100, 100, 100; - --spectrum-transparent-white-100-opacity: 0.5; - --spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity)); - --disabled-static-white-background-color-rgb: var(--spectrum-transparent-white-100-rgb); - --disabled-static-white-background-color-opacity: var(--spectrum-transparent-white-100-opacity); - --disabled-static-white-background-color: rgba(var(--disabled-static-white-background-color-rgb), var(--disabled-static-white-background-color-opacity)); -} diff --git a/plugins/postcss-rgb-mapping/expected/modern.css b/plugins/postcss-rgb-mapping/expected/modern.css deleted file mode 100644 index 209329ec912..00000000000 --- a/plugins/postcss-rgb-mapping/expected/modern.css +++ /dev/null @@ -1,15 +0,0 @@ -.elements { - --seafoam-100-rgb: 206 247 243; - --seafoam-100: rgba(var(--seafoam-100-rgb)); - --seafoam-200-rgb: 206 247 243; - --seafoam-200-opacity: 50%; - --seafoam-200: rgba(var(--seafoam-200-rgb) / var(--seafoam-200-opacity)); - --seafoam-300-rgb: 206 247 243; - --seafoam-300: rgba(var(--seafoam-300-rgb)); - --spectrum-transparent-white-100-rgb: 100 100 100; - --spectrum-transparent-white-100-opacity: 50%; - --spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb) / var(--spectrum-transparent-white-100-opacity)); - --disabled-static-white-background-color-rgb: var(--spectrum-transparent-white-100-rgb); - --disabled-static-white-background-color-opacity: var(--spectrum-transparent-white-100-opacity); - --disabled-static-white-background-color: rgba(var(--disabled-static-white-background-color-rgb) / var(--disabled-static-white-background-color-opacity)); -} diff --git a/plugins/postcss-rgb-mapping/fixtures/basic.css b/plugins/postcss-rgb-mapping/fixtures/basic.css deleted file mode 100644 index d614c9cb38b..00000000000 --- a/plugins/postcss-rgb-mapping/fixtures/basic.css +++ /dev/null @@ -1,7 +0,0 @@ -.elements { - --seafoam-100: rgba(206, 247, 243); - --seafoam-200: rgba(206, 247, 243, 0.5); - --seafoam-300: rgb(206, 247, 243); - --spectrum-transparent-white-100: rgba(100, 100, 100, 0.5); - --disabled-static-white-background-color: var(--spectrum-transparent-white-100); -} diff --git a/plugins/postcss-rgb-mapping/index.js b/plugins/postcss-rgb-mapping/index.js deleted file mode 100644 index 22ee0214eb9..00000000000 --- a/plugins/postcss-rgb-mapping/index.js +++ /dev/null @@ -1,168 +0,0 @@ -/*! - * Copyright 2024. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. -*/ - -const valuesParser = require("postcss-values-parser"); - -/** @typedef {object} Options */ - -/** - * @type {import('postcss').PluginCreator} - * @param {Options} options - * @returns {import('postcss').Plugin} - */ -function rgbMappingFunction ({ - colorFunctionalNotation = false, -}) { - - return { - postcssPlugin: "@spectrum-tools/postcss-rgb-mapping", - /** @type {import('postcss').RootProcessor} */ - Root(root) { - /* Gather all the custom properties that reference "unprocessed" transparent tokens (i.e. transparent-white-200) */ - const transparentTokens = new Set(); - root.walkDecls(decl => { - if (decl.prop.startsWith('--spectrum-transparent-') && !decl.prop.endsWith('rgb') && !decl.prop.endsWith('opacity')) { - transparentTokens.add(decl.prop); - } - }); - - root.walkDecls(decl => { - const { prop, value } = decl; - - /* Determine if this property is a custom property */ - const isCustomProp = prop.startsWith("--"); - - /* Determine if this property has already been processed */ - const isProcessed = prop.endsWith("rgb") || prop.endsWith("opacity"); - - /* Check for transparent token reference */ - const transparentMatch = value.match(/var\((--spectrum-transparent-[^\s)]+)\)/); - if (isCustomProp && !isProcessed && transparentMatch) { - const referencedToken = transparentMatch[1]; - - if (transparentTokens.has(referencedToken)) { - /* Create the new RGB and opacity properties */ - decl.cloneBefore({ - prop: `${prop}-rgb`, - value: `var(${referencedToken}-rgb)` - }); - decl.cloneBefore({ - prop: `${prop}-opacity`, - value: `var(${referencedToken}-opacity)` - }); - - /* Update the original declaration */ - decl.value = `rgba(var(${prop}-rgb)${colorFunctionalNotation ? " / " : ", "}var(${prop}-opacity))`; - } - } - return; - }); - }, - - /** @type {import('postcss').DeclarationProcessor} */ - Declaration(decl, { Warning }) { - const { prop, value } = decl; - - /* Determine if this property is a custom property */ - const isCustomProp = prop.startsWith("--"); - - /* Determine if this property has already been processed */ - const isProcessed = prop.endsWith("rgb") || prop.endsWith("opacity"); - - /* Parse the value for its parts */ - const parsedValue = valuesParser.parse(value) || []; - - /* Determine if the value has an rgb or rgba value */ - const hasRGBValue = parsedValue.nodes.length ? parsedValue.nodes.some((node) => node.type === "func" && (["rgb", "rgba"].some(func => node.name === func))) : false; - - /* - * If the property is not a custom prop, or - * if the property is a custom prop and ends with 'rgb', or - * if the value is not an rgb or rgba value, or - * if the value is an rgba value with a var() function - * then return without processing. - */ - if (!isCustomProp || isProcessed || !hasRGBValue || parsedValue.nodes.length === 0) return; - - const rgba = parsedValue.nodes.find((node) => node.type === "func" && (["rgb", "rgba"].some(func => node.name === func))); - - const [r,g,b,a] = rgba.nodes.reduce((acc, node) => { - if (node.type === "numeric" && node.value) { - if (node?.unit && node.unit === "%") { - acc.push((node.value / 100).toFixed(2)); - } - else { - acc.push(node.value); - } - } - return acc; - }, []); - - /* If any of the values are undefined, return without processing */ - if (!r || !g || !b) { - return new Warning(`Unable to parse out rgb values: ${value}`, { node: decl }); - } - - /* Create a new declaration with the rgb values separated out */ - decl.cloneBefore({ - prop: `${prop}-rgb`, - value: colorFunctionalNotation ? `${r} ${g} ${b}` : `${r}, ${g}, ${b}`, - }); - - /* Update the original declaration value to point to the new variable */ - if (a) { - if (colorFunctionalNotation) { - if (typeof a === "string" && a.endsWith("%")) { - decl.cloneBefore({ - prop: `${prop}-opacity`, - value: a, - }); - } - else if (typeof a === "string" && a.startsWith("0.")) { - decl.cloneBefore({ - prop: `${prop}-opacity`, - value: `${parseFloat(a) * 100}%`, - }); - } - else { - decl.cloneBefore({ - prop: `${prop}-opacity`, - value: `${parseFloat(a) * 100}%`, - }); - } - } - else { - if (typeof a === "string" && a.endsWith("%")) { - decl.cloneBefore({ - prop: `${prop}-opacity`, - value: `${parseFloat(a) / 100}`, - }); - } - else { - decl.cloneBefore({ - prop: `${prop}-opacity`, - value: a, - }); - } - } - } - decl.assign({ - value: `rgba(var(${prop}-rgb)${a ? `${colorFunctionalNotation ? " /" : ","} var(${prop}-opacity)` : ""})`, - }); - return; - }, - }; -} - -rgbMappingFunction.postcss = true; -module.exports = rgbMappingFunction; diff --git a/plugins/postcss-rgb-mapping/package.json b/plugins/postcss-rgb-mapping/package.json deleted file mode 100644 index 63c8fa15a92..00000000000 --- a/plugins/postcss-rgb-mapping/package.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "name": "@spectrum-tools/postcss-rgb-mapping", - "version": "1.1.0", - "description": "Remaps rgb(a) values to an rgb postfixed variable", - "license": "Apache-2.0", - "author": "Adobe", - "contributors": [ - "Cassondra Roberts " - ], - "homepage": "https://opensource.adobe.com/spectrum-css", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "plugins/postcss-rgb-mapping" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "index.js", - "files": [ - "package.json", - "index.js", - "*.md" - ], - "dependencies": { - "postcss-values-parser": "^6.0.2" - }, - "peerDependencies": { - "postcss": ">=8" - }, - "devDependencies": { - "ava": "^6.4.1", - "c8": "^10.1.3", - "postcss": "^8.5.6" - }, - "keywords": [ - "css", - "rgb", - "plugin", - "postcss" - ] -} diff --git a/plugins/postcss-rgb-mapping/project.json b/plugins/postcss-rgb-mapping/project.json deleted file mode 100644 index 36438d12890..00000000000 --- a/plugins/postcss-rgb-mapping/project.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "name": "postcss-rgb-mapping", - "tags": ["tooling", "postcss", "plugin"], - "targets": { - "format": { - "defaultConfiguration": "plugins" - }, - "lint": { - "defaultConfiguration": "plugins" - }, - "test": { - "defaultConfiguration": "plugins" - } - } -} diff --git a/plugins/postcss-rgb-mapping/test.js b/plugins/postcss-rgb-mapping/test.js deleted file mode 100644 index 73e3319aa6c..00000000000 --- a/plugins/postcss-rgb-mapping/test.js +++ /dev/null @@ -1,42 +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. - */ - -const fs = require("fs"); -const test = require("ava"); -const postcss = require("postcss"); -const plugin = require("./index.js"); - -function compare(t, fixtureFilePath, expectedFilePath, options = {}) { - return postcss([plugin(options)]) - .process(readFile(`./fixtures/${fixtureFilePath}`), { - from: fixtureFilePath, - }) - .then((result) => { - const actual = result.css; - const expected = readFile(`./expected/${expectedFilePath}`); - t.is(actual, expected); - t.is(result.warnings().length, 0); - }); -} - -function readFile(filename) { - return fs.readFileSync(filename, "utf8"); -} - -test("create basic output", (t) => { - return compare(t, "basic.css", "basic.css"); -}); - -test("use modern rgba format", (t) => { - return compare(t, "basic.css", "modern.css", { colorFunctionalNotation: true }); -}); 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/stylelint.config.js b/stylelint.config.js index 6660f23328b..e7d22549d4d 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/**", @@ -55,7 +53,7 @@ module.exports = { "at-rule-no-unknown": [ true, { - ignoreAtRules: ["extend", "each", "include", "mixin"], + ignoreAtRules: ["extend", "each", "include", "mixin", "design-tokens"], }, ], "block-no-empty": [true, { @@ -83,6 +81,12 @@ module.exports = { ignoreProperties: { "/.+/": ["CanvasText", "preserve-parent-color"], }, + propertiesSyntax: { + "/.+/": "| ", + }, + typesSyntax: { + "": "design-token( [ to ]? )", + }, }, ], "declaration-block-no-shorthand-property-overrides": true, @@ -90,6 +94,7 @@ module.exports = { true, { severity: "warning", + ignoreFunctions: ["design-token"], }, ], "max-nesting-depth": [3, { severity: "warning" }], @@ -171,7 +176,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,9 +189,7 @@ 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)$/, ], skipDependencies: false, disableFix: true, @@ -218,7 +221,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..03012ba5589 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 @@ -206,7 +218,7 @@ async function processComponent( cwd, output = pathing.output, cacheLocation = pathing.cache, - tag, + base, } = {} ) { if (!component) return Promise.reject("No component specified."); @@ -551,14 +563,24 @@ 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; - -main(components, output, { skipCache: !cache, tag }).then((code) => { +let { _: components, output, cache, base } = 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("base", { + type: "string", + description: "The base version of the component to compare against", + default: "next", + }) + .argv; + +main(components, output, { base, skipCache: !cache }).then((code) => { process.exit(code); }); 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/tokens/custom-tokens.json b/tokens/custom-tokens.json new file mode 100644 index 00000000000..794649d4290 --- /dev/null +++ b/tokens/custom-tokens.json @@ -0,0 +1,99 @@ +{ + "animation-duration-0": { + "value": "0ms" + }, + "animation-duration-100": { + "value": "130ms" + }, + "animation-duration-1000": { + "value": "500ms" + }, + "animation-duration-200": { + "value": "160ms" + }, + "animation-duration-2000": { + "value": "1000ms" + }, + "animation-duration-300": { + "value": "190ms" + }, + "animation-duration-400": { + "value": "220ms" + }, + "animation-duration-4000": { + "value": "2000ms" + }, + "animation-duration-500": { + "value": "250ms" + }, + "animation-duration-600": { + "value": "300ms" + }, + "animation-duration-6000": { + "value": "3000ms" + }, + "animation-duration-700": { + "value": "3500ms" + }, + "animation-duration-800": { + "value": "400ms" + }, + "animation-duration-900": { + "value": "450ms" + }, + "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-linear": { + "value": "cubic-bezier(0, 0, 1, 1)" + }, + "animation-ease-out": { + "value": "cubic-bezier(0, 0, 0.4, 1)" + }, + "animation-linear": { + "value": "cubic-bezier(0, 0, 1, 1)" + }, + "cjk-font": { + "value": "{cjk-font-family-stack}" + }, + "cjk-font-family-stack": { + "value": "adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif" + }, + "code-font-family-stack": { + "value": "\"Source Code Pro\", Monaco, monospace" + }, + "corner-radius-1000": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "9999px" + }, + "font-family": { + "value": "{sans-font-family-stack}" + }, + "font-family-ar": { + "value": "myriad-arabic, adobe-clean, \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif" + }, + "font-family-he": { + "value": "myriad-hebrew, adobe-clean, \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif" + }, + "font-size": { + "value": "{font-size-100}" + }, + "font-style": { + "value": "{default-font-style}" + }, + "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" + }, + "sans-serif-font": { + "value": "{sans-font-family-stack}" + }, + "serif-font": { + "value": "{serif-font-family-stack}" + }, + "serif-font-family-stack": { + "value": "adobe-clean-serif, var(--spectrum-serif-font-family), \"Source Serif Pro\", Georgia, serif" + } +} 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 index 945b5a91c71..b7340de698d 100644 --- a/tokens/dist/json/tokens.json +++ b/tokens/dist/json/tokens.json @@ -1,20405 +1,20395 @@ { - "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-200)", - "light": { - "value": "rgb(225, 225, 225)" - }, - "dark": { - "value": "rgb(50, 50, 50)" - }, - "wireframe": { - "value": "rgb(214, 224, 246)" - } - }, - "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 + "accent-background-color-default": { + "prop": "--spectrum-accent-background-color-default", + "ref": "var(--spectrum-accent-color-800)", + "light": { + "value": "rgb(59, 99, 251)" + }, + "dark": { + "value": "rgb(64, 105, 253)" + } + }, + "accent-background-color-down": { + "prop": "--spectrum-accent-background-color-down", + "ref": "var(--spectrum-accent-color-700)", + "light": { + "value": "rgb(39, 77, 234)" + }, + "dark": { + "value": "rgb(52, 91, 248)" + } + }, + "accent-background-color-hover": { + "prop": "--spectrum-accent-background-color-hover", + "ref": "var(--spectrum-accent-color-700)", + "light": { + "value": "rgb(39, 77, 234)" + }, + "dark": { + "value": "rgb(52, 91, 248)" + } + }, + "accent-background-color-key-focus": { + "prop": "--spectrum-accent-background-color-key-focus", + "ref": "var(--spectrum-accent-color-700)", + "light": { + "value": "rgb(39, 77, 234)" + }, + "dark": { + "value": "rgb(52, 91, 248)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "accent-subtle-background-color-default": { + "prop": "--spectrum-accent-subtle-background-color-default", + "ref": "var(--spectrum-accent-color-300)", + "light": { + "value": "rgb(229, 240, 254)" + }, + "dark": { + "value": "rgb(12, 33, 117)" + } + }, + "accent-visual-color": { + "prop": "--spectrum-accent-visual-color", + "ref": "var(--spectrum-accent-color-900)", + "light": { + "value": "rgb(75, 117, 255)" + }, + "dark": { + "value": "rgb(86, 129, 255)" + } + }, + "accordion-background-color-default": { + "prop": "--spectrum-accordion-background-color-default", + "ref": "color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-background-opacity-default), transparent)", + "light": { + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" + } + }, + "accordion-background-color-down": { + "prop": "--spectrum-accordion-background-color-down", + "ref": "color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-background-opacity-down), transparent)", + "light": { + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" + } + }, + "accordion-background-color-hover": { + "prop": "--spectrum-accordion-background-color-hover", + "ref": "color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-background-opacity-hover), transparent)", + "light": { + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" + } + }, + "accordion-background-color-key-focus": { + "prop": "--spectrum-accordion-background-color-key-focus", + "ref": "color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-background-opacity-key-focus), transparent)", + "light": { + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" + } + }, + "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-component-edge-to-text": { + "prop": "--spectrum-accordion-component-edge-to-text", + "ref": "var(--spectrum-component-edge-to-text-75)", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "11px" + } + }, + "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-corner-radius": { + "prop": "--spectrum-accordion-corner-radius", + "ref": "var(--spectrum-corner-radius-100)", + "value": "4px" + }, + "accordion-disclosure-indicator-height": { + "prop": "--spectrum-accordion-disclosure-indicator-height", + "ref": "var(--spectrum-component-height-100)", + "desktop": { + "value": "32px" + }, + "mobile": { + "value": "40px" + } + }, + "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-divider-color": { + "prop": "--spectrum-accordion-divider-color", + "ref": "var(--spectrum-gray-200)", + "light": { + "value": "rgb(225, 225, 225)" + }, + "dark": { + "value": "rgb(50, 50, 50)" + } + }, + "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-color": { + "prop": "--spectrum-accordion-focus-indicator-color", + "ref": "var(--spectrum-focus-indicator-color)", + "light": { + "value": "rgb(75, 117, 255)" + }, + "dark": { + "value": "rgb(64, 105, 253)" + } + }, + "accordion-focus-indicator-gap": { + "prop": "--spectrum-accordion-focus-indicator-gap", + "ref": "var(--spectrum-focus-indicator-gap)", + "value": "2px" + }, + "accordion-focus-indicator-thickness": { + "prop": "--spectrum-accordion-focus-indicator-thickness", + "ref": "var(--spectrum-focus-indicator-thickness)", + "value": "2px" + }, + "accordion-item-content-area-bottom-to-content": { + "prop": "--spectrum-accordion-item-content-area-bottom-to-content", + "ref": "var(--spectrum-accordion-content-area-bottom-to-content)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "accordion-item-content-area-top-to-content": { + "prop": "--spectrum-accordion-item-content-area-top-to-content", + "ref": "var(--spectrum-accordion-content-area-top-to-content)", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "accordion-item-content-color": { + "prop": "--spectrum-accordion-item-content-color", + "ref": "var(--spectrum-body-color)", + "light": { + "value": "rgb(41, 41, 41)" + }, + "dark": { + "value": "rgb(219, 219, 219)" + } + }, + "accordion-item-content-disabled-color": { + "prop": "--spectrum-accordion-item-content-disabled-color", + "ref": "var(--spectrum-disabled-content-color)", + "light": { + "value": "rgb(198, 198, 198)" + }, + "dark": { + "value": "rgb(68, 68, 68)" + } + }, + "accordion-item-content-font": { + "prop": "--spectrum-accordion-item-content-font", + "ref": "var(--spectrum-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" + }, + "accordion-item-content-font-size": { + "prop": "--spectrum-accordion-item-content-font-size", + "ref": "var(--spectrum-body-size-s)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } + }, + "accordion-item-content-font-style": { + "prop": "--spectrum-accordion-item-content-font-style", + "ref": "var(--spectrum-body-sans-serif-font-style)", + "value": "normal" + }, + "accordion-item-content-font-weight": { + "prop": "--spectrum-accordion-item-content-font-weight", + "ref": "var(--spectrum-body-sans-serif-font-weight)", + "value": "400" + }, + "accordion-item-content-line-height": { + "prop": "--spectrum-accordion-item-content-line-height", + "ref": "var(--spectrum-line-height-100)", + "value": 1.3 + }, + "accordion-item-header-bottom-to-text": { + "prop": "--spectrum-accordion-item-header-bottom-to-text", + "ref": "var(--spectrum-accordion-bottom-to-text-regular-medium)", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "13px" + } + }, + "accordion-item-header-color-default": { + "prop": "--spectrum-accordion-item-header-color-default", + "ref": "var(--spectrum-neutral-content-color-default)", + "light": { + "value": "rgb(41, 41, 41)" + }, + "dark": { + "value": "rgb(219, 219, 219)" + } + }, + "accordion-item-header-color-down": { + "prop": "--spectrum-accordion-item-header-color-down", + "ref": "var(--spectrum-neutral-content-color-down)", + "light": { + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" + } + }, + "accordion-item-header-color-hover": { + "prop": "--spectrum-accordion-item-header-color-hover", + "ref": "var(--spectrum-neutral-content-color-hover)", + "light": { + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" + } + }, + "accordion-item-header-color-key-focus": { + "prop": "--spectrum-accordion-item-header-color-key-focus", + "ref": "var(--spectrum-neutral-content-color-key-focus)", + "light": { + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" + } + }, + "accordion-item-header-disabled-color": { + "prop": "--spectrum-accordion-item-header-disabled-color", + "ref": "var(--spectrum-disabled-content-color)", + "light": { + "value": "rgb(198, 198, 198)" + }, + "dark": { + "value": "rgb(68, 68, 68)" + } + }, + "accordion-item-header-font": { + "prop": "--spectrum-accordion-item-header-font", + "ref": "var(--spectrum-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" + }, + "accordion-item-header-font-size": { + "prop": "--spectrum-accordion-item-header-font-size", + "ref": "var(--spectrum-font-size-300)", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, + "accordion-item-header-font-style": { + "prop": "--spectrum-accordion-item-header-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "accordion-item-header-font-weight": { + "prop": "--spectrum-accordion-item-header-font-weight", + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" + }, + "accordion-item-header-line-height": { + "prop": "--spectrum-accordion-item-header-line-height", + "value": "1.25" + }, + "accordion-item-header-top-to-text": { + "prop": "--spectrum-accordion-item-header-top-to-text", + "ref": "var(--spectrum-accordion-top-to-text-regular-medium)", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "10px" + } + }, + "accordion-item-height": { + "prop": "--spectrum-accordion-item-height", + "ref": "var(--spectrum-component-height-200)", + "desktop": { + "value": "40px" + }, + "mobile": { + "value": "50px" + } + }, + "accordion-item-to-divider": { + "prop": "--spectrum-accordion-item-to-divider", + "value": "0px" + }, + "accordion-min-block-size": { + "prop": "--spectrum-accordion-min-block-size", + "ref": "max(var(--spectrum-accordion-item-height), calc(var(--spectrum-accordion-item-header-top-to-text) + var(--spectrum-accordion-item-header-bottom-to-text) + (var(--spectrum-accordion-item-header-font-size) * var(--spectrum-accordion-item-header-line-height))))", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, + "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", + "light": { + "ref": "var(--spectrum-transparent-white-25)", + "value": "rgba(255, 255, 255, 0)" + }, + "ref": "var(--spectrum-gray-400)", + "dark": { + "value": "rgb(68, 68, 68)" + } + }, + "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": "16px" + }, + "mobile": { + "value": "17px" + } + }, + "alert-dialog-description-size": { + "prop": "--spectrum-alert-dialog-description-size", + "ref": "var(--spectrum-body-size-s)", + "desktop": { + "value": "16px" + }, + "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": "22px" + }, + "mobile": { + "value": "24px" + } + }, + "alert-dialog-title-size": { + "prop": "--spectrum-alert-dialog-title-size", + "ref": "var(--spectrum-title-size-xl)", + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "24px" + } + }, + "android-elevation": { + "prop": "--spectrum-android-elevation", + "value": "2dp" + }, + "animation-duration-0": { + "prop": "--spectrum-animation-duration-0", + "value": "0ms" + }, + "animation-duration-100": { + "prop": "--spectrum-animation-duration-100", + "value": "130ms" + }, + "animation-duration-1000": { + "prop": "--spectrum-animation-duration-1000", + "value": "500ms" + }, + "animation-duration-200": { + "prop": "--spectrum-animation-duration-200", + "value": "160ms" + }, + "animation-duration-2000": { + "prop": "--spectrum-animation-duration-2000", + "value": "1000ms" + }, + "animation-duration-300": { + "prop": "--spectrum-animation-duration-300", + "value": "190ms" + }, + "animation-duration-400": { + "prop": "--spectrum-animation-duration-400", + "value": "220ms" + }, + "animation-duration-4000": { + "prop": "--spectrum-animation-duration-4000", + "value": "2000ms" + }, + "animation-duration-500": { + "prop": "--spectrum-animation-duration-500", + "value": "250ms" + }, + "animation-duration-600": { + "prop": "--spectrum-animation-duration-600", + "value": "300ms" + }, + "animation-duration-6000": { + "prop": "--spectrum-animation-duration-6000", + "value": "3000ms" + }, + "animation-duration-700": { + "prop": "--spectrum-animation-duration-700", + "value": "3500ms" + }, + "animation-duration-800": { + "prop": "--spectrum-animation-duration-800", + "value": "400ms" + }, + "animation-duration-900": { + "prop": "--spectrum-animation-duration-900", + "value": "450ms" + }, + "animation-ease-in": { + "prop": "--spectrum-animation-ease-in", + "value": "cubic-bezier(0.5, 0, 1, 1)" + }, + "animation-ease-in-out": { + "prop": "--spectrum-animation-ease-in-out", + "value": "cubic-bezier(0.45, 0, 0.4, 1)" + }, + "animation-ease-linear": { + "prop": "--spectrum-animation-ease-linear", + "value": "cubic-bezier(0, 0, 1, 1)" + }, + "animation-ease-out": { + "prop": "--spectrum-animation-ease-out", + "value": "cubic-bezier(0, 0, 0.4, 1)" + }, + "animation-linear": { + "prop": "--spectrum-animation-linear", + "value": "cubic-bezier(0, 0, 1, 1)" + }, + "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)" + } + }, + "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": "30%" + }, + "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)" + } + }, + "background-elevated-color": { + "prop": "--spectrum-background-elevated-color", + "ref": "var(--spectrum-gray-25)", + "dark": { + "value": "rgb(34, 34, 34)" + }, + "light": { + "value": "rgb(255, 255, 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)" + } + }, + "background-layer-2-color": { + "prop": "--spectrum-background-layer-2-color", + "ref": "var(--spectrum-gray-75)", + "light": { + "value": "rgb(255, 255, 255)" + }, + "dark": { + "value": "rgb(34, 34, 34)" + } + }, + "background-opacity-default": { + "prop": "--spectrum-background-opacity-default", + "ref": "0", + "value": "0%" + }, + "background-opacity-down": { + "prop": "--spectrum-background-opacity-down", + "ref": "0.1", + "value": "10%" + }, + "background-opacity-hover": { + "prop": "--spectrum-background-opacity-hover", + "ref": "0.1", + "value": "10%" + }, + "background-opacity-key-focus": { + "prop": "--spectrum-background-opacity-key-focus", + "ref": "0.1", + "value": "10%" + }, + "background-pasteboard-color": { + "prop": "--spectrum-background-pasteboard-color", + "ref": "var(--spectrum-gray-100)", + "dark": { + "value": "rgb(17, 17, 17)" + }, + "light": { + "value": "rgb(233, 233, 233)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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", + "ref": "black", + "value": "900" + }, + "blue-100": { + "prop": "--spectrum-blue-100", + "light": { + "value": "rgb(245, 249, 255)" + }, + "dark": { + "value": "rgb(14, 23, 63)" + } + }, + "blue-1000": { + "prop": "--spectrum-blue-1000", + "light": { + "value": "rgb(39, 77, 234)" + }, + "dark": { + "value": "rgb(105, 149, 254)" + } + }, + "blue-1100": { + "prop": "--spectrum-blue-1100", + "light": { + "value": "rgb(29, 62, 207)" + }, + "dark": { + "value": "rgb(124, 169, 252)" + } + }, + "blue-1200": { + "prop": "--spectrum-blue-1200", + "light": { + "value": "rgb(21, 50, 173)" + }, + "dark": { + "value": "rgb(152, 192, 252)" + } + }, + "blue-1300": { + "prop": "--spectrum-blue-1300", + "light": { + "value": "rgb(16, 40, 140)" + }, + "dark": { + "value": "rgb(181, 213, 253)" + } + }, + "blue-1400": { + "prop": "--spectrum-blue-1400", + "light": { + "value": "rgb(12, 31, 105)" + }, + "dark": { + "value": "rgb(213, 231, 254)" + } + }, + "blue-1500": { + "prop": "--spectrum-blue-1500", + "dark": { + "value": "rgb(238, 245, 255)" + }, + "light": { + "value": "rgb(14, 24, 67)" + } + }, + "blue-1600": { + "prop": "--spectrum-blue-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(7, 11, 30)" + } + }, + "blue-200": { + "prop": "--spectrum-blue-200", + "light": { + "value": "rgb(229, 240, 254)" + }, + "dark": { + "value": "rgb(15, 28, 82)" + } + }, + "blue-300": { + "prop": "--spectrum-blue-300", + "light": { + "value": "rgb(203, 226, 254)" + }, + "dark": { + "value": "rgb(12, 33, 117)" + } + }, + "blue-400": { + "prop": "--spectrum-blue-400", + "light": { + "value": "rgb(172, 207, 253)" + }, + "dark": { + "value": "rgb(18, 45, 154)" + } + }, + "blue-500": { + "prop": "--spectrum-blue-500", + "light": { + "value": "rgb(142, 185, 252)" + }, + "dark": { + "value": "rgb(26, 58, 195)" + } + }, + "blue-600": { + "prop": "--spectrum-blue-600", + "light": { + "value": "rgb(114, 158, 253)" + }, + "dark": { + "value": "rgb(37, 73, 229)" + } + }, + "blue-700": { + "prop": "--spectrum-blue-700", + "light": { + "value": "rgb(93, 137, 255)" + }, + "dark": { + "value": "rgb(52, 91, 248)" + } + }, + "blue-800": { + "prop": "--spectrum-blue-800", + "light": { + "value": "rgb(75, 117, 255)" + }, + "dark": { + "value": "rgb(64, 105, 253)" + } + }, + "blue-900": { + "prop": "--spectrum-blue-900", + "light": { + "value": "rgb(59, 99, 251)" + }, + "dark": { + "value": "rgb(86, 129, 255)" + } + }, + "blue-background-color-default": { + "prop": "--spectrum-blue-background-color-default", + "ref": "var(--spectrum-blue-800)", + "light": { + "value": "rgb(59, 99, 251)" + }, + "dark": { + "value": "rgb(64, 105, 253)" + } + }, + "blue-subtle-background-color-default": { + "prop": "--spectrum-blue-subtle-background-color-default", + "ref": "var(--spectrum-blue-300)", + "light": { + "value": "rgb(229, 240, 254)" + }, + "dark": { + "value": "rgb(12, 33, 117)" + } + }, + "blue-visual-color": { + "prop": "--spectrum-blue-visual-color", + "ref": "var(--spectrum-blue-900)", + "light": { + "value": "rgb(75, 117, 255)" + }, + "dark": { + "value": "rgb(86, 129, 255)" + } + }, + "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)" + } + }, + "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", + "ref": "bold", + "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": "7px" + }, + "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)" + } + }, + "brown-1000": { + "prop": "--spectrum-brown-1000", + "dark": { + "value": "rgb(181, 147, 98)" + }, + "light": { + "value": "rgb(119, 91, 50)" + } + }, + "brown-1100": { + "prop": "--spectrum-brown-1100", + "dark": { + "value": "rgb(199, 163, 112)" + }, + "light": { + "value": "rgb(103, 76, 35)" + } + }, + "brown-1200": { + "prop": "--spectrum-brown-1200", + "dark": { + "value": "rgb(222, 185, 130)" + }, + "light": { + "value": "rgb(88, 61, 21)" + } + }, + "brown-1300": { + "prop": "--spectrum-brown-1300", + "dark": { + "value": "rgb(232, 207, 169)" + }, + "light": { + "value": "rgb(70, 49, 17)" + } + }, + "brown-1400": { + "prop": "--spectrum-brown-1400", + "dark": { + "value": "rgb(242, 227, 206)" + }, + "light": { + "value": "rgb(52, 37, 13)" + } + }, + "brown-1500": { + "prop": "--spectrum-brown-1500", + "dark": { + "value": "rgb(250, 244, 236)" + }, + "light": { + "value": "rgb(38, 26, 9)" + } + }, + "brown-1600": { + "prop": "--spectrum-brown-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(16, 12, 4)" + } + }, + "brown-200": { + "prop": "--spectrum-brown-200", + "dark": { + "value": "rgb(44, 31, 11)" + }, + "light": { + "value": "rgb(247, 238, 225)" + } + }, + "brown-300": { + "prop": "--spectrum-brown-300", + "dark": { + "value": "rgb(58, 40, 14)" + }, + "light": { + "value": "rgb(239, 221, 195)" + } + }, + "brown-400": { + "prop": "--spectrum-brown-400", + "dark": { + "value": "rgb(78, 55, 19)" + }, + "light": { + "value": "rgb(229, 200, 157)" + } + }, + "brown-500": { + "prop": "--spectrum-brown-500", + "dark": { + "value": "rgb(98, 71, 30)" + }, + "light": { + "value": "rgb(214, 177, 123)" + } + }, + "brown-600": { + "prop": "--spectrum-brown-600", + "dark": { + "value": "rgb(115, 88, 47)" + }, + "light": { + "value": "rgb(190, 155, 104)" + } + }, + "brown-700": { + "prop": "--spectrum-brown-700", + "dark": { + "value": "rgb(132, 104, 61)" + }, + "light": { + "value": "rgb(171, 138, 90)" + } + }, + "brown-800": { + "prop": "--spectrum-brown-800", + "dark": { + "value": "rgb(143, 114, 69)" + }, + "light": { + "value": "rgb(154, 123, 77)" + } + }, + "brown-900": { + "prop": "--spectrum-brown-900", + "dark": { + "value": "rgb(163, 132, 84)" + }, + "light": { + "value": "rgb(139, 109, 66)" + } + }, + "brown-background-color-default": { + "prop": "--spectrum-brown-background-color-default", + "ref": "var(--spectrum-brown-800)", + "light": { + "value": "rgb(139, 109, 66)" + }, + "dark": { + "value": "rgb(143, 114, 69)" + } + }, + "brown-subtle-background-color-default": { + "prop": "--spectrum-brown-subtle-background-color-default", + "ref": "var(--spectrum-brown-300)", + "light": { + "value": "rgb(247, 238, 225)" + }, + "dark": { + "value": "rgb(58, 40, 14)" + } + }, + "brown-visual-color": { + "prop": "--spectrum-brown-visual-color", + "ref": "var(--spectrum-brown-900)", + "light": { + "value": "rgb(154, 123, 77)" + }, + "dark": { + "value": "rgb(163, 132, 84)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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", + "light": { + "ref": "var(--spectrum-transparent-white-600)", + "value": "rgba(255, 255, 255, 0.51)" + }, + "dark": { + "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", + "ref": "0.95", + "value": "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)" + } + }, + "celery-1000": { + "prop": "--spectrum-celery-1000", + "light": { + "value": "rgb(52, 109, 12)" + }, + "dark": { + "value": "rgb(88, 172, 28)" + } + }, + "celery-1100": { + "prop": "--spectrum-celery-1100", + "light": { + "value": "rgb(44, 92, 9)" + }, + "dark": { + "value": "rgb(100, 190, 35)" + } + }, + "celery-1200": { + "prop": "--spectrum-celery-1200", + "light": { + "value": "rgb(35, 75, 6)" + }, + "dark": { + "value": "rgb(116, 213, 46)" + } + }, + "celery-1300": { + "prop": "--spectrum-celery-1300", + "light": { + "value": "rgb(27, 60, 3)" + }, + "dark": { + "value": "rgb(136, 234, 65)" + } + }, + "celery-1400": { + "prop": "--spectrum-celery-1400", + "light": { + "value": "rgb(19, 46, 0)" + }, + "dark": { + "value": "rgb(170, 251, 112)" + } + }, + "celery-1500": { + "prop": "--spectrum-celery-1500", + "dark": { + "value": "rgb(222, 255, 198)" + }, + "light": { + "value": "rgb(12, 33, 0)" + } + }, + "celery-1600": { + "prop": "--spectrum-celery-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(4, 15, 0)" + } + }, + "celery-200": { + "prop": "--spectrum-celery-200", + "light": { + "value": "rgb(197, 255, 156)" + }, + "dark": { + "value": "rgb(15, 38, 0)" + } + }, + "celery-300": { + "prop": "--spectrum-celery-300", + "light": { + "value": "rgb(157, 247, 92)" + }, + "dark": { + "value": "rgb(21, 51, 1)" + } + }, + "celery-400": { + "prop": "--spectrum-celery-400", + "light": { + "value": "rgb(129, 228, 58)" + }, + "dark": { + "value": "rgb(31, 67, 4)" + } + }, + "celery-500": { + "prop": "--spectrum-celery-500", + "light": { + "value": "rgb(110, 206, 42)" + }, + "dark": { + "value": "rgb(41, 86, 8)" + } + }, + "celery-600": { + "prop": "--spectrum-celery-600", + "light": { + "value": "rgb(93, 180, 31)" + }, + "dark": { + "value": "rgb(50, 105, 11)" + } + }, + "celery-700": { + "prop": "--spectrum-celery-700", + "light": { + "value": "rgb(82, 161, 25)" + }, + "dark": { + "value": "rgb(60, 122, 15)" + } + }, + "celery-800": { + "prop": "--spectrum-celery-800", + "light": { + "value": "rgb(72, 144, 20)" + }, + "dark": { + "value": "rgb(66, 134, 18)" + } + }, + "celery-900": { + "prop": "--spectrum-celery-900", + "light": { + "value": "rgb(64, 129, 17)" + }, + "dark": { + "value": "rgb(78, 154, 23)" + } + }, + "celery-background-color-default": { + "prop": "--spectrum-celery-background-color-default", + "ref": "var(--spectrum-celery-900)", + "light": { + "value": "rgb(93, 180, 31)" + }, + "dark": { + "value": "rgb(78, 154, 23)" + } + }, + "celery-subtle-background-color-default": { + "prop": "--spectrum-celery-subtle-background-color-default", + "ref": "var(--spectrum-celery-300)", + "light": { + "value": "rgb(197, 255, 156)" + }, + "dark": { + "value": "rgb(21, 51, 1)" + } + }, + "celery-visual-color": { + "prop": "--spectrum-celery-visual-color", + "ref": "var(--spectrum-celery-800)", + "light": { + "value": "rgb(82, 161, 25)" + }, + "dark": { + "value": "rgb(66, 134, 18)" + } + }, + "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)" + } + }, + "chartreuse-1000": { + "prop": "--spectrum-chartreuse-1000", + "light": { + "value": "rgb(86, 103, 0)" + }, + "dark": { + "value": "rgb(136, 164, 0)" + } + }, + "chartreuse-1100": { + "prop": "--spectrum-chartreuse-1100", + "light": { + "value": "rgb(73, 87, 0)" + }, + "dark": { + "value": "rgb(151, 181, 0)" + } + }, + "chartreuse-1200": { + "prop": "--spectrum-chartreuse-1200", + "light": { + "value": "rgb(60, 71, 0)" + }, + "dark": { + "value": "rgb(169, 203, 0)" + } + }, + "chartreuse-1300": { + "prop": "--spectrum-chartreuse-1300", + "light": { + "value": "rgb(47, 57, 0)" + }, + "dark": { + "value": "rgb(187, 225, 0)" + } + }, + "chartreuse-1400": { + "prop": "--spectrum-chartreuse-1400", + "light": { + "value": "rgb(35, 43, 0)" + }, + "dark": { + "value": "rgb(219, 240, 117)" + } + }, + "chartreuse-1500": { + "prop": "--spectrum-chartreuse-1500", + "dark": { + "value": "rgb(242, 249, 206)" + }, + "light": { + "value": "rgb(25, 30, 0)" + } + }, + "chartreuse-1600": { + "prop": "--spectrum-chartreuse-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(11, 14, 0)" + } + }, + "chartreuse-200": { + "prop": "--spectrum-chartreuse-200", + "light": { + "value": "rgb(234, 246, 173)" + }, + "dark": { + "value": "rgb(30, 36, 0)" + } + }, + "chartreuse-300": { + "prop": "--spectrum-chartreuse-300", + "light": { + "value": "rgb(208, 236, 70)" + }, + "dark": { + "value": "rgb(39, 47, 0)" + } + }, + "chartreuse-400": { + "prop": "--spectrum-chartreuse-400", + "light": { + "value": "rgb(182, 219, 0)" + }, + "dark": { + "value": "rgb(53, 63, 0)" + } + }, + "chartreuse-500": { + "prop": "--spectrum-chartreuse-500", + "light": { + "value": "rgb(163, 196, 0)" + }, + "dark": { + "value": "rgb(68, 82, 0)" + } + }, + "chartreuse-600": { + "prop": "--spectrum-chartreuse-600", + "light": { + "value": "rgb(143, 172, 0)" + }, + "dark": { + "value": "rgb(83, 100, 0)" + } + }, + "chartreuse-700": { + "prop": "--spectrum-chartreuse-700", + "light": { + "value": "rgb(128, 153, 0)" + }, + "dark": { + "value": "rgb(97, 116, 0)" + } + }, + "chartreuse-800": { + "prop": "--spectrum-chartreuse-800", + "light": { + "value": "rgb(114, 137, 0)" + }, + "dark": { + "value": "rgb(106, 127, 0)" + } + }, + "chartreuse-900": { + "prop": "--spectrum-chartreuse-900", + "light": { + "value": "rgb(102, 122, 0)" + }, + "dark": { + "value": "rgb(122, 147, 0)" + } + }, + "chartreuse-background-color-default": { + "prop": "--spectrum-chartreuse-background-color-default", + "ref": "var(--spectrum-chartreuse-1000)", + "light": { + "value": "rgb(163, 196, 0)" + }, + "dark": { + "value": "rgb(136, 164, 0)" + } + }, + "chartreuse-subtle-background-color-default": { + "prop": "--spectrum-chartreuse-subtle-background-color-default", + "ref": "var(--spectrum-chartreuse-300)", + "light": { + "value": "rgb(234, 246, 173)" + }, + "dark": { + "value": "rgb(39, 47, 0)" + } + }, + "chartreuse-visual-color": { + "prop": "--spectrum-chartreuse-visual-color", + "ref": "var(--spectrum-chartreuse-900)", + "light": { + "value": "rgb(143, 172, 0)" + }, + "dark": { + "value": "rgb(122, 147, 0)" + } + }, + "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)" + } + }, + "cinnamon-1000": { + "prop": "--spectrum-cinnamon-1000", + "dark": { + "value": "rgb(206, 136, 99)" + }, + "light": { + "value": "rgb(147, 77, 43)" + } + }, + "cinnamon-1100": { + "prop": "--spectrum-cinnamon-1100", + "dark": { + "value": "rgb(220, 154, 118)" + }, + "light": { + "value": "rgb(128, 62, 32)" + } + }, + "cinnamon-1200": { + "prop": "--spectrum-cinnamon-1200", + "dark": { + "value": "rgb(232, 179, 149)" + }, + "light": { + "value": "rgb(110, 48, 21)" + } + }, + "cinnamon-1300": { + "prop": "--spectrum-cinnamon-1300", + "dark": { + "value": "rgb(239, 203, 183)" + }, + "light": { + "value": "rgb(92, 35, 11)" + } + }, + "cinnamon-1400": { + "prop": "--spectrum-cinnamon-1400", + "dark": { + "value": "rgb(246, 225, 214)" + }, + "light": { + "value": "rgb(72, 25, 6)" + } + }, + "cinnamon-1500": { + "prop": "--spectrum-cinnamon-1500", + "dark": { + "value": "rgb(252, 244, 239)" + }, + "light": { + "value": "rgb(52, 18, 4)" + } + }, + "cinnamon-1600": { + "prop": "--spectrum-cinnamon-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(24, 8, 2)" + } + }, + "cinnamon-200": { + "prop": "--spectrum-cinnamon-200", + "dark": { + "value": "rgb(59, 21, 5)" + }, + "light": { + "value": "rgb(249, 236, 229)" + } + }, + "cinnamon-300": { + "prop": "--spectrum-cinnamon-300", + "dark": { + "value": "rgb(79, 28, 7)" + }, + "light": { + "value": "rgb(244, 218, 203)" + } + }, + "cinnamon-400": { + "prop": "--spectrum-cinnamon-400", + "dark": { + "value": "rgb(100, 41, 15)" + }, + "light": { + "value": "rgb(237, 196, 172)" + } + }, + "cinnamon-500": { + "prop": "--spectrum-cinnamon-500", + "dark": { + "value": "rgb(122, 57, 28)" + }, + "light": { + "value": "rgb(229, 170, 136)" + } + }, + "cinnamon-600": { + "prop": "--spectrum-cinnamon-600", + "dark": { + "value": "rgb(143, 74, 40)" + }, + "light": { + "value": "rgb(212, 145, 108)" + } + }, + "cinnamon-700": { + "prop": "--spectrum-cinnamon-700", + "dark": { + "value": "rgb(163, 88, 52)" + }, + "light": { + "value": "rgb(198, 126, 88)" + } + }, + "cinnamon-800": { + "prop": "--spectrum-cinnamon-800", + "dark": { + "value": "rgb(176, 98, 59)" + }, + "light": { + "value": "rgb(184, 109, 70)" + } + }, + "cinnamon-900": { + "prop": "--spectrum-cinnamon-900", + "dark": { + "value": "rgb(192, 119, 80)" + }, + "light": { + "value": "rgb(170, 94, 56)" + } + }, + "cinnamon-background-color-default": { + "prop": "--spectrum-cinnamon-background-color-default", + "ref": "var(--spectrum-cinnamon-800)", + "light": { + "value": "rgb(170, 94, 56)" + }, + "dark": { + "value": "rgb(176, 98, 59)" + } + }, + "cinnamon-subtle-background-color-default": { + "prop": "--spectrum-cinnamon-subtle-background-color-default", + "ref": "var(--spectrum-cinnamon-300)", + "light": { + "value": "rgb(249, 236, 229)" + }, + "dark": { + "value": "rgb(79, 28, 7)" + } + }, + "cinnamon-visual-color": { + "prop": "--spectrum-cinnamon-visual-color", + "ref": "var(--spectrum-cinnamon-900)", + "light": { + "value": "rgb(184, 109, 70)" + }, + "dark": { + "value": "rgb(192, 119, 80)" + } + }, + "cjk-font": { + "prop": "--spectrum-cjk-font", + "ref": "var(--spectrum-cjk-font-family-stack)", + "value": "adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif" + }, + "cjk-font-family": { + "prop": "--spectrum-cjk-font-family", + "value": "Adobe Clean Han" + }, + "cjk-font-family-stack": { + "prop": "--spectrum-cjk-font-family-stack", + "value": "adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif" + }, + "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)" + } + }, + "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", + "ref": "0.2", + "value": "20%" + }, + "coach-mark-body-font-size": { + "prop": "--spectrum-coach-mark-body-font-size", + "ref": "var(--spectrum-body-size-s)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "17px" + } + }, + "coach-mark-body-size": { + "prop": "--spectrum-coach-mark-body-size", + "ref": "var(--spectrum-body-size-s)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "17px" + } + }, + "coach-mark-edge-to-content": { + "prop": "--spectrum-coach-mark-edge-to-content", + "desktop": { + "ref": "var(--spectrum-spacing-400)", + "value": "24px" + }, + "mobile": { + "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": "14px" + }, + "mobile": { + "value": "15px" + } + }, + "coach-mark-pagination-body-size": { + "prop": "--spectrum-coach-mark-pagination-body-size", + "ref": "var(--spectrum-body-size-xs)", + "desktop": { + "value": "14px" + }, + "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)" + } + }, + "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": "16px" + }, + "mobile": { + "value": "17px" + } + }, + "coach-mark-title-size": { + "prop": "--spectrum-coach-mark-title-size", + "ref": "var(--spectrum-title-size-s)", + "desktop": { + "value": "16px" + }, + "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)" + } + }, + "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-family-stack": { + "prop": "--spectrum-code-font-family-stack", + "value": "\"Source Code Pro\", Monaco, monospace" + }, + "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)" + } + }, + "color-area-border-opacity": { + "prop": "--spectrum-color-area-border-opacity", + "ref": "0.1", + "value": "10%" + }, + "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)" + } + }, + "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", + "ref": "0.42", + "value": "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": "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)" + } + }, + "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)" + } + }, + "color-slider-border-opacity": { + "prop": "--spectrum-color-slider-border-opacity", + "ref": "0.1", + "value": "10%" + }, + "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)" + } + }, + "color-wheel-border-opacity": { + "prop": "--spectrum-color-wheel-border-opacity", + "ref": "0.1", + "value": "10%" + }, + "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": { + "prop": "--spectrum-component-l-bold", + "ref": { + "fontFamily": "{sans-serif-font-family}", + "fontSize": "{font-size-200}", + "fontWeight": "{bold-font-weight}", + "letterSpacing": "{letter-spacing}", + "lineHeight": "{line-height-font-size-200}" + }, + "value": { + "fontFamily": "Adobe Clean Spectrum VF", + "fontSize": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "16px", + "uuid": "b36caaa3-7047-4dfb-8a84-f990a8ac3a91", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "16px", + "uuid": "b36caaa3-7047-4dfb-8a84-f990a8ac3a91" + }, + "name": "spectrum-font-size-200-sets-desktop", + "attributes": {}, + "path": ["font-size-200", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "19px", + "uuid": "7e51ff4e-2749-49d1-b9ed-75de92a73991", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "19px", + "uuid": "7e51ff4e-2749-49d1-b9ed-75de92a73991" + }, + "name": "spectrum-font-size-200-sets-mobile", + "attributes": {}, + "path": ["font-size-200", "sets", "mobile"] + } + } + }, + "fontWeight": "700", + "letterSpacing": "0em", + "lineHeight": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px", + "uuid": "efb450f9-976a-47cb-a7cc-667b9fe967a9", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px", + "uuid": "efb450f9-976a-47cb-a7cc-667b9fe967a9" + }, + "name": "spectrum-line-height-font-size-200-sets-desktop", + "attributes": {}, + "path": ["line-height-font-size-200", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "24px", + "uuid": "790dde8d-c117-4759-be93-2498297c6fa3", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "24px", + "uuid": "790dde8d-c117-4759-be93-2498297c6fa3" + }, + "name": "spectrum-line-height-font-size-200-sets-mobile", + "attributes": {}, + "path": ["line-height-font-size-200", "sets", "mobile"] + } + } + } + } + }, + "component-l-medium": { + "prop": "--spectrum-component-l-medium", + "ref": { + "fontFamily": "{sans-serif-font-family}", + "fontSize": "{font-size-200}", + "fontWeight": "{medium-font-weight}", + "letterSpacing": "{letter-spacing}", + "lineHeight": "{line-height-font-size-200}" + }, + "value": { + "fontFamily": "Adobe Clean Spectrum VF", + "fontSize": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "16px", + "uuid": "b36caaa3-7047-4dfb-8a84-f990a8ac3a91", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "16px", + "uuid": "b36caaa3-7047-4dfb-8a84-f990a8ac3a91" + }, + "name": "spectrum-font-size-200-sets-desktop", + "attributes": {}, + "path": ["font-size-200", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "19px", + "uuid": "7e51ff4e-2749-49d1-b9ed-75de92a73991", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "19px", + "uuid": "7e51ff4e-2749-49d1-b9ed-75de92a73991" + }, + "name": "spectrum-font-size-200-sets-mobile", + "attributes": {}, + "path": ["font-size-200", "sets", "mobile"] + } + } + }, + "fontWeight": "500", + "letterSpacing": "0em", + "lineHeight": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px", + "uuid": "efb450f9-976a-47cb-a7cc-667b9fe967a9", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px", + "uuid": "efb450f9-976a-47cb-a7cc-667b9fe967a9" + }, + "name": "spectrum-line-height-font-size-200-sets-desktop", + "attributes": {}, + "path": ["line-height-font-size-200", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "24px", + "uuid": "790dde8d-c117-4759-be93-2498297c6fa3", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "24px", + "uuid": "790dde8d-c117-4759-be93-2498297c6fa3" + }, + "name": "spectrum-line-height-font-size-200-sets-mobile", + "attributes": {}, + "path": ["line-height-font-size-200", "sets", "mobile"] + } + } + } + } + }, + "component-l-regular": { + "prop": "--spectrum-component-l-regular", + "ref": { + "fontFamily": "{sans-serif-font-family}", + "fontSize": "{font-size-200}", + "fontWeight": "{regular-font-weight}", + "letterSpacing": "{letter-spacing}", + "lineHeight": "{line-height-font-size-200}" + }, + "value": { + "fontFamily": "Adobe Clean Spectrum VF", + "fontSize": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "16px", + "uuid": "b36caaa3-7047-4dfb-8a84-f990a8ac3a91", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "16px", + "uuid": "b36caaa3-7047-4dfb-8a84-f990a8ac3a91" + }, + "name": "spectrum-font-size-200-sets-desktop", + "attributes": {}, + "path": ["font-size-200", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "19px", + "uuid": "7e51ff4e-2749-49d1-b9ed-75de92a73991", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "19px", + "uuid": "7e51ff4e-2749-49d1-b9ed-75de92a73991" + }, + "name": "spectrum-font-size-200-sets-mobile", + "attributes": {}, + "path": ["font-size-200", "sets", "mobile"] + } + } + }, + "fontWeight": "400", + "letterSpacing": "0em", + "lineHeight": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px", + "uuid": "efb450f9-976a-47cb-a7cc-667b9fe967a9", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px", + "uuid": "efb450f9-976a-47cb-a7cc-667b9fe967a9" + }, + "name": "spectrum-line-height-font-size-200-sets-desktop", + "attributes": {}, + "path": ["line-height-font-size-200", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "24px", + "uuid": "790dde8d-c117-4759-be93-2498297c6fa3", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "24px", + "uuid": "790dde8d-c117-4759-be93-2498297c6fa3" + }, + "name": "spectrum-line-height-font-size-200-sets-mobile", + "attributes": {}, + "path": ["line-height-font-size-200", "sets", "mobile"] + } + } + } + } + }, + "component-m-bold": { + "prop": "--spectrum-component-m-bold", + "ref": { + "fontFamily": "{sans-serif-font-family}", + "fontSize": "{font-size-100}", + "fontWeight": "{bold-font-weight}", + "letterSpacing": "{letter-spacing}", + "lineHeight": "{line-height-font-size-100}" + }, + "value": { + "fontFamily": "Adobe Clean Spectrum VF", + "fontSize": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "14px", + "uuid": "938e2d24-1e90-48f0-a596-595a69103707", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "14px", + "uuid": "938e2d24-1e90-48f0-a596-595a69103707" + }, + "name": "spectrum-font-size-100-sets-desktop", + "attributes": {}, + "path": ["font-size-100", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "17px", + "uuid": "2f9ee3cf-ccb1-4f0b-aed6-96e472fb7411", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "17px", + "uuid": "2f9ee3cf-ccb1-4f0b-aed6-96e472fb7411" + }, + "name": "spectrum-font-size-100-sets-mobile", + "attributes": {}, + "path": ["font-size-100", "sets", "mobile"] + } + } + }, + "fontWeight": "700", + "letterSpacing": "0em", + "lineHeight": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "18px", + "uuid": "0c323ed8-47c4-4fbb-bb66-a393a1e992cd", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "18px", + "uuid": "0c323ed8-47c4-4fbb-bb66-a393a1e992cd" + }, + "name": "spectrum-line-height-font-size-100-sets-desktop", + "attributes": {}, + "path": ["line-height-font-size-100", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "22px", + "uuid": "898fde6d-f477-46a6-8323-698dee558580", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "22px", + "uuid": "898fde6d-f477-46a6-8323-698dee558580" + }, + "name": "spectrum-line-height-font-size-100-sets-mobile", + "attributes": {}, + "path": ["line-height-font-size-100", "sets", "mobile"] + } + } + } + } + }, + "component-m-medium": { + "prop": "--spectrum-component-m-medium", + "ref": { + "fontFamily": "{sans-serif-font-family}", + "fontSize": "{font-size-100}", + "fontWeight": "{medium-font-weight}", + "letterSpacing": "{letter-spacing}", + "lineHeight": "{line-height-font-size-100}" + }, + "value": { + "fontFamily": "Adobe Clean Spectrum VF", + "fontSize": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "14px", + "uuid": "938e2d24-1e90-48f0-a596-595a69103707", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "14px", + "uuid": "938e2d24-1e90-48f0-a596-595a69103707" + }, + "name": "spectrum-font-size-100-sets-desktop", + "attributes": {}, + "path": ["font-size-100", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "17px", + "uuid": "2f9ee3cf-ccb1-4f0b-aed6-96e472fb7411", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "17px", + "uuid": "2f9ee3cf-ccb1-4f0b-aed6-96e472fb7411" + }, + "name": "spectrum-font-size-100-sets-mobile", + "attributes": {}, + "path": ["font-size-100", "sets", "mobile"] + } + } + }, + "fontWeight": "500", + "letterSpacing": "0em", + "lineHeight": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "18px", + "uuid": "0c323ed8-47c4-4fbb-bb66-a393a1e992cd", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "18px", + "uuid": "0c323ed8-47c4-4fbb-bb66-a393a1e992cd" + }, + "name": "spectrum-line-height-font-size-100-sets-desktop", + "attributes": {}, + "path": ["line-height-font-size-100", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "22px", + "uuid": "898fde6d-f477-46a6-8323-698dee558580", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "22px", + "uuid": "898fde6d-f477-46a6-8323-698dee558580" + }, + "name": "spectrum-line-height-font-size-100-sets-mobile", + "attributes": {}, + "path": ["line-height-font-size-100", "sets", "mobile"] + } + } + } + } + }, + "component-m-regular": { + "prop": "--spectrum-component-m-regular", + "ref": { + "fontFamily": "{sans-serif-font-family}", + "fontSize": "{font-size-100}", + "fontWeight": "{regular-font-weight}", + "letterSpacing": "{letter-spacing}", + "lineHeight": "{line-height-font-size-100}" + }, + "value": { + "fontFamily": "Adobe Clean Spectrum VF", + "fontSize": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "14px", + "uuid": "938e2d24-1e90-48f0-a596-595a69103707", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "14px", + "uuid": "938e2d24-1e90-48f0-a596-595a69103707" + }, + "name": "spectrum-font-size-100-sets-desktop", + "attributes": {}, + "path": ["font-size-100", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "17px", + "uuid": "2f9ee3cf-ccb1-4f0b-aed6-96e472fb7411", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "17px", + "uuid": "2f9ee3cf-ccb1-4f0b-aed6-96e472fb7411" + }, + "name": "spectrum-font-size-100-sets-mobile", + "attributes": {}, + "path": ["font-size-100", "sets", "mobile"] + } + } + }, + "fontWeight": "400", + "letterSpacing": "0em", + "lineHeight": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "18px", + "uuid": "0c323ed8-47c4-4fbb-bb66-a393a1e992cd", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "18px", + "uuid": "0c323ed8-47c4-4fbb-bb66-a393a1e992cd" + }, + "name": "spectrum-line-height-font-size-100-sets-desktop", + "attributes": {}, + "path": ["line-height-font-size-100", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "22px", + "uuid": "898fde6d-f477-46a6-8323-698dee558580", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "22px", + "uuid": "898fde6d-f477-46a6-8323-698dee558580" + }, + "name": "spectrum-line-height-font-size-100-sets-mobile", + "attributes": {}, + "path": ["line-height-font-size-100", "sets", "mobile"] + } + } + } + } + }, + "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": { + "prop": "--spectrum-component-s-bold", + "ref": { + "fontFamily": "{sans-serif-font-family}", + "fontSize": "{font-size-75}", + "fontWeight": "{bold-font-weight}", + "letterSpacing": "{letter-spacing}", + "lineHeight": "{line-height-font-size-75}" + }, + "value": { + "fontFamily": "Adobe Clean Spectrum VF", + "fontSize": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "12px", + "uuid": "55d90327-8cc9-4d4f-891f-9d42751d989a", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "12px", + "uuid": "55d90327-8cc9-4d4f-891f-9d42751d989a" + }, + "name": "spectrum-font-size-75-sets-desktop", + "attributes": {}, + "path": ["font-size-75", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "15px", + "uuid": "07e1c2a8-3925-4d71-8fae-3486483ff44c", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "15px", + "uuid": "07e1c2a8-3925-4d71-8fae-3486483ff44c" + }, + "name": "spectrum-font-size-75-sets-mobile", + "attributes": {}, + "path": ["font-size-75", "sets", "mobile"] + } + } + }, + "fontWeight": "700", + "letterSpacing": "0em", + "lineHeight": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px", + "uuid": "8e85a017-2c5d-4a52-92df-c0426e00c3c3", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px", + "uuid": "8e85a017-2c5d-4a52-92df-c0426e00c3c3" + }, + "name": "spectrum-line-height-font-size-75-sets-desktop", + "attributes": {}, + "path": ["line-height-font-size-75", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px", + "uuid": "25be5bf4-e450-4a58-89e2-a04e02b7b78b", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px", + "uuid": "25be5bf4-e450-4a58-89e2-a04e02b7b78b" + }, + "name": "spectrum-line-height-font-size-75-sets-mobile", + "attributes": {}, + "path": ["line-height-font-size-75", "sets", "mobile"] + } + } + } + } + }, + "component-s-medium": { + "prop": "--spectrum-component-s-medium", + "ref": { + "fontFamily": "{sans-serif-font-family}", + "fontSize": "{font-size-75}", + "fontWeight": "{medium-font-weight}", + "letterSpacing": "{letter-spacing}", + "lineHeight": "{line-height-font-size-75}" + }, + "value": { + "fontFamily": "Adobe Clean Spectrum VF", + "fontSize": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "12px", + "uuid": "55d90327-8cc9-4d4f-891f-9d42751d989a", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "12px", + "uuid": "55d90327-8cc9-4d4f-891f-9d42751d989a" + }, + "name": "spectrum-font-size-75-sets-desktop", + "attributes": {}, + "path": ["font-size-75", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "15px", + "uuid": "07e1c2a8-3925-4d71-8fae-3486483ff44c", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "15px", + "uuid": "07e1c2a8-3925-4d71-8fae-3486483ff44c" + }, + "name": "spectrum-font-size-75-sets-mobile", + "attributes": {}, + "path": ["font-size-75", "sets", "mobile"] + } + } + }, + "fontWeight": "500", + "letterSpacing": "0em", + "lineHeight": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px", + "uuid": "8e85a017-2c5d-4a52-92df-c0426e00c3c3", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px", + "uuid": "8e85a017-2c5d-4a52-92df-c0426e00c3c3" + }, + "name": "spectrum-line-height-font-size-75-sets-desktop", + "attributes": {}, + "path": ["line-height-font-size-75", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px", + "uuid": "25be5bf4-e450-4a58-89e2-a04e02b7b78b", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px", + "uuid": "25be5bf4-e450-4a58-89e2-a04e02b7b78b" + }, + "name": "spectrum-line-height-font-size-75-sets-mobile", + "attributes": {}, + "path": ["line-height-font-size-75", "sets", "mobile"] + } + } + } + } + }, + "component-s-regular": { + "prop": "--spectrum-component-s-regular", + "ref": { + "fontFamily": "{sans-serif-font-family}", + "fontSize": "{font-size-75}", + "fontWeight": "{regular-font-weight}", + "letterSpacing": "{letter-spacing}", + "lineHeight": "{line-height-font-size-75}" + }, + "value": { + "fontFamily": "Adobe Clean Spectrum VF", + "fontSize": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "12px", + "uuid": "55d90327-8cc9-4d4f-891f-9d42751d989a", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "12px", + "uuid": "55d90327-8cc9-4d4f-891f-9d42751d989a" + }, + "name": "spectrum-font-size-75-sets-desktop", + "attributes": {}, + "path": ["font-size-75", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "15px", + "uuid": "07e1c2a8-3925-4d71-8fae-3486483ff44c", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "15px", + "uuid": "07e1c2a8-3925-4d71-8fae-3486483ff44c" + }, + "name": "spectrum-font-size-75-sets-mobile", + "attributes": {}, + "path": ["font-size-75", "sets", "mobile"] + } + } + }, + "fontWeight": "400", + "letterSpacing": "0em", + "lineHeight": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px", + "uuid": "8e85a017-2c5d-4a52-92df-c0426e00c3c3", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px", + "uuid": "8e85a017-2c5d-4a52-92df-c0426e00c3c3" + }, + "name": "spectrum-line-height-font-size-75-sets-desktop", + "attributes": {}, + "path": ["line-height-font-size-75", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px", + "uuid": "25be5bf4-e450-4a58-89e2-a04e02b7b78b", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px", + "uuid": "25be5bf4-e450-4a58-89e2-a04e02b7b78b" + }, + "name": "spectrum-line-height-font-size-75-sets-mobile", + "attributes": {}, + "path": ["line-height-font-size-75", "sets", "mobile"] + } + } + } + } + }, + "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": { + "prop": "--spectrum-component-xl-bold", + "ref": { + "fontFamily": "{sans-serif-font-family}", + "fontSize": "{font-size-300}", + "fontWeight": "{bold-font-weight}", + "letterSpacing": "{letter-spacing}", + "lineHeight": "{line-height-font-size-300}" + }, + "value": { + "fontFamily": "Adobe Clean Spectrum VF", + "fontSize": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "18px", + "uuid": "3dc9b6a4-77e3-484b-be8c-fbc2f50e6175", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "18px", + "uuid": "3dc9b6a4-77e3-484b-be8c-fbc2f50e6175" + }, + "name": "spectrum-font-size-300-sets-desktop", + "attributes": {}, + "path": ["font-size-300", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "22px", + "uuid": "9b9a7175-dcca-43aa-98ce-f1c3e4eefda7", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "22px", + "uuid": "9b9a7175-dcca-43aa-98ce-f1c3e4eefda7" + }, + "name": "spectrum-font-size-300-sets-mobile", + "attributes": {}, + "path": ["font-size-300", "sets", "mobile"] + } + } + }, + "fontWeight": "700", + "letterSpacing": "0em", + "lineHeight": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "22px", + "uuid": "52e64384-f918-4415-8d02-da3af639890f", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "22px", + "uuid": "52e64384-f918-4415-8d02-da3af639890f" + }, + "name": "spectrum-line-height-font-size-300-sets-desktop", + "attributes": {}, + "path": ["line-height-font-size-300", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "26px", + "uuid": "80beb678-586c-4277-9db0-1ab373ec8f80", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "26px", + "uuid": "80beb678-586c-4277-9db0-1ab373ec8f80" + }, + "name": "spectrum-line-height-font-size-300-sets-mobile", + "attributes": {}, + "path": ["line-height-font-size-300", "sets", "mobile"] + } + } + } + } + }, + "component-xl-medium": { + "prop": "--spectrum-component-xl-medium", + "ref": { + "fontFamily": "{sans-serif-font-family}", + "fontSize": "{font-size-300}", + "fontWeight": "{medium-font-weight}", + "letterSpacing": "{letter-spacing}", + "lineHeight": "{line-height-font-size-300}" + }, + "value": { + "fontFamily": "Adobe Clean Spectrum VF", + "fontSize": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "18px", + "uuid": "3dc9b6a4-77e3-484b-be8c-fbc2f50e6175", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "18px", + "uuid": "3dc9b6a4-77e3-484b-be8c-fbc2f50e6175" + }, + "name": "spectrum-font-size-300-sets-desktop", + "attributes": {}, + "path": ["font-size-300", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "22px", + "uuid": "9b9a7175-dcca-43aa-98ce-f1c3e4eefda7", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "22px", + "uuid": "9b9a7175-dcca-43aa-98ce-f1c3e4eefda7" + }, + "name": "spectrum-font-size-300-sets-mobile", + "attributes": {}, + "path": ["font-size-300", "sets", "mobile"] + } + } + }, + "fontWeight": "500", + "letterSpacing": "0em", + "lineHeight": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "22px", + "uuid": "52e64384-f918-4415-8d02-da3af639890f", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "22px", + "uuid": "52e64384-f918-4415-8d02-da3af639890f" + }, + "name": "spectrum-line-height-font-size-300-sets-desktop", + "attributes": {}, + "path": ["line-height-font-size-300", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "26px", + "uuid": "80beb678-586c-4277-9db0-1ab373ec8f80", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "26px", + "uuid": "80beb678-586c-4277-9db0-1ab373ec8f80" + }, + "name": "spectrum-line-height-font-size-300-sets-mobile", + "attributes": {}, + "path": ["line-height-font-size-300", "sets", "mobile"] + } + } + } + } + }, + "component-xl-regular": { + "prop": "--spectrum-component-xl-regular", + "ref": { + "fontFamily": "{sans-serif-font-family}", + "fontSize": "{font-size-300}", + "fontWeight": "{regular-font-weight}", + "letterSpacing": "{letter-spacing}", + "lineHeight": "{line-height-font-size-300}" + }, + "value": { + "fontFamily": "Adobe Clean Spectrum VF", + "fontSize": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "18px", + "uuid": "3dc9b6a4-77e3-484b-be8c-fbc2f50e6175", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "18px", + "uuid": "3dc9b6a4-77e3-484b-be8c-fbc2f50e6175" + }, + "name": "spectrum-font-size-300-sets-desktop", + "attributes": {}, + "path": ["font-size-300", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "22px", + "uuid": "9b9a7175-dcca-43aa-98ce-f1c3e4eefda7", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "22px", + "uuid": "9b9a7175-dcca-43aa-98ce-f1c3e4eefda7" + }, + "name": "spectrum-font-size-300-sets-mobile", + "attributes": {}, + "path": ["font-size-300", "sets", "mobile"] + } + } + }, + "fontWeight": "400", + "letterSpacing": "0em", + "lineHeight": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "22px", + "uuid": "52e64384-f918-4415-8d02-da3af639890f", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "22px", + "uuid": "52e64384-f918-4415-8d02-da3af639890f" + }, + "name": "spectrum-line-height-font-size-300-sets-desktop", + "attributes": {}, + "path": ["line-height-font-size-300", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "26px", + "uuid": "80beb678-586c-4277-9db0-1ab373ec8f80", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "26px", + "uuid": "80beb678-586c-4277-9db0-1ab373ec8f80" + }, + "name": "spectrum-line-height-font-size-300-sets-mobile", + "attributes": {}, + "path": ["line-height-font-size-300", "sets", "mobile"] + } + } + } + } + }, + "component-xs-bold": { + "prop": "--spectrum-component-xs-bold", + "ref": { + "fontFamily": "{sans-serif-font-family}", + "fontSize": "{font-size-50}", + "fontWeight": "{bold-font-weight}", + "letterSpacing": "{letter-spacing}", + "lineHeight": "{line-height-font-size-50}" + }, + "value": { + "fontFamily": "Adobe Clean Spectrum VF", + "fontSize": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "11px", + "uuid": "8593a326-de37-414d-b3f6-5254b41dce07", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "11px", + "uuid": "8593a326-de37-414d-b3f6-5254b41dce07" + }, + "name": "spectrum-font-size-50-sets-desktop", + "attributes": {}, + "path": ["font-size-50", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "13px", + "uuid": "b7561ce1-e12e-4aed-9766-181f7eca309e", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "13px", + "uuid": "b7561ce1-e12e-4aed-9766-181f7eca309e" + }, + "name": "spectrum-font-size-50-sets-mobile", + "attributes": {}, + "path": ["font-size-50", "sets", "mobile"] + } + } + }, + "fontWeight": "700", + "letterSpacing": "0em", + "lineHeight": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "14px", + "uuid": "3696e3bf-2b72-4b08-9893-ac618f904771", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "14px", + "uuid": "3696e3bf-2b72-4b08-9893-ac618f904771" + }, + "name": "spectrum-line-height-font-size-50-sets-desktop", + "attributes": {}, + "path": ["line-height-font-size-50", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px", + "uuid": "242bf245-e7f0-4826-bcec-e19c0ed5e93f", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px", + "uuid": "242bf245-e7f0-4826-bcec-e19c0ed5e93f" + }, + "name": "spectrum-line-height-font-size-50-sets-mobile", + "attributes": {}, + "path": ["line-height-font-size-50", "sets", "mobile"] + } + } + } + } + }, + "component-xs-medium": { + "prop": "--spectrum-component-xs-medium", + "ref": { + "fontFamily": "{sans-serif-font-family}", + "fontSize": "{font-size-50}", + "fontWeight": "{medium-font-weight}", + "letterSpacing": "{letter-spacing}", + "lineHeight": "{line-height-font-size-50}" + }, + "value": { + "fontFamily": "Adobe Clean Spectrum VF", + "fontSize": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "11px", + "uuid": "8593a326-de37-414d-b3f6-5254b41dce07", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "11px", + "uuid": "8593a326-de37-414d-b3f6-5254b41dce07" + }, + "name": "spectrum-font-size-50-sets-desktop", + "attributes": {}, + "path": ["font-size-50", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "13px", + "uuid": "b7561ce1-e12e-4aed-9766-181f7eca309e", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "13px", + "uuid": "b7561ce1-e12e-4aed-9766-181f7eca309e" + }, + "name": "spectrum-font-size-50-sets-mobile", + "attributes": {}, + "path": ["font-size-50", "sets", "mobile"] + } + } + }, + "fontWeight": "500", + "letterSpacing": "0em", + "lineHeight": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "14px", + "uuid": "3696e3bf-2b72-4b08-9893-ac618f904771", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "14px", + "uuid": "3696e3bf-2b72-4b08-9893-ac618f904771" + }, + "name": "spectrum-line-height-font-size-50-sets-desktop", + "attributes": {}, + "path": ["line-height-font-size-50", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px", + "uuid": "242bf245-e7f0-4826-bcec-e19c0ed5e93f", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px", + "uuid": "242bf245-e7f0-4826-bcec-e19c0ed5e93f" + }, + "name": "spectrum-line-height-font-size-50-sets-mobile", + "attributes": {}, + "path": ["line-height-font-size-50", "sets", "mobile"] + } + } + } + } + }, + "component-xs-regular": { + "prop": "--spectrum-component-xs-regular", + "ref": { + "fontFamily": "{sans-serif-font-family}", + "fontSize": "{font-size-50}", + "fontWeight": "{regular-font-weight}", + "letterSpacing": "{letter-spacing}", + "lineHeight": "{line-height-font-size-50}" + }, + "value": { + "fontFamily": "Adobe Clean Spectrum VF", + "fontSize": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "11px", + "uuid": "8593a326-de37-414d-b3f6-5254b41dce07", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "11px", + "uuid": "8593a326-de37-414d-b3f6-5254b41dce07" + }, + "name": "spectrum-font-size-50-sets-desktop", + "attributes": {}, + "path": ["font-size-50", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "13px", + "uuid": "b7561ce1-e12e-4aed-9766-181f7eca309e", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/font-size.json", + "value": "13px", + "uuid": "b7561ce1-e12e-4aed-9766-181f7eca309e" + }, + "name": "spectrum-font-size-50-sets-mobile", + "attributes": {}, + "path": ["font-size-50", "sets", "mobile"] + } + } + }, + "fontWeight": "400", + "letterSpacing": "0em", + "lineHeight": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "14px", + "uuid": "3696e3bf-2b72-4b08-9893-ac618f904771", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "14px", + "uuid": "3696e3bf-2b72-4b08-9893-ac618f904771" + }, + "name": "spectrum-line-height-font-size-50-sets-desktop", + "attributes": {}, + "path": ["line-height-font-size-50", "sets", "desktop"] + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px", + "uuid": "242bf245-e7f0-4826-bcec-e19c0ed5e93f", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/typography.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px", + "uuid": "242bf245-e7f0-4826-bcec-e19c0ed5e93f" + }, + "name": "spectrum-line-height-font-size-50-sets-mobile", + "attributes": {}, + "path": ["line-height-font-size-50", "sets", "mobile"] + } + } + } + } + }, + "contextual-help-body-font-size": { + "prop": "--spectrum-contextual-help-body-font-size", + "ref": "var(--spectrum-body-size-xs)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "15px" + } + }, + "contextual-help-body-size": { + "prop": "--spectrum-contextual-help-body-size", + "ref": "var(--spectrum-body-size-xs)", + "desktop": { + "value": "14px" + }, + "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": "16px" + }, + "mobile": { + "value": "17px" + } + }, + "contextual-help-title-size": { + "prop": "--spectrum-contextual-help-title-size", + "ref": "var(--spectrum-title-size-s)", + "desktop": { + "value": "16px" + }, + "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)" + } + }, + "cyan-1000": { + "prop": "--spectrum-cyan-1000", + "light": { + "value": "rgb(4, 102, 145)" + }, + "dark": { + "value": "rgb(38, 159, 244)" + } + }, + "cyan-1100": { + "prop": "--spectrum-cyan-1100", + "light": { + "value": "rgb(0, 87, 121)" + }, + "dark": { + "value": "rgb(63, 177, 255)" + } + }, + "cyan-1200": { + "prop": "--spectrum-cyan-1200", + "light": { + "value": "rgb(0, 71, 98)" + }, + "dark": { + "value": "rgb(107, 199, 255)" + } + }, + "cyan-1300": { + "prop": "--spectrum-cyan-1300", + "light": { + "value": "rgb(0, 57, 78)" + }, + "dark": { + "value": "rgb(152, 219, 255)" + } + }, + "cyan-1400": { + "prop": "--spectrum-cyan-1400", + "light": { + "value": "rgb(0, 43, 59)" + }, + "dark": { + "value": "rgb(195, 236, 252)" + } + }, + "cyan-1500": { + "prop": "--spectrum-cyan-1500", + "dark": { + "value": "rgb(230, 248, 253)" + }, + "light": { + "value": "rgb(0, 31, 43)" + } + }, + "cyan-1600": { + "prop": "--spectrum-cyan-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 14, 20)" + } + }, + "cyan-200": { + "prop": "--spectrum-cyan-200", + "light": { + "value": "rgb(217, 244, 253)" + }, + "dark": { + "value": "rgb(0, 36, 49)" + } + }, + "cyan-300": { + "prop": "--spectrum-cyan-300", + "light": { + "value": "rgb(183, 231, 252)" + }, + "dark": { + "value": "rgb(0, 48, 65)" + } + }, + "cyan-400": { + "prop": "--spectrum-cyan-400", + "light": { + "value": "rgb(138, 213, 255)" + }, + "dark": { + "value": "rgb(0, 64, 88)" + } + }, + "cyan-500": { + "prop": "--spectrum-cyan-500", + "light": { + "value": "rgb(92, 192, 255)" + }, + "dark": { + "value": "rgb(0, 82, 113)" + } + }, + "cyan-600": { + "prop": "--spectrum-cyan-600", + "light": { + "value": "rgb(48, 167, 254)" + }, + "dark": { + "value": "rgb(3, 99, 140)" + } + }, + "cyan-700": { + "prop": "--spectrum-cyan-700", + "light": { + "value": "rgb(29, 149, 231)" + }, + "dark": { + "value": "rgb(8, 115, 168)" + } + }, + "cyan-800": { + "prop": "--spectrum-cyan-800", + "light": { + "value": "rgb(18, 134, 205)" + }, + "dark": { + "value": "rgb(13, 125, 186)" + } + }, + "cyan-900": { + "prop": "--spectrum-cyan-900", + "light": { + "value": "rgb(11, 120, 179)" + }, + "dark": { + "value": "rgb(24, 142, 220)" + } + }, + "cyan-background-color-default": { + "prop": "--spectrum-cyan-background-color-default", + "ref": "var(--spectrum-cyan-800)", + "light": { + "value": "rgb(11, 120, 179)" + }, + "dark": { + "value": "rgb(13, 125, 186)" + } + }, + "cyan-subtle-background-color-default": { + "prop": "--spectrum-cyan-subtle-background-color-default", + "ref": "var(--spectrum-cyan-300)", + "light": { + "value": "rgb(217, 244, 253)" + }, + "dark": { + "value": "rgb(0, 48, 65)" + } + }, + "cyan-visual-color": { + "prop": "--spectrum-cyan-visual-color", + "ref": "var(--spectrum-cyan-900)", + "light": { + "value": "rgb(48, 167, 254)" + }, + "dark": { + "value": "rgb(24, 142, 220)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "drop-shadow-dragged": { + "prop": "--spectrum-drop-shadow-dragged", + "ref": [ + { + "x": "0px", + "y": "12px", + "blur": "16px", + "spread": "0px", + "color": "{drop-shadow-ambient-color}" + }, + { + "x": "0px", + "y": "6px", + "blur": "8px", + "spread": "0px", + "color": "{drop-shadow-transition-color}" + }, + { + "x": "0px", + "y": "0px", + "blur": "6px", + "spread": "0px", + "color": "{drop-shadow-dragged-key-color}" + } + ], + "value": [ + { + "x": "0px", + "y": "12px", + "blur": "16px", + "spread": "0px", + "color": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "edc729e0-5998-42ac-bf4a-fdc4bfabd771", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "edc729e0-5998-42ac-bf4a-fdc4bfabd771" + }, + "name": "spectrum-drop-shadow-ambient-color-sets-light", + "attributes": {}, + "path": ["drop-shadow-ambient-color", "sets", "light"] + }, + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.24)", + "uuid": "3dd12e5d-91b3-4466-94db-4c2089238661", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.24)", + "uuid": "3dd12e5d-91b3-4466-94db-4c2089238661" + }, + "name": "spectrum-drop-shadow-ambient-color-sets-dark", + "attributes": {}, + "path": ["drop-shadow-ambient-color", "sets", "dark"] + }, + "wireframe": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "df3a555d-3f22-4499-9269-4311c4b657e0", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "df3a555d-3f22-4499-9269-4311c4b657e0" + }, + "name": "spectrum-drop-shadow-ambient-color-sets-wireframe", + "attributes": {}, + "path": ["drop-shadow-ambient-color", "sets", "wireframe"] + } + } + } + }, + { + "x": "0px", + "y": "6px", + "blur": "8px", + "spread": "0px", + "color": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.04)", + "uuid": "0fe5c2a3-3f07-490d-bfe2-95dffa6a11c0", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.04)", + "uuid": "0fe5c2a3-3f07-490d-bfe2-95dffa6a11c0" + }, + "name": "spectrum-drop-shadow-transition-color-sets-light", + "attributes": {}, + "path": ["drop-shadow-transition-color", "sets", "light"] + }, + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.12)", + "uuid": "aca70da5-3d6d-4d02-b23b-9e2f8374f6e6", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.12)", + "uuid": "aca70da5-3d6d-4d02-b23b-9e2f8374f6e6" + }, + "name": "spectrum-drop-shadow-transition-color-sets-dark", + "attributes": {}, + "path": ["drop-shadow-transition-color", "sets", "dark"] + }, + "wireframe": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.04)", + "uuid": "52d1ce61-a695-439c-80a5-3978505aa04d", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.04)", + "uuid": "52d1ce61-a695-439c-80a5-3978505aa04d" + }, + "name": "spectrum-drop-shadow-transition-color-sets-wireframe", + "attributes": {}, + "path": ["drop-shadow-transition-color", "sets", "wireframe"] + } + } + } + }, + { + "x": "0px", + "y": "0px", + "blur": "6px", + "spread": "0px", + "color": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.16)", + "uuid": "5973a140-c745-4835-897c-f6648351f182", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.16)", + "uuid": "5973a140-c745-4835-897c-f6648351f182" + }, + "name": "spectrum-drop-shadow-dragged-key-color-sets-light", + "attributes": {}, + "path": ["drop-shadow-dragged-key-color", "sets", "light"] + }, + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.48)", + "uuid": "73e17173-3695-4dcd-b37a-1714bb45a696", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.48)", + "uuid": "73e17173-3695-4dcd-b37a-1714bb45a696" + }, + "name": "spectrum-drop-shadow-dragged-key-color-sets-dark", + "attributes": {}, + "path": ["drop-shadow-dragged-key-color", "sets", "dark"] + }, + "wireframe": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.16)", + "uuid": "0b9777dc-6689-4b97-b7a6-d113272f4576", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.16)", + "uuid": "0b9777dc-6689-4b97-b7a6-d113272f4576" + }, + "name": "spectrum-drop-shadow-dragged-key-color-sets-wireframe", + "attributes": {}, + "path": ["drop-shadow-dragged-key-color", "sets", "wireframe"] + } + } + } + } + ] + }, + "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)" + } + }, + "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)" + } + }, + "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", + "ref": [ + { + "x": "0px", + "y": "4px", + "blur": "12px", + "spread": "0px", + "color": "{drop-shadow-ambient-color}" + }, + { + "x": "0px", + "y": "2px", + "blur": "6px", + "spread": "0px", + "color": "{drop-shadow-transition-color}" + }, + { + "x": "0px", + "y": "0px", + "blur": "2px", + "spread": "0px", + "color": "{drop-shadow-elevated-key-color}" + } + ], + "value": [ + { + "x": "0px", + "y": "4px", + "blur": "12px", + "spread": "0px", + "color": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "edc729e0-5998-42ac-bf4a-fdc4bfabd771", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "edc729e0-5998-42ac-bf4a-fdc4bfabd771" + }, + "name": "spectrum-drop-shadow-ambient-color-sets-light", + "attributes": {}, + "path": ["drop-shadow-ambient-color", "sets", "light"] + }, + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.24)", + "uuid": "3dd12e5d-91b3-4466-94db-4c2089238661", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.24)", + "uuid": "3dd12e5d-91b3-4466-94db-4c2089238661" + }, + "name": "spectrum-drop-shadow-ambient-color-sets-dark", + "attributes": {}, + "path": ["drop-shadow-ambient-color", "sets", "dark"] + }, + "wireframe": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "df3a555d-3f22-4499-9269-4311c4b657e0", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "df3a555d-3f22-4499-9269-4311c4b657e0" + }, + "name": "spectrum-drop-shadow-ambient-color-sets-wireframe", + "attributes": {}, + "path": ["drop-shadow-ambient-color", "sets", "wireframe"] + } + } + } + }, + { + "x": "0px", + "y": "2px", + "blur": "6px", + "spread": "0px", + "color": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.04)", + "uuid": "0fe5c2a3-3f07-490d-bfe2-95dffa6a11c0", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.04)", + "uuid": "0fe5c2a3-3f07-490d-bfe2-95dffa6a11c0" + }, + "name": "spectrum-drop-shadow-transition-color-sets-light", + "attributes": {}, + "path": ["drop-shadow-transition-color", "sets", "light"] + }, + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.12)", + "uuid": "aca70da5-3d6d-4d02-b23b-9e2f8374f6e6", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.12)", + "uuid": "aca70da5-3d6d-4d02-b23b-9e2f8374f6e6" + }, + "name": "spectrum-drop-shadow-transition-color-sets-dark", + "attributes": {}, + "path": ["drop-shadow-transition-color", "sets", "dark"] + }, + "wireframe": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.04)", + "uuid": "52d1ce61-a695-439c-80a5-3978505aa04d", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.04)", + "uuid": "52d1ce61-a695-439c-80a5-3978505aa04d" + }, + "name": "spectrum-drop-shadow-transition-color-sets-wireframe", + "attributes": {}, + "path": ["drop-shadow-transition-color", "sets", "wireframe"] + } + } + } + }, + { + "x": "0px", + "y": "0px", + "blur": "2px", + "spread": "0px", + "color": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.12)", + "uuid": "6a3837b8-70b6-44b1-a439-551a6e2f75cd", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.12)", + "uuid": "6a3837b8-70b6-44b1-a439-551a6e2f75cd" + }, + "name": "spectrum-drop-shadow-elevated-key-color-sets-light", + "attributes": {}, + "path": ["drop-shadow-elevated-key-color", "sets", "light"] + }, + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.36)", + "uuid": "e78e9604-1919-4b7d-8338-5900bdbde89f", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.36)", + "uuid": "e78e9604-1919-4b7d-8338-5900bdbde89f" + }, + "name": "spectrum-drop-shadow-elevated-key-color-sets-dark", + "attributes": {}, + "path": ["drop-shadow-elevated-key-color", "sets", "dark"] + }, + "wireframe": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.12)", + "uuid": "ba2ff175-d2d0-4a53-a070-57c41283cb50", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.12)", + "uuid": "ba2ff175-d2d0-4a53-a070-57c41283cb50" + }, + "name": "spectrum-drop-shadow-elevated-key-color-sets-wireframe", + "attributes": {}, + "path": ["drop-shadow-elevated-key-color", "sets", "wireframe"] + } + } + } + } + ] + }, + "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)" + } + }, + "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)" + } + }, + "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", + "ref": [ + { + "x": "0px", + "y": "2px", + "blur": "8px", + "spread": "0px", + "color": "{drop-shadow-ambient-color}" + }, + { + "x": "0px", + "y": "1px", + "blur": "4px", + "spread": "0px", + "color": "{drop-shadow-transition-color}" + }, + { + "x": "0px", + "y": "0px", + "blur": "1px", + "spread": "0px", + "color": "{drop-shadow-emphasized-key-color}" + } + ], + "value": [ + { + "x": "0px", + "y": "2px", + "blur": "8px", + "spread": "0px", + "color": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "edc729e0-5998-42ac-bf4a-fdc4bfabd771", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "edc729e0-5998-42ac-bf4a-fdc4bfabd771" + }, + "name": "spectrum-drop-shadow-ambient-color-sets-light", + "attributes": {}, + "path": ["drop-shadow-ambient-color", "sets", "light"] + }, + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.24)", + "uuid": "3dd12e5d-91b3-4466-94db-4c2089238661", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.24)", + "uuid": "3dd12e5d-91b3-4466-94db-4c2089238661" + }, + "name": "spectrum-drop-shadow-ambient-color-sets-dark", + "attributes": {}, + "path": ["drop-shadow-ambient-color", "sets", "dark"] + }, + "wireframe": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "df3a555d-3f22-4499-9269-4311c4b657e0", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "df3a555d-3f22-4499-9269-4311c4b657e0" + }, + "name": "spectrum-drop-shadow-ambient-color-sets-wireframe", + "attributes": {}, + "path": ["drop-shadow-ambient-color", "sets", "wireframe"] + } + } + } + }, + { + "x": "0px", + "y": "1px", + "blur": "4px", + "spread": "0px", + "color": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.04)", + "uuid": "0fe5c2a3-3f07-490d-bfe2-95dffa6a11c0", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.04)", + "uuid": "0fe5c2a3-3f07-490d-bfe2-95dffa6a11c0" + }, + "name": "spectrum-drop-shadow-transition-color-sets-light", + "attributes": {}, + "path": ["drop-shadow-transition-color", "sets", "light"] + }, + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.12)", + "uuid": "aca70da5-3d6d-4d02-b23b-9e2f8374f6e6", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.12)", + "uuid": "aca70da5-3d6d-4d02-b23b-9e2f8374f6e6" + }, + "name": "spectrum-drop-shadow-transition-color-sets-dark", + "attributes": {}, + "path": ["drop-shadow-transition-color", "sets", "dark"] + }, + "wireframe": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.04)", + "uuid": "52d1ce61-a695-439c-80a5-3978505aa04d", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.04)", + "uuid": "52d1ce61-a695-439c-80a5-3978505aa04d" + }, + "name": "spectrum-drop-shadow-transition-color-sets-wireframe", + "attributes": {}, + "path": ["drop-shadow-transition-color", "sets", "wireframe"] + } + } + } + }, + { + "x": "0px", + "y": "0px", + "blur": "1px", + "spread": "0px", + "color": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "c6fd25ed-1d86-4b7b-aa56-9ac371b2bbe6", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "c6fd25ed-1d86-4b7b-aa56-9ac371b2bbe6" + }, + "name": "spectrum-drop-shadow-emphasized-key-color-sets-light", + "attributes": {}, + "path": ["drop-shadow-emphasized-key-color", "sets", "light"] + }, + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.24)", + "uuid": "7a9a257f-538c-4e1b-a3f4-a652e59582c9", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.24)", + "uuid": "7a9a257f-538c-4e1b-a3f4-a652e59582c9" + }, + "name": "spectrum-drop-shadow-emphasized-key-color-sets-dark", + "attributes": {}, + "path": ["drop-shadow-emphasized-key-color", "sets", "dark"] + }, + "wireframe": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "5e946c9e-6b78-43f7-b8fa-74a3dbd2cc48", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "5e946c9e-6b78-43f7-b8fa-74a3dbd2cc48" + }, + "name": "spectrum-drop-shadow-emphasized-key-color-sets-wireframe", + "attributes": {}, + "path": ["drop-shadow-emphasized-key-color", "sets", "wireframe"] + } + } + } + } + ] + }, + "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)" + } + }, + "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", + "ref": [ + { + "x": "0px", + "y": "4px", + "blur": "12px", + "spread": "0px", + "color": "{drop-shadow-ambient-color}" + }, + { + "x": "0px", + "y": "2px", + "blur": "6px", + "spread": "0px", + "color": "{drop-shadow-transition-color}" + }, + { + "x": "0px", + "y": "0px", + "blur": "2px", + "spread": "0px", + "color": "{drop-shadow-emphasized-key-color}" + } + ], + "value": [ + { + "x": "0px", + "y": "4px", + "blur": "12px", + "spread": "0px", + "color": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "edc729e0-5998-42ac-bf4a-fdc4bfabd771", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "edc729e0-5998-42ac-bf4a-fdc4bfabd771" + }, + "name": "spectrum-drop-shadow-ambient-color-sets-light", + "attributes": {}, + "path": ["drop-shadow-ambient-color", "sets", "light"] + }, + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.24)", + "uuid": "3dd12e5d-91b3-4466-94db-4c2089238661", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.24)", + "uuid": "3dd12e5d-91b3-4466-94db-4c2089238661" + }, + "name": "spectrum-drop-shadow-ambient-color-sets-dark", + "attributes": {}, + "path": ["drop-shadow-ambient-color", "sets", "dark"] + }, + "wireframe": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "df3a555d-3f22-4499-9269-4311c4b657e0", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "df3a555d-3f22-4499-9269-4311c4b657e0" + }, + "name": "spectrum-drop-shadow-ambient-color-sets-wireframe", + "attributes": {}, + "path": ["drop-shadow-ambient-color", "sets", "wireframe"] + } + } + } + }, + { + "x": "0px", + "y": "2px", + "blur": "6px", + "spread": "0px", + "color": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.04)", + "uuid": "0fe5c2a3-3f07-490d-bfe2-95dffa6a11c0", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.04)", + "uuid": "0fe5c2a3-3f07-490d-bfe2-95dffa6a11c0" + }, + "name": "spectrum-drop-shadow-transition-color-sets-light", + "attributes": {}, + "path": ["drop-shadow-transition-color", "sets", "light"] + }, + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.12)", + "uuid": "aca70da5-3d6d-4d02-b23b-9e2f8374f6e6", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.12)", + "uuid": "aca70da5-3d6d-4d02-b23b-9e2f8374f6e6" + }, + "name": "spectrum-drop-shadow-transition-color-sets-dark", + "attributes": {}, + "path": ["drop-shadow-transition-color", "sets", "dark"] + }, + "wireframe": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.04)", + "uuid": "52d1ce61-a695-439c-80a5-3978505aa04d", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.04)", + "uuid": "52d1ce61-a695-439c-80a5-3978505aa04d" + }, + "name": "spectrum-drop-shadow-transition-color-sets-wireframe", + "attributes": {}, + "path": ["drop-shadow-transition-color", "sets", "wireframe"] + } + } + } + }, + { + "x": "0px", + "y": "0px", + "blur": "2px", + "spread": "0px", + "color": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "c6fd25ed-1d86-4b7b-aa56-9ac371b2bbe6", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "c6fd25ed-1d86-4b7b-aa56-9ac371b2bbe6" + }, + "name": "spectrum-drop-shadow-emphasized-key-color-sets-light", + "attributes": {}, + "path": ["drop-shadow-emphasized-key-color", "sets", "light"] + }, + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.24)", + "uuid": "7a9a257f-538c-4e1b-a3f4-a652e59582c9", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.24)", + "uuid": "7a9a257f-538c-4e1b-a3f4-a652e59582c9" + }, + "name": "spectrum-drop-shadow-emphasized-key-color-sets-dark", + "attributes": {}, + "path": ["drop-shadow-emphasized-key-color", "sets", "dark"] + }, + "wireframe": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "5e946c9e-6b78-43f7-b8fa-74a3dbd2cc48", + "filePath": "/Users/cassondrar/Projects/spectrum-css/node_modules/@adobe/spectrum-tokens/src/color-aliases.json", + "isSource": true, + "original": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0, 0, 0, 0.08)", + "uuid": "5e946c9e-6b78-43f7-b8fa-74a3dbd2cc48" + }, + "name": "spectrum-drop-shadow-emphasized-key-color-sets-wireframe", + "attributes": {}, + "path": ["drop-shadow-emphasized-key-color", "sets", "wireframe"] + } + } + } + } + ] + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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-color-900)", + "light": { + "value": "rgb(75, 117, 255)" + }, + "dark": { + "value": "rgb(86, 129, 255)" + } + }, + "drop-zone-background-color-opacity": { + "prop": "--spectrum-drop-zone-background-color-opacity", + "ref": "0.1", + "value": "10%" + }, + "drop-zone-background-color-opacity-filled": { + "prop": "--spectrum-drop-zone-background-color-opacity-filled", + "ref": "0.3", + "value": "30%" + }, + "drop-zone-body-font-size": { + "prop": "--spectrum-drop-zone-body-font-size", + "ref": "var(--spectrum-body-size-xs)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "15px" + } + }, + "drop-zone-body-size": { + "prop": "--spectrum-drop-zone-body-size", + "ref": "var(--spectrum-drop-zone-body-font-size)", + "value": "{drop-zone-body-font-size}" + }, + "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-title-cjk-size-l)", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "19px" + } + }, + "drop-zone-cjk-title-size": { + "prop": "--spectrum-drop-zone-cjk-title-size", + "ref": "var(--spectrum-drop-zone-cjk-title-font-size)", + "value": "{drop-zone-cjk-title-font-size}" + }, + "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-title-size-l)", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "22px" + } + }, + "drop-zone-title-size": { + "prop": "--spectrum-drop-zone-title-size", + "ref": "var(--spectrum-drop-zone-title-font-size)", + "value": "{drop-zone-title-font-size}" + }, + "drop-zone-width": { + "prop": "--spectrum-drop-zone-width", + "value": "428px" + }, + "extra-bold-font-weight": { + "prop": "--spectrum-extra-bold-font-weight", + "ref": "extra-bold", + "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)" + } + }, + "focus-indicator-gap": { + "prop": "--spectrum-focus-indicator-gap", + "value": "2px" + }, + "focus-indicator-thickness": { + "prop": "--spectrum-focus-indicator-thickness", + "value": "2px" + }, + "font-family": { + "prop": "--spectrum-font-family", + "ref": "var(--spectrum-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" + }, + "font-family-ar": { + "prop": "--spectrum-font-family-ar", + "value": "myriad-arabic, adobe-clean, \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif" + }, + "font-family-he": { + "prop": "--spectrum-font-family-he", + "value": "myriad-hebrew, adobe-clean, \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif" + }, + "font-size": { + "prop": "--spectrum-font-size", + "ref": "var(--spectrum-font-size-100)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } + }, + "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" + } + }, + "font-style": { + "prop": "--spectrum-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "fuchsia-100": { + "prop": "--spectrum-fuchsia-100", + "light": { + "value": "rgb(254, 246, 255)" + }, + "dark": { + "value": "rgb(50, 0, 61)" + } + }, + "fuchsia-1000": { + "prop": "--spectrum-fuchsia-1000", + "light": { + "value": "rgb(156, 40, 175)" + }, + "dark": { + "value": "rgb(232, 91, 253)" + } + }, + "fuchsia-1100": { + "prop": "--spectrum-fuchsia-1100", + "light": { + "value": "rgb(135, 27, 154)" + }, + "dark": { + "value": "rgb(240, 122, 255)" + } + }, + "fuchsia-1200": { + "prop": "--spectrum-fuchsia-1200", + "light": { + "value": "rgb(113, 15, 131)" + }, + "dark": { + "value": "rgb(245, 159, 255)" + } + }, + "fuchsia-1300": { + "prop": "--spectrum-fuchsia-1300", + "light": { + "value": "rgb(92, 4, 109)" + }, + "dark": { + "value": "rgb(248, 191, 255)" + } + }, + "fuchsia-1400": { + "prop": "--spectrum-fuchsia-1400", + "light": { + "value": "rgb(72, 0, 88)" + }, + "dark": { + "value": "rgb(251, 219, 255)" + } + }, + "fuchsia-1500": { + "prop": "--spectrum-fuchsia-1500", + "dark": { + "value": "rgb(253, 241, 255)" + }, + "light": { + "value": "rgb(54, 0, 66)" + } + }, + "fuchsia-1600": { + "prop": "--spectrum-fuchsia-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(29, 0, 35)" + } + }, + "fuchsia-200": { + "prop": "--spectrum-fuchsia-200", + "light": { + "value": "rgb(253, 233, 255)" + }, + "dark": { + "value": "rgb(61, 0, 74)" + } + }, + "fuchsia-300": { + "prop": "--spectrum-fuchsia-300", + "light": { + "value": "rgb(250, 211, 255)" + }, + "dark": { + "value": "rgb(79, 0, 95)" + } + }, + "fuchsia-400": { + "prop": "--spectrum-fuchsia-400", + "light": { + "value": "rgb(247, 181, 255)" + }, + "dark": { + "value": "rgb(102, 9, 120)" + } + }, + "fuchsia-500": { + "prop": "--spectrum-fuchsia-500", + "light": { + "value": "rgb(243, 147, 255)" + }, + "dark": { + "value": "rgb(127, 23, 146)" + } + }, + "fuchsia-600": { + "prop": "--spectrum-fuchsia-600", + "light": { + "value": "rgb(236, 105, 255)" + }, + "dark": { + "value": "rgb(151, 38, 170)" + } + }, + "fuchsia-700": { + "prop": "--spectrum-fuchsia-700", + "light": { + "value": "rgb(223, 77, 245)" + }, + "dark": { + "value": "rgb(173, 51, 192)" + } + }, + "fuchsia-800": { + "prop": "--spectrum-fuchsia-800", + "light": { + "value": "rgb(200, 68, 220)" + }, + "dark": { + "value": "rgb(186, 60, 206)" + } + }, + "fuchsia-900": { + "prop": "--spectrum-fuchsia-900", + "light": { + "value": "rgb(181, 57, 200)" + }, + "dark": { + "value": "rgb(213, 73, 235)" + } + }, + "fuchsia-background-color-default": { + "prop": "--spectrum-fuchsia-background-color-default", + "ref": "var(--spectrum-fuchsia-800)", + "light": { + "value": "rgb(181, 57, 200)" + }, + "dark": { + "value": "rgb(186, 60, 206)" + } + }, + "fuchsia-subtle-background-color-default": { + "prop": "--spectrum-fuchsia-subtle-background-color-default", + "ref": "var(--spectrum-fuchsia-300)", + "light": { + "value": "rgb(253, 233, 255)" + }, + "dark": { + "value": "rgb(79, 0, 95)" + } + }, + "fuchsia-visual-color": { + "prop": "--spectrum-fuchsia-visual-color", + "ref": "var(--spectrum-fuchsia-900)", + "light": { + "value": "rgb(200, 68, 220)" + }, + "dark": { + "value": "rgb(213, 73, 235)" + } + }, + "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)" + } + }, + "gray-1000": { + "prop": "--spectrum-gray-1000", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 0, 0)" + } + }, + "gray-200": { + "prop": "--spectrum-gray-200", + "light": { + "value": "rgb(225, 225, 225)" + }, + "dark": { + "value": "rgb(50, 50, 50)" + } + }, + "gray-25": { + "prop": "--spectrum-gray-25", + "dark": { + "value": "rgb(17, 17, 17)" + }, + "light": { + "value": "rgb(255, 255, 255)" + } + }, + "gray-300": { + "prop": "--spectrum-gray-300", + "light": { + "value": "rgb(218, 218, 218)" + }, + "dark": { + "value": "rgb(57, 57, 57)" + } + }, + "gray-400": { + "prop": "--spectrum-gray-400", + "light": { + "value": "rgb(198, 198, 198)" + }, + "dark": { + "value": "rgb(68, 68, 68)" + } + }, + "gray-50": { + "prop": "--spectrum-gray-50", + "light": { + "value": "rgb(248, 248, 248)" + }, + "dark": { + "value": "rgb(27, 27, 27)" + } + }, + "gray-500": { + "prop": "--spectrum-gray-500", + "light": { + "value": "rgb(143, 143, 143)" + }, + "dark": { + "value": "rgb(109, 109, 109)" + } + }, + "gray-600": { + "prop": "--spectrum-gray-600", + "light": { + "value": "rgb(113, 113, 113)" + }, + "dark": { + "value": "rgb(138, 138, 138)" + } + }, + "gray-700": { + "prop": "--spectrum-gray-700", + "light": { + "value": "rgb(80, 80, 80)" + }, + "dark": { + "value": "rgb(175, 175, 175)" + } + }, + "gray-75": { + "prop": "--spectrum-gray-75", + "light": { + "value": "rgb(243, 243, 243)" + }, + "dark": { + "value": "rgb(34, 34, 34)" + } + }, + "gray-800": { + "prop": "--spectrum-gray-800", + "light": { + "value": "rgb(41, 41, 41)" + }, + "dark": { + "value": "rgb(219, 219, 219)" + } + }, + "gray-900": { + "prop": "--spectrum-gray-900", + "light": { + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" + } + }, + "gray-background-color-default": { + "prop": "--spectrum-gray-background-color-default", + "ref": "var(--spectrum-gray-500)", + "light": { + "value": "rgb(80, 80, 80)" + }, + "dark": { + "value": "rgb(109, 109, 109)" + } + }, + "gray-subtle-background-color-default": { + "prop": "--spectrum-gray-subtle-background-color-default", + "ref": "var(--spectrum-gray-300)", + "light": { + "value": "rgb(233, 233, 233)" + }, + "dark": { + "value": "rgb(57, 57, 57)" + } + }, + "gray-visual-color": { + "prop": "--spectrum-gray-visual-color", + "ref": "var(--spectrum-gray-600)", + "light": { + "value": "rgb(143, 143, 143)" + }, + "dark": { + "value": "rgb(138, 138, 138)" + } + }, + "green-100": { + "prop": "--spectrum-green-100", + "light": { + "value": "rgb(237, 252, 241)" + }, + "dark": { + "value": "rgb(0, 30, 23)" + } + }, + "green-1000": { + "prop": "--spectrum-green-1000", + "light": { + "value": "rgb(3, 110, 69)" + }, + "dark": { + "value": "rgb(14, 175, 98)" + } + }, + "green-1100": { + "prop": "--spectrum-green-1100", + "light": { + "value": "rgb(2, 93, 60)" + }, + "dark": { + "value": "rgb(24, 193, 110)" + } + }, + "green-1200": { + "prop": "--spectrum-green-1200", + "light": { + "value": "rgb(1, 76, 52)" + }, + "dark": { + "value": "rgb(57, 215, 134)" + } + }, + "green-1300": { + "prop": "--spectrum-green-1300", + "light": { + "value": "rgb(0, 61, 44)" + }, + "dark": { + "value": "rgb(126, 231, 172)" + } + }, + "green-1400": { + "prop": "--spectrum-green-1400", + "light": { + "value": "rgb(0, 46, 34)" + }, + "dark": { + "value": "rgb(189, 241, 208)" + } + }, + "green-1500": { + "prop": "--spectrum-green-1500", + "dark": { + "value": "rgb(229, 250, 236)" + }, + "light": { + "value": "rgb(0, 33, 25)" + } + }, + "green-1600": { + "prop": "--spectrum-green-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 15, 12)" + } + }, + "green-200": { + "prop": "--spectrum-green-200", + "light": { + "value": "rgb(215, 247, 225)" + }, + "dark": { + "value": "rgb(0, 38, 29)" + } + }, + "green-300": { + "prop": "--spectrum-green-300", + "light": { + "value": "rgb(173, 238, 197)" + }, + "dark": { + "value": "rgb(0, 51, 38)" + } + }, + "green-400": { + "prop": "--spectrum-green-400", + "light": { + "value": "rgb(107, 227, 162)" + }, + "dark": { + "value": "rgb(0, 68, 48)" + } + }, + "green-500": { + "prop": "--spectrum-green-500", + "light": { + "value": "rgb(43, 209, 125)" + }, + "dark": { + "value": "rgb(2, 87, 58)" + } + }, + "green-600": { + "prop": "--spectrum-green-600", + "light": { + "value": "rgb(18, 184, 103)" + }, + "dark": { + "value": "rgb(3, 106, 67)" + } + }, + "green-700": { + "prop": "--spectrum-green-700", + "light": { + "value": "rgb(11, 164, 93)" + }, + "dark": { + "value": "rgb(4, 124, 75)" + } + }, + "green-800": { + "prop": "--spectrum-green-800", + "light": { + "value": "rgb(7, 147, 85)" + }, + "dark": { + "value": "rgb(6, 136, 80)" + } + }, + "green-900": { + "prop": "--spectrum-green-900", + "light": { + "value": "rgb(5, 131, 78)" + }, + "dark": { + "value": "rgb(9, 157, 89)" + } + }, + "green-background-color-default": { + "prop": "--spectrum-green-background-color-default", + "ref": "var(--spectrum-green-800)", + "light": { + "value": "rgb(5, 131, 78)" + }, + "dark": { + "value": "rgb(6, 136, 80)" + } + }, + "green-subtle-background-color-default": { + "prop": "--spectrum-green-subtle-background-color-default", + "ref": "var(--spectrum-green-300)", + "light": { + "value": "rgb(215, 247, 225)" + }, + "dark": { + "value": "rgb(0, 51, 38)" + } + }, + "green-visual-color": { + "prop": "--spectrum-green-visual-color", + "ref": "var(--spectrum-green-800)", + "light": { + "value": "rgb(11, 164, 93)" + }, + "dark": { + "value": "rgb(6, 136, 80)" + } + }, + "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)" + } + }, + "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-300)", + "light": { + "value": "rgb(229, 240, 254)" + }, + "dark": { + "value": "rgb(12, 33, 117)" + } + }, + "icon-color-blue-primary-default": { + "prop": "--spectrum-icon-color-blue-primary-default", + "ref": "var(--spectrum-blue-800)", + "light": { + "value": "rgb(59, 99, 251)" + }, + "dark": { + "value": "rgb(64, 105, 253)" + } + }, + "icon-color-blue-primary-down": { + "prop": "--spectrum-icon-color-blue-primary-down", + "ref": "var(--spectrum-blue-1000)", + "light": { + "value": "rgb(29, 62, 207)" + }, + "dark": { + "value": "rgb(105, 149, 254)" + } + }, + "icon-color-blue-primary-hover": { + "prop": "--spectrum-icon-color-blue-primary-hover", + "ref": "var(--spectrum-blue-900)", + "light": { + "value": "rgb(39, 77, 234)" + }, + "dark": { + "value": "rgb(86, 129, 255)" + } + }, + "icon-color-brown-background": { + "prop": "--spectrum-icon-color-brown-background", + "ref": "var(--spectrum-brown-400)", + "light": { + "value": "rgb(247, 238, 225)" + }, + "dark": { + "value": "rgb(78, 55, 19)" + } + }, + "icon-color-brown-primary-default": { + "prop": "--spectrum-icon-color-brown-primary-default", + "ref": "var(--spectrum-brown-700)", + "light": { + "value": "rgb(154, 123, 77)" + }, + "dark": { + "value": "rgb(132, 104, 61)" + } + }, + "icon-color-brown-primary-down": { + "prop": "--spectrum-icon-color-brown-primary-down", + "ref": "var(--spectrum-brown-900)", + "light": { + "value": "rgb(119, 91, 50)" + }, + "dark": { + "value": "rgb(163, 132, 84)" + } + }, + "icon-color-brown-primary-hover": { + "prop": "--spectrum-icon-color-brown-primary-hover", + "ref": "var(--spectrum-brown-800)", + "light": { + "value": "rgb(139, 109, 66)" + }, + "dark": { + "value": "rgb(143, 114, 69)" + } + }, + "icon-color-celery-background": { + "prop": "--spectrum-icon-color-celery-background", + "ref": "var(--spectrum-celery-400)", + "light": { + "value": "rgb(235, 255, 220)" + }, + "dark": { + "value": "rgb(31, 67, 4)" + } + }, + "icon-color-celery-primary-default": { + "prop": "--spectrum-icon-color-celery-primary-default", + "ref": "var(--spectrum-celery-900)", + "light": { + "value": "rgb(82, 161, 25)" + }, + "dark": { + "value": "rgb(78, 154, 23)" + } + }, + "icon-color-celery-primary-down": { + "prop": "--spectrum-icon-color-celery-primary-down", + "ref": "var(--spectrum-celery-1100)", + "light": { + "value": "rgb(64, 129, 17)" + }, + "dark": { + "value": "rgb(100, 190, 35)" + } + }, + "icon-color-celery-primary-hover": { + "prop": "--spectrum-icon-color-celery-primary-hover", + "ref": "var(--spectrum-celery-1000)", + "light": { + "value": "rgb(72, 144, 20)" + }, + "dark": { + "value": "rgb(88, 172, 28)" + } + }, + "icon-color-chartreuse-background": { + "prop": "--spectrum-icon-color-chartreuse-background", + "ref": "var(--spectrum-chartreuse-400)", + "light": { + "value": "rgb(234, 246, 173)" + }, + "dark": { + "value": "rgb(53, 63, 0)" + } + }, + "icon-color-chartreuse-primary-default": { + "prop": "--spectrum-icon-color-chartreuse-primary-default", + "ref": "var(--spectrum-chartreuse-1000)", + "light": { + "value": "rgb(143, 172, 0)" + }, + "dark": { + "value": "rgb(136, 164, 0)" + } + }, + "icon-color-chartreuse-primary-down": { + "prop": "--spectrum-icon-color-chartreuse-primary-down", + "ref": "var(--spectrum-chartreuse-1200)", + "light": { + "value": "rgb(114, 137, 0)" + }, + "dark": { + "value": "rgb(169, 203, 0)" + } + }, + "icon-color-chartreuse-primary-hover": { + "prop": "--spectrum-icon-color-chartreuse-primary-hover", + "ref": "var(--spectrum-chartreuse-1100)", + "light": { + "value": "rgb(128, 153, 0)" + }, + "dark": { + "value": "rgb(151, 181, 0)" + } + }, + "icon-color-cinnamon-background": { + "prop": "--spectrum-icon-color-cinnamon-background", + "ref": "var(--spectrum-cinnamon-300)", + "light": { + "value": "rgb(249, 236, 229)" + }, + "dark": { + "value": "rgb(79, 28, 7)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "icon-color-cyan-background": { + "prop": "--spectrum-icon-color-cyan-background", + "ref": "var(--spectrum-cyan-400)", + "light": { + "value": "rgb(238, 250, 254)" + }, + "dark": { + "value": "rgb(0, 64, 88)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "icon-color-fuchsia-primary-default": { + "prop": "--spectrum-icon-color-fuchsia-primary-default", + "ref": "var(--spectrum-fuchsia-700)", + "light": { + "value": "rgb(181, 57, 200)" + }, + "dark": { + "value": "rgb(173, 51, 192)" + } + }, + "icon-color-fuchsia-primary-down": { + "prop": "--spectrum-icon-color-fuchsia-primary-down", + "ref": "var(--spectrum-fuchsia-900)", + "light": { + "value": "rgb(135, 27, 154)" + }, + "dark": { + "value": "rgb(213, 73, 235)" + } + }, + "icon-color-fuchsia-primary-hover": { + "prop": "--spectrum-icon-color-fuchsia-primary-hover", + "ref": "var(--spectrum-fuchsia-800)", + "light": { + "value": "rgb(156, 40, 175)" + }, + "dark": { + "value": "rgb(186, 60, 206)" + } + }, + "icon-color-green-background": { + "prop": "--spectrum-icon-color-green-background", + "ref": "var(--spectrum-green-400)", + "light": { + "value": "rgb(237, 252, 241)" + }, + "dark": { + "value": "rgb(0, 68, 48)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "icon-color-indigo-background": { + "prop": "--spectrum-icon-color-indigo-background", + "ref": "var(--spectrum-indigo-100)", + "light": { + "value": "rgb(235, 238, 255)" + }, + "dark": { + "value": "rgb(30, 0, 93)" + } + }, + "icon-color-indigo-primary-default": { + "prop": "--spectrum-icon-color-indigo-primary-default", + "ref": "var(--spectrum-indigo-700)", + "light": { + "value": "rgb(113, 85, 250)" + }, + "dark": { + "value": "rgb(109, 75, 248)" + } + }, + "icon-color-indigo-primary-down": { + "prop": "--spectrum-icon-color-indigo-primary-down", + "ref": "var(--spectrum-indigo-900)", + "light": { + "value": "rgb(84, 36, 219)" + }, + "dark": { + "value": "rgb(128, 119, 254)" + } + }, + "icon-color-indigo-primary-hover": { + "prop": "--spectrum-icon-color-indigo-primary-hover", + "ref": "var(--spectrum-indigo-800)", + "light": { + "value": "rgb(99, 56, 238)" + }, + "dark": { + "value": "rgb(116, 91, 252)" + } + }, + "icon-color-informative": { + "prop": "--spectrum-icon-color-informative", + "ref": "var(--spectrum-informative-color-900)", + "light": { + "value": "rgb(75, 117, 255)" + }, + "dark": { + "value": "rgb(86, 129, 255)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "icon-color-magenta-primary-default": { + "prop": "--spectrum-icon-color-magenta-primary-default", + "ref": "var(--spectrum-magenta-700)", + "light": { + "value": "rgb(217, 35, 97)" + }, + "dark": { + "value": "rgb(207, 31, 92)" + } + }, + "icon-color-magenta-primary-down": { + "prop": "--spectrum-icon-color-magenta-primary-down", + "ref": "var(--spectrum-magenta-900)", + "light": { + "value": "rgb(163, 5, 62)" + }, + "dark": { + "value": "rgb(255, 51, 119)" + } + }, + "icon-color-magenta-primary-hover": { + "prop": "--spectrum-icon-color-magenta-primary-hover", + "ref": "var(--spectrum-magenta-800)", + "light": { + "value": "rgb(186, 22, 80)" + }, + "dark": { + "value": "rgb(224, 38, 101)" + } + }, + "icon-color-negative": { + "prop": "--spectrum-icon-color-negative", + "ref": "var(--spectrum-negative-color-900)", + "light": { + "value": "rgb(240, 56, 35)" + }, + "dark": { + "value": "rgb(252, 67, 46)" + } + }, + "icon-color-neutral": { + "prop": "--spectrum-icon-color-neutral", + "ref": "var(--spectrum-gray-600)", + "light": { + "value": "rgb(143, 143, 143)" + }, + "dark": { + "value": "rgb(138, 138, 138)" + } + }, + "icon-color-notice": { + "prop": "--spectrum-icon-color-notice", + "ref": "var(--spectrum-notice-color-900)", + "light": { + "value": "rgb(212, 91, 0)" + }, + "dark": { + "value": "rgb(224, 100, 0)" + } + }, + "icon-color-orange-background": { + "prop": "--spectrum-icon-color-orange-background", + "ref": "var(--spectrum-orange-300)", + "light": { + "value": "rgb(255, 236, 207)" + }, + "dark": { + "value": "rgb(80, 27, 0)" + } + }, + "icon-color-orange-primary-default": { + "prop": "--spectrum-icon-color-orange-primary-default", + "ref": "var(--spectrum-orange-900)", + "light": { + "value": "rgb(232, 106, 0)" + }, + "dark": { + "value": "rgb(224, 100, 0)" + } + }, + "icon-color-orange-primary-down": { + "prop": "--spectrum-icon-color-orange-primary-down", + "ref": "var(--spectrum-orange-1100)", + "light": { + "value": "rgb(194, 78, 0)" + }, + "dark": { + "value": "rgb(255, 137, 0)" + } + }, + "icon-color-orange-primary-hover": { + "prop": "--spectrum-icon-color-orange-primary-hover", + "ref": "var(--spectrum-orange-1000)", + "light": { + "value": "rgb(212, 91, 0)" + }, + "dark": { + "value": "rgb(243, 117, 0)" + } + }, + "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)" + } + }, + "icon-color-pink-primary-default": { + "prop": "--spectrum-icon-color-pink-primary-default", + "ref": "var(--spectrum-pink-700)", + "light": { + "value": "rgb(228, 52, 163)" + }, + "dark": { + "value": "rgb(196, 39, 138)" + } + }, + "icon-color-pink-primary-down": { + "prop": "--spectrum-icon-color-pink-primary-down", + "ref": "var(--spectrum-pink-900)", + "light": { + "value": "rgb(176, 31, 123)" + }, + "dark": { + "value": "rgb(236, 67, 175)" + } + }, + "icon-color-pink-primary-hover": { + "prop": "--spectrum-icon-color-pink-primary-hover", + "ref": "var(--spectrum-pink-800)", + "light": { + "value": "rgb(206, 42, 146)" + }, + "dark": { + "value": "rgb(213, 45, 151)" + } + }, + "icon-color-positive": { + "prop": "--spectrum-icon-color-positive", + "ref": "var(--spectrum-positive-color-900)", + "light": { + "value": "rgb(7, 147, 85)" + }, + "dark": { + "value": "rgb(9, 157, 89)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "icon-color-purple-primary-default": { + "prop": "--spectrum-icon-color-purple-primary-default", + "ref": "var(--spectrum-purple-700)", + "light": { + "value": "rgb(154, 71, 226)" + }, + "dark": { + "value": "rgb(148, 62, 224)" + } + }, + "icon-color-purple-primary-down": { + "prop": "--spectrum-icon-color-purple-primary-down", + "ref": "var(--spectrum-purple-900)", + "light": { + "value": "rgb(115, 13, 204)" + }, + "dark": { + "value": "rgb(173, 105, 233)" + } + }, + "icon-color-purple-primary-hover": { + "prop": "--spectrum-icon-color-purple-primary-hover", + "ref": "var(--spectrum-purple-800)", + "light": { + "value": "rgb(134, 40, 217)" + }, + "dark": { + "value": "rgb(157, 78, 228)" + } + }, + "icon-color-red-background": { + "prop": "--spectrum-icon-color-red-background", + "ref": "var(--spectrum-red-300)", + "light": { + "value": "rgb(255, 235, 232)" + }, + "dark": { + "value": "rgb(87, 17, 7)" + } + }, + "icon-color-red-primary-default": { + "prop": "--spectrum-icon-color-red-primary-default", + "ref": "var(--spectrum-red-700)", + "light": { + "value": "rgb(215, 50, 32)" + }, + "dark": { + "value": "rgb(205, 46, 29)" + } + }, + "icon-color-red-primary-down": { + "prop": "--spectrum-icon-color-red-primary-down", + "ref": "var(--spectrum-red-900)", + "light": { + "value": "rgb(156, 33, 19)" + }, + "dark": { + "value": "rgb(252, 67, 46)" + } + }, + "icon-color-red-primary-hover": { + "prop": "--spectrum-icon-color-red-primary-hover", + "ref": "var(--spectrum-red-800)", + "light": { + "value": "rgb(183, 40, 24)" + }, + "dark": { + "value": "rgb(223, 52, 34)" + } + }, + "icon-color-seafoam-background": { + "prop": "--spectrum-icon-color-seafoam-background", + "ref": "var(--spectrum-seafoam-400)", + "light": { + "value": "rgb(211, 246, 234)" + }, + "dark": { + "value": "rgb(0, 67, 59)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "icon-color-silver-background": { + "prop": "--spectrum-icon-color-silver-background", + "ref": "var(--spectrum-silver-400)", + "light": { + "value": "rgb(239, 239, 239)" + }, + "dark": { + "value": "rgb(59, 59, 59)" + } + }, + "icon-color-silver-primary-default": { + "prop": "--spectrum-icon-color-silver-primary-default", + "ref": "var(--spectrum-silver-800)", + "light": { + "value": "rgb(143, 143, 143)" + }, + "dark": { + "value": "rgb(118, 118, 118)" + } + }, + "icon-color-silver-primary-down": { + "prop": "--spectrum-icon-color-silver-primary-down", + "ref": "var(--spectrum-silver-1000)", + "light": { + "value": "rgb(114, 114, 114)" + }, + "dark": { + "value": "rgb(152, 152, 152)" + } + }, + "icon-color-silver-primary-hover": { + "prop": "--spectrum-icon-color-silver-primary-hover", + "ref": "var(--spectrum-silver-900)", + "light": { + "value": "rgb(128, 128, 128)" + }, + "dark": { + "value": "rgb(137, 137, 137)" + } + }, + "icon-color-turquoise-background": { + "prop": "--spectrum-icon-color-turquoise-background", + "ref": "var(--spectrum-turquoise-400)", + "light": { + "value": "rgb(209, 245, 245)" + }, + "dark": { + "value": "rgb(0, 66, 72)" + } + }, + "icon-color-turquoise-primary-default": { + "prop": "--spectrum-icon-color-turquoise-primary-default", + "ref": "var(--spectrum-turquoise-800)", + "light": { + "value": "rgb(12, 158, 171)" + }, + "dark": { + "value": "rgb(9, 131, 142)" + } + }, + "icon-color-turquoise-primary-down": { + "prop": "--spectrum-icon-color-turquoise-primary-down", + "ref": "var(--spectrum-turquoise-1000)", + "light": { + "value": "rgb(8, 126, 137)" + }, + "dark": { + "value": "rgb(13, 168, 182)" + } + }, + "icon-color-turquoise-primary-hover": { + "prop": "--spectrum-icon-color-turquoise-primary-hover", + "ref": "var(--spectrum-turquoise-900)", + "light": { + "value": "rgb(10, 141, 153)" + }, + "dark": { + "value": "rgb(11, 151, 164)" + } + }, + "icon-color-yellow-background": { + "prop": "--spectrum-icon-color-yellow-background", + "ref": "var(--spectrum-yellow-400)", + "light": { + "value": "rgb(255, 248, 204)" + }, + "dark": { + "value": "rgb(83, 52, 0)" + } + }, + "icon-color-yellow-primary-default": { + "prop": "--spectrum-icon-color-yellow-primary-default", + "ref": "var(--spectrum-yellow-1200)", + "light": { + "value": "rgb(245, 199, 0)" + }, + "dark": { + "value": "rgb(235, 183, 0)" + } + }, + "icon-color-yellow-primary-down": { + "prop": "--spectrum-icon-color-yellow-primary-down", + "ref": "var(--spectrum-yellow-1400)", + "light": { + "value": "rgb(210, 149, 0)" + }, + "dark": { + "value": "rgb(255, 230, 86)" + } + }, + "icon-color-yellow-primary-hover": { + "prop": "--spectrum-icon-color-yellow-primary-hover", + "ref": "var(--spectrum-yellow-1300)", + "light": { + "value": "rgb(230, 175, 0)" + }, + "dark": { + "value": "rgb(249, 206, 0)" + } + }, + "illustrated-message-body-size": { + "prop": "--spectrum-illustrated-message-body-size", + "ref": "var(--spectrum-body-size-xs)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "15px" + } + }, + "illustrated-message-cjk-title-size": { + "prop": "--spectrum-illustrated-message-cjk-title-size", + "ref": "var(--spectrum-title-cjk-size-xl)", + "desktop": { + "value": "20px" + }, + "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": "14px" + }, + "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": "20px" + }, + "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": "22px" + }, + "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": "14px" + }, + "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": "18px" + }, + "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": "20px" + }, + "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": "14px" + }, + "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": "16px" + }, + "mobile": { + "value": "17px" + } + }, + "illustrated-message-title-size": { + "prop": "--spectrum-illustrated-message-title-size", + "ref": "var(--spectrum-title-size-xl)", + "desktop": { + "value": "22px" + }, + "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)" + } + }, + "indigo-1000": { + "prop": "--spectrum-indigo-1000", + "light": { + "value": "rgb(99, 56, 238)" + }, + "dark": { + "value": "rgb(139, 141, 254)" + } + }, + "indigo-1100": { + "prop": "--spectrum-indigo-1100", + "light": { + "value": "rgb(84, 36, 219)" + }, + "dark": { + "value": "rgb(153, 161, 255)" + } + }, + "indigo-1200": { + "prop": "--spectrum-indigo-1200", + "light": { + "value": "rgb(69, 19, 191)" + }, + "dark": { + "value": "rgb(176, 186, 255)" + } + }, + "indigo-1300": { + "prop": "--spectrum-indigo-1300", + "light": { + "value": "rgb(55, 6, 160)" + }, + "dark": { + "value": "rgb(199, 208, 255)" + } + }, + "indigo-1400": { + "prop": "--spectrum-indigo-1400", + "light": { + "value": "rgb(42, 0, 129)" + }, + "dark": { + "value": "rgb(223, 228, 255)" + } + }, + "indigo-1500": { + "prop": "--spectrum-indigo-1500", + "dark": { + "value": "rgb(243, 244, 255)" + }, + "light": { + "value": "rgb(31, 0, 98)" + } + }, + "indigo-1600": { + "prop": "--spectrum-indigo-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(17, 0, 54)" + } + }, + "indigo-200": { + "prop": "--spectrum-indigo-200", + "light": { + "value": "rgb(235, 238, 255)" + }, + "dark": { + "value": "rgb(35, 0, 110)" + } + }, + "indigo-300": { + "prop": "--spectrum-indigo-300", + "light": { + "value": "rgb(216, 222, 255)" + }, + "dark": { + "value": "rgb(47, 0, 140)" + } + }, + "indigo-400": { + "prop": "--spectrum-indigo-400", + "light": { + "value": "rgb(192, 201, 255)" + }, + "dark": { + "value": "rgb(62, 12, 174)" + } + }, + "indigo-500": { + "prop": "--spectrum-indigo-500", + "light": { + "value": "rgb(167, 178, 255)" + }, + "dark": { + "value": "rgb(79, 30, 209)" + } + }, + "indigo-600": { + "prop": "--spectrum-indigo-600", + "light": { + "value": "rgb(145, 151, 254)" + }, + "dark": { + "value": "rgb(95, 52, 235)" + } + }, + "indigo-700": { + "prop": "--spectrum-indigo-700", + "light": { + "value": "rgb(132, 128, 254)" + }, + "dark": { + "value": "rgb(109, 75, 248)" + } + }, + "indigo-800": { + "prop": "--spectrum-indigo-800", + "light": { + "value": "rgb(122, 106, 253)" + }, + "dark": { + "value": "rgb(116, 91, 252)" + } + }, + "indigo-900": { + "prop": "--spectrum-indigo-900", + "light": { + "value": "rgb(113, 85, 250)" + }, + "dark": { + "value": "rgb(128, 119, 254)" + } + }, + "indigo-background-color-default": { + "prop": "--spectrum-indigo-background-color-default", + "ref": "var(--spectrum-indigo-800)", + "light": { + "value": "rgb(113, 85, 250)" + }, + "dark": { + "value": "rgb(116, 91, 252)" + } + }, + "indigo-subtle-background-color-default": { + "prop": "--spectrum-indigo-subtle-background-color-default", + "ref": "var(--spectrum-indigo-300)", + "light": { + "value": "rgb(235, 238, 255)" + }, + "dark": { + "value": "rgb(47, 0, 140)" + } + }, + "indigo-visual-color": { + "prop": "--spectrum-indigo-visual-color", + "ref": "var(--spectrum-indigo-900)", + "light": { + "value": "rgb(122, 106, 253)" + }, + "dark": { + "value": "rgb(128, 119, 254)" + } + }, + "informative-background-color-default": { + "prop": "--spectrum-informative-background-color-default", + "ref": "var(--spectrum-informative-color-800)", + "light": { + "value": "rgb(59, 99, 251)" + }, + "dark": { + "value": "rgb(64, 105, 253)" + } + }, + "informative-background-color-down": { + "prop": "--spectrum-informative-background-color-down", + "ref": "var(--spectrum-informative-color-700)", + "light": { + "value": "rgb(39, 77, 234)" + }, + "dark": { + "value": "rgb(52, 91, 248)" + } + }, + "informative-background-color-hover": { + "prop": "--spectrum-informative-background-color-hover", + "ref": "var(--spectrum-informative-color-700)", + "light": { + "value": "rgb(39, 77, 234)" + }, + "dark": { + "value": "rgb(52, 91, 248)" + } + }, + "informative-background-color-key-focus": { + "prop": "--spectrum-informative-background-color-key-focus", + "ref": "var(--spectrum-informative-color-700)", + "light": { + "value": "rgb(39, 77, 234)" + }, + "dark": { + "value": "rgb(52, 91, 248)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "informative-subtle-background-color-default": { + "prop": "--spectrum-informative-subtle-background-color-default", + "ref": "var(--spectrum-informative-color-300)", + "light": { + "value": "rgb(229, 240, 254)" + }, + "dark": { + "value": "rgb(12, 33, 117)" + } + }, + "informative-visual-color": { + "prop": "--spectrum-informative-visual-color", + "ref": "var(--spectrum-informative-color-900)", + "light": { + "value": "rgb(75, 117, 255)" + }, + "dark": { + "value": "rgb(86, 129, 255)" + } + }, + "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", + "ref": "light", + "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)" + } + }, + "magenta-1000": { + "prop": "--spectrum-magenta-1000", + "light": { + "value": "rgb(186, 22, 80)" + }, + "dark": { + "value": "rgb(255, 96, 149)" + } + }, + "magenta-1100": { + "prop": "--spectrum-magenta-1100", + "light": { + "value": "rgb(163, 5, 62)" + }, + "dark": { + "value": "rgb(255, 128, 171)" + } + }, + "magenta-1200": { + "prop": "--spectrum-magenta-1200", + "light": { + "value": "rgb(136, 0, 51)" + }, + "dark": { + "value": "rgb(255, 163, 194)" + } + }, + "magenta-1300": { + "prop": "--spectrum-magenta-1300", + "light": { + "value": "rgb(111, 0, 40)" + }, + "dark": { + "value": "rgb(255, 193, 214)" + } + }, + "magenta-1400": { + "prop": "--spectrum-magenta-1400", + "light": { + "value": "rgb(86, 0, 30)" + }, + "dark": { + "value": "rgb(255, 220, 232)" + } + }, + "magenta-1500": { + "prop": "--spectrum-magenta-1500", + "dark": { + "value": "rgb(255, 241, 246)" + }, + "light": { + "value": "rgb(64, 0, 22)" + } + }, + "magenta-1600": { + "prop": "--spectrum-magenta-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(35, 0, 12)" + } + }, + "magenta-200": { + "prop": "--spectrum-magenta-200", + "light": { + "value": "rgb(255, 232, 240)" + }, + "dark": { + "value": "rgb(74, 0, 27)" + } + }, + "magenta-300": { + "prop": "--spectrum-magenta-300", + "light": { + "value": "rgb(255, 213, 227)" + }, + "dark": { + "value": "rgb(93, 0, 34)" + } + }, + "magenta-400": { + "prop": "--spectrum-magenta-400", + "light": { + "value": "rgb(255, 185, 208)" + }, + "dark": { + "value": "rgb(123, 0, 45)" + } + }, + "magenta-500": { + "prop": "--spectrum-magenta-500", + "light": { + "value": "rgb(255, 152, 187)" + }, + "dark": { + "value": "rgb(152, 7, 60)" + } + }, + "magenta-600": { + "prop": "--spectrum-magenta-600", + "light": { + "value": "rgb(255, 112, 159)" + }, + "dark": { + "value": "rgb(181, 19, 76)" + } + }, + "magenta-700": { + "prop": "--spectrum-magenta-700", + "light": { + "value": "rgb(255, 72, 133)" + }, + "dark": { + "value": "rgb(207, 31, 92)" + } + }, + "magenta-800": { + "prop": "--spectrum-magenta-800", + "light": { + "value": "rgb(240, 45, 110)" + }, + "dark": { + "value": "rgb(224, 38, 101)" + } + }, + "magenta-900": { + "prop": "--spectrum-magenta-900", + "light": { + "value": "rgb(217, 35, 97)" + }, + "dark": { + "value": "rgb(255, 51, 119)" + } + }, + "magenta-background-color-default": { + "prop": "--spectrum-magenta-background-color-default", + "ref": "var(--spectrum-magenta-800)", + "light": { + "value": "rgb(217, 35, 97)" + }, + "dark": { + "value": "rgb(224, 38, 101)" + } + }, + "magenta-subtle-background-color-default": { + "prop": "--spectrum-magenta-subtle-background-color-default", + "ref": "var(--spectrum-magenta-300)", + "light": { + "value": "rgb(255, 232, 240)" + }, + "dark": { + "value": "rgb(93, 0, 34)" + } + }, + "magenta-visual-color": { + "prop": "--spectrum-magenta-visual-color", + "ref": "var(--spectrum-magenta-900)", + "light": { + "value": "rgb(240, 45, 110)" + }, + "dark": { + "value": "rgb(255, 51, 119)" + } + }, + "medium-font-weight": { + "prop": "--spectrum-medium-font-weight", + "ref": "medium", + "value": "500" + }, + "menu-item-background-color-default": { + "prop": "--spectrum-menu-item-background-color-default", + "ref": "var(--spectrum-gray-200)", + "light": { + "value": "rgb(233, 233, 233)" + }, + "dark": { + "value": "rgb(50, 50, 50)" + } + }, + "menu-item-background-color-disabled": { + "prop": "--spectrum-menu-item-background-color-disabled", + "ref": "var(--spectrum-gray-200)", + "light": { + "value": "rgb(233, 233, 233)" + }, + "dark": { + "value": "rgb(50, 50, 50)" + } + }, + "menu-item-background-color-down": { + "prop": "--spectrum-menu-item-background-color-down", + "ref": "var(--spectrum-gray-200)", + "light": { + "value": "rgb(233, 233, 233)" + }, + "dark": { + "value": "rgb(50, 50, 50)" + } + }, + "menu-item-background-color-hover": { + "prop": "--spectrum-menu-item-background-color-hover", + "ref": "var(--spectrum-gray-200)", + "light": { + "value": "rgb(233, 233, 233)" + }, + "dark": { + "value": "rgb(50, 50, 50)" + } + }, + "menu-item-background-color-keyboard-focus": { + "prop": "--spectrum-menu-item-background-color-keyboard-focus", + "ref": "var(--spectrum-gray-200)", + "light": { + "value": "rgb(233, 233, 233)" + }, + "dark": { + "value": "rgb(50, 50, 50)" + } + }, + "menu-item-background-opacity": { + "prop": "--spectrum-menu-item-background-opacity", + "ref": "0", + "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-800)", + "light": { + "value": "rgb(215, 50, 32)" + }, + "dark": { + "value": "rgb(223, 52, 34)" + } + }, + "negative-background-color-down": { + "prop": "--spectrum-negative-background-color-down", + "ref": "var(--spectrum-negative-color-700)", + "light": { + "value": "rgb(183, 40, 24)" + }, + "dark": { + "value": "rgb(205, 46, 29)" + } + }, + "negative-background-color-hover": { + "prop": "--spectrum-negative-background-color-hover", + "ref": "var(--spectrum-negative-color-700)", + "light": { + "value": "rgb(183, 40, 24)" + }, + "dark": { + "value": "rgb(205, 46, 29)" + } + }, + "negative-background-color-key-focus": { + "prop": "--spectrum-negative-background-color-key-focus", + "ref": "var(--spectrum-negative-color-700)", + "light": { + "value": "rgb(183, 40, 24)" + }, + "dark": { + "value": "rgb(205, 46, 29)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "negative-subdued-background-color-default": { + "prop": "--spectrum-negative-subdued-background-color-default", + "ref": "var(--spectrum-negative-color-300)", + "light": { + "value": "rgb(255, 235, 232)" + }, + "dark": { + "value": "rgb(87, 17, 7)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "negative-subtle-background-color-default": { + "prop": "--spectrum-negative-subtle-background-color-default", + "ref": "var(--spectrum-negative-color-300)", + "light": { + "value": "rgb(255, 235, 232)" + }, + "dark": { + "value": "rgb(87, 17, 7)" + } + }, + "negative-visual-color": { + "prop": "--spectrum-negative-visual-color", + "ref": "var(--spectrum-negative-color-900)", + "light": { + "value": "rgb(240, 56, 35)" + }, + "dark": { + "value": "rgb(252, 67, 46)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "neutral-subdued-background-color-default": { + "prop": "--spectrum-neutral-subdued-background-color-default", + "ref": "var(--spectrum-gray-500)", + "light": { + "value": "rgb(80, 80, 80)" + }, + "dark": { + "value": "rgb(109, 109, 109)" + } + }, + "neutral-subdued-background-color-down": { + "prop": "--spectrum-neutral-subdued-background-color-down", + "ref": "var(--spectrum-gray-400)", + "light": { + "value": "rgb(41, 41, 41)" + }, + "dark": { + "value": "rgb(68, 68, 68)" + } + }, + "neutral-subdued-background-color-hover": { + "prop": "--spectrum-neutral-subdued-background-color-hover", + "ref": "var(--spectrum-gray-400)", + "light": { + "value": "rgb(41, 41, 41)" + }, + "dark": { + "value": "rgb(68, 68, 68)" + } + }, + "neutral-subdued-background-color-key-focus": { + "prop": "--spectrum-neutral-subdued-background-color-key-focus", + "ref": "var(--spectrum-gray-400)", + "light": { + "value": "rgb(41, 41, 41)" + }, + "dark": { + "value": "rgb(68, 68, 68)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "neutral-subtle-background-color-default": { + "prop": "--spectrum-neutral-subtle-background-color-default", + "ref": "var(--spectrum-gray-300)", + "light": { + "value": "rgb(233, 233, 233)" + }, + "dark": { + "value": "rgb(57, 57, 57)" + } + }, + "neutral-visual-color": { + "prop": "--spectrum-neutral-visual-color", + "ref": "var(--spectrum-gray-600)", + "light": { + "value": "rgb(143, 143, 143)" + }, + "dark": { + "value": "rgb(138, 138, 138)" + } + }, + "notice-background-color-default": { + "prop": "--spectrum-notice-background-color-default", + "ref": "var(--spectrum-notice-color-600)", + "dark": { + "value": "rgb(224, 100, 0)" + }, + "light": { + "value": "rgb(252, 125, 0)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "notice-subtle-background-color-default": { + "prop": "--spectrum-notice-subtle-background-color-default", + "ref": "var(--spectrum-notice-color-300)", + "light": { + "value": "rgb(255, 236, 207)" + }, + "dark": { + "value": "rgb(80, 27, 0)" + } + }, + "notice-visual-color": { + "prop": "--spectrum-notice-visual-color", + "ref": "var(--spectrum-notice-color-900)", + "light": { + "value": "rgb(212, 91, 0)" + }, + "dark": { + "value": "rgb(224, 100, 0)" + } + }, + "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-800)", + "light": { + "value": "rgb(225, 225, 225)" + }, + "dark": { + "value": "rgb(219, 219, 219)" + } + }, + "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", + "ref": "0.3", + "value": "30%" + }, + "orange-100": { + "prop": "--spectrum-orange-100", + "light": { + "value": "rgb(255, 246, 231)" + }, + "dark": { + "value": "rgb(49, 16, 0)" + } + }, + "orange-1000": { + "prop": "--spectrum-orange-1000", + "light": { + "value": "rgb(167, 62, 0)" + }, + "dark": { + "value": "rgb(243, 117, 0)" + } + }, + "orange-1100": { + "prop": "--spectrum-orange-1100", + "light": { + "value": "rgb(144, 51, 0)" + }, + "dark": { + "value": "rgb(255, 137, 0)" + } + }, + "orange-1200": { + "prop": "--spectrum-orange-1200", + "light": { + "value": "rgb(118, 41, 0)" + }, + "dark": { + "value": "rgb(255, 173, 45)" + } + }, + "orange-1300": { + "prop": "--spectrum-orange-1300", + "light": { + "value": "rgb(95, 32, 0)" + }, + "dark": { + "value": "rgb(255, 201, 116)" + } + }, + "orange-1400": { + "prop": "--spectrum-orange-1400", + "light": { + "value": "rgb(73, 24, 0)" + }, + "dark": { + "value": "rgb(255, 225, 178)" + } + }, + "orange-1500": { + "prop": "--spectrum-orange-1500", + "dark": { + "value": "rgb(255, 243, 225)" + }, + "light": { + "value": "rgb(52, 18, 0)" + } + }, + "orange-1600": { + "prop": "--spectrum-orange-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(25, 8, 0)" + } + }, + "orange-200": { + "prop": "--spectrum-orange-200", + "light": { + "value": "rgb(255, 236, 207)" + }, + "dark": { + "value": "rgb(61, 21, 0)" + } + }, + "orange-300": { + "prop": "--spectrum-orange-300", + "light": { + "value": "rgb(255, 218, 158)" + }, + "dark": { + "value": "rgb(80, 27, 0)" + } + }, + "orange-400": { + "prop": "--spectrum-orange-400", + "light": { + "value": "rgb(255, 193, 94)" + }, + "dark": { + "value": "rgb(106, 36, 0)" + } + }, + "orange-500": { + "prop": "--spectrum-orange-500", + "light": { + "value": "rgb(255, 162, 19)" + }, + "dark": { + "value": "rgb(135, 47, 0)" + } + }, + "orange-600": { + "prop": "--spectrum-orange-600", + "light": { + "value": "rgb(252, 125, 0)" + }, + "dark": { + "value": "rgb(162, 59, 0)" + } + }, + "orange-700": { + "prop": "--spectrum-orange-700", + "light": { + "value": "rgb(232, 106, 0)" + }, + "dark": { + "value": "rgb(185, 73, 0)" + } + }, + "orange-800": { + "prop": "--spectrum-orange-800", + "light": { + "value": "rgb(212, 91, 0)" + }, + "dark": { + "value": "rgb(199, 82, 0)" + } + }, + "orange-900": { + "prop": "--spectrum-orange-900", + "light": { + "value": "rgb(194, 78, 0)" + }, + "dark": { + "value": "rgb(224, 100, 0)" + } + }, + "orange-background-color-default": { + "prop": "--spectrum-orange-background-color-default", + "ref": "var(--spectrum-orange-900)", + "light": { + "value": "rgb(252, 125, 0)" + }, + "dark": { + "value": "rgb(224, 100, 0)" + } + }, + "orange-subtle-background-color-default": { + "prop": "--spectrum-orange-subtle-background-color-default", + "ref": "var(--spectrum-orange-300)", + "light": { + "value": "rgb(255, 236, 207)" + }, + "dark": { + "value": "rgb(80, 27, 0)" + } + }, + "orange-visual-color": { + "prop": "--spectrum-orange-visual-color", + "ref": "var(--spectrum-orange-900)", + "light": { + "value": "rgb(232, 106, 0)" + }, + "dark": { + "value": "rgb(224, 100, 0)" + } + }, + "overlay-color": { + "prop": "--spectrum-overlay-color", + "ref": "var(--spectrum-black)", + "value": "rgb(0, 0, 0)" + }, + "overlay-opacity": { + "prop": "--spectrum-overlay-opacity", + "light": { + "ref": "0.4", + "value": "40%" + }, + "dark": { + "ref": "0.6", + "value": "60%" + } + }, + "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)" + } + }, + "pink-1000": { + "prop": "--spectrum-pink-1000", + "dark": { + "value": "rgb(251, 90, 196)" + }, + "light": { + "value": "rgb(176, 31, 123)" + } + }, + "pink-1100": { + "prop": "--spectrum-pink-1100", + "dark": { + "value": "rgb(255, 122, 210)" + }, + "light": { + "value": "rgb(152, 22, 104)" + } + }, + "pink-1200": { + "prop": "--spectrum-pink-1200", + "dark": { + "value": "rgb(255, 159, 223)" + }, + "light": { + "value": "rgb(128, 12, 85)" + } + }, + "pink-1300": { + "prop": "--spectrum-pink-1300", + "dark": { + "value": "rgb(255, 191, 234)" + }, + "light": { + "value": "rgb(105, 3, 68)" + } + }, + "pink-1400": { + "prop": "--spectrum-pink-1400", + "dark": { + "value": "rgb(255, 219, 243)" + }, + "light": { + "value": "rgb(83, 0, 53)" + } + }, + "pink-1500": { + "prop": "--spectrum-pink-1500", + "dark": { + "value": "rgb(255, 241, 250)" + }, + "light": { + "value": "rgb(62, 0, 39)" + } + }, + "pink-1600": { + "prop": "--spectrum-pink-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(33, 0, 21)" + } + }, + "pink-200": { + "prop": "--spectrum-pink-200", + "dark": { + "value": "rgb(71, 0, 44)" + }, + "light": { + "value": "rgb(255, 232, 247)" + } + }, + "pink-300": { + "prop": "--spectrum-pink-300", + "dark": { + "value": "rgb(90, 0, 57)" + }, + "light": { + "value": "rgb(255, 211, 240)" + } + }, + "pink-400": { + "prop": "--spectrum-pink-400", + "dark": { + "value": "rgb(115, 7, 75)" + }, + "light": { + "value": "rgb(255, 181, 230)" + } + }, + "pink-500": { + "prop": "--spectrum-pink-500", + "dark": { + "value": "rgb(143, 18, 97)" + }, + "light": { + "value": "rgb(255, 148, 219)" + } + }, + "pink-600": { + "prop": "--spectrum-pink-600", + "dark": { + "value": "rgb(171, 29, 119)" + }, + "light": { + "value": "rgb(255, 103, 204)" + } + }, + "pink-700": { + "prop": "--spectrum-pink-700", + "dark": { + "value": "rgb(196, 39, 138)" + }, + "light": { + "value": "rgb(242, 76, 184)" + } + }, + "pink-800": { + "prop": "--spectrum-pink-800", + "dark": { + "value": "rgb(213, 45, 151)" + }, + "light": { + "value": "rgb(228, 52, 163)" + } + }, + "pink-900": { + "prop": "--spectrum-pink-900", + "dark": { + "value": "rgb(236, 67, 175)" + }, + "light": { + "value": "rgb(206, 42, 146)" + } + }, + "pink-background-color-default": { + "prop": "--spectrum-pink-background-color-default", + "ref": "var(--spectrum-pink-800)", + "light": { + "value": "rgb(206, 42, 146)" + }, + "dark": { + "value": "rgb(213, 45, 151)" + } + }, + "pink-subtle-background-color-default": { + "prop": "--spectrum-pink-subtle-background-color-default", + "ref": "var(--spectrum-pink-300)", + "light": { + "value": "rgb(255, 232, 247)" + }, + "dark": { + "value": "rgb(90, 0, 57)" + } + }, + "pink-visual-color": { + "prop": "--spectrum-pink-visual-color", + "ref": "var(--spectrum-pink-900)", + "light": { + "value": "rgb(228, 52, 163)" + }, + "dark": { + "value": "rgb(236, 67, 175)" + } + }, + "popover-border-color": { + "prop": "--spectrum-popover-border-color", + "light": { + "ref": "var(--spectrum-transparent-white-25)", + "value": "rgba(255, 255, 255, 0)" + }, + "ref": "var(--spectrum-gray-400)", + "dark": { + "value": "rgb(68, 68, 68)" + } + }, + "popover-border-opacity": { + "prop": "--spectrum-popover-border-opacity", + "light": { + "ref": "0", + "value": "0%" + }, + "dark": { + "ref": "1.0", + "value": "100%" + } + }, + "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-800)", + "light": { + "value": "rgb(5, 131, 78)" + }, + "dark": { + "value": "rgb(6, 136, 80)" + } + }, + "positive-background-color-down": { + "prop": "--spectrum-positive-background-color-down", + "ref": "var(--spectrum-positive-color-700)", + "light": { + "value": "rgb(3, 110, 69)" + }, + "dark": { + "value": "rgb(4, 124, 75)" + } + }, + "positive-background-color-hover": { + "prop": "--spectrum-positive-background-color-hover", + "ref": "var(--spectrum-positive-color-700)", + "light": { + "value": "rgb(3, 110, 69)" + }, + "dark": { + "value": "rgb(4, 124, 75)" + } + }, + "positive-background-color-key-focus": { + "prop": "--spectrum-positive-background-color-key-focus", + "ref": "var(--spectrum-positive-color-700)", + "light": { + "value": "rgb(3, 110, 69)" + }, + "dark": { + "value": "rgb(4, 124, 75)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "positive-subtle-background-color-default": { + "prop": "--spectrum-positive-subtle-background-color-default", + "ref": "var(--spectrum-positive-color-300)", + "light": { + "value": "rgb(215, 247, 225)" + }, + "dark": { + "value": "rgb(0, 51, 38)" + } + }, + "positive-visual-color": { + "prop": "--spectrum-positive-visual-color", + "ref": "var(--spectrum-positive-color-900)", + "light": { + "value": "rgb(7, 147, 85)" + }, + "dark": { + "value": "rgb(9, 157, 89)" + } + }, + "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)" + } + }, + "purple-1000": { + "prop": "--spectrum-purple-1000", + "light": { + "value": "rgb(134, 40, 217)" + }, + "dark": { + "value": "rgb(186, 127, 237)" + } + }, + "purple-1100": { + "prop": "--spectrum-purple-1100", + "light": { + "value": "rgb(115, 13, 204)" + }, + "dark": { + "value": "rgb(197, 149, 240)" + } + }, + "purple-1200": { + "prop": "--spectrum-purple-1200", + "light": { + "value": "rgb(93, 0, 177)" + }, + "dark": { + "value": "rgb(212, 176, 244)" + } + }, + "purple-1300": { + "prop": "--spectrum-purple-1300", + "light": { + "value": "rgb(75, 0, 144)" + }, + "dark": { + "value": "rgb(225, 201, 247)" + } + }, + "purple-1400": { + "prop": "--spectrum-purple-1400", + "light": { + "value": "rgb(59, 0, 111)" + }, + "dark": { + "value": "rgb(238, 224, 250)" + } + }, + "purple-1500": { + "prop": "--spectrum-purple-1500", + "dark": { + "value": "rgb(248, 243, 253)" + }, + "light": { + "value": "rgb(44, 0, 84)" + } + }, + "purple-1600": { + "prop": "--spectrum-purple-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(23, 0, 45)" + } + }, + "purple-200": { + "prop": "--spectrum-purple-200", + "light": { + "value": "rgb(244, 235, 252)" + }, + "dark": { + "value": "rgb(50, 0, 96)" + } + }, + "purple-300": { + "prop": "--spectrum-purple-300", + "light": { + "value": "rgb(235, 218, 249)" + }, + "dark": { + "value": "rgb(64, 0, 122)" + } + }, + "purple-400": { + "prop": "--spectrum-purple-400", + "light": { + "value": "rgb(221, 193, 246)" + }, + "dark": { + "value": "rgb(83, 0, 159)" + } + }, + "purple-500": { + "prop": "--spectrum-purple-500", + "light": { + "value": "rgb(208, 167, 243)" + }, + "dark": { + "value": "rgb(107, 6, 195)" + } + }, + "purple-600": { + "prop": "--spectrum-purple-600", + "light": { + "value": "rgb(191, 138, 238)" + }, + "dark": { + "value": "rgb(130, 34, 215)" + } + }, + "purple-700": { + "prop": "--spectrum-purple-700", + "light": { + "value": "rgb(178, 114, 235)" + }, + "dark": { + "value": "rgb(148, 62, 224)" + } + }, + "purple-800": { + "prop": "--spectrum-purple-800", + "light": { + "value": "rgb(166, 92, 231)" + }, + "dark": { + "value": "rgb(157, 78, 228)" + } + }, + "purple-900": { + "prop": "--spectrum-purple-900", + "light": { + "value": "rgb(154, 71, 226)" + }, + "dark": { + "value": "rgb(173, 105, 233)" + } + }, + "purple-background-color-default": { + "prop": "--spectrum-purple-background-color-default", + "ref": "var(--spectrum-purple-800)", + "light": { + "value": "rgb(154, 71, 226)" + }, + "dark": { + "value": "rgb(157, 78, 228)" + } + }, + "purple-subtle-background-color-default": { + "prop": "--spectrum-purple-subtle-background-color-default", + "ref": "var(--spectrum-purple-300)", + "light": { + "value": "rgb(244, 235, 252)" + }, + "dark": { + "value": "rgb(64, 0, 122)" + } + }, + "purple-visual-color": { + "prop": "--spectrum-purple-visual-color", + "ref": "var(--spectrum-purple-900)", + "light": { + "value": "rgb(166, 92, 231)" + }, + "dark": { + "value": "rgb(173, 105, 233)" + } + }, + "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)" + } + }, + "red-1000": { + "prop": "--spectrum-red-1000", + "light": { + "value": "rgb(183, 40, 24)" + }, + "dark": { + "value": "rgb(255, 103, 86)" + } + }, + "red-1100": { + "prop": "--spectrum-red-1100", + "light": { + "value": "rgb(156, 33, 19)" + }, + "dark": { + "value": "rgb(255, 134, 120)" + } + }, + "red-1200": { + "prop": "--spectrum-red-1200", + "light": { + "value": "rgb(129, 27, 14)" + }, + "dark": { + "value": "rgb(255, 167, 157)" + } + }, + "red-1300": { + "prop": "--spectrum-red-1300", + "light": { + "value": "rgb(104, 21, 10)" + }, + "dark": { + "value": "rgb(255, 196, 189)" + } + }, + "red-1400": { + "prop": "--spectrum-red-1400", + "light": { + "value": "rgb(80, 16, 6)" + }, + "dark": { + "value": "rgb(255, 222, 219)" + } + }, + "red-1500": { + "prop": "--spectrum-red-1500", + "dark": { + "value": "rgb(255, 242, 240)" + }, + "light": { + "value": "rgb(59, 11, 4)" + } + }, + "red-1600": { + "prop": "--spectrum-red-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(29, 5, 2)" + } + }, + "red-200": { + "prop": "--spectrum-red-200", + "light": { + "value": "rgb(255, 235, 232)" + }, + "dark": { + "value": "rgb(68, 13, 5)" + } + }, + "red-300": { + "prop": "--spectrum-red-300", + "light": { + "value": "rgb(255, 214, 209)" + }, + "dark": { + "value": "rgb(87, 17, 7)" + } + }, + "red-400": { + "prop": "--spectrum-red-400", + "light": { + "value": "rgb(255, 188, 180)" + }, + "dark": { + "value": "rgb(115, 24, 11)" + } + }, + "red-500": { + "prop": "--spectrum-red-500", + "light": { + "value": "rgb(255, 157, 145)" + }, + "dark": { + "value": "rgb(147, 31, 17)" + } + }, + "red-600": { + "prop": "--spectrum-red-600", + "light": { + "value": "rgb(255, 118, 101)" + }, + "dark": { + "value": "rgb(177, 38, 23)" + } + }, + "red-700": { + "prop": "--spectrum-red-700", + "light": { + "value": "rgb(255, 81, 61)" + }, + "dark": { + "value": "rgb(205, 46, 29)" + } + }, + "red-800": { + "prop": "--spectrum-red-800", + "light": { + "value": "rgb(240, 56, 35)" + }, + "dark": { + "value": "rgb(223, 52, 34)" + } + }, + "red-900": { + "prop": "--spectrum-red-900", + "light": { + "value": "rgb(215, 50, 32)" + }, + "dark": { + "value": "rgb(252, 67, 46)" + } + }, + "red-background-color-default": { + "prop": "--spectrum-red-background-color-default", + "ref": "var(--spectrum-red-800)", + "light": { + "value": "rgb(215, 50, 32)" + }, + "dark": { + "value": "rgb(223, 52, 34)" + } + }, + "red-subtle-background-color-default": { + "prop": "--spectrum-red-subtle-background-color-default", + "ref": "var(--spectrum-red-300)", + "light": { + "value": "rgb(255, 235, 232)" + }, + "dark": { + "value": "rgb(87, 17, 7)" + } + }, + "red-visual-color": { + "prop": "--spectrum-red-visual-color", + "ref": "var(--spectrum-red-700)", + "light": { + "value": "rgb(240, 56, 35)" + }, + "dark": { + "value": "rgb(205, 46, 29)" + } + }, + "regular-font-weight": { + "prop": "--spectrum-regular-font-weight", + "ref": "regular", + "value": "400" + }, + "sans-font-family-stack": { + "prop": "--spectrum-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" + }, + "sans-serif-font": { + "prop": "--spectrum-sans-serif-font", + "ref": "var(--spectrum-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" + }, + "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)" + } + }, + "seafoam-1000": { + "prop": "--spectrum-seafoam-1000", + "light": { + "value": "rgb(5, 108, 92)" + }, + "dark": { + "value": "rgb(12, 173, 142)" + } + }, + "seafoam-1100": { + "prop": "--spectrum-seafoam-1100", + "light": { + "value": "rgb(3, 92, 80)" + }, + "dark": { + "value": "rgb(14, 190, 156)" + } + }, + "seafoam-1200": { + "prop": "--spectrum-seafoam-1200", + "light": { + "value": "rgb(1, 75, 67)" + }, + "dark": { + "value": "rgb(29, 214, 176)" + } + }, + "seafoam-1300": { + "prop": "--spectrum-seafoam-1300", + "light": { + "value": "rgb(0, 60, 54)" + }, + "dark": { + "value": "rgb(122, 229, 203)" + } + }, + "seafoam-1400": { + "prop": "--spectrum-seafoam-1400", + "light": { + "value": "rgb(0, 46, 40)" + }, + "dark": { + "value": "rgb(186, 241, 222)" + } + }, + "seafoam-1500": { + "prop": "--spectrum-seafoam-1500", + "dark": { + "value": "rgb(229, 249, 243)" + }, + "light": { + "value": "rgb(0, 33, 29)" + } + }, + "seafoam-1600": { + "prop": "--spectrum-seafoam-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 15, 14)" + } + }, + "seafoam-200": { + "prop": "--spectrum-seafoam-200", + "light": { + "value": "rgb(211, 246, 234)" + }, + "dark": { + "value": "rgb(0, 39, 35)" + } + }, + "seafoam-300": { + "prop": "--spectrum-seafoam-300", + "light": { + "value": "rgb(169, 237, 216)" + }, + "dark": { + "value": "rgb(0, 50, 44)" + } + }, + "seafoam-400": { + "prop": "--spectrum-seafoam-400", + "light": { + "value": "rgb(92, 225, 194)" + }, + "dark": { + "value": "rgb(0, 67, 59)" + } + }, + "seafoam-500": { + "prop": "--spectrum-seafoam-500", + "light": { + "value": "rgb(16, 207, 169)" + }, + "dark": { + "value": "rgb(2, 86, 75)" + } + }, + "seafoam-600": { + "prop": "--spectrum-seafoam-600", + "light": { + "value": "rgb(13, 181, 149)" + }, + "dark": { + "value": "rgb(4, 105, 89)" + } + }, + "seafoam-700": { + "prop": "--spectrum-seafoam-700", + "light": { + "value": "rgb(11, 162, 134)" + }, + "dark": { + "value": "rgb(6, 122, 103)" + } + }, + "seafoam-800": { + "prop": "--spectrum-seafoam-800", + "light": { + "value": "rgb(9, 144, 120)" + }, + "dark": { + "value": "rgb(8, 134, 112)" + } + }, + "seafoam-900": { + "prop": "--spectrum-seafoam-900", + "light": { + "value": "rgb(7, 129, 109)" + }, + "dark": { + "value": "rgb(10, 154, 128)" + } + }, + "seafoam-background-color-default": { + "prop": "--spectrum-seafoam-background-color-default", + "ref": "var(--spectrum-seafoam-800)", + "light": { + "value": "rgb(7, 129, 109)" + }, + "dark": { + "value": "rgb(8, 134, 112)" + } + }, + "seafoam-subtle-background-color-default": { + "prop": "--spectrum-seafoam-subtle-background-color-default", + "ref": "var(--spectrum-seafoam-300)", + "light": { + "value": "rgb(211, 246, 234)" + }, + "dark": { + "value": "rgb(0, 50, 44)" + } + }, + "seafoam-visual-color": { + "prop": "--spectrum-seafoam-visual-color", + "ref": "var(--spectrum-seafoam-800)", + "light": { + "value": "rgb(11, 162, 134)" + }, + "dark": { + "value": "rgb(8, 134, 112)" + } + }, + "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)" + } + }, + "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": { + "prop": "--spectrum-serif-font", + "ref": "var(--spectrum-serif-font-family-stack)", + "value": "adobe-clean-serif, var(--spectrum-serif-font-family), \"Source Serif Pro\", Georgia, serif" + }, + "serif-font-family": { + "prop": "--spectrum-serif-font-family", + "value": "Adobe Clean Serif" + }, + "serif-font-family-stack": { + "prop": "--spectrum-serif-font-family-stack", + "value": "adobe-clean-serif, var(--spectrum-serif-font-family), \"Source Serif Pro\", Georgia, 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)" + } + }, + "silver-1000": { + "prop": "--spectrum-silver-1000", + "dark": { + "value": "rgb(152, 152, 152)" + }, + "light": { + "value": "rgb(96, 96, 96)" + } + }, + "silver-1100": { + "prop": "--spectrum-silver-1100", + "dark": { + "value": "rgb(169, 169, 169)" + }, + "light": { + "value": "rgb(81, 81, 81)" + } + }, + "silver-1200": { + "prop": "--spectrum-silver-1200", + "dark": { + "value": "rgb(190, 190, 190)" + }, + "light": { + "value": "rgb(66, 66, 66)" + } + }, + "silver-1300": { + "prop": "--spectrum-silver-1300", + "dark": { + "value": "rgb(211, 211, 211)" + }, + "light": { + "value": "rgb(52, 52, 52)" + } + }, + "silver-1400": { + "prop": "--spectrum-silver-1400", + "dark": { + "value": "rgb(229, 229, 229)" + }, + "light": { + "value": "rgb(39, 39, 39)" + } + }, + "silver-1500": { + "prop": "--spectrum-silver-1500", + "dark": { + "value": "rgb(244, 244, 244)" + }, + "light": { + "value": "rgb(28, 28, 28)" + } + }, + "silver-1600": { + "prop": "--spectrum-silver-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(12, 12, 12)" + } + }, + "silver-200": { + "prop": "--spectrum-silver-200", + "dark": { + "value": "rgb(33, 33, 33)" + }, + "light": { + "value": "rgb(239, 239, 239)" + } + }, + "silver-300": { + "prop": "--spectrum-silver-300", + "dark": { + "value": "rgb(44, 44, 44)" + }, + "light": { + "value": "rgb(223, 223, 223)" + } + }, + "silver-400": { + "prop": "--spectrum-silver-400", + "dark": { + "value": "rgb(59, 59, 59)" + }, + "light": { + "value": "rgb(204, 204, 204)" + } + }, + "silver-500": { + "prop": "--spectrum-silver-500", + "dark": { + "value": "rgb(76, 76, 76)" + }, + "light": { + "value": "rgb(183, 183, 183)" + } + }, + "silver-600": { + "prop": "--spectrum-silver-600", + "dark": { + "value": "rgb(92, 92, 92)" + }, + "light": { + "value": "rgb(160, 160, 160)" + } + }, + "silver-700": { + "prop": "--spectrum-silver-700", + "dark": { + "value": "rgb(108, 108, 108)" + }, + "light": { + "value": "rgb(143, 143, 143)" + } + }, + "silver-800": { + "prop": "--spectrum-silver-800", + "dark": { + "value": "rgb(118, 118, 118)" + }, + "light": { + "value": "rgb(128, 128, 128)" + } + }, + "silver-900": { + "prop": "--spectrum-silver-900", + "dark": { + "value": "rgb(137, 137, 137)" + }, + "light": { + "value": "rgb(114, 114, 114)" + } + }, + "silver-background-color-default": { + "prop": "--spectrum-silver-background-color-default", + "ref": "var(--spectrum-silver-800)", + "light": { + "value": "rgb(114, 114, 114)" + }, + "dark": { + "value": "rgb(118, 118, 118)" + } + }, + "silver-subtle-background-color-default": { + "prop": "--spectrum-silver-subtle-background-color-default", + "ref": "var(--spectrum-silver-300)", + "light": { + "value": "rgb(239, 239, 239)" + }, + "dark": { + "value": "rgb(44, 44, 44)" + } + }, + "silver-visual-color": { + "prop": "--spectrum-silver-visual-color", + "ref": "var(--spectrum-silver-900)", + "light": { + "value": "rgb(128, 128, 128)" + }, + "dark": { + "value": "rgb(137, 137, 137)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "stack-item-selected-background-color-emphasized": { + "prop": "--spectrum-stack-item-selected-background-color-emphasized", + "ref": "var(--spectrum-accent-color-800)", + "light": { + "value": "rgb(59, 99, 251)" + }, + "dark": { + "value": "rgb(64, 105, 253)" + } + }, + "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)" + } + }, + "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)" + } + }, + "stack-item-selected-background-opacity-emphasized": { + "prop": "--spectrum-stack-item-selected-background-opacity-emphasized", + "ref": "0.1", + "value": "10%" + }, + "stack-item-selected-background-opacity-emphasized-down": { + "prop": "--spectrum-stack-item-selected-background-opacity-emphasized-down", + "ref": "0.15", + "value": "15%" + }, + "stack-item-selected-background-opacity-emphasized-hover": { + "prop": "--spectrum-stack-item-selected-background-opacity-emphasized-hover", + "ref": "0.15", + "value": "15%" + }, + "stack-item-selected-background-opacity-emphasized-key-focus": { + "prop": "--spectrum-stack-item-selected-background-opacity-emphasized-key-focus", + "ref": "0.15", + "value": "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": "16px" + }, + "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": "22px" + }, + "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-200)", + "light": { + "value": "rgb(225, 225, 225)" + }, + "dark": { + "value": "rgb(50, 50, 50)" + } + }, + "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)" + } + }, + "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)" + } + }, + "swatch-border-opacity": { + "prop": "--spectrum-swatch-border-opacity", + "ref": "0.42", + "value": "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", + "ref": "0.42", + "value": "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)" + } + }, + "swatch-group-border-opacity": { + "prop": "--spectrum-swatch-group-border-opacity", + "ref": "0.2", + "value": "20%" + }, + "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", + "ref": "0.1", + "value": "10%" + }, + "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)" + } + }, + "table-row-hover-opacity": { + "prop": "--spectrum-table-row-hover-opacity", + "ref": "0.07", + "value": "7.000000000000001%" + }, + "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-color-800)", + "light": { + "value": "rgb(59, 99, 251)" + }, + "dark": { + "value": "rgb(64, 105, 253)" + } + }, + "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)" + } + }, + "table-selected-row-background-opacity": { + "prop": "--spectrum-table-selected-row-background-opacity", + "ref": "0.1", + "value": "10%" + }, + "table-selected-row-background-opacity-hover": { + "prop": "--spectrum-table-selected-row-background-opacity-hover", + "ref": "0.15", + "value": "15%" + }, + "table-selected-row-background-opacity-non-emphasized": { + "prop": "--spectrum-table-selected-row-background-opacity-non-emphasized", + "ref": "0.1", + "value": "10%" + }, + "table-selected-row-background-opacity-non-emphasized-hover": { + "prop": "--spectrum-table-selected-row-background-opacity-non-emphasized-hover", + "ref": "0.15", + "value": "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)" + } + }, + "thumbnail-border-opacity": { + "prop": "--spectrum-thumbnail-border-opacity", + "ref": "0.1", + "value": "10%" + }, + "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": "30%" + }, + "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)" + } + }, + "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)" + } + }, + "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)" + } + }, + "tree-view-selected-row-background-color-emphasized": { + "prop": "--spectrum-tree-view-selected-row-background-color-emphasized", + "ref": "var(--spectrum-informative-color-800)", + "light": { + "value": "rgb(59, 99, 251)" + }, + "dark": { + "value": "rgb(64, 105, 253)" + } + }, + "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)" + } + }, + "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)" + } + }, + "tree-view-selected-row-background-opacity-emphasized": { + "prop": "--spectrum-tree-view-selected-row-background-opacity-emphasized", + "ref": "0.1", + "value": "10%" + }, + "tree-view-selected-row-background-opacity-emphasized-hover": { + "prop": "--spectrum-tree-view-selected-row-background-opacity-emphasized-hover", + "ref": "0.15", + "value": "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)" + } + }, + "turquoise-1000": { + "prop": "--spectrum-turquoise-1000", + "dark": { + "value": "rgb(13, 168, 182)" + }, + "light": { + "value": "rgb(5, 107, 116)" + } + }, + "turquoise-1100": { + "prop": "--spectrum-turquoise-1100", + "dark": { + "value": "rgb(16, 186, 202)" + }, + "light": { + "value": "rgb(3, 90, 98)" + } + }, + "turquoise-1200": { + "prop": "--spectrum-turquoise-1200", + "dark": { + "value": "rgb(64, 208, 220)" + }, + "light": { + "value": "rgb(1, 74, 81)" + } + }, + "turquoise-1300": { + "prop": "--spectrum-turquoise-1300", + "dark": { + "value": "rgb(128, 225, 231)" + }, + "light": { + "value": "rgb(0, 59, 65)" + } + }, + "turquoise-1400": { + "prop": "--spectrum-turquoise-1400", + "dark": { + "value": "rgb(183, 240, 240)" + }, + "light": { + "value": "rgb(0, 44, 49)" + } + }, + "turquoise-1500": { + "prop": "--spectrum-turquoise-1500", + "dark": { + "value": "rgb(228, 249, 249)" + }, + "light": { + "value": "rgb(0, 32, 35)" + } + }, + "turquoise-1600": { + "prop": "--spectrum-turquoise-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 15, 17)" + } + }, + "turquoise-200": { + "prop": "--spectrum-turquoise-200", + "dark": { + "value": "rgb(0, 37, 41)" + }, + "light": { + "value": "rgb(209, 245, 245)" + } + }, + "turquoise-300": { + "prop": "--spectrum-turquoise-300", + "dark": { + "value": "rgb(0, 49, 54)" + }, + "light": { + "value": "rgb(169, 236, 237)" + } + }, + "turquoise-400": { + "prop": "--spectrum-turquoise-400", + "dark": { + "value": "rgb(0, 66, 72)" + }, + "light": { + "value": "rgb(111, 221, 228)" + } + }, + "turquoise-500": { + "prop": "--spectrum-turquoise-500", + "dark": { + "value": "rgb(3, 84, 92)" + }, + "light": { + "value": "rgb(39, 202, 216)" + } + }, + "turquoise-600": { + "prop": "--spectrum-turquoise-600", + "dark": { + "value": "rgb(5, 103, 112)" + }, + "light": { + "value": "rgb(15, 177, 192)" + } + }, + "turquoise-700": { + "prop": "--spectrum-turquoise-700", + "dark": { + "value": "rgb(7, 120, 131)" + }, + "light": { + "value": "rgb(12, 158, 171)" + } + }, + "turquoise-800": { + "prop": "--spectrum-turquoise-800", + "dark": { + "value": "rgb(9, 131, 142)" + }, + "light": { + "value": "rgb(10, 141, 153)" + } + }, + "turquoise-900": { + "prop": "--spectrum-turquoise-900", + "dark": { + "value": "rgb(11, 151, 164)" + }, + "light": { + "value": "rgb(8, 126, 137)" + } + }, + "turquoise-background-color-default": { + "prop": "--spectrum-turquoise-background-color-default", + "ref": "var(--spectrum-turquoise-800)", + "light": { + "value": "rgb(8, 126, 137)" + }, + "dark": { + "value": "rgb(9, 131, 142)" + } + }, + "turquoise-subtle-background-color-default": { + "prop": "--spectrum-turquoise-subtle-background-color-default", + "ref": "var(--spectrum-turquoise-300)", + "light": { + "value": "rgb(209, 245, 245)" + }, + "dark": { + "value": "rgb(0, 49, 54)" + } + }, + "turquoise-visual-color": { + "prop": "--spectrum-turquoise-visual-color", + "ref": "var(--spectrum-turquoise-900)", + "light": { + "value": "rgb(10, 141, 153)" + }, + "dark": { + "value": "rgb(11, 151, 164)" + } + }, + "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)" + } + }, + "yellow-1000": { + "prop": "--spectrum-yellow-1000", + "light": { + "value": "rgb(134, 85, 0)" + }, + "dark": { + "value": "rgb(203, 141, 0)" + } + }, + "yellow-1100": { + "prop": "--spectrum-yellow-1100", + "light": { + "value": "rgb(114, 72, 0)" + }, + "dark": { + "value": "rgb(218, 159, 0)" + } + }, + "yellow-1200": { + "prop": "--spectrum-yellow-1200", + "light": { + "value": "rgb(93, 59, 0)" + }, + "dark": { + "value": "rgb(235, 183, 0)" + } + }, + "yellow-1300": { + "prop": "--spectrum-yellow-1300", + "light": { + "value": "rgb(75, 47, 0)" + }, + "dark": { + "value": "rgb(249, 206, 0)" + } + }, + "yellow-1400": { + "prop": "--spectrum-yellow-1400", + "light": { + "value": "rgb(56, 35, 0)" + }, + "dark": { + "value": "rgb(255, 230, 86)" + } + }, + "yellow-1500": { + "prop": "--spectrum-yellow-1500", + "dark": { + "value": "rgb(255, 246, 195)" + }, + "light": { + "value": "rgb(40, 25, 0)" + } + }, + "yellow-1600": { + "prop": "--spectrum-yellow-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(18, 11, 0)" + } + }, + "yellow-200": { + "prop": "--spectrum-yellow-200", + "light": { + "value": "rgb(255, 241, 151)" + }, + "dark": { + "value": "rgb(47, 29, 0)" + } + }, + "yellow-300": { + "prop": "--spectrum-yellow-300", + "light": { + "value": "rgb(255, 222, 44)" + }, + "dark": { + "value": "rgb(61, 39, 0)" + } + }, + "yellow-400": { + "prop": "--spectrum-yellow-400", + "light": { + "value": "rgb(245, 199, 0)" + }, + "dark": { + "value": "rgb(83, 52, 0)" + } + }, + "yellow-500": { + "prop": "--spectrum-yellow-500", + "light": { + "value": "rgb(230, 175, 0)" + }, + "dark": { + "value": "rgb(107, 67, 0)" + } + }, + "yellow-600": { + "prop": "--spectrum-yellow-600", + "light": { + "value": "rgb(210, 149, 0)" + }, + "dark": { + "value": "rgb(130, 82, 0)" + } + }, + "yellow-700": { + "prop": "--spectrum-yellow-700", + "light": { + "value": "rgb(193, 131, 0)" + }, + "dark": { + "value": "rgb(151, 97, 0)" + } + }, + "yellow-800": { + "prop": "--spectrum-yellow-800", + "light": { + "value": "rgb(175, 116, 0)" + }, + "dark": { + "value": "rgb(164, 106, 0)" + } + }, + "yellow-900": { + "prop": "--spectrum-yellow-900", + "light": { + "value": "rgb(158, 102, 0)" + }, + "dark": { + "value": "rgb(186, 124, 0)" + } + }, + "yellow-background-color-default": { + "prop": "--spectrum-yellow-background-color-default", + "ref": "var(--spectrum-yellow-1100)", + "light": { + "value": "rgb(245, 199, 0)" + }, + "dark": { + "value": "rgb(218, 159, 0)" + } + }, + "yellow-subtle-background-color-default": { + "prop": "--spectrum-yellow-subtle-background-color-default", + "ref": "var(--spectrum-yellow-300)", + "light": { + "value": "rgb(255, 241, 151)" + }, + "dark": { + "value": "rgb(61, 39, 0)" + } + }, + "yellow-visual-color": { + "prop": "--spectrum-yellow-visual-color", + "ref": "var(--spectrum-yellow-1100)", + "light": { + "value": "rgb(210, 149, 0)" + }, + "dark": { + "value": "rgb(218, 159, 0)" + } + } +} diff --git a/tokens/package.json b/tokens/package.json index f90763464fa..48f328609f0 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -23,16 +23,29 @@ }, "main": "dist/css/index.css", "module": "style-dictionary.config.js", + "scripts": { + "build": "run-s clean build:tokens build:entry build:format build:min", + "build:entry": "postcss ./dist/css/index.css --replace", + "build:format": "prettier --write --cache --log-level error --ignore-unknown --no-error-on-unmatched-pattern ./dist/*/*", + "build:min": "postcss ./dist/css/index.css --dir ./dist/css --ext min.css", + "build:tokens": "style-dictionary build --config style-dictionary.config.js --verbose", + "clean": "rimraf dist", + "compare": "tdiff report --old-token-version @adobe/spectrum-tokens@${1:-13.7.0} --new-token-version @adobe/spectrum-tokens@${2:-13.9.0} --format markdown --output dist/tokens-diff.md" + }, "devDependencies": { "@adobe/spectrum-tokens": "13.15.0", "@adobe/token-diff-generator": "^2.0.0", - "@spectrum-tools/postcss-rgb-mapping": "1.1.0", "deepmerge": "^4.3.1", "glob": "^11.0.3", "lodash-es": "^4.17.21", + "npm-run-all2": "^8.0.4", "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..1c6ccc5ad58 100644 --- a/tokens/postcss.config.js +++ b/tokens/postcss.config.js @@ -13,32 +13,25 @@ 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, - }, "postcss-sorting": { 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..c387e473dc8 100644 --- a/tokens/project.json +++ b/tokens/project.json @@ -2,83 +2,59 @@ "name": "tokens", "tag": ["tokens"], "namedInputs": { - "core": [ - "{projectRoot}/custom/*.css" - ], + "core": ["{projectRoot}/custom/*.css"], "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"] }], - "options": { - "commands": [ - "node --no-warnings ./tasks/token-rollup.js" - ], - "cwd": "{projectRoot}", - "parallel": false - }, - "outputs": [ - "{projectRoot}/dist/css/*-vars.css", - "{projectRoot}/dist/css/index.css" - ] - }, - "clean": { - "cache": false, - "executor": "nx:run-commands", - "inputs": ["{projectRoot}/dist", { "externalDependencies": ["rimraf"] }], - "options": { - "commands": [ - "rimraf {projectRoot}/dist", - "test -d {projectRoot}/dist && echo \"Error: dist directory could not be removed\" && exit 1 || exit 0" - ], - "parallel": false - }, - "outputs": [] - }, - "diff": { - "cache": true, - "executor": "nx:run-commands", + "options": { + "commands": [ + "style-dictionary build --config style-dictionary.config.js --verbose", + "postcss ./dist/css/index.css --replace", + "postcss ./dist/css/index.css --dir ./dist/css --ext min.css", + "prettier --write --cache --log-level error --ignore-unknown --no-error-on-unmatched-pattern ./dist/*/*" + ], + "cwd": "{projectRoot}", + "parallel": false + }, + "outputs": [ + "{projectRoot}/dist/css/index.css", + "{projectRoot}/dist/css/index.min.css", + "{projectRoot}/dist/json/tokens.json" + ] + }, + "clean": { + "cache": false, + "executor": "nx:run-commands", + "inputs": ["{projectRoot}/dist", { "externalDependencies": ["rimraf"] }], + "options": { + "commands": [ + "rimraf {projectRoot}/dist", + "test -d {projectRoot}/dist && echo \"Error: dist directory could not be removed\" && exit 1 || exit 0" + ], + "parallel": false + }, + "outputs": [] + }, + "compare": { + "cache": true, + "executor": "nx:run-commands", "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" + "tdiff report --old-token-version @adobe/spectrum-tokens@{args.v1} --new-token-version @adobe/spectrum-tokens@{args.v2} --format markdown --output ./dist/tokens-diff.md" ], "forwardAllArgs": true, - "v1": "13.13.0", - "v2": "13.14.0" - }, - "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}" + "v1": "13.10.0" }, - "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" - ] - } - } + "outputs": ["{projectRoot}/dist/tokens-diff.md"] + }, + "format": {}, + "lint": {} + } } diff --git a/tokens/style-dictionary.config.js b/tokens/style-dictionary.config.js index 25dbaaa04a0..09d8c12c369 100644 --- a/tokens/style-dictionary.config.js +++ b/tokens/style-dictionary.config.js @@ -11,23 +11,25 @@ * governing permissions and limitations under the License. */ -import { dirname, join, sep } from "path"; +import fg from "fast-glob"; +import { capitalize } from "lodash-es"; +import { basename, dirname, join, resolve, sep } from "path"; +import { fileURLToPath } from "url"; + +const __dirname = fileURLToPath(new URL(".", import.meta.url)); 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,126 +41,94 @@ 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", "../components/accordion/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; + // 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: ["desktop"], - }, - destination: "medium-vars.css", + destination: "mobile.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; + // 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; }, }, - { - format: "css/sets", - options: { - showFileHeader: false, - outputReferences: true, - sets: ["mobile"], - }, - destination: "large-vars.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; - }, - }, - { + ], + }, + components: { + buildPath: resolve(__dirname, "..", "components") + sep, + prefix: "spectrum", + outputReferences: true, + outputReferenceFallbacks: true, + showFileHeader: false, + transforms: [ + "name/kebab", + CSSOpenTypeTransform.name, + CSSBorderRoundingTransform.name, + CSSOpacityPercentTransform.name, + ], + files: [ + // Iterate over all files in the components folder and build a css file for each + ...(fg.sync("accordion/tokens.json", { cwd: resolve(__dirname, "..", "components") })).map((pkg) => ({ format: "css/sets", + destination: `${dirname(pkg)}/dist/${basename(pkg, ".json")}.css`, options: { - showFileHeader: false, - outputReferences: true, - sets: ["dark"], + selector: `.spectrum-${capitalize(dirname(pkg))}`, }, - 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; + if (token.filePath?.includes(pkg)) return true; + if (token.component == dirname(pkg)) return true; return false; }, - }, + })), ], }, 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", - destination: "raw.json", - options: { - showFileHeader: false, - outputReferences: true, - }, - }, { format: "json/sets", destination: "tokens.json", 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 f48f728e2de..9f2a612f19c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -131,7 +131,6 @@ __metadata: "@changesets/cli": "npm:^2.29.7" "@commitlint/cli": "npm:^19.8.1" "@commitlint/config-conventional": "npm:^19.8.1" - "@spectrum-tools/postcss-rgb-mapping": "npm:1.1.0" "@yarnpkg/types": "npm:^4.0.1" at-rule-packer: "npm:^0.5.0" autoprefixer: "npm:^10.4.21" @@ -883,13 +882,29 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5": +"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8": version: 7.28.3 resolution: "@babel/runtime@npm:7.28.3" checksum: 10c0/b360f82c2c5114f2a062d4d143d7b4ec690094764853937110585a9497977aed66c102166d0e404766c274e02a50ffb8f6d77fef7251ecf3f607f0e03e6397bc languageName: node linkType: hard +"@babel/runtime@npm:^7.3.1": + version: 7.27.1 + resolution: "@babel/runtime@npm:7.27.1" + checksum: 10c0/530a7332f86ac5a7442250456823a930906911d895c0b743bf1852efc88a20a016ed4cd26d442d0ca40ae6d5448111e02a08dd638a4f1064b47d080e2875dc05 + languageName: node + linkType: hard + +"@babel/runtime@npm:^7.5.5": + version: 7.24.4 + resolution: "@babel/runtime@npm:7.24.4" + dependencies: + regenerator-runtime: "npm:^0.14.0" + checksum: 10c0/785aff96a3aa8ff97f90958e1e8a7b1d47f793b204b47c6455eaadc3f694f48c97cd5c0a921fe3596d818e71f18106610a164fb0f1c71fd68c622a58269d537c + languageName: node + linkType: hard + "@babel/template@npm:^7.22.5, @babel/template@npm:^7.3.3": version: 7.26.9 resolution: "@babel/template@npm:7.26.9" @@ -963,7 +978,7 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.26.10, @babel/types@npm:^7.26.9": +"@babel/types@npm:^7.26.10": version: 7.26.10 resolution: "@babel/types@npm:7.26.10" dependencies: @@ -973,6 +988,16 @@ __metadata: languageName: node linkType: hard +"@babel/types@npm:^7.26.9": + version: 7.26.9 + resolution: "@babel/types@npm:7.26.9" + dependencies: + "@babel/helper-string-parser": "npm:^7.25.9" + "@babel/helper-validator-identifier": "npm:^7.25.9" + checksum: 10c0/999c56269ba00e5c57aa711fbe7ff071cd6990bafd1b978341ea7572cc78919986e2aa6ee51dacf4b6a7a6fa63ba4eb3f1a03cf55eee31b896a56d068b895964 + languageName: node + linkType: hard + "@babel/types@npm:^7.27.1": version: 7.27.1 resolution: "@babel/types@npm:7.27.1" @@ -3955,7 +3980,22 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/actionbutton@npm:8.0.0-next.3, @spectrum-css/actionbutton@workspace:components/actionbutton": +"@spectrum-css/actionbutton@npm:8.0.0-next.3": + version: 8.0.0-next.3 + resolution: "@spectrum-css/actionbutton@npm:8.0.0-next.3" + peerDependencies: + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/icon": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/0031bcc5d2c2fe6552139076a3abffafde317b01bb4fbd47d950e4de3c182146a9b86b6670be7a0034abb7acb23c2a56ddd73f9b23ea07e99b8f1a1914dd0e2f + languageName: node + linkType: hard + +"@spectrum-css/actionbutton@workspace:components/actionbutton": version: 0.0.0-use.local resolution: "@spectrum-css/actionbutton@workspace:components/actionbutton" dependencies: @@ -4019,7 +4059,31 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/alertbanner@npm:4.0.0-next.3, @spectrum-css/alertbanner@workspace:components/alertbanner": +"@spectrum-css/alertbanner@npm:4.0.0-next.3": + version: 4.0.0-next.3 + resolution: "@spectrum-css/alertbanner@npm:4.0.0-next.3" + peerDependencies: + "@spectrum-css/button": ">=15.0.0-next.0" + "@spectrum-css/closebutton": ">=7.0.0-next.0" + "@spectrum-css/divider": ">=6.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/button": + optional: true + "@spectrum-css/closebutton": + optional: true + "@spectrum-css/divider": + optional: true + "@spectrum-css/icon": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/218f89df6b231f633a31107bd590082f5b634cc3fd931119fa2c55d2c7212b39712849f34e56ba165bf02d7d5a6501716b647b7d1b07e63a2d1b26569aa20f2c + languageName: node + linkType: hard + +"@spectrum-css/alertbanner@workspace:components/alertbanner": version: 0.0.0-use.local resolution: "@spectrum-css/alertbanner@workspace:components/alertbanner" dependencies: @@ -4094,7 +4158,22 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/assetcard@npm:6.0.0-next.2, @spectrum-css/assetcard@workspace:components/assetcard": +"@spectrum-css/assetcard@npm:6.0.0-next.2": + version: 6.0.0-next.2 + resolution: "@spectrum-css/assetcard@npm:6.0.0-next.2" + peerDependencies: + "@spectrum-css/checkbox": ">=11.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/checkbox": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/03ff6ec7fa2efb2654a31f5c85c1f04deb664ce139b79aa67de94e447941f663b30eaa1cacab7e0aa7abab284cd72c58c21edec87bc030ef2f05c390e95d162d + languageName: node + linkType: hard + +"@spectrum-css/assetcard@workspace:components/assetcard": version: 0.0.0-use.local resolution: "@spectrum-css/assetcard@workspace:components/assetcard" dependencies: @@ -4111,7 +4190,25 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/assetlist@npm:9.0.0-next.2, @spectrum-css/assetlist@workspace:components/assetlist": +"@spectrum-css/assetlist@npm:9.0.0-next.2": + version: 9.0.0-next.2 + resolution: "@spectrum-css/assetlist@npm:9.0.0-next.2" + peerDependencies: + "@spectrum-css/checkbox": ">=11.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/checkbox": + optional: true + "@spectrum-css/icon": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/b50c81756d5b5a5de5188029b6cfc7e6b55c4537018809e28fc36d925649630c3bacc5e12e30e3f8be74f1c5c200095c497b296984b3a49b9d2a38c024d0c3a5 + languageName: node + linkType: hard + +"@spectrum-css/assetlist@workspace:components/assetlist": version: 0.0.0-use.local resolution: "@spectrum-css/assetlist@workspace:components/assetlist" dependencies: @@ -4162,7 +4259,25 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/breadcrumb@npm:12.0.0-next.3, @spectrum-css/breadcrumb@workspace:components/breadcrumb": +"@spectrum-css/breadcrumb@npm:12.0.0-next.3": + version: 12.0.0-next.3 + resolution: "@spectrum-css/breadcrumb@npm:12.0.0-next.3" + peerDependencies: + "@spectrum-css/actionbutton": ">=8.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/actionbutton": + optional: true + "@spectrum-css/icon": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/8d3d864034af231eeff1bc248b4c1590ccde04f30b35f69661974b30499e87c421759894a3844e5bf6adcb2b4e610283ca052bdad51d96aa2c854bd58ace61a1 + languageName: node + linkType: hard + +"@spectrum-css/breadcrumb@workspace:components/breadcrumb": version: 0.0.0-use.local resolution: "@spectrum-css/breadcrumb@workspace:components/breadcrumb" dependencies: @@ -4317,7 +4432,22 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/calendar@npm:8.0.0-next.3, @spectrum-css/calendar@workspace:components/calendar": +"@spectrum-css/calendar@npm:8.0.0-next.3": + version: 8.0.0-next.3 + resolution: "@spectrum-css/calendar@npm:8.0.0-next.3" + peerDependencies: + "@spectrum-css/actionbutton": ">=8.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/actionbutton": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/3ee78b39643be59f58e98747151d7200021317aa06c8963d7a1f14a684aeca58d8d645e73f6b693fc2f747363f3c6ce0efa7614e4849c8c3ba60c976506bd155 + languageName: node + linkType: hard + +"@spectrum-css/calendar@workspace:components/calendar": version: 0.0.0-use.local resolution: "@spectrum-css/calendar@workspace:components/calendar" dependencies: @@ -4334,7 +4464,37 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/card@npm:12.0.0-next.3, @spectrum-css/card@workspace:components/card": +"@spectrum-css/card@npm:12.0.0-next.3": + version: 12.0.0-next.3 + resolution: "@spectrum-css/card@npm:12.0.0-next.3" + peerDependencies: + "@spectrum-css/actionbutton": ">=8.0.0-next.0" + "@spectrum-css/asset": ">=8.0.0-next.0" + "@spectrum-css/checkbox": ">=11.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/quickaction": ">=3" + "@spectrum-css/tokens": ">=16.1.0-next.0" + "@spectrum-css/typography": ">=9.0.0-next.0" + peerDependenciesMeta: + "@spectrum-css/actionbutton": + optional: true + "@spectrum-css/asset": + optional: true + "@spectrum-css/checkbox": + optional: true + "@spectrum-css/icon": + optional: true + "@spectrum-css/quickaction": + optional: true + "@spectrum-css/tokens": + optional: true + "@spectrum-css/typography": + optional: true + checksum: 10c0/268f90f6cd56cf27cf262f07df2b413acd44e4e47d57479ca2d080ec6b4b7be22a205f1404562e14caa475944aa9417c5c78d2908c9025251f9493ab8468ca18 + languageName: node + linkType: hard + +"@spectrum-css/card@workspace:components/card": version: 0.0.0-use.local resolution: "@spectrum-css/card@workspace:components/card" dependencies: @@ -4387,7 +4547,22 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/clearbutton@npm:8.0.0-next.2, @spectrum-css/clearbutton@workspace:components/clearbutton": +"@spectrum-css/clearbutton@npm:8.0.0-next.2": + version: 8.0.0-next.2 + resolution: "@spectrum-css/clearbutton@npm:8.0.0-next.2" + peerDependencies: + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/icon": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/8c54154e6f1fa284b27fa8dab736cc66453450590c24f0d9c69afa7e35d3f32589c52b5b79abe9a64cf556e7cf813c00d254ba28e9a5ae31365323bf8be0dfa2 + languageName: node + linkType: hard + +"@spectrum-css/clearbutton@workspace:components/clearbutton": version: 0.0.0-use.local resolution: "@spectrum-css/clearbutton@workspace:components/clearbutton" dependencies: @@ -4422,7 +4597,19 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/coachindicator@npm:5.0.0-next.1, @spectrum-css/coachindicator@workspace:components/coachindicator": +"@spectrum-css/coachindicator@npm:5.0.0-next.1": + version: 5.0.0-next.1 + resolution: "@spectrum-css/coachindicator@npm:5.0.0-next.1" + peerDependencies: + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/tokens": + optional: true + checksum: 10c0/c219668f0455ef9147b57471c103b8b3de2db2f5d3f96701c7ddf15979e5fed6c3d1c33100dcf2f229db613f3bec5ff7fdd58e887c927e9f3fa15a8c55c9a966 + languageName: node + linkType: hard + +"@spectrum-css/coachindicator@workspace:components/coachindicator": version: 0.0.0-use.local resolution: "@spectrum-css/coachindicator@workspace:components/coachindicator" dependencies: @@ -4472,7 +4659,22 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/colorarea@npm:8.0.0-next.2, @spectrum-css/colorarea@workspace:components/colorarea": +"@spectrum-css/colorarea@npm:8.0.0-next.2": + version: 8.0.0-next.2 + resolution: "@spectrum-css/colorarea@npm:8.0.0-next.2" + peerDependencies: + "@spectrum-css/colorhandle": ">=11.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/colorhandle": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/6f979413edb3cdec2192482a147c31400333d682c702407351b9f3911a371d72409ef894c3df17703860019e6cb54db0ffa8afa517eb7d865503af7de3eb643c + languageName: node + linkType: hard + +"@spectrum-css/colorarea@workspace:components/colorarea": version: 0.0.0-use.local resolution: "@spectrum-css/colorarea@workspace:components/colorarea" dependencies: @@ -4489,7 +4691,25 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/colorhandle@npm:11.0.0-next.2, @spectrum-css/colorhandle@workspace:components/colorhandle": +"@spectrum-css/colorhandle@npm:11.0.0-next.2": + version: 11.0.0-next.2 + resolution: "@spectrum-css/colorhandle@npm:11.0.0-next.2" + peerDependencies: + "@spectrum-css/colorloupe": ">=8.0.0-next.0" + "@spectrum-css/opacitycheckerboard": ">=5.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/colorloupe": + optional: true + "@spectrum-css/opacitycheckerboard": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/1ef11cc8cb9f7a289b6f57cf643da3235538adb6b34cb867c7f080508c05b3beccdde936f5f21671c720026510be32dafd293c485dc65faec21fbb1a55e76ba2 + languageName: node + linkType: hard + +"@spectrum-css/colorhandle@workspace:components/colorhandle": version: 0.0.0-use.local resolution: "@spectrum-css/colorhandle@workspace:components/colorhandle" dependencies: @@ -4510,7 +4730,19 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/colorloupe@npm:8.0.0-next.1, @spectrum-css/colorloupe@workspace:components/colorloupe": +"@spectrum-css/colorloupe@npm:8.0.0-next.1": + version: 8.0.0-next.1 + resolution: "@spectrum-css/colorloupe@npm:8.0.0-next.1" + peerDependencies: + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/tokens": + optional: true + checksum: 10c0/a3fc35469e9cbe10d8d93d2c0b416fdf2c68fbbc2672d042480f4806c49a9ce8e302336dba600c89d5699ed6dc3d15b684ccbb1fd44d9a6270e9d2a2a5f5f82a + languageName: node + linkType: hard + +"@spectrum-css/colorloupe@workspace:components/colorloupe": version: 0.0.0-use.local resolution: "@spectrum-css/colorloupe@workspace:components/colorloupe" dependencies: @@ -4523,7 +4755,25 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/colorslider@npm:9.0.0-next.3, @spectrum-css/colorslider@workspace:components/colorslider": +"@spectrum-css/colorslider@npm:9.0.0-next.3": + version: 9.0.0-next.3 + resolution: "@spectrum-css/colorslider@npm:9.0.0-next.3" + peerDependencies: + "@spectrum-css/colorhandle": ">=11.0.0-next.0" + "@spectrum-css/opacitycheckerboard": ">=5.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/colorhandle": + optional: true + "@spectrum-css/opacitycheckerboard": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/22e60b644f7a7f47f081b661f4ff40850f64fec40c09cf4ba58eed257664263370045e423a3520806f7a04e15c240d86937ac05d2a13b7499363bc0778d6faaf + languageName: node + linkType: hard + +"@spectrum-css/colorslider@workspace:components/colorslider": version: 0.0.0-use.local resolution: "@spectrum-css/colorslider@workspace:components/colorslider" dependencies: @@ -4544,7 +4794,28 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/colorwheel@npm:7.0.0-next.4, @spectrum-css/colorwheel@workspace:components/colorwheel": +"@spectrum-css/colorwheel@npm:7.0.0-next.4": + version: 7.0.0-next.4 + resolution: "@spectrum-css/colorwheel@npm:7.0.0-next.4" + peerDependencies: + "@spectrum-css/colorarea": ">=8.0.0-next.0" + "@spectrum-css/colorhandle": ">=11.0.0-next.0" + "@spectrum-css/colorloupe": ">=8.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/colorarea": + optional: true + "@spectrum-css/colorhandle": + optional: true + "@spectrum-css/colorloupe": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/7e5118bf513072bbb712050282e3b304141768e69efb87580e00b1b3f9a259c3c9ccc6b750ffa444bda23a2e5a0fc774685a1f7c991a7b3f56dcceda84f50ebc + languageName: node + linkType: hard + +"@spectrum-css/colorwheel@workspace:components/colorwheel": version: 0.0.0-use.local resolution: "@spectrum-css/colorwheel@workspace:components/colorwheel" dependencies: @@ -4569,7 +4840,34 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/combobox@npm:5.0.0-next.4, @spectrum-css/combobox@workspace:components/combobox": +"@spectrum-css/combobox@npm:5.0.0-next.4": + version: 5.0.0-next.4 + resolution: "@spectrum-css/combobox@npm:5.0.0-next.4" + peerDependencies: + "@spectrum-css/menu": ">=10.0.0-next.0" + "@spectrum-css/pickerbutton": ">=7.0.0-next.0" + "@spectrum-css/popover": ">=9.0.0-next.0" + "@spectrum-css/progresscircle": ">=6.0.0-next.0" + "@spectrum-css/textfield": ">=9.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/menu": + optional: true + "@spectrum-css/pickerbutton": + optional: true + "@spectrum-css/popover": + optional: true + "@spectrum-css/progresscircle": + optional: true + "@spectrum-css/textfield": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/b1d568d8edd303062639d0dd63d378fc86be5f6121ba23c7870536814f5e2d78fcca6c05a5852dbd98a7fef7470ae5a7e98465f89bfb047e32a8223c03a3f213 + languageName: node + linkType: hard + +"@spectrum-css/combobox@workspace:components/combobox": version: 0.0.0-use.local resolution: "@spectrum-css/combobox@workspace:components/combobox" dependencies: @@ -4615,7 +4913,28 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/contextualhelp@npm:6.0.0-next.3, @spectrum-css/contextualhelp@workspace:components/contextualhelp": +"@spectrum-css/contextualhelp@npm:6.0.0-next.3": + version: 6.0.0-next.3 + resolution: "@spectrum-css/contextualhelp@npm:6.0.0-next.3" + peerDependencies: + "@spectrum-css/actionbutton": ">=8.0.0-next.0" + "@spectrum-css/link": ">=8.0.0-next.0" + "@spectrum-css/popover": ">=9.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/actionbutton": + optional: true + "@spectrum-css/link": + optional: true + "@spectrum-css/popover": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/4dfaa6776e2cc4ef6d23048a3bf2dbb6b1e75906d1bcb3ac4b18c397a0107600c2b65ca75114f9cd47b9caa5c28d9ba5d943ee3fe853f9ef82c66179ae7d99c5 + languageName: node + linkType: hard + +"@spectrum-css/contextualhelp@workspace:components/contextualhelp": version: 0.0.0-use.local resolution: "@spectrum-css/contextualhelp@workspace:components/contextualhelp" dependencies: @@ -4640,15 +4959,9 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/datepicker@npm:5.0.0-next.2, @spectrum-css/datepicker@workspace:components/datepicker": - version: 0.0.0-use.local - resolution: "@spectrum-css/datepicker@workspace:components/datepicker" - dependencies: - "@spectrum-css/calendar": "npm:8.0.0-next.3" - "@spectrum-css/pickerbutton": "npm:7.0.0-next.2" - "@spectrum-css/popover": "npm:9.0.0-next.5" - "@spectrum-css/textfield": "npm:9.0.0-next.1" - "@spectrum-css/tokens": "npm:16.1.0-next.9" +"@spectrum-css/datepicker@npm:5.0.0-next.2": + version: 5.0.0-next.2 + resolution: "@spectrum-css/datepicker@npm:5.0.0-next.2" peerDependencies: "@spectrum-css/calendar": ">=8.0.0-next.0" "@spectrum-css/pickerbutton": ">=7.0.0-next.0" @@ -4666,10 +4979,52 @@ __metadata: optional: true "@spectrum-css/tokens": optional: true - languageName: unknown - linkType: soft - -"@spectrum-css/dial@npm:6.0.0-next.1, @spectrum-css/dial@workspace:components/dial": + checksum: 10c0/95736f1cb8d21851e5e6933d1c7c143a5829e0d6de3bd45801b44ae25c9e880cd79de584a73597ad4de43cde83fdb6279cdb15f5d169325704585bea461a42df + languageName: node + linkType: hard + +"@spectrum-css/datepicker@workspace:components/datepicker": + version: 0.0.0-use.local + resolution: "@spectrum-css/datepicker@workspace:components/datepicker" + dependencies: + "@spectrum-css/calendar": "npm:8.0.0-next.3" + "@spectrum-css/pickerbutton": "npm:7.0.0-next.2" + "@spectrum-css/popover": "npm:9.0.0-next.5" + "@spectrum-css/textfield": "npm:9.0.0-next.1" + "@spectrum-css/tokens": "npm:16.1.0-next.9" + peerDependencies: + "@spectrum-css/calendar": ">=8.0.0-next.0" + "@spectrum-css/pickerbutton": ">=7.0.0-next.0" + "@spectrum-css/popover": ">=9.0.0-next.0" + "@spectrum-css/textfield": ">=9.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/calendar": + optional: true + "@spectrum-css/pickerbutton": + optional: true + "@spectrum-css/popover": + optional: true + "@spectrum-css/textfield": + optional: true + "@spectrum-css/tokens": + optional: true + languageName: unknown + linkType: soft + +"@spectrum-css/dial@npm:6.0.0-next.1": + version: 6.0.0-next.1 + resolution: "@spectrum-css/dial@npm:6.0.0-next.1" + peerDependencies: + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/tokens": + optional: true + checksum: 10c0/ecd7da12f57ac0e8a545ba3b32ab2affe164f0e45d713c1ea5c68f67b114efc33ab8becc38ec482644eda83731bfd1b8140babf750767b778cb905cbcf327879 + languageName: node + linkType: hard + +"@spectrum-css/dial@workspace:components/dial": version: 0.0.0-use.local resolution: "@spectrum-css/dial@workspace:components/dial" dependencies: @@ -4682,7 +5037,37 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/dialog@npm:13.0.0-next.4, @spectrum-css/dialog@workspace:components/dialog": +"@spectrum-css/dialog@npm:13.0.0-next.4": + version: 13.0.0-next.4 + resolution: "@spectrum-css/dialog@npm:13.0.0-next.4" + peerDependencies: + "@spectrum-css/button": ">=15.0.0-next.0" + "@spectrum-css/buttongroup": ">=10.0.0-next.0" + "@spectrum-css/closebutton": ">=7.0.0-next.0" + "@spectrum-css/divider": ">=6.0.0-next.0" + "@spectrum-css/modal": ">=8.0.0-next.1" + "@spectrum-css/tokens": ">=16.1.0-next.0" + "@spectrum-css/underlay": ">=7.0.0-next.0" + peerDependenciesMeta: + "@spectrum-css/button": + optional: true + "@spectrum-css/buttongroup": + optional: true + "@spectrum-css/closebutton": + optional: true + "@spectrum-css/divider": + optional: true + "@spectrum-css/modal": + optional: true + "@spectrum-css/tokens": + optional: true + "@spectrum-css/underlay": + optional: true + checksum: 10c0/d84eb3afc1cec28274e1374fcbdd64554c89c54a5ea722d25377bc068861f7ba7b123a2e5022fc5c87a937ff80bc5d1314bfb94afe630e1821102267385386ad + languageName: node + linkType: hard + +"@spectrum-css/dialog@workspace:components/dialog": version: 0.0.0-use.local resolution: "@spectrum-css/dialog@workspace:components/dialog" dependencies: @@ -4750,7 +5135,28 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/dropzone@npm:9.0.0-next.4, @spectrum-css/dropzone@workspace:components/dropzone": +"@spectrum-css/dropzone@npm:9.0.0-next.4": + version: 9.0.0-next.4 + resolution: "@spectrum-css/dropzone@npm:9.0.0-next.4" + peerDependencies: + "@spectrum-css/actionbutton": ">=8.0.0-next.0" + "@spectrum-css/illustratedmessage": ">=10.0.0-next.0" + "@spectrum-css/link": ">=8.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/actionbutton": + optional: true + "@spectrum-css/illustratedmessage": + optional: true + "@spectrum-css/link": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/4192b797677ac1f5beca79fdd9d12bccd909e2fe9764b7cb985e77694af093cae56389408c89c5a8326fa1f24de6e3a3de4a5cb871ff8951ea4959e62c47165b + languageName: node + linkType: hard + +"@spectrum-css/dropzone@workspace:components/dropzone": version: 0.0.0-use.local resolution: "@spectrum-css/dropzone@workspace:components/dropzone" dependencies: @@ -4871,7 +5277,19 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/icon@npm:10.0.0-next.3, @spectrum-css/icon@workspace:components/icon": +"@spectrum-css/icon@npm:10.0.0-next.3": + version: 10.0.0-next.3 + resolution: "@spectrum-css/icon@npm:10.0.0-next.3" + peerDependencies: + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/tokens": + optional: true + checksum: 10c0/82200c7211bdfd77b2c85e14a195540f87d0cbb46a62f8f2c7462b4c21e13527e8c588005fd1ce811f73b1ca5c8374c48268751fe26d11c833db0f3aa4902be8 + languageName: node + linkType: hard + +"@spectrum-css/icon@workspace:components/icon": version: 0.0.0-use.local resolution: "@spectrum-css/icon@workspace:components/icon" dependencies: @@ -4901,7 +5319,22 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/infieldbutton@npm:7.0.0-next.3, @spectrum-css/infieldbutton@workspace:components/infieldbutton": +"@spectrum-css/infieldbutton@npm:7.0.0-next.3": + version: 7.0.0-next.3 + resolution: "@spectrum-css/infieldbutton@npm:7.0.0-next.3" + peerDependencies: + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/icon": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/ebf6e8a54950b028d5714420ad1ca1861906d31968b5981d1580cb2f844172e81f5c4fb535177e320e93547c34a268d4cfc752d8c871ba0333b7a0cb1ed6dc48 + languageName: node + linkType: hard + +"@spectrum-css/infieldbutton@workspace:components/infieldbutton": version: 0.0.0-use.local resolution: "@spectrum-css/infieldbutton@workspace:components/infieldbutton" dependencies: @@ -4931,7 +5364,25 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/inlinealert@npm:11.0.0-next.3, @spectrum-css/inlinealert@workspace:components/inlinealert": +"@spectrum-css/inlinealert@npm:11.0.0-next.3": + version: 11.0.0-next.3 + resolution: "@spectrum-css/inlinealert@npm:11.0.0-next.3" + peerDependencies: + "@spectrum-css/button": ">=15.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/button": + optional: true + "@spectrum-css/icon": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/f9543ce7892fc786ed897ca2961d1f1132431a7a13013db89d29496a52f6b311bfe12c4cd175fb534e6525cdca6817fdf2126b16fcc588d914879ea9400b0bfb + languageName: node + linkType: hard + +"@spectrum-css/inlinealert@workspace:components/inlinealert": version: 0.0.0-use.local resolution: "@spectrum-css/inlinealert@workspace:components/inlinealert" dependencies: @@ -4979,7 +5430,34 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/menu@npm:10.0.0-next.5, @spectrum-css/menu@workspace:components/menu": +"@spectrum-css/menu@npm:10.0.0-next.5": + version: 10.0.0-next.5 + resolution: "@spectrum-css/menu@npm:10.0.0-next.5" + peerDependencies: + "@spectrum-css/checkbox": ">=11.0.0-next.0" + "@spectrum-css/divider": ">=6.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/switch": ">=7.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + "@spectrum-css/tray": ">=6.0.0-next.0" + peerDependenciesMeta: + "@spectrum-css/checkbox": + optional: true + "@spectrum-css/divider": + optional: true + "@spectrum-css/icon": + optional: true + "@spectrum-css/switch": + optional: true + "@spectrum-css/tokens": + optional: true + "@spectrum-css/tray": + optional: true + checksum: 10c0/8a8dba0f030992e2f42526402f48b65e7296fbb825cf6c42cd3b546481fede6c0cb5120ba7684c3a3d533b8ac548c0fe9187c84c422897164575abca8e5f8e8e + languageName: node + linkType: hard + +"@spectrum-css/menu@workspace:components/menu": version: 0.0.0-use.local resolution: "@spectrum-css/menu@workspace:components/menu" dependencies: @@ -5012,7 +5490,22 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/meter@npm:2.0.0-next.3, @spectrum-css/meter@workspace:components/meter": +"@spectrum-css/meter@npm:2.0.0-next.3": + version: 2.0.0-next.3 + resolution: "@spectrum-css/meter@npm:2.0.0-next.3" + peerDependencies: + "@spectrum-css/progressbar": ">=7.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/progressbar": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/a4457e5651d78b42bbfdfbfbc6cfe92cbb11b6b8c3ee2d51873d4040ee155473ea6f9e34981164937a6b27d854069ad2fd63e352ef9b88e47169de91803db71a + languageName: node + linkType: hard + +"@spectrum-css/meter@workspace:components/meter": version: 0.0.0-use.local resolution: "@spectrum-css/meter@workspace:components/meter" dependencies: @@ -5080,7 +5573,19 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/page@npm:10.0.0-next.1, @spectrum-css/page@workspace:components/page": +"@spectrum-css/page@npm:10.0.0-next.1": + version: 10.0.0-next.1 + resolution: "@spectrum-css/page@npm:10.0.0-next.1" + peerDependencies: + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/tokens": + optional: true + checksum: 10c0/814bfe6fbba50b1cdf9a3df76ada6a8bbdf4b4724e963fb85d64703f94c837972469b0cab2b0723d9e368c3077214cd7f6788c67a5b59547afb1c9d9712e2d3b + languageName: node + linkType: hard + +"@spectrum-css/page@workspace:components/page": version: 0.0.0-use.local resolution: "@spectrum-css/page@workspace:components/page" dependencies: @@ -5093,7 +5598,31 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/pagination@npm:11.0.0-next.2, @spectrum-css/pagination@workspace:components/pagination": +"@spectrum-css/pagination@npm:11.0.0-next.2": + version: 11.0.0-next.2 + resolution: "@spectrum-css/pagination@npm:11.0.0-next.2" + peerDependencies: + "@spectrum-css/actionbutton": ">=8.0.0-next.0" + "@spectrum-css/button": ">=15.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/textfield": ">=9.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/actionbutton": + optional: true + "@spectrum-css/button": + optional: true + "@spectrum-css/icon": + optional: true + "@spectrum-css/textfield": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/46a71ab79fe96d2436ac48592e549e702affde88315a01e5239b3eda0c1665da4dc14ab5371a61fda13912c333c7697f9b5860ac55f42db7ada5dd31bbccf5c0 + languageName: node + linkType: hard + +"@spectrum-css/pagination@workspace:components/pagination": version: 0.0.0-use.local resolution: "@spectrum-css/pagination@workspace:components/pagination" dependencies: @@ -5122,7 +5651,34 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/picker@npm:10.0.0-next.4, @spectrum-css/picker@workspace:components/picker": +"@spectrum-css/picker@npm:10.0.0-next.4": + version: 10.0.0-next.4 + resolution: "@spectrum-css/picker@npm:10.0.0-next.4" + peerDependencies: + "@spectrum-css/helptext": ">=8.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/menu": ">=10.0.0-next.0" + "@spectrum-css/popover": ">=9.0.0-next.0" + "@spectrum-css/progresscircle": ">=6.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/helptext": + optional: true + "@spectrum-css/icon": + optional: true + "@spectrum-css/menu": + optional: true + "@spectrum-css/popover": + optional: true + "@spectrum-css/progresscircle": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/b71e297b7a356fe30cb27c632c3a802853f3754afe7234809b1a225efb3433bd19ef934483a6c0c9d65cf2ea6ea6fbdbca38fba9fb74b1c4628ded54f9fae729 + languageName: node + linkType: hard + +"@spectrum-css/picker@workspace:components/picker": version: 0.0.0-use.local resolution: "@spectrum-css/picker@workspace:components/picker" dependencies: @@ -5156,7 +5712,28 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/pickerbutton@npm:7.0.0-next.2, @spectrum-css/pickerbutton@workspace:components/pickerbutton": +"@spectrum-css/pickerbutton@npm:7.0.0-next.2": + version: 7.0.0-next.2 + resolution: "@spectrum-css/pickerbutton@npm:7.0.0-next.2" + peerDependencies: + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/menu": ">=10.0.0-next.0" + "@spectrum-css/popover": ">=9.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/icon": + optional: true + "@spectrum-css/menu": + optional: true + "@spectrum-css/popover": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/5706b4415f1326c662478c8099ca1daf3831bf26c24a2e975a88791fa50afaa72b58e52b336ec62762eb719bbd98e3b27195a4764b22cda95813f910500da8ed + languageName: node + linkType: hard + +"@spectrum-css/pickerbutton@workspace:components/pickerbutton": version: 0.0.0-use.local resolution: "@spectrum-css/pickerbutton@workspace:components/pickerbutton" dependencies: @@ -5253,7 +5830,22 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/progressbar@npm:7.0.0-next.4, @spectrum-css/progressbar@workspace:components/progressbar": +"@spectrum-css/progressbar@npm:7.0.0-next.4": + version: 7.0.0-next.4 + resolution: "@spectrum-css/progressbar@npm:7.0.0-next.4" + peerDependencies: + "@spectrum-css/fieldlabel": ">=11.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/fieldlabel": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/03965c3433bb1077ae9fb8598d36cc5474c916e71d24c523b93f06e4d58799b9092f85fb752f7e206750d1c93488989f2dc6eaa7a90d36ba64487ed0b3e25e67 + languageName: node + linkType: hard + +"@spectrum-css/progressbar@workspace:components/progressbar": version: 0.0.0-use.local resolution: "@spectrum-css/progressbar@workspace:components/progressbar" dependencies: @@ -5283,7 +5875,22 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/radio@npm:11.0.0-next.3, @spectrum-css/radio@workspace:components/radio": +"@spectrum-css/radio@npm:11.0.0-next.3": + version: 11.0.0-next.3 + resolution: "@spectrum-css/radio@npm:11.0.0-next.3" + peerDependencies: + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/icon": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/54b93e323faaa4c5d9f3b7559070b706867c03ecf154107f8a6706438ea0143cc3a57b6d946f3611e87a73b8216f6b6fdee9ba8358e5aa60ad222bed89307c94 + languageName: node + linkType: hard + +"@spectrum-css/radio@workspace:components/radio": version: 0.0.0-use.local resolution: "@spectrum-css/radio@workspace:components/radio" dependencies: @@ -5317,7 +5924,28 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/search@npm:9.0.0-next.3, @spectrum-css/search@workspace:components/search": +"@spectrum-css/search@npm:9.0.0-next.3": + version: 9.0.0-next.3 + resolution: "@spectrum-css/search@npm:9.0.0-next.3" + peerDependencies: + "@spectrum-css/clearbutton": ">=8.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/textfield": ">=9.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/clearbutton": + optional: true + "@spectrum-css/icon": + optional: true + "@spectrum-css/textfield": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/47eee9b27a76fe017482d08ff6bbbc15e8df84051f73982c321cfbc0836d77a485e0d83406957601d1645f9871a09cba109f936503aac27a8e632c8c6b564613 + languageName: node + linkType: hard + +"@spectrum-css/search@workspace:components/search": version: 0.0.0-use.local resolution: "@spectrum-css/search@workspace:components/search" dependencies: @@ -5342,7 +5970,22 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/sidenav@npm:8.0.0-next.3, @spectrum-css/sidenav@workspace:components/sidenav": +"@spectrum-css/sidenav@npm:8.0.0-next.3": + version: 8.0.0-next.3 + resolution: "@spectrum-css/sidenav@npm:8.0.0-next.3" + peerDependencies: + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/icon": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/0fe3e5961207daf58e04eb93d1bed4f89c8444e4ccac803b7c451491e3f281c8feda3ec6baf190cd690c5b5e57a45649c8cbc77a28930de270287ce31676ab1f + languageName: node + linkType: hard + +"@spectrum-css/sidenav@workspace:components/sidenav": version: 0.0.0-use.local resolution: "@spectrum-css/sidenav@workspace:components/sidenav" dependencies: @@ -5359,7 +6002,22 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/slider@npm:7.0.0-next.4, @spectrum-css/slider@workspace:components/slider": +"@spectrum-css/slider@npm:7.0.0-next.4": + version: 7.0.0-next.4 + resolution: "@spectrum-css/slider@npm:7.0.0-next.4" + peerDependencies: + "@spectrum-css/stepper": ">=8.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/stepper": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/aaa2b312184551097c0e226bf1106d18f6e0ac77f9a65da1acc8baeec4fb38e49e9589c9af18f7871cce342f7d60d02bcb38bd4398462ad8921d1d755c6d0fa1 + languageName: node + linkType: hard + +"@spectrum-css/slider@workspace:components/slider": version: 0.0.0-use.local resolution: "@spectrum-css/slider@workspace:components/slider" dependencies: @@ -5402,7 +6060,25 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/steplist@npm:8.0.0-next.2, @spectrum-css/steplist@workspace:components/steplist": +"@spectrum-css/steplist@npm:8.0.0-next.2": + version: 8.0.0-next.2 + resolution: "@spectrum-css/steplist@npm:8.0.0-next.2" + peerDependencies: + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + "@spectrum-css/tooltip": ">=8.0.0-next.0" + peerDependenciesMeta: + "@spectrum-css/icon": + optional: true + "@spectrum-css/tokens": + optional: true + "@spectrum-css/tooltip": + optional: true + checksum: 10c0/d029fecb378d475e6a202383ae9505c3b8ecc67d3d9c7226c607cbebb514c3071b5deefa18ca730b8331226b7d30475b737ba96f50d7bad510a8ece7154030e0 + languageName: node + linkType: hard + +"@spectrum-css/steplist@workspace:components/steplist": version: 0.0.0-use.local resolution: "@spectrum-css/steplist@workspace:components/steplist" dependencies: @@ -5423,7 +6099,31 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/stepper@npm:8.0.0-next.3, @spectrum-css/stepper@workspace:components/stepper": +"@spectrum-css/stepper@npm:8.0.0-next.3": + version: 8.0.0-next.3 + resolution: "@spectrum-css/stepper@npm:8.0.0-next.3" + peerDependencies: + "@spectrum-css/actionbutton": ">=8.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/infieldbutton": ">=7.0.0-next.0" + "@spectrum-css/textfield": ">=9.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/actionbutton": + optional: true + "@spectrum-css/icon": + optional: true + "@spectrum-css/infieldbutton": + optional: true + "@spectrum-css/textfield": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/cac155fefa69ac2bb4644ed8091c8eed82111e89cc3d1b0b74ec54bcf415f695865e37a277d10a3e815a8d2e52ee8dd80e0b51faba6d47de4faea93aa7299211 + languageName: node + linkType: hard + +"@spectrum-css/stepper@workspace:components/stepper": version: 0.0.0-use.local resolution: "@spectrum-css/stepper@workspace:components/stepper" dependencies: @@ -5486,7 +6186,19 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/switch@npm:7.0.0-next.2, @spectrum-css/switch@workspace:components/switch": +"@spectrum-css/switch@npm:7.0.0-next.2": + version: 7.0.0-next.2 + resolution: "@spectrum-css/switch@npm:7.0.0-next.2" + peerDependencies: + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/tokens": + optional: true + checksum: 10c0/30e0186eda54a3269fc242aea55dfda313c7c316f7ed2e52b3676832dd78477b35a8397495311bba743555b5c4a64a79e2cb3fe43a21e38c35ee72494a4a138f + languageName: node + linkType: hard + +"@spectrum-css/switch@workspace:components/switch": version: 0.0.0-use.local resolution: "@spectrum-css/switch@workspace:components/switch" dependencies: @@ -5499,7 +6211,31 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/table@npm:9.0.0-next.4, @spectrum-css/table@workspace:components/table": +"@spectrum-css/table@npm:9.0.0-next.4": + version: 9.0.0-next.4 + resolution: "@spectrum-css/table@npm:9.0.0-next.4" + peerDependencies: + "@spectrum-css/button": ">=15.0.0-next.0" + "@spectrum-css/checkbox": ">=11.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/thumbnail": ">=9.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/button": + optional: true + "@spectrum-css/checkbox": + optional: true + "@spectrum-css/icon": + optional: true + "@spectrum-css/thumbnail": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/300cc60add7f6ebebf73a3b987b9214d3f8966a91c6867bb32075552642e8ab35a3b5051b45906d8f47c21ac904b1fd4b8615f78204d4a396cded8102ae724d4 + languageName: node + linkType: hard + +"@spectrum-css/table@workspace:components/table": version: 0.0.0-use.local resolution: "@spectrum-css/table@workspace:components/table" dependencies: @@ -5528,7 +6264,28 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/tabs@npm:7.0.0-next.2, @spectrum-css/tabs@workspace:components/tabs": +"@spectrum-css/tabs@npm:7.0.0-next.2": + version: 7.0.0-next.2 + resolution: "@spectrum-css/tabs@npm:7.0.0-next.2" + peerDependencies: + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/menu": ">=10.0.0-next.0" + "@spectrum-css/picker": ">=10.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/icon": + optional: true + "@spectrum-css/menu": + optional: true + "@spectrum-css/picker": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/0f617e3e55b210cd260781ca1e31d9b184c42d0d6d1f6dbfc7f83da6b161cb94bc564997d1b36118e95942746c489f309280dc1b32fb38d0e590dc9f282e29a3 + languageName: node + linkType: hard + +"@spectrum-css/tabs@workspace:components/tabs": version: 0.0.0-use.local resolution: "@spectrum-css/tabs@workspace:components/tabs" dependencies: @@ -5578,7 +6335,22 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/taggroup@npm:8.0.0-next.2, @spectrum-css/taggroup@workspace:components/taggroup": +"@spectrum-css/taggroup@npm:8.0.0-next.2": + version: 8.0.0-next.2 + resolution: "@spectrum-css/taggroup@npm:8.0.0-next.2" + peerDependencies: + "@spectrum-css/tag": ">=11.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/tag": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/87db451ef2d4f23dcb2bb3458e23ce11e2b638376190f53cb7312d8c46ada28d50f4e29a66922deacfefddefcc40231fa78ada9e9d0f488723d1bb040b74c9aa + languageName: node + linkType: hard + +"@spectrum-css/taggroup@workspace:components/taggroup": version: 0.0.0-use.local resolution: "@spectrum-css/taggroup@workspace:components/taggroup" dependencies: @@ -5612,7 +6384,22 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/thumbnail@npm:9.0.0-next.1, @spectrum-css/thumbnail@workspace:components/thumbnail": +"@spectrum-css/thumbnail@npm:9.0.0-next.1": + version: 9.0.0-next.1 + resolution: "@spectrum-css/thumbnail@npm:9.0.0-next.1" + peerDependencies: + "@spectrum-css/opacitycheckerboard": ">=5.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/opacitycheckerboard": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/ad6fa81bc7db0e03f26827145de7d37628dcaaac4ccf808492857aac8d197c1a1e56e7fc8847f6583b1dfffe8eea516c0c7021c0f02d9ee962eae2c6249d6219 + languageName: node + linkType: hard + +"@spectrum-css/thumbnail@workspace:components/thumbnail": version: 0.0.0-use.local resolution: "@spectrum-css/thumbnail@workspace:components/thumbnail" dependencies: @@ -5660,17 +6447,36 @@ __metadata: dependencies: "@adobe/spectrum-tokens": "npm:13.15.0" "@adobe/token-diff-generator": "npm:^2.0.0" - "@spectrum-tools/postcss-rgb-mapping": "npm:1.1.0" deepmerge: "npm:^4.3.1" glob: "npm:^11.0.3" lodash-es: "npm:^4.17.21" + npm-run-all2: "npm:^8.0.4" 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 -"@spectrum-css/tooltip@npm:8.0.0-next.4, @spectrum-css/tooltip@workspace:components/tooltip": +"@spectrum-css/tooltip@npm:8.0.0-next.4": + version: 8.0.0-next.4 + resolution: "@spectrum-css/tooltip@npm:8.0.0-next.4" + peerDependencies: + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/icon": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/7419133d829b3b201d7b8e1db83fbe6563975ae3bdd99ca8ac5d408a2504b6c79691e9f6f4c0a4d2083622766cb8c99af3875798a079de9efc6cb180c673dec0 + languageName: node + linkType: hard + +"@spectrum-css/tooltip@workspace:components/tooltip": version: 0.0.0-use.local resolution: "@spectrum-css/tooltip@workspace:components/tooltip" dependencies: @@ -5721,7 +6527,25 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/treeview@npm:13.0.0-next.3, @spectrum-css/treeview@workspace:components/treeview": +"@spectrum-css/treeview@npm:13.0.0-next.3": + version: 13.0.0-next.3 + resolution: "@spectrum-css/treeview@npm:13.0.0-next.3" + peerDependencies: + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/thumbnail": ">=9.0.0-next.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/icon": + optional: true + "@spectrum-css/thumbnail": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/9b1f4917c87d8fa4f7f9e4c3b1fe6ca4fc84cdeddca30aa8865f0fd8ad215796f5d5308c2bf11d149f3dc22c37da867ab4702c9ac6fdb840ea8d0f2088051680 + languageName: node + linkType: hard + +"@spectrum-css/treeview@workspace:components/treeview": version: 0.0.0-use.local resolution: "@spectrum-css/treeview@workspace:components/treeview" dependencies: @@ -5765,7 +6589,19 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/underlay@npm:7.0.0-next.1, @spectrum-css/underlay@workspace:components/underlay": +"@spectrum-css/underlay@npm:7.0.0-next.1": + version: 7.0.0-next.1 + resolution: "@spectrum-css/underlay@npm:7.0.0-next.1" + peerDependencies: + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/tokens": + optional: true + checksum: 10c0/37ce8ddf525c4e1f4b9d1b65e7b8699faffd6162c425a9e2381bf684ee52dfbe4b6eb1f0c89f19f77d961e9f66feac48c8817ed2e0b2777aa61e89fb05c2f6fc + languageName: node + linkType: hard + +"@spectrum-css/underlay@workspace:components/underlay": version: 0.0.0-use.local resolution: "@spectrum-css/underlay@workspace:components/underlay" dependencies: @@ -5779,7 +6615,19 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/well@npm:8.0.0-next.1, @spectrum-css/well@workspace:components/well": +"@spectrum-css/well@npm:8.0.0-next.1": + version: 8.0.0-next.1 + resolution: "@spectrum-css/well@npm:8.0.0-next.1" + peerDependencies: + "@spectrum-css/tokens": ">=16.1.0-next.0" + peerDependenciesMeta: + "@spectrum-css/tokens": + optional: true + checksum: 10c0/1b3f8dd8e631bff555786124cca258db19d6840318894966505889768ac996eb275ee77fbba9ecb416683afcb4bf7b7ba9cb7c40756f7ee43c3d96bb27a61307 + languageName: node + linkType: hard + +"@spectrum-css/well@workspace:components/well": version: 0.0.0-use.local resolution: "@spectrum-css/well@workspace:components/well" dependencies: @@ -5818,19 +6666,6 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-tools/postcss-rgb-mapping@npm:1.1.0, @spectrum-tools/postcss-rgb-mapping@workspace:plugins/postcss-rgb-mapping": - version: 0.0.0-use.local - resolution: "@spectrum-tools/postcss-rgb-mapping@workspace:plugins/postcss-rgb-mapping" - dependencies: - ava: "npm:^6.4.1" - c8: "npm:^10.1.3" - postcss: "npm:^8.5.6" - postcss-values-parser: "npm:^6.0.2" - peerDependencies: - postcss: ">=8" - languageName: unknown - linkType: soft - "@spectrum-tools/stylelint-no-missing-var@workspace:plugins/stylelint-no-missing-var": version: 0.0.0-use.local resolution: "@spectrum-tools/stylelint-no-missing-var@workspace:plugins/stylelint-no-missing-var" @@ -7224,7 +8059,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: @@ -7774,6 +8609,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" @@ -7844,7 +8686,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: @@ -8133,10 +8975,17 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001669, caniuse-lite@npm:^1.0.30001688, caniuse-lite@npm:^1.0.30001702": - version: 1.0.30001737 - resolution: "caniuse-lite@npm:1.0.30001737" - checksum: 10c0/9d9cfe3b46fe670d171cee10c5c1b0fb641946fd5d6bea26149f804003d53d82ade7ef5a4a640fb3a0eaec47c7839b57e06a6ddae4f0ad2cd58e1187d31997ce +"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001688, caniuse-lite@npm:^1.0.30001702": + version: 1.0.30001703 + resolution: "caniuse-lite@npm:1.0.30001703" + checksum: 10c0/ed88e318da28e9e59c4ac3a2e3c42859558b7b713aebf03696a1f916e4ed4b70734dda82be04635e2b62ec355b8639bbed829b7b12ff528d7f9cc31a3a5bea91 + languageName: node + linkType: hard + +"caniuse-lite@npm:^1.0.30001669": + version: 1.0.30001690 + resolution: "caniuse-lite@npm:1.0.30001690" + checksum: 10c0/646bd469032afa90400a84dec30a2b00a6eda62c03ead358117e3f884cda8aacec02ec058a6dbee5eaf9714f83e483b9b0eb4fb42febb8076569f5ca40f1d347 languageName: node linkType: hard @@ -8385,6 +9234,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" @@ -9542,6 +10410,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" @@ -11263,6 +12138,17 @@ __metadata: languageName: node linkType: hard +"fs-extra@npm:^11.0.0": + version: 11.3.0 + resolution: "fs-extra@npm:11.3.0" + dependencies: + graceful-fs: "npm:^4.2.0" + jsonfile: "npm:^6.0.1" + universalify: "npm:^2.0.0" + checksum: 10c0/5f95e996186ff45463059feb115a22fb048bdaf7e487ecee8a8646c78ed8fdca63630e3077d4c16ce677051f5e60d3355a06f3cd61f3ca43f48cc58822a44d0a + languageName: node + linkType: hard + "fs-extra@npm:^11.1.1": version: 11.3.1 resolution: "fs-extra@npm:11.3.1" @@ -11511,7 +12397,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: @@ -12096,9 +12982,9 @@ __metadata: linkType: hard "ignore@npm:^5.0.4, ignore@npm:^5.2.0": - version: 5.3.2 - resolution: "ignore@npm:5.3.2" - checksum: 10c0/f9f652c957983634ded1e7f02da3b559a0d4cc210fca3792cb67f1b153623c9c42efdc1c4121af171e295444459fc4a9201101fb041b1104a3c000bccb188337 + version: 5.3.1 + resolution: "ignore@npm:5.3.1" + checksum: 10c0/703f7f45ffb2a27fb2c5a8db0c32e7dee66b33a225d28e8db4e1be6474795f606686a6e3bcc50e1aa12f2042db4c9d4a7d60af3250511de74620fbed052ea4cd languageName: node linkType: hard @@ -12372,6 +13258,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" @@ -12389,6 +13284,15 @@ __metadata: languageName: node linkType: hard +"is-core-module@npm:^2.13.0": + version: 2.15.0 + resolution: "is-core-module@npm:2.15.0" + dependencies: + hasown: "npm:^2.0.2" + checksum: 10c0/da161f3d9906f459486da65609b2f1a2dfdc60887c689c234d04e88a062cb7920fa5be5fb7ab08dc43b732929653c4135ef05bf77888ae2a9040ce76815eb7b1 + languageName: node + linkType: hard + "is-core-module@npm:^2.16.0": version: 2.16.1 resolution: "is-core-module@npm:2.16.1" @@ -12527,7 +13431,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: @@ -13674,6 +14578,13 @@ __metadata: languageName: node linkType: hard +"json-parse-even-better-errors@npm:^4.0.0": + version: 4.0.0 + resolution: "json-parse-even-better-errors@npm:4.0.0" + checksum: 10c0/84cd9304a97e8fb2af3937bf53acb91c026aeb859703c332684e688ea60db27fc2242aa532a84e1883fdcbe1e5c1fb57c2bef38e312021aa1cd300defc63cf16 + languageName: node + linkType: hard + "json-schema-traverse@npm:^0.3.0": version: 0.3.1 resolution: "json-schema-traverse@npm:0.3.1" @@ -14693,6 +15604,13 @@ __metadata: languageName: node linkType: hard +"memorystream@npm:^0.3.1": + version: 0.3.1 + resolution: "memorystream@npm:0.3.1" + checksum: 10c0/4bd164657711d9747ff5edb0508b2944414da3464b7fe21ac5c67cf35bba975c4b446a0124bd0f9a8be54cfc18faf92e92bd77563a20328b1ccf2ff04e9f39b9 + languageName: node + linkType: hard + "meow@npm:^12.0.1": version: 12.1.1 resolution: "meow@npm:12.1.1" @@ -15516,7 +16434,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 @@ -15530,6 +16448,13 @@ __metadata: languageName: node linkType: hard +"npm-normalize-package-bin@npm:^4.0.0": + version: 4.0.0 + resolution: "npm-normalize-package-bin@npm:4.0.0" + checksum: 10c0/1fa546fcae8eaab61ef9b9ec237b6c795008da50e1883eae030e9e38bb04ffa32c5aabcef9a0400eae3dc1f91809bcfa85e437ce80d677c69b419d1d9cacf0ab + languageName: node + linkType: hard + "npm-package-arg@npm:^13.0.0": version: 13.0.0 resolution: "npm-package-arg@npm:13.0.0" @@ -15558,6 +16483,27 @@ __metadata: languageName: node linkType: hard +"npm-run-all2@npm:^8.0.4": + version: 8.0.4 + resolution: "npm-run-all2@npm:8.0.4" + dependencies: + ansi-styles: "npm:^6.2.1" + cross-spawn: "npm:^7.0.6" + memorystream: "npm:^0.3.1" + picomatch: "npm:^4.0.2" + pidtree: "npm:^0.6.0" + read-package-json-fast: "npm:^4.0.0" + shell-quote: "npm:^1.7.3" + which: "npm:^5.0.0" + bin: + npm-run-all: bin/npm-run-all/index.js + npm-run-all2: bin/npm-run-all/index.js + run-p: bin/run-p/index.js + run-s: bin/run-s/index.js + checksum: 10c0/cfc2987df224e55456629301991b5fa6980cc644d1836fe3c22d74a4508512737d30389795b759bb5d659103e54281c59741ecdc0241cfd2615cb9bffbf7cceb + languageName: node + linkType: hard + "npm-run-path@npm:^4.0.1": version: 4.0.1 resolution: "npm-run-path@npm:4.0.1" @@ -16355,7 +17301,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 @@ -16530,6 +17476,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" @@ -16820,6 +17789,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" @@ -17305,7 +18295,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: @@ -17535,6 +18525,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" @@ -17780,6 +18777,16 @@ __metadata: languageName: node linkType: hard +"read-package-json-fast@npm:^4.0.0": + version: 4.0.0 + resolution: "read-package-json-fast@npm:4.0.0" + dependencies: + json-parse-even-better-errors: "npm:^4.0.0" + npm-normalize-package-bin: "npm:^4.0.0" + checksum: 10c0/8a03509ae8e852f1abc4b109c1be571dd90ac9ea65d55433b2fe287e409113441a9b00df698288fe48aa786c1a2550569d47b5ab01ed83ada073d691d5aff582 + languageName: node + linkType: hard + "read-yaml-file@npm:^1.1.0": version: 1.1.0 resolution: "read-yaml-file@npm:1.1.0" @@ -17840,6 +18847,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" @@ -17899,6 +18915,13 @@ __metadata: languageName: node linkType: hard +"regenerator-runtime@npm:^0.14.0": + version: 0.14.1 + resolution: "regenerator-runtime@npm:0.14.1" + checksum: 10c0/1b16eb2c4bceb1665c89de70dcb64126a22bc8eb958feef3cd68fe11ac6d2a4899b5cd1b80b0774c7c03591dc57d16631a7f69d2daa2ec98100e2f29f7ec4cc4 + languageName: node + linkType: hard + "regexp.prototype.flags@npm:^1.5.4": version: 1.5.4 resolution: "regexp.prototype.flags@npm:1.5.4" @@ -18039,7 +19062,20 @@ __metadata: languageName: node linkType: hard -"resolve@npm:^1.1.7, resolve@npm:^1.20.0, resolve@npm:^1.22.10": +"resolve@npm:^1.1.7, resolve@npm:^1.20.0": + version: 1.22.8 + resolution: "resolve@npm:1.22.8" + dependencies: + is-core-module: "npm:^2.13.0" + path-parse: "npm:^1.0.7" + supports-preserve-symlinks-flag: "npm:^1.0.0" + bin: + resolve: bin/resolve + checksum: 10c0/07e179f4375e1fd072cfb72ad66d78547f86e6196c4014b31cb0b8bb1db5f7ca871f922d08da0fbc05b94e9fd42206f819648fa3b5b873ebbc8e1dc68fec433a + languageName: node + linkType: hard + +"resolve@npm:^1.22.10": version: 1.22.10 resolution: "resolve@npm:1.22.10" dependencies: @@ -18052,7 +19088,20 @@ __metadata: languageName: node linkType: hard -"resolve@patch:resolve@npm%3A^1.1.7#optional!builtin, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin, resolve@patch:resolve@npm%3A^1.22.10#optional!builtin": +"resolve@patch:resolve@npm%3A^1.1.7#optional!builtin, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin": + version: 1.22.8 + resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin::version=1.22.8&hash=c3c19d" + dependencies: + is-core-module: "npm:^2.13.0" + path-parse: "npm:^1.0.7" + supports-preserve-symlinks-flag: "npm:^1.0.0" + bin: + resolve: bin/resolve + checksum: 10c0/0446f024439cd2e50c6c8fa8ba77eaa8370b4180f401a96abf3d1ebc770ac51c1955e12764cde449fde3fff480a61f84388e3505ecdbab778f4bef5f8212c729 + languageName: node + linkType: hard + +"resolve@patch:resolve@npm%3A^1.22.10#optional!builtin": version: 1.22.10 resolution: "resolve@patch:resolve@npm%3A1.22.10#optional!builtin::version=1.22.10&hash=c3c19d" dependencies: @@ -18443,6 +19492,13 @@ __metadata: languageName: node linkType: hard +"shell-quote@npm:^1.7.3": + version: 1.8.2 + resolution: "shell-quote@npm:1.8.2" + checksum: 10c0/85fdd44f2ad76e723d34eb72c753f04d847ab64e9f1f10677e3f518d0e5b0752a176fd805297b30bb8c3a1556ebe6e77d2288dbd7b7b0110c7e941e9e9c20ce1 + languageName: node + linkType: hard + "side-channel-list@npm:^1.0.0": version: 1.0.0 resolution: "side-channel-list@npm:1.0.0" @@ -20715,6 +21771,15 @@ __metadata: languageName: node linkType: hard +"yaml@npm:^2.4.2": + version: 2.7.1 + resolution: "yaml@npm:2.7.1" + bin: + yaml: bin.mjs + checksum: 10c0/ee2126398ab7d1fdde566b4013b68e36930b9e6d8e68b6db356875c99614c10d678b6f45597a145ff6d63814961221fc305bf9242af8bf7450177f8a68537590 + languageName: node + linkType: hard + "yaml@npm:^2.6.0": version: 2.8.0 resolution: "yaml@npm:2.8.0" From 3d5a6097ca86386ba925852f74ac5cbeb8f64e41 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Tue, 16 Sep 2025 09:32:31 -0400 Subject: [PATCH 2/2] chore: remove token objects; pull into separate branch --- .github/QUICK-START.md | 16 +- .../converting-css-properties-to-tokens.mdx | 189 -- README.md | 2 +- components/accordion/tokens.json | 388 ---- components/actionbar/tokens.json | 98 - components/actionbutton/tokens.json | 79 - components/actiongroup/tokens.json | 60 - components/actionmenu/tokens.json | 1 - components/alertbanner/tokens.json | 181 -- .../stories/alertdialog.stories.js | 10 + components/alertdialog/tokens.json | 135 -- components/asset/tokens.json | 22 - components/assetcard/dist/metadata.json | 5 + components/assetcard/index.css | 23 +- components/assetcard/tokens.json | 142 -- components/assetlist/dist/metadata.json | 4 + components/assetlist/index.css | 13 + components/assetlist/tokens.json | 129 -- components/avatar/tokens.json | 52 - components/badge/index.css | 6 + components/badge/tokens.json | 402 ---- components/breadcrumb/dist/metadata.json | 2 +- components/breadcrumb/index.css | 2 +- components/breadcrumb/tokens.json | 209 -- components/button/tokens.json | 347 --- components/buttongroup/tokens.json | 37 - components/calendar/dist/metadata.json | 12 +- components/calendar/index.css | 27 +- components/calendar/tokens.json | 408 ---- components/card/dist/metadata.json | 4 +- components/card/index.css | 2 +- components/card/tokens.json | 221 -- components/checkbox/tokens.json | 280 --- components/clearbutton/tokens.json | 108 - components/closebutton/tokens.json | 209 -- components/coachindicator/dist/metadata.json | 2 + components/coachindicator/index.css | 9 + components/coachindicator/tokens.json | 143 -- components/coachmark/dist/metadata.json | 2 +- components/coachmark/index.css | 6 +- components/coachmark/tokens.json | 197 -- components/colorarea/dist/metadata.json | 6 +- components/colorarea/index.css | 39 +- components/colorarea/tokens.json | 65 - components/colorhandle/dist/metadata.json | 3 +- components/colorhandle/index.css | 6 +- components/colorhandle/tokens.json | 72 - components/colorloupe/tokens.json | 86 - components/colorslider/dist/metadata.json | 4 +- components/colorslider/index.css | 4 +- components/colorslider/tokens.json | 45 - components/colorwheel/dist/metadata.json | 3 +- components/colorwheel/index.css | 5 +- components/colorwheel/tokens.json | 40 - components/combobox/dist/metadata.json | 2 +- components/combobox/index.css | 2 +- components/combobox/tokens.json | 305 --- components/contextualhelp/tokens.json | 53 - components/datepicker/tokens.json | 313 --- components/dial/tokens.json | 220 -- components/dialog/dist/metadata.json | 2 +- components/dialog/index.css | 5 +- components/dialog/tokens.json | 302 --- components/divider/tokens.json | 22 - components/dropindicator/dist/metadata.json | 6 +- components/dropindicator/index.css | 9 + components/dropindicator/tokens.json | 26 - components/dropzone/dist/metadata.json | 3 + components/dropzone/index.css | 14 +- components/dropzone/tokens.json | 121 -- components/fieldgroup/tokens.json | 7 - components/fieldlabel/tokens.json | 58 - components/floatingactionbutton/tokens.json | 125 -- components/form/tokens.json | 27 - components/helptext/tokens.json | 198 -- components/icon/tokens.json | 17 - components/illustratedmessage/tokens.json | 145 -- components/infieldbutton/dist/metadata.json | 2 - components/infieldbutton/index.css | 4 +- components/infieldbutton/tokens.json | 186 -- components/infieldprogresscircle/tokens.json | 7 - components/inlinealert/tokens.json | 141 -- components/link/tokens.json | 84 - components/logicbutton/dist/metadata.json | 6 + components/logicbutton/index.css | 23 + components/logicbutton/tokens.json | 229 -- components/menu/tokens.json | 804 ------- components/meter/tokens.json | 27 - components/miller/tokens.json | 22 - components/modal/tokens.json | 57 - components/opacitycheckerboard/tokens.json | 28 - components/page/index.css | 7 +- components/page/tokens.json | 12 - components/pagination/tokens.json | 50 - components/picker/tokens.json | 475 ---- components/pickerbutton/tokens.json | 147 -- components/popover/tokens.json | 83 - components/progressbar/tokens.json | 135 -- components/progresscircle/tokens.json | 34 - components/radio/tokens.json | 157 -- components/rating/tokens.json | 140 -- components/search/tokens.json | 208 -- components/sidenav/tokens.json | 379 ---- components/slider/index.css | 5 + components/slider/tokens.json | 353 --- components/splitview/tokens.json | 106 - components/statuslight/tokens.json | 214 -- components/steplist/dist/metadata.json | 2 + components/steplist/index.css | 9 + components/steplist/tokens.json | 117 - components/stepper/tokens.json | 79 - components/swatch/tokens.json | 139 -- components/swatchgroup/tokens.json | 17 - components/switch/tokens.json | 267 --- components/table/dist/metadata.json | 11 +- components/table/index.css | 29 +- components/table/tokens.json | 438 ---- components/tabs/dist/metadata.json | 3 - components/tabs/index.css | 6 +- components/tabs/tokens.json | 200 -- components/tag/tokens.json | 450 ---- components/taggroup/tokens.json | 12 - components/textfield/tokens.json | 445 ---- components/thumbnail/dist/metadata.json | 1 + components/thumbnail/index.css | 3 +- components/thumbnail/tokens.json | 102 - components/toast/tokens.json | 137 -- components/tooltip/tokens.json | 151 -- components/tray/tokens.json | 48 - components/treeview/dist/metadata.json | 3 + components/treeview/index.css | 13 +- components/treeview/tokens.json | 366 ---- components/typography/dist/metadata.json | 7 +- components/typography/index.css | 32 +- components/typography/tokens.json | 128 -- components/underlay/dist/metadata.json | 2 +- components/underlay/index.css | 3 +- components/underlay/tokens.json | 37 - components/well/dist/metadata.json | 4 +- components/well/index.css | 4 +- components/well/tokens.json | 78 - lint-staged.config.js | 2 - package.json | 3 +- plugins/postcss-rgb-mapping/CHANGELOG.md | 38 + plugins/postcss-rgb-mapping/README.md | 89 + .../postcss-rgb-mapping/expected/basic.css | 15 + .../postcss-rgb-mapping/expected/modern.css | 15 + .../postcss-rgb-mapping/fixtures/basic.css | 7 + plugins/postcss-rgb-mapping/index.js | 168 ++ plugins/postcss-rgb-mapping/package.json | 42 + plugins/postcss-rgb-mapping/project.json | 16 + plugins/postcss-rgb-mapping/test.js | 42 + stylelint.config.js | 10 +- tokens/custom-tokens.json | 814 ++++++- tokens/dist/json/tokens.json | 1921 ++++++++++------- tokens/package.json | 11 +- tokens/postcss.config.js | 3 + tokens/project.json | 7 +- tokens/style-dictionary.config.js | 37 +- yarn.config.cjs | 2 +- yarn.lock | 75 +- 161 files changed, 2719 insertions(+), 14610 deletions(-) delete mode 100644 .storybook/guides/converting-css-properties-to-tokens.mdx delete mode 100644 components/accordion/tokens.json delete mode 100644 components/actionbar/tokens.json delete mode 100644 components/actionbutton/tokens.json delete mode 100644 components/actiongroup/tokens.json delete mode 100644 components/actionmenu/tokens.json delete mode 100644 components/alertbanner/tokens.json delete mode 100644 components/alertdialog/tokens.json delete mode 100644 components/asset/tokens.json delete mode 100644 components/assetcard/tokens.json delete mode 100644 components/assetlist/tokens.json delete mode 100644 components/avatar/tokens.json delete mode 100644 components/badge/tokens.json delete mode 100644 components/breadcrumb/tokens.json delete mode 100644 components/button/tokens.json delete mode 100644 components/buttongroup/tokens.json delete mode 100644 components/calendar/tokens.json delete mode 100644 components/card/tokens.json delete mode 100644 components/checkbox/tokens.json delete mode 100644 components/clearbutton/tokens.json delete mode 100644 components/closebutton/tokens.json delete mode 100644 components/coachindicator/tokens.json delete mode 100644 components/coachmark/tokens.json delete mode 100644 components/colorarea/tokens.json delete mode 100644 components/colorhandle/tokens.json delete mode 100644 components/colorloupe/tokens.json delete mode 100644 components/colorslider/tokens.json delete mode 100644 components/colorwheel/tokens.json delete mode 100644 components/combobox/tokens.json delete mode 100644 components/contextualhelp/tokens.json delete mode 100644 components/datepicker/tokens.json delete mode 100644 components/dial/tokens.json delete mode 100644 components/dialog/tokens.json delete mode 100644 components/divider/tokens.json delete mode 100644 components/dropindicator/tokens.json delete mode 100644 components/dropzone/tokens.json delete mode 100644 components/fieldgroup/tokens.json delete mode 100644 components/fieldlabel/tokens.json delete mode 100644 components/floatingactionbutton/tokens.json delete mode 100644 components/form/tokens.json delete mode 100644 components/helptext/tokens.json delete mode 100644 components/icon/tokens.json delete mode 100644 components/illustratedmessage/tokens.json delete mode 100644 components/infieldbutton/tokens.json delete mode 100644 components/infieldprogresscircle/tokens.json delete mode 100644 components/inlinealert/tokens.json delete mode 100644 components/link/tokens.json delete mode 100644 components/logicbutton/tokens.json delete mode 100644 components/menu/tokens.json delete mode 100644 components/meter/tokens.json delete mode 100644 components/miller/tokens.json delete mode 100644 components/modal/tokens.json delete mode 100644 components/opacitycheckerboard/tokens.json delete mode 100644 components/page/tokens.json delete mode 100644 components/pagination/tokens.json delete mode 100644 components/picker/tokens.json delete mode 100644 components/pickerbutton/tokens.json delete mode 100644 components/popover/tokens.json delete mode 100644 components/progressbar/tokens.json delete mode 100644 components/progresscircle/tokens.json delete mode 100644 components/radio/tokens.json delete mode 100644 components/rating/tokens.json delete mode 100644 components/search/tokens.json delete mode 100644 components/sidenav/tokens.json delete mode 100644 components/slider/tokens.json delete mode 100644 components/splitview/tokens.json delete mode 100644 components/statuslight/tokens.json delete mode 100644 components/steplist/tokens.json delete mode 100644 components/stepper/tokens.json delete mode 100644 components/swatch/tokens.json delete mode 100644 components/swatchgroup/tokens.json delete mode 100644 components/switch/tokens.json delete mode 100644 components/table/tokens.json delete mode 100644 components/tabs/tokens.json delete mode 100644 components/tag/tokens.json delete mode 100644 components/taggroup/tokens.json delete mode 100644 components/textfield/tokens.json delete mode 100644 components/thumbnail/tokens.json delete mode 100644 components/toast/tokens.json delete mode 100644 components/tooltip/tokens.json delete mode 100644 components/tray/tokens.json delete mode 100644 components/treeview/tokens.json delete mode 100644 components/typography/tokens.json delete mode 100644 components/underlay/tokens.json delete mode 100644 components/well/tokens.json create mode 100644 plugins/postcss-rgb-mapping/CHANGELOG.md create mode 100644 plugins/postcss-rgb-mapping/README.md create mode 100644 plugins/postcss-rgb-mapping/expected/basic.css create mode 100644 plugins/postcss-rgb-mapping/expected/modern.css create mode 100644 plugins/postcss-rgb-mapping/fixtures/basic.css create mode 100644 plugins/postcss-rgb-mapping/index.js create mode 100644 plugins/postcss-rgb-mapping/package.json create mode 100644 plugins/postcss-rgb-mapping/project.json create mode 100644 plugins/postcss-rgb-mapping/test.js diff --git a/.github/QUICK-START.md b/.github/QUICK-START.md index d6935dfad4f..6be1504669e 100644 --- a/.github/QUICK-START.md +++ b/.github/QUICK-START.md @@ -31,17 +31,13 @@ To force the dark theme, you can add `color-scheme: dark` to your container elem
``` -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 update the cascading layers inheritance: +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: -```css -@layers defaults, medium; - -@media screen and (min-width: 768px) { - @layers defaults, large; -} +```html + ``` -What's happening here is that the `defaults` layer is being overridden by the `large` layer when the screen size is greater than 768px. This means that all tokens that have a value for the `large` scale will be used instead of the default value. The most useful feature of this approach is that each application can make their own decision about which scale to leverage and at what screen size. This allows for a lot of flexibility in how the design language is applied to different applications. +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: @@ -50,7 +46,7 @@ Use the `index.css` files in your project to include component and global styles @@ -78,7 +74,7 @@ To put it all together, your final html file will look like this: ([ - /** why build? constraints checks for compiled dist output to validate exports */ - "cross-env NODE_ENV=production yarn build", "yarn constraints --fix", "yarn install --refresh-lockfile", `eslint --fix --cache --no-error-on-unmatched-pattern ${files.join(" ")}`, diff --git a/package.json b/package.json index 660099ded1a..27850af4857 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "cleaner": "nx run-many --target clean --projects", "compare": "cross-env NODE_ENV=production yarn bundle && yarn component:compare", "component:build": "node --no-warnings ./tasks/component-builder.js", - "component:compare": "node --no-warnings ./tasks/component-compare.js", + "component:compare": "node --no-warnings ./tasks/component-compare.js --tag next", "component:report": "node --no-warnings ./tasks/component-reporter.js", "dev": "cross-env NODE_ENV=development nx run storybook:build:docs", "docs:report": "yarn report", @@ -69,6 +69,7 @@ "@changesets/cli": "^2.29.7", "@commitlint/cli": "^19.8.1", "@commitlint/config-conventional": "^19.8.1", + "@spectrum-tools/postcss-rgb-mapping": "1.1.0", "@yarnpkg/types": "^4.0.1", "at-rule-packer": "^0.5.0", "autoprefixer": "^10.4.21", diff --git a/plugins/postcss-rgb-mapping/CHANGELOG.md b/plugins/postcss-rgb-mapping/CHANGELOG.md new file mode 100644 index 00000000000..9fd32bb6fba --- /dev/null +++ b/plugins/postcss-rgb-mapping/CHANGELOG.md @@ -0,0 +1,38 @@ +# Change Log + +## 1.1.0 + +### Minor Changes + +- [#3452](https://github.com/adobe/spectrum-css/pull/3452) [`287cff8`](https://github.com/adobe/spectrum-css/commit/287cff82b7706f0f56d6d37f48e1d9c60a6df4b9) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - Adds new functionality to better handle tokens that reference other transparent tokens. + + When a custom properties below is defined as another, specifically "transparent," variable, such as: + + ```css + --disabled-static-white-background-color: var( + --spectrum-transparent-white-100 + ); + ``` + + ...the plugin can now convert this single custom property into its `-rgb` and `-opacity` postfixed variables, that each correspond to the `-rgb` and `-opacity` variables of the definition's transparent token. It then reassembles the original, using and referencing these newly created variables. + + ```css + --disabled-static-white-background-color-rgb: var( + --spectrum-transparent-white-100-rgb + ); + --disabled-static-white-background-color-opacity: var( + --spectrum-transparent-white-100-opacity + ); + --disabled-static-white-background-color: rgba( + var(--disabled-static-white-background-color-rgb), + var(--disabled-static-white-background-color-opacity) + ); + ``` + +## 1.0.0 + +### Major Changes + +📝 [#3502](https://github.com/adobe/spectrum-css/pull/3502) [`562396e`](https://github.com/adobe/spectrum-css/commit/562396eaf21769341f78ea3761393b65f00e751b) Thanks [@castastrophe](https://github.com/castastrophe)! + +- Migrated the `postcss-rgb-mapping` package into the new `@spectrum-tools` namespace so updates may shipped and shared among other projects. diff --git a/plugins/postcss-rgb-mapping/README.md b/plugins/postcss-rgb-mapping/README.md new file mode 100644 index 00000000000..1f7016a514c --- /dev/null +++ b/plugins/postcss-rgb-mapping/README.md @@ -0,0 +1,89 @@ +# postcss-rgb-mapping + +> Remaps rgb(a) values to an `rgb` postfixed variable. If an opacity is found, creates a separate `opacity` postfixed variable. +> Also remaps values that reference a transparent token (for example, `transparent-black-300`) to `rgb` and `opacity` postfixed variables. + +## Installation + +```sh +yarn add -D @spectrum-tools/postcss-rgb-mapping +postcss -u postcss-rgb-mapping -o dist/index.css src/index.css +``` + +## Usage + +### Example 1: RGB and opacity postfixed variables + +This plugin turns this: + +```css +.spectrum--lightest { + --spectrum-seafoam-100: rgba(206, 247, 243); + --spectrum-seafoam-200: rgba(170, 241, 234, 0.5); +} +``` + +Into this: + +```css +.spectrum--lightest { + /* Both --spectrum-seafoam-100 and --spectrum-seafoam-200 get split into separate + "-rgb" and "-opacity" values when applicable. */ + --spectrum-seafoam-100-rgb: 206, 247, 243; + --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb: 170, 241, 234; + --spectrum-seafoam-200-opacity: 0.5; + /* The plugin then redefines the original custom variable to use the newly created + "-rgb" and/or "-opacity" custom variables. */ + --spectrum-seafoam-200: rgba( + var(--spectrum-seafoam-200-rgb), + var(--spectrum-seafoam-200-opacity) + ); +} +``` + +### Example 2: Remapping of transparent tokens + +This plugin turns this: + +```css +.spectrum--lightest { + --spectrum-transparent-white-100-rgb: 100, 100, 100; + --spectrum-transparent-white-100-opacity: 0.5; + --spectrum-transparent-white-100: rgba( + var(--spectrum-transparent-white-100-rgb), + var(--spectrum-transparent-white-100-opacity) + ); + /* The custom properties below is defined as another, specifically "transparent," variable. */ + --disabled-static-white-background-color: var( + --spectrum-transparent-white-100 + ); +} +``` + +Into this: + +```css +.spectrum--lightest { + --spectrum-transparent-white-100-rgb: 100, 100, 100; + --spectrum-transparent-white-100-opacity: 0.5; + --spectrum-transparent-white-100: rgba( + var(--spectrum-transparent-white-100-rgb), + var(--spectrum-transparent-white-100-opacity) + ); + /* In a similar fashion, the plugin creates new "-rgb" and "-opacity" postfixed custom + variables, that correspond to the definition's transparent "-rgb" and "-opacity" + postfixed custom variables. */ + --disabled-static-white-background-color-rgb: var( + --spectrum-transparent-white-100-rgb + ); + --disabled-static-white-background-color-opacity: var( + --spectrum-transparent-white-100-opacity + ); + /* Then reassembles the original to use and reference these newly created variables. */ + --disabled-static-white-background-color: rgba( + var(--disabled-static-white-background-color-rgb), + var(--disabled-static-white-background-color-opacity) + ); +} +``` diff --git a/plugins/postcss-rgb-mapping/expected/basic.css b/plugins/postcss-rgb-mapping/expected/basic.css new file mode 100644 index 00000000000..8a5d3f3f350 --- /dev/null +++ b/plugins/postcss-rgb-mapping/expected/basic.css @@ -0,0 +1,15 @@ +.elements { + --seafoam-100-rgb: 206, 247, 243; + --seafoam-100: rgba(var(--seafoam-100-rgb)); + --seafoam-200-rgb: 206, 247, 243; + --seafoam-200-opacity: 0.5; + --seafoam-200: rgba(var(--seafoam-200-rgb), var(--seafoam-200-opacity)); + --seafoam-300-rgb: 206, 247, 243; + --seafoam-300: rgba(var(--seafoam-300-rgb)); + --spectrum-transparent-white-100-rgb: 100, 100, 100; + --spectrum-transparent-white-100-opacity: 0.5; + --spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity)); + --disabled-static-white-background-color-rgb: var(--spectrum-transparent-white-100-rgb); + --disabled-static-white-background-color-opacity: var(--spectrum-transparent-white-100-opacity); + --disabled-static-white-background-color: rgba(var(--disabled-static-white-background-color-rgb), var(--disabled-static-white-background-color-opacity)); +} diff --git a/plugins/postcss-rgb-mapping/expected/modern.css b/plugins/postcss-rgb-mapping/expected/modern.css new file mode 100644 index 00000000000..209329ec912 --- /dev/null +++ b/plugins/postcss-rgb-mapping/expected/modern.css @@ -0,0 +1,15 @@ +.elements { + --seafoam-100-rgb: 206 247 243; + --seafoam-100: rgba(var(--seafoam-100-rgb)); + --seafoam-200-rgb: 206 247 243; + --seafoam-200-opacity: 50%; + --seafoam-200: rgba(var(--seafoam-200-rgb) / var(--seafoam-200-opacity)); + --seafoam-300-rgb: 206 247 243; + --seafoam-300: rgba(var(--seafoam-300-rgb)); + --spectrum-transparent-white-100-rgb: 100 100 100; + --spectrum-transparent-white-100-opacity: 50%; + --spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb) / var(--spectrum-transparent-white-100-opacity)); + --disabled-static-white-background-color-rgb: var(--spectrum-transparent-white-100-rgb); + --disabled-static-white-background-color-opacity: var(--spectrum-transparent-white-100-opacity); + --disabled-static-white-background-color: rgba(var(--disabled-static-white-background-color-rgb) / var(--disabled-static-white-background-color-opacity)); +} diff --git a/plugins/postcss-rgb-mapping/fixtures/basic.css b/plugins/postcss-rgb-mapping/fixtures/basic.css new file mode 100644 index 00000000000..d614c9cb38b --- /dev/null +++ b/plugins/postcss-rgb-mapping/fixtures/basic.css @@ -0,0 +1,7 @@ +.elements { + --seafoam-100: rgba(206, 247, 243); + --seafoam-200: rgba(206, 247, 243, 0.5); + --seafoam-300: rgb(206, 247, 243); + --spectrum-transparent-white-100: rgba(100, 100, 100, 0.5); + --disabled-static-white-background-color: var(--spectrum-transparent-white-100); +} diff --git a/plugins/postcss-rgb-mapping/index.js b/plugins/postcss-rgb-mapping/index.js new file mode 100644 index 00000000000..22ee0214eb9 --- /dev/null +++ b/plugins/postcss-rgb-mapping/index.js @@ -0,0 +1,168 @@ +/*! + * Copyright 2024. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. +*/ + +const valuesParser = require("postcss-values-parser"); + +/** @typedef {object} Options */ + +/** + * @type {import('postcss').PluginCreator} + * @param {Options} options + * @returns {import('postcss').Plugin} + */ +function rgbMappingFunction ({ + colorFunctionalNotation = false, +}) { + + return { + postcssPlugin: "@spectrum-tools/postcss-rgb-mapping", + /** @type {import('postcss').RootProcessor} */ + Root(root) { + /* Gather all the custom properties that reference "unprocessed" transparent tokens (i.e. transparent-white-200) */ + const transparentTokens = new Set(); + root.walkDecls(decl => { + if (decl.prop.startsWith('--spectrum-transparent-') && !decl.prop.endsWith('rgb') && !decl.prop.endsWith('opacity')) { + transparentTokens.add(decl.prop); + } + }); + + root.walkDecls(decl => { + const { prop, value } = decl; + + /* Determine if this property is a custom property */ + const isCustomProp = prop.startsWith("--"); + + /* Determine if this property has already been processed */ + const isProcessed = prop.endsWith("rgb") || prop.endsWith("opacity"); + + /* Check for transparent token reference */ + const transparentMatch = value.match(/var\((--spectrum-transparent-[^\s)]+)\)/); + if (isCustomProp && !isProcessed && transparentMatch) { + const referencedToken = transparentMatch[1]; + + if (transparentTokens.has(referencedToken)) { + /* Create the new RGB and opacity properties */ + decl.cloneBefore({ + prop: `${prop}-rgb`, + value: `var(${referencedToken}-rgb)` + }); + decl.cloneBefore({ + prop: `${prop}-opacity`, + value: `var(${referencedToken}-opacity)` + }); + + /* Update the original declaration */ + decl.value = `rgba(var(${prop}-rgb)${colorFunctionalNotation ? " / " : ", "}var(${prop}-opacity))`; + } + } + return; + }); + }, + + /** @type {import('postcss').DeclarationProcessor} */ + Declaration(decl, { Warning }) { + const { prop, value } = decl; + + /* Determine if this property is a custom property */ + const isCustomProp = prop.startsWith("--"); + + /* Determine if this property has already been processed */ + const isProcessed = prop.endsWith("rgb") || prop.endsWith("opacity"); + + /* Parse the value for its parts */ + const parsedValue = valuesParser.parse(value) || []; + + /* Determine if the value has an rgb or rgba value */ + const hasRGBValue = parsedValue.nodes.length ? parsedValue.nodes.some((node) => node.type === "func" && (["rgb", "rgba"].some(func => node.name === func))) : false; + + /* + * If the property is not a custom prop, or + * if the property is a custom prop and ends with 'rgb', or + * if the value is not an rgb or rgba value, or + * if the value is an rgba value with a var() function + * then return without processing. + */ + if (!isCustomProp || isProcessed || !hasRGBValue || parsedValue.nodes.length === 0) return; + + const rgba = parsedValue.nodes.find((node) => node.type === "func" && (["rgb", "rgba"].some(func => node.name === func))); + + const [r,g,b,a] = rgba.nodes.reduce((acc, node) => { + if (node.type === "numeric" && node.value) { + if (node?.unit && node.unit === "%") { + acc.push((node.value / 100).toFixed(2)); + } + else { + acc.push(node.value); + } + } + return acc; + }, []); + + /* If any of the values are undefined, return without processing */ + if (!r || !g || !b) { + return new Warning(`Unable to parse out rgb values: ${value}`, { node: decl }); + } + + /* Create a new declaration with the rgb values separated out */ + decl.cloneBefore({ + prop: `${prop}-rgb`, + value: colorFunctionalNotation ? `${r} ${g} ${b}` : `${r}, ${g}, ${b}`, + }); + + /* Update the original declaration value to point to the new variable */ + if (a) { + if (colorFunctionalNotation) { + if (typeof a === "string" && a.endsWith("%")) { + decl.cloneBefore({ + prop: `${prop}-opacity`, + value: a, + }); + } + else if (typeof a === "string" && a.startsWith("0.")) { + decl.cloneBefore({ + prop: `${prop}-opacity`, + value: `${parseFloat(a) * 100}%`, + }); + } + else { + decl.cloneBefore({ + prop: `${prop}-opacity`, + value: `${parseFloat(a) * 100}%`, + }); + } + } + else { + if (typeof a === "string" && a.endsWith("%")) { + decl.cloneBefore({ + prop: `${prop}-opacity`, + value: `${parseFloat(a) / 100}`, + }); + } + else { + decl.cloneBefore({ + prop: `${prop}-opacity`, + value: a, + }); + } + } + } + decl.assign({ + value: `rgba(var(${prop}-rgb)${a ? `${colorFunctionalNotation ? " /" : ","} var(${prop}-opacity)` : ""})`, + }); + return; + }, + }; +} + +rgbMappingFunction.postcss = true; +module.exports = rgbMappingFunction; diff --git a/plugins/postcss-rgb-mapping/package.json b/plugins/postcss-rgb-mapping/package.json new file mode 100644 index 00000000000..63c8fa15a92 --- /dev/null +++ b/plugins/postcss-rgb-mapping/package.json @@ -0,0 +1,42 @@ +{ + "name": "@spectrum-tools/postcss-rgb-mapping", + "version": "1.1.0", + "description": "Remaps rgb(a) values to an rgb postfixed variable", + "license": "Apache-2.0", + "author": "Adobe", + "contributors": [ + "Cassondra Roberts " + ], + "homepage": "https://opensource.adobe.com/spectrum-css", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "plugins/postcss-rgb-mapping" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "index.js", + "files": [ + "package.json", + "index.js", + "*.md" + ], + "dependencies": { + "postcss-values-parser": "^6.0.2" + }, + "peerDependencies": { + "postcss": ">=8" + }, + "devDependencies": { + "ava": "^6.4.1", + "c8": "^10.1.3", + "postcss": "^8.5.6" + }, + "keywords": [ + "css", + "rgb", + "plugin", + "postcss" + ] +} diff --git a/plugins/postcss-rgb-mapping/project.json b/plugins/postcss-rgb-mapping/project.json new file mode 100644 index 00000000000..36438d12890 --- /dev/null +++ b/plugins/postcss-rgb-mapping/project.json @@ -0,0 +1,16 @@ +{ + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "name": "postcss-rgb-mapping", + "tags": ["tooling", "postcss", "plugin"], + "targets": { + "format": { + "defaultConfiguration": "plugins" + }, + "lint": { + "defaultConfiguration": "plugins" + }, + "test": { + "defaultConfiguration": "plugins" + } + } +} diff --git a/plugins/postcss-rgb-mapping/test.js b/plugins/postcss-rgb-mapping/test.js new file mode 100644 index 00000000000..73e3319aa6c --- /dev/null +++ b/plugins/postcss-rgb-mapping/test.js @@ -0,0 +1,42 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +const fs = require("fs"); +const test = require("ava"); +const postcss = require("postcss"); +const plugin = require("./index.js"); + +function compare(t, fixtureFilePath, expectedFilePath, options = {}) { + return postcss([plugin(options)]) + .process(readFile(`./fixtures/${fixtureFilePath}`), { + from: fixtureFilePath, + }) + .then((result) => { + const actual = result.css; + const expected = readFile(`./expected/${expectedFilePath}`); + t.is(actual, expected); + t.is(result.warnings().length, 0); + }); +} + +function readFile(filename) { + return fs.readFileSync(filename, "utf8"); +} + +test("create basic output", (t) => { + return compare(t, "basic.css", "basic.css"); +}); + +test("use modern rgba format", (t) => { + return compare(t, "basic.css", "modern.css", { colorFunctionalNotation: true }); +}); diff --git a/stylelint.config.js b/stylelint.config.js index e7d22549d4d..aae2f118521 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -53,7 +53,7 @@ module.exports = { "at-rule-no-unknown": [ true, { - ignoreAtRules: ["extend", "each", "include", "mixin", "design-tokens"], + ignoreAtRules: ["extend", "each", "include", "mixin"], }, ], "block-no-empty": [true, { @@ -81,12 +81,6 @@ module.exports = { ignoreProperties: { "/.+/": ["CanvasText", "preserve-parent-color"], }, - propertiesSyntax: { - "/.+/": "| ", - }, - typesSyntax: { - "": "design-token( [ to ]? )", - }, }, ], "declaration-block-no-shorthand-property-overrides": true, @@ -94,7 +88,6 @@ module.exports = { true, { severity: "warning", - ignoreFunctions: ["design-token"], }, ], "max-nesting-depth": [3, { severity: "warning" }], @@ -190,6 +183,7 @@ module.exports = { ignoreList: [ /^--mod-/, /^--spectrum-picked-color$/, + /^--spectrum-downstate-(height|width)$/, ], skipDependencies: false, disableFix: true, diff --git a/tokens/custom-tokens.json b/tokens/custom-tokens.json index 794649d4290..472f2275416 100644 --- a/tokens/custom-tokens.json +++ b/tokens/custom-tokens.json @@ -1,13 +1,40 @@ { + "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-1000": { - "value": "500ms" - }, "animation-duration-200": { "value": "160ms" }, @@ -17,12 +44,6 @@ "animation-duration-300": { "value": "190ms" }, - "animation-duration-400": { - "value": "220ms" - }, - "animation-duration-4000": { - "value": "2000ms" - }, "animation-duration-500": { "value": "250ms" }, @@ -32,68 +53,785 @@ "animation-duration-6000": { "value": "3000ms" }, - "animation-duration-700": { - "value": "3500ms" - }, "animation-duration-800": { "value": "400ms" }, - "animation-duration-900": { - "value": "450ms" - }, "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-linear": { - "value": "cubic-bezier(0, 0, 1, 1)" - }, "animation-ease-out": { "value": "cubic-bezier(0, 0, 0.4, 1)" }, - "animation-linear": { - "value": "cubic-bezier(0, 0, 1, 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" + } + } }, - "cjk-font": { - "value": "{cjk-font-family-stack}" + "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" }, - "font-family": { - "value": "{sans-font-family-stack}" + "datepicker-dash-line-height": { + "sets": { + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + } }, - "font-family-ar": { - "value": "myriad-arabic, adobe-clean, \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif" + "datepicker-datetime-width-first": { + "sets": { + "desktop": { + "value": "36px" + }, + "mobile": { + "value": "45px" + } + } }, - "font-family-he": { - "value": "myriad-hebrew, adobe-clean, \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif" + "datepicker-generic-padding": { + "sets": { + "desktop": { + "value": "{spacing-200}" + }, + "mobile": { + "value": "15px" + } + } }, - "font-size": { - "value": "{font-size-100}" + "datepicker-initial-width": { + "sets": { + "desktop": { + "value": "128px" + }, + "mobile": { + "value": "160px" + } + } }, - "font-style": { - "value": "{default-font-style}" + "datepicker-input-datetime-width": { + "sets": { + "desktop": { + "value": "{spacing-400}" + }, + "mobile": { + "value": "30px" + } + } }, - "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" + "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" + } + } }, - "sans-serif-font": { - "value": "{sans-font-family-stack}" + "dial-handle-inline-margin": { + "sets": { + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + } }, - "serif-font": { - "value": "{serif-font-family-stack}" + "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/dist/json/tokens.json b/tokens/dist/json/tokens.json index b7340de698d..4a5b5772d9e 100644 --- a/tokens/dist/json/tokens.json +++ b/tokens/dist/json/tokens.json @@ -102,21 +102,21 @@ "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)" + }, + "dark": { + "value": "rgb(238, 245, 255)" } }, "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)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "accent-color-200": { @@ -269,46 +269,6 @@ "value": "rgb(86, 129, 255)" } }, - "accordion-background-color-default": { - "prop": "--spectrum-accordion-background-color-default", - "ref": "color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-background-opacity-default), transparent)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - } - }, - "accordion-background-color-down": { - "prop": "--spectrum-accordion-background-color-down", - "ref": "color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-background-opacity-down), transparent)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - } - }, - "accordion-background-color-hover": { - "prop": "--spectrum-accordion-background-color-hover", - "ref": "color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-background-opacity-hover), transparent)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - } - }, - "accordion-background-color-key-focus": { - "prop": "--spectrum-accordion-background-color-key-focus", - "ref": "color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-background-opacity-key-focus), transparent)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - } - }, "accordion-bottom-to-text-compact-extra-large": { "prop": "--spectrum-accordion-bottom-to-text-compact-extra-large", "desktop": { @@ -457,16 +417,6 @@ "value": "15px" } }, - "accordion-component-edge-to-text": { - "prop": "--spectrum-accordion-component-edge-to-text", - "ref": "var(--spectrum-component-edge-to-text-75)", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, "accordion-content-area-bottom-to-content": { "prop": "--spectrum-accordion-content-area-bottom-to-content", "desktop": { @@ -521,21 +471,6 @@ "value": "10px" } }, - "accordion-corner-radius": { - "prop": "--spectrum-accordion-corner-radius", - "ref": "var(--spectrum-corner-radius-100)", - "value": "4px" - }, - "accordion-disclosure-indicator-height": { - "prop": "--spectrum-accordion-disclosure-indicator-height", - "ref": "var(--spectrum-component-height-100)", - "desktop": { - "value": "32px" - }, - "mobile": { - "value": "40px" - } - }, "accordion-disclosure-indicator-to-text": { "prop": "--spectrum-accordion-disclosure-indicator-to-text", "value": "0px" @@ -576,16 +511,6 @@ "value": "9px" } }, - "accordion-divider-color": { - "prop": "--spectrum-accordion-divider-color", - "ref": "var(--spectrum-gray-200)", - "light": { - "value": "rgb(225, 225, 225)" - }, - "dark": { - "value": "rgb(50, 50, 50)" - } - }, "accordion-edge-to-content-area-extra-large": { "prop": "--spectrum-accordion-edge-to-content-area-extra-large", "value": "17px" @@ -610,219 +535,14 @@ "prop": "--spectrum-accordion-edge-to-text", "value": "0px" }, - "accordion-focus-indicator-color": { - "prop": "--spectrum-accordion-focus-indicator-color", - "ref": "var(--spectrum-focus-indicator-color)", - "light": { - "value": "rgb(75, 117, 255)" - }, - "dark": { - "value": "rgb(64, 105, 253)" - } - }, "accordion-focus-indicator-gap": { "prop": "--spectrum-accordion-focus-indicator-gap", - "ref": "var(--spectrum-focus-indicator-gap)", "value": "2px" }, - "accordion-focus-indicator-thickness": { - "prop": "--spectrum-accordion-focus-indicator-thickness", - "ref": "var(--spectrum-focus-indicator-thickness)", - "value": "2px" - }, - "accordion-item-content-area-bottom-to-content": { - "prop": "--spectrum-accordion-item-content-area-bottom-to-content", - "ref": "var(--spectrum-accordion-content-area-bottom-to-content)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "accordion-item-content-area-top-to-content": { - "prop": "--spectrum-accordion-item-content-area-top-to-content", - "ref": "var(--spectrum-accordion-content-area-top-to-content)", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "accordion-item-content-color": { - "prop": "--spectrum-accordion-item-content-color", - "ref": "var(--spectrum-body-color)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" - } - }, - "accordion-item-content-disabled-color": { - "prop": "--spectrum-accordion-item-content-disabled-color", - "ref": "var(--spectrum-disabled-content-color)", - "light": { - "value": "rgb(198, 198, 198)" - }, - "dark": { - "value": "rgb(68, 68, 68)" - } - }, - "accordion-item-content-font": { - "prop": "--spectrum-accordion-item-content-font", - "ref": "var(--spectrum-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" - }, - "accordion-item-content-font-size": { - "prop": "--spectrum-accordion-item-content-font-size", - "ref": "var(--spectrum-body-size-s)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, - "accordion-item-content-font-style": { - "prop": "--spectrum-accordion-item-content-font-style", - "ref": "var(--spectrum-body-sans-serif-font-style)", - "value": "normal" - }, - "accordion-item-content-font-weight": { - "prop": "--spectrum-accordion-item-content-font-weight", - "ref": "var(--spectrum-body-sans-serif-font-weight)", - "value": "400" - }, - "accordion-item-content-line-height": { - "prop": "--spectrum-accordion-item-content-line-height", - "ref": "var(--spectrum-line-height-100)", - "value": 1.3 - }, - "accordion-item-header-bottom-to-text": { - "prop": "--spectrum-accordion-item-header-bottom-to-text", - "ref": "var(--spectrum-accordion-bottom-to-text-regular-medium)", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "13px" - } - }, - "accordion-item-header-color-default": { - "prop": "--spectrum-accordion-item-header-color-default", - "ref": "var(--spectrum-neutral-content-color-default)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" - } - }, - "accordion-item-header-color-down": { - "prop": "--spectrum-accordion-item-header-color-down", - "ref": "var(--spectrum-neutral-content-color-down)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - } - }, - "accordion-item-header-color-hover": { - "prop": "--spectrum-accordion-item-header-color-hover", - "ref": "var(--spectrum-neutral-content-color-hover)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - } - }, - "accordion-item-header-color-key-focus": { - "prop": "--spectrum-accordion-item-header-color-key-focus", - "ref": "var(--spectrum-neutral-content-color-key-focus)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - } - }, - "accordion-item-header-disabled-color": { - "prop": "--spectrum-accordion-item-header-disabled-color", - "ref": "var(--spectrum-disabled-content-color)", - "light": { - "value": "rgb(198, 198, 198)" - }, - "dark": { - "value": "rgb(68, 68, 68)" - } - }, - "accordion-item-header-font": { - "prop": "--spectrum-accordion-item-header-font", - "ref": "var(--spectrum-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" - }, - "accordion-item-header-font-size": { - "prop": "--spectrum-accordion-item-header-font-size", - "ref": "var(--spectrum-font-size-300)", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "accordion-item-header-font-style": { - "prop": "--spectrum-accordion-item-header-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, - "accordion-item-header-font-weight": { - "prop": "--spectrum-accordion-item-header-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" - }, - "accordion-item-header-line-height": { - "prop": "--spectrum-accordion-item-header-line-height", - "value": "1.25" - }, - "accordion-item-header-top-to-text": { - "prop": "--spectrum-accordion-item-header-top-to-text", - "ref": "var(--spectrum-accordion-top-to-text-regular-medium)", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "10px" - } - }, - "accordion-item-height": { - "prop": "--spectrum-accordion-item-height", - "ref": "var(--spectrum-component-height-200)", - "desktop": { - "value": "40px" - }, - "mobile": { - "value": "50px" - } - }, "accordion-item-to-divider": { "prop": "--spectrum-accordion-item-to-divider", "value": "0px" }, - "accordion-min-block-size": { - "prop": "--spectrum-accordion-min-block-size", - "ref": "max(var(--spectrum-accordion-item-height), calc(var(--spectrum-accordion-item-header-top-to-text) + var(--spectrum-accordion-item-header-bottom-to-text) + (var(--spectrum-accordion-item-header-font-size) * var(--spectrum-accordion-item-header-line-height))))", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, "accordion-minimum-width": { "prop": "--spectrum-accordion-minimum-width", "desktop": { @@ -986,11 +706,11 @@ }, "action-bar-border-color": { "prop": "--spectrum-action-bar-border-color", + "ref": "var(--spectrum-gray-400)", "light": { "ref": "var(--spectrum-transparent-white-25)", "value": "rgba(255, 255, 255, 0)" }, - "ref": "var(--spectrum-gray-400)", "dark": { "value": "rgb(68, 68, 68)" } @@ -1148,6 +868,17 @@ "value": "22px" } }, + "alert-banner-close-button-spacing": { + "prop": "--spectrum-alert-banner-close-button-spacing", + "desktop": { + "ref": "var(--spectrum-spacing-100)", + "value": "8px" + }, + "mobile": { + "ref": "var(--spectrum-spacing-200)", + "value": "12px" + } + }, "alert-banner-minimum-height": { "prop": "--spectrum-alert-banner-minimum-height", "desktop": { @@ -1157,6 +888,17 @@ "value": "64px" } }, + "alert-banner-text-to-button-vertical": { + "prop": "--spectrum-alert-banner-text-to-button-vertical", + "desktop": { + "ref": "var(--spectrum-spacing-100)", + "value": "8px" + }, + "mobile": { + "ref": "var(--spectrum-spacing-200)", + "value": "12px" + } + }, "alert-banner-to-bottom-text": { "prop": "--spectrum-alert-banner-to-bottom-text", "ref": "var(--spectrum-alert-banner-bottom-to-text)", @@ -1243,6 +985,17 @@ "value": "17px" } }, + "alert-dialog-edge-to-content": { + "prop": "--spectrum-alert-dialog-edge-to-content", + "desktop": { + "ref": "var(--spectrum-spacing-500)", + "value": "32px" + }, + "mobile": { + "ref": "var(--spectrum-spacing-400)", + "value": "24px" + } + }, "alert-dialog-maximum-width": { "prop": "--spectrum-alert-dialog-maximum-width", "value": "480px" @@ -1283,10 +1036,6 @@ "prop": "--spectrum-animation-duration-100", "value": "130ms" }, - "animation-duration-1000": { - "prop": "--spectrum-animation-duration-1000", - "value": "500ms" - }, "animation-duration-200": { "prop": "--spectrum-animation-duration-200", "value": "160ms" @@ -1299,14 +1048,6 @@ "prop": "--spectrum-animation-duration-300", "value": "190ms" }, - "animation-duration-400": { - "prop": "--spectrum-animation-duration-400", - "value": "220ms" - }, - "animation-duration-4000": { - "prop": "--spectrum-animation-duration-4000", - "value": "2000ms" - }, "animation-duration-500": { "prop": "--spectrum-animation-duration-500", "value": "250ms" @@ -1319,18 +1060,10 @@ "prop": "--spectrum-animation-duration-6000", "value": "3000ms" }, - "animation-duration-700": { - "prop": "--spectrum-animation-duration-700", - "value": "3500ms" - }, "animation-duration-800": { "prop": "--spectrum-animation-duration-800", "value": "400ms" }, - "animation-duration-900": { - "prop": "--spectrum-animation-duration-900", - "value": "450ms" - }, "animation-ease-in": { "prop": "--spectrum-animation-ease-in", "value": "cubic-bezier(0.5, 0, 1, 1)" @@ -1339,18 +1072,10 @@ "prop": "--spectrum-animation-ease-in-out", "value": "cubic-bezier(0.45, 0, 0.4, 1)" }, - "animation-ease-linear": { - "prop": "--spectrum-animation-ease-linear", - "value": "cubic-bezier(0, 0, 1, 1)" - }, "animation-ease-out": { "prop": "--spectrum-animation-ease-out", "value": "cubic-bezier(0, 0, 0.4, 1)" }, - "animation-linear": { - "prop": "--spectrum-animation-linear", - "value": "cubic-bezier(0, 0, 1, 1)" - }, "arrow-icon-size-100": { "prop": "--spectrum-arrow-icon-size-100", "desktop": { @@ -1414,6 +1139,54 @@ "value": "12px" } }, + "assetcard-content-font-size": { + "prop": "--spectrum-assetcard-content-font-size", + "ref": "var(--spectrum-body-size-xs)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "15px" + } + }, + "assetcard-focus-ring-border-radius": { + "prop": "--spectrum-assetcard-focus-ring-border-radius", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "9px" + } + }, + "assetcard-header-content-font-size": { + "prop": "--spectrum-assetcard-header-content-font-size", + "ref": "var(--spectrum-heading-size-xxs)", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "17px" + } + }, + "assetcard-selectionindicator-margin": { + "prop": "--spectrum-assetcard-selectionindicator-margin", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } + }, + "assetcard-title-font-size": { + "prop": "--spectrum-assetcard-title-font-size", + "ref": "var(--spectrum-heading-size-xxs)", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "17px" + } + }, "asterisk-icon-size-100": { "prop": "--spectrum-asterisk-icon-size-100", "desktop": { @@ -1448,11 +1221,11 @@ "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)" + }, + "dark": { + "value": "rgb(17, 17, 17)" } }, "avatar-border-width": { @@ -1754,21 +1527,21 @@ "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)" + }, + "dark": { + "value": "rgb(17, 17, 17)" } }, "background-elevated-color": { "prop": "--spectrum-background-elevated-color", "ref": "var(--spectrum-gray-25)", - "dark": { - "value": "rgb(34, 34, 34)" - }, "light": { "value": "rgb(255, 255, 255)" + }, + "dark": { + "value": "rgb(34, 34, 34)" } }, "background-layer-1-color": { @@ -1814,11 +1587,11 @@ "background-pasteboard-color": { "prop": "--spectrum-background-pasteboard-color", "ref": "var(--spectrum-gray-100)", - "dark": { - "value": "rgb(17, 17, 17)" - }, "light": { "value": "rgb(233, 233, 233)" + }, + "dark": { + "value": "rgb(17, 17, 17)" } }, "bar-panel-gripper-color": { @@ -1922,20 +1695,20 @@ }, "blue-1500": { "prop": "--spectrum-blue-1500", - "dark": { - "value": "rgb(238, 245, 255)" - }, "light": { "value": "rgb(14, 24, 67)" + }, + "dark": { + "value": "rgb(238, 245, 255)" } }, "blue-1600": { "prop": "--spectrum-blue-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, "light": { "value": "rgb(7, 11, 30)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "blue-200": { @@ -2649,146 +2422,146 @@ }, "brown-100": { "prop": "--spectrum-brown-100", - "dark": { - "value": "rgb(35, 24, 8)" - }, "light": { "value": "rgb(252, 247, 242)" + }, + "dark": { + "value": "rgb(35, 24, 8)" } }, "brown-1000": { "prop": "--spectrum-brown-1000", - "dark": { - "value": "rgb(181, 147, 98)" - }, "light": { "value": "rgb(119, 91, 50)" + }, + "dark": { + "value": "rgb(181, 147, 98)" } }, "brown-1100": { "prop": "--spectrum-brown-1100", - "dark": { - "value": "rgb(199, 163, 112)" - }, "light": { "value": "rgb(103, 76, 35)" + }, + "dark": { + "value": "rgb(199, 163, 112)" } }, "brown-1200": { "prop": "--spectrum-brown-1200", - "dark": { - "value": "rgb(222, 185, 130)" - }, "light": { "value": "rgb(88, 61, 21)" + }, + "dark": { + "value": "rgb(222, 185, 130)" } }, "brown-1300": { "prop": "--spectrum-brown-1300", - "dark": { - "value": "rgb(232, 207, 169)" - }, "light": { "value": "rgb(70, 49, 17)" + }, + "dark": { + "value": "rgb(232, 207, 169)" } }, "brown-1400": { "prop": "--spectrum-brown-1400", - "dark": { - "value": "rgb(242, 227, 206)" - }, "light": { "value": "rgb(52, 37, 13)" + }, + "dark": { + "value": "rgb(242, 227, 206)" } }, "brown-1500": { "prop": "--spectrum-brown-1500", - "dark": { - "value": "rgb(250, 244, 236)" - }, "light": { "value": "rgb(38, 26, 9)" + }, + "dark": { + "value": "rgb(250, 244, 236)" } }, "brown-1600": { "prop": "--spectrum-brown-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, "light": { "value": "rgb(16, 12, 4)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "brown-200": { "prop": "--spectrum-brown-200", - "dark": { - "value": "rgb(44, 31, 11)" - }, "light": { "value": "rgb(247, 238, 225)" + }, + "dark": { + "value": "rgb(44, 31, 11)" } }, "brown-300": { "prop": "--spectrum-brown-300", - "dark": { - "value": "rgb(58, 40, 14)" - }, "light": { "value": "rgb(239, 221, 195)" + }, + "dark": { + "value": "rgb(58, 40, 14)" } }, "brown-400": { "prop": "--spectrum-brown-400", - "dark": { - "value": "rgb(78, 55, 19)" - }, "light": { "value": "rgb(229, 200, 157)" + }, + "dark": { + "value": "rgb(78, 55, 19)" } }, "brown-500": { "prop": "--spectrum-brown-500", - "dark": { - "value": "rgb(98, 71, 30)" - }, "light": { "value": "rgb(214, 177, 123)" + }, + "dark": { + "value": "rgb(98, 71, 30)" } }, "brown-600": { "prop": "--spectrum-brown-600", - "dark": { - "value": "rgb(115, 88, 47)" - }, "light": { "value": "rgb(190, 155, 104)" + }, + "dark": { + "value": "rgb(115, 88, 47)" } }, "brown-700": { "prop": "--spectrum-brown-700", - "dark": { - "value": "rgb(132, 104, 61)" - }, "light": { "value": "rgb(171, 138, 90)" + }, + "dark": { + "value": "rgb(132, 104, 61)" } }, "brown-800": { "prop": "--spectrum-brown-800", - "dark": { - "value": "rgb(143, 114, 69)" - }, "light": { "value": "rgb(154, 123, 77)" + }, + "dark": { + "value": "rgb(143, 114, 69)" } }, "brown-900": { "prop": "--spectrum-brown-900", - "dark": { - "value": "rgb(163, 132, 84)" - }, "light": { "value": "rgb(139, 109, 66)" + }, + "dark": { + "value": "rgb(163, 132, 84)" } }, "brown-background-color-default": { @@ -2821,10 +2594,82 @@ "value": "rgb(163, 132, 84)" } }, + "button-bottom-to-text-extra-large": { + "prop": "--spectrum-button-bottom-to-text-extra-large", + "desktop": { + "value": "13px" + }, + "mobile": { + "value": "17px" + } + }, + "button-bottom-to-text-large": { + "prop": "--spectrum-button-bottom-to-text-large", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "13px" + } + }, + "button-bottom-to-text-medium": { + "prop": "--spectrum-button-bottom-to-text-medium", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "button-bottom-to-text-small": { + "prop": "--spectrum-button-bottom-to-text-small", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, "button-minimum-width-multiplier": { "prop": "--spectrum-button-minimum-width-multiplier", "value": 2.25 }, + "button-top-to-text-extra-large": { + "prop": "--spectrum-button-top-to-text-extra-large", + "desktop": { + "value": "13px" + }, + "mobile": { + "value": "16px" + } + }, + "button-top-to-text-large": { + "prop": "--spectrum-button-top-to-text-large", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } + }, + "button-top-to-text-medium": { + "prop": "--spectrum-button-top-to-text-medium", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "9px" + } + }, + "button-top-to-text-small": { + "prop": "--spectrum-button-top-to-text-small", + "desktop": { + "value": "5px" + }, + "mobile": { + "value": "6px" + } + }, "card-background-loading-color": { "prop": "--spectrum-card-background-loading-color", "ref": "var(--spectrum-gray-100)", @@ -3112,20 +2957,20 @@ }, "celery-1500": { "prop": "--spectrum-celery-1500", - "dark": { - "value": "rgb(222, 255, 198)" - }, "light": { "value": "rgb(12, 33, 0)" + }, + "dark": { + "value": "rgb(222, 255, 198)" } }, "celery-1600": { "prop": "--spectrum-celery-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, "light": { "value": "rgb(4, 15, 0)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "celery-200": { @@ -3322,20 +3167,20 @@ }, "chartreuse-1500": { "prop": "--spectrum-chartreuse-1500", - "dark": { - "value": "rgb(242, 249, 206)" - }, "light": { "value": "rgb(25, 30, 0)" + }, + "dark": { + "value": "rgb(242, 249, 206)" } }, "chartreuse-1600": { "prop": "--spectrum-chartreuse-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, "light": { "value": "rgb(11, 14, 0)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "chartreuse-200": { @@ -3658,146 +3503,146 @@ }, "cinnamon-100": { "prop": "--spectrum-cinnamon-100", - "dark": { - "value": "rgb(48, 17, 4)" - }, "light": { "value": "rgb(253, 247, 243)" + }, + "dark": { + "value": "rgb(48, 17, 4)" } }, "cinnamon-1000": { "prop": "--spectrum-cinnamon-1000", - "dark": { - "value": "rgb(206, 136, 99)" - }, "light": { "value": "rgb(147, 77, 43)" + }, + "dark": { + "value": "rgb(206, 136, 99)" } }, "cinnamon-1100": { "prop": "--spectrum-cinnamon-1100", - "dark": { - "value": "rgb(220, 154, 118)" - }, "light": { "value": "rgb(128, 62, 32)" + }, + "dark": { + "value": "rgb(220, 154, 118)" } }, "cinnamon-1200": { "prop": "--spectrum-cinnamon-1200", - "dark": { - "value": "rgb(232, 179, 149)" - }, "light": { "value": "rgb(110, 48, 21)" + }, + "dark": { + "value": "rgb(232, 179, 149)" } }, "cinnamon-1300": { "prop": "--spectrum-cinnamon-1300", - "dark": { - "value": "rgb(239, 203, 183)" - }, "light": { "value": "rgb(92, 35, 11)" + }, + "dark": { + "value": "rgb(239, 203, 183)" } }, "cinnamon-1400": { "prop": "--spectrum-cinnamon-1400", - "dark": { - "value": "rgb(246, 225, 214)" - }, "light": { "value": "rgb(72, 25, 6)" + }, + "dark": { + "value": "rgb(246, 225, 214)" } }, "cinnamon-1500": { "prop": "--spectrum-cinnamon-1500", - "dark": { - "value": "rgb(252, 244, 239)" - }, "light": { "value": "rgb(52, 18, 4)" + }, + "dark": { + "value": "rgb(252, 244, 239)" } }, "cinnamon-1600": { "prop": "--spectrum-cinnamon-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, "light": { "value": "rgb(24, 8, 2)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "cinnamon-200": { "prop": "--spectrum-cinnamon-200", - "dark": { - "value": "rgb(59, 21, 5)" - }, "light": { "value": "rgb(249, 236, 229)" + }, + "dark": { + "value": "rgb(59, 21, 5)" } }, "cinnamon-300": { "prop": "--spectrum-cinnamon-300", - "dark": { - "value": "rgb(79, 28, 7)" - }, "light": { "value": "rgb(244, 218, 203)" + }, + "dark": { + "value": "rgb(79, 28, 7)" } }, "cinnamon-400": { "prop": "--spectrum-cinnamon-400", - "dark": { - "value": "rgb(100, 41, 15)" - }, "light": { "value": "rgb(237, 196, 172)" + }, + "dark": { + "value": "rgb(100, 41, 15)" } }, "cinnamon-500": { "prop": "--spectrum-cinnamon-500", - "dark": { - "value": "rgb(122, 57, 28)" - }, "light": { "value": "rgb(229, 170, 136)" + }, + "dark": { + "value": "rgb(122, 57, 28)" } }, "cinnamon-600": { "prop": "--spectrum-cinnamon-600", - "dark": { - "value": "rgb(143, 74, 40)" - }, "light": { "value": "rgb(212, 145, 108)" + }, + "dark": { + "value": "rgb(143, 74, 40)" } }, "cinnamon-700": { "prop": "--spectrum-cinnamon-700", - "dark": { - "value": "rgb(163, 88, 52)" - }, "light": { "value": "rgb(198, 126, 88)" + }, + "dark": { + "value": "rgb(163, 88, 52)" } }, "cinnamon-800": { "prop": "--spectrum-cinnamon-800", - "dark": { - "value": "rgb(176, 98, 59)" - }, "light": { "value": "rgb(184, 109, 70)" + }, + "dark": { + "value": "rgb(176, 98, 59)" } }, - "cinnamon-900": { - "prop": "--spectrum-cinnamon-900", - "dark": { - "value": "rgb(192, 119, 80)" - }, + "cinnamon-900": { + "prop": "--spectrum-cinnamon-900", "light": { "value": "rgb(170, 94, 56)" + }, + "dark": { + "value": "rgb(192, 119, 80)" } }, "cinnamon-background-color-default": { @@ -3830,11 +3675,6 @@ "value": "rgb(192, 119, 80)" } }, - "cjk-font": { - "prop": "--spectrum-cjk-font", - "ref": "var(--spectrum-cjk-font-family-stack)", - "value": "adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif" - }, "cjk-font-family": { "prop": "--spectrum-cjk-font-family", "value": "Adobe Clean Han" @@ -3890,11 +3730,40 @@ "prop": "--spectrum-coach-indicator-expanded-ring-thickness", "value": "8px" }, + "coach-indicator-gap": { + "prop": "--spectrum-coach-indicator-gap", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "8px" + } + }, "coach-indicator-opacity": { "prop": "--spectrum-coach-indicator-opacity", "ref": "0.2", "value": "20%" }, + "coach-indicator-quiet-ring-diameter": { + "prop": "--spectrum-coach-indicator-quiet-ring-diameter", + "desktop": { + "ref": "var(--spectrum-spacing-100)", + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "coach-indicator-ring-diameter": { + "prop": "--spectrum-coach-indicator-ring-diameter", + "desktop": { + "ref": "var(--spectrum-spacing-300)", + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, "coach-mark-body-font-size": { "prop": "--spectrum-coach-mark-body-font-size", "ref": "var(--spectrum-body-size-s)", @@ -4030,6 +3899,51 @@ "value": "216px" } }, + "coachmark-action-menu-vertical-offset": { + "prop": "--spectrum-coachmark-action-menu-vertical-offset", + "desktop": { + "value": "-4px" + }, + "mobile": { + "value": "-6px" + } + }, + "coachmark-buttongroup-display": { + "prop": "--spectrum-coachmark-buttongroup-display", + "desktop": { + "value": "flex" + }, + "mobile": { + "value": "none" + } + }, + "coachmark-buttongroup-mobile-display": { + "prop": "--spectrum-coachmark-buttongroup-mobile-display", + "desktop": { + "value": "none" + }, + "mobile": { + "value": "flex" + } + }, + "coachmark-menu-display": { + "prop": "--spectrum-coachmark-menu-display", + "desktop": { + "value": "inline-flex" + }, + "mobile": { + "value": "none" + } + }, + "coachmark-menu-mobile-display": { + "prop": "--spectrum-coachmark-menu-mobile-display", + "desktop": { + "value": "none" + }, + "mobile": { + "value": "inline-flex" + } + }, "code-cjk-emphasized-font-style": { "prop": "--spectrum-code-cjk-emphasized-font-style", "ref": "var(--spectrum-default-font-style)", @@ -4286,11 +4200,11 @@ "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)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "color-area-border-opacity": { @@ -4480,11 +4394,11 @@ "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)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "color-slider-border-opacity": { @@ -4522,11 +4436,11 @@ "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)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "color-wheel-border-opacity": { @@ -4556,6 +4470,33 @@ "value": "240px" } }, + "colorloupe-checkerboard-fill": { + "prop": "--spectrum-colorloupe-checkerboard-fill", + "desktop": { + "value": "url(#checkerboard-primary)" + }, + "mobile": { + "value": "url(#checkerboard-secondary)" + } + }, + "colorwheel-colorarea-container-size": { + "prop": "--spectrum-colorwheel-colorarea-container-size", + "desktop": { + "value": "144px" + }, + "mobile": { + "value": "182px" + } + }, + "colorwheel-path": { + "prop": "--spectrum-colorwheel-path", + "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" + } + }, "combo-box-minimum-width-multiplier": { "prop": "--spectrum-combo-box-minimum-width-multiplier", "value": 2.5 @@ -6426,6 +6367,17 @@ "value": "15px" } }, + "contextual-help-content-spacing": { + "prop": "--spectrum-contextual-help-content-spacing", + "desktop": { + "ref": "var(--spectrum-spacing-100)", + "value": "8px" + }, + "mobile": { + "ref": "var(--spectrum-spacing-200)", + "value": "12px" + } + }, "contextual-help-minimum-width": { "prop": "--spectrum-contextual-help-minimum-width", "value": "268px" @@ -6724,20 +6676,20 @@ }, "cyan-1500": { "prop": "--spectrum-cyan-1500", - "dark": { - "value": "rgb(230, 248, 253)" - }, "light": { "value": "rgb(0, 31, 43)" + }, + "dark": { + "value": "rgb(230, 248, 253)" } }, "cyan-1600": { "prop": "--spectrum-cyan-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, "light": { "value": "rgb(0, 14, 20)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "cyan-200": { @@ -6934,6 +6886,89 @@ "prop": "--spectrum-date-picker-visual-to-field-button", "value": "0px" }, + "datepicker-dash-line-height": { + "prop": "--spectrum-datepicker-dash-line-height", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "datepicker-datetime-width-first": { + "prop": "--spectrum-datepicker-datetime-width-first", + "desktop": { + "value": "36px" + }, + "mobile": { + "value": "45px" + } + }, + "datepicker-generic-padding": { + "prop": "--spectrum-datepicker-generic-padding", + "desktop": { + "ref": "var(--spectrum-spacing-200)", + "value": "12px" + }, + "mobile": { + "value": "15px" + } + }, + "datepicker-initial-width": { + "prop": "--spectrum-datepicker-initial-width", + "desktop": { + "value": "128px" + }, + "mobile": { + "value": "160px" + } + }, + "datepicker-input-datetime-width": { + "prop": "--spectrum-datepicker-input-datetime-width", + "desktop": { + "ref": "var(--spectrum-spacing-400)", + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "datepicker-invalid-icon-to-button": { + "prop": "--spectrum-datepicker-invalid-icon-to-button", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "datepicker-invalid-icon-to-button-quiet": { + "prop": "--spectrum-datepicker-invalid-icon-to-button-quiet", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "9px" + } + }, + "datepicker-width-quiet-first": { + "prop": "--spectrum-datepicker-width-quiet-first", + "desktop": { + "value": "72px" + }, + "mobile": { + "value": "90px" + } + }, + "datepicker-width-quiet-second": { + "prop": "--spectrum-datepicker-width-quiet-second", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, "default-font-family": { "prop": "--spectrum-default-font-family", "ref": "var(--spectrum-sans-serif-font-family)", @@ -7338,6 +7373,78 @@ "value": "13px" } }, + "dial-border-radius": { + "prop": "--spectrum-dial-border-radius", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "dial-controls-margin": { + "prop": "--spectrum-dial-controls-margin", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "dial-handle-block-margin": { + "prop": "--spectrum-dial-handle-block-margin", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "dial-handle-inline-margin": { + "prop": "--spectrum-dial-handle-inline-margin", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "dial-handle-position": { + "prop": "--spectrum-dial-handle-position", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "dial-label-container-top-to-text": { + "prop": "--spectrum-dial-label-container-top-to-text", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "dial-label-gap-y": { + "prop": "--spectrum-dial-label-gap-y", + "desktop": { + "value": "5px" + }, + "mobile": { + "value": "6px" + } + }, + "dialog-confirm-entry-animation-distance": { + "prop": "--spectrum-dialog-confirm-entry-animation-distance", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "25px" + } + }, "disabled-background-color": { "prop": "--spectrum-disabled-background-color", "ref": "var(--spectrum-gray-100)", @@ -8727,6 +8834,42 @@ "value": "9px" } }, + "field-edge-to-icon-100": { + "prop": "--spectrum-field-edge-to-icon-100", + "desktop": { + "value": "5px" + }, + "mobile": { + "value": "9px" + } + }, + "field-edge-to-icon-200": { + "prop": "--spectrum-field-edge-to-icon-200", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "11px" + } + }, + "field-edge-to-icon-300": { + "prop": "--spectrum-field-edge-to-icon-300", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "14px" + } + }, + "field-edge-to-icon-75": { + "prop": "--spectrum-field-edge-to-icon-75", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "6px" + } + }, "field-edge-to-text-quiet": { "prop": "--spectrum-field-edge-to-text-quiet", "value": "0px" @@ -9349,29 +9492,6 @@ "prop": "--spectrum-focus-indicator-thickness", "value": "2px" }, - "font-family": { - "prop": "--spectrum-font-family", - "ref": "var(--spectrum-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" - }, - "font-family-ar": { - "prop": "--spectrum-font-family-ar", - "value": "myriad-arabic, adobe-clean, \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif" - }, - "font-family-he": { - "prop": "--spectrum-font-family-he", - "value": "myriad-hebrew, adobe-clean, \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif" - }, - "font-size": { - "prop": "--spectrum-font-size", - "ref": "var(--spectrum-font-size-100)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "17px" - } - }, "font-size-100": { "prop": "--spectrum-font-size-100", "desktop": { @@ -9534,11 +9654,6 @@ "value": "44px" } }, - "font-style": { - "prop": "--spectrum-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" - }, "fuchsia-100": { "prop": "--spectrum-fuchsia-100", "light": { @@ -9595,20 +9710,20 @@ }, "fuchsia-1500": { "prop": "--spectrum-fuchsia-1500", - "dark": { - "value": "rgb(253, 241, 255)" - }, "light": { "value": "rgb(54, 0, 66)" + }, + "dark": { + "value": "rgb(253, 241, 255)" } }, "fuchsia-1600": { "prop": "--spectrum-fuchsia-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, "light": { "value": "rgb(29, 0, 35)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "fuchsia-200": { @@ -9760,11 +9875,11 @@ }, "gray-1000": { "prop": "--spectrum-gray-1000", - "dark": { - "value": "rgb(255, 255, 255)" - }, "light": { "value": "rgb(0, 0, 0)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "gray-200": { @@ -9778,11 +9893,11 @@ }, "gray-25": { "prop": "--spectrum-gray-25", - "dark": { - "value": "rgb(17, 17, 17)" - }, "light": { "value": "rgb(255, 255, 255)" + }, + "dark": { + "value": "rgb(17, 17, 17)" } }, "gray-300": { @@ -9952,20 +10067,20 @@ }, "green-1500": { "prop": "--spectrum-green-1500", - "dark": { - "value": "rgb(229, 250, 236)" - }, "light": { "value": "rgb(0, 33, 25)" + }, + "dark": { + "value": "rgb(229, 250, 236)" } }, "green-1600": { "prop": "--spectrum-green-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, "light": { "value": "rgb(0, 15, 12)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "green-200": { @@ -10874,31 +10989,31 @@ "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)" + }, + "dark": { + "value": "rgb(176, 98, 59)" } }, "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)" + }, + "dark": { + "value": "rgb(206, 136, 99)" } }, "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)" + }, + "dark": { + "value": "rgb(192, 119, 80)" } }, "icon-color-cyan-background": { @@ -11224,11 +11339,11 @@ "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)" + }, + "dark": { + "value": "rgb(71, 0, 44)" } }, "icon-color-pink-primary-default": { @@ -11760,6 +11875,24 @@ "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small", "value": "3px" }, + "in-field-button-side-edge-to-fill-medium": { + "prop": "--spectrum-in-field-button-side-edge-to-fill-medium", + "desktop": { + "value": "3px" + }, + "mobile": { + "value": "4px" + } + }, + "in-field-button-side-edge-to-fill-small": { + "prop": "--spectrum-in-field-button-side-edge-to-fill-small", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "3px" + } + }, "in-field-button-stacked-inner-edge-to-fill": { "prop": "--spectrum-in-field-button-stacked-inner-edge-to-fill", "value": "0px" @@ -11911,20 +12044,20 @@ }, "indigo-1500": { "prop": "--spectrum-indigo-1500", - "dark": { - "value": "rgb(243, 244, 255)" - }, "light": { "value": "rgb(31, 0, 98)" + }, + "dark": { + "value": "rgb(243, 244, 255)" } }, "indigo-1600": { "prop": "--spectrum-indigo-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, "light": { "value": "rgb(17, 0, 54)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "indigo-200": { @@ -12132,21 +12265,21 @@ "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)" + }, + "dark": { + "value": "rgb(238, 245, 255)" } }, "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)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "informative-color-200": { @@ -12574,20 +12707,20 @@ }, "magenta-1500": { "prop": "--spectrum-magenta-1500", - "dark": { - "value": "rgb(255, 241, 246)" - }, "light": { "value": "rgb(64, 0, 22)" + }, + "dark": { + "value": "rgb(255, 241, 246)" } }, "magenta-1600": { "prop": "--spectrum-magenta-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, "light": { "value": "rgb(35, 0, 12)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "magenta-200": { @@ -12813,6 +12946,42 @@ "prop": "--spectrum-menu-item-section-divider-height", "value": "12px" }, + "menu-item-selectable-edge-to-text-not-selected-extra-large": { + "prop": "--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large", + "desktop": { + "value": "45px" + }, + "mobile": { + "value": "54px" + } + }, + "menu-item-selectable-edge-to-text-not-selected-large": { + "prop": "--spectrum-menu-item-selectable-edge-to-text-not-selected-large", + "desktop": { + "value": "38px" + }, + "mobile": { + "value": "47px" + } + }, + "menu-item-selectable-edge-to-text-not-selected-medium": { + "prop": "--spectrum-menu-item-selectable-edge-to-text-not-selected-medium", + "desktop": { + "value": "32px" + }, + "mobile": { + "value": "42px" + } + }, + "menu-item-selectable-edge-to-text-not-selected-small": { + "prop": "--spectrum-menu-item-selectable-edge-to-text-not-selected-small", + "desktop": { + "value": "28px" + }, + "mobile": { + "value": "34px" + } + }, "menu-item-top-to-disclosure-icon-extra-large": { "prop": "--spectrum-menu-item-top-to-disclosure-icon-extra-large", "desktop": { @@ -13199,21 +13368,21 @@ "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)" + }, + "dark": { + "value": "rgb(255, 242, 240)" } }, "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)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "negative-color-200": { @@ -13649,11 +13818,11 @@ "notice-background-color-default": { "prop": "--spectrum-notice-background-color-default", "ref": "var(--spectrum-notice-color-600)", - "dark": { - "value": "rgb(224, 100, 0)" - }, "light": { "value": "rgb(252, 125, 0)" + }, + "dark": { + "value": "rgb(224, 100, 0)" } }, "notice-color-100": { @@ -13719,21 +13888,21 @@ "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)" + }, + "dark": { + "value": "rgb(255, 243, 225)" } }, "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)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "notice-color-200": { @@ -14016,20 +14185,20 @@ }, "orange-1500": { "prop": "--spectrum-orange-1500", - "dark": { - "value": "rgb(255, 243, 225)" - }, "light": { "value": "rgb(52, 18, 0)" + }, + "dark": { + "value": "rgb(255, 243, 225)" } }, "orange-1600": { "prop": "--spectrum-orange-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, "light": { "value": "rgb(25, 8, 0)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "orange-200": { @@ -14150,6 +14319,25 @@ "value": "60%" } }, + "pagination-item-inline-spacing": { + "prop": "--spectrum-pagination-item-inline-spacing", + "desktop": { + "value": "5px" + }, + "mobile": { + "value": "6px" + } + }, + "pagination-textfield-width": { + "prop": "--spectrum-pagination-textfield-width", + "desktop": { + "ref": "var(--spectrum-spacing-700)", + "value": "48px" + }, + "mobile": { + "value": "60px" + } + }, "picker-border-width": { "prop": "--spectrum-picker-border-width", "ref": "var(--spectrum-border-width-100)", @@ -14206,146 +14394,146 @@ }, "pink-100": { "prop": "--spectrum-pink-100", - "dark": { - "value": "rgb(58, 0, 37)" - }, "light": { "value": "rgb(255, 246, 252)" + }, + "dark": { + "value": "rgb(58, 0, 37)" } }, "pink-1000": { "prop": "--spectrum-pink-1000", - "dark": { - "value": "rgb(251, 90, 196)" - }, "light": { "value": "rgb(176, 31, 123)" + }, + "dark": { + "value": "rgb(251, 90, 196)" } }, "pink-1100": { "prop": "--spectrum-pink-1100", - "dark": { - "value": "rgb(255, 122, 210)" - }, "light": { "value": "rgb(152, 22, 104)" + }, + "dark": { + "value": "rgb(255, 122, 210)" } }, "pink-1200": { "prop": "--spectrum-pink-1200", - "dark": { - "value": "rgb(255, 159, 223)" - }, "light": { "value": "rgb(128, 12, 85)" + }, + "dark": { + "value": "rgb(255, 159, 223)" } }, "pink-1300": { "prop": "--spectrum-pink-1300", - "dark": { - "value": "rgb(255, 191, 234)" - }, "light": { "value": "rgb(105, 3, 68)" + }, + "dark": { + "value": "rgb(255, 191, 234)" } }, "pink-1400": { "prop": "--spectrum-pink-1400", - "dark": { - "value": "rgb(255, 219, 243)" - }, "light": { "value": "rgb(83, 0, 53)" + }, + "dark": { + "value": "rgb(255, 219, 243)" } }, "pink-1500": { "prop": "--spectrum-pink-1500", - "dark": { - "value": "rgb(255, 241, 250)" - }, "light": { "value": "rgb(62, 0, 39)" + }, + "dark": { + "value": "rgb(255, 241, 250)" } }, "pink-1600": { "prop": "--spectrum-pink-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, "light": { "value": "rgb(33, 0, 21)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "pink-200": { "prop": "--spectrum-pink-200", - "dark": { - "value": "rgb(71, 0, 44)" - }, "light": { "value": "rgb(255, 232, 247)" + }, + "dark": { + "value": "rgb(71, 0, 44)" } }, "pink-300": { "prop": "--spectrum-pink-300", - "dark": { - "value": "rgb(90, 0, 57)" - }, "light": { "value": "rgb(255, 211, 240)" + }, + "dark": { + "value": "rgb(90, 0, 57)" } }, "pink-400": { "prop": "--spectrum-pink-400", - "dark": { - "value": "rgb(115, 7, 75)" - }, "light": { "value": "rgb(255, 181, 230)" + }, + "dark": { + "value": "rgb(115, 7, 75)" } }, "pink-500": { "prop": "--spectrum-pink-500", - "dark": { - "value": "rgb(143, 18, 97)" - }, "light": { "value": "rgb(255, 148, 219)" + }, + "dark": { + "value": "rgb(143, 18, 97)" } }, "pink-600": { "prop": "--spectrum-pink-600", - "dark": { - "value": "rgb(171, 29, 119)" - }, "light": { "value": "rgb(255, 103, 204)" + }, + "dark": { + "value": "rgb(171, 29, 119)" } }, "pink-700": { "prop": "--spectrum-pink-700", - "dark": { - "value": "rgb(196, 39, 138)" - }, "light": { "value": "rgb(242, 76, 184)" + }, + "dark": { + "value": "rgb(196, 39, 138)" } }, "pink-800": { "prop": "--spectrum-pink-800", - "dark": { - "value": "rgb(213, 45, 151)" - }, "light": { "value": "rgb(228, 52, 163)" + }, + "dark": { + "value": "rgb(213, 45, 151)" } }, "pink-900": { "prop": "--spectrum-pink-900", - "dark": { - "value": "rgb(236, 67, 175)" - }, "light": { "value": "rgb(206, 42, 146)" + }, + "dark": { + "value": "rgb(236, 67, 175)" } }, "pink-background-color-default": { @@ -14380,11 +14568,11 @@ }, "popover-border-color": { "prop": "--spectrum-popover-border-color", + "ref": "var(--spectrum-gray-400)", "light": { "ref": "var(--spectrum-transparent-white-25)", "value": "rgba(255, 255, 255, 0)" }, - "ref": "var(--spectrum-gray-400)", "dark": { "value": "rgb(68, 68, 68)" } @@ -14521,21 +14709,21 @@ "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)" + }, + "dark": { + "value": "rgb(229, 250, 236)" } }, "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)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "positive-color-200": { @@ -14792,20 +14980,20 @@ }, "purple-1500": { "prop": "--spectrum-purple-1500", - "dark": { - "value": "rgb(248, 243, 253)" - }, "light": { "value": "rgb(44, 0, 84)" + }, + "dark": { + "value": "rgb(248, 243, 253)" } }, "purple-1600": { "prop": "--spectrum-purple-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, "light": { "value": "rgb(23, 0, 45)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "purple-200": { @@ -15115,20 +15303,20 @@ }, "red-1500": { "prop": "--spectrum-red-1500", - "dark": { - "value": "rgb(255, 242, 240)" - }, "light": { "value": "rgb(59, 11, 4)" + }, + "dark": { + "value": "rgb(255, 242, 240)" } }, "red-1600": { "prop": "--spectrum-red-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, "light": { "value": "rgb(29, 5, 2)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "red-200": { @@ -15242,11 +15430,6 @@ "prop": "--spectrum-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" }, - "sans-serif-font": { - "prop": "--spectrum-sans-serif-font", - "ref": "var(--spectrum-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" - }, "sans-serif-font-family": { "prop": "--spectrum-sans-serif-font-family", "value": "Adobe Clean Spectrum VF" @@ -15307,20 +15490,20 @@ }, "seafoam-1500": { "prop": "--spectrum-seafoam-1500", - "dark": { - "value": "rgb(229, 249, 243)" - }, "light": { "value": "rgb(0, 33, 29)" + }, + "dark": { + "value": "rgb(229, 249, 243)" } }, "seafoam-1600": { "prop": "--spectrum-seafoam-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, "light": { "value": "rgb(0, 15, 14)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "seafoam-200": { @@ -15578,11 +15761,6 @@ "value": "10px" } }, - "serif-font": { - "prop": "--spectrum-serif-font", - "ref": "var(--spectrum-serif-font-family-stack)", - "value": "adobe-clean-serif, var(--spectrum-serif-font-family), \"Source Serif Pro\", Georgia, serif" - }, "serif-font-family": { "prop": "--spectrum-serif-font-family", "value": "Adobe Clean Serif" @@ -15721,146 +15899,146 @@ }, "silver-100": { "prop": "--spectrum-silver-100", - "dark": { - "value": "rgb(26, 26, 26)" - }, "light": { "value": "rgb(247, 247, 247)" + }, + "dark": { + "value": "rgb(26, 26, 26)" } }, "silver-1000": { "prop": "--spectrum-silver-1000", - "dark": { - "value": "rgb(152, 152, 152)" - }, "light": { "value": "rgb(96, 96, 96)" + }, + "dark": { + "value": "rgb(152, 152, 152)" } }, "silver-1100": { "prop": "--spectrum-silver-1100", - "dark": { - "value": "rgb(169, 169, 169)" - }, "light": { "value": "rgb(81, 81, 81)" + }, + "dark": { + "value": "rgb(169, 169, 169)" } }, "silver-1200": { "prop": "--spectrum-silver-1200", - "dark": { - "value": "rgb(190, 190, 190)" - }, "light": { "value": "rgb(66, 66, 66)" + }, + "dark": { + "value": "rgb(190, 190, 190)" } }, "silver-1300": { "prop": "--spectrum-silver-1300", - "dark": { - "value": "rgb(211, 211, 211)" - }, "light": { "value": "rgb(52, 52, 52)" + }, + "dark": { + "value": "rgb(211, 211, 211)" } }, "silver-1400": { "prop": "--spectrum-silver-1400", - "dark": { - "value": "rgb(229, 229, 229)" - }, "light": { "value": "rgb(39, 39, 39)" + }, + "dark": { + "value": "rgb(229, 229, 229)" } }, "silver-1500": { "prop": "--spectrum-silver-1500", - "dark": { - "value": "rgb(244, 244, 244)" - }, "light": { "value": "rgb(28, 28, 28)" + }, + "dark": { + "value": "rgb(244, 244, 244)" } }, "silver-1600": { "prop": "--spectrum-silver-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, "light": { "value": "rgb(12, 12, 12)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "silver-200": { "prop": "--spectrum-silver-200", - "dark": { - "value": "rgb(33, 33, 33)" - }, "light": { "value": "rgb(239, 239, 239)" + }, + "dark": { + "value": "rgb(33, 33, 33)" } }, "silver-300": { "prop": "--spectrum-silver-300", - "dark": { - "value": "rgb(44, 44, 44)" - }, "light": { "value": "rgb(223, 223, 223)" + }, + "dark": { + "value": "rgb(44, 44, 44)" } }, "silver-400": { "prop": "--spectrum-silver-400", - "dark": { - "value": "rgb(59, 59, 59)" - }, "light": { "value": "rgb(204, 204, 204)" + }, + "dark": { + "value": "rgb(59, 59, 59)" } }, "silver-500": { "prop": "--spectrum-silver-500", - "dark": { - "value": "rgb(76, 76, 76)" - }, "light": { "value": "rgb(183, 183, 183)" + }, + "dark": { + "value": "rgb(76, 76, 76)" } }, "silver-600": { "prop": "--spectrum-silver-600", - "dark": { - "value": "rgb(92, 92, 92)" - }, "light": { "value": "rgb(160, 160, 160)" + }, + "dark": { + "value": "rgb(92, 92, 92)" } }, "silver-700": { "prop": "--spectrum-silver-700", - "dark": { - "value": "rgb(108, 108, 108)" - }, "light": { "value": "rgb(143, 143, 143)" + }, + "dark": { + "value": "rgb(108, 108, 108)" } }, "silver-800": { "prop": "--spectrum-silver-800", - "dark": { - "value": "rgb(118, 118, 118)" - }, "light": { "value": "rgb(128, 128, 128)" + }, + "dark": { + "value": "rgb(118, 118, 118)" } }, "silver-900": { "prop": "--spectrum-silver-900", - "dark": { - "value": "rgb(137, 137, 137)" - }, "light": { "value": "rgb(114, 114, 114)" + }, + "dark": { + "value": "rgb(137, 137, 137)" } }, "silver-background-color-default": { @@ -16233,17 +16411,80 @@ "value": "26px" } }, - "slider-handle-size-large": { - "prop": "--spectrum-slider-handle-size-large", + "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-precision-handle-height-extra-large": { + "prop": "--spectrum-slider-precision-handle-height-extra-large", + "desktop": { + "value": "26px" + }, + "mobile": { + "value": "32px" + } + }, + "slider-precision-handle-height-large": { + "prop": "--spectrum-slider-precision-handle-height-large", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "slider-precision-handle-height-medium": { + "prop": "--spectrum-slider-precision-handle-height-medium", + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "26px" + } + }, + "slider-precision-handle-height-small": { + "prop": "--spectrum-slider-precision-handle-height-small", "desktop": { - "value": "18px" + "value": "20px" }, "mobile": { - "value": "22px" + "value": "24px" } }, - "slider-handle-size-medium": { - "prop": "--spectrum-slider-handle-size-medium", + "slider-ramp-track-height": { + "prop": "--spectrum-slider-ramp-track-height", "desktop": { "value": "16px" }, @@ -16251,22 +16492,13 @@ "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", + "slider-tick-mark-height": { + "prop": "--spectrum-slider-tick-mark-height", "desktop": { - "value": "18px" + "value": "10px" }, "mobile": { - "value": "22px" + "value": "13px" } }, "slider-track-height-large": { @@ -16526,6 +16758,17 @@ "prop": "--spectrum-standard-dialog-minimum-width", "value": "288px" }, + "standard-dialog-spacing-edge-to-content": { + "prop": "--spectrum-standard-dialog-spacing-edge-to-content", + "desktop": { + "ref": "var(--spectrum-spacing-500)", + "value": "32px" + }, + "mobile": { + "ref": "var(--spectrum-spacing-400)", + "value": "24px" + } + }, "standard-dialog-title-font-size": { "prop": "--spectrum-standard-dialog-title-font-size", "ref": "var(--spectrum-title-size-xl)", @@ -16989,11 +17232,11 @@ "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)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "swatch-border-opacity": { @@ -17014,11 +17257,11 @@ "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)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "swatch-group-border-opacity": { @@ -17494,6 +17737,15 @@ "value": "13px" } }, + "tab-item-to-tab-item-compact-horizontal-medium": { + "prop": "--spectrum-tab-item-to-tab-item-compact-horizontal-medium", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, "tab-item-to-tab-item-horizontal-extra-large": { "prop": "--spectrum-tab-item-to-tab-item-horizontal-extra-large", "desktop": { @@ -18920,6 +19172,39 @@ "prop": "--spectrum-takeover-dialog-height", "value": "100%" }, + "takeover-dialog-spacing-grid-padding": { + "prop": "--spectrum-takeover-dialog-spacing-grid-padding", + "desktop": { + "ref": "var(--spectrum-spacing-500)", + "value": "32px" + }, + "mobile": { + "ref": "var(--spectrum-spacing-400)", + "value": "24px" + } + }, + "takeover-dialog-spacing-header-gap": { + "prop": "--spectrum-takeover-dialog-spacing-header-gap", + "desktop": { + "ref": "var(--spectrum-spacing-400)", + "value": "24px" + }, + "mobile": { + "ref": "var(--spectrum-spacing-300)", + "value": "16px" + } + }, + "takeover-dialog-spacing-title-to-body": { + "prop": "--spectrum-takeover-dialog-spacing-title-to-body", + "desktop": { + "ref": "var(--spectrum-spacing-500)", + "value": "32px" + }, + "mobile": { + "ref": "var(--spectrum-spacing-400)", + "value": "24px" + } + }, "takeover-dialog-width": { "prop": "--spectrum-takeover-dialog-width", "value": "100%" @@ -19580,6 +19865,15 @@ "value": "6px" } }, + "tooltip-tip-square-size": { + "prop": "--spectrum-tooltip-tip-square-size", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, "tooltip-tip-width": { "prop": "--spectrum-tooltip-tip-width", "desktop": { @@ -19941,6 +20235,54 @@ "value": "13px" } }, + "treeview-item-indentation-extra-large": { + "prop": "--spectrum-treeview-item-indentation-extra-large", + "desktop": { + "ref": "var(--spectrum-spacing-400)", + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "treeview-item-indentation-large": { + "prop": "--spectrum-treeview-item-indentation-large", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "25px" + } + }, + "treeview-item-indentation-medium": { + "prop": "--spectrum-treeview-item-indentation-medium", + "desktop": { + "ref": "var(--spectrum-spacing-300)", + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "treeview-item-indentation-small": { + "prop": "--spectrum-treeview-item-indentation-small", + "desktop": { + "ref": "var(--spectrum-spacing-200)", + "value": "12px" + }, + "mobile": { + "value": "15px" + } + }, + "treeview-item-min-block-size-thumbnail-offset-medium": { + "prop": "--spectrum-treeview-item-min-block-size-thumbnail-offset-medium", + "desktop": { + "value": "0px" + }, + "mobile": { + "value": "2px" + } + }, "triple-calendar-popover-minimum-height": { "prop": "--spectrum-triple-calendar-popover-minimum-height", "value": "320px" @@ -19951,146 +20293,146 @@ }, "turquoise-100": { "prop": "--spectrum-turquoise-100", - "dark": { - "value": "rgb(0, 30, 33)" - }, "light": { "value": "rgb(238, 251, 251)" + }, + "dark": { + "value": "rgb(0, 30, 33)" } }, "turquoise-1000": { "prop": "--spectrum-turquoise-1000", - "dark": { - "value": "rgb(13, 168, 182)" - }, "light": { "value": "rgb(5, 107, 116)" + }, + "dark": { + "value": "rgb(13, 168, 182)" } }, "turquoise-1100": { "prop": "--spectrum-turquoise-1100", - "dark": { - "value": "rgb(16, 186, 202)" - }, "light": { "value": "rgb(3, 90, 98)" + }, + "dark": { + "value": "rgb(16, 186, 202)" } }, "turquoise-1200": { "prop": "--spectrum-turquoise-1200", - "dark": { - "value": "rgb(64, 208, 220)" - }, "light": { "value": "rgb(1, 74, 81)" + }, + "dark": { + "value": "rgb(64, 208, 220)" } }, "turquoise-1300": { "prop": "--spectrum-turquoise-1300", - "dark": { - "value": "rgb(128, 225, 231)" - }, "light": { "value": "rgb(0, 59, 65)" + }, + "dark": { + "value": "rgb(128, 225, 231)" } }, "turquoise-1400": { "prop": "--spectrum-turquoise-1400", - "dark": { - "value": "rgb(183, 240, 240)" - }, "light": { "value": "rgb(0, 44, 49)" + }, + "dark": { + "value": "rgb(183, 240, 240)" } }, "turquoise-1500": { "prop": "--spectrum-turquoise-1500", - "dark": { - "value": "rgb(228, 249, 249)" - }, "light": { "value": "rgb(0, 32, 35)" + }, + "dark": { + "value": "rgb(228, 249, 249)" } }, "turquoise-1600": { "prop": "--spectrum-turquoise-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, "light": { "value": "rgb(0, 15, 17)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "turquoise-200": { "prop": "--spectrum-turquoise-200", - "dark": { - "value": "rgb(0, 37, 41)" - }, "light": { "value": "rgb(209, 245, 245)" + }, + "dark": { + "value": "rgb(0, 37, 41)" } }, "turquoise-300": { "prop": "--spectrum-turquoise-300", - "dark": { - "value": "rgb(0, 49, 54)" - }, "light": { "value": "rgb(169, 236, 237)" + }, + "dark": { + "value": "rgb(0, 49, 54)" } }, "turquoise-400": { "prop": "--spectrum-turquoise-400", - "dark": { - "value": "rgb(0, 66, 72)" - }, "light": { "value": "rgb(111, 221, 228)" + }, + "dark": { + "value": "rgb(0, 66, 72)" } }, "turquoise-500": { "prop": "--spectrum-turquoise-500", - "dark": { - "value": "rgb(3, 84, 92)" - }, "light": { "value": "rgb(39, 202, 216)" + }, + "dark": { + "value": "rgb(3, 84, 92)" } }, "turquoise-600": { "prop": "--spectrum-turquoise-600", - "dark": { - "value": "rgb(5, 103, 112)" - }, "light": { "value": "rgb(15, 177, 192)" + }, + "dark": { + "value": "rgb(5, 103, 112)" } }, "turquoise-700": { "prop": "--spectrum-turquoise-700", - "dark": { - "value": "rgb(7, 120, 131)" - }, "light": { "value": "rgb(12, 158, 171)" + }, + "dark": { + "value": "rgb(7, 120, 131)" } }, "turquoise-800": { "prop": "--spectrum-turquoise-800", - "dark": { - "value": "rgb(9, 131, 142)" - }, "light": { "value": "rgb(10, 141, 153)" + }, + "dark": { + "value": "rgb(9, 131, 142)" } }, "turquoise-900": { "prop": "--spectrum-turquoise-900", - "dark": { - "value": "rgb(11, 151, 164)" - }, "light": { "value": "rgb(8, 126, 137)" + }, + "dark": { + "value": "rgb(11, 151, 164)" } }, "turquoise-background-color-default": { @@ -20164,6 +20506,45 @@ "value": "10px" } }, + "well-border-radius": { + "prop": "--spectrum-well-border-radius", + "desktop": { + "ref": "var(--spectrum-spacing-75)", + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "well-margin-top": { + "prop": "--spectrum-well-margin-top", + "desktop": { + "ref": "var(--spectrum-spacing-75)", + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "well-min-width": { + "prop": "--spectrum-well-min-width", + "desktop": { + "value": "240px" + }, + "mobile": { + "value": "300px" + } + }, + "well-padding": { + "prop": "--spectrum-well-padding", + "desktop": { + "ref": "var(--spectrum-spacing-300)", + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, "white": { "prop": "--spectrum-white", "value": "rgb(255, 255, 255)" @@ -20274,20 +20655,20 @@ }, "yellow-1500": { "prop": "--spectrum-yellow-1500", - "dark": { - "value": "rgb(255, 246, 195)" - }, "light": { "value": "rgb(40, 25, 0)" + }, + "dark": { + "value": "rgb(255, 246, 195)" } }, "yellow-1600": { "prop": "--spectrum-yellow-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, "light": { "value": "rgb(18, 11, 0)" + }, + "dark": { + "value": "rgb(255, 255, 255)" } }, "yellow-200": { diff --git a/tokens/package.json b/tokens/package.json index 48f328609f0..9688a8647e7 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -23,22 +23,13 @@ }, "main": "dist/css/index.css", "module": "style-dictionary.config.js", - "scripts": { - "build": "run-s clean build:tokens build:entry build:format build:min", - "build:entry": "postcss ./dist/css/index.css --replace", - "build:format": "prettier --write --cache --log-level error --ignore-unknown --no-error-on-unmatched-pattern ./dist/*/*", - "build:min": "postcss ./dist/css/index.css --dir ./dist/css --ext min.css", - "build:tokens": "style-dictionary build --config style-dictionary.config.js --verbose", - "clean": "rimraf dist", - "compare": "tdiff report --old-token-version @adobe/spectrum-tokens@${1:-13.7.0} --new-token-version @adobe/spectrum-tokens@${2:-13.9.0} --format markdown --output dist/tokens-diff.md" - }, "devDependencies": { "@adobe/spectrum-tokens": "13.15.0", "@adobe/token-diff-generator": "^2.0.0", + "@spectrum-tools/postcss-rgb-mapping": "1.1.0", "deepmerge": "^4.3.1", "glob": "^11.0.3", "lodash-es": "^4.17.21", - "npm-run-all2": "^8.0.4", "postcss": "^8.5.6", "postcss-cli": "^11.0.1", "postcss-sorting": "^9.1.0", diff --git a/tokens/postcss.config.js b/tokens/postcss.config.js index 1c6ccc5ad58..8db1d18cb21 100644 --- a/tokens/postcss.config.js +++ b/tokens/postcss.config.js @@ -29,6 +29,9 @@ export default (ctx = {}) => postcssConfig({ minify: ext?.includes("min.") ?? false, env: "production", additionalPlugins: { + "@spectrum-tools/postcss-rgb-mapping": { + colorFunctionalNotation: false, + }, "postcss-sorting": { order: ["custom-properties", "declarations", "at-rules", "rules"], "properties-order": "alphabetical", diff --git a/tokens/project.json b/tokens/project.json index c387e473dc8..107eb953497 100644 --- a/tokens/project.json +++ b/tokens/project.json @@ -2,7 +2,7 @@ "name": "tokens", "tag": ["tokens"], "namedInputs": { - "core": ["{projectRoot}/custom/*.css"], + "core": ["{projectRoot}/custom-tokens.json"], "scripts": ["{projectRoot}/style-dictionary.config.js", "{projectRoot}/utilities/*.js"], "tools": ["{projectRoot}/postcss.config.js"] }, @@ -11,7 +11,7 @@ "cache": false, "dependsOn": ["clean"], "executor": "nx:run-commands", - "inputs": ["core", "tools", { "externalDependencies": ["postcss"] }], + "inputs": ["core", "tools", { "externalDependencies": ["postcss", "postcss-cli", "prettier", "@adobe/spectrum-tokens"] }], "options": { "commands": [ "style-dictionary build --config style-dictionary.config.js --verbose", @@ -49,8 +49,9 @@ "commands": [ "tdiff report --old-token-version @adobe/spectrum-tokens@{args.v1} --new-token-version @adobe/spectrum-tokens@{args.v2} --format markdown --output ./dist/tokens-diff.md" ], + "cwd": "{projectRoot}", "forwardAllArgs": true, - "v1": "13.10.0" + "v1": "13.15.0" }, "outputs": ["{projectRoot}/dist/tokens-diff.md"] }, diff --git a/tokens/style-dictionary.config.js b/tokens/style-dictionary.config.js index 09d8c12c369..67c7394bcbb 100644 --- a/tokens/style-dictionary.config.js +++ b/tokens/style-dictionary.config.js @@ -11,12 +11,7 @@ * governing permissions and limitations under the License. */ -import fg from "fast-glob"; -import { capitalize } from "lodash-es"; -import { basename, dirname, join, resolve, sep } from "path"; -import { fileURLToPath } from "url"; - -const __dirname = fileURLToPath(new URL(".", import.meta.url)); +import { dirname, join, sep } from "path"; import StyleDictionary from "style-dictionary"; import { @@ -45,7 +40,7 @@ const tokensDir = dirname(tokensPath); * @type {import('style-dictionary').Config} */ export default { - source: [join(tokensDir, "src", "*.json"), "custom-tokens.json", "../components/accordion/tokens.json"], + source: [join(tokensDir, "src", "*.json"), "custom-tokens.json"], hooks: { transforms: { [CSSOpenTypeTransform.name]: CSSOpenTypeTransform, @@ -91,34 +86,6 @@ export default { }, ], }, - components: { - buildPath: resolve(__dirname, "..", "components") + sep, - prefix: "spectrum", - outputReferences: true, - outputReferenceFallbacks: true, - showFileHeader: false, - transforms: [ - "name/kebab", - CSSOpenTypeTransform.name, - CSSBorderRoundingTransform.name, - CSSOpacityPercentTransform.name, - ], - files: [ - // Iterate over all files in the components folder and build a css file for each - ...(fg.sync("accordion/tokens.json", { cwd: resolve(__dirname, "..", "components") })).map((pkg) => ({ - format: "css/sets", - destination: `${dirname(pkg)}/dist/${basename(pkg, ".json")}.css`, - options: { - selector: `.spectrum-${capitalize(dirname(pkg))}`, - }, - filter: (token) => { - if (token.filePath?.includes(pkg)) return true; - if (token.component == dirname(pkg)) return true; - return false; - }, - })), - ], - }, JSON: { buildPath: join("dist", "json") + sep, prefix: "spectrum", diff --git a/yarn.config.cjs b/yarn.config.cjs index 5ee93d8599e..e9189a0305f 100644 --- a/yarn.config.cjs +++ b/yarn.config.cjs @@ -127,7 +127,7 @@ module.exports = defineConfig({ * @returns {void} */ function validateComponentPackageJson(workspace, folderName) { - const hasDist = existsSync(join(workspace.cwd, "dist")); + const hasDist = isComponent(workspace) && folderName !== "commons"; const hasIndexCSS = existsSync(join(workspace.cwd, "index.css")); const hasOtherCSS = fg.sync(["*.css", "!index.css"], { cwd: workspace.cwd, onlyFiles: true }).length > 0; diff --git a/yarn.lock b/yarn.lock index 9f2a612f19c..24cfded3b44 100644 --- a/yarn.lock +++ b/yarn.lock @@ -131,6 +131,7 @@ __metadata: "@changesets/cli": "npm:^2.29.7" "@commitlint/cli": "npm:^19.8.1" "@commitlint/config-conventional": "npm:^19.8.1" + "@spectrum-tools/postcss-rgb-mapping": "npm:1.1.0" "@yarnpkg/types": "npm:^4.0.1" at-rule-packer: "npm:^0.5.0" autoprefixer: "npm:^10.4.21" @@ -6447,10 +6448,10 @@ __metadata: dependencies: "@adobe/spectrum-tokens": "npm:13.15.0" "@adobe/token-diff-generator": "npm:^2.0.0" + "@spectrum-tools/postcss-rgb-mapping": "npm:1.1.0" deepmerge: "npm:^4.3.1" glob: "npm:^11.0.3" lodash-es: "npm:^4.17.21" - npm-run-all2: "npm:^8.0.4" postcss: "npm:^8.5.6" postcss-cli: "npm:^11.0.1" postcss-sorting: "npm:^9.1.0" @@ -6666,6 +6667,19 @@ __metadata: languageName: unknown linkType: soft +"@spectrum-tools/postcss-rgb-mapping@npm:1.1.0, @spectrum-tools/postcss-rgb-mapping@workspace:plugins/postcss-rgb-mapping": + version: 0.0.0-use.local + resolution: "@spectrum-tools/postcss-rgb-mapping@workspace:plugins/postcss-rgb-mapping" + dependencies: + ava: "npm:^6.4.1" + c8: "npm:^10.1.3" + postcss: "npm:^8.5.6" + postcss-values-parser: "npm:^6.0.2" + peerDependencies: + postcss: ">=8" + languageName: unknown + linkType: soft + "@spectrum-tools/stylelint-no-missing-var@workspace:plugins/stylelint-no-missing-var": version: 0.0.0-use.local resolution: "@spectrum-tools/stylelint-no-missing-var@workspace:plugins/stylelint-no-missing-var" @@ -14578,13 +14592,6 @@ __metadata: languageName: node linkType: hard -"json-parse-even-better-errors@npm:^4.0.0": - version: 4.0.0 - resolution: "json-parse-even-better-errors@npm:4.0.0" - checksum: 10c0/84cd9304a97e8fb2af3937bf53acb91c026aeb859703c332684e688ea60db27fc2242aa532a84e1883fdcbe1e5c1fb57c2bef38e312021aa1cd300defc63cf16 - languageName: node - linkType: hard - "json-schema-traverse@npm:^0.3.0": version: 0.3.1 resolution: "json-schema-traverse@npm:0.3.1" @@ -15604,13 +15611,6 @@ __metadata: languageName: node linkType: hard -"memorystream@npm:^0.3.1": - version: 0.3.1 - resolution: "memorystream@npm:0.3.1" - checksum: 10c0/4bd164657711d9747ff5edb0508b2944414da3464b7fe21ac5c67cf35bba975c4b446a0124bd0f9a8be54cfc18faf92e92bd77563a20328b1ccf2ff04e9f39b9 - languageName: node - linkType: hard - "meow@npm:^12.0.1": version: 12.1.1 resolution: "meow@npm:12.1.1" @@ -16448,13 +16448,6 @@ __metadata: languageName: node linkType: hard -"npm-normalize-package-bin@npm:^4.0.0": - version: 4.0.0 - resolution: "npm-normalize-package-bin@npm:4.0.0" - checksum: 10c0/1fa546fcae8eaab61ef9b9ec237b6c795008da50e1883eae030e9e38bb04ffa32c5aabcef9a0400eae3dc1f91809bcfa85e437ce80d677c69b419d1d9cacf0ab - languageName: node - linkType: hard - "npm-package-arg@npm:^13.0.0": version: 13.0.0 resolution: "npm-package-arg@npm:13.0.0" @@ -16483,27 +16476,6 @@ __metadata: languageName: node linkType: hard -"npm-run-all2@npm:^8.0.4": - version: 8.0.4 - resolution: "npm-run-all2@npm:8.0.4" - dependencies: - ansi-styles: "npm:^6.2.1" - cross-spawn: "npm:^7.0.6" - memorystream: "npm:^0.3.1" - picomatch: "npm:^4.0.2" - pidtree: "npm:^0.6.0" - read-package-json-fast: "npm:^4.0.0" - shell-quote: "npm:^1.7.3" - which: "npm:^5.0.0" - bin: - npm-run-all: bin/npm-run-all/index.js - npm-run-all2: bin/npm-run-all/index.js - run-p: bin/run-p/index.js - run-s: bin/run-s/index.js - checksum: 10c0/cfc2987df224e55456629301991b5fa6980cc644d1836fe3c22d74a4508512737d30389795b759bb5d659103e54281c59741ecdc0241cfd2615cb9bffbf7cceb - languageName: node - linkType: hard - "npm-run-path@npm:^4.0.1": version: 4.0.1 resolution: "npm-run-path@npm:4.0.1" @@ -18777,16 +18749,6 @@ __metadata: languageName: node linkType: hard -"read-package-json-fast@npm:^4.0.0": - version: 4.0.0 - resolution: "read-package-json-fast@npm:4.0.0" - dependencies: - json-parse-even-better-errors: "npm:^4.0.0" - npm-normalize-package-bin: "npm:^4.0.0" - checksum: 10c0/8a03509ae8e852f1abc4b109c1be571dd90ac9ea65d55433b2fe287e409113441a9b00df698288fe48aa786c1a2550569d47b5ab01ed83ada073d691d5aff582 - languageName: node - linkType: hard - "read-yaml-file@npm:^1.1.0": version: 1.1.0 resolution: "read-yaml-file@npm:1.1.0" @@ -19492,13 +19454,6 @@ __metadata: languageName: node linkType: hard -"shell-quote@npm:^1.7.3": - version: 1.8.2 - resolution: "shell-quote@npm:1.8.2" - checksum: 10c0/85fdd44f2ad76e723d34eb72c753f04d847ab64e9f1f10677e3f518d0e5b0752a176fd805297b30bb8c3a1556ebe6e77d2288dbd7b7b0110c7e941e9e9c20ce1 - languageName: node - linkType: hard - "side-channel-list@npm:^1.0.0": version: 1.0.0 resolution: "side-channel-list@npm:1.0.0"