diff --git a/.changeset/eleven-plants-grow.md b/.changeset/eleven-plants-grow.md
new file mode 100644
index 00000000000..b08e57e1660
--- /dev/null
+++ b/.changeset/eleven-plants-grow.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/generator": patch
+---
+
+Update story templates to include the cssprops imports
diff --git a/.changeset/new-bulldogs-add.md b/.changeset/new-bulldogs-add.md
new file mode 100644
index 00000000000..a5328a1d0ac
--- /dev/null
+++ b/.changeset/new-bulldogs-add.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/preview": minor
+---
+
+New feature: Custom properties panel added to the development preview showing a list of modifiable custom properties as loaded from the metadata/metadata.json resource in each component.
diff --git a/.eslintrc b/.eslintrc
index f422aa9e96a..d050c2f7d97 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -8,6 +8,11 @@
"parserOptions": {
"sourceType": "module"
},
+ "settings": {
+ "react": {
+ "version": "detect"
+ }
+ },
"extends": "eslint:recommended",
"rules": {
"brace-style": ["warn", "stroustrup", { "allowSingleLine": true }],
@@ -17,7 +22,8 @@
"no-console": ["warn", { "allow": ["warn", "error"] }],
"quotes": ["warn", "double"],
"semi": ["warn", "always"],
- "space-before-blocks": ["warn", "always"]
+ "space-before-blocks": ["warn", "always"],
+ "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
},
"overrides": [
{
@@ -174,6 +180,7 @@
".storybook/*.js",
".storybook/**/*.js"
],
+ "extends": ["plugin:react/recommended", "plugin:react/jsx-runtime"],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index fe2f10c6172..cda84d8a04a 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -115,7 +115,7 @@ jobs:
reporter: github-pr-review
filter_mode: diff_context
# eslint_flags: "components/*/stories/*.js"
- eslint_flags: "${{ inputs.eslint_added_files }} ${{ inputs.eslint_modified_files }}"
+ eslint_flags: "--config ${{ github.workspace }}/.eslintrc ${{ inputs.eslint_added_files }} ${{ inputs.eslint_modified_files }}"
- name: Run markdownlint on documentation
uses: reviewdog/action-markdownlint@v0.26.2
diff --git a/.storybook/assets/base.css b/.storybook/assets/base.css
index 98841f09954..11496bf4fe9 100644
--- a/.storybook/assets/base.css
+++ b/.storybook/assets/base.css
@@ -1,5 +1,3 @@
-/* stylelint-disable selector-class-pattern -- Targeting pre-defined Storybook classes */
-
/*!
* Copyright 2024 Adobe. All rights reserved.
*
@@ -89,4 +87,14 @@ svg:has(symbol):not(:has(use)) {
overflow: visible !important;
}
-/* stylelint-enable selector-class-pattern */
+#panel-tab-content tr th:nth-child(1),
+#panel-tab-content tr th:nth-child(3),
+#panel-tab-content tr td:nth-child(1),
+#panel-tab-content tr td:nth-child(3) {
+ min-inline-size: 100px !important;
+}
+
+#panel-tab-content tr th:nth-child(2),
+#panel-tab-content tr td:nth-child(2) {
+ max-inline-size: 500px !important;
+}
diff --git a/.storybook/assets/index.css b/.storybook/assets/index.css
index 95b4d83897d..e568d579654 100644
--- a/.storybook/assets/index.css
+++ b/.storybook/assets/index.css
@@ -1,5 +1,3 @@
-/* stylelint-disable selector-class-pattern -- Targeting pre-defined Storybook classes */
-
/*!
* Copyright 2024 Adobe. All rights reserved.
*
@@ -119,4 +117,3 @@ select:focus,
border-color: rgb(2, 101, 220) !important;
box-shadow: rgb(2, 101, 220) 0 0 0 1px inset !important;
}
-/* stylelint-enable selector-class-pattern */
diff --git a/.storybook/decorators/utilities.js b/.storybook/decorators/utilities.js
index f6722ae79ea..bd22ac68401 100644
--- a/.storybook/decorators/utilities.js
+++ b/.storybook/decorators/utilities.js
@@ -556,12 +556,12 @@ export const renderContent = (content = [], {
if (content.length === 0) return nothing;
return html`
- ${content.map((c) => {
+ ${content.map((c, idx) => {
if (typeof c === "undefined") return nothing;
/* If the content is an object (but not a lit object), we need to merge the object with the template */
if (typeof c !== "string" && (typeof c === "object" && !c._$litType$)) {
- return callback({ ...args, ...c }, context);
+ return callback({ ...args, ...c, idx }, context);
}
if (typeof c === "function") {
diff --git a/.storybook/main.js b/.storybook/main.js
index ccd00e2f45e..1430806f206 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -63,6 +63,8 @@ export default {
name: "@storybook/addon-actions",
options: {},
},
+ // https://github.com/ljcl/storybook-addon-cssprops
+ "@ljcl/storybook-addon-cssprops",
// https://www.npmjs.com/package/@whitespace/storybook-addon-html
"@whitespace/storybook-addon-html",
// https://github.com/storybookjs/storybook/tree/next/code/addons/a11y
diff --git a/.storybook/package.json b/.storybook/package.json
index cca4996656a..44f5d0ca101 100644
--- a/.storybook/package.json
+++ b/.storybook/package.json
@@ -49,6 +49,7 @@
"@babel/core": "^7.28.0",
"@chromatic-com/storybook": "^3.2.7",
"@etchteam/storybook-addon-status": "^5.0.0",
+ "@ljcl/storybook-addon-cssprops": "4.0.0",
"@storybook/addon-a11y": "8.4.7",
"@storybook/addon-actions": "8.4.7",
"@storybook/addon-designs": "^8.2.1",
diff --git a/.storybook/preview.js b/.storybook/preview.js
index ff243044967..35eb258ab1e 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -15,6 +15,7 @@ import DocumentationTemplate from "./templates/DocumentationTemplate.mdx";
import { argTypes, globalTypes } from "./types";
// Import the custom base styles
+import "@spectrum-css/bundle/dist/index.css";
import "./assets/base.css";
/** @type import('@storybook/types').StorybookParameters & import('@storybook/types').API_Layout */
diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json
index 3f3e89fbf15..88a0f6cda3c 100644
--- a/components/accordion/dist/metadata.json
+++ b/components/accordion/dist/metadata.json
@@ -14,6 +14,7 @@
".spectrum-Accordion--spacious.spectrum-Accordion--sizeS",
".spectrum-Accordion--spacious.spectrum-Accordion--sizeXL",
".spectrum-Accordion-item",
+ ".spectrum-Accordion-item:first-child",
".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemContent",
".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader",
".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader + .spectrum-Accordion-itemIconContainer",
@@ -23,7 +24,6 @@
".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemContent",
".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator",
".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator",
- ".spectrum-Accordion-item:first-child",
".spectrum-Accordion-itemContent",
".spectrum-Accordion-itemHeader",
".spectrum-Accordion-itemHeader:active",
@@ -43,166 +43,880 @@
"[dir=\"rtl\"] .spectrum-Accordion",
"[dir=\"rtl\"] .spectrum-Accordion-itemIconContainer"
],
- "modifiers": [
- "--mod-accordion-background-color-default",
- "--mod-accordion-background-color-down",
- "--mod-accordion-background-color-hover",
- "--mod-accordion-background-color-key-focus",
- "--mod-accordion-component-edge-to-text",
- "--mod-accordion-corner-radius",
- "--mod-accordion-disclosure-indicator-height",
- "--mod-accordion-disclosure-indicator-to-text-space",
- "--mod-accordion-divider-color",
- "--mod-accordion-divider-thickness",
- "--mod-accordion-edge-to-disclosure-indicator-space",
- "--mod-accordion-edge-to-text-space",
- "--mod-accordion-focus-indicator-color",
- "--mod-accordion-focus-indicator-gap",
- "--mod-accordion-focus-indicator-thickness",
- "--mod-accordion-item-content-area-bottom-to-content",
- "--mod-accordion-item-content-area-top-to-content",
- "--mod-accordion-item-content-color",
- "--mod-accordion-item-content-disabled-color",
- "--mod-accordion-item-content-font",
- "--mod-accordion-item-content-font-size",
- "--mod-accordion-item-content-font-style",
- "--mod-accordion-item-content-font-weight",
- "--mod-accordion-item-content-line-height",
- "--mod-accordion-item-header-bottom-to-text-space",
- "--mod-accordion-item-header-color-default",
- "--mod-accordion-item-header-color-down",
- "--mod-accordion-item-header-color-hover",
- "--mod-accordion-item-header-color-key-focus",
- "--mod-accordion-item-header-disabled-color",
- "--mod-accordion-item-header-font",
- "--mod-accordion-item-header-font-size",
- "--mod-accordion-item-header-font-style",
- "--mod-accordion-item-header-font-weight",
- "--mod-accordion-item-header-line-height",
- "--mod-accordion-item-header-top-to-text-space",
- "--mod-accordion-item-height",
- "--mod-accordion-item-width",
- "--mod-accordion-min-block-size"
- ],
- "component": [
- "--spectrum-accordion-background-color-default",
- "--spectrum-accordion-background-color-down",
- "--spectrum-accordion-background-color-hover",
- "--spectrum-accordion-background-color-key-focus",
- "--spectrum-accordion-bottom-to-text-compact-extra-large",
- "--spectrum-accordion-bottom-to-text-compact-large",
- "--spectrum-accordion-bottom-to-text-compact-medium",
- "--spectrum-accordion-bottom-to-text-compact-small",
- "--spectrum-accordion-bottom-to-text-regular-extra-large",
- "--spectrum-accordion-bottom-to-text-regular-large",
- "--spectrum-accordion-bottom-to-text-regular-medium",
- "--spectrum-accordion-bottom-to-text-regular-small",
- "--spectrum-accordion-bottom-to-text-spacious-extra-large",
- "--spectrum-accordion-bottom-to-text-spacious-large",
- "--spectrum-accordion-bottom-to-text-spacious-medium",
- "--spectrum-accordion-bottom-to-text-spacious-small",
- "--spectrum-accordion-component-edge-to-text",
- "--spectrum-accordion-content-area-bottom-to-content",
- "--spectrum-accordion-content-area-top-to-content",
- "--spectrum-accordion-corner-radius",
- "--spectrum-accordion-disclosure-indicator-height",
- "--spectrum-accordion-disclosure-indicator-to-text",
- "--spectrum-accordion-disclosure-indicator-to-text-space",
- "--spectrum-accordion-divider-color",
- "--spectrum-accordion-edge-to-disclosure-indicator",
- "--spectrum-accordion-edge-to-disclosure-indicator-space",
- "--spectrum-accordion-edge-to-text",
- "--spectrum-accordion-edge-to-text-space",
- "--spectrum-accordion-focus-indicator-color",
- "--spectrum-accordion-focus-indicator-gap",
- "--spectrum-accordion-focus-indicator-thickness",
- "--spectrum-accordion-item-content-area-bottom-to-content",
- "--spectrum-accordion-item-content-area-top-to-content",
- "--spectrum-accordion-item-content-color",
- "--spectrum-accordion-item-content-disabled-color",
- "--spectrum-accordion-item-content-font",
- "--spectrum-accordion-item-content-font-size",
- "--spectrum-accordion-item-content-font-style",
- "--spectrum-accordion-item-content-font-weight",
- "--spectrum-accordion-item-content-line-height",
- "--spectrum-accordion-item-header-bottom-to-text-space",
- "--spectrum-accordion-item-header-color-default",
- "--spectrum-accordion-item-header-color-down",
- "--spectrum-accordion-item-header-color-hover",
- "--spectrum-accordion-item-header-color-key-focus",
- "--spectrum-accordion-item-header-disabled-color",
- "--spectrum-accordion-item-header-font",
- "--spectrum-accordion-item-header-font-size",
- "--spectrum-accordion-item-header-font-style",
- "--spectrum-accordion-item-header-font-weight",
- "--spectrum-accordion-item-header-line-height",
- "--spectrum-accordion-item-header-top-to-text-space",
- "--spectrum-accordion-item-height",
- "--spectrum-accordion-item-width",
- "--spectrum-accordion-min-block-size",
- "--spectrum-accordion-minimum-width",
- "--spectrum-accordion-small-top-to-text-spacious",
- "--spectrum-accordion-top-to-text-compact-extra-large",
- "--spectrum-accordion-top-to-text-compact-large",
- "--spectrum-accordion-top-to-text-compact-medium",
- "--spectrum-accordion-top-to-text-compact-small",
- "--spectrum-accordion-top-to-text-regular-extra-large",
- "--spectrum-accordion-top-to-text-regular-large",
- "--spectrum-accordion-top-to-text-regular-medium",
- "--spectrum-accordion-top-to-text-regular-small",
- "--spectrum-accordion-top-to-text-spacious-extra-large",
- "--spectrum-accordion-top-to-text-spacious-large",
- "--spectrum-accordion-top-to-text-spacious-medium"
- ],
- "global": [
- "--spectrum-background-opacity-default",
- "--spectrum-background-opacity-down",
- "--spectrum-background-opacity-hover",
- "--spectrum-background-opacity-key-focus",
- "--spectrum-body-color",
- "--spectrum-body-sans-serif-font-style",
- "--spectrum-body-sans-serif-font-weight",
- "--spectrum-body-size-l",
- "--spectrum-body-size-m",
- "--spectrum-body-size-s",
- "--spectrum-body-size-xs",
- "--spectrum-bold-font-weight",
- "--spectrum-cjk-line-height-100",
- "--spectrum-component-edge-to-text-100",
- "--spectrum-component-edge-to-text-200",
- "--spectrum-component-edge-to-text-50",
- "--spectrum-component-edge-to-text-75",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-400",
- "--spectrum-component-height-75",
- "--spectrum-corner-radius-100",
- "--spectrum-default-font-style",
- "--spectrum-disabled-content-color",
- "--spectrum-divider-thickness-small",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-font-size-200",
- "--spectrum-font-size-300",
- "--spectrum-font-size-500",
- "--spectrum-font-size-700",
- "--spectrum-gray-200",
- "--spectrum-gray-900-rgb",
- "--spectrum-line-height-100",
- "--spectrum-logical-rotation",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-down",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-neutral-content-color-key-focus",
- "--spectrum-sans-font-family-stack"
- ],
- "system-theme": [
- "--system-accordion-divider-color",
- "--system-accordion-item-content-color",
- "--system-accordion-item-content-disabled-color"
- ],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-accordion-item-height": {
+ "value": "var(--spectrum-accordion-item-height)",
+ "description": "Used by `--spectrum-accordion-min-block-size`, `.spectrum-Accordion-item`.
Defaults to `var(--spectrum-accordion-item-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-header-top-to-text-space": {
+ "value": "var(--spectrum-accordion-item-header-top-to-text-space)",
+ "description": "Used by `--spectrum-accordion-min-block-size`, `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-item-header-top-to-text-space)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-header-bottom-to-text-space": {
+ "value": "var(--spectrum-accordion-item-header-bottom-to-text-space)",
+ "description": "Used by `--spectrum-accordion-min-block-size`, `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-item-header-bottom-to-text-space)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-header-font-size": {
+ "value": "var(--spectrum-accordion-item-header-font-size)",
+ "description": "Used by `--spectrum-accordion-min-block-size`, `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-item-header-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-header-line-height": {
+ "value": "var(--spectrum-accordion-item-header-line-height)",
+ "description": "Used by `--spectrum-accordion-min-block-size`, `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-item-header-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-width": {
+ "value": "var(--spectrum-accordion-item-width)",
+ "description": "Used by `.spectrum-Accordion-item`.
Defaults to `var(--spectrum-accordion-item-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-divider-color": {
+ "value": "var(--spectrum-accordion-divider-color)",
+ "description": "Used by `.spectrum-Accordion-item`, `.spectrum-Accordion-item:first-child`.
Defaults to `var(--spectrum-accordion-divider-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-divider-thickness": {
+ "value": "1px",
+ "description": "Used by `.spectrum-Accordion-item`, `.spectrum-Accordion-item:first-child`.
Defaults to `var(--spectrum-divider-thickness-small)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-edge-to-disclosure-indicator-space": {
+ "value": "var(--spectrum-accordion-edge-to-disclosure-indicator-space)",
+ "description": "Used by `.spectrum-Accordion-itemIconContainer`.
Defaults to `var(--spectrum-accordion-edge-to-disclosure-indicator-space)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-disclosure-indicator-height": {
+ "value": "var(--spectrum-accordion-disclosure-indicator-height)",
+ "description": "Used by `.spectrum-Accordion-itemIconContainer`, `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-disclosure-indicator-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-header-color-default": {
+ "value": "var(--spectrum-accordion-item-header-color-default)",
+ "description": "Used by `.spectrum-Accordion-itemIconContainer`, `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-item-header-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-min-block-size": {
+ "value": "var(--spectrum-accordion-min-block-size)",
+ "description": "Used by `.spectrum-Accordion-itemIconContainer`, `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-min-block-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-content-area-top-to-content": {
+ "value": "var(--spectrum-accordion-item-content-area-top-to-content)",
+ "description": "Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-item-content-area-top-to-content)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-content-area-bottom-to-content": {
+ "value": "var(--spectrum-accordion-item-content-area-bottom-to-content)",
+ "description": "Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-item-content-area-bottom-to-content)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-component-edge-to-text": {
+ "value": "var(--spectrum-accordion-component-edge-to-text)",
+ "description": "Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-component-edge-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-content-color": {
+ "value": "var(--spectrum-accordion-item-content-color)",
+ "description": "Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-item-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-content-font-weight": {
+ "value": "var(--spectrum-accordion-item-content-font-weight)",
+ "description": "Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-item-content-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-content-font-style": {
+ "value": "var(--spectrum-accordion-item-content-font-style)",
+ "description": "Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-item-content-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-content-font-size": {
+ "value": "var(--spectrum-accordion-item-content-font-size)",
+ "description": "Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-item-content-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-content-font": {
+ "value": "var(--spectrum-accordion-item-content-font)",
+ "description": "Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-item-content-font)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-content-line-height": {
+ "value": "var(--spectrum-accordion-item-content-line-height)",
+ "description": "Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-item-content-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-disclosure-indicator-to-text-space": {
+ "value": "var(--spectrum-accordion-disclosure-indicator-to-text-space)",
+ "description": "Used by `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-disclosure-indicator-to-text-space)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-edge-to-text-space": {
+ "value": "var(--spectrum-accordion-edge-to-text-space)",
+ "description": "Used by `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-edge-to-text-space)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-header-font-weight": {
+ "value": "var(--spectrum-accordion-item-header-font-weight)",
+ "description": "Used by `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-item-header-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-header-font-style": {
+ "value": "var(--spectrum-accordion-item-header-font-style)",
+ "description": "Used by `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-item-header-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-header-font": {
+ "value": "var(--spectrum-accordion-item-header-font)",
+ "description": "Used by `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-item-header-font)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-background-color-default": {
+ "value": "var(--spectrum-accordion-background-color-default)",
+ "description": "Used by `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-corner-radius": {
+ "value": "var(--spectrum-accordion-corner-radius)",
+ "description": "Used by `.spectrum-Accordion-itemHeader:focus-visible`.
Defaults to `var(--spectrum-accordion-corner-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-focus-indicator-thickness": {
+ "value": "var(--spectrum-accordion-focus-indicator-thickness)",
+ "description": "Used by `.spectrum-Accordion-itemHeader:focus-visible`.
Defaults to `var(--spectrum-accordion-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-focus-indicator-color": {
+ "value": "var(--spectrum-accordion-focus-indicator-color)",
+ "description": "Used by `.spectrum-Accordion-itemHeader:focus-visible`.
Defaults to `var(--spectrum-accordion-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-background-color-key-focus": {
+ "value": "var(--spectrum-accordion-background-color-key-focus)",
+ "description": "Used by `.spectrum-Accordion-itemHeader:focus-visible`.
Defaults to `var(--spectrum-accordion-background-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-header-color-key-focus": {
+ "value": "var(--spectrum-accordion-item-header-color-key-focus)",
+ "description": "Used by `.spectrum-Accordion-itemHeader:focus-visible`.
Defaults to `var(--spectrum-accordion-item-header-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-focus-indicator-gap": {
+ "value": "0px",
+ "description": "Used by `.spectrum-Accordion-itemHeader:focus-visible`.
Defaults to `var(--spectrum-accordion-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-background-color-down": {
+ "value": "var(--spectrum-accordion-background-color-down)",
+ "description": "Used by `.spectrum-Accordion-itemHeader:active`.
Defaults to `var(--spectrum-accordion-background-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-header-color-down": {
+ "value": "var(--spectrum-accordion-item-header-color-down)",
+ "description": "Used by `.spectrum-Accordion-itemHeader:active`.
Defaults to `var(--spectrum-accordion-item-header-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-header-disabled-color": {
+ "value": "var(--spectrum-accordion-item-header-disabled-color)",
+ "description": "Used by `.spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader, .spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:focus-visible`, `.spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:hover`, `.spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader + .spectrum-Accordion-itemIconContainer`.
Defaults to `var(--spectrum-accordion-item-header-disabled-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-background-color-hover": {
+ "value": "var(--spectrum-accordion-background-color-hover)",
+ "description": "Used by `.spectrum-Accordion-itemHeader:hover`, `.spectrum-Accordion-item.is-open .spectrum-Accordion-itemHeader:hover`.
Defaults to `var(--spectrum-accordion-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-header-color-hover": {
+ "value": "var(--spectrum-accordion-item-header-color-hover)",
+ "description": "Used by `.spectrum-Accordion-itemHeader:hover, .spectrum-Accordion-itemHeader:hover + .spectrum-Accordion-itemIconContainer`.
Defaults to `var(--spectrum-accordion-item-header-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-content-disabled-color": {
+ "value": "var(--spectrum-accordion-item-content-disabled-color)",
+ "description": "Used by `.spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-item-content-disabled-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-accordion-item-height": {
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--compact`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeS`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeL`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeXL`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `--spectrum-accordion-min-block-size`, `.spectrum-Accordion-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-width": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-minimum-width": {
+ "value": "200px",
+ "description": "Used by `--spectrum-accordion-item-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-disclosure-indicator-height": {
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `.spectrum-Accordion-itemIconContainer`, `.spectrum-Accordion-itemHeader`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-disclosure-indicator-to-text-space": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-disclosure-indicator-to-text": {
+ "value": "0px",
+ "description": "Used by `--spectrum-accordion-disclosure-indicator-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-edge-to-disclosure-indicator-space": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemIconContainer`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-edge-to-disclosure-indicator": {
+ "value": "0px",
+ "description": "Used by `--spectrum-accordion-edge-to-disclosure-indicator-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-edge-to-text-space": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-edge-to-text": {
+ "value": "0px",
+ "description": "Used by `--spectrum-accordion-edge-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-top-to-text-space": {
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--compact`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeS`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeL`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeXL`, `.spectrum-Accordion--spacious`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeS`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeL`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeXL`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `--spectrum-accordion-min-block-size`, `.spectrum-Accordion-itemHeader`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-top-to-text-regular-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-bottom-to-text-space": {
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--compact`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeS`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeL`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeXL`, `.spectrum-Accordion--spacious`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeS`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeL`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeXL`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `--spectrum-accordion-min-block-size`, `.spectrum-Accordion-itemHeader`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-bottom-to-text-regular-medium": {
+ "value": "9px",
+ "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-focus-indicator-gap": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:focus-visible`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-focus-indicator-thickness": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:focus-visible`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-corner-radius": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:focus-visible`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-content-area-top-to-content": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemContent`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-content-area-top-to-content": {
+ "value": "8px",
+ "description": "Used by `--spectrum-accordion-item-content-area-top-to-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-content-area-bottom-to-content": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemContent`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-content-area-bottom-to-content": {
+ "value": "16px",
+ "description": "Used by `--spectrum-accordion-item-content-area-bottom-to-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-component-edge-to-text": {
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `.spectrum-Accordion-itemContent`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-font": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-font-weight": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-font-style": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-font-size": {
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `--spectrum-accordion-min-block-size`, `.spectrum-Accordion-itemHeader`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-line-height": {
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion:lang(ja), .spectrum-Accordion:lang(ko), .spectrum-Accordion:lang(zh)`, `.spectrum-Accordion--spacious`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeS`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeL`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeXL`.
Used by `--spectrum-accordion-min-block-size`, `.spectrum-Accordion-itemHeader`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-content-font": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemContent`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-content-font-weight": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemContent`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-content-font-style": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemContent`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-content-font-size": {
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `.spectrum-Accordion-itemContent`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-content-line-height": {
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion:lang(ja), .spectrum-Accordion:lang(ko), .spectrum-Accordion:lang(zh)`.
Used by `.spectrum-Accordion-itemContent`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-background-color-default": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-background-color-hover": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:hover`, `.spectrum-Accordion-item.is-open .spectrum-Accordion-itemHeader:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-background-color-down": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-background-color-key-focus": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-color-default": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemIconContainer`, `.spectrum-Accordion-itemHeader`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-color-hover": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:hover, .spectrum-Accordion-itemHeader:hover + .spectrum-Accordion-itemIconContainer`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-color-down": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-color-key-focus": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-disabled-color": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader, .spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:focus-visible`, `.spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:hover`, `.spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader + .spectrum-Accordion-itemIconContainer`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-focus-indicator-color": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-min-block-size": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemIconContainer`, `.spectrum-Accordion-itemHeader`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-top-to-text-compact-medium": {
+ "value": "4px",
+ "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-bottom-to-text-compact-medium": {
+ "value": "5px",
+ "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-top-to-text-compact-small": {
+ "value": "2px",
+ "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-bottom-to-text-compact-small": {
+ "value": "2px",
+ "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-top-to-text-compact-large": {
+ "value": "4px",
+ "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-bottom-to-text-compact-large": {
+ "value": "8px",
+ "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-top-to-text-compact-extra-large": {
+ "value": "5px",
+ "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-bottom-to-text-compact-extra-large": {
+ "value": "8px",
+ "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-top-to-text-spacious-medium": {
+ "value": "12px",
+ "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-bottom-to-text-spacious-medium": {
+ "value": "13px",
+ "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-small-top-to-text-spacious": {
+ "value": "9px",
+ "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-bottom-to-text-spacious-small": {
+ "value": "11px",
+ "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-top-to-text-spacious-large": {
+ "value": "12px",
+ "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-bottom-to-text-spacious-large": {
+ "value": "16px",
+ "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-top-to-text-spacious-extra-large": {
+ "value": "13px",
+ "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-bottom-to-text-spacious-extra-large": {
+ "value": "16px",
+ "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-top-to-text-regular-small": {
+ "value": "5px",
+ "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-bottom-to-text-regular-small": {
+ "value": "7px",
+ "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-top-to-text-regular-large": {
+ "value": "9px",
+ "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-bottom-to-text-regular-large": {
+ "value": "11px",
+ "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-top-to-text-regular-extra-large": {
+ "value": "9px",
+ "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-bottom-to-text-regular-extra-large": {
+ "value": "12px",
+ "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-divider-color": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-item`, `.spectrum-Accordion-item:first-child`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-content-color": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemContent`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-content-disabled-color": {
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemContent`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--system-accordion-divider-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--system-accordion-item-content-disabled-color`, `--spectrum-accordion-item-header-disabled-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-body-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--system-accordion-item-content-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-accordion-item-height`, `--spectrum-accordion-disclosure-indicator-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-accordion-disclosure-indicator-height`, `--spectrum-accordion-item-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-accordion-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-accordion-focus-indicator-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-accordion-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-75": {
+ "value": "10px",
+ "description": "Used by `--spectrum-accordion-component-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-accordion-item-header-font`, `--spectrum-accordion-item-content-font`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-bold-font-weight": {
+ "value": "700",
+ "description": "Used by `--spectrum-accordion-item-header-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-accordion-item-header-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-accordion-item-header-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-sans-serif-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-accordion-item-content-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-sans-serif-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-accordion-item-content-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-size-s": {
+ "value": "var(--spectrum-font-size-100)",
+ "description": "Used by `--spectrum-accordion-item-content-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-accordion-item-content-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-900-rgb": {
+ "description": "Used by `--spectrum-accordion-background-color-default`, `--spectrum-accordion-background-color-hover`, `--spectrum-accordion-background-color-down`, `--spectrum-accordion-background-color-key-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-background-opacity-default": {
+ "value": "0",
+ "description": "Used by `--spectrum-accordion-background-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-background-opacity-hover": {
+ "value": "0.1",
+ "description": "Used by `--spectrum-accordion-background-color-hover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-background-opacity-down": {
+ "value": "0.1",
+ "description": "Used by `--spectrum-accordion-background-color-down`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-background-opacity-key-focus": {
+ "value": "0.1",
+ "description": "Used by `--spectrum-accordion-background-color-key-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-accordion-item-header-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-accordion-item-header-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-accordion-item-header-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-accordion-item-header-color-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-accordion-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-logical-rotation": {
+ "description": "Defined in `.spectrum-Accordion:dir(rtl), [dir=\"rtl\"] .spectrum-Accordion`.
Used by `.spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator, .spectrum-Accordion-item.is-open > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-accordion-item-header-line-height`, `--spectrum-accordion-item-content-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-accordion-item-height`, `--spectrum-accordion-disclosure-indicator-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-accordion-item-height`, `--spectrum-accordion-disclosure-indicator-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-50": {
+ "value": "8px",
+ "description": "Used by `--spectrum-accordion-component-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-accordion-item-header-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-size-xs": {
+ "value": "var(--spectrum-font-size-75)",
+ "description": "Used by `--spectrum-accordion-item-content-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-100": {
+ "value": "12px",
+ "description": "Used by `--spectrum-accordion-component-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-500": {
+ "value": "22px",
+ "description": "Used by `--spectrum-accordion-item-header-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-size-m": {
+ "value": "var(--spectrum-font-size-200)",
+ "description": "Used by `--spectrum-accordion-item-content-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-400": {
+ "value": "56px",
+ "description": "Used by `--spectrum-accordion-item-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-200": {
+ "value": "15px",
+ "description": "Used by `--spectrum-accordion-component-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-700": {
+ "value": "28px",
+ "description": "Used by `--spectrum-accordion-item-header-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-size-l": {
+ "value": "var(--spectrum-font-size-300)",
+ "description": "Used by `--spectrum-accordion-item-content-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-divider-thickness-small": {
+ "value": "1px",
+ "description": "Used by `.spectrum-Accordion-item`, `.spectrum-Accordion-item:first-child`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-accordion-divider-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-accordion-divider-color`.",
+ "control": "color"
+ },
+ "system-accordion-item-content-disabled-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-accordion-item-content-disabled-color`.",
+ "control": "color"
+ },
+ "system-accordion-item-content-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-accordion-item-content-color`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/accordion/index.css b/components/accordion/index.css
index 2e0a7616455..33581f5092e 100644
--- a/components/accordion/index.css
+++ b/components/accordion/index.css
@@ -44,10 +44,10 @@
--spectrum-accordion-item-content-line-height: var(--spectrum-line-height-100);
/* Colors */
- --spectrum-accordion-background-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-default));
- --spectrum-accordion-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-hover));
- --spectrum-accordion-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-down));
- --spectrum-accordion-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus));
+ --spectrum-accordion-background-color-default: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-default));
+ --spectrum-accordion-background-color-hover: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-hover));
+ --spectrum-accordion-background-color-down: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-down));
+ --spectrum-accordion-background-color-key-focus: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus));
/* Label */
--spectrum-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default);
@@ -72,6 +72,7 @@
&:lang(ja),
&:lang(zh),
&:lang(ko) {
+ /* @description When the language is CJK, update line-height values to prevent cut off diacritics */
--spectrum-accordion-item-header-line-height: var(--spectrum-cjk-line-height-100);
--spectrum-accordion-item-content-line-height: var(--spectrum-cjk-line-height-100);
}
diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js
index 3709e75871f..444d9f63847 100644
--- a/components/accordion/stories/accordion.stories.js
+++ b/components/accordion/stories/accordion.stories.js
@@ -3,11 +3,13 @@ import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { size } from "@spectrum-css/preview/types";
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { AccordionGroup } from "./accordion.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The accordion element contains a list of items that can be expanded or collapsed to reveal additional content or information associated with each item. There can be zero expanded items, exactly one expanded item, or more than one item expanded at a time, depending on the configuration. This list of items is defined by child accordion item elements.
*
@@ -68,6 +70,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/actionbar/dist/metadata.json b/components/actionbar/dist/metadata.json
index 3632db90bf7..5ff726448fc 100644
--- a/components/actionbar/dist/metadata.json
+++ b/components/actionbar/dist/metadata.json
@@ -14,84 +14,389 @@
".spectrum-ActionBar--fixed",
".spectrum-ActionBar--flexible .spectrum-ActionBar-popover",
".spectrum-ActionBar--sticky",
- ".spectrum-ActionBar.is-open",
".spectrum-ActionBar:lang(ja)",
".spectrum-ActionBar:lang(ko)",
- ".spectrum-ActionBar:lang(zh)"
+ ".spectrum-ActionBar:lang(zh)",
+ ".spectrum-ActionBar.is-open"
],
- "modifiers": [
- "--mod-actionbar-corner-radius",
- "--mod-actionbar-emphasized-background-color",
- "--mod-actionbar-emphasized-item-counter-color",
- "--mod-actionbar-height",
- "--mod-actionbar-item-counter-color",
- "--mod-actionbar-item-counter-font-size",
- "--mod-actionbar-item-counter-line-height",
- "--mod-actionbar-item-counter-line-height-cjk",
- "--mod-actionbar-popover-background-color",
- "--mod-actionbar-popover-border-color",
- "--mod-actionbar-shadow-blur",
- "--mod-actionbar-shadow-color",
- "--mod-actionbar-shadow-horizontal",
- "--mod-actionbar-shadow-vertical",
- "--mod-actionbar-spacing-action-group-end",
- "--mod-actionbar-spacing-action-group-top",
- "--mod-actionbar-spacing-close-button-end",
- "--mod-actionbar-spacing-close-button-start",
- "--mod-actionbar-spacing-close-button-top",
- "--mod-actionbar-spacing-item-counter-end",
- "--mod-actionbar-spacing-item-counter-top",
- "--mod-actionbar-spacing-outer-edge"
- ],
- "component": [
- "--spectrum-action-bar-height",
- "--spectrum-action-bar-top-to-item-counter",
- "--spectrum-actionbar-corner-radius",
- "--spectrum-actionbar-emphasized-background-color",
- "--spectrum-actionbar-emphasized-item-counter-color",
- "--spectrum-actionbar-height",
- "--spectrum-actionbar-item-counter-color",
- "--spectrum-actionbar-item-counter-font-size",
- "--spectrum-actionbar-item-counter-line-height",
- "--spectrum-actionbar-item-counter-line-height-cjk",
- "--spectrum-actionbar-popover-background-color",
- "--spectrum-actionbar-popover-border-color",
- "--spectrum-actionbar-shadow-blur",
- "--spectrum-actionbar-shadow-color",
- "--spectrum-actionbar-shadow-horizontal",
- "--spectrum-actionbar-shadow-vertical",
- "--spectrum-actionbar-spacing-action-group-end",
- "--spectrum-actionbar-spacing-action-group-top",
- "--spectrum-actionbar-spacing-close-button-end",
- "--spectrum-actionbar-spacing-close-button-start",
- "--spectrum-actionbar-spacing-close-button-top",
- "--spectrum-actionbar-spacing-item-counter-end",
- "--spectrum-actionbar-spacing-item-counter-top",
- "--spectrum-actionbar-spacing-outer-edge"
- ],
- "global": [
- "--spectrum-cjk-line-height-100",
- "--spectrum-corner-radius-100",
- "--spectrum-drop-shadow-blur",
- "--spectrum-drop-shadow-color",
- "--spectrum-drop-shadow-x",
- "--spectrum-drop-shadow-y",
- "--spectrum-font-size-100",
- "--spectrum-gray-25",
- "--spectrum-gray-400",
- "--spectrum-informative-background-color-default",
- "--spectrum-line-height-100",
- "--spectrum-neutral-content-color-default",
- "--spectrum-spacing-100",
- "--spectrum-spacing-300",
- "--spectrum-spacing-400",
- "--spectrum-spacing-75",
- "--spectrum-white"
- ],
- "system-theme": [
- "--system-action-bar-popover-background-color",
- "--system-action-bar-popover-border-color"
- ],
- "passthroughs": [],
- "high-contrast": ["--highcontrast-actionbar-popover-border-color"]
+ "modifiers": {
+ "mod-actionbar-spacing-outer-edge": {
+ "value": "var(--spectrum-actionbar-spacing-outer-edge)",
+ "description": "Used by `.spectrum-ActionBar`, `.spectrum-ActionBar.is-open`.
Defaults to `var(--spectrum-actionbar-spacing-outer-edge)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbar-height": {
+ "value": "var(--spectrum-actionbar-height)",
+ "description": "Used by `.spectrum-ActionBar.is-open`, `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbar-corner-radius": {
+ "value": "var(--spectrum-actionbar-corner-radius)",
+ "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-corner-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbar-popover-border-color": {
+ "value": "var(--spectrum-actionbar-popover-border-color)",
+ "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-popover-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbar-popover-background-color": {
+ "value": "var(--spectrum-actionbar-popover-background-color)",
+ "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-popover-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbar-shadow-horizontal": {
+ "value": "var(--spectrum-actionbar-shadow-horizontal)",
+ "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-shadow-horizontal)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbar-shadow-vertical": {
+ "value": "var(--spectrum-actionbar-shadow-vertical)",
+ "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-shadow-vertical)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbar-shadow-blur": {
+ "value": "var(--spectrum-actionbar-shadow-blur)",
+ "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-shadow-blur)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbar-shadow-color": {
+ "value": "var(--spectrum-actionbar-shadow-color)",
+ "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-shadow-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbar-spacing-close-button-start": {
+ "value": "var(--spectrum-actionbar-spacing-close-button-start)",
+ "description": "Used by `.spectrum-ActionBar .spectrum-CloseButton`.
Defaults to `var(--spectrum-actionbar-spacing-close-button-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbar-spacing-close-button-end": {
+ "value": "var(--spectrum-actionbar-spacing-close-button-end)",
+ "description": "Used by `.spectrum-ActionBar .spectrum-CloseButton`.
Defaults to `var(--spectrum-actionbar-spacing-close-button-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbar-spacing-close-button-top": {
+ "value": "var(--spectrum-actionbar-spacing-close-button-top)",
+ "description": "Used by `.spectrum-ActionBar .spectrum-CloseButton`.
Defaults to `var(--spectrum-actionbar-spacing-close-button-top)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbar-spacing-item-counter-end": {
+ "value": "var(--spectrum-actionbar-spacing-item-counter-end)",
+ "description": "Used by `.spectrum-ActionBar .spectrum-FieldLabel`.
Defaults to `var(--spectrum-actionbar-spacing-item-counter-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbar-spacing-item-counter-top": {
+ "value": "var(--spectrum-actionbar-spacing-item-counter-top)",
+ "description": "Used by `.spectrum-ActionBar .spectrum-FieldLabel`.
Defaults to `var(--spectrum-actionbar-spacing-item-counter-top)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbar-item-counter-font-size": {
+ "value": "var(--spectrum-actionbar-item-counter-font-size)",
+ "description": "Used by `.spectrum-ActionBar .spectrum-FieldLabel`.
Defaults to `var(--spectrum-actionbar-item-counter-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbar-item-counter-color": {
+ "value": "var(--spectrum-actionbar-item-counter-color)",
+ "description": "Used by `.spectrum-ActionBar .spectrum-FieldLabel`.
Defaults to `var(--spectrum-actionbar-item-counter-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbar-item-counter-line-height": {
+ "value": "var(--spectrum-actionbar-item-counter-line-height)",
+ "description": "Used by `.spectrum-ActionBar .spectrum-FieldLabel`.
Defaults to `var(--spectrum-actionbar-item-counter-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbar-item-counter-line-height-cjk": {
+ "value": "var(--spectrum-actionbar-item-counter-line-height-cjk)",
+ "description": "Used by `.spectrum-ActionBar .spectrum-FieldLabel:lang(ja), .spectrum-ActionBar .spectrum-FieldLabel:lang(ko), .spectrum-ActionBar .spectrum-FieldLabel:lang(zh)`.
Defaults to `var(--spectrum-actionbar-item-counter-line-height-cjk)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbar-spacing-action-group-end": {
+ "value": "var(--spectrum-actionbar-spacing-action-group-end)",
+ "description": "Used by `.spectrum-ActionBar .spectrum-ActionGroup`.
Defaults to `var(--spectrum-actionbar-spacing-action-group-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbar-spacing-action-group-top": {
+ "value": "var(--spectrum-actionbar-spacing-action-group-top)",
+ "description": "Used by `.spectrum-ActionBar .spectrum-ActionGroup`.
Defaults to `var(--spectrum-actionbar-spacing-action-group-top)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbar-emphasized-background-color": {
+ "value": "var(--spectrum-actionbar-emphasized-background-color)",
+ "description": "Used by `.spectrum-ActionBar--emphasized .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-emphasized-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbar-emphasized-item-counter-color": {
+ "value": "var(--spectrum-actionbar-emphasized-item-counter-color)",
+ "description": "Used by `.spectrum-ActionBar--emphasized .spectrum-FieldLabel`.
Defaults to `var(--spectrum-actionbar-emphasized-item-counter-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-actionbar-height": {
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar.is-open`, `.spectrum-ActionBar .spectrum-ActionBar-popover`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-action-bar-height": {
+ "value": "48px",
+ "description": "Used by `--spectrum-actionbar-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-corner-radius": {
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-item-counter-font-size": {
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-FieldLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-item-counter-line-height": {
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-FieldLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-item-counter-color": {
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-FieldLabel`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbar-emphasized-background-color": {
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar--emphasized .spectrum-ActionBar-popover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbar-emphasized-item-counter-color": {
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar--emphasized .spectrum-FieldLabel`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbar-spacing-outer-edge": {
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar`, `.spectrum-ActionBar.is-open`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-spacing-close-button-top": {
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-CloseButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-spacing-close-button-start": {
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-CloseButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-spacing-close-button-end": {
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-CloseButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-spacing-item-counter-top": {
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-FieldLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-action-bar-top-to-item-counter": {
+ "value": "14px",
+ "description": "Used by `--spectrum-actionbar-spacing-item-counter-top`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-spacing-item-counter-end": {
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-FieldLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-spacing-action-group-top": {
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionGroup`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-spacing-action-group-end": {
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionGroup`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-shadow-horizontal": {
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-shadow-vertical": {
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-shadow-blur": {
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-shadow-color": {
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbar-item-counter-line-height-cjk": {
+ "description": "Defined in `.spectrum-ActionBar:lang(ja), .spectrum-ActionBar:lang(ko), .spectrum-ActionBar:lang(zh)`.
Used by `.spectrum-ActionBar .spectrum-FieldLabel:lang(ja), .spectrum-ActionBar .spectrum-FieldLabel:lang(ko), .spectrum-ActionBar .spectrum-FieldLabel:lang(zh)`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-popover-border-color": {
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbar-popover-background-color": {
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--system-action-bar-popover-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-400": {
+ "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+ "description": "Used by `--system-action-bar-popover-border-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-actionbar-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-actionbar-item-counter-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-actionbar-item-counter-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-actionbar-item-counter-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-informative-background-color-default": {
+ "value": "var(--spectrum-informative-color-800)",
+ "description": "Used by `--spectrum-actionbar-emphasized-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--spectrum-actionbar-emphasized-item-counter-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `--spectrum-actionbar-spacing-outer-edge`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-actionbar-spacing-close-button-top`, `--spectrum-actionbar-spacing-close-button-start`, `--spectrum-actionbar-spacing-action-group-top`, `--spectrum-actionbar-spacing-action-group-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-actionbar-spacing-close-button-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-400": {
+ "value": "24px",
+ "description": "Used by `--spectrum-actionbar-spacing-item-counter-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-x": {
+ "value": "0px",
+ "description": "Used by `--spectrum-actionbar-shadow-horizontal`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-y": {
+ "value": "1px",
+ "description": "Used by `--spectrum-actionbar-shadow-vertical`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-blur": {
+ "value": "4px",
+ "description": "Used by `--spectrum-actionbar-shadow-blur`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-color": {
+ "value": "var(--spectrum-drop-shadow-color-100)",
+ "description": "Used by `--spectrum-actionbar-shadow-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-actionbar-item-counter-line-height-cjk`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-action-bar-popover-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbar-popover-background-color`.",
+ "control": "color"
+ },
+ "system-action-bar-popover-border-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbar-popover-border-color`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-actionbar-popover-border-color": {
+ "value": "var(--mod-actionbar-popover-border-color, var(--spectrum-actionbar-popover-border-color))",
+ "description": "Defined in `.spectrum-ActionBar, .spectrum-ActionBar--emphasized .spectrum-ActionBar-popover`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--mod-actionbar-popover-border-color, var(--spectrum-actionbar-popover-border-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/actionbar/stories/actionbar.stories.js b/components/actionbar/stories/actionbar.stories.js
index aa2e867ea09..d8cacaae49a 100644
--- a/components/actionbar/stories/actionbar.stories.js
+++ b/components/actionbar/stories/actionbar.stories.js
@@ -3,11 +3,13 @@ import { default as CloseButton } from "@spectrum-css/closebutton/stories/closeb
import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isEmphasized, isOpen } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { ActionBarGroup } from "./actionbar.test.js";
import { BehavioralTemplate } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The action bar component is a floating full width bar that appears upon selection. Action bars are used for single and bulk selection patterns, when a user needs to perform actions on either a single or multiple items at the same time.
*
@@ -72,6 +74,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/actionbar/stories/template.js b/components/actionbar/stories/template.js
index 8b134157bd2..d1b9125cfcc 100644
--- a/components/actionbar/stories/template.js
+++ b/components/actionbar/stories/template.js
@@ -1,10 +1,11 @@
-import { Container } from "@spectrum-css/preview/decorators";
import { Template as ActionGroup } from "@spectrum-css/actiongroup/stories/template.js";
import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js";
import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
+import { Container, getRandomId } from "@spectrum-css/preview/decorators";
import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
@@ -14,6 +15,7 @@ import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-ActionBar",
+ id = getRandomId("action-bar"),
size = "m",
isOpen = true,
isEmphasized = false,
@@ -36,6 +38,7 @@ export const Template = ({
"is-open": isOpen,
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
})}
+ id=${ifDefined(id)}
style=${styleMap(customStyles)}
>
${Popover({
diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json
index 08d99aab279..c31c3987d67 100644
--- a/components/actionbutton/dist/metadata.json
+++ b/components/actionbutton/dist/metadata.json
@@ -13,6 +13,15 @@
".spectrum-ActionButton-icon:only-child",
".spectrum-ActionButton-label",
".spectrum-ActionButton-label:empty",
+ ".spectrum-ActionButton::-moz-focus-inner",
+ ".spectrum-ActionButton:active",
+ ".spectrum-ActionButton:after",
+ ".spectrum-ActionButton:dir(rtl)",
+ ".spectrum-ActionButton:disabled",
+ ".spectrum-ActionButton:focus",
+ ".spectrum-ActionButton:focus-visible",
+ ".spectrum-ActionButton:focus-visible:after",
+ ".spectrum-ActionButton:hover",
".spectrum-ActionButton.is-disabled",
".spectrum-ActionButton.is-selected",
".spectrum-ActionButton.is-selected .spectrum-ActionButton-hold",
@@ -29,272 +38,1309 @@
".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet",
- ".spectrum-ActionButton::-moz-focus-inner",
- ".spectrum-ActionButton:active",
- ".spectrum-ActionButton:after",
- ".spectrum-ActionButton:dir(rtl)",
- ".spectrum-ActionButton:disabled",
- ".spectrum-ActionButton:focus",
- ".spectrum-ActionButton:focus-visible",
- ".spectrum-ActionButton:focus-visible:after",
- ".spectrum-ActionButton:hover",
"[dir=\"rtl\"] .spectrum-ActionButton",
"a.spectrum-ActionButton"
],
- "modifiers": [
- "--mod-actionbutton-animation-duration",
- "--mod-actionbutton-background-color-default",
- "--mod-actionbutton-background-color-default-selected",
- "--mod-actionbutton-background-color-default-selected-emphasized",
- "--mod-actionbutton-background-color-disabled",
- "--mod-actionbutton-background-color-down",
- "--mod-actionbutton-background-color-down-selected",
- "--mod-actionbutton-background-color-down-selected-emphasized",
- "--mod-actionbutton-background-color-focus",
- "--mod-actionbutton-background-color-focus-selected",
- "--mod-actionbutton-background-color-focus-selected-emphasized",
- "--mod-actionbutton-background-color-hover",
- "--mod-actionbutton-background-color-hover-selected",
- "--mod-actionbutton-background-color-hover-selected-emphasized",
- "--mod-actionbutton-border-color-default",
- "--mod-actionbutton-border-color-disabled",
- "--mod-actionbutton-border-color-down",
- "--mod-actionbutton-border-color-focus",
- "--mod-actionbutton-border-color-hover",
- "--mod-actionbutton-border-radius",
- "--mod-actionbutton-border-width",
- "--mod-actionbutton-content-color-default",
- "--mod-actionbutton-content-color-default-selected",
- "--mod-actionbutton-content-color-default-selected-emphasized",
- "--mod-actionbutton-content-color-disabled",
- "--mod-actionbutton-content-color-down",
- "--mod-actionbutton-content-color-down-selected",
- "--mod-actionbutton-content-color-down-selected-emphasized",
- "--mod-actionbutton-content-color-focus",
- "--mod-actionbutton-content-color-focus-selected",
- "--mod-actionbutton-content-color-focus-selected-emphasized",
- "--mod-actionbutton-content-color-hover",
- "--mod-actionbutton-content-color-hover-selected",
- "--mod-actionbutton-content-color-hover-selected-emphasized",
- "--mod-actionbutton-edge-to-hold-icon",
- "--mod-actionbutton-edge-to-text",
- "--mod-actionbutton-edge-to-visual",
- "--mod-actionbutton-edge-to-visual-only",
- "--mod-actionbutton-focus-indicator-border-radius",
- "--mod-actionbutton-focus-indicator-color",
- "--mod-actionbutton-focus-indicator-gap",
- "--mod-actionbutton-focus-indicator-thickness",
- "--mod-actionbutton-font-size",
- "--mod-actionbutton-height",
- "--mod-actionbutton-icon-size",
- "--mod-actionbutton-label-color",
- "--mod-actionbutton-min-width",
- "--mod-actionbutton-static-content-color",
- "--mod-actionbutton-text-to-visual",
- "--mod-animation-duration-100",
- "--mod-line-height-100",
- "--mod-sans-font-family-stack"
- ],
- "component": [
- "--spectrum-action-button-edge-to-hold-icon-extra-large",
- "--spectrum-action-button-edge-to-hold-icon-extra-small",
- "--spectrum-action-button-edge-to-hold-icon-large",
- "--spectrum-action-button-edge-to-hold-icon-medium",
- "--spectrum-action-button-edge-to-hold-icon-small",
- "--spectrum-actionbutton-background-color",
- "--spectrum-actionbutton-background-color-default",
- "--spectrum-actionbutton-background-color-disabled",
- "--spectrum-actionbutton-background-color-down",
- "--spectrum-actionbutton-background-color-focus",
- "--spectrum-actionbutton-background-color-hover",
- "--spectrum-actionbutton-background-color-selected",
- "--spectrum-actionbutton-background-color-selected-disabled",
- "--spectrum-actionbutton-background-color-selected-down",
- "--spectrum-actionbutton-background-color-selected-focus",
- "--spectrum-actionbutton-background-color-selected-hover",
- "--spectrum-actionbutton-border-color",
- "--spectrum-actionbutton-border-color-default",
- "--spectrum-actionbutton-border-color-disabled",
- "--spectrum-actionbutton-border-color-down",
- "--spectrum-actionbutton-border-color-focus",
- "--spectrum-actionbutton-border-color-hover",
- "--spectrum-actionbutton-border-radius",
- "--spectrum-actionbutton-border-radius-default",
- "--spectrum-actionbutton-border-width",
- "--spectrum-actionbutton-content-color",
- "--spectrum-actionbutton-content-color-selected",
- "--spectrum-actionbutton-edge-to-hold-icon",
- "--spectrum-actionbutton-edge-to-text",
- "--spectrum-actionbutton-edge-to-visual",
- "--spectrum-actionbutton-edge-to-visual-only",
- "--spectrum-actionbutton-focus-indicator-color",
- "--spectrum-actionbutton-focus-indicator-gap",
- "--spectrum-actionbutton-focus-indicator-thickness",
- "--spectrum-actionbutton-font-size",
- "--spectrum-actionbutton-height",
- "--spectrum-actionbutton-icon-size",
- "--spectrum-actionbutton-sized-edge-to-hold-icon",
- "--spectrum-actionbutton-sized-edge-to-text",
- "--spectrum-actionbutton-sized-edge-to-visual",
- "--spectrum-actionbutton-sized-edge-to-visual-only",
- "--spectrum-actionbutton-sized-font-size",
- "--spectrum-actionbutton-sized-height",
- "--spectrum-actionbutton-sized-icon-size",
- "--spectrum-actionbutton-sized-text-to-visual",
- "--spectrum-actionbutton-text-to-visual"
- ],
- "global": [
- "--spectrum-accent-background-color-default",
- "--spectrum-accent-background-color-down",
- "--spectrum-accent-background-color-hover",
- "--spectrum-accent-background-color-key-focus",
- "--spectrum-animation-duration-100",
- "--spectrum-black",
- "--spectrum-border-width-100",
- "--spectrum-component-edge-to-text-100",
- "--spectrum-component-edge-to-text-200",
- "--spectrum-component-edge-to-text-300",
- "--spectrum-component-edge-to-text-50",
- "--spectrum-component-edge-to-text-75",
- "--spectrum-component-edge-to-visual-100",
- "--spectrum-component-edge-to-visual-200",
- "--spectrum-component-edge-to-visual-300",
- "--spectrum-component-edge-to-visual-50",
- "--spectrum-component-edge-to-visual-75",
- "--spectrum-component-edge-to-visual-only-100",
- "--spectrum-component-edge-to-visual-only-200",
- "--spectrum-component-edge-to-visual-only-300",
- "--spectrum-component-edge-to-visual-only-50",
- "--spectrum-component-edge-to-visual-only-75",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-50",
- "--spectrum-component-height-75",
- "--spectrum-corner-radius-medium-size-extra-large",
- "--spectrum-corner-radius-medium-size-extra-small",
- "--spectrum-corner-radius-medium-size-large",
- "--spectrum-corner-radius-medium-size-medium",
- "--spectrum-corner-radius-medium-size-small",
- "--spectrum-disabled-background-color",
- "--spectrum-disabled-content-color",
- "--spectrum-disabled-static-black-background-color",
- "--spectrum-disabled-static-black-content-color",
- "--spectrum-disabled-static-white-background-color",
- "--spectrum-disabled-static-white-content-color",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-300",
- "--spectrum-font-size-50",
- "--spectrum-font-size-75",
- "--spectrum-gray-100",
- "--spectrum-gray-200",
- "--spectrum-gray-50",
- "--spectrum-line-height-100",
- "--spectrum-logical-rotation",
- "--spectrum-neutral-background-color-selected-default",
- "--spectrum-neutral-background-color-selected-down",
- "--spectrum-neutral-background-color-selected-hover",
- "--spectrum-neutral-background-color-selected-key-focus",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-down",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-neutral-content-color-key-focus",
- "--spectrum-sans-font-family-stack",
- "--spectrum-static-black-focus-indicator-color",
- "--spectrum-static-white-focus-indicator-color",
- "--spectrum-text-to-visual-100",
- "--spectrum-text-to-visual-200",
- "--spectrum-text-to-visual-300",
- "--spectrum-text-to-visual-50",
- "--spectrum-text-to-visual-75",
- "--spectrum-transparent-black-100",
- "--spectrum-transparent-black-200",
- "--spectrum-transparent-black-800",
- "--spectrum-transparent-black-900",
- "--spectrum-transparent-white-100",
- "--spectrum-transparent-white-200",
- "--spectrum-transparent-white-800",
- "--spectrum-transparent-white-900",
- "--spectrum-white",
- "--spectrum-workflow-icon-size-100",
- "--spectrum-workflow-icon-size-200",
- "--spectrum-workflow-icon-size-300",
- "--spectrum-workflow-icon-size-50",
- "--spectrum-workflow-icon-size-75"
- ],
- "system-theme": [
- "--system-action-button-background-color-default",
- "--system-action-button-background-color-disabled",
- "--system-action-button-background-color-down",
- "--system-action-button-background-color-focus",
- "--system-action-button-background-color-hover",
- "--system-action-button-background-color-selected",
- "--system-action-button-background-color-selected-down",
- "--system-action-button-background-color-selected-focus",
- "--system-action-button-background-color-selected-hover",
- "--system-action-button-border-color-default",
- "--system-action-button-border-color-disabled",
- "--system-action-button-border-color-down",
- "--system-action-button-border-color-focus",
- "--system-action-button-border-color-hover",
- "--system-action-button-content-color-selected",
- "--system-action-button-quiet-background-color-default",
- "--system-action-button-quiet-background-color-disabled",
- "--system-action-button-quiet-background-color-down",
- "--system-action-button-quiet-background-color-focus",
- "--system-action-button-quiet-background-color-hover",
- "--system-action-button-quiet-background-color-selected-disabled",
- "--system-action-button-size-l-border-radius-default",
- "--system-action-button-size-m-border-radius-default",
- "--system-action-button-size-s-border-radius-default",
- "--system-action-button-size-xl-border-radius-default",
- "--system-action-button-size-xs-border-radius-default",
- "--system-action-button-static-black-background-color-default",
- "--system-action-button-static-black-background-color-disabled",
- "--system-action-button-static-black-background-color-down",
- "--system-action-button-static-black-background-color-focus",
- "--system-action-button-static-black-background-color-hover",
- "--system-action-button-static-black-background-color-selected-disabled",
- "--system-action-button-static-black-border-color-default",
- "--system-action-button-static-black-border-color-disabled",
- "--system-action-button-static-black-border-color-down",
- "--system-action-button-static-black-border-color-focus",
- "--system-action-button-static-black-border-color-hover",
- "--system-action-button-static-black-quiet-background-color-default",
- "--system-action-button-static-black-quiet-background-color-disabled",
- "--system-action-button-static-black-quiet-background-color-down",
- "--system-action-button-static-black-quiet-background-color-focus",
- "--system-action-button-static-black-quiet-background-color-hover",
- "--system-action-button-static-white-background-color-default",
- "--system-action-button-static-white-background-color-disabled",
- "--system-action-button-static-white-background-color-down",
- "--system-action-button-static-white-background-color-focus",
- "--system-action-button-static-white-background-color-hover",
- "--system-action-button-static-white-background-color-selected-disabled",
- "--system-action-button-static-white-border-color-default",
- "--system-action-button-static-white-border-color-disabled",
- "--system-action-button-static-white-border-color-down",
- "--system-action-button-static-white-border-color-focus",
- "--system-action-button-static-white-border-color-hover",
- "--system-action-button-static-white-quiet-background-color-default",
- "--system-action-button-static-white-quiet-background-color-disabled",
- "--system-action-button-static-white-quiet-background-color-down",
- "--system-action-button-static-white-quiet-background-color-focus",
- "--system-action-button-static-white-quiet-background-color-hover"
- ],
- "passthroughs": [
- "--mod-button-animation-duration",
- "--mod-button-font-family",
- "--mod-button-line-height"
- ],
- "high-contrast": [
- "--highcontrast-actionbutton-background-color",
- "--highcontrast-actionbutton-border-color",
- "--highcontrast-actionbutton-content-color",
- "--highcontrast-actionbutton-focus-indicator-color"
- ]
+ "modifiers": {
+ "mod-sans-font-family-stack": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Used by `.spectrum-ActionButton`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-ActionButton`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-animation-duration-100": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Used by `.spectrum-ActionButton`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-default": {
+ "value": "var(--spectrum-actionbutton-background-color-default)",
+ "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton:hover`, `.spectrum-ActionButton:focus-visible`, `.spectrum-ActionButton:active`, `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`.
Used by `--spectrum-actionbutton-background-color`.
Defaults to `var(--spectrum-actionbutton-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-border-color-default": {
+ "value": "var(--spectrum-actionbutton-border-color-default)",
+ "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton:hover`, `.spectrum-ActionButton:focus-visible`, `.spectrum-ActionButton:active`, `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`.
Used by `--spectrum-actionbutton-border-color`.
Defaults to `var(--spectrum-actionbutton-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton:hover`, `.spectrum-ActionButton:focus-visible`, `.spectrum-ActionButton:active`, `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`.
Used by `--spectrum-actionbutton-content-color`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-border-radius": {
+ "value": "var(--spectrum-actionbutton-border-radius-default)",
+ "description": "Used by `--spectrum-actionbutton-border-radius`.
Defaults to `var(--spectrum-actionbutton-border-radius-default)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-border-width": {
+ "value": "1px",
+ "description": "Used by `--spectrum-actionbutton-border-width`.
Defaults to `var(--spectrum-border-width-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-actionbutton-focus-indicator-gap`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-actionbutton-focus-indicator-thickness`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--spectrum-actionbutton-focus-indicator-color`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-default-selected": {
+ "value": "var(--spectrum-actionbutton-background-color-selected)",
+ "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-background-color-default`.
Defaults to `var(--spectrum-actionbutton-background-color-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-default-selected-emphasized": {
+ "value": "var(--spectrum-accent-color-800)",
+ "description": "Used by `--mod-actionbutton-background-color-default-selected`.
Defaults to `var(--spectrum-accent-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-hover-selected": {
+ "value": "var(--spectrum-actionbutton-background-color-selected-hover)",
+ "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-background-color-hover`.
Defaults to `var(--spectrum-actionbutton-background-color-selected-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-hover-selected-emphasized": {
+ "value": "var(--spectrum-accent-color-700)",
+ "description": "Used by `--mod-actionbutton-background-color-hover-selected`.
Defaults to `var(--spectrum-accent-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-down-selected": {
+ "value": "var(--spectrum-actionbutton-background-color-selected-down)",
+ "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-background-color-down`.
Defaults to `var(--spectrum-actionbutton-background-color-selected-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-down-selected-emphasized": {
+ "value": "var(--spectrum-accent-color-700)",
+ "description": "Used by `--mod-actionbutton-background-color-down-selected`.
Defaults to `var(--spectrum-accent-background-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-focus-selected": {
+ "value": "var(--spectrum-actionbutton-background-color-selected-focus)",
+ "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-background-color-focus`.
Defaults to `var(--spectrum-actionbutton-background-color-selected-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-focus-selected-emphasized": {
+ "value": "var(--spectrum-accent-color-700)",
+ "description": "Used by `--mod-actionbutton-background-color-focus-selected`.
Defaults to `var(--spectrum-accent-background-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-default-selected": {
+ "value": "var(--spectrum-actionbutton-content-color-selected)",
+ "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-content-color-default`.
Defaults to `var(--spectrum-actionbutton-content-color-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-default-selected-emphasized": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--mod-actionbutton-content-color-default-selected`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-hover-selected": {
+ "value": "var(--spectrum-actionbutton-content-color-selected)",
+ "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-content-color-hover`.
Defaults to `var(--spectrum-actionbutton-content-color-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-hover-selected-emphasized": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--mod-actionbutton-content-color-hover-selected`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-down-selected": {
+ "value": "var(--spectrum-actionbutton-content-color-selected)",
+ "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-content-color-down`.
Defaults to `var(--spectrum-actionbutton-content-color-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-down-selected-emphasized": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--mod-actionbutton-content-color-down-selected`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-focus-selected": {
+ "value": "var(--spectrum-actionbutton-content-color-selected)",
+ "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-content-color-focus`.
Defaults to `var(--spectrum-actionbutton-content-color-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-focus-selected-emphasized": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--mod-actionbutton-content-color-focus-selected`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-content-color-default`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-content-color-default`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-content-color-default`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-content-color-default`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-static-content-color": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Used by `--mod-actionbutton-content-color-default-selected`, `--mod-actionbutton-content-color-hover-selected`, `--mod-actionbutton-content-color-down-selected`, `--mod-actionbutton-content-color-focus-selected`.
Defaults to `var(--spectrum-black)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-hover": {
+ "value": "var(--spectrum-actionbutton-background-color-hover)",
+ "description": "Defined in `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-background-color-default`.
Defaults to `var(--spectrum-actionbutton-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-down": {
+ "value": "var(--spectrum-actionbutton-background-color-down)",
+ "description": "Defined in `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-background-color-default`.
Defaults to `var(--spectrum-actionbutton-background-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-focus": {
+ "value": "var(--spectrum-actionbutton-background-color-focus)",
+ "description": "Defined in `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-background-color-default`.
Defaults to `var(--spectrum-actionbutton-background-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-disabled": {
+ "value": "var(--spectrum-actionbutton-background-color-disabled)",
+ "description": "Defined in `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-background-color-default`.
Defaults to `var(--spectrum-actionbutton-background-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-border-color-hover": {
+ "value": "var(--spectrum-actionbutton-border-color-hover)",
+ "description": "Defined in `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-border-color-default`.
Defaults to `var(--spectrum-actionbutton-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-border-color-down": {
+ "value": "var(--spectrum-actionbutton-border-color-down)",
+ "description": "Defined in `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-border-color-default`.
Defaults to `var(--spectrum-actionbutton-border-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-border-color-focus": {
+ "value": "var(--spectrum-actionbutton-border-color-focus)",
+ "description": "Defined in `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-border-color-default`.
Defaults to `var(--spectrum-actionbutton-border-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-border-color-disabled": {
+ "value": "var(--spectrum-actionbutton-border-color-disabled)",
+ "description": "Defined in `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-border-color-default`.
Defaults to `var(--spectrum-actionbutton-border-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-height": {
+ "value": "var(--spectrum-actionbutton-sized-height)",
+ "description": "Used by `--spectrum-actionbutton-height`.
Defaults to `var(--spectrum-actionbutton-sized-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-icon-size": {
+ "value": "var(--spectrum-actionbutton-sized-icon-size)",
+ "description": "Used by `--spectrum-actionbutton-icon-size`.
Defaults to `var(--spectrum-actionbutton-sized-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-font-size": {
+ "value": "var(--spectrum-actionbutton-sized-font-size)",
+ "description": "Used by `--spectrum-actionbutton-font-size`.
Defaults to `var(--spectrum-actionbutton-sized-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-text-to-visual": {
+ "value": "var(--spectrum-actionbutton-sized-text-to-visual)",
+ "description": "Used by `--spectrum-actionbutton-text-to-visual`.
Defaults to `var(--spectrum-actionbutton-sized-text-to-visual)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-edge-to-hold-icon": {
+ "value": "var(--spectrum-actionbutton-sized-edge-to-hold-icon)",
+ "description": "Used by `--spectrum-actionbutton-edge-to-hold-icon`.
Defaults to `var(--spectrum-actionbutton-sized-edge-to-hold-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-edge-to-visual": {
+ "value": "calc(var(--spectrum-actionbutton-sized-edge-to-visual) - var(--spectrum-actionbutton-border-width))",
+ "description": "Used by `--spectrum-actionbutton-edge-to-visual`.
Defaults to `calc(var(--spectrum-actionbutton-sized-edge-to-visual) - var(--spectrum-actionbutton-border-width))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-edge-to-text": {
+ "value": "calc(var(--spectrum-actionbutton-sized-edge-to-text) - var(--spectrum-actionbutton-border-width))",
+ "description": "Used by `--spectrum-actionbutton-edge-to-text`.
Defaults to `calc(var(--spectrum-actionbutton-sized-edge-to-text) - var(--spectrum-actionbutton-border-width))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-edge-to-visual-only": {
+ "value": "var(--spectrum-actionbutton-sized-edge-to-visual-only)",
+ "description": "Used by `--spectrum-actionbutton-edge-to-visual-only`, `.spectrum-ActionButton`.
Defaults to `var(--spectrum-actionbutton-sized-edge-to-visual-only)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-min-width": {
+ "value": "calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-sized-edge-to-visual-only)) * 2 + var(--spectrum-actionbutton-icon-size))",
+ "description": "Used by `.spectrum-ActionButton`.
Defaults to `calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-sized-edge-to-visual-only)) * 2 + var(--spectrum-actionbutton-icon-size))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-animation-duration": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Used by `.spectrum-ActionButton`, `.spectrum-ActionButton:after`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-focus-indicator-border-radius": {
+ "value": "calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap))",
+ "description": "Used by `.spectrum-ActionButton:after`.
Defaults to `calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-label-color": {
+ "description": "Used by `.spectrum-ActionButton-label`.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-actionbutton-background-color": {
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-background-color-default": {
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet`.
Used by `--spectrum-actionbutton-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-border-color": {
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`.
Used by `.spectrum-ActionButton`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-border-color-default": {
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--spectrum-actionbutton-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-content-color": {
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-border-radius": {
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton`, `.spectrum-ActionButton:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-border-radius-default": {
+ "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--sizeM`, `.spectrum-ActionButton.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton.spectrum-ActionButton--sizeXL`.
Used by `--spectrum-actionbutton-border-radius`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-border-width": {
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `--spectrum-actionbutton-edge-to-visual`, `--spectrum-actionbutton-edge-to-text`, `--spectrum-actionbutton-edge-to-visual-only`, `.spectrum-ActionButton`, `.spectrum-ActionButton:after`, `.spectrum-ActionButton-hold`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-focus-indicator-gap": {
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-focus-indicator-thickness": {
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton:focus-visible:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-focus-indicator-color": {
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton:focus-visible:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-background-color-selected": {
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `--mod-actionbutton-background-color-default`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-background-color-selected-hover": {
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `--mod-actionbutton-background-color-hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-background-color-selected-down": {
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `--mod-actionbutton-background-color-down`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-background-color-selected-focus": {
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `--mod-actionbutton-background-color-focus`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-background-color-selected-disabled": {
+ "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-background-color-disabled`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-content-color-selected": {
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `--mod-actionbutton-content-color-default`, `--mod-actionbutton-content-color-hover`, `--mod-actionbutton-content-color-down`, `--mod-actionbutton-content-color-focus`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-background-color-hover": {
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet`.
Used by `--mod-actionbutton-background-color-default`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-border-color-hover": {
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-border-color-default`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-background-color-focus": {
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet`.
Used by `--mod-actionbutton-background-color-default`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-border-color-focus": {
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-border-color-default`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-background-color-down": {
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet`.
Used by `--mod-actionbutton-background-color-default`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-border-color-down": {
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-border-color-default`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-background-color-disabled": {
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet`.
Used by `--mod-actionbutton-background-color-default`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-border-color-disabled": {
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-border-color-default`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-sized-height": {
+ "description": "Defined in `.spectrum-ActionButton, .spectrum-ActionButton--sizeM`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `--spectrum-actionbutton-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-sized-icon-size": {
+ "description": "Defined in `.spectrum-ActionButton, .spectrum-ActionButton--sizeM`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `--spectrum-actionbutton-icon-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-sized-font-size": {
+ "description": "Defined in `.spectrum-ActionButton, .spectrum-ActionButton--sizeM`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `--spectrum-actionbutton-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-sized-text-to-visual": {
+ "description": "Defined in `.spectrum-ActionButton, .spectrum-ActionButton--sizeM`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `--spectrum-actionbutton-text-to-visual`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-sized-edge-to-hold-icon": {
+ "description": "Defined in `.spectrum-ActionButton, .spectrum-ActionButton--sizeM`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `--spectrum-actionbutton-edge-to-hold-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-action-button-edge-to-hold-icon-medium": {
+ "value": "4px",
+ "description": "Used by `--spectrum-actionbutton-sized-edge-to-hold-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-sized-edge-to-visual": {
+ "description": "Defined in `.spectrum-ActionButton, .spectrum-ActionButton--sizeM`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `--spectrum-actionbutton-edge-to-visual`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-sized-edge-to-text": {
+ "description": "Defined in `.spectrum-ActionButton, .spectrum-ActionButton--sizeM`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `--spectrum-actionbutton-edge-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-sized-edge-to-visual-only": {
+ "description": "Defined in `.spectrum-ActionButton, .spectrum-ActionButton--sizeM`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `--spectrum-actionbutton-edge-to-visual-only`, `.spectrum-ActionButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-action-button-edge-to-hold-icon-extra-small": {
+ "value": "3px",
+ "description": "Used by `--spectrum-actionbutton-sized-edge-to-hold-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-action-button-edge-to-hold-icon-small": {
+ "value": "3px",
+ "description": "Used by `--spectrum-actionbutton-sized-edge-to-hold-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-action-button-edge-to-hold-icon-large": {
+ "value": "5px",
+ "description": "Used by `--spectrum-actionbutton-sized-edge-to-hold-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-action-button-edge-to-hold-icon-extra-large": {
+ "value": "6px",
+ "description": "Used by `--spectrum-actionbutton-sized-edge-to-hold-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-height": {
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton`, `.spectrum-ActionButton-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-icon-size": {
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton`, `.spectrum-ActionButton-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-font-size": {
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-text-to-visual": {
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-edge-to-hold-icon": {
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton-hold`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-edge-to-visual": {
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-edge-to-text": {
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton`, `.spectrum-ActionButton-icon`, `.spectrum-ActionButton-hold + .spectrum-ActionButton-icon, .spectrum-ActionButton-icon:only-child`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-edge-to-visual-only": {
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton`, `.spectrum-ActionButton-icon`, `.spectrum-ActionButton-hold + .spectrum-ActionButton-icon, .spectrum-ActionButton-icon:only-child`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `.spectrum-ActionButton`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-ActionButton`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `.spectrum-ActionButton`, `.spectrum-ActionButton:after`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--system-action-button-background-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--system-action-button-background-color-hover`, `--system-action-button-background-color-down`, `--system-action-button-background-color-focus`, `--system-action-button-quiet-background-color-hover`, `--system-action-button-quiet-background-color-down`, `--system-action-button-quiet-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-background-color": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--system-action-button-background-color-disabled`, `--system-action-button-quiet-background-color-selected-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--system-action-button-background-color-selected`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--system-action-button-background-color-selected-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--system-action-button-background-color-selected-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--system-action-button-background-color-selected-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-50": {
+ "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))",
+ "description": "Used by `--system-action-button-content-color-selected`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-medium": {
+ "value": "8px",
+ "description": "Used by `--system-action-button-size-m-border-radius-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-extra-small": {
+ "value": "6px",
+ "description": "Used by `--system-action-button-size-xs-border-radius-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-small": {
+ "value": "7px",
+ "description": "Used by `--system-action-button-size-s-border-radius-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-large": {
+ "value": "9px",
+ "description": "Used by `--system-action-button-size-l-border-radius-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-extra-large": {
+ "value": "10px",
+ "description": "Used by `--system-action-button-size-xl-border-radius-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-black-background-color": {
+ "value": "var(--spectrum-transparent-black-100)",
+ "description": "Used by `--system-action-button-static-black-background-color-disabled`, `--system-action-button-static-black-background-color-selected-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-100": {
+ "value": "light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.09))",
+ "description": "Used by `--system-action-button-static-black-background-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-200": {
+ "value": "light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12))",
+ "description": "Used by `--system-action-button-static-black-background-color-hover`, `--system-action-button-static-black-background-color-down`, `--system-action-button-static-black-background-color-focus`, `--system-action-button-static-black-quiet-background-color-hover`, `--system-action-button-static-black-quiet-background-color-down`, `--system-action-button-static-black-quiet-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-white-background-color": {
+ "value": "var(--spectrum-transparent-white-100)",
+ "description": "Used by `--system-action-button-static-white-background-color-disabled`, `--system-action-button-static-white-background-color-selected-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-100": {
+ "value": "light-dark(rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.11))",
+ "description": "Used by `--system-action-button-static-white-background-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-200": {
+ "value": "light-dark(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14))",
+ "description": "Used by `--system-action-button-static-white-background-color-hover`, `--system-action-button-static-white-background-color-down`, `--system-action-button-static-white-background-color-focus`, `--system-action-button-static-white-quiet-background-color-hover`, `--system-action-button-static-white-quiet-background-color-down`, `--system-action-button-static-white-quiet-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-actionbutton-content-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--spectrum-actionbutton-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-actionbutton-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-actionbutton-focus-indicator-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-actionbutton-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-logical-rotation": {
+ "description": "Defined in `.spectrum-ActionButton:dir(rtl), [dir=\"rtl\"] .spectrum-ActionButton`.
Used by `.spectrum-ActionButton-hold`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-default": {
+ "value": "var(--spectrum-accent-color-800)",
+ "description": "Used by `--mod-actionbutton-background-color-default-selected`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-hover": {
+ "value": "var(--spectrum-accent-color-700)",
+ "description": "Used by `--mod-actionbutton-background-color-hover-selected`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-down": {
+ "value": "var(--spectrum-accent-color-700)",
+ "description": "Used by `--mod-actionbutton-background-color-down-selected`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-key-focus": {
+ "value": "var(--spectrum-accent-color-700)",
+ "description": "Used by `--mod-actionbutton-background-color-focus-selected`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--mod-actionbutton-content-color-default-selected`, `--mod-actionbutton-content-color-hover-selected`, `--mod-actionbutton-content-color-down-selected`, `--mod-actionbutton-content-color-focus-selected`, `--mod-actionbutton-content-color-default`, `--mod-actionbutton-content-color-hover`, `--mod-actionbutton-content-color-down`, `--mod-actionbutton-content-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-800": {
+ "value": "light-dark(rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.84))",
+ "description": "Used by `--mod-actionbutton-background-color-default-selected`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-900": {
+ "value": "light-dark(rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93))",
+ "description": "Used by `--mod-actionbutton-background-color-hover-selected`, `--mod-actionbutton-background-color-down-selected`, `--mod-actionbutton-background-color-focus-selected`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-black": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Used by `--mod-actionbutton-content-color-default`, `--mod-actionbutton-content-color-hover`, `--mod-actionbutton-content-color-down`, `--mod-actionbutton-content-color-focus`, `--mod-actionbutton-content-color-default-selected`, `--mod-actionbutton-content-color-hover-selected`, `--mod-actionbutton-content-color-down-selected`, `--mod-actionbutton-content-color-focus-selected`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-black-content-color": {
+ "value": "var(--spectrum-transparent-black-400)",
+ "description": "Used by `--mod-actionbutton-content-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-static-black-focus-indicator-color": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Used by `--mod-actionbutton-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-800": {
+ "value": "light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85))",
+ "description": "Used by `--mod-actionbutton-background-color-default-selected`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-900": {
+ "value": "light-dark(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94))",
+ "description": "Used by `--mod-actionbutton-background-color-hover-selected`, `--mod-actionbutton-background-color-down-selected`, `--mod-actionbutton-background-color-focus-selected`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-white-content-color": {
+ "value": "var(--spectrum-transparent-white-400)",
+ "description": "Used by `--mod-actionbutton-content-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-static-white-focus-indicator-color": {
+ "value": "var(--spectrum-white)",
+ "description": "Used by `--mod-actionbutton-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--mod-actionbutton-content-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--mod-actionbutton-content-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--mod-actionbutton-content-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--mod-actionbutton-content-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-actionbutton-sized-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-actionbutton-sized-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-actionbutton-sized-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-actionbutton-sized-text-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-100": {
+ "value": "10px",
+ "description": "Used by `--spectrum-actionbutton-sized-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-100": {
+ "value": "12px",
+ "description": "Used by `--spectrum-actionbutton-sized-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-only-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-actionbutton-sized-edge-to-visual-only`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-50": {
+ "value": "20px",
+ "description": "Used by `--spectrum-actionbutton-sized-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-50": {
+ "value": "14px",
+ "description": "Used by `--spectrum-actionbutton-sized-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-50": {
+ "value": "11px",
+ "description": "Used by `--spectrum-actionbutton-sized-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-50": {
+ "value": "5px",
+ "description": "Used by `--spectrum-actionbutton-sized-text-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-50": {
+ "value": "7px",
+ "description": "Used by `--spectrum-actionbutton-sized-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-50": {
+ "value": "8px",
+ "description": "Used by `--spectrum-actionbutton-sized-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-only-50": {
+ "value": "3px",
+ "description": "Used by `--spectrum-actionbutton-sized-edge-to-visual-only`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-actionbutton-sized-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-75": {
+ "value": "16px",
+ "description": "Used by `--spectrum-actionbutton-sized-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-actionbutton-sized-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-actionbutton-sized-text-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-75": {
+ "value": "8px",
+ "description": "Used by `--spectrum-actionbutton-sized-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-75": {
+ "value": "10px",
+ "description": "Used by `--spectrum-actionbutton-sized-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-only-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-actionbutton-sized-edge-to-visual-only`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-actionbutton-sized-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-200": {
+ "value": "22px",
+ "description": "Used by `--spectrum-actionbutton-sized-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-actionbutton-sized-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-200": {
+ "value": "7px",
+ "description": "Used by `--spectrum-actionbutton-sized-text-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-200": {
+ "value": "13px",
+ "description": "Used by `--spectrum-actionbutton-sized-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-200": {
+ "value": "15px",
+ "description": "Used by `--spectrum-actionbutton-sized-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-only-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-actionbutton-sized-edge-to-visual-only`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-actionbutton-sized-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-300": {
+ "value": "26px",
+ "description": "Used by `--spectrum-actionbutton-sized-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-actionbutton-sized-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-300": {
+ "value": "8px",
+ "description": "Used by `--spectrum-actionbutton-sized-text-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-actionbutton-sized-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-300": {
+ "value": "17px",
+ "description": "Used by `--spectrum-actionbutton-sized-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-only-300": {
+ "value": "11px",
+ "description": "Used by `--spectrum-actionbutton-sized-edge-to-visual-only`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-action-button-background-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-default`.",
+ "control": "color"
+ },
+ "system-action-button-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-hover`.",
+ "control": "color"
+ },
+ "system-action-button-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-down`.",
+ "control": "color"
+ },
+ "system-action-button-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-focus`.",
+ "control": "color"
+ },
+ "system-action-button-background-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-disabled`.",
+ "control": "color"
+ },
+ "system-action-button-background-color-selected": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-selected`.",
+ "control": "color"
+ },
+ "system-action-button-background-color-selected-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-selected-hover`.",
+ "control": "color"
+ },
+ "system-action-button-background-color-selected-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-selected-down`.",
+ "control": "color"
+ },
+ "system-action-button-background-color-selected-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-selected-focus`.",
+ "control": "color"
+ },
+ "system-action-button-border-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-default`.",
+ "control": "color"
+ },
+ "system-action-button-border-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-hover`.",
+ "control": "color"
+ },
+ "system-action-button-border-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-down`.",
+ "control": "color"
+ },
+ "system-action-button-border-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-focus`.",
+ "control": "color"
+ },
+ "system-action-button-border-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-disabled`.",
+ "control": "color"
+ },
+ "system-action-button-content-color-selected": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-content-color-selected`.",
+ "control": "color"
+ },
+ "system-action-button-size-m-border-radius-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-radius-default`.",
+ "control": "text"
+ },
+ "system-action-button-size-xs-border-radius-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-radius-default`.",
+ "control": "text"
+ },
+ "system-action-button-size-s-border-radius-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-radius-default`.",
+ "control": "text"
+ },
+ "system-action-button-size-l-border-radius-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-radius-default`.",
+ "control": "text"
+ },
+ "system-action-button-size-xl-border-radius-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-radius-default`.",
+ "control": "text"
+ },
+ "system-action-button-quiet-background-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-default`.",
+ "control": "color"
+ },
+ "system-action-button-quiet-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-hover`.",
+ "control": "color"
+ },
+ "system-action-button-quiet-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-down`.",
+ "control": "color"
+ },
+ "system-action-button-quiet-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-focus`.",
+ "control": "color"
+ },
+ "system-action-button-quiet-background-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-disabled`.",
+ "control": "color"
+ },
+ "system-action-button-quiet-background-color-selected-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-selected-disabled`.",
+ "control": "color"
+ },
+ "system-action-button-static-black-border-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-default`.",
+ "control": "color"
+ },
+ "system-action-button-static-black-border-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-hover`.",
+ "control": "color"
+ },
+ "system-action-button-static-black-border-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-down`.",
+ "control": "color"
+ },
+ "system-action-button-static-black-border-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-focus`.",
+ "control": "color"
+ },
+ "system-action-button-static-black-border-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-disabled`.",
+ "control": "color"
+ },
+ "system-action-button-static-black-background-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-disabled`.",
+ "control": "color"
+ },
+ "system-action-button-static-black-background-color-selected-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-selected-disabled`.",
+ "control": "color"
+ },
+ "system-action-button-static-black-background-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-default`.",
+ "control": "color"
+ },
+ "system-action-button-static-black-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-hover`.",
+ "control": "color"
+ },
+ "system-action-button-static-black-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-down`.",
+ "control": "color"
+ },
+ "system-action-button-static-black-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-focus`.",
+ "control": "color"
+ },
+ "system-action-button-static-black-quiet-background-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-default`.",
+ "control": "color"
+ },
+ "system-action-button-static-black-quiet-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-hover`.",
+ "control": "color"
+ },
+ "system-action-button-static-black-quiet-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-down`.",
+ "control": "color"
+ },
+ "system-action-button-static-black-quiet-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-focus`.",
+ "control": "color"
+ },
+ "system-action-button-static-black-quiet-background-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-disabled`.",
+ "control": "color"
+ },
+ "system-action-button-static-white-border-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-default`.",
+ "control": "color"
+ },
+ "system-action-button-static-white-border-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-hover`.",
+ "control": "color"
+ },
+ "system-action-button-static-white-border-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-down`.",
+ "control": "color"
+ },
+ "system-action-button-static-white-border-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-focus`.",
+ "control": "color"
+ },
+ "system-action-button-static-white-border-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-disabled`.",
+ "control": "color"
+ },
+ "system-action-button-static-white-background-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-disabled`.",
+ "control": "color"
+ },
+ "system-action-button-static-white-background-color-selected-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-selected-disabled`.",
+ "control": "color"
+ },
+ "system-action-button-static-white-background-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-default`.",
+ "control": "color"
+ },
+ "system-action-button-static-white-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-hover`.",
+ "control": "color"
+ },
+ "system-action-button-static-white-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-down`.",
+ "control": "color"
+ },
+ "system-action-button-static-white-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-focus`.",
+ "control": "color"
+ },
+ "system-action-button-static-white-quiet-background-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-default`.",
+ "control": "color"
+ },
+ "system-action-button-static-white-quiet-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-hover`.",
+ "control": "color"
+ },
+ "system-action-button-static-white-quiet-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-down`.",
+ "control": "color"
+ },
+ "system-action-button-static-white-quiet-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-focus`.",
+ "control": "color"
+ },
+ "system-action-button-static-white-quiet-background-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-disabled`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {
+ "mod-button-font-family": {
+ "category": "Passthrough"
+ },
+ "mod-button-line-height": {
+ "category": "Passthrough"
+ },
+ "mod-button-animation-duration": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-actionbutton-focus-indicator-color": {
+ "value": "var(--mod-actionbutton-focus-indicator-color, var(--spectrum-focus-indicator-color))",
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `--spectrum-actionbutton-focus-indicator-color`.
Defaults to `var(--mod-actionbutton-focus-indicator-color, var(--spectrum-focus-indicator-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-actionbutton-content-color": {
+ "value": "var(--mod-actionbutton-content-color-default, var(--spectrum-neutral-content-color-default))",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`.
Used by `--spectrum-actionbutton-content-color`.
Defaults to `var(--mod-actionbutton-content-color-default, var(--spectrum-neutral-content-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-actionbutton-background-color": {
+ "value": "var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))",
+ "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`.
Used by `--spectrum-actionbutton-background-color`.
Defaults to `var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-actionbutton-border-color": {
+ "value": "var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default))",
+ "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`.
Used by `--spectrum-actionbutton-border-color`.
Defaults to `var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js
index a08f0f7bbfc..af53bc23f06 100644
--- a/components/actionbutton/stories/actionbutton.stories.js
+++ b/components/actionbutton/stories/actionbutton.stories.js
@@ -2,11 +2,13 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isQuiet, isSelected, size, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { ActionButtonGroup } from "./actionbutton.test.js";
import { ActionButtonsWithIconOptions, IconOnlyOption, TreatmentTemplate } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The action button component represents an action a user can take.
*
@@ -90,6 +92,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
docs: {
story: {
height: "auto",
diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js
index 425b7e4115c..8fe3fb96d59 100644
--- a/components/actionbutton/stories/template.js
+++ b/components/actionbutton/stories/template.js
@@ -46,6 +46,7 @@ import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
*/
export const Template = ({
rootClass = "spectrum-ActionButton",
+ id = getRandomId("action-button"),
size = "m",
iconName,
iconSet = "workflow",
@@ -65,7 +66,6 @@ export const Template = ({
customStyles = {},
customIconClasses = [],
onclick,
- id = getRandomId("actionbutton"),
testId,
role = "button",
} = {}, context = {}) => {
diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json
index c78e7d30965..28fc9c44c6a 100644
--- a/components/actiongroup/dist/metadata.json
+++ b/components/actiongroup/dist/metadata.json
@@ -5,20 +5,20 @@
".spectrum-ActionGroup .spectrum-ActionGroup-item",
".spectrum-ActionGroup .spectrum-ActionGroup-item:focus-visible",
".spectrum-ActionGroup--compact",
- ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)",
- ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item",
- ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item",
- ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child",
- ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet)",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item",
- ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item .spectrum-ActionButton-label",
- ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item.is-selected",
+ ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:focus-visible",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child",
+ ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item.is-selected",
+ ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)",
+ ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item",
+ ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item",
+ ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child",
+ ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child",
".spectrum-ActionGroup--justified .spectrum-ActionGroup-item",
".spectrum-ActionGroup--sizeL",
".spectrum-ActionGroup--sizeM",
@@ -28,36 +28,136 @@
".spectrum-ActionGroup--vertical",
".spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) .spectrum-ActionGroup-item"
],
- "modifiers": [
- "--mod-actiongroup-border-radius",
- "--mod-actiongroup-border-radius-reset",
- "--mod-actiongroup-button-spacing-reset",
- "--mod-actiongroup-gap-size-compact",
- "--mod-actiongroup-horizontal-spacing-compact",
- "--mod-actiongroup-horizontal-spacing-regular",
- "--mod-actiongroup-vertical-spacing-compact",
- "--mod-actiongroup-vertical-spacing-regular"
- ],
- "component": [
- "--spectrum-actiongroup-border-radius",
- "--spectrum-actiongroup-border-radius-reset",
- "--spectrum-actiongroup-button-spacing-reset",
- "--spectrum-actiongroup-gap-size-compact",
- "--spectrum-actiongroup-horizontal-spacing-compact",
- "--spectrum-actiongroup-horizontal-spacing-regular",
- "--spectrum-actiongroup-vertical-spacing-compact",
- "--spectrum-actiongroup-vertical-spacing-regular"
- ],
- "global": [
- "--spectrum-corner-radius-100",
- "--spectrum-spacing-100",
- "--spectrum-spacing-75"
- ],
- "system-theme": [
- "--system-action-group-gap-size-compact",
- "--system-action-group-horizontal-spacing-compact",
- "--system-action-group-vertical-spacing-compact"
- ],
- "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"],
- "high-contrast": []
+ "modifiers": {
+ "mod-actiongroup-horizontal-spacing-regular": {
+ "value": "var(--spectrum-actiongroup-horizontal-spacing-regular)",
+ "description": "Used by `.spectrum-ActionGroup`.
Defaults to `var(--spectrum-actiongroup-horizontal-spacing-regular)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actiongroup-vertical-spacing-regular": {
+ "value": "var(--spectrum-actiongroup-vertical-spacing-regular)",
+ "description": "Used by `.spectrum-ActionGroup--vertical`.
Defaults to `var(--spectrum-actiongroup-vertical-spacing-regular)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actiongroup-gap-size-compact": {
+ "value": "var(--spectrum-actiongroup-gap-size-compact)",
+ "description": "Used by `.spectrum-ActionGroup--compact`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)`.
Defaults to `var(--spectrum-actiongroup-gap-size-compact)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actiongroup-border-radius-reset": {
+ "value": "var(--spectrum-actiongroup-border-radius-reset)",
+ "description": "Used by `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item`.
Defaults to `var(--spectrum-actiongroup-border-radius-reset)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actiongroup-border-radius": {
+ "value": "var(--spectrum-actiongroup-border-radius)",
+ "description": "Used by `--mod-actionbutton-focus-indicator-border-radius`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`.
Defaults to `var(--spectrum-actiongroup-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actiongroup-button-spacing-reset": {
+ "value": "var(--spectrum-actiongroup-button-spacing-reset)",
+ "description": "Used by `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`.
Defaults to `var(--spectrum-actiongroup-button-spacing-reset)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actiongroup-horizontal-spacing-compact": {
+ "value": "var(--spectrum-actiongroup-horizontal-spacing-compact)",
+ "description": "Used by `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`.
Defaults to `var(--spectrum-actiongroup-horizontal-spacing-compact)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actiongroup-vertical-spacing-compact": {
+ "value": "var(--spectrum-actiongroup-vertical-spacing-compact)",
+ "description": "Used by `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`.
Defaults to `var(--spectrum-actiongroup-vertical-spacing-compact)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-actiongroup-button-spacing-reset": {
+ "description": "Defined in `.spectrum-ActionGroup`.
Used by `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actiongroup-border-radius-reset": {
+ "description": "Defined in `.spectrum-ActionGroup`.
Used by `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actiongroup-border-radius": {
+ "description": "Defined in `.spectrum-ActionGroup`.
Used by `--mod-actionbutton-focus-indicator-border-radius`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actiongroup-horizontal-spacing-regular": {
+ "description": "Defined in `.spectrum-ActionGroup--sizeS, .spectrum-ActionGroup--sizeXS`, `.spectrum-ActionGroup--sizeL, .spectrum-ActionGroup--sizeM, .spectrum-ActionGroup--sizeXL`.
Used by `.spectrum-ActionGroup`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actiongroup-vertical-spacing-regular": {
+ "description": "Defined in `.spectrum-ActionGroup--sizeS, .spectrum-ActionGroup--sizeXS`, `.spectrum-ActionGroup--sizeL, .spectrum-ActionGroup--sizeM, .spectrum-ActionGroup--sizeXL`.
Used by `.spectrum-ActionGroup--vertical`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actiongroup-gap-size-compact": {
+ "description": "Defined in `.spectrum-ActionGroup`.
Used by `.spectrum-ActionGroup--compact`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actiongroup-horizontal-spacing-compact": {
+ "description": "Defined in `.spectrum-ActionGroup`.
Used by `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actiongroup-vertical-spacing-compact": {
+ "description": "Defined in `.spectrum-ActionGroup`.
Used by `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-actiongroup-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-actiongroup-horizontal-spacing-regular`, `--spectrum-actiongroup-vertical-spacing-regular`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-actiongroup-horizontal-spacing-regular`, `--spectrum-actiongroup-vertical-spacing-regular`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-action-group-gap-size-compact": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actiongroup-gap-size-compact`.",
+ "control": "text"
+ },
+ "system-action-group-horizontal-spacing-compact": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actiongroup-horizontal-spacing-compact`.",
+ "control": "text"
+ },
+ "system-action-group-vertical-spacing-compact": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-actiongroup-vertical-spacing-compact`.",
+ "control": "text"
+ }
+ },
+ "passthroughs": {
+ "mod-actionbutton-focus-indicator-border-radius": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {}
}
diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js
index a83857b9e54..92fef49b535 100644
--- a/components/actiongroup/stories/actiongroup.stories.js
+++ b/components/actiongroup/stories/actiongroup.stories.js
@@ -2,11 +2,13 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/acti
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { ActionGroups } from "./actiongroup.test.js";
import { OverflowOption, TreatmentTemplate } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* An action group is a grouping of [action buttons](/docs/components-action-button--docs) that are related to each other.
*/
@@ -99,6 +101,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/actiongroup/stories/template.js b/components/actiongroup/stories/template.js
index d13cdac64aa..29bf8f1af7c 100644
--- a/components/actiongroup/stories/template.js
+++ b/components/actiongroup/stories/template.js
@@ -1,7 +1,8 @@
import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
-import { Container, renderContent } from "@spectrum-css/preview/decorators";
+import { Container, getRandomId, renderContent } from "@spectrum-css/preview/decorators";
import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import { capitalize } from "lodash-es";
@@ -12,6 +13,7 @@ import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-ActionGroup",
+ id = getRandomId("accordion-group"),
size = "m",
areQuiet = false,
areEmphasized = false,
@@ -41,6 +43,7 @@ export const Template = ({
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
})}
style=${styleMap(customStyles)}
+ id=${ifDefined(id)}
>
${renderContent(content, {
callback: ActionButton,
diff --git a/components/actionmenu/stories/actionmenu.stories.js b/components/actionmenu/stories/actionmenu.stories.js
index e9cdd3b8a14..44bc6cc0f6c 100644
--- a/components/actionmenu/stories/actionmenu.stories.js
+++ b/components/actionmenu/stories/actionmenu.stories.js
@@ -4,9 +4,11 @@ import { default as Menu } from "@spectrum-css/menu/stories/menu.stories.js";
import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isOpen } from "@spectrum-css/preview/types";
-import packageJson from "../package.json";
import { ActionMenuGroup } from "./actionmenu.test.js";
+// Local assets to render the component styles and structure
+import packageJson from "../package.json";
+
/**
* The action menu component is an action button with a popover. The `is-selected` class should be applied to the button when the menu is open. Note that the accessibility roles are different for an action menu compared to a normal menu.
*/
@@ -49,6 +51,7 @@ export default {
],
},
packageJson,
+ cssprops: false,
docs: {
story: {
height: "200px",
diff --git a/components/actionmenu/stories/template.js b/components/actionmenu/stories/template.js
index c4bc29768d9..19b6e722612 100644
--- a/components/actionmenu/stories/template.js
+++ b/components/actionmenu/stories/template.js
@@ -4,7 +4,7 @@ import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
import { getRandomId } from "@spectrum-css/preview/decorators";
export const Template = ({
- id = getRandomId("actionmenu"),
+ id = getRandomId("action-menu"),
testId,
triggerId = getRandomId("actionmenu-trigger"),
customClasses = [],
diff --git a/components/alertbanner/dist/metadata.json b/components/alertbanner/dist/metadata.json
index 15b6983e631..497a50be293 100644
--- a/components/alertbanner/dist/metadata.json
+++ b/components/alertbanner/dist/metadata.json
@@ -11,80 +11,359 @@
".spectrum-AlertBanner-text",
".spectrum-AlertBanner.is-open"
],
- "modifiers": [
- "--mod-alert-banner-bottom-text",
- "--mod-alert-banner-close-button-spacing",
- "--mod-alert-banner-edge-to-button",
- "--mod-alert-banner-edge-to-divider",
- "--mod-alert-banner-font-color",
- "--mod-alert-banner-font-size",
- "--mod-alert-banner-icon-size",
- "--mod-alert-banner-icon-to-text",
- "--mod-alert-banner-informative-background",
- "--mod-alert-banner-max-inline-size",
- "--mod-alert-banner-min-height",
- "--mod-alert-banner-negative-background",
- "--mod-alert-banner-neutral-background",
- "--mod-alert-banner-size",
- "--mod-alert-banner-start-edge",
- "--mod-alert-banner-text-to-button-horizontal",
- "--mod-alert-banner-text-to-button-vertical",
- "--mod-alert-banner-text-to-divider",
- "--mod-alert-banner-top-icon",
- "--mod-alert-banner-top-text"
- ],
- "component": [
- "--spectrum-alert-banner-bottom-text",
- "--spectrum-alert-banner-bottom-to-text",
- "--spectrum-alert-banner-close-button-spacing",
- "--spectrum-alert-banner-edge-to-button",
- "--spectrum-alert-banner-edge-to-divider",
- "--spectrum-alert-banner-font-color",
- "--spectrum-alert-banner-font-size",
- "--spectrum-alert-banner-icon-size",
- "--spectrum-alert-banner-icon-to-text",
- "--spectrum-alert-banner-informative-background",
- "--spectrum-alert-banner-max-inline-size",
- "--spectrum-alert-banner-min-height",
- "--spectrum-alert-banner-minimum-height",
- "--spectrum-alert-banner-negative-background",
- "--spectrum-alert-banner-neutral-background",
- "--spectrum-alert-banner-size",
- "--spectrum-alert-banner-start-edge",
- "--spectrum-alert-banner-text-to-button-horizontal",
- "--spectrum-alert-banner-text-to-button-vertical",
- "--spectrum-alert-banner-text-to-divider",
- "--spectrum-alert-banner-top-icon",
- "--spectrum-alert-banner-top-text",
- "--spectrum-alert-banner-top-to-text",
- "--spectrum-alert-banner-top-to-workflow-icon",
- "--spectrum-alert-banner-width"
- ],
- "global": [
- "--spectrum-border-width-100",
- "--spectrum-font-size-100",
- "--spectrum-informative-background-color-default",
- "--spectrum-negative-background-color-default",
- "--spectrum-neutral-subdued-background-color-default",
- "--spectrum-spacing-300",
- "--spectrum-text-to-visual-300",
- "--spectrum-white",
- "--spectrum-workflow-icon-size-100"
- ],
- "system-theme": ["--system-alert-banner-neutral-background"],
- "passthroughs": [
- "--mod-button-margin-block",
- "--mod-button-margin-left",
- "--mod-button-margin-right",
- "--mod-closebutton-align-self",
- "--mod-closebutton-margin-inline",
- "--mod-closebutton-margin-top",
- "--mod-divider-vertical-align",
- "--mod-divider-vertical-height",
- "--mod-divider-vertical-margin"
- ],
- "high-contrast": [
- "--highcontrast-alert-banner-border-color",
- "--highcontrast-alert-banner-border-width"
- ]
+ "modifiers": {
+ "mod-alert-banner-edge-to-divider": {
+ "value": "var(--spectrum-alert-banner-edge-to-divider)",
+ "description": "Used by `--mod-divider-vertical-margin`.
Defaults to `var(--spectrum-alert-banner-edge-to-divider)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-edge-to-button": {
+ "value": "var(--spectrum-alert-banner-edge-to-button)",
+ "description": "Used by `--mod-button-margin-block`, `.spectrum-AlertBanner-body`.
Defaults to `var(--spectrum-alert-banner-edge-to-button)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-text-to-divider": {
+ "value": "var(--spectrum-alert-banner-text-to-divider)",
+ "description": "Used by `--mod-button-margin-right`.
Defaults to `var(--spectrum-alert-banner-text-to-divider)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-close-button-spacing": {
+ "value": "var(--spectrum-alert-banner-close-button-spacing)",
+ "description": "Used by `--mod-closebutton-margin-inline`, `--mod-closebutton-margin-top`.
Defaults to `var(--spectrum-alert-banner-close-button-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-size": {
+ "value": "var(--spectrum-alert-banner-size)",
+ "description": "Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-alert-banner-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-max-inline-size": {
+ "value": "var(--spectrum-alert-banner-max-inline-size)",
+ "description": "Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-alert-banner-max-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-min-height": {
+ "value": "var(--spectrum-alert-banner-min-height)",
+ "description": "Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-alert-banner-min-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-font-size": {
+ "value": "var(--spectrum-alert-banner-font-size)",
+ "description": "Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-alert-banner-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-font-color": {
+ "value": "var(--spectrum-alert-banner-font-color)",
+ "description": "Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-alert-banner-font-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-neutral-background": {
+ "value": "var(--spectrum-alert-banner-neutral-background)",
+ "description": "Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-alert-banner-neutral-background)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-informative-background": {
+ "value": "var(--spectrum-alert-banner-informative-background)",
+ "description": "Used by `.spectrum-AlertBanner--info`.
Defaults to `var(--spectrum-alert-banner-informative-background)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-negative-background": {
+ "value": "var(--spectrum-alert-banner-negative-background)",
+ "description": "Used by `.spectrum-AlertBanner--negative`.
Defaults to `var(--spectrum-alert-banner-negative-background)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-text-to-button-vertical": {
+ "value": "var(--spectrum-alert-banner-text-to-button-vertical)",
+ "description": "Used by `.spectrum-AlertBanner-body`.
Defaults to `var(--spectrum-alert-banner-text-to-button-vertical)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-start-edge": {
+ "value": "var(--spectrum-alert-banner-start-edge)",
+ "description": "Used by `.spectrum-AlertBanner-body`.
Defaults to `var(--spectrum-alert-banner-start-edge)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-icon-size": {
+ "value": "var(--spectrum-alert-banner-icon-size)",
+ "description": "Used by `.spectrum-AlertBanner-icon`.
Defaults to `var(--spectrum-alert-banner-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-top-icon": {
+ "value": "var(--spectrum-alert-banner-top-icon)",
+ "description": "Used by `.spectrum-AlertBanner-icon`.
Defaults to `var(--spectrum-alert-banner-top-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-icon-to-text": {
+ "value": "var(--spectrum-alert-banner-icon-to-text)",
+ "description": "Used by `.spectrum-AlertBanner-icon`.
Defaults to `var(--spectrum-alert-banner-icon-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-top-text": {
+ "value": "var(--spectrum-alert-banner-top-text)",
+ "description": "Used by `.spectrum-AlertBanner-text`.
Defaults to `var(--spectrum-alert-banner-top-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-bottom-text": {
+ "value": "var(--spectrum-alert-banner-bottom-text)",
+ "description": "Used by `.spectrum-AlertBanner-text`.
Defaults to `var(--spectrum-alert-banner-bottom-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-text-to-button-horizontal": {
+ "value": "var(--spectrum-alert-banner-text-to-button-horizontal)",
+ "description": "Used by `.spectrum-AlertBanner-text`.
Defaults to `var(--spectrum-alert-banner-text-to-button-horizontal)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-alert-banner-min-height": {
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-minimum-height": {
+ "value": "48px",
+ "description": "Used by `--spectrum-alert-banner-min-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-max-inline-size": {
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-width": {
+ "value": "832px",
+ "description": "Used by `--spectrum-alert-banner-max-inline-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-size": {
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-font-size": {
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-icon-size": {
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-icon-to-text": {
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-start-edge": {
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner-body`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-text-to-button-horizontal": {
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-text-to-divider": {
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `--mod-button-margin-right`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-top-icon": {
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-top-to-workflow-icon": {
+ "value": "15px",
+ "description": "Used by `--spectrum-alert-banner-top-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-top-text": {
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-top-to-text": {
+ "value": "14px",
+ "description": "Used by `--spectrum-alert-banner-top-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-bottom-text": {
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-bottom-to-text": {
+ "value": "17px",
+ "description": "Used by `--spectrum-alert-banner-bottom-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-informative-background": {
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner--info`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-negative-background": {
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner--negative`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-font-color": {
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-edge-to-divider": {
+ "description": "Used by `--mod-divider-vertical-margin`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-edge-to-button": {
+ "description": "Used by `--mod-button-margin-block`, `.spectrum-AlertBanner-body`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-close-button-spacing": {
+ "description": "Used by `--mod-closebutton-margin-inline`, `--mod-closebutton-margin-top`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-neutral-background": {
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-text-to-button-vertical": {
+ "description": "Used by `.spectrum-AlertBanner-body`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-neutral-subdued-background-color-default": {
+ "value": "var(--spectrum-gray-500)",
+ "description": "Used by `--system-alert-banner-neutral-background`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-alert-banner-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-alert-banner-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-300": {
+ "value": "8px",
+ "description": "Used by `--spectrum-alert-banner-icon-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `--spectrum-alert-banner-start-edge`, `--spectrum-alert-banner-text-to-button-horizontal`, `--spectrum-alert-banner-text-to-divider`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-informative-background-color-default": {
+ "value": "var(--spectrum-informative-color-800)",
+ "description": "Used by `--spectrum-alert-banner-informative-background`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-background-color-default": {
+ "value": "var(--spectrum-negative-color-800)",
+ "description": "Used by `--spectrum-alert-banner-negative-background`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--spectrum-alert-banner-font-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--highcontrast-alert-banner-border-width`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-alert-banner-neutral-background": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-alert-banner-neutral-background`.",
+ "control": "text"
+ }
+ },
+ "passthroughs": {
+ "mod-divider-vertical-margin": {
+ "category": "Passthrough"
+ },
+ "mod-divider-vertical-height": {
+ "category": "Passthrough"
+ },
+ "mod-divider-vertical-align": {
+ "category": "Passthrough"
+ },
+ "mod-button-margin-block": {
+ "category": "Passthrough"
+ },
+ "mod-button-margin-right": {
+ "category": "Passthrough"
+ },
+ "mod-button-margin-left": {
+ "category": "Passthrough"
+ },
+ "mod-closebutton-margin-inline": {
+ "category": "Passthrough"
+ },
+ "mod-closebutton-margin-top": {
+ "category": "Passthrough"
+ },
+ "mod-closebutton-align-self": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-alert-banner-border-width": {
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.",
+ "control": "text"
+ },
+ "highcontrast-alert-banner-border-color": {
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/alertbanner/stories/alertbanner.stories.js b/components/alertbanner/stories/alertbanner.stories.js
index cd49c21a70e..7423e939ab9 100644
--- a/components/alertbanner/stories/alertbanner.stories.js
+++ b/components/alertbanner/stories/alertbanner.stories.js
@@ -5,6 +5,8 @@ import packageJson from "../package.json";
import { AlertBannerGroup } from "./alertbanner.test.js";
import { ActionableOptionsTemplate, Template, TextOverflowTemplate } from "./template.js";
+// Local assets to render the component styles and structure
+
/**
* The alert banner shows pressing and high-signal messages, such as system alerts. It is meant to be noticed and prompt users to take action.
* It should occupy all of the available horizontal space until it reaches its maximum allowed width.
@@ -75,6 +77,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/alertbanner/stories/template.js b/components/alertbanner/stories/template.js
index 3eb719c0612..11134f2a311 100644
--- a/components/alertbanner/stories/template.js
+++ b/components/alertbanner/stories/template.js
@@ -16,7 +16,7 @@ import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-AlertBanner",
- id = getRandomId("alertbanner"),
+ id = getRandomId("alert-banner"),
testId,
isOpen = true,
text,
@@ -35,7 +35,7 @@ export const Template = ({
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
})}
style=${styleMap(customStyles)}
- id=${id}
+ id=${ifDefined(id)}
data-testid=${ifDefined(testId)}
>
Defaults to `var(--spectrum-alert-dialog-min-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-max-width": {
+ "value": "var(--spectrum-alert-dialog-max-width)",
+ "description": "Used by `.spectrum-AlertDialog`.
Defaults to `var(--spectrum-alert-dialog-max-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-padding": {
+ "value": "var(--spectrum-alert-dialog-padding)",
+ "description": "Used by `.spectrum-AlertDialog`.
Defaults to `var(--spectrum-alert-dialog-padding)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-icon-size": {
+ "value": "var(--spectrum-alert-dialog-icon-size)",
+ "description": "Used by `.spectrum-AlertDialog .spectrum-Icon`.
Defaults to `var(--spectrum-alert-dialog-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-title-to-icon": {
+ "value": "var(--spectrum-alert-dialog-title-to-icon)",
+ "description": "Used by `.spectrum-AlertDialog .spectrum-Icon`.
Defaults to `var(--spectrum-alert-dialog-title-to-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-warning-icon-color": {
+ "value": "var(--spectrum-alert-dialog-warning-icon-color)",
+ "description": "Used by `--mod-icon-color`.
Defaults to `var(--spectrum-alert-dialog-warning-icon-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-error-icon-color": {
+ "value": "var(--spectrum-alert-dialog-error-icon-color)",
+ "description": "Used by `--mod-icon-color`.
Defaults to `var(--spectrum-alert-dialog-error-icon-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-title-font-family": {
+ "value": "var(--spectrum-alert-dialog-title-font-family)",
+ "description": "Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-alert-dialog-title-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-title-font-weight": {
+ "value": "var(--spectrum-alert-dialog-title-font-weight)",
+ "description": "Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-alert-dialog-title-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-title-font-style": {
+ "value": "var(--spectrum-alert-dialog-title-font-style)",
+ "description": "Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-alert-dialog-title-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-title-font-size": {
+ "value": "var(--spectrum-alert-dialog-title-font-size)",
+ "description": "Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-alert-dialog-title-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-title-line-height": {
+ "value": "var(--spectrum-alert-dialog-title-line-height)",
+ "description": "Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-alert-dialog-title-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-title-color": {
+ "value": "var(--spectrum-alert-dialog-title-color)",
+ "description": "Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-alert-dialog-title-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-title-to-divider": {
+ "value": "var(--spectrum-alert-dialog-title-to-divider)",
+ "description": "Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-alert-dialog-title-to-divider)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-body-font-family": {
+ "value": "var(--spectrum-alert-dialog-body-font-family)",
+ "description": "Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-alert-dialog-body-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-body-font-weight": {
+ "value": "var(--spectrum-alert-dialog-body-font-weight)",
+ "description": "Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-alert-dialog-body-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-body-font-style": {
+ "value": "var(--spectrum-alert-dialog-body-font-style)",
+ "description": "Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-alert-dialog-body-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-body-font-size": {
+ "value": "var(--spectrum-alert-dialog-body-font-size)",
+ "description": "Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-alert-dialog-body-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-body-line-height": {
+ "value": "var(--spectrum-alert-dialog-body-line-height)",
+ "description": "Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-alert-dialog-body-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-body-color": {
+ "value": "var(--spectrum-alert-dialog-body-color)",
+ "description": "Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-alert-dialog-body-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-divider-to-description": {
+ "value": "var(--spectrum-alert-dialog-divider-to-description)",
+ "description": "Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-alert-dialog-divider-to-description)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-description-to-buttons": {
+ "value": "var(--spectrum-alert-dialog-description-to-buttons)",
+ "description": "Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-alert-dialog-description-to-buttons)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-alert-dialog-min-width": {
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-minimum-width": {
+ "value": "288px",
+ "description": "Used by `--spectrum-alert-dialog-min-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-max-width": {
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-maximum-width": {
+ "value": "480px",
+ "description": "Used by `--spectrum-alert-dialog-max-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-icon-size": {
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog .spectrum-Icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-warning-icon-color": {
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `--mod-icon-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-error-icon-color": {
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `--mod-icon-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-title-font-family": {
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-title-font-weight": {
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-title-font-style": {
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-title-font-size": {
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-title-size": {
+ "value": "var(--spectrum-heading-size-xs)",
+ "description": "Used by `--spectrum-alert-dialog-title-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-title-line-height": {
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-title-color": {
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-heading`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-body-font-family": {
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-body-font-weight": {
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-body-font-style": {
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-body-font-size": {
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-description-size": {
+ "value": "var(--spectrum-body-size-xs)",
+ "description": "Used by `--spectrum-alert-dialog-body-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-body-line-height": {
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-body-color": {
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-content`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-title-to-divider": {
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-divider-to-description": {
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-title-to-icon": {
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog .spectrum-Icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-padding": {
+ "description": "Used by `.spectrum-AlertDialog`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-description-to-buttons": {
+ "description": "Used by `.spectrum-AlertDialog-content`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-alert-dialog-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-notice-visual-color": {
+ "value": "var(--spectrum-notice-color-900)",
+ "description": "Used by `--spectrum-alert-dialog-warning-icon-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-visual-color": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Used by `--spectrum-alert-dialog-error-icon-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-alert-dialog-title-font-family`, `--spectrum-alert-dialog-body-font-family`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-sans-serif-font-weight": {
+ "value": "700",
+ "description": "Used by `--spectrum-alert-dialog-title-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-sans-serif-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-alert-dialog-title-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-line-height": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-alert-dialog-title-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-color": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-alert-dialog-title-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-body-sans-serif-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-alert-dialog-body-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-sans-serif-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-alert-dialog-body-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-alert-dialog-body-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-alert-dialog-body-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-alert-dialog-title-to-divider`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `--spectrum-alert-dialog-divider-to-description`, `--spectrum-alert-dialog-title-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {
+ "mod-buttongroup-justify-content": {
+ "category": "Passthrough"
+ },
+ "mod-icon-color": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {}
}
diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js
index 87c83d18ff9..c8194d17c5c 100644
--- a/components/alertdialog/stories/alertdialog.stories.js
+++ b/components/alertdialog/stories/alertdialog.stories.js
@@ -1,11 +1,13 @@
import { withUnderlayWrapper } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isOpen } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { AlertDialogGroup } from "./alertdialog.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* Alert dialogs display important information that users need to acknowledge. They appear over the interface and block further interactions until an action is selected.
*/
@@ -56,6 +58,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
decorators: [
withUnderlayWrapper,
diff --git a/components/alertdialog/stories/template.js b/components/alertdialog/stories/template.js
index 5de1e37972c..8d7fc093b2f 100644
--- a/components/alertdialog/stories/template.js
+++ b/components/alertdialog/stories/template.js
@@ -13,13 +13,13 @@ import "../index.css";
export const Dialog = ({
rootClass = "spectrum-AlertDialog",
+ id = getRandomId("alert-dialog"),
heading,
content,
customClasses = [],
buttons,
variant,
icon = false,
- id = getRandomId("alertdialog"),
customStyles = {},
} = {}, context = {}) => {
return html`
diff --git a/components/asset/dist/metadata.json b/components/asset/dist/metadata.json
index 306c123b1b6..4d9fbda7b20 100644
--- a/components/asset/dist/metadata.json
+++ b/components/asset/dist/metadata.json
@@ -10,34 +10,123 @@
".spectrum-Asset-folderOutline",
".spectrum-Asset-image"
],
- "modifiers": [
- "--mod-asset-file-background-color",
- "--mod-asset-folder-background-color",
- "--mod-asset-icon-margin",
- "--mod-asset-icon-max-width",
- "--mod-asset-icon-min-width",
- "--mod-asset-icon-outline-color"
- ],
- "component": [
- "--spectrum-asset-file-background",
- "--spectrum-asset-file-background-color",
- "--spectrum-asset-file-outline",
- "--spectrum-asset-folder-background",
- "--spectrum-asset-folder-background-color",
- "--spectrum-asset-folder-outline",
- "--spectrum-asset-icon-outline-color"
- ],
- "global": [
- "--spectrum-animation-duration-100",
- "--spectrum-gray-200",
- "--spectrum-gray-25",
- "--spectrum-gray-500"
- ],
- "system-theme": [
- "--system-asset-file-background-color",
- "--system-asset-folder-background-color",
- "--system-asset-icon-outline-color"
- ],
- "passthroughs": [],
- "high-contrast": ["--highcontrast-asset-icon-background-color"]
+ "modifiers": {
+ "mod-asset-folder-background-color": {
+ "value": "var(--spectrum-asset-folder-background-color)",
+ "description": "Used by `--spectrum-asset-folder-background`.
Defaults to `var(--spectrum-asset-folder-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-asset-file-background-color": {
+ "value": "var(--spectrum-asset-file-background-color)",
+ "description": "Used by `--spectrum-asset-file-background`.
Defaults to `var(--spectrum-asset-file-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-asset-icon-outline-color": {
+ "value": "var(--spectrum-asset-icon-outline-color)",
+ "description": "Used by `--spectrum-asset-folder-outline`, `--spectrum-asset-file-outline`.
Defaults to `var(--spectrum-asset-icon-outline-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-asset-icon-min-width": {
+ "description": "Used by `.spectrum-Asset-file, .spectrum-Asset-folder`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-asset-icon-max-width": {
+ "description": "Used by `.spectrum-Asset-file, .spectrum-Asset-folder`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-asset-icon-margin": {
+ "description": "Used by `.spectrum-Asset-file, .spectrum-Asset-folder`.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-asset-folder-background": {
+ "description": "Defined in `.spectrum-Asset`.
Used by `.spectrum-Asset-folderBackground`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-asset-folder-background-color": {
+ "description": "Defined in `.spectrum-Asset`.
Used by `--spectrum-asset-folder-background`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-asset-file-background": {
+ "description": "Defined in `.spectrum-Asset`.
Used by `.spectrum-Asset-fileBackground`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-asset-file-background-color": {
+ "description": "Defined in `.spectrum-Asset`.
Used by `--spectrum-asset-file-background`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-asset-folder-outline": {
+ "description": "Defined in `.spectrum-Asset`.
Used by `.spectrum-Asset-folderOutline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-asset-icon-outline-color": {
+ "description": "Defined in `.spectrum-Asset`.
Used by `--spectrum-asset-folder-outline`, `--spectrum-asset-file-outline`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-asset-file-outline": {
+ "description": "Defined in `.spectrum-Asset`.
Used by `.spectrum-Asset-fileOutline`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--system-asset-folder-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--system-asset-file-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-500": {
+ "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+ "description": "Used by `--system-asset-icon-outline-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `.spectrum-Asset-image`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-asset-folder-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-asset-folder-background-color`.",
+ "control": "color"
+ },
+ "system-asset-file-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-asset-file-background-color`.",
+ "control": "color"
+ },
+ "system-asset-icon-outline-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-asset-icon-outline-color`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-asset-icon-background-color": {
+ "value": "var(--mod-asset-file-background-color, var(--spectrum-asset-file-background-color))",
+ "description": "Defined in `.spectrum-Asset`.
Used by `--spectrum-asset-folder-background`, `--spectrum-asset-file-background`.
Defaults to `var(--mod-asset-file-background-color, var(--spectrum-asset-file-background-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/asset/stories/asset.stories.js b/components/asset/stories/asset.stories.js
index 927c1009aad..1931589d314 100644
--- a/components/asset/stories/asset.stories.js
+++ b/components/asset/stories/asset.stories.js
@@ -1,9 +1,11 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { AssetGroup } from "./asset.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* Use an asset element to visually represent a file, folder or image. File and folder representations will center themselves horizontally and vertically in the space provided to the element. Images will be contained to the element, growing to the element's full height while centering itself within the width provided.
*/
@@ -38,6 +40,7 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/assetcard/dist/metadata.json b/components/assetcard/dist/metadata.json
index 1c86dc47523..690ee866529 100644
--- a/components/assetcard/dist/metadata.json
+++ b/components/assetcard/dist/metadata.json
@@ -5,9 +5,9 @@
".spectrum-AssetCard .spectrum-AssetCard-selectionOrder",
".spectrum-AssetCard--checkboxSelection .spectrum-AssetCard-selectionIndicator",
".spectrum-AssetCard--checkboxSelection .spectrum-AssetCard-selectionIndicator .spectrum-AssetCard-selectionOrder",
- ".spectrum-AssetCard--checkboxSelection.is-selected .spectrum-AssetCard-selectionIndicator",
".spectrum-AssetCard--checkboxSelection:focus-visible .spectrum-AssetCard-selectionIndicator",
".spectrum-AssetCard--checkboxSelection:hover .spectrum-AssetCard-selectionIndicator",
+ ".spectrum-AssetCard--checkboxSelection.is-selected .spectrum-AssetCard-selectionIndicator",
".spectrum-AssetCard--highlightSelection.is-selected .spectrum-AssetCard-asset",
".spectrum-AssetCard--orderedSelection .spectrum-AssetCard-selectionIndicator",
".spectrum-AssetCard--orderedSelection .spectrum-AssetCard-selectionIndicator .spectrum-AssetCard-checkbox",
@@ -23,15 +23,6 @@
".spectrum-AssetCard-selectionOrder",
".spectrum-AssetCard-selectionOverlay",
".spectrum-AssetCard-title",
- ".spectrum-AssetCard.is-drop-target .spectrum-AssetCard-assetContainer:after",
- ".spectrum-AssetCard.is-drop-target .spectrum-AssetCard-selectionOverlay",
- ".spectrum-AssetCard.is-drop-target:active .spectrum-AssetCard-assetContainer:after",
- ".spectrum-AssetCard.is-drop-target:hover .spectrum-AssetCard-assetContainer:after",
- ".spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after",
- ".spectrum-AssetCard.is-selected .spectrum-AssetCard-selectionOverlay",
- ".spectrum-AssetCard.is-selected .spectrum-Checkbox-box:before",
- ".spectrum-AssetCard.is-selected:active .spectrum-AssetCard-assetContainer:after",
- ".spectrum-AssetCard.is-selected:hover .spectrum-AssetCard-assetContainer:after",
".spectrum-AssetCard:active .spectrum-AssetCard-assetContainer:after",
".spectrum-AssetCard:focus-visible .spectrum-AssetCard-assetContainer:after",
".spectrum-AssetCard:focus-visible .spectrum-AssetCard-assetContainer:before",
@@ -40,155 +31,786 @@
".spectrum-AssetCard:hover .spectrum-Checkbox-box:before",
".spectrum-AssetCard:lang(ja)",
".spectrum-AssetCard:lang(ko)",
- ".spectrum-AssetCard:lang(zh)"
- ],
- "modifiers": [
- "--mod-assectcard-border-color-selected-down",
- "--mod-assectcard-focus-indicator-color",
- "--mod-assetcard-asset-animation-duration",
- "--mod-assetcard-asset-container-border-size",
- "--mod-assetcard-asset-size",
- "--mod-assetcard-background-color",
- "--mod-assetcard-border-color",
- "--mod-assetcard-border-color-down",
- "--mod-assetcard-border-color-hover",
- "--mod-assetcard-border-color-selected",
- "--mod-assetcard-border-color-selected-hover",
- "--mod-assetcard-border-radius",
- "--mod-assetcard-content-font-family",
- "--mod-assetcard-content-font-size",
- "--mod-assetcard-content-font-style",
- "--mod-assetcard-content-font-weight",
- "--mod-assetcard-content-letter-spacing",
- "--mod-assetcard-content-line-height",
- "--mod-assetcard-content-margin-block-start",
- "--mod-assetcard-content-text-color",
- "--mod-assetcard-focus-indicator-thickness",
- "--mod-assetcard-focus-ring-border-radius",
- "--mod-assetcard-focus-ring-gap",
- "--mod-assetcard-header-content-font-family",
- "--mod-assetcard-header-content-font-size",
- "--mod-assetcard-header-content-font-stlye",
- "--mod-assetcard-header-content-font-weight",
- "--mod-assetcard-header-content-letter-spacing",
- "--mod-assetcard-header-content-line-height",
- "--mod-assetcard-header-content-text-color",
- "--mod-assetcard-header-margin-block-start",
- "--mod-assetcard-overlay-background-color",
- "--mod-assetcard-selectionindicator-background-color-default",
- "--mod-assetcard-selectionindicator-background-color-ordered",
- "--mod-assetcard-selectionindicator-border-radius",
- "--mod-assetcard-selectionindicator-color",
- "--mod-assetcard-selectionindicator-font-size",
- "--mod-assetcard-selectionindicator-font-weight",
- "--mod-assetcard-selectionindicator-margin",
- "--mod-assetcard-selectionindicator-size",
- "--mod-assetcard-title-font-family",
- "--mod-assetcard-title-font-size",
- "--mod-assetcard-title-font-style",
- "--mod-assetcard-title-font-weight",
- "--mod-assetcard-title-letter-spacing",
- "--mod-assetcard-title-line-height",
- "--mod-assetcard-title-text-color"
- ],
- "component": [
- "--spectrum-assetcard-asset-animation-duration",
- "--spectrum-assetcard-asset-container-border-size",
- "--spectrum-assetcard-asset-size",
- "--spectrum-assetcard-background-color",
- "--spectrum-assetcard-border-color",
- "--spectrum-assetcard-border-color-down",
- "--spectrum-assetcard-border-color-hover",
- "--spectrum-assetcard-border-color-selected",
- "--spectrum-assetcard-border-color-selected-down",
- "--spectrum-assetcard-border-color-selected-hover",
- "--spectrum-assetcard-border-radius",
- "--spectrum-assetcard-content-font-family",
- "--spectrum-assetcard-content-font-size",
- "--spectrum-assetcard-content-font-style",
- "--spectrum-assetcard-content-font-weight",
- "--spectrum-assetcard-content-letter-spacing",
- "--spectrum-assetcard-content-line-height",
- "--spectrum-assetcard-content-margin-block-start",
- "--spectrum-assetcard-content-text-color",
- "--spectrum-assetcard-focus-indicator-thickness",
- "--spectrum-assetcard-focus-ring-border-radius",
- "--spectrum-assetcard-focus-ring-gap",
- "--spectrum-assetcard-header-content-font-family",
- "--spectrum-assetcard-header-content-font-size",
- "--spectrum-assetcard-header-content-font-style",
- "--spectrum-assetcard-header-content-font-weight",
- "--spectrum-assetcard-header-content-letter-spacing",
- "--spectrum-assetcard-header-content-line-height",
- "--spectrum-assetcard-header-content-text-color",
- "--spectrum-assetcard-header-margin-block-start",
- "--spectrum-assetcard-overlay-background-color",
- "--spectrum-assetcard-selectionindicator-background-color-default",
- "--spectrum-assetcard-selectionindicator-background-color-ordered",
- "--spectrum-assetcard-selectionindicator-blur",
- "--spectrum-assetcard-selectionindicator-border-radius",
- "--spectrum-assetcard-selectionindicator-box-shadow-color",
- "--spectrum-assetcard-selectionindicator-color",
- "--spectrum-assetcard-selectionindicator-font-size",
- "--spectrum-assetcard-selectionindicator-font-weight",
- "--spectrum-assetcard-selectionindicator-margin",
- "--spectrum-assetcard-selectionindicator-offset-y",
- "--spectrum-assetcard-selectionindicator-size",
- "--spectrum-assetcard-title-font-family",
- "--spectrum-assetcard-title-font-size",
- "--spectrum-assetcard-title-font-style",
- "--spectrum-assetcard-title-font-weight",
- "--spectrum-assetcard-title-letter-spacing",
- "--spectrum-assetcard-title-line-height",
- "--spectrum-assetcard-title-text-color"
- ],
- "global": [
- "--spectrum-animation-duration-100",
- "--spectrum-assestcard-focus-indicator-color",
- "--spectrum-body-cjk-font-style",
- "--spectrum-body-cjk-font-weight",
- "--spectrum-body-cjk-line-height",
- "--spectrum-body-sans-serif-font-weight",
- "--spectrum-bold-font-weight",
- "--spectrum-card-selection-background-size",
- "--spectrum-cjk-font-family-stack",
- "--spectrum-cjk-letter-spacing",
- "--spectrum-corner-radius-100",
- "--spectrum-default-font-style",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-font-size-400",
- "--spectrum-gray-500",
- "--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",
- "--spectrum-heading-cjk-line-height",
- "--spectrum-heading-cjk-size-xs",
- "--spectrum-heading-sans-serif-font-weight",
- "--spectrum-line-height-100",
- "--spectrum-line-height-200",
- "--spectrum-sans-font-family-stack",
- "--spectrum-spacing-300",
- "--spectrum-spacing-75",
- "--spectrum-transparent-black-300",
- "--spectrum-white"
- ],
- "system-theme": [
- "--system-asset-card-background-color",
- "--system-asset-card-overlay-background-color",
- "--system-asset-card-selectionindicator-background-color-default",
- "--system-asset-card-selectionindicator-box-shadow-color"
+ ".spectrum-AssetCard:lang(zh)",
+ ".spectrum-AssetCard.is-drop-target .spectrum-AssetCard-assetContainer:after",
+ ".spectrum-AssetCard.is-drop-target .spectrum-AssetCard-selectionOverlay",
+ ".spectrum-AssetCard.is-drop-target:active .spectrum-AssetCard-assetContainer:after",
+ ".spectrum-AssetCard.is-drop-target:hover .spectrum-AssetCard-assetContainer:after",
+ ".spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after",
+ ".spectrum-AssetCard.is-selected .spectrum-AssetCard-selectionOverlay",
+ ".spectrum-AssetCard.is-selected .spectrum-Checkbox-box:before",
+ ".spectrum-AssetCard.is-selected:active .spectrum-AssetCard-assetContainer:after",
+ ".spectrum-AssetCard.is-selected:hover .spectrum-AssetCard-assetContainer:after"
],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-assectcard-border-color-selected-down",
- "--highcontrast-assetcard-border-color-hover",
- "--highcontrast-assetcard-border-color-selected",
- "--highcontrast-assetcard-border-color-selected-hover",
- "--highcontrast-assetcard-selectionindicator-background-color-ordered",
- "--highcontrast-assetcard-selectionindicator-color"
- ]
+ "modifiers": {
+ "mod-assetcard-asset-size": {
+ "value": "var(--spectrum-assetcard-asset-size)",
+ "description": "Used by `.spectrum-AssetCard`, `.spectrum-AssetCard-assetContainer`.
Defaults to `var(--spectrum-assetcard-asset-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-border-color-hover": {
+ "value": "var(--spectrum-assetcard-border-color-hover)",
+ "description": "Used by `.spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected .spectrum-Checkbox-box:before, .spectrum-AssetCard:focus-visible .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard:focus-visible .spectrum-Checkbox-box:before`, `.spectrum-AssetCard:hover .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard:hover .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-assetcard-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-assetcard-border-color-down": {
+ "value": "var(--spectrum-assetcard-border-color-down)",
+ "description": "Used by `.spectrum-AssetCard:active .spectrum-AssetCard-assetContainer:after`.
Defaults to `var(--spectrum-assetcard-border-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-assetcard-border-radius": {
+ "value": "var(--spectrum-assetcard-border-radius)",
+ "description": "Used by `.spectrum-AssetCard-assetContainer`, `.spectrum-AssetCard-asset, .spectrum-AssetCard-assetContainer:after`, `.spectrum-AssetCard-selectionOverlay`.
Defaults to `var(--spectrum-assetcard-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-background-color": {
+ "value": "var(--spectrum-assetcard-background-color)",
+ "description": "Used by `.spectrum-AssetCard-assetContainer`.
Defaults to `var(--spectrum-assetcard-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-assetcard-asset-animation-duration": {
+ "value": "var(--spectrum-assetcard-asset-animation-duration)",
+ "description": "Used by `.spectrum-AssetCard-assetContainer`, `.spectrum-AssetCard-assetContainer:before`, `.spectrum-AssetCard-asset`, `.spectrum-AssetCard-selectionOverlay`, `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-assetcard-asset-animation-duration)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-focus-ring-gap": {
+ "value": "var(--spectrum-assetcard-focus-ring-gap)",
+ "description": "Used by `.spectrum-AssetCard-assetContainer:before`.
Defaults to `var(--spectrum-assetcard-focus-ring-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-focus-indicator-thickness": {
+ "value": "var(--spectrum-assetcard-focus-indicator-thickness)",
+ "description": "Used by `.spectrum-AssetCard-assetContainer:before`.
Defaults to `var(--spectrum-assetcard-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assectcard-focus-indicator-color": {
+ "value": "var(--spectrum-assestcard-focus-indicator-color)",
+ "description": "Used by `.spectrum-AssetCard-assetContainer:before`.
Defaults to `var(--spectrum-assestcard-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-assetcard-focus-ring-border-radius": {
+ "value": "var(--spectrum-assetcard-focus-ring-border-radius)",
+ "description": "Used by `.spectrum-AssetCard-assetContainer:before`.
Defaults to `var(--spectrum-assetcard-focus-ring-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-asset-container-border-size": {
+ "value": "var(--spectrum-assetcard-asset-container-border-size)",
+ "description": "Used by `.spectrum-AssetCard-assetContainer:after`.
Defaults to `var(--spectrum-assetcard-asset-container-border-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-border-color": {
+ "value": "var(--spectrum-assetcard-border-color)",
+ "description": "Used by `.spectrum-AssetCard-assetContainer:after`.
Defaults to `var(--spectrum-assetcard-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-assetcard-header-margin-block-start": {
+ "value": "var(--spectrum-assetcard-header-margin-block-start)",
+ "description": "Used by `.spectrum-AssetCard-header`.
Defaults to `var(--spectrum-assetcard-header-margin-block-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-title-text-color": {
+ "value": "var(--spectrum-assetcard-title-text-color)",
+ "description": "Used by `.spectrum-AssetCard-title`.
Defaults to `var(--spectrum-assetcard-title-text-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-assetcard-title-font-family": {
+ "value": "var(--spectrum-assetcard-title-font-family)",
+ "description": "Used by `.spectrum-AssetCard-title`.
Defaults to `var(--spectrum-assetcard-title-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-title-font-weight": {
+ "value": "var(--spectrum-assetcard-title-font-weight)",
+ "description": "Used by `.spectrum-AssetCard-title`.
Defaults to `var(--spectrum-assetcard-title-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-title-font-size": {
+ "value": "var(--spectrum-assetcard-title-font-size)",
+ "description": "Used by `.spectrum-AssetCard-title`.
Defaults to `var(--spectrum-assetcard-title-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-title-line-height": {
+ "value": "var(--spectrum-assetcard-title-line-height)",
+ "description": "Used by `.spectrum-AssetCard-title`.
Defaults to `var(--spectrum-assetcard-title-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-title-font-style": {
+ "value": "var(--spectrum-assetcard-title-font-style)",
+ "description": "Used by `.spectrum-AssetCard-title`.
Defaults to `var(--spectrum-assetcard-title-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-title-letter-spacing": {
+ "value": "var(--spectrum-assetcard-title-letter-spacing)",
+ "description": "Used by `.spectrum-AssetCard-title`.
Defaults to `var(--spectrum-assetcard-title-letter-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-header-content-text-color": {
+ "value": "var(--spectrum-assetcard-header-content-text-color)",
+ "description": "Used by `.spectrum-AssetCard-headerContent`.
Defaults to `var(--spectrum-assetcard-header-content-text-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-assetcard-header-content-font-family": {
+ "value": "var(--spectrum-assetcard-header-content-font-family)",
+ "description": "Used by `.spectrum-AssetCard-headerContent`.
Defaults to `var(--spectrum-assetcard-header-content-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-header-content-font-size": {
+ "value": "var(--spectrum-assetcard-header-content-font-size)",
+ "description": "Used by `.spectrum-AssetCard-headerContent`.
Defaults to `var(--spectrum-assetcard-header-content-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-header-content-font-weight": {
+ "value": "var(--spectrum-assetcard-header-content-font-weight)",
+ "description": "Used by `.spectrum-AssetCard-headerContent`.
Defaults to `var(--spectrum-assetcard-header-content-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-header-content-line-height": {
+ "value": "var(--spectrum-assetcard-header-content-line-height)",
+ "description": "Used by `.spectrum-AssetCard-headerContent`.
Defaults to `var(--spectrum-assetcard-header-content-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-header-content-font-stlye": {
+ "value": "var(--spectrum-assetcard-header-content-font-style)",
+ "description": "Used by `.spectrum-AssetCard-headerContent`.
Defaults to `var(--spectrum-assetcard-header-content-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-header-content-letter-spacing": {
+ "value": "var(--spectrum-assetcard-header-content-letter-spacing)",
+ "description": "Used by `.spectrum-AssetCard-headerContent`.
Defaults to `var(--spectrum-assetcard-header-content-letter-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-content-margin-block-start": {
+ "value": "var(--spectrum-assetcard-content-margin-block-start)",
+ "description": "Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-assetcard-content-margin-block-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-content-text-color": {
+ "value": "var(--spectrum-assetcard-content-text-color)",
+ "description": "Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-assetcard-content-text-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-assetcard-content-font-family": {
+ "value": "var(--spectrum-assetcard-content-font-family)",
+ "description": "Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-assetcard-content-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-content-font-size": {
+ "value": "var(--spectrum-assetcard-content-font-size)",
+ "description": "Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-assetcard-content-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-content-font-weight": {
+ "value": "var(--spectrum-assetcard-content-font-weight)",
+ "description": "Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-assetcard-content-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-content-line-height": {
+ "value": "var(--spectrum-assetcard-content-line-height)",
+ "description": "Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-assetcard-content-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-content-font-style": {
+ "value": "var(--spectrum-assetcard-content-font-style)",
+ "description": "Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-assetcard-content-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-content-letter-spacing": {
+ "value": "var(--spectrum-assetcard-content-letter-spacing)",
+ "description": "Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-assetcard-content-letter-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-selectionindicator-margin": {
+ "value": "var(--spectrum-assetcard-selectionindicator-margin)",
+ "description": "Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-assetcard-selectionindicator-margin)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-selectionindicator-size": {
+ "value": "var(--spectrum-assetcard-selectionindicator-size)",
+ "description": "Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-assetcard-selectionindicator-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-selectionindicator-border-radius": {
+ "value": "var(--spectrum-assetcard-selectionindicator-border-radius)",
+ "description": "Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-assetcard-selectionindicator-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-selectionindicator-color": {
+ "value": "var(--spectrum-assetcard-selectionindicator-color)",
+ "description": "Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-assetcard-selectionindicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-assetcard-selectionindicator-font-weight": {
+ "value": "var(--spectrum-assetcard-selectionindicator-font-weight)",
+ "description": "Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-assetcard-selectionindicator-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-selectionindicator-font-size": {
+ "value": "var(--spectrum-assetcard-selectionindicator-font-size)",
+ "description": "Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-assetcard-selectionindicator-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetcard-border-color-selected": {
+ "value": "var(--spectrum-assetcard-border-color-selected)",
+ "description": "Used by `.spectrum-AssetCard.is-drop-target .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after`.
Defaults to `var(--spectrum-assetcard-border-color-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-assetcard-overlay-background-color": {
+ "value": "var(--spectrum-assetcard-overlay-background-color)",
+ "description": "Used by `.spectrum-AssetCard.is-drop-target .spectrum-AssetCard-selectionOverlay, .spectrum-AssetCard.is-selected .spectrum-AssetCard-selectionOverlay`.
Defaults to `var(--spectrum-assetcard-overlay-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-assectcard-border-color-selected-down": {
+ "value": "var(--spectrum-assetcard-border-color-selected-down)",
+ "description": "Used by `.spectrum-AssetCard.is-drop-target:active .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected:active .spectrum-AssetCard-assetContainer:after`.
Defaults to `var(--spectrum-assetcard-border-color-selected-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-assetcard-selectionindicator-background-color-default": {
+ "value": "var(--spectrum-assetcard-selectionindicator-background-color-default)",
+ "description": "Used by `.spectrum-AssetCard--checkboxSelection .spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-assetcard-selectionindicator-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-assetcard-border-color-selected-hover": {
+ "value": "var(--spectrum-assetcard-border-color-selected-hover)",
+ "description": "Used by `.spectrum-AssetCard.is-drop-target:hover .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected:hover .spectrum-AssetCard-assetContainer:after`.
Defaults to `var(--spectrum-assetcard-border-color-selected-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-assetcard-selectionindicator-background-color-ordered": {
+ "value": "var(--spectrum-assetcard-selectionindicator-background-color-ordered)",
+ "description": "Used by `.spectrum-AssetCard--orderedSelection .spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-assetcard-selectionindicator-background-color-ordered)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-assetcard-asset-size": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard`, `.spectrum-AssetCard-assetContainer`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-asset-animation-duration": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-assetContainer`, `.spectrum-AssetCard-assetContainer:before`, `.spectrum-AssetCard-asset`, `.spectrum-AssetCard-selectionOverlay`, `.spectrum-AssetCard-selectionIndicator`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-asset-container-border-size": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-assetContainer:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-header-margin-block-start": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-header`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-border-radius": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-assetContainer`, `.spectrum-AssetCard-asset, .spectrum-AssetCard-assetContainer:after`, `.spectrum-AssetCard-selectionOverlay`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-border-color": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-assetContainer:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-border-color-hover": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected .spectrum-Checkbox-box:before, .spectrum-AssetCard:focus-visible .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard:focus-visible .spectrum-Checkbox-box:before`, `.spectrum-AssetCard:hover .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard:hover .spectrum-Checkbox-box:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-border-color-down": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard:active .spectrum-AssetCard-assetContainer:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-focus-ring-gap": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-assetContainer:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-focus-indicator-thickness": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-assetContainer:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-selectionindicator-size": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-selectionindicator-border-radius": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-selectionindicator-offset-y": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-selectionindicator-blur": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-selectionindicator-color": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-selectionindicator-font-weight": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-selectionindicator-font-size": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-title-text-color": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-title`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-title-font-family": {
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-title`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-title-font-weight": {
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-title`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-title-font-style": {
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-title`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-title-line-height": {
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-title`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-title-letter-spacing": {
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-title`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-header-content-text-color": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-headerContent`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-header-content-font-family": {
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-headerContent`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-header-content-font-weight": {
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-headerContent`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-header-content-font-style": {
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-headerContent`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-header-content-line-height": {
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-headerContent`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-header-content-letter-spacing": {
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-headerContent`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-content-text-color": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-content`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-content-font-family": {
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-content-font-weight": {
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-content-font-style": {
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-content-line-height": {
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-content-letter-spacing": {
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-content-margin-block-start": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-title-font-size": {
+ "description": "Defined in `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-title`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-background-color": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-assetContainer`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-focus-ring-border-radius": {
+ "description": "Used by `.spectrum-AssetCard-assetContainer:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-header-content-font-size": {
+ "description": "Used by `.spectrum-AssetCard-headerContent`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-content-font-size": {
+ "description": "Used by `.spectrum-AssetCard-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-selectionindicator-margin": {
+ "description": "Used by `.spectrum-AssetCard-selectionIndicator`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-selectionindicator-box-shadow-color": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-border-color-selected": {
+ "description": "Used by `.spectrum-AssetCard.is-drop-target .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-overlay-background-color": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard.is-drop-target .spectrum-AssetCard-selectionOverlay, .spectrum-AssetCard.is-selected .spectrum-AssetCard-selectionOverlay`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-border-color-selected-down": {
+ "description": "Used by `.spectrum-AssetCard.is-drop-target:active .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected:active .spectrum-AssetCard-assetContainer:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-selectionindicator-background-color-default": {
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard--checkboxSelection .spectrum-AssetCard-selectionIndicator`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-border-color-selected-hover": {
+ "description": "Used by `.spectrum-AssetCard.is-drop-target:hover .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected:hover .spectrum-AssetCard-assetContainer:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-selectionindicator-background-color-ordered": {
+ "description": "Used by `.spectrum-AssetCard--orderedSelection .spectrum-AssetCard-selectionIndicator`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-75": {
+ "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+ "description": "Used by `--system-asset-card-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-75-rgb": {
+ "description": "Used by `--system-asset-card-selectionindicator-background-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-300": {
+ "value": "light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15))",
+ "description": "Used by `--system-asset-card-selectionindicator-box-shadow-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `--spectrum-assetcard-asset-animation-duration`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `--spectrum-assetcard-header-margin-block-start`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-assetcard-border-radius`, `--spectrum-assetcard-selectionindicator-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-500": {
+ "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+ "description": "Used by `--spectrum-assetcard-border-color-hover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-600": {
+ "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+ "description": "Used by `--spectrum-assetcard-border-color-down`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-assetcard-focus-indicator-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-card-selection-background-size": {
+ "value": "40px",
+ "description": "Used by `--spectrum-assetcard-selectionindicator-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--spectrum-assetcard-selectionindicator-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-bold-font-weight": {
+ "value": "700",
+ "description": "Used by `--spectrum-assetcard-selectionindicator-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-400": {
+ "value": "20px",
+ "description": "Used by `--spectrum-assetcard-selectionindicator-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-900": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Used by `--spectrum-assetcard-title-text-color`, `--spectrum-assetcard-header-content-text-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-assetcard-title-font-family`, `--spectrum-assetcard-header-content-font-family`, `--spectrum-assetcard-content-font-family`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-sans-serif-font-weight": {
+ "value": "700",
+ "description": "Used by `--spectrum-assetcard-title-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-assetcard-title-font-style`, `--spectrum-assetcard-header-content-font-style`, `--spectrum-assetcard-content-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-assetcard-title-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-sans-serif-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-assetcard-header-content-font-weight`, `--spectrum-assetcard-content-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-200": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-assetcard-header-content-line-height`, `--spectrum-assetcard-content-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-700": {
+ "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+ "description": "Used by `--spectrum-assetcard-content-text-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-assetcard-content-margin-block-start`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-font-family-stack": {
+ "description": "Used by `--spectrum-assetcard-title-font-family`, `--spectrum-assetcard-header-content-font-family`, `--spectrum-assetcard-content-font-family`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-cjk-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-assetcard-title-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-cjk-font-weight": {
+ "value": "800",
+ "description": "Used by `--spectrum-assetcard-title-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-cjk-size-xs": {
+ "value": "var(--spectrum-font-size-200)",
+ "description": "Used by `--spectrum-assetcard-title-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-cjk-line-height": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-assetcard-title-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-letter-spacing": {
+ "value": "0.05em",
+ "description": "Used by `--spectrum-assetcard-title-letter-spacing`, `--spectrum-assetcard-header-content-letter-spacing`, `--spectrum-assetcard-content-letter-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-cjk-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-assetcard-header-content-font-weight`, `--spectrum-assetcard-content-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-cjk-line-height": {
+ "value": "1.7",
+ "description": "Used by `--spectrum-assetcard-header-content-line-height`, `--spectrum-assetcard-content-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-cjk-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-assetcard-header-content-font-style`, `--spectrum-assetcard-content-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-assestcard-focus-indicator-color": {
+ "description": "Used by `.spectrum-AssetCard-assetContainer:before`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-asset-card-overlay-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-assetcard-overlay-background-color`.",
+ "control": "color"
+ },
+ "system-asset-card-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-assetcard-background-color`.",
+ "control": "color"
+ },
+ "system-asset-card-selectionindicator-background-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-assetcard-selectionindicator-background-color-default`.",
+ "control": "color"
+ },
+ "system-asset-card-selectionindicator-box-shadow-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-assetcard-selectionindicator-box-shadow-color`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-assetcard-border-color-hover": {
+ "value": "var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover))",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected .spectrum-Checkbox-box:before, .spectrum-AssetCard:focus-visible .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard:focus-visible .spectrum-Checkbox-box:before`, `.spectrum-AssetCard:hover .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard:hover .spectrum-Checkbox-box:before`.
Defaults to `var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-assetcard-selectionindicator-color": {
+ "value": "var(--mod-assetcard-selectionindicator-color, var(--spectrum-assetcard-selectionindicator-color))",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--mod-assetcard-selectionindicator-color, var(--spectrum-assetcard-selectionindicator-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-assetcard-border-color-selected": {
+ "value": "var(--mod-assetcard-border-color-selected, var(--spectrum-assetcard-border-color-selected))",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard.is-drop-target .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after`.
Defaults to `var(--mod-assetcard-border-color-selected, var(--spectrum-assetcard-border-color-selected))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-assectcard-border-color-selected-down": {
+ "value": "var(--mod-assectcard-border-color-selected-down, var(--spectrum-assetcard-border-color-selected-down))",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard.is-drop-target:active .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected:active .spectrum-AssetCard-assetContainer:after`.
Defaults to `var(--mod-assectcard-border-color-selected-down, var(--spectrum-assetcard-border-color-selected-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-assetcard-border-color-selected-hover": {
+ "value": "var(--mod-assetcard-border-color-selected-hover, var(--spectrum-assetcard-border-color-selected-hover))",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard.is-drop-target:hover .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected:hover .spectrum-AssetCard-assetContainer:after`.
Defaults to `var(--mod-assetcard-border-color-selected-hover, var(--spectrum-assetcard-border-color-selected-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-assetcard-selectionindicator-background-color-ordered": {
+ "value": "var(--mod-assetcard-selectionindicator-background-color-ordered, var(--spectrum-assetcard-selectionindicator-background-color-ordered))",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard--orderedSelection .spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--mod-assetcard-selectionindicator-background-color-ordered, var(--spectrum-assetcard-selectionindicator-background-color-ordered))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/assetcard/stories/assetcard.stories.js b/components/assetcard/stories/assetcard.stories.js
index 2e917fbc25c..17b674a4f60 100644
--- a/components/assetcard/stories/assetcard.stories.js
+++ b/components/assetcard/stories/assetcard.stories.js
@@ -1,11 +1,13 @@
import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isFocused, isSelected } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { AssetCardGroup } from "./assetcard.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The asset card component allows users to select and manage assets and their metadata in a grid.
*
@@ -92,6 +94,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/assetcard/stories/template.js b/components/assetcard/stories/template.js
index 864fcd951b7..6620830bba5 100644
--- a/components/assetcard/stories/template.js
+++ b/components/assetcard/stories/template.js
@@ -14,6 +14,7 @@ import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-AssetCard",
+ id = getRandomId("asset-card"),
image,
exampleImage,
title,
@@ -25,7 +26,6 @@ export const Template = ({
isDropTarget = false,
customClasses = [],
customStyles = {},
- id = getRandomId("assetcard"),
testId,
} = {}, context = {}) => {
const { updateArgs } = context;
diff --git a/components/assetlist/dist/metadata.json b/components/assetlist/dist/metadata.json
index 011c28ee314..0f7495eea63 100644
--- a/components/assetlist/dist/metadata.json
+++ b/components/assetlist/dist/metadata.json
@@ -4,6 +4,12 @@
".spectrum-AssetList",
".spectrum-AssetList-item",
".spectrum-AssetList-item .spectrum-AssetList-itemThumbnail",
+ ".spectrum-AssetList-item:before",
+ ".spectrum-AssetList-item:focus .spectrum-Checkbox",
+ ".spectrum-AssetList-item:focus-within:focus-visible",
+ ".spectrum-AssetList-item:focus-within:focus-visible:before",
+ ".spectrum-AssetList-item:hover",
+ ".spectrum-AssetList-item:hover .spectrum-Checkbox",
".spectrum-AssetList-item.is-branch .spectrum-AssetList-itemChildIndicator",
".spectrum-AssetList-item.is-focused:focus-within",
".spectrum-AssetList-item.is-focused:focus-within:before",
@@ -15,86 +21,344 @@
".spectrum-AssetList-item.is-selected .spectrum-Checkbox",
".spectrum-AssetList-item.is-selected:focus",
".spectrum-AssetList-item.is-selected:hover",
- ".spectrum-AssetList-item:before",
- ".spectrum-AssetList-item:focus .spectrum-Checkbox",
- ".spectrum-AssetList-item:focus-within:focus-visible",
- ".spectrum-AssetList-item:focus-within:focus-visible:before",
- ".spectrum-AssetList-item:hover",
- ".spectrum-AssetList-item:hover .spectrum-Checkbox",
".spectrum-AssetList-itemChildIndicator",
".spectrum-AssetList-itemLabel",
".spectrum-AssetList-itemSelector",
".spectrum-AssetList:dir(rtl)",
"[dir=\"rtl\"] .spectrum-AssetList"
],
- "modifiers": [
- "--mod-assetlist-border-color-key-focus",
- "--mod-assetlist-child-indicator-animation",
- "--mod-assetlist-item-animation",
- "--mod-assetlist-item-background-color-down",
- "--mod-assetlist-item-background-color-hover",
- "--mod-assetlist-item-background-color-selected",
- "--mod-assetlist-item-background-color-selected-hover",
- "--mod-assetlist-item-border-radius",
- "--mod-assetlist-item-font-size",
- "--mod-assetlist-item-font-weight",
- "--mod-assetlist-item-height",
- "--mod-assetlist-item-label-padding-inline-start",
- "--mod-assetlist-item-margin-bottom",
- "--mod-assetlist-item-padding-inline-end",
- "--mod-assetlist-item-padding-inline-start",
- "--mod-assetlist-label-color",
- "--mod-assetlist-thumbnail-margin-left",
- "--mod-assetlist-thumbnail-width",
- "--mod-assetlist-thumnail-height",
- "--mod-assetlist-width"
- ],
- "component": [
- "--spectrum-assetlist-border-color-key-focus",
- "--spectrum-assetlist-child-indicator-animation",
- "--spectrum-assetlist-item-animation",
- "--spectrum-assetlist-item-background-color-down",
- "--spectrum-assetlist-item-background-color-hover",
- "--spectrum-assetlist-item-background-color-selected",
- "--spectrum-assetlist-item-background-color-selected-hover",
- "--spectrum-assetlist-item-border-radius",
- "--spectrum-assetlist-item-font-size",
- "--spectrum-assetlist-item-font-weight",
- "--spectrum-assetlist-item-height",
- "--spectrum-assetlist-item-label-padding-inline-start",
- "--spectrum-assetlist-item-margin-block-end",
- "--spectrum-assetlist-item-padding-inline-end",
- "--spectrum-assetlist-item-padding-inline-start",
- "--spectrum-assetlist-label-color",
- "--spectrum-assetlist-thumbnail-height",
- "--spectrum-assetlist-thumbnail-margin-inline-start",
- "--spectrum-assetlist-thumbnail-width",
- "--spectrum-assetlist-width"
- ],
- "global": [
- "--spectrum-animation-duration-100",
- "--spectrum-font-size-100",
- "--spectrum-gray-100",
- "--spectrum-gray-200",
- "--spectrum-logical-rotation",
- "--spectrum-neutral-content-color-default",
- "--spectrum-regular-font-weight",
- "--spectrum-spacing-100",
- "--spectrum-spacing-300",
- "--spectrum-spacing-400",
- "--spectrum-spacing-600",
- "--spectrum-spacing-75"
- ],
- "system-theme": [
- "--system-asset-list-item-background-color-down",
- "--system-asset-list-item-background-color-hover"
- ],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-assetlist-border-color-key-focus",
- "--highcontrast-assetlist-item-background-color-hover",
- "--highcontrast-assetlist-item-background-color-selected",
- "--highcontrast-assetlist-item-background-color-selected-hover",
- "--highcontrast-assetlist-label-color"
- ]
+ "modifiers": {
+ "mod-assetlist-label-color": {
+ "value": "var(--spectrum-assetlist-label-color)",
+ "description": "Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-assetlist-label-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-assetlist-width": {
+ "value": "var(--spectrum-assetlist-width)",
+ "description": "Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-assetlist-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetlist-item-padding-inline-start": {
+ "value": "var(--spectrum-assetlist-item-padding-inline-start)",
+ "description": "Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-assetlist-item-padding-inline-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetlist-item-padding-inline-end": {
+ "value": "var(--spectrum-assetlist-item-padding-inline-end)",
+ "description": "Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-assetlist-item-padding-inline-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetlist-item-margin-bottom": {
+ "value": "var(--spectrum-assetlist-item-margin-block-end)",
+ "description": "Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-assetlist-item-margin-block-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetlist-item-animation": {
+ "value": "var(--spectrum-assetlist-item-animation)",
+ "description": "Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-assetlist-item-animation)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetlist-item-font-size": {
+ "value": "var(--spectrum-assetlist-item-font-size)",
+ "description": "Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-assetlist-item-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetlist-item-font-weight": {
+ "value": "var(--spectrum-assetlist-item-font-weight)",
+ "description": "Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-assetlist-item-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetlist-item-height": {
+ "value": "var(--spectrum-assetlist-item-height)",
+ "description": "Used by `.spectrum-AssetList-item, .spectrum-AssetList-item:before`.
Defaults to `var(--spectrum-assetlist-item-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetlist-item-border-radius": {
+ "value": "var(--spectrum-assetlist-item-border-radius)",
+ "description": "Used by `.spectrum-AssetList-item, .spectrum-AssetList-item:before`.
Defaults to `var(--spectrum-assetlist-item-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetlist-thumbnail-width": {
+ "value": "var(--spectrum-assetlist-thumbnail-width)",
+ "description": "Used by `.spectrum-AssetList-item .spectrum-AssetList-itemThumbnail`.
Defaults to `var(--spectrum-assetlist-thumbnail-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetlist-thumnail-height": {
+ "value": "var(--spectrum-assetlist-thumbnail-height)",
+ "description": "Used by `.spectrum-AssetList-item .spectrum-AssetList-itemThumbnail`.
Defaults to `var(--spectrum-assetlist-thumbnail-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetlist-thumbnail-margin-left": {
+ "value": "var(--spectrum-assetlist-thumbnail-margin-inline-start)",
+ "description": "Used by `.spectrum-AssetList-item .spectrum-AssetList-itemThumbnail`.
Defaults to `var(--spectrum-assetlist-thumbnail-margin-inline-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetlist-item-background-color-hover": {
+ "value": "var(--spectrum-assetlist-item-background-color-hover)",
+ "description": "Used by `.spectrum-AssetList-item.is-focused:focus-within, .spectrum-AssetList-item:focus-within:focus-visible`, `.spectrum-AssetList-item:hover`.
Defaults to `var(--spectrum-assetlist-item-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-assetlist-border-color-key-focus": {
+ "value": "var(--spectrum-assetlist-border-color-key-focus)",
+ "description": "Used by `.spectrum-AssetList-item.is-focused:focus-within:before, .spectrum-AssetList-item:focus-within:focus-visible:before`.
Defaults to `var(--spectrum-assetlist-border-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-assetlist-item-background-color-down": {
+ "value": "var(--spectrum-assetlist-item-background-color-down)",
+ "description": "Used by `.spectrum-AssetList-item.is-navigated, .spectrum-AssetList-item.is-navigated:focus`, `.spectrum-AssetList-item.is-navigated:hover`.
Defaults to `var(--spectrum-assetlist-item-background-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-assetlist-item-background-color-selected": {
+ "value": "var(--spectrum-assetlist-item-background-color-selected)",
+ "description": "Used by `.spectrum-AssetList-item.is-selected`.
Defaults to `var(--spectrum-assetlist-item-background-color-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-assetlist-item-background-color-selected-hover": {
+ "value": "var(--spectrum-assetlist-item-background-color-selected-hover)",
+ "description": "Used by `.spectrum-AssetList-item.is-selected:focus`, `.spectrum-AssetList-item.is-selected:hover`.
Defaults to `var(--spectrum-assetlist-item-background-color-selected-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-assetlist-child-indicator-animation": {
+ "value": "var(--spectrum-assetlist-child-indicator-animation)",
+ "description": "Used by `.spectrum-AssetList-itemChildIndicator`.
Defaults to `var(--spectrum-assetlist-child-indicator-animation)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-assetlist-item-label-padding-inline-start": {
+ "value": "var(--spectrum-assetlist-item-label-padding-inline-start)",
+ "description": "Used by `.spectrum-AssetList-itemLabel`.
Defaults to `var(--spectrum-assetlist-item-label-padding-inline-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-assetlist-width": {
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-child-indicator-animation": {
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-itemChildIndicator`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-height": {
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item, .spectrum-AssetList-item:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-padding-inline-start": {
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-padding-inline-end": {
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-margin-block-end": {
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-border-radius": {
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item, .spectrum-AssetList-item:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-animation": {
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-font-size": {
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-font-weight": {
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-thumbnail-width": {
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item .spectrum-AssetList-itemThumbnail`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-thumbnail-height": {
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item .spectrum-AssetList-itemThumbnail`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-thumbnail-margin-inline-start": {
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item .spectrum-AssetList-itemThumbnail`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-label-padding-inline-start": {
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-itemLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-label-color": {
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-background-color-hover": {
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item.is-focused:focus-within, .spectrum-AssetList-item:focus-within:focus-visible`, `.spectrum-AssetList-item:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetlist-border-color-key-focus": {
+ "description": "Used by `.spectrum-AssetList-item.is-focused:focus-within:before, .spectrum-AssetList-item:focus-within:focus-visible:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-background-color-down": {
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item.is-navigated, .spectrum-AssetList-item.is-navigated:focus`, `.spectrum-AssetList-item.is-navigated:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-background-color-selected": {
+ "description": "Used by `.spectrum-AssetList-item.is-selected`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-background-color-selected-hover": {
+ "description": "Used by `.spectrum-AssetList-item.is-selected:focus`, `.spectrum-AssetList-item.is-selected:hover`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--system-asset-list-item-background-color-down`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--system-asset-list-item-background-color-hover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `--spectrum-assetlist-child-indicator-animation`, `--spectrum-assetlist-item-animation`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-600": {
+ "value": "40px",
+ "description": "Used by `--spectrum-assetlist-item-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `--spectrum-assetlist-item-padding-inline-start`, `--spectrum-assetlist-item-padding-inline-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-assetlist-item-margin-block-end`, `--spectrum-assetlist-item-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-assetlist-item-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-assetlist-item-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-400": {
+ "value": "24px",
+ "description": "Used by `--spectrum-assetlist-thumbnail-width`, `--spectrum-assetlist-thumbnail-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-assetlist-thumbnail-margin-inline-start`, `--spectrum-assetlist-item-label-padding-inline-start`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-assetlist-label-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-logical-rotation": {
+ "description": "Defined in `.spectrum-AssetList:dir(rtl), [dir=\"rtl\"] .spectrum-AssetList`.
Used by `.spectrum-AssetList-itemChildIndicator`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-asset-list-item-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-assetlist-item-background-color-down`.",
+ "control": "color"
+ },
+ "system-asset-list-item-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-assetlist-item-background-color-hover`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-assetlist-label-color": {
+ "value": "var(--mod-assetlist-label-color, var(--spectrum-assetlist-label-color))",
+ "description": "Defined in `.spectrum-AssetList-item`, `.spectrum-AssetList-item.is-navigated, .spectrum-AssetList-item.is-selected`, `.spectrum-AssetList-item:hover`.
Used by `.spectrum-AssetList-item`.
Defaults to `var(--mod-assetlist-label-color, var(--spectrum-assetlist-label-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-assetlist-item-background-color-hover": {
+ "value": "var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover))",
+ "description": "Defined in `.spectrum-AssetList-item`.
Used by `.spectrum-AssetList-item.is-focused:focus-within, .spectrum-AssetList-item:focus-within:focus-visible`, `.spectrum-AssetList-item:hover`.
Defaults to `var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-assetlist-border-color-key-focus": {
+ "value": "var(--mod-assetlist-border-color-key-focus, var(--spectrum-assetlist-border-color-key-focus))",
+ "description": "Defined in `.spectrum-AssetList-item`.
Used by `.spectrum-AssetList-item.is-focused:focus-within:before, .spectrum-AssetList-item:focus-within:focus-visible:before`.
Defaults to `var(--mod-assetlist-border-color-key-focus, var(--spectrum-assetlist-border-color-key-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-assetlist-item-background-color-selected": {
+ "value": "var(--mod-assetlist-item-background-color-selected, var(--spectrum-assetlist-item-background-color-selected))",
+ "description": "Defined in `.spectrum-AssetList-item`.
Used by `.spectrum-AssetList-item.is-selected`.
Defaults to `var(--mod-assetlist-item-background-color-selected, var(--spectrum-assetlist-item-background-color-selected))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-assetlist-item-background-color-selected-hover": {
+ "value": "var(--mod-assetlist-item-background-color-selected-hover, var(--spectrum-assetlist-item-background-color-selected-hover))",
+ "description": "Defined in `.spectrum-AssetList-item`.
Used by `.spectrum-AssetList-item.is-selected:focus`, `.spectrum-AssetList-item.is-selected:hover`.
Defaults to `var(--mod-assetlist-item-background-color-selected-hover, var(--spectrum-assetlist-item-background-color-selected-hover))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/assetlist/stories/assetlist.stories.js b/components/assetlist/stories/assetlist.stories.js
index d421267b95d..20b3a1f79f4 100644
--- a/components/assetlist/stories/assetlist.stories.js
+++ b/components/assetlist/stories/assetlist.stories.js
@@ -1,8 +1,10 @@
import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
+import { AssetListGroup } from "./assetlist.test.js";
+
+// Local assets to render the component styles and structure
import metadata from "../dist/metadata.json";
import packageJson from "../package.json";
-import { AssetListGroup } from "./assetlist.test.js";
/**
* A selectable list of assets, often used inside of miller columns.
@@ -22,6 +24,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/assetlist/stories/template.js b/components/assetlist/stories/template.js
index 96d8f75a80c..3a582198f14 100644
--- a/components/assetlist/stories/template.js
+++ b/components/assetlist/stories/template.js
@@ -45,10 +45,10 @@ export const AssetListItem = ({
customClasses: [`${rootClass}Selector`],
}, context)
)}
- ${when(image, () =>
+ ${when(image, () =>
html`
`
)}
- ${when(iconName, () =>
+ ${when(iconName, () =>
Icon({
iconName,
setName: iconSet,
@@ -76,9 +76,9 @@ export const AssetListItem = ({
export const Template = ({
rootClass = "spectrum-AssetList",
+ id = getRandomId("asset-list"),
items = [],
customClasses = [],
- id = getRandomId("assetlist"),
} = {}, context = {}) => {
return html`
Defaults to `var(--spectrum-avatar-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-avatar-block-size": {
+ "value": "var(--spectrum-avatar-block-size)",
+ "description": "Used by `.spectrum-Avatar`, `.spectrum-Avatar-image`.
Defaults to `var(--spectrum-avatar-block-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-avatar-border-radius": {
+ "value": "var(--spectrum-avatar-border-radius)",
+ "description": "Used by `.spectrum-Avatar`, `.spectrum-Avatar.is-focused:not(.is-disabled):after, .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`, `.spectrum-Avatar-image`.
Defaults to `var(--spectrum-avatar-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-avatar-color-opacity": {
+ "value": "var(--spectrum-avatar-color-opacity)",
+ "description": "Used by `.spectrum-Avatar`.
Defaults to `var(--spectrum-avatar-color-opacity)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-avatar-color-opacity-disabled": {
+ "value": "var(--spectrum-avatar-color-opacity-disabled)",
+ "description": "Used by `.spectrum-Avatar.is-disabled`.
Defaults to `var(--spectrum-avatar-color-opacity-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-avatar-focus-indicator-gap": {
+ "value": "var(--spectrum-avatar-focus-indicator-gap)",
+ "description": "Used by `.spectrum-Avatar.is-focused:not(.is-disabled):after, .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`.
Defaults to `var(--spectrum-avatar-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-avatar-focus-indicator-thickness": {
+ "value": "var(--spectrum-avatar-focus-indicator-thickness)",
+ "description": "Used by `.spectrum-Avatar.is-focused:not(.is-disabled):after, .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`.
Defaults to `var(--spectrum-avatar-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-avatar-focus-indicator-color": {
+ "value": "var(--spectrum-avatar-focus-indicator-color)",
+ "description": "Used by `.spectrum-Avatar.is-focused:not(.is-disabled):after, .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`.
Defaults to `var(--spectrum-avatar-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-avatar-color-opacity": {
+ "description": "Defined in `.spectrum-Avatar`.
Used by `.spectrum-Avatar`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-avatar-inline-size": {
+ "description": "Defined in `.spectrum-Avatar`, `.spectrum-Avatar--size50`, `.spectrum-Avatar--size75`, `.spectrum-Avatar--size100`, `.spectrum-Avatar--size200`, `.spectrum-Avatar--size300`, `.spectrum-Avatar--size400`, `.spectrum-Avatar--size500`, `.spectrum-Avatar--size600`, `.spectrum-Avatar--size700`.
Used by `.spectrum-Avatar`, `.spectrum-Avatar.is-focused:not(.is-disabled):after, .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`, `.spectrum-Avatar-image`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-block-size": {
+ "description": "Defined in `.spectrum-Avatar`, `.spectrum-Avatar--size50`, `.spectrum-Avatar--size75`, `.spectrum-Avatar--size100`, `.spectrum-Avatar--size200`, `.spectrum-Avatar--size300`, `.spectrum-Avatar--size400`, `.spectrum-Avatar--size500`, `.spectrum-Avatar--size600`, `.spectrum-Avatar--size700`.
Used by `--spectrum-avatar-border-radius`, `.spectrum-Avatar`, `.spectrum-Avatar-image`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-border-radius": {
+ "description": "Defined in `.spectrum-Avatar`.
Used by `.spectrum-Avatar`, `.spectrum-Avatar.is-focused:not(.is-disabled):after, .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`, `.spectrum-Avatar-image`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-focus-indicator-thickness": {
+ "description": "Defined in `.spectrum-Avatar`.
Used by `.spectrum-Avatar.is-focused:not(.is-disabled):after, .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-focus-indicator-gap": {
+ "description": "Defined in `.spectrum-Avatar`.
Used by `.spectrum-Avatar.is-focused:not(.is-disabled):after, .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-focus-indicator-color": {
+ "description": "Defined in `.spectrum-Avatar`.
Used by `.spectrum-Avatar.is-focused:not(.is-disabled):after, .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-avatar-color-opacity-disabled": {
+ "description": "Defined in `.spectrum-Avatar`.
Used by `.spectrum-Avatar.is-disabled`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-avatar-opacity-disabled": {
+ "value": "0.3",
+ "description": "Used by `--spectrum-avatar-color-opacity-disabled`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-50": {
+ "value": "16px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-75": {
+ "value": "18px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-200": {
+ "value": "22px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-300": {
+ "value": "26px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-400": {
+ "value": "28px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-500": {
+ "value": "32px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-600": {
+ "value": "36px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-700": {
+ "value": "40px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-avatar-focus-indicator-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-avatar-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-avatar-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-avatar-focus-indicator-color": {
+ "value": "var(--mod-avatar-focus-indicator-color, var(--spectrum-avatar-focus-indicator-color))",
+ "description": "Defined in `.spectrum-Avatar`.
Used by `.spectrum-Avatar.is-focused:not(.is-disabled):after, .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`.
Defaults to `var(--mod-avatar-focus-indicator-color, var(--spectrum-avatar-focus-indicator-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/avatar/stories/avatar.stories.js b/components/avatar/stories/avatar.stories.js
index 3ef54b07b71..afb955735b3 100644
--- a/components/avatar/stories/avatar.stories.js
+++ b/components/avatar/stories/avatar.stories.js
@@ -1,11 +1,13 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { AvatarGroup } from "./avatar.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* An image representing a user.
*/
@@ -59,6 +61,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/badge/dist/metadata.json b/components/badge/dist/metadata.json
index c8be859d830..64ffe083528 100644
--- a/components/badge/dist/metadata.json
+++ b/components/badge/dist/metadata.json
@@ -37,145 +37,775 @@
".spectrum-Badge-label:lang(ko)",
".spectrum-Badge-label:lang(zh)"
],
- "modifiers": [
- "--mod-badge-background-color-accent",
- "--mod-badge-background-color-blue",
- "--mod-badge-background-color-celery",
- "--mod-badge-background-color-chartreuse",
- "--mod-badge-background-color-cyan",
- "--mod-badge-background-color-default",
- "--mod-badge-background-color-fuchsia",
- "--mod-badge-background-color-gray",
- "--mod-badge-background-color-green",
- "--mod-badge-background-color-indigo",
- "--mod-badge-background-color-informative",
- "--mod-badge-background-color-magenta",
- "--mod-badge-background-color-negative",
- "--mod-badge-background-color-notice",
- "--mod-badge-background-color-orange",
- "--mod-badge-background-color-positive",
- "--mod-badge-background-color-purple",
- "--mod-badge-background-color-red",
- "--mod-badge-background-color-seafoam",
- "--mod-badge-background-color-yellow",
- "--mod-badge-corner-radius",
- "--mod-badge-font-size",
- "--mod-badge-height",
- "--mod-badge-icon-only-spacing-horizontal",
- "--mod-badge-icon-spacing-horizontal",
- "--mod-badge-icon-spacing-vertical-top",
- "--mod-badge-icon-text-spacing",
- "--mod-badge-label-icon-color",
- "--mod-badge-label-spacing-horizontal",
- "--mod-badge-label-spacing-vertical-bottom",
- "--mod-badge-label-spacing-vertical-top",
- "--mod-badge-line-height",
- "--mod-badge-line-height-cjk",
- "--mod-badge-workflow-icon-size"
- ],
- "component": [
- "--spectrum-badge-background-color-accent",
- "--spectrum-badge-background-color-blue",
- "--spectrum-badge-background-color-celery",
- "--spectrum-badge-background-color-chartreuse",
- "--spectrum-badge-background-color-cyan",
- "--spectrum-badge-background-color-default",
- "--spectrum-badge-background-color-fuchsia",
- "--spectrum-badge-background-color-gray",
- "--spectrum-badge-background-color-green",
- "--spectrum-badge-background-color-indigo",
- "--spectrum-badge-background-color-informative",
- "--spectrum-badge-background-color-magenta",
- "--spectrum-badge-background-color-negative",
- "--spectrum-badge-background-color-notice",
- "--spectrum-badge-background-color-orange",
- "--spectrum-badge-background-color-positive",
- "--spectrum-badge-background-color-purple",
- "--spectrum-badge-background-color-red",
- "--spectrum-badge-background-color-seafoam",
- "--spectrum-badge-background-color-yellow",
- "--spectrum-badge-corner-radius",
- "--spectrum-badge-font-size",
- "--spectrum-badge-height",
- "--spectrum-badge-icon-only-spacing-horizontal",
- "--spectrum-badge-icon-spacing-horizontal",
- "--spectrum-badge-icon-spacing-vertical-top",
- "--spectrum-badge-icon-text-spacing",
- "--spectrum-badge-label-icon-color",
- "--spectrum-badge-label-icon-color-primary",
- "--spectrum-badge-label-spacing-horizontal",
- "--spectrum-badge-label-spacing-vertical-bottom",
- "--spectrum-badge-label-spacing-vertical-top",
- "--spectrum-badge-line-height",
- "--spectrum-badge-line-height-cjk",
- "--spectrum-badge-workflow-icon-size"
- ],
- "global": [
- "--spectrum-accent-background-color-default",
- "--spectrum-black",
- "--spectrum-blue-background-color-default",
- "--spectrum-celery-background-color-default",
- "--spectrum-chartreuse-background-color-default",
- "--spectrum-cjk-line-height-100",
- "--spectrum-component-bottom-to-text-100",
- "--spectrum-component-bottom-to-text-200",
- "--spectrum-component-bottom-to-text-300",
- "--spectrum-component-bottom-to-text-75",
- "--spectrum-component-edge-to-text-100",
- "--spectrum-component-edge-to-text-200",
- "--spectrum-component-edge-to-text-300",
- "--spectrum-component-edge-to-text-75",
- "--spectrum-component-edge-to-visual-100",
- "--spectrum-component-edge-to-visual-200",
- "--spectrum-component-edge-to-visual-300",
- "--spectrum-component-edge-to-visual-75",
- "--spectrum-component-edge-to-visual-only-100",
- "--spectrum-component-edge-to-visual-only-200",
- "--spectrum-component-edge-to-visual-only-300",
- "--spectrum-component-edge-to-visual-only-75",
- "--spectrum-component-height-100",
- "--spectrum-component-height-75",
- "--spectrum-component-top-to-text-100",
- "--spectrum-component-top-to-text-200",
- "--spectrum-component-top-to-text-300",
- "--spectrum-component-top-to-text-75",
- "--spectrum-component-top-to-workflow-icon-100",
- "--spectrum-component-top-to-workflow-icon-200",
- "--spectrum-component-top-to-workflow-icon-300",
- "--spectrum-component-top-to-workflow-icon-75",
- "--spectrum-corner-radius-100",
- "--spectrum-cyan-background-color-default",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-300",
- "--spectrum-font-size-75",
- "--spectrum-fuchsia-background-color-default",
- "--spectrum-gray-background-color-default",
- "--spectrum-green-background-color-default",
- "--spectrum-indigo-background-color-default",
- "--spectrum-informative-background-color-default",
- "--spectrum-line-height-100",
- "--spectrum-magenta-background-color-default",
- "--spectrum-negative-background-color-default",
- "--spectrum-neutral-subdued-background-color-default",
- "--spectrum-notice-background-color-default",
- "--spectrum-orange-background-color-default",
- "--spectrum-positive-background-color-default",
- "--spectrum-purple-background-color-default",
- "--spectrum-red-background-color-default",
- "--spectrum-seafoam-background-color-default",
- "--spectrum-text-to-visual-100",
- "--spectrum-text-to-visual-200",
- "--spectrum-text-to-visual-300",
- "--spectrum-text-to-visual-75",
- "--spectrum-white",
- "--spectrum-workflow-icon-size-100",
- "--spectrum-workflow-icon-size-200",
- "--spectrum-workflow-icon-size-300",
- "--spectrum-workflow-icon-size-75",
- "--spectrum-yellow-background-color-default"
- ],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": ["--highcontrast-badge-border-color"]
+ "modifiers": {
+ "mod-badge-height": {
+ "value": "var(--spectrum-badge-height)",
+ "description": "Used by `.spectrum-Badge`.
Defaults to `var(--spectrum-badge-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-badge-corner-radius": {
+ "value": "var(--spectrum-badge-corner-radius)",
+ "description": "Used by `.spectrum-Badge`.
Defaults to `var(--spectrum-badge-corner-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-badge-label-icon-color": {
+ "value": "var(--spectrum-badge-label-icon-color)",
+ "description": "Used by `.spectrum-Badge`, `.spectrum-Badge-label`, `.spectrum-Badge-icon`.
Defaults to `var(--spectrum-badge-label-icon-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-default": {
+ "value": "var(--spectrum-badge-background-color-default)",
+ "description": "Used by `.spectrum-Badge, .spectrum-Badge--neutral`.
Defaults to `var(--spectrum-badge-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-accent": {
+ "value": "var(--spectrum-badge-background-color-accent)",
+ "description": "Used by `.spectrum-Badge--accent`.
Defaults to `var(--spectrum-badge-background-color-accent)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-informative": {
+ "value": "var(--spectrum-badge-background-color-informative)",
+ "description": "Used by `.spectrum-Badge--informative`.
Defaults to `var(--spectrum-badge-background-color-informative)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-negative": {
+ "value": "var(--spectrum-badge-background-color-negative)",
+ "description": "Used by `.spectrum-Badge--negative`.
Defaults to `var(--spectrum-badge-background-color-negative)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-positive": {
+ "value": "var(--spectrum-badge-background-color-positive)",
+ "description": "Used by `.spectrum-Badge--positive`.
Defaults to `var(--spectrum-badge-background-color-positive)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-notice": {
+ "value": "var(--spectrum-badge-background-color-notice)",
+ "description": "Used by `.spectrum-Badge--notice`.
Defaults to `var(--spectrum-badge-background-color-notice)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-gray": {
+ "value": "var(--spectrum-badge-background-color-gray)",
+ "description": "Used by `.spectrum-Badge--gray`.
Defaults to `var(--spectrum-badge-background-color-gray)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-red": {
+ "value": "var(--spectrum-badge-background-color-red)",
+ "description": "Used by `.spectrum-Badge--red`.
Defaults to `var(--spectrum-badge-background-color-red)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-orange": {
+ "value": "var(--spectrum-badge-background-color-orange)",
+ "description": "Used by `.spectrum-Badge--orange`.
Defaults to `var(--spectrum-badge-background-color-orange)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-yellow": {
+ "value": "var(--spectrum-badge-background-color-yellow)",
+ "description": "Used by `.spectrum-Badge--yellow`.
Defaults to `var(--spectrum-badge-background-color-yellow)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-chartreuse": {
+ "value": "var(--spectrum-badge-background-color-chartreuse)",
+ "description": "Used by `.spectrum-Badge--chartreuse`.
Defaults to `var(--spectrum-badge-background-color-chartreuse)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-celery": {
+ "value": "var(--spectrum-badge-background-color-celery)",
+ "description": "Used by `.spectrum-Badge--celery`.
Defaults to `var(--spectrum-badge-background-color-celery)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-green": {
+ "value": "var(--spectrum-badge-background-color-green)",
+ "description": "Used by `.spectrum-Badge--green`.
Defaults to `var(--spectrum-badge-background-color-green)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-seafoam": {
+ "value": "var(--spectrum-badge-background-color-seafoam)",
+ "description": "Used by `.spectrum-Badge--seafoam`.
Defaults to `var(--spectrum-badge-background-color-seafoam)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-cyan": {
+ "value": "var(--spectrum-badge-background-color-cyan)",
+ "description": "Used by `.spectrum-Badge--cyan`.
Defaults to `var(--spectrum-badge-background-color-cyan)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-blue": {
+ "value": "var(--spectrum-badge-background-color-blue)",
+ "description": "Used by `.spectrum-Badge--blue`.
Defaults to `var(--spectrum-badge-background-color-blue)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-indigo": {
+ "value": "var(--spectrum-badge-background-color-indigo)",
+ "description": "Used by `.spectrum-Badge--indigo`.
Defaults to `var(--spectrum-badge-background-color-indigo)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-purple": {
+ "value": "var(--spectrum-badge-background-color-purple)",
+ "description": "Used by `.spectrum-Badge--purple`.
Defaults to `var(--spectrum-badge-background-color-purple)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-fuchsia": {
+ "value": "var(--spectrum-badge-background-color-fuchsia)",
+ "description": "Used by `.spectrum-Badge--fuchsia`.
Defaults to `var(--spectrum-badge-background-color-fuchsia)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-magenta": {
+ "value": "var(--spectrum-badge-background-color-magenta)",
+ "description": "Used by `.spectrum-Badge--magenta`.
Defaults to `var(--spectrum-badge-background-color-magenta)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-font-size": {
+ "value": "var(--spectrum-badge-font-size)",
+ "description": "Used by `.spectrum-Badge-label`.
Defaults to `var(--spectrum-badge-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-badge-line-height": {
+ "value": "var(--spectrum-badge-line-height)",
+ "description": "Used by `.spectrum-Badge-label`.
Defaults to `var(--spectrum-badge-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-badge-label-spacing-horizontal": {
+ "value": "var(--spectrum-badge-label-spacing-horizontal)",
+ "description": "Used by `.spectrum-Badge-label`.
Defaults to `var(--spectrum-badge-label-spacing-horizontal)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-badge-label-spacing-vertical-top": {
+ "value": "var(--spectrum-badge-label-spacing-vertical-top)",
+ "description": "Used by `.spectrum-Badge-label`.
Defaults to `var(--spectrum-badge-label-spacing-vertical-top)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-badge-label-spacing-vertical-bottom": {
+ "value": "var(--spectrum-badge-label-spacing-vertical-bottom)",
+ "description": "Used by `.spectrum-Badge-label`.
Defaults to `var(--spectrum-badge-label-spacing-vertical-bottom)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-badge-line-height-cjk": {
+ "value": "var(--spectrum-badge-line-height-cjk)",
+ "description": "Used by `.spectrum-Badge-label:lang(ja), .spectrum-Badge-label:lang(ko), .spectrum-Badge-label:lang(zh)`.
Defaults to `var(--spectrum-badge-line-height-cjk)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-badge-workflow-icon-size": {
+ "value": "var(--spectrum-badge-workflow-icon-size)",
+ "description": "Used by `.spectrum-Badge-icon`.
Defaults to `var(--spectrum-badge-workflow-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-badge-icon-spacing-horizontal": {
+ "value": "var(--spectrum-badge-icon-spacing-horizontal)",
+ "description": "Used by `.spectrum-Badge-icon`.
Defaults to `var(--spectrum-badge-icon-spacing-horizontal)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-badge-icon-text-spacing": {
+ "value": "var(--spectrum-badge-icon-text-spacing)",
+ "description": "Used by `.spectrum-Badge-icon`.
Defaults to `var(--spectrum-badge-icon-text-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-badge-icon-spacing-vertical-top": {
+ "value": "var(--spectrum-badge-icon-spacing-vertical-top)",
+ "description": "Used by `.spectrum-Badge-icon`.
Defaults to `var(--spectrum-badge-icon-spacing-vertical-top)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-badge-icon-only-spacing-horizontal": {
+ "value": "var(--spectrum-badge-icon-only-spacing-horizontal)",
+ "description": "Used by `.spectrum-Badge-icon--no-label`.
Defaults to `var(--spectrum-badge-icon-only-spacing-horizontal)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-badge-corner-radius": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-line-height": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-line-height-cjk": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge-label:lang(ja), .spectrum-Badge-label:lang(ko), .spectrum-Badge-label:lang(zh)`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-label-icon-color": {
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--celery, .spectrum-Badge--chartreuse, .spectrum-Badge--orange, .spectrum-Badge--yellow`, `.spectrum-Badge--blue, .spectrum-Badge--cyan, .spectrum-Badge--fuchsia, .spectrum-Badge--gray, .spectrum-Badge--green, .spectrum-Badge--indigo, .spectrum-Badge--magenta, .spectrum-Badge--purple, .spectrum-Badge--red, .spectrum-Badge--seafoam`.
Used by `.spectrum-Badge`, `.spectrum-Badge-label`, `.spectrum-Badge-icon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-default": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge, .spectrum-Badge--neutral`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-accent": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--accent`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-informative": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--informative`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-negative": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--negative`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-positive": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--positive`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-notice": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--notice`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-gray": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--gray`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-red": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--red`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-orange": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--orange`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-yellow": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--yellow`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-chartreuse": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--chartreuse`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-celery": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--celery`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-green": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--green`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-seafoam": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--seafoam`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-cyan": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--cyan`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-blue": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--blue`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-indigo": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--indigo`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-purple": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--purple`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-fuchsia": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--fuchsia`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-magenta": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--magenta`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-height": {
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`.
Used by `.spectrum-Badge`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-font-size": {
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`.
Used by `.spectrum-Badge-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-label-spacing-vertical-top": {
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`.
Used by `.spectrum-Badge-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-label-spacing-vertical-bottom": {
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`.
Used by `.spectrum-Badge-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-label-spacing-horizontal": {
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`.
Used by `.spectrum-Badge-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-workflow-icon-size": {
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`.
Used by `.spectrum-Badge-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-icon-text-spacing": {
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`.
Used by `.spectrum-Badge-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-icon-spacing-horizontal": {
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`.
Used by `.spectrum-Badge-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-icon-spacing-vertical-top": {
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`.
Used by `.spectrum-Badge-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-icon-only-spacing-horizontal": {
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`.
Used by `.spectrum-Badge-icon--no-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-label-icon-color-primary": {
+ "description": "Used by `--spectrum-badge-label-icon-color`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-badge-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-badge-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-badge-line-height-cjk`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--spectrum-badge-label-icon-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-background-color-default": {
+ "value": "var(--spectrum-gray-500)",
+ "description": "Used by `--spectrum-badge-background-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-default": {
+ "value": "var(--spectrum-accent-color-800)",
+ "description": "Used by `--spectrum-badge-background-color-accent`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-informative-background-color-default": {
+ "value": "var(--spectrum-informative-color-800)",
+ "description": "Used by `--spectrum-badge-background-color-informative`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-background-color-default": {
+ "value": "var(--spectrum-negative-color-800)",
+ "description": "Used by `--spectrum-badge-background-color-negative`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-positive-background-color-default": {
+ "value": "var(--spectrum-positive-color-800)",
+ "description": "Used by `--spectrum-badge-background-color-positive`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-notice-background-color-default": {
+ "value": "var(--spectrum-notice-color-600)",
+ "description": "Used by `--spectrum-badge-background-color-notice`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-background-color-default": {
+ "value": "var(--spectrum-gray-500)",
+ "description": "Used by `--spectrum-badge-background-color-gray`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-red-background-color-default": {
+ "value": "var(--spectrum-red-800)",
+ "description": "Used by `--spectrum-badge-background-color-red`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-orange-background-color-default": {
+ "value": "var(--spectrum-orange-900)",
+ "description": "Used by `--spectrum-badge-background-color-orange`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-yellow-background-color-default": {
+ "value": "var(--spectrum-yellow-1100)",
+ "description": "Used by `--spectrum-badge-background-color-yellow`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-chartreuse-background-color-default": {
+ "value": "var(--spectrum-chartreuse-1000)",
+ "description": "Used by `--spectrum-badge-background-color-chartreuse`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-celery-background-color-default": {
+ "value": "var(--spectrum-celery-900)",
+ "description": "Used by `--spectrum-badge-background-color-celery`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-green-background-color-default": {
+ "value": "var(--spectrum-green-800)",
+ "description": "Used by `--spectrum-badge-background-color-green`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-seafoam-background-color-default": {
+ "value": "var(--spectrum-seafoam-800)",
+ "description": "Used by `--spectrum-badge-background-color-seafoam`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-cyan-background-color-default": {
+ "value": "var(--spectrum-cyan-800)",
+ "description": "Used by `--spectrum-badge-background-color-cyan`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-blue-background-color-default": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-badge-background-color-blue`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-indigo-background-color-default": {
+ "value": "var(--spectrum-indigo-800)",
+ "description": "Used by `--spectrum-badge-background-color-indigo`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-purple-background-color-default": {
+ "value": "var(--spectrum-purple-800)",
+ "description": "Used by `--spectrum-badge-background-color-purple`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-fuchsia-background-color-default": {
+ "value": "var(--spectrum-fuchsia-800)",
+ "description": "Used by `--spectrum-badge-background-color-fuchsia`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-magenta-background-color-default": {
+ "value": "var(--spectrum-magenta-800)",
+ "description": "Used by `--spectrum-badge-background-color-magenta`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-badge-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-badge-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-badge-label-spacing-vertical-top`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-100": {
+ "value": "9px",
+ "description": "Used by `--spectrum-badge-label-spacing-vertical-bottom`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-100": {
+ "value": "12px",
+ "description": "Used by `--spectrum-badge-label-spacing-horizontal`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-badge-workflow-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-badge-icon-text-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-100": {
+ "value": "10px",
+ "description": "Used by `--spectrum-badge-icon-spacing-horizontal`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-badge-icon-spacing-vertical-top`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-only-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-badge-icon-only-spacing-horizontal`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-black": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Used by `--spectrum-badge-label-icon-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-badge-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-badge-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-badge-label-spacing-vertical-top`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-badge-label-spacing-vertical-bottom`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-75": {
+ "value": "10px",
+ "description": "Used by `--spectrum-badge-label-spacing-horizontal`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-75": {
+ "value": "16px",
+ "description": "Used by `--spectrum-badge-workflow-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-badge-icon-text-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-75": {
+ "value": "8px",
+ "description": "Used by `--spectrum-badge-icon-spacing-horizontal`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-badge-icon-spacing-vertical-top`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-only-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-badge-icon-only-spacing-horizontal`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-badge-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-badge-label-spacing-vertical-top`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-200": {
+ "value": "11px",
+ "description": "Used by `--spectrum-badge-label-spacing-vertical-bottom`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-200": {
+ "value": "15px",
+ "description": "Used by `--spectrum-badge-label-spacing-horizontal`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-200": {
+ "value": "22px",
+ "description": "Used by `--spectrum-badge-workflow-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-200": {
+ "value": "7px",
+ "description": "Used by `--spectrum-badge-icon-text-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-200": {
+ "value": "13px",
+ "description": "Used by `--spectrum-badge-icon-spacing-horizontal`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-badge-icon-spacing-vertical-top`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-only-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-badge-icon-only-spacing-horizontal`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-badge-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-300": {
+ "value": "12px",
+ "description": "Used by `--spectrum-badge-label-spacing-vertical-top`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-badge-label-spacing-vertical-bottom`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-300": {
+ "value": "17px",
+ "description": "Used by `--spectrum-badge-label-spacing-horizontal`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-300": {
+ "value": "26px",
+ "description": "Used by `--spectrum-badge-workflow-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-300": {
+ "value": "8px",
+ "description": "Used by `--spectrum-badge-icon-text-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-badge-icon-spacing-horizontal`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-300": {
+ "value": "11px",
+ "description": "Used by `--spectrum-badge-icon-spacing-vertical-top`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-only-300": {
+ "value": "11px",
+ "description": "Used by `--spectrum-badge-icon-only-spacing-horizontal`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-badge-border-color": {
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge`.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/badge/stories/badge.stories.js b/components/badge/stories/badge.stories.js
index fb9961227a2..10def57b913 100644
--- a/components/badge/stories/badge.stories.js
+++ b/components/badge/stories/badge.stories.js
@@ -3,11 +3,13 @@ import { ArgGrid } from "@spectrum-css/preview/decorators";
import { Sizes } from "@spectrum-css/preview/decorators/utilities.js";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { BadgeGroup } from "./badge.test.js";
import { ContentOptions, Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* A badge element displays a small amount of color-categorized metadata; ideal for getting a user's attention. Some notes about badge:
* - Label and icon elements must be nested inside a parent container of class `.spectrum-Badge` in order to achieve the correct layout and wrapping behavior.
@@ -68,6 +70,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/breadcrumb/dist/metadata.json b/components/breadcrumb/dist/metadata.json
index 561253d9efa..69fc088a84e 100644
--- a/components/breadcrumb/dist/metadata.json
+++ b/components/breadcrumb/dist/metadata.json
@@ -18,14 +18,14 @@
".spectrum-Breadcrumbs-item",
".spectrum-Breadcrumbs-item > .spectrum-ActionButton",
".spectrum-Breadcrumbs-item > .spectrum-ActionButton:disabled",
- ".spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before",
".spectrum-Breadcrumbs-item:first-of-type > .spectrum-ActionButton",
".spectrum-Breadcrumbs-item:last-of-type",
".spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink",
".spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemSeparator",
+ ".spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before",
".spectrum-Breadcrumbs-itemLink",
- ".spectrum-Breadcrumbs-itemLink.is-disabled",
".spectrum-Breadcrumbs-itemLink:focus-visible:before",
+ ".spectrum-Breadcrumbs-itemLink.is-disabled",
".spectrum-Breadcrumbs-itemLink[aria-disabled=\"true\"]",
".spectrum-Breadcrumbs-itemLink[href]",
".spectrum-Breadcrumbs-itemLink[href]:focus-visible",
@@ -37,168 +37,876 @@
".spectrum-Breadcrumbs-itemSeparator:dir(rtl)",
"[dir=\"rtl\"] .spectrum-Breadcrumbs-itemSeparator"
],
- "modifiers": [
- "--mod-breadcrumbs-action-button-color",
- "--mod-breadcrumbs-action-button-color-disabled",
- "--mod-breadcrumbs-action-button-spacing-block",
- "--mod-breadcrumbs-action-button-spacing-block-between-multiline",
- "--mod-breadcrumbs-action-button-spacing-block-compact",
- "--mod-breadcrumbs-action-button-spacing-block-multiline",
- "--mod-breadcrumbs-action-button-spacing-inline",
- "--mod-breadcrumbs-action-button-spacing-inline-start",
- "--mod-breadcrumbs-block-size",
- "--mod-breadcrumbs-block-size-compact",
- "--mod-breadcrumbs-block-size-multiline",
- "--mod-breadcrumbs-focus-indicator-color",
- "--mod-breadcrumbs-focus-indicator-gap",
- "--mod-breadcrumbs-focus-indicator-thickness",
- "--mod-breadcrumbs-font-family",
- "--mod-breadcrumbs-font-family-compact",
- "--mod-breadcrumbs-font-family-compact-current",
- "--mod-breadcrumbs-font-family-current",
- "--mod-breadcrumbs-font-family-multiline",
- "--mod-breadcrumbs-font-family-multiline-current",
- "--mod-breadcrumbs-font-size",
- "--mod-breadcrumbs-font-size-compact",
- "--mod-breadcrumbs-font-size-compact-current",
- "--mod-breadcrumbs-font-size-current",
- "--mod-breadcrumbs-font-size-multiline",
- "--mod-breadcrumbs-font-size-multiline-current",
- "--mod-breadcrumbs-font-weight",
- "--mod-breadcrumbs-font-weight-compact",
- "--mod-breadcrumbs-font-weight-compact-current",
- "--mod-breadcrumbs-font-weight-current",
- "--mod-breadcrumbs-font-weight-multiline",
- "--mod-breadcrumbs-font-weight-multiline-current",
- "--mod-breadcrumbs-icon-spacing-block",
- "--mod-breadcrumbs-icon-spacing-block-between-multiline",
- "--mod-breadcrumbs-icon-spacing-block-compact",
- "--mod-breadcrumbs-icon-spacing-block-start-multiline",
- "--mod-breadcrumbs-inline-end",
- "--mod-breadcrumbs-inline-start",
- "--mod-breadcrumbs-item-link-border-radius",
- "--mod-breadcrumbs-line-height",
- "--mod-breadcrumbs-separator-color",
- "--mod-breadcrumbs-separator-spacing-inline",
- "--mod-breadcrumbs-text-color",
- "--mod-breadcrumbs-text-color-current",
- "--mod-breadcrumbs-text-color-disabled",
- "--mod-breadcrumbs-text-decoration-gap",
- "--mod-breadcrumbs-text-decoration-thickness",
- "--mod-breadcrumbs-text-spacing-block-between-multiline",
- "--mod-breadcrumbs-text-spacing-block-end",
- "--mod-breadcrumbs-text-spacing-block-end-compact",
- "--mod-breadcrumbs-text-spacing-block-end-multiline",
- "--mod-breadcrumbs-text-spacing-block-start",
- "--mod-breadcrumbs-text-spacing-block-start-compact",
- "--mod-breadcrumbs-text-spacing-block-start-multiline"
- ],
- "component": [
- "--spectrum-breadcrumbs-action-button-color",
- "--spectrum-breadcrumbs-action-button-color-disabled",
- "--spectrum-breadcrumbs-action-button-spacing-block",
- "--spectrum-breadcrumbs-action-button-spacing-block-between-multiline",
- "--spectrum-breadcrumbs-action-button-spacing-block-compact",
- "--spectrum-breadcrumbs-action-button-spacing-block-multiline",
- "--spectrum-breadcrumbs-action-button-spacing-inline",
- "--spectrum-breadcrumbs-action-button-spacing-inline-start",
- "--spectrum-breadcrumbs-block-size",
- "--spectrum-breadcrumbs-block-size-compact",
- "--spectrum-breadcrumbs-block-size-multiline",
- "--spectrum-breadcrumbs-bottom-to-text",
- "--spectrum-breadcrumbs-bottom-to-text-compact",
- "--spectrum-breadcrumbs-bottom-to-text-multiline",
- "--spectrum-breadcrumbs-end-edge-to-text",
- "--spectrum-breadcrumbs-focus-indicator-color",
- "--spectrum-breadcrumbs-focus-indicator-gap",
- "--spectrum-breadcrumbs-focus-indicator-thickness",
- "--spectrum-breadcrumbs-font-family",
- "--spectrum-breadcrumbs-font-family-compact",
- "--spectrum-breadcrumbs-font-family-compact-current",
- "--spectrum-breadcrumbs-font-family-current",
- "--spectrum-breadcrumbs-font-family-multiline",
- "--spectrum-breadcrumbs-font-family-multiline-current",
- "--spectrum-breadcrumbs-font-size",
- "--spectrum-breadcrumbs-font-size-compact",
- "--spectrum-breadcrumbs-font-size-compact-current",
- "--spectrum-breadcrumbs-font-size-current",
- "--spectrum-breadcrumbs-font-size-multiline",
- "--spectrum-breadcrumbs-font-size-multiline-current",
- "--spectrum-breadcrumbs-font-weight",
- "--spectrum-breadcrumbs-font-weight-compact",
- "--spectrum-breadcrumbs-font-weight-compact-current",
- "--spectrum-breadcrumbs-font-weight-current",
- "--spectrum-breadcrumbs-font-weight-multiline",
- "--spectrum-breadcrumbs-font-weight-multiline-current",
- "--spectrum-breadcrumbs-height",
- "--spectrum-breadcrumbs-height-compact",
- "--spectrum-breadcrumbs-height-multiline",
- "--spectrum-breadcrumbs-icon-spacing-block",
- "--spectrum-breadcrumbs-icon-spacing-block-between-multiline",
- "--spectrum-breadcrumbs-icon-spacing-block-compact",
- "--spectrum-breadcrumbs-icon-spacing-block-start-multiline",
- "--spectrum-breadcrumbs-inline-end",
- "--spectrum-breadcrumbs-inline-start",
- "--spectrum-breadcrumbs-item-link-border-radius",
- "--spectrum-breadcrumbs-line-height",
- "--spectrum-breadcrumbs-separator-color",
- "--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline",
- "--spectrum-breadcrumbs-separator-spacing-inline",
- "--spectrum-breadcrumbs-start-edge-to-text",
- "--spectrum-breadcrumbs-start-edge-to-truncated-menu",
- "--spectrum-breadcrumbs-text-color",
- "--spectrum-breadcrumbs-text-color-current",
- "--spectrum-breadcrumbs-text-color-disabled",
- "--spectrum-breadcrumbs-text-decoration-gap",
- "--spectrum-breadcrumbs-text-decoration-thickness",
- "--spectrum-breadcrumbs-text-spacing-block-between-multiline",
- "--spectrum-breadcrumbs-text-spacing-block-end",
- "--spectrum-breadcrumbs-text-spacing-block-end-compact",
- "--spectrum-breadcrumbs-text-spacing-block-end-multiline",
- "--spectrum-breadcrumbs-text-spacing-block-start",
- "--spectrum-breadcrumbs-text-spacing-block-start-compact",
- "--spectrum-breadcrumbs-text-spacing-block-start-multiline",
- "--spectrum-breadcrumbs-top-text-to-bottom-text",
- "--spectrum-breadcrumbs-top-to-separator-icon",
- "--spectrum-breadcrumbs-top-to-separator-icon-compact",
- "--spectrum-breadcrumbs-top-to-separator-icon-multiline",
- "--spectrum-breadcrumbs-top-to-text",
- "--spectrum-breadcrumbs-top-to-text-compact",
- "--spectrum-breadcrumbs-top-to-text-multiline",
- "--spectrum-breadcrumbs-top-to-truncated-menu",
- "--spectrum-breadcrumbs-top-to-truncated-menu-compact",
- "--spectrum-breadcrumbs-truncated-menu-to-bottom-text",
- "--spectrum-breadcrumbs-truncated-menu-to-separator-icon"
- ],
- "global": [
- "--spectrum-bold-font-weight",
- "--spectrum-corner-radius-100",
- "--spectrum-disabled-content-color",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-300",
- "--spectrum-font-size-75",
- "--spectrum-line-height-100",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-subdued-content-color-default",
- "--spectrum-regular-font-weight",
- "--spectrum-sans-font-family-stack",
- "--spectrum-text-to-visual-100",
- "--spectrum-text-underline-gap",
- "--spectrum-text-underline-thickness"
- ],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-breadcrumbs-action-button-color",
- "--highcontrast-breadcrumbs-action-button-color-disabled",
- "--highcontrast-breadcrumbs-focus-indicator-color",
- "--highcontrast-breadcrumbs-separator-color",
- "--highcontrast-breadcrumbs-text-color",
- "--highcontrast-breadcrumbs-text-color-current",
- "--highcontrast-breadcrumbs-text-color-disabled"
- ]
+ "modifiers": {
+ "mod-breadcrumbs-inline-start": {
+ "value": "var(--spectrum-breadcrumbs-inline-start)",
+ "description": "Used by `.spectrum-Breadcrumbs`.
Defaults to `var(--spectrum-breadcrumbs-inline-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-inline-end": {
+ "value": "var(--spectrum-breadcrumbs-inline-end)",
+ "description": "Used by `.spectrum-Breadcrumbs`.
Defaults to `var(--spectrum-breadcrumbs-inline-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-block-size": {
+ "value": "var(--spectrum-breadcrumbs-block-size)",
+ "description": "Used by `.spectrum-Breadcrumbs`.
Defaults to `var(--spectrum-breadcrumbs-block-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-block-size-compact": {
+ "value": "var(--spectrum-breadcrumbs-block-size-compact)",
+ "description": "Used by `.spectrum-Breadcrumbs--compact`.
Defaults to `var(--spectrum-breadcrumbs-block-size-compact)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-block-size-multiline": {
+ "value": "var(--spectrum-breadcrumbs-block-size-multiline)",
+ "description": "Used by `.spectrum-Breadcrumbs--multiline`.
Defaults to `var(--spectrum-breadcrumbs-block-size-multiline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-icon-spacing-block": {
+ "value": "var(--spectrum-breadcrumbs-icon-spacing-block)",
+ "description": "Used by `.spectrum-Breadcrumbs-itemSeparator`.
Defaults to `var(--spectrum-breadcrumbs-icon-spacing-block)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-separator-spacing-inline": {
+ "value": "var(--spectrum-breadcrumbs-separator-spacing-inline)",
+ "description": "Used by `.spectrum-Breadcrumbs-itemSeparator`.
Defaults to `var(--spectrum-breadcrumbs-separator-spacing-inline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-separator-color": {
+ "value": "var(--spectrum-breadcrumbs-separator-color)",
+ "description": "Used by `.spectrum-Breadcrumbs-itemSeparator`.
Defaults to `var(--spectrum-breadcrumbs-separator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-icon-spacing-block-compact": {
+ "value": "var(--spectrum-breadcrumbs-icon-spacing-block-compact)",
+ "description": "Used by `.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-itemSeparator`.
Defaults to `var(--spectrum-breadcrumbs-icon-spacing-block-compact)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-icon-spacing-block-start-multiline": {
+ "value": "var(--spectrum-breadcrumbs-icon-spacing-block-start-multiline)",
+ "description": "Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-itemSeparator`.
Defaults to `var(--spectrum-breadcrumbs-icon-spacing-block-start-multiline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-icon-spacing-block-between-multiline": {
+ "value": "var(--spectrum-breadcrumbs-icon-spacing-block-between-multiline)",
+ "description": "Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-itemSeparator`.
Defaults to `var(--spectrum-breadcrumbs-icon-spacing-block-between-multiline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-font-family": {
+ "value": "var(--spectrum-breadcrumbs-font-family)",
+ "description": "Used by `.spectrum-Breadcrumbs-item`.
Defaults to `var(--spectrum-breadcrumbs-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-font-size": {
+ "value": "var(--spectrum-breadcrumbs-font-size)",
+ "description": "Used by `.spectrum-Breadcrumbs-item`.
Defaults to `var(--spectrum-breadcrumbs-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-font-weight": {
+ "value": "var(--spectrum-breadcrumbs-font-weight)",
+ "description": "Used by `.spectrum-Breadcrumbs-item`.
Defaults to `var(--spectrum-breadcrumbs-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-line-height": {
+ "value": "var(--spectrum-breadcrumbs-line-height)",
+ "description": "Used by `.spectrum-Breadcrumbs-item`.
Defaults to `var(--spectrum-breadcrumbs-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-font-family-compact": {
+ "value": "var(--spectrum-breadcrumbs-font-family-compact)",
+ "description": "Used by `.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item`.
Defaults to `var(--spectrum-breadcrumbs-font-family-compact)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-font-size-compact": {
+ "value": "var(--spectrum-breadcrumbs-font-size-compact)",
+ "description": "Used by `.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item`.
Defaults to `var(--spectrum-breadcrumbs-font-size-compact)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-font-weight-compact": {
+ "value": "var(--spectrum-breadcrumbs-font-weight-compact)",
+ "description": "Used by `.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item`.
Defaults to `var(--spectrum-breadcrumbs-font-weight-compact)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-action-button-spacing-block-compact": {
+ "value": "var(--spectrum-breadcrumbs-action-button-spacing-block-compact)",
+ "description": "Used by `.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item > .spectrum-ActionButton`.
Defaults to `var(--spectrum-breadcrumbs-action-button-spacing-block-compact)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-font-family-multiline": {
+ "value": "var(--spectrum-breadcrumbs-font-family-multiline)",
+ "description": "Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item`.
Defaults to `var(--spectrum-breadcrumbs-font-family-multiline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-font-size-multiline": {
+ "value": "var(--spectrum-breadcrumbs-font-size-multiline)",
+ "description": "Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item`.
Defaults to `var(--spectrum-breadcrumbs-font-size-multiline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-font-weight-multiline": {
+ "value": "var(--spectrum-breadcrumbs-font-weight-multiline)",
+ "description": "Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item`.
Defaults to `var(--spectrum-breadcrumbs-font-weight-multiline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-action-button-spacing-block-multiline": {
+ "value": "var(--spectrum-breadcrumbs-action-button-spacing-block-multiline)",
+ "description": "Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item > .spectrum-ActionButton`.
Defaults to `var(--spectrum-breadcrumbs-action-button-spacing-block-multiline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-action-button-spacing-block-between-multiline": {
+ "value": "var(--spectrum-breadcrumbs-action-button-spacing-block-between-multiline)",
+ "description": "Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item > .spectrum-ActionButton`.
Defaults to `var(--spectrum-breadcrumbs-action-button-spacing-block-between-multiline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-font-family-current": {
+ "value": "var(--spectrum-breadcrumbs-font-family-current)",
+ "description": "Used by `.spectrum-Breadcrumbs-item:last-of-type`.
Defaults to `var(--spectrum-breadcrumbs-font-family-current)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-font-size-current": {
+ "value": "var(--spectrum-breadcrumbs-font-size-current)",
+ "description": "Used by `.spectrum-Breadcrumbs-item:last-of-type`.
Defaults to `var(--spectrum-breadcrumbs-font-size-current)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-font-weight-current": {
+ "value": "var(--spectrum-breadcrumbs-font-weight-current)",
+ "description": "Used by `.spectrum-Breadcrumbs-item:last-of-type`.
Defaults to `var(--spectrum-breadcrumbs-font-weight-current)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-font-family-compact-current": {
+ "value": "var(--spectrum-breadcrumbs-font-family-compact-current)",
+ "description": "Used by `.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item:last-of-type`.
Defaults to `var(--spectrum-breadcrumbs-font-family-compact-current)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-font-size-compact-current": {
+ "value": "var(--spectrum-breadcrumbs-font-size-compact-current)",
+ "description": "Used by `.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item:last-of-type`.
Defaults to `var(--spectrum-breadcrumbs-font-size-compact-current)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-font-weight-compact-current": {
+ "value": "var(--spectrum-breadcrumbs-font-weight-compact-current)",
+ "description": "Used by `.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item:last-of-type`.
Defaults to `var(--spectrum-breadcrumbs-font-weight-compact-current)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-font-family-multiline-current": {
+ "value": "var(--spectrum-breadcrumbs-font-family-multiline-current)",
+ "description": "Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type`.
Defaults to `var(--spectrum-breadcrumbs-font-family-multiline-current)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-font-size-multiline-current": {
+ "value": "var(--spectrum-breadcrumbs-font-size-multiline-current)",
+ "description": "Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type`.
Defaults to `var(--spectrum-breadcrumbs-font-size-multiline-current)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-font-weight-multiline-current": {
+ "value": "var(--spectrum-breadcrumbs-font-weight-multiline-current)",
+ "description": "Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type`.
Defaults to `var(--spectrum-breadcrumbs-font-weight-multiline-current)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-text-spacing-block-end-multiline": {
+ "value": "var(--spectrum-breadcrumbs-text-spacing-block-end-multiline)",
+ "description": "Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink`.
Defaults to `var(--spectrum-breadcrumbs-text-spacing-block-end-multiline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-action-button-spacing-inline": {
+ "value": "var(--spectrum-breadcrumbs-action-button-spacing-inline)",
+ "description": "Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton`.
Defaults to `var(--spectrum-breadcrumbs-action-button-spacing-inline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-action-button-spacing-block": {
+ "value": "var(--spectrum-breadcrumbs-action-button-spacing-block)",
+ "description": "Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton`.
Defaults to `var(--spectrum-breadcrumbs-action-button-spacing-block)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-action-button-color": {
+ "value": "var(--spectrum-breadcrumbs-action-button-color)",
+ "description": "Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton`.
Defaults to `var(--spectrum-breadcrumbs-action-button-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-action-button-color-disabled": {
+ "value": "var(--spectrum-breadcrumbs-action-button-color-disabled)",
+ "description": "Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton:disabled`.
Defaults to `var(--spectrum-breadcrumbs-action-button-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-action-button-spacing-inline-start": {
+ "value": "var(--spectrum-breadcrumbs-action-button-spacing-inline-start)",
+ "description": "Used by `.spectrum-Breadcrumbs-item:first-of-type > .spectrum-ActionButton`.
Defaults to `var(--spectrum-breadcrumbs-action-button-spacing-inline-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-item-link-border-radius": {
+ "value": "var(--spectrum-breadcrumbs-item-link-border-radius)",
+ "description": "Used by `.spectrum-Breadcrumbs-itemLink`, `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before, .spectrum-Breadcrumbs-itemLink:focus-visible:before`.
Defaults to `var(--spectrum-breadcrumbs-item-link-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-text-color": {
+ "value": "var(--spectrum-breadcrumbs-text-color)",
+ "description": "Used by `.spectrum-Breadcrumbs-itemLink`.
Defaults to `var(--spectrum-breadcrumbs-text-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-text-spacing-block-start": {
+ "value": "var(--spectrum-breadcrumbs-text-spacing-block-start)",
+ "description": "Used by `.spectrum-Breadcrumbs-itemLink`.
Defaults to `var(--spectrum-breadcrumbs-text-spacing-block-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-text-spacing-block-end": {
+ "value": "var(--spectrum-breadcrumbs-text-spacing-block-end)",
+ "description": "Used by `.spectrum-Breadcrumbs-itemLink`.
Defaults to `var(--spectrum-breadcrumbs-text-spacing-block-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-text-color-disabled": {
+ "value": "var(--spectrum-breadcrumbs-text-color-disabled)",
+ "description": "Used by `.spectrum-Breadcrumbs-itemLink.is-disabled, .spectrum-Breadcrumbs-itemLink[aria-disabled=\"true\"]`.
Defaults to `var(--spectrum-breadcrumbs-text-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-text-color-current": {
+ "value": "var(--spectrum-breadcrumbs-text-color-current)",
+ "description": "Used by `.spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink`.
Defaults to `var(--spectrum-breadcrumbs-text-color-current)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-text-spacing-block-start-compact": {
+ "value": "var(--spectrum-breadcrumbs-text-spacing-block-start-compact)",
+ "description": "Used by `.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-itemLink`.
Defaults to `var(--spectrum-breadcrumbs-text-spacing-block-start-compact)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-text-spacing-block-end-compact": {
+ "value": "var(--spectrum-breadcrumbs-text-spacing-block-end-compact)",
+ "description": "Used by `.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-itemLink`.
Defaults to `var(--spectrum-breadcrumbs-text-spacing-block-end-compact)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-text-spacing-block-start-multiline": {
+ "value": "var(--spectrum-breadcrumbs-text-spacing-block-start-multiline)",
+ "description": "Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-itemLink`.
Defaults to `var(--spectrum-breadcrumbs-text-spacing-block-start-multiline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-text-spacing-block-between-multiline": {
+ "value": "var(--spectrum-breadcrumbs-text-spacing-block-between-multiline)",
+ "description": "Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-itemLink`.
Defaults to `var(--spectrum-breadcrumbs-text-spacing-block-between-multiline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-text-decoration-thickness": {
+ "value": "var(--spectrum-breadcrumbs-text-decoration-thickness)",
+ "description": "Used by `.spectrum-Breadcrumbs-itemLink[href]:focus-visible, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:focus-visible`, `.spectrum-Breadcrumbs-itemLink[href]:hover, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:hover`.
Defaults to `var(--spectrum-breadcrumbs-text-decoration-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-text-decoration-gap": {
+ "value": "var(--spectrum-breadcrumbs-text-decoration-gap)",
+ "description": "Used by `.spectrum-Breadcrumbs-itemLink[href]:focus-visible, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:focus-visible`, `.spectrum-Breadcrumbs-itemLink[href]:hover, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:hover`.
Defaults to `var(--spectrum-breadcrumbs-text-decoration-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-focus-indicator-gap": {
+ "value": "var(--spectrum-breadcrumbs-focus-indicator-gap)",
+ "description": "Used by `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before, .spectrum-Breadcrumbs-itemLink:focus-visible:before`.
Defaults to `var(--spectrum-breadcrumbs-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-focus-indicator-thickness": {
+ "value": "var(--spectrum-breadcrumbs-focus-indicator-thickness)",
+ "description": "Used by `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before, .spectrum-Breadcrumbs-itemLink:focus-visible:before`.
Defaults to `var(--spectrum-breadcrumbs-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-focus-indicator-color": {
+ "value": "var(--spectrum-breadcrumbs-focus-indicator-color)",
+ "description": "Used by `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before, .spectrum-Breadcrumbs-itemLink:focus-visible:before`.
Defaults to `var(--spectrum-breadcrumbs-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-breadcrumbs-block-size": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-height": {
+ "value": "var(--spectrum-component-height-300)",
+ "description": "Used by `--spectrum-breadcrumbs-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-block-size-compact": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--compact`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-height-compact": {
+ "value": "var(--spectrum-component-height-200)",
+ "description": "Used by `--spectrum-breadcrumbs-block-size-compact`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-block-size-multiline": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--multiline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-height-multiline": {
+ "value": "72px",
+ "description": "Used by `--spectrum-breadcrumbs-block-size-multiline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-line-height": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-size": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-family": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-weight": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-size-current": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item:last-of-type`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-family-current": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item:last-of-type`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-weight-current": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item:last-of-type`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-size-compact": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-family-compact": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-weight-compact": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-size-compact-current": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item:last-of-type`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-family-compact-current": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item:last-of-type`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-weight-compact-current": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item:last-of-type`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-size-multiline": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-family-multiline": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-weight-multiline": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-size-multiline-current": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-family-multiline-current": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-weight-multiline-current": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-decoration-thickness": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-itemLink[href]:focus-visible, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:focus-visible`, `.spectrum-Breadcrumbs-itemLink[href]:hover, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:hover`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-decoration-gap": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-itemLink[href]:focus-visible, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:focus-visible`, `.spectrum-Breadcrumbs-itemLink[href]:hover, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:hover`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-separator-spacing-inline": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-itemSeparator`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-spacing-block-start": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-top-to-text": {
+ "value": "13px",
+ "description": "Used by `--spectrum-breadcrumbs-text-spacing-block-start`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-spacing-block-end": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-bottom-to-text": {
+ "value": "15px",
+ "description": "Used by `--spectrum-breadcrumbs-text-spacing-block-end`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-icon-spacing-block": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-itemSeparator`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-top-to-separator-icon": {
+ "value": "19px",
+ "description": "Used by `--spectrum-breadcrumbs-icon-spacing-block`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-spacing-block-start-compact": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-top-to-text-compact": {
+ "value": "11px",
+ "description": "Used by `--spectrum-breadcrumbs-text-spacing-block-start-compact`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-spacing-block-end-compact": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-bottom-to-text-compact": {
+ "value": "12px",
+ "description": "Used by `--spectrum-breadcrumbs-text-spacing-block-end-compact`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-icon-spacing-block-compact": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-itemSeparator`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-top-to-separator-icon-compact": {
+ "value": "15px",
+ "description": "Used by `--spectrum-breadcrumbs-icon-spacing-block-compact`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-spacing-block-start-multiline": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-top-to-text-multiline": {
+ "value": "12px",
+ "description": "Used by `--spectrum-breadcrumbs-text-spacing-block-start-multiline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-spacing-block-end-multiline": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-bottom-to-text-multiline": {
+ "value": "9px",
+ "description": "Used by `--spectrum-breadcrumbs-text-spacing-block-end-multiline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-spacing-block-between-multiline": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-top-text-to-bottom-text": {
+ "value": "9px",
+ "description": "Used by `--spectrum-breadcrumbs-text-spacing-block-between-multiline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-icon-spacing-block-start-multiline": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-itemSeparator`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-top-to-separator-icon-multiline": {
+ "value": "15px",
+ "description": "Used by `--spectrum-breadcrumbs-icon-spacing-block-start-multiline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-icon-spacing-block-between-multiline": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-itemSeparator`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline": {
+ "value": "11px",
+ "description": "Used by `--spectrum-breadcrumbs-icon-spacing-block-between-multiline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-inline-start": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-start-edge-to-text": {
+ "value": "8px",
+ "description": "Used by `--spectrum-breadcrumbs-inline-start`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-inline-end": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-end-edge-to-text": {
+ "value": "0px",
+ "description": "Used by `--spectrum-breadcrumbs-inline-end`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-action-button-spacing-inline": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-truncated-menu-to-separator-icon": {
+ "value": "0px",
+ "description": "Used by `--spectrum-breadcrumbs-action-button-spacing-inline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-action-button-spacing-block": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-top-to-truncated-menu": {
+ "value": "8px",
+ "description": "Used by `--spectrum-breadcrumbs-action-button-spacing-block`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-action-button-spacing-block-compact": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item > .spectrum-ActionButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-top-to-truncated-menu-compact": {
+ "value": "4px",
+ "description": "Used by `--spectrum-breadcrumbs-action-button-spacing-block-compact`, `--spectrum-breadcrumbs-action-button-spacing-block-multiline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-action-button-spacing-inline-start": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item:first-of-type > .spectrum-ActionButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-start-edge-to-truncated-menu": {
+ "value": "0px",
+ "description": "Used by `--spectrum-breadcrumbs-action-button-spacing-inline-start`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-action-button-spacing-block-multiline": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item > .spectrum-ActionButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-action-button-spacing-block-between-multiline": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item > .spectrum-ActionButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-truncated-menu-to-bottom-text": {
+ "value": "0px",
+ "description": "Used by `--spectrum-breadcrumbs-action-button-spacing-block-between-multiline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-focus-indicator-thickness": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before, .spectrum-Breadcrumbs-itemLink:focus-visible:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-focus-indicator-gap": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before, .spectrum-Breadcrumbs-itemLink:focus-visible:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-item-link-border-radius": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-itemLink`, `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before, .spectrum-Breadcrumbs-itemLink:focus-visible:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-color": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-itemLink`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-color-current": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-color-disabled": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-itemLink.is-disabled, .spectrum-Breadcrumbs-itemLink[aria-disabled=\"true\"]`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-separator-color": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-itemSeparator`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-action-button-color": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-action-button-color-disabled": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton:disabled`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-focus-indicator-color": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before, .spectrum-Breadcrumbs-itemLink:focus-visible:before`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-breadcrumbs-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-breadcrumbs-font-size`, `--spectrum-breadcrumbs-font-size-current`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-breadcrumbs-font-family`, `--spectrum-breadcrumbs-font-family-current`, `--spectrum-breadcrumbs-font-family-compact`, `--spectrum-breadcrumbs-font-family-compact-current`, `--spectrum-breadcrumbs-font-family-multiline`, `--spectrum-breadcrumbs-font-family-multiline-current`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-breadcrumbs-font-weight`, `--spectrum-breadcrumbs-font-weight-compact`, `--spectrum-breadcrumbs-font-weight-multiline`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-bold-font-weight": {
+ "value": "700",
+ "description": "Used by `--spectrum-breadcrumbs-font-weight-current`, `--spectrum-breadcrumbs-font-weight-compact-current`, `--spectrum-breadcrumbs-font-weight-multiline-current`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-breadcrumbs-font-size-compact`, `--spectrum-breadcrumbs-font-size-compact-current`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-breadcrumbs-font-size-multiline`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-breadcrumbs-font-size-multiline-current`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-underline-thickness": {
+ "value": "1px",
+ "description": "Used by `--spectrum-breadcrumbs-text-decoration-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-underline-gap": {
+ "value": "1px",
+ "description": "Used by `--spectrum-breadcrumbs-text-decoration-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-breadcrumbs-separator-spacing-inline`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-breadcrumbs-focus-indicator-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-breadcrumbs-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-breadcrumbs-item-link-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Used by `--spectrum-breadcrumbs-text-color`, `--spectrum-breadcrumbs-action-button-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-breadcrumbs-text-color-current`, `--spectrum-breadcrumbs-separator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-breadcrumbs-text-color-disabled`, `--spectrum-breadcrumbs-action-button-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-breadcrumbs-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-breadcrumbs-text-color": {
+ "value": "var(--mod-breadcrumbs-text-color, var(--spectrum-breadcrumbs-text-color))",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-itemLink`.
Defaults to `var(--mod-breadcrumbs-text-color, var(--spectrum-breadcrumbs-text-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-breadcrumbs-text-color-current": {
+ "value": "var(--mod-breadcrumbs-text-color-current, var(--spectrum-breadcrumbs-text-color-current))",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink`.
Defaults to `var(--mod-breadcrumbs-text-color-current, var(--spectrum-breadcrumbs-text-color-current))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-breadcrumbs-text-color-disabled": {
+ "value": "var(--mod-breadcrumbs-text-color-disabled, var(--spectrum-breadcrumbs-text-color-disabled))",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-itemLink.is-disabled, .spectrum-Breadcrumbs-itemLink[aria-disabled=\"true\"]`.
Defaults to `var(--mod-breadcrumbs-text-color-disabled, var(--spectrum-breadcrumbs-text-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-breadcrumbs-separator-color": {
+ "value": "var(--mod-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color))",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-itemSeparator`.
Defaults to `var(--mod-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-breadcrumbs-action-button-color": {
+ "value": "var(--mod-breadcrumbs-action-button-color, var(--spectrum-breadcrumbs-action-button-color))",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton`.
Defaults to `var(--mod-breadcrumbs-action-button-color, var(--spectrum-breadcrumbs-action-button-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-breadcrumbs-action-button-color-disabled": {
+ "value": "var(--mod-breadcrumbs-action-button-color-disabled, var(--spectrum-breadcrumbs-action-button-color-disabled))",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton:disabled`.
Defaults to `var(--mod-breadcrumbs-action-button-color-disabled, var(--spectrum-breadcrumbs-action-button-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-breadcrumbs-focus-indicator-color": {
+ "value": "var(--mod-breadcrumbs-focus-indicator-color, var(--spectrum-breadcrumbs-focus-indicator-color))",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before, .spectrum-Breadcrumbs-itemLink:focus-visible:before`.
Defaults to `var(--mod-breadcrumbs-focus-indicator-color, var(--spectrum-breadcrumbs-focus-indicator-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/breadcrumb/stories/breadcrumb.stories.js b/components/breadcrumb/stories/breadcrumb.stories.js
index a25c76c285c..aa72177a618 100644
--- a/components/breadcrumb/stories/breadcrumb.stories.js
+++ b/components/breadcrumb/stories/breadcrumb.stories.js
@@ -1,10 +1,12 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDragged } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { BreadcrumbGroup } from "./breadcrumb.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* Breadcrumbs show hierarchy and navigational context for a user's location within an app.
*
@@ -47,6 +49,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/breadcrumb/stories/template.js b/components/breadcrumb/stories/template.js
index 3f0db2ad30b..1b85be2de9b 100644
--- a/components/breadcrumb/stories/template.js
+++ b/components/breadcrumb/stories/template.js
@@ -1,14 +1,81 @@
import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
+import { getRandomId, renderContent } from "@spectrum-css/preview/decorators";
import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+export const BreadcrumbItem = ({
+ rootClass = "spectrum-Breadcrumbs",
+ id = getRandomId("breadcrumb-item"),
+ label,
+ isDisabled,
+ isDragged,
+ iconName,
+ iconSet,
+ idx = 0,
+ totalItems = 1,
+} = {}, context = {}) => {
+ const isNotLastItem = idx < totalItems - 1;
+ return html`
+
+ ${when(iconName, () =>
+ ActionButton({
+ iconName,
+ iconSet,
+ isDisabled,
+ isQuiet: true,
+ customIconClasses: [`${rootClass}-folder`],
+ size: "m",
+ }, context)
+ )}
+ ${when(isNotLastItem,
+ () => html`
+
+ ${label}
+
+ `,
+ () => html`
+
+ ${label}
+
+ `
+ )}
+ ${when(isNotLastItem, () =>
+ Icon({
+ iconName: "ChevronRight100",
+ setName: "ui",
+ customClasses: [`${rootClass}-itemSeparator`],
+ }, context),
+ )}
+
+ `;
+};
+
export const Template = ({
rootClass = "spectrum-Breadcrumbs",
+ id = getRandomId("breadcrumbs"),
+ customStyles = {},
customClasses = [],
items = [],
variant,
@@ -22,63 +89,17 @@ export const Template = ({
[`${rootClass}--${variant}`]: typeof variant !== "undefined",
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
})}
+ id=${ifDefined(id)}
+ style=${styleMap(customStyles)}
>
- ${items.map((item, idx, arr) => {
- const { label, isDisabled, iconName, iconSet } = item;
- return html`
- ${when(
- iconName,
- () =>
- ActionButton(
- {
- iconName,
- iconSet,
- isDisabled,
- isQuiet: true,
- customIconClasses: [`${rootClass}-folder`],
- size: "m",
- },
- context,
- ),
- () =>
- when(
- idx !== arr.length - 1,
- () =>
- html`
- ${label}
-
`,
- () =>
- html`${label}`,
- ),
- )}
- ${when(idx !== arr.length - 1, () =>
- Icon(
- {
- iconName: "ChevronRight100",
- setName: "ui",
- customClasses: [`${rootClass}-itemSeparator`],
- },
- context,
- ),
- )}
- `;
+ ${renderContent(items, {
+ callback: BreadcrumbItem,
+ context,
+ args: {
+ rootClass,
+ isDragged,
+ totalItems: items.length,
+ },
})}
diff --git a/components/button/dist/metadata.json b/components/button/dist/metadata.json
index be9fdd8fe84..8ed2600fbe2 100644
--- a/components/button/dist/metadata.json
+++ b/components/button/dist/metadata.json
@@ -12,6 +12,14 @@
".spectrum-Button--sizeXL",
".spectrum-Button-label",
".spectrum-Button-label:empty",
+ ".spectrum-Button::-moz-focus-inner",
+ ".spectrum-Button:active",
+ ".spectrum-Button:after",
+ ".spectrum-Button:disabled",
+ ".spectrum-Button:focus",
+ ".spectrum-Button:focus-visible",
+ ".spectrum-Button:focus-visible:after",
+ ".spectrum-Button:hover",
".spectrum-Button.is-disabled",
".spectrum-Button.is-focused:after",
".spectrum-Button.is-pending",
@@ -47,368 +55,1760 @@
".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet",
".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary",
".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline",
- ".spectrum-Button::-moz-focus-inner",
- ".spectrum-Button:active",
- ".spectrum-Button:after",
- ".spectrum-Button:disabled",
- ".spectrum-Button:focus",
- ".spectrum-Button:focus-visible",
- ".spectrum-Button:focus-visible:after",
- ".spectrum-Button:hover",
".spectrum-Button[pending]",
".spectrum-Button[pending] .spectrum-Button-label",
".spectrum-Button[pending] .spectrum-Icon",
".spectrum-Button[pending] .spectrum-ProgressCircle",
"a.spectrum-Button"
],
- "modifiers": [
- "--mod-animation-duration-100",
- "--mod-bold-font-weight",
- "--mod-button-animation-duration",
- "--mod-button-background-color-default",
- "--mod-button-background-color-disabled",
- "--mod-button-background-color-down",
- "--mod-button-background-color-focus",
- "--mod-button-background-color-hover",
- "--mod-button-border-color-default",
- "--mod-button-border-color-disabled",
- "--mod-button-border-color-down",
- "--mod-button-border-color-focus",
- "--mod-button-border-color-hover",
- "--mod-button-border-radius",
- "--mod-button-border-width",
- "--mod-button-bottom-to-text",
- "--mod-button-content-color-default",
- "--mod-button-content-color-disabled",
- "--mod-button-content-color-down",
- "--mod-button-content-color-focus",
- "--mod-button-content-color-hover",
- "--mod-button-edge-to-text",
- "--mod-button-edge-to-visual",
- "--mod-button-edge-to-visual-only",
- "--mod-button-focus-indicator-gap",
- "--mod-button-focus-ring-border-radius",
- "--mod-button-focus-ring-color",
- "--mod-button-focus-ring-gap",
- "--mod-button-focus-ring-thickness",
- "--mod-button-font-family",
- "--mod-button-font-size",
- "--mod-button-height",
- "--mod-button-icon-margin-block-start",
- "--mod-button-line-height",
- "--mod-button-margin-block",
- "--mod-button-margin-left",
- "--mod-button-margin-right",
- "--mod-button-max-inline-size",
- "--mod-button-min-width",
- "--mod-button-padding-label-to-icon",
- "--mod-button-static-content-color",
- "--mod-button-text-align",
- "--mod-button-text-align-with-icon",
- "--mod-button-top-to-icon",
- "--mod-button-top-to-text",
- "--mod-focus-indicator-gap",
- "--mod-line-height-100",
- "--mod-sans-font-family-stack",
- "--mod-static-black-focus-indicator-color"
- ],
- "component": [
- "--spectrum-button-animation-duration",
- "--spectrum-button-background-color-default",
- "--spectrum-button-background-color-disabled",
- "--spectrum-button-background-color-down",
- "--spectrum-button-background-color-focus",
- "--spectrum-button-background-color-hover",
- "--spectrum-button-border-color-default",
- "--spectrum-button-border-color-disabled",
- "--spectrum-button-border-color-down",
- "--spectrum-button-border-color-focus",
- "--spectrum-button-border-color-hover",
- "--spectrum-button-border-radius",
- "--spectrum-button-border-width",
- "--spectrum-button-bottom-to-text",
- "--spectrum-button-bottom-to-text-extra-large",
- "--spectrum-button-bottom-to-text-large",
- "--spectrum-button-bottom-to-text-medium",
- "--spectrum-button-bottom-to-text-small",
- "--spectrum-button-content-color-default",
- "--spectrum-button-content-color-disabled",
- "--spectrum-button-content-color-down",
- "--spectrum-button-content-color-focus",
- "--spectrum-button-content-color-hover",
- "--spectrum-button-edge-to-text",
- "--spectrum-button-edge-to-visual",
- "--spectrum-button-edge-to-visual-only",
- "--spectrum-button-focus-indicator-color",
- "--spectrum-button-focus-ring-gap",
- "--spectrum-button-focus-ring-thickness",
- "--spectrum-button-font-size",
- "--spectrum-button-height",
- "--spectrum-button-intended-icon-size",
- "--spectrum-button-line-height",
- "--spectrum-button-min-width",
- "--spectrum-button-minimum-width-multiplier",
- "--spectrum-button-padding-label-to-icon",
- "--spectrum-button-sized-bottom-to-text",
- "--spectrum-button-sized-edge-to-text",
- "--spectrum-button-sized-edge-to-visual",
- "--spectrum-button-sized-edge-to-visual-only",
- "--spectrum-button-sized-font-size",
- "--spectrum-button-sized-height",
- "--spectrum-button-sized-padding-label-to-icon",
- "--spectrum-button-sized-top-to-icon",
- "--spectrum-button-sized-top-to-text",
- "--spectrum-button-top-to-icon",
- "--spectrum-button-top-to-text",
- "--spectrum-button-top-to-text-extra-large",
- "--spectrum-button-top-to-text-large",
- "--spectrum-button-top-to-text-medium",
- "--spectrum-button-top-to-text-small"
- ],
- "global": [
- "--spectrum-accent-background-color-default",
- "--spectrum-accent-background-color-down",
- "--spectrum-accent-background-color-hover",
- "--spectrum-accent-background-color-key-focus",
- "--spectrum-accent-color-1000",
- "--spectrum-accent-color-1100",
- "--spectrum-accent-color-200",
- "--spectrum-accent-color-300",
- "--spectrum-accent-color-900",
- "--spectrum-accent-content-color-default",
- "--spectrum-accent-content-color-down",
- "--spectrum-accent-content-color-hover",
- "--spectrum-accent-content-color-key-focus",
- "--spectrum-animation-duration-100",
- "--spectrum-black",
- "--spectrum-bold-font-weight",
- "--spectrum-border-width-200",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-75",
- "--spectrum-component-pill-edge-to-text-100",
- "--spectrum-component-pill-edge-to-text-200",
- "--spectrum-component-pill-edge-to-text-300",
- "--spectrum-component-pill-edge-to-text-75",
- "--spectrum-component-pill-edge-to-visual-100",
- "--spectrum-component-pill-edge-to-visual-200",
- "--spectrum-component-pill-edge-to-visual-300",
- "--spectrum-component-pill-edge-to-visual-75",
- "--spectrum-component-pill-edge-to-visual-only-100",
- "--spectrum-component-pill-edge-to-visual-only-200",
- "--spectrum-component-pill-edge-to-visual-only-300",
- "--spectrum-component-pill-edge-to-visual-only-75",
- "--spectrum-component-top-to-workflow-icon-100",
- "--spectrum-component-top-to-workflow-icon-200",
- "--spectrum-component-top-to-workflow-icon-300",
- "--spectrum-component-top-to-workflow-icon-75",
- "--spectrum-disabled-background-color",
- "--spectrum-disabled-border-color",
- "--spectrum-disabled-content-color",
- "--spectrum-disabled-static-black-background-color",
- "--spectrum-disabled-static-black-border-color",
- "--spectrum-disabled-static-black-content-color",
- "--spectrum-disabled-static-white-background-color",
- "--spectrum-disabled-static-white-border-color",
- "--spectrum-disabled-static-white-content-color",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-300",
- "--spectrum-font-size-75",
- "--spectrum-gray-100",
- "--spectrum-gray-200",
- "--spectrum-gray-25",
- "--spectrum-gray-300",
- "--spectrum-gray-400",
- "--spectrum-gray-50",
- "--spectrum-gray-500",
- "--spectrum-gray-600",
- "--spectrum-gray-800",
- "--spectrum-gray-900",
- "--spectrum-icon-block-size",
- "--spectrum-line-height-100",
- "--spectrum-negative-background-color-default",
- "--spectrum-negative-background-color-down",
- "--spectrum-negative-background-color-hover",
- "--spectrum-negative-background-color-key-focus",
- "--spectrum-negative-color-1000",
- "--spectrum-negative-color-1100",
- "--spectrum-negative-color-200",
- "--spectrum-negative-color-300",
- "--spectrum-negative-color-900",
- "--spectrum-negative-content-color-default",
- "--spectrum-negative-content-color-down",
- "--spectrum-negative-content-color-hover",
- "--spectrum-negative-content-color-key-focus",
- "--spectrum-neutral-background-color-default",
- "--spectrum-neutral-background-color-down",
- "--spectrum-neutral-background-color-hover",
- "--spectrum-neutral-background-color-key-focus",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-down",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-neutral-content-color-key-focus",
- "--spectrum-neutral-subdued-background-color-default",
- "--spectrum-neutral-subdued-background-color-down",
- "--spectrum-neutral-subdued-background-color-hover",
- "--spectrum-neutral-subdued-background-color-key-focus",
- "--spectrum-progress-circle-thickness-medium",
- "--spectrum-sans-font-family-stack",
- "--spectrum-static-black-focus-indicator-color",
- "--spectrum-static-white-focus-indicator-color",
- "--spectrum-text-to-visual-100",
- "--spectrum-text-to-visual-200",
- "--spectrum-text-to-visual-300",
- "--spectrum-text-to-visual-75",
- "--spectrum-transparent-black-100",
- "--spectrum-transparent-black-200",
- "--spectrum-transparent-black-25",
- "--spectrum-transparent-black-300",
- "--spectrum-transparent-black-400",
- "--spectrum-transparent-black-800",
- "--spectrum-transparent-black-900",
- "--spectrum-transparent-white-100",
- "--spectrum-transparent-white-200",
- "--spectrum-transparent-white-25",
- "--spectrum-transparent-white-300",
- "--spectrum-transparent-white-400",
- "--spectrum-transparent-white-800",
- "--spectrum-transparent-white-900",
- "--spectrum-white",
- "--spectrum-workflow-icon-size-100",
- "--spectrum-workflow-icon-size-200",
- "--spectrum-workflow-icon-size-300",
- "--spectrum-workflow-icon-size-75"
- ],
- "system-theme": [
- "--system-button-background-color-default",
- "--system-button-background-color-disabled",
- "--system-button-background-color-down",
- "--system-button-background-color-focus",
- "--system-button-background-color-hover",
- "--system-button-border-color-default",
- "--system-button-border-color-disabled",
- "--system-button-border-color-down",
- "--system-button-border-color-focus",
- "--system-button-border-color-hover",
- "--system-button-primary-content-color-default",
- "--system-button-primary-content-color-down",
- "--system-button-primary-content-color-focus",
- "--system-button-primary-content-color-hover",
- "--system-button-primary-outline-background-color-down",
- "--system-button-primary-outline-background-color-focus",
- "--system-button-primary-outline-background-color-hover",
- "--system-button-secondary-background-color-default",
- "--system-button-secondary-background-color-down",
- "--system-button-secondary-background-color-focus",
- "--system-button-secondary-background-color-hover",
- "--system-button-secondary-outline-background-color-down",
- "--system-button-secondary-outline-background-color-focus",
- "--system-button-secondary-outline-background-color-hover",
- "--system-button-secondary-outline-border-color-default",
- "--system-button-secondary-outline-border-color-down",
- "--system-button-selected-background-color-default",
- "--system-button-selected-background-color-down",
- "--system-button-selected-background-color-focus",
- "--system-button-selected-background-color-hover",
- "--system-button-static-black-background-color-default",
- "--system-button-static-black-background-color-down",
- "--system-button-static-black-background-color-focus",
- "--system-button-static-black-background-color-hover",
- "--system-button-static-black-content-color-default",
- "--system-button-static-black-content-color-down",
- "--system-button-static-black-content-color-focus",
- "--system-button-static-black-content-color-hover",
- "--system-button-static-black-outline-background-color-default",
- "--system-button-static-black-outline-background-color-down",
- "--system-button-static-black-outline-background-color-focus",
- "--system-button-static-black-outline-background-color-hover",
- "--system-button-static-black-outline-border-color-default",
- "--system-button-static-black-outline-border-color-down",
- "--system-button-static-black-outline-border-color-focus",
- "--system-button-static-black-outline-border-color-hover",
- "--system-button-static-black-outline-content-color-default",
- "--system-button-static-black-outline-content-color-down",
- "--system-button-static-black-outline-content-color-focus",
- "--system-button-static-black-outline-content-color-hover",
- "--system-button-static-black-secondary-background-color-default",
- "--system-button-static-black-secondary-background-color-down",
- "--system-button-static-black-secondary-background-color-focus",
- "--system-button-static-black-secondary-background-color-hover",
- "--system-button-static-black-secondary-content-color-default",
- "--system-button-static-black-secondary-content-color-down",
- "--system-button-static-black-secondary-content-color-focus",
- "--system-button-static-black-secondary-content-color-hover",
- "--system-button-static-black-secondary-outline-background-color-default",
- "--system-button-static-black-secondary-outline-background-color-down",
- "--system-button-static-black-secondary-outline-background-color-focus",
- "--system-button-static-black-secondary-outline-background-color-hover",
- "--system-button-static-black-secondary-outline-border-color-default",
- "--system-button-static-black-secondary-outline-border-color-down",
- "--system-button-static-black-secondary-outline-border-color-focus",
- "--system-button-static-black-secondary-outline-border-color-hover",
- "--system-button-static-white-background-color-default",
- "--system-button-static-white-background-color-down",
- "--system-button-static-white-background-color-focus",
- "--system-button-static-white-background-color-hover",
- "--system-button-static-white-content-color-default",
- "--system-button-static-white-content-color-down",
- "--system-button-static-white-content-color-focus",
- "--system-button-static-white-content-color-hover",
- "--system-button-static-white-outline-background-color-default",
- "--system-button-static-white-outline-background-color-down",
- "--system-button-static-white-outline-background-color-focus",
- "--system-button-static-white-outline-background-color-hover",
- "--system-button-static-white-outline-border-color-default",
- "--system-button-static-white-outline-border-color-down",
- "--system-button-static-white-outline-border-color-focus",
- "--system-button-static-white-outline-border-color-hover",
- "--system-button-static-white-outline-content-color-default",
- "--system-button-static-white-outline-content-color-down",
- "--system-button-static-white-outline-content-color-focus",
- "--system-button-static-white-outline-content-color-hover",
- "--system-button-static-white-secondary-background-color-default",
- "--system-button-static-white-secondary-background-color-down",
- "--system-button-static-white-secondary-background-color-focus",
- "--system-button-static-white-secondary-background-color-hover",
- "--system-button-static-white-secondary-content-color-default",
- "--system-button-static-white-secondary-content-color-down",
- "--system-button-static-white-secondary-content-color-focus",
- "--system-button-static-white-secondary-content-color-hover",
- "--system-button-static-white-secondary-outline-background-color-default",
- "--system-button-static-white-secondary-outline-background-color-down",
- "--system-button-static-white-secondary-outline-background-color-focus",
- "--system-button-static-white-secondary-outline-background-color-hover",
- "--system-button-static-white-secondary-outline-border-color-default",
- "--system-button-static-white-secondary-outline-border-color-down",
- "--system-button-static-white-secondary-outline-border-color-focus",
- "--system-button-static-white-secondary-outline-border-color-hover"
- ],
- "passthroughs": [
- "--mod-progress-circle-position",
- "--mod-progress-circle-thickness",
- "--mod-progress-circle-track-border-color",
- "--mod-progress-circle-track-border-color-over-background"
- ],
- "high-contrast": [
- "--highcontrast-button-background-color-default",
- "--highcontrast-button-background-color-disabled",
- "--highcontrast-button-background-color-down",
- "--highcontrast-button-background-color-focus",
- "--highcontrast-button-background-color-hover",
- "--highcontrast-button-border-color-default",
- "--highcontrast-button-border-color-disabled",
- "--highcontrast-button-border-color-down",
- "--highcontrast-button-border-color-focus",
- "--highcontrast-button-border-color-hover",
- "--highcontrast-button-content-color-default",
- "--highcontrast-button-content-color-disabled",
- "--highcontrast-button-content-color-down",
- "--highcontrast-button-content-color-focus",
- "--highcontrast-button-content-color-hover"
- ]
+ "modifiers": {
+ "mod-button-font-family": {
+ "value": "var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack))",
+ "description": "Used by `.spectrum-Button`.
Defaults to `var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sans-font-family-stack": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Used by `.spectrum-Button`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-line-height": {
+ "value": "var(--mod-line-height-100, var(--spectrum-line-height-100))",
+ "description": "Used by `.spectrum-Button`, `--spectrum-button-line-height`.
Defaults to `var(--mod-line-height-100, var(--spectrum-line-height-100))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-Button`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-animation-duration": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Used by `.spectrum-Button`, `.spectrum-Button:after`, `--spectrum-button-animation-duration`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-animation-duration-100": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Used by `.spectrum-Button`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `.spectrum-Button:after`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-focus-indicator-gap": {
+ "value": "var(--mod-button-focus-ring-gap, var(--spectrum-focus-indicator-gap))",
+ "description": "Used by `.spectrum-Button:focus-visible:after`, `--spectrum-button-focus-ring-gap`.
Defaults to `var(--mod-button-focus-ring-gap, var(--spectrum-focus-indicator-gap))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-content-color-default": {
+ "value": "var(--spectrum-button-content-color-default, inherit)",
+ "description": "Defined in `.spectrum-Button.spectrum-Button--staticBlack.is-selected, .spectrum-Button.spectrum-Button--staticWhite.is-selected`.
Used by `.spectrum-Button`.
Defaults to `var(--spectrum-button-content-color-default, inherit)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-button-static-content-color": {
+ "description": "Used by `--mod-button-content-color-default`, `--mod-button-content-color-hover`, `--mod-button-content-color-down`, `--mod-button-content-color-focus`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-button-content-color-hover": {
+ "value": "var(--spectrum-button-content-color-hover)",
+ "description": "Defined in `.spectrum-Button.spectrum-Button--staticBlack.is-selected, .spectrum-Button.spectrum-Button--staticWhite.is-selected`.
Used by `.spectrum-Button:hover`.
Defaults to `var(--spectrum-button-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-button-content-color-down": {
+ "value": "var(--spectrum-button-content-color-down)",
+ "description": "Defined in `.spectrum-Button.spectrum-Button--staticBlack.is-selected, .spectrum-Button.spectrum-Button--staticWhite.is-selected`.
Used by `.spectrum-Button:active`.
Defaults to `var(--spectrum-button-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-button-content-color-focus": {
+ "value": "var(--spectrum-button-content-color-focus)",
+ "description": "Defined in `.spectrum-Button.spectrum-Button--staticBlack.is-selected, .spectrum-Button.spectrum-Button--staticWhite.is-selected`.
Used by `.spectrum-Button:focus-visible`.
Defaults to `var(--spectrum-button-content-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-static-black-focus-indicator-color": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Used by `--spectrum-button-focus-indicator-color`.
Defaults to `var(--spectrum-static-black-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-button-height": {
+ "value": "var(--spectrum-button-sized-height)",
+ "description": "Used by `--spectrum-button-height`.
Defaults to `var(--spectrum-button-sized-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-min-width": {
+ "value": "calc(var(--spectrum-button-height) * var(--spectrum-button-minimum-width-multiplier))",
+ "description": "Used by `--spectrum-button-min-width`.
Defaults to `calc(var(--spectrum-button-height) * var(--spectrum-button-minimum-width-multiplier))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-font-size": {
+ "value": "var(--spectrum-button-sized-font-size)",
+ "description": "Used by `--spectrum-button-font-size`.
Defaults to `var(--spectrum-button-sized-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-padding-label-to-icon": {
+ "value": "var(--spectrum-button-sized-padding-label-to-icon)",
+ "description": "Used by `--spectrum-button-padding-label-to-icon`.
Defaults to `var(--spectrum-button-sized-padding-label-to-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-edge-to-visual": {
+ "value": "var(--spectrum-button-edge-to-visual)",
+ "description": "Used by `--spectrum-button-edge-to-visual`, `.spectrum-Button .spectrum-Icon`.
Defaults to `var(--spectrum-button-edge-to-visual)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-edge-to-visual-only": {
+ "value": "var(--spectrum-button-edge-to-visual-only)",
+ "description": "Used by `--spectrum-button-edge-to-visual-only`, `.spectrum-Button.spectrum-Button--iconOnly`.
Defaults to `var(--spectrum-button-edge-to-visual-only)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-edge-to-text": {
+ "value": "var(--spectrum-button-edge-to-text)",
+ "description": "Used by `--spectrum-button-edge-to-text`, `.spectrum-Button .spectrum-Icon`.
Defaults to `var(--spectrum-button-edge-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-top-to-text": {
+ "value": "var(--spectrum-button-sized-top-to-text)",
+ "description": "Used by `--spectrum-button-top-to-text`.
Defaults to `var(--spectrum-button-sized-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-bottom-to-text": {
+ "value": "var(--spectrum-button-sized-bottom-to-text)",
+ "description": "Used by `--spectrum-button-bottom-to-text`.
Defaults to `var(--spectrum-button-sized-bottom-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-top-to-icon": {
+ "value": "var(--spectrum-button-top-to-icon)",
+ "description": "Used by `--spectrum-button-top-to-icon`, `.spectrum-Button .spectrum-Icon`.
Defaults to `var(--spectrum-button-top-to-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-focus-ring-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-button-focus-ring-thickness`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-focus-ring-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-button-focus-indicator-color`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-button-border-width": {
+ "value": "var(--spectrum-button-border-width)",
+ "description": "Used by `--spectrum-button-border-width`, `.spectrum-Button .spectrum-Icon`, `.spectrum-Button.spectrum-Button--iconOnly`.
Defaults to `var(--spectrum-button-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-focus-ring-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-button-focus-ring-gap`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-border-radius": {
+ "value": "calc(var(--spectrum-button-height) / 2)",
+ "description": "Used by `--spectrum-button-border-radius`.
Defaults to `calc(var(--spectrum-button-height) / 2)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-bold-font-weight": {
+ "value": "700",
+ "description": "Used by `.spectrum-Button`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-max-inline-size": {
+ "description": "Used by `.spectrum-Button`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-margin-block": {
+ "description": "Used by `.spectrum-Button`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-margin-right": {
+ "description": "Used by `.spectrum-Button`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-margin-left": {
+ "description": "Used by `.spectrum-Button`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-background-color-default": {
+ "value": "var(--spectrum-button-background-color-default)",
+ "description": "Used by `.spectrum-Button`.
Defaults to `var(--spectrum-button-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-button-border-color-default": {
+ "value": "var(--spectrum-button-border-color-default)",
+ "description": "Used by `.spectrum-Button`.
Defaults to `var(--spectrum-button-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-button-focus-ring-border-radius": {
+ "value": "calc((var(--spectrum-button-focus-ring-gap) + var(--spectrum-button-border-width)) * -1)",
+ "description": "Used by `.spectrum-Button:after`.
Defaults to `calc((var(--spectrum-button-focus-ring-gap) + var(--spectrum-button-border-width)) * -1)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-background-color-focus": {
+ "value": "var(--spectrum-button-background-color-focus)",
+ "description": "Used by `.spectrum-Button:focus-visible`.
Defaults to `var(--spectrum-button-background-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-button-border-color-focus": {
+ "value": "var(--spectrum-button-border-color-focus)",
+ "description": "Used by `.spectrum-Button:focus-visible`.
Defaults to `var(--spectrum-button-border-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-button-background-color-down": {
+ "value": "var(--spectrum-button-background-color-down)",
+ "description": "Used by `.spectrum-Button:active`.
Defaults to `var(--spectrum-button-background-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-button-border-color-down": {
+ "value": "var(--spectrum-button-border-color-down)",
+ "description": "Used by `.spectrum-Button:active`.
Defaults to `var(--spectrum-button-border-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-button-background-color-hover": {
+ "value": "var(--spectrum-button-background-color-hover)",
+ "description": "Used by `.spectrum-Button:hover`.
Defaults to `var(--spectrum-button-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-button-border-color-hover": {
+ "value": "var(--spectrum-button-border-color-hover)",
+ "description": "Used by `.spectrum-Button:hover`.
Defaults to `var(--spectrum-button-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-button-background-color-disabled": {
+ "value": "var(--spectrum-button-background-color-disabled)",
+ "description": "Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`.
Defaults to `var(--spectrum-button-background-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-button-border-color-disabled": {
+ "value": "var(--spectrum-button-border-color-disabled)",
+ "description": "Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`.
Defaults to `var(--spectrum-button-border-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-button-content-color-disabled": {
+ "value": "var(--spectrum-button-content-color-disabled)",
+ "description": "Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`.
Defaults to `var(--spectrum-button-content-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-button-icon-margin-block-start": {
+ "value": "max(0px, calc(var(--spectrum-button-top-to-icon) - var(--spectrum-button-border-width) + var(--_icon-size-difference, 0px) / 2))",
+ "description": "Used by `.spectrum-Button .spectrum-Icon`.
Defaults to `max(0px, calc(var(--spectrum-button-top-to-icon) - var(--spectrum-button-border-width) + var(--_icon-size-difference, 0px) / 2))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-text-align-with-icon": {
+ "description": "Used by `.spectrum-Button .spectrum-Icon + .spectrum-Button-label`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-text-align": {
+ "description": "Used by `.spectrum-Button-label`.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-button-sized-height": {
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--spectrum-button-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-sized-font-size": {
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--spectrum-button-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-sized-edge-to-visual": {
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--spectrum-button-edge-to-visual`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-border-width": {
+ "description": "Defined in `.spectrum-Button`.
Used by `--spectrum-button-sized-edge-to-visual`, `--spectrum-button-sized-edge-to-text`, `.spectrum-Button`, `.spectrum-Button:after`, `.spectrum-Button .spectrum-Icon`, `.spectrum-Button.spectrum-Button--iconOnly`, `.spectrum-Button-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-sized-edge-to-visual-only": {
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--spectrum-button-edge-to-visual-only`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-sized-edge-to-text": {
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--spectrum-button-edge-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-sized-padding-label-to-icon": {
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--spectrum-button-padding-label-to-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-sized-top-to-text": {
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--spectrum-button-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-top-to-text-medium": {
+ "description": "Used by `--spectrum-button-sized-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-sized-bottom-to-text": {
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--spectrum-button-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-bottom-to-text-medium": {
+ "description": "Used by `--spectrum-button-sized-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-sized-top-to-icon": {
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--spectrum-button-top-to-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-intended-icon-size": {
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--_icon-size-difference`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-top-to-text-small": {
+ "description": "Used by `--spectrum-button-sized-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-bottom-to-text-small": {
+ "description": "Used by `--spectrum-button-sized-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-top-to-text-large": {
+ "description": "Used by `--spectrum-button-sized-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-bottom-to-text-large": {
+ "description": "Used by `--spectrum-button-sized-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-top-to-text-extra-large": {
+ "description": "Used by `--spectrum-button-sized-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-bottom-to-text-extra-large": {
+ "description": "Used by `--spectrum-button-sized-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-content-color-default": {
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`.
Used by `.spectrum-Button`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-content-color-hover": {
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`.
Used by `.spectrum-Button:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-content-color-down": {
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`.
Used by `.spectrum-Button:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-content-color-focus": {
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`.
Used by `.spectrum-Button:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-content-color-disabled": {
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`.
Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-border-color-default": {
+ "description": "Defined in `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--quiet, .spectrum-Button.spectrum-Button--staticBlack, .spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet`, `.spectrum-Button`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`.
Used by `.spectrum-Button`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-border-color-hover": {
+ "description": "Defined in `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--quiet, .spectrum-Button.spectrum-Button--staticBlack, .spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet`, `.spectrum-Button`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`.
Used by `.spectrum-Button:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-border-color-down": {
+ "description": "Defined in `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--quiet, .spectrum-Button.spectrum-Button--staticBlack, .spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet`, `.spectrum-Button`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`.
Used by `.spectrum-Button:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-border-color-focus": {
+ "description": "Defined in `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--quiet, .spectrum-Button.spectrum-Button--staticBlack, .spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet`, `.spectrum-Button`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`.
Used by `.spectrum-Button:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-background-color-disabled": {
+ "description": "Defined in `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--outline, .spectrum-Button.spectrum-Button--quiet`, `.spectrum-Button`.
Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-border-color-disabled": {
+ "description": "Defined in `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--quiet, .spectrum-Button.spectrum-Button--staticBlack, .spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticBlack.is-selected, .spectrum-Button.spectrum-Button--staticWhite.is-selected`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button`.
Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-background-color-default": {
+ "description": "Defined in `.spectrum-Button.is-selected.spectrum-Button--emphasized, .spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--outline, .spectrum-Button.spectrum-Button--quiet`, `.spectrum-Button`, `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`.
Used by `.spectrum-Button`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-background-color-hover": {
+ "description": "Defined in `.spectrum-Button.is-selected.spectrum-Button--emphasized, .spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--quiet`, `.spectrum-Button`, `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`.
Used by `.spectrum-Button:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-background-color-down": {
+ "description": "Defined in `.spectrum-Button.is-selected.spectrum-Button--emphasized, .spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--quiet`, `.spectrum-Button`, `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`.
Used by `.spectrum-Button:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-background-color-focus": {
+ "description": "Defined in `.spectrum-Button.is-selected.spectrum-Button--emphasized, .spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--quiet`, `.spectrum-Button`, `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`.
Used by `.spectrum-Button:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-focus-indicator-color": {
+ "description": "Defined in `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button`.
Used by `.spectrum-Button.is-focused:after, .spectrum-Button:focus-visible:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-height": {
+ "description": "Defined in `.spectrum-Button`.
Used by `--spectrum-button-min-width`, `--spectrum-button-border-radius`, `.spectrum-Button`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-min-width": {
+ "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-minimum-width-multiplier": {
+ "value": "2.25",
+ "description": "Used by `--spectrum-button-min-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-line-height": {
+ "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-font-size": {
+ "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-padding-label-to-icon": {
+ "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-edge-to-visual": {
+ "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button .spectrum-Icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-edge-to-visual-only": {
+ "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button.spectrum-Button--iconOnly`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-edge-to-text": {
+ "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button`, `.spectrum-Button .spectrum-Icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-top-to-text": {
+ "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-bottom-to-text": {
+ "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-top-to-icon": {
+ "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button .spectrum-Icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-focus-ring-thickness": {
+ "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button.is-focused:after, .spectrum-Button:focus-visible:after`, `.spectrum-Button:focus-visible:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-animation-duration": {
+ "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button`, `.spectrum-Button:after`, `.spectrum-Button .spectrum-Button-label, .spectrum-Button .spectrum-Icon`, `.spectrum-Button .spectrum-ProgressCircle`, `.spectrum-Button.is-pending .spectrum-Button-label, .spectrum-Button.is-pending .spectrum-Icon, .spectrum-Button[pending] .spectrum-Button-label, .spectrum-Button[pending] .spectrum-Icon`, `.spectrum-Button.is-pending .spectrum-ProgressCircle, .spectrum-Button[pending] .spectrum-ProgressCircle`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-focus-ring-gap": {
+ "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-border-radius": {
+ "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button`, `.spectrum-Button:after`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `.spectrum-Button`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-Button`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `.spectrum-Button`, `.spectrum-Button:after`, `--spectrum-button-animation-duration`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `.spectrum-Button:after`, `.spectrum-Button:focus-visible:after`, `--spectrum-button-focus-ring-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-50": {
+ "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))",
+ "description": "Used by `--system-button-background-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--system-button-background-color-hover`, `--system-button-background-color-focus`, `--system-button-primary-outline-background-color-hover`, `--system-button-primary-outline-background-color-down`, `--system-button-primary-outline-background-color-focus`, `--system-button-secondary-background-color-default`, `--system-button-secondary-outline-background-color-hover`, `--system-button-secondary-outline-background-color-down`, `--system-button-secondary-outline-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--system-button-background-color-down`, `--system-button-secondary-background-color-hover`, `--system-button-secondary-background-color-down`, `--system-button-secondary-background-color-focus`, `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-400": {
+ "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+ "description": "Used by `--system-button-border-color-default`, `--system-button-secondary-outline-border-color-down`, `--spectrum-button-background-color-down`, `--spectrum-button-border-color-hover`, `--spectrum-button-border-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-500": {
+ "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+ "description": "Used by `--system-button-border-color-hover`, `--system-button-border-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-600": {
+ "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+ "description": "Used by `--system-button-border-color-down`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-border-color": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Used by `--system-button-border-color-disabled`, `--spectrum-button-border-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-background-color-default": {
+ "value": "var(--spectrum-gray-500)",
+ "description": "Used by `--system-button-selected-background-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-background-color-hover": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--system-button-selected-background-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-background-color-down": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--system-button-selected-background-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-background-color-key-focus": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--system-button-selected-background-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--system-button-primary-content-color-default`, `--system-button-primary-content-color-hover`, `--system-button-primary-content-color-down`, `--system-button-primary-content-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-300": {
+ "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+ "description": "Used by `--system-button-secondary-outline-border-color-default`, `--spectrum-button-border-color-default`, `--spectrum-button-background-color-down`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-800": {
+ "value": "light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85))",
+ "description": "Used by `--system-button-static-white-background-color-default`, `--system-button-static-white-outline-content-color-default`, `--system-button-static-white-outline-border-color-default`, `--system-button-static-white-secondary-content-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-900": {
+ "value": "light-dark(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94))",
+ "description": "Used by `--system-button-static-white-background-color-hover`, `--system-button-static-white-background-color-down`, `--system-button-static-white-background-color-focus`, `--system-button-static-white-outline-content-color-hover`, `--system-button-static-white-outline-content-color-down`, `--system-button-static-white-outline-content-color-focus`, `--system-button-static-white-outline-border-color-hover`, `--system-button-static-white-outline-border-color-down`, `--system-button-static-white-outline-border-color-focus`, `--system-button-static-white-secondary-content-color-hover`, `--system-button-static-white-secondary-content-color-down`, `--system-button-static-white-secondary-content-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-black": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Used by `--system-button-static-white-content-color-default`, `--system-button-static-white-content-color-hover`, `--system-button-static-white-content-color-down`, `--system-button-static-white-content-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-25": {
+ "value": "light-dark(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0))",
+ "description": "Used by `--system-button-static-white-outline-background-color-default`, `--system-button-static-white-secondary-outline-background-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-100": {
+ "value": "light-dark(rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.11))",
+ "description": "Used by `--system-button-static-white-outline-background-color-hover`, `--system-button-static-white-outline-background-color-down`, `--system-button-static-white-outline-background-color-focus`, `--system-button-static-white-secondary-background-color-default`, `--system-button-static-white-secondary-outline-background-color-hover`, `--system-button-static-white-secondary-outline-background-color-down`, `--system-button-static-white-secondary-outline-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-200": {
+ "value": "light-dark(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14))",
+ "description": "Used by `--system-button-static-white-secondary-background-color-hover`, `--system-button-static-white-secondary-background-color-down`, `--system-button-static-white-secondary-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-300": {
+ "value": "light-dark(rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.17))",
+ "description": "Used by `--system-button-static-white-secondary-outline-border-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-400": {
+ "value": "light-dark(rgba(255, 255, 255, 0.21), rgba(255, 255, 255, 0.21))",
+ "description": "Used by `--system-button-static-white-secondary-outline-border-color-hover`, `--system-button-static-white-secondary-outline-border-color-down`, `--system-button-static-white-secondary-outline-border-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-800": {
+ "value": "light-dark(rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.84))",
+ "description": "Used by `--system-button-static-black-background-color-default`, `--system-button-static-black-outline-content-color-default`, `--system-button-static-black-outline-border-color-default`, `--system-button-static-black-secondary-content-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-900": {
+ "value": "light-dark(rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93))",
+ "description": "Used by `--system-button-static-black-background-color-hover`, `--system-button-static-black-background-color-down`, `--system-button-static-black-background-color-focus`, `--system-button-static-black-outline-content-color-hover`, `--system-button-static-black-outline-content-color-down`, `--system-button-static-black-outline-content-color-focus`, `--system-button-static-black-outline-border-color-hover`, `--system-button-static-black-outline-border-color-down`, `--system-button-static-black-outline-border-color-focus`, `--system-button-static-black-secondary-content-color-hover`, `--system-button-static-black-secondary-content-color-down`, `--system-button-static-black-secondary-content-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--system-button-static-black-content-color-default`, `--system-button-static-black-content-color-hover`, `--system-button-static-black-content-color-down`, `--system-button-static-black-content-color-focus`, `--spectrum-button-content-color-default`, `--spectrum-button-content-color-hover`, `--spectrum-button-content-color-down`, `--spectrum-button-content-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-25": {
+ "value": "light-dark(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0))",
+ "description": "Used by `--system-button-static-black-outline-background-color-default`, `--system-button-static-black-secondary-outline-background-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-100": {
+ "value": "light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.09))",
+ "description": "Used by `--system-button-static-black-outline-background-color-hover`, `--system-button-static-black-outline-background-color-down`, `--system-button-static-black-outline-background-color-focus`, `--system-button-static-black-secondary-background-color-default`, `--system-button-static-black-secondary-outline-background-color-hover`, `--system-button-static-black-secondary-outline-background-color-down`, `--system-button-static-black-secondary-outline-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-200": {
+ "value": "light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12))",
+ "description": "Used by `--system-button-static-black-secondary-background-color-hover`, `--system-button-static-black-secondary-background-color-down`, `--system-button-static-black-secondary-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-300": {
+ "value": "light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15))",
+ "description": "Used by `--system-button-static-black-secondary-outline-border-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-400": {
+ "value": "light-dark(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22))",
+ "description": "Used by `--system-button-static-black-secondary-outline-border-color-hover`, `--system-button-static-black-secondary-outline-border-color-down`, `--system-button-static-black-secondary-outline-border-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-button-sized-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-button-sized-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-visual-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-button-sized-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-visual-only-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-button-sized-edge-to-visual-only`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-text-100": {
+ "value": "16px",
+ "description": "Used by `--spectrum-button-sized-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-button-sized-padding-label-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-button-sized-top-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-button-intended-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-button-sized-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-button-sized-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-visual-75": {
+ "value": "11px",
+ "description": "Used by `--spectrum-button-sized-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-visual-only-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-button-sized-edge-to-visual-only`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-text-75": {
+ "value": "13px",
+ "description": "Used by `--spectrum-button-sized-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-button-sized-padding-label-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-button-sized-top-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-75": {
+ "value": "16px",
+ "description": "Used by `--spectrum-button-intended-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-button-sized-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-button-sized-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-visual-200": {
+ "value": "18px",
+ "description": "Used by `--spectrum-button-sized-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-visual-only-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-button-sized-edge-to-visual-only`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-text-200": {
+ "value": "20px",
+ "description": "Used by `--spectrum-button-sized-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-200": {
+ "value": "7px",
+ "description": "Used by `--spectrum-button-sized-padding-label-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-button-sized-top-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-200": {
+ "value": "22px",
+ "description": "Used by `--spectrum-button-intended-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-button-sized-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-button-sized-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-visual-300": {
+ "value": "20px",
+ "description": "Used by `--spectrum-button-sized-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-visual-only-300": {
+ "value": "11px",
+ "description": "Used by `--spectrum-button-sized-edge-to-visual-only`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-text-300": {
+ "value": "23px",
+ "description": "Used by `--spectrum-button-sized-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-300": {
+ "value": "8px",
+ "description": "Used by `--spectrum-button-sized-padding-label-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-300": {
+ "value": "11px",
+ "description": "Used by `--spectrum-button-sized-top-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-300": {
+ "value": "26px",
+ "description": "Used by `--spectrum-button-intended-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-button-content-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-button-content-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-button-content-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-button-content-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-button-content-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-background-color": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--spectrum-button-background-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-default": {
+ "value": "var(--spectrum-accent-color-800)",
+ "description": "Used by `--spectrum-button-background-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-hover": {
+ "value": "var(--spectrum-accent-color-700)",
+ "description": "Used by `--spectrum-button-background-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-down": {
+ "value": "var(--spectrum-accent-color-700)",
+ "description": "Used by `--spectrum-button-background-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-key-focus": {
+ "value": "var(--spectrum-accent-color-700)",
+ "description": "Used by `--spectrum-button-background-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-color-200": {
+ "value": "var(--spectrum-blue-200)",
+ "description": "Used by `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-color-300": {
+ "value": "var(--spectrum-blue-300)",
+ "description": "Used by `--spectrum-button-background-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-color-900": {
+ "value": "var(--spectrum-blue-900)",
+ "description": "Used by `--spectrum-button-border-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-color-1000": {
+ "value": "var(--spectrum-blue-1000)",
+ "description": "Used by `--spectrum-button-border-color-hover`, `--spectrum-button-border-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-color-1100": {
+ "value": "var(--spectrum-blue-1100)",
+ "description": "Used by `--spectrum-button-border-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-default": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--spectrum-button-content-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-hover": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-button-content-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-down": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-button-content-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-key-focus": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-button-content-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-background-color-default": {
+ "value": "var(--spectrum-negative-color-800)",
+ "description": "Used by `--spectrum-button-background-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-background-color-hover": {
+ "value": "var(--spectrum-negative-color-700)",
+ "description": "Used by `--spectrum-button-background-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-background-color-down": {
+ "value": "var(--spectrum-negative-color-700)",
+ "description": "Used by `--spectrum-button-background-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-background-color-key-focus": {
+ "value": "var(--spectrum-negative-color-700)",
+ "description": "Used by `--spectrum-button-background-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-color-200": {
+ "value": "var(--spectrum-red-200)",
+ "description": "Used by `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-color-300": {
+ "value": "var(--spectrum-red-300)",
+ "description": "Used by `--spectrum-button-background-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-color-900": {
+ "value": "var(--spectrum-red-900)",
+ "description": "Used by `--spectrum-button-border-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-color-1000": {
+ "value": "var(--spectrum-red-1000)",
+ "description": "Used by `--spectrum-button-border-color-hover`, `--spectrum-button-border-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-color-1100": {
+ "value": "var(--spectrum-red-1100)",
+ "description": "Used by `--spectrum-button-border-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-content-color-default": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Used by `--spectrum-button-content-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-content-color-hover": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--spectrum-button-content-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-content-color-down": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--spectrum-button-content-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-content-color-key-focus": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--spectrum-button-content-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-button-background-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-button-background-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-button-background-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-button-background-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-800": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Used by `--spectrum-button-border-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-900": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Used by `--spectrum-button-border-color-hover`, `--spectrum-button-border-color-down`, `--spectrum-button-border-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-white-content-color": {
+ "value": "var(--spectrum-transparent-white-400)",
+ "description": "Used by `--spectrum-button-content-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-white-background-color": {
+ "value": "var(--spectrum-transparent-white-100)",
+ "description": "Used by `--spectrum-button-background-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-static-white-focus-indicator-color": {
+ "value": "var(--spectrum-white)",
+ "description": "Used by `--spectrum-button-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-white-border-color": {
+ "value": "var(--spectrum-transparent-white-300)",
+ "description": "Used by `--spectrum-button-border-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-black-content-color": {
+ "value": "var(--spectrum-transparent-black-400)",
+ "description": "Used by `--spectrum-button-content-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-black-background-color": {
+ "value": "var(--spectrum-transparent-black-100)",
+ "description": "Used by `--spectrum-button-background-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-static-black-focus-indicator-color": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Used by `--spectrum-button-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-black-border-color": {
+ "value": "var(--spectrum-transparent-black-300)",
+ "description": "Used by `--spectrum-button-border-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-button-focus-ring-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-button-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-button-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-bold-font-weight": {
+ "value": "700",
+ "description": "Used by `.spectrum-Button`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-icon-block-size": {
+ "value": "var(--spectrum-button-intended-icon-size)",
+ "description": "Used by `--_icon-size-difference`.
Defaults to `var(--spectrum-button-intended-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-progress-circle-thickness-medium": {
+ "value": "3px",
+ "description": "Used by `--mod-progress-circle-thickness`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-button-background-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.",
+ "control": "color"
+ },
+ "system-button-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.",
+ "control": "color"
+ },
+ "system-button-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.",
+ "control": "color"
+ },
+ "system-button-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.",
+ "control": "color"
+ },
+ "system-button-border-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-default`.",
+ "control": "color"
+ },
+ "system-button-border-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-hover`.",
+ "control": "color"
+ },
+ "system-button-border-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-down`.",
+ "control": "color"
+ },
+ "system-button-border-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-focus`.",
+ "control": "color"
+ },
+ "system-button-background-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-disabled`.",
+ "control": "color"
+ },
+ "system-button-border-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-disabled`.",
+ "control": "color"
+ },
+ "system-button-selected-background-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.",
+ "control": "color"
+ },
+ "system-button-selected-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.",
+ "control": "color"
+ },
+ "system-button-selected-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.",
+ "control": "color"
+ },
+ "system-button-selected-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.",
+ "control": "color"
+ },
+ "system-button-primary-content-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-default`.",
+ "control": "color"
+ },
+ "system-button-primary-content-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-hover`.",
+ "control": "color"
+ },
+ "system-button-primary-content-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-down`.",
+ "control": "color"
+ },
+ "system-button-primary-content-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-focus`.",
+ "control": "color"
+ },
+ "system-button-primary-outline-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.",
+ "control": "color"
+ },
+ "system-button-primary-outline-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.",
+ "control": "color"
+ },
+ "system-button-primary-outline-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.",
+ "control": "color"
+ },
+ "system-button-secondary-background-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.",
+ "control": "color"
+ },
+ "system-button-secondary-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.",
+ "control": "color"
+ },
+ "system-button-secondary-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.",
+ "control": "color"
+ },
+ "system-button-secondary-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.",
+ "control": "color"
+ },
+ "system-button-secondary-outline-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.",
+ "control": "color"
+ },
+ "system-button-secondary-outline-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.",
+ "control": "color"
+ },
+ "system-button-secondary-outline-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.",
+ "control": "color"
+ },
+ "system-button-secondary-outline-border-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-default`.",
+ "control": "color"
+ },
+ "system-button-secondary-outline-border-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-down`.",
+ "control": "color"
+ },
+ "system-button-static-white-background-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.",
+ "control": "color"
+ },
+ "system-button-static-white-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.",
+ "control": "color"
+ },
+ "system-button-static-white-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.",
+ "control": "color"
+ },
+ "system-button-static-white-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.",
+ "control": "color"
+ },
+ "system-button-static-white-content-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-default`.",
+ "control": "color"
+ },
+ "system-button-static-white-content-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-hover`.",
+ "control": "color"
+ },
+ "system-button-static-white-content-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-down`.",
+ "control": "color"
+ },
+ "system-button-static-white-content-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-focus`.",
+ "control": "color"
+ },
+ "system-button-static-white-outline-background-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.",
+ "control": "color"
+ },
+ "system-button-static-white-outline-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.",
+ "control": "color"
+ },
+ "system-button-static-white-outline-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.",
+ "control": "color"
+ },
+ "system-button-static-white-outline-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.",
+ "control": "color"
+ },
+ "system-button-static-white-outline-content-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-default`.",
+ "control": "color"
+ },
+ "system-button-static-white-outline-content-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-hover`.",
+ "control": "color"
+ },
+ "system-button-static-white-outline-content-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-down`.",
+ "control": "color"
+ },
+ "system-button-static-white-outline-content-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-focus`.",
+ "control": "color"
+ },
+ "system-button-static-white-outline-border-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-default`.",
+ "control": "color"
+ },
+ "system-button-static-white-outline-border-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-hover`.",
+ "control": "color"
+ },
+ "system-button-static-white-outline-border-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-down`.",
+ "control": "color"
+ },
+ "system-button-static-white-outline-border-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-focus`.",
+ "control": "color"
+ },
+ "system-button-static-white-secondary-background-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.",
+ "control": "color"
+ },
+ "system-button-static-white-secondary-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.",
+ "control": "color"
+ },
+ "system-button-static-white-secondary-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.",
+ "control": "color"
+ },
+ "system-button-static-white-secondary-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.",
+ "control": "color"
+ },
+ "system-button-static-white-secondary-content-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-default`.",
+ "control": "color"
+ },
+ "system-button-static-white-secondary-content-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-hover`.",
+ "control": "color"
+ },
+ "system-button-static-white-secondary-content-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-down`.",
+ "control": "color"
+ },
+ "system-button-static-white-secondary-content-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-focus`.",
+ "control": "color"
+ },
+ "system-button-static-white-secondary-outline-border-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-default`.",
+ "control": "color"
+ },
+ "system-button-static-white-secondary-outline-border-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-hover`.",
+ "control": "color"
+ },
+ "system-button-static-white-secondary-outline-border-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-down`.",
+ "control": "color"
+ },
+ "system-button-static-white-secondary-outline-border-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-focus`.",
+ "control": "color"
+ },
+ "system-button-static-white-secondary-outline-background-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.",
+ "control": "color"
+ },
+ "system-button-static-white-secondary-outline-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.",
+ "control": "color"
+ },
+ "system-button-static-white-secondary-outline-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.",
+ "control": "color"
+ },
+ "system-button-static-white-secondary-outline-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.",
+ "control": "color"
+ },
+ "system-button-static-black-background-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.",
+ "control": "color"
+ },
+ "system-button-static-black-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.",
+ "control": "color"
+ },
+ "system-button-static-black-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.",
+ "control": "color"
+ },
+ "system-button-static-black-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.",
+ "control": "color"
+ },
+ "system-button-static-black-content-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-default`.",
+ "control": "color"
+ },
+ "system-button-static-black-content-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-hover`.",
+ "control": "color"
+ },
+ "system-button-static-black-content-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-down`.",
+ "control": "color"
+ },
+ "system-button-static-black-content-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-focus`.",
+ "control": "color"
+ },
+ "system-button-static-black-outline-background-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.",
+ "control": "color"
+ },
+ "system-button-static-black-outline-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.",
+ "control": "color"
+ },
+ "system-button-static-black-outline-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.",
+ "control": "color"
+ },
+ "system-button-static-black-outline-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.",
+ "control": "color"
+ },
+ "system-button-static-black-outline-content-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-default`.",
+ "control": "color"
+ },
+ "system-button-static-black-outline-content-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-hover`.",
+ "control": "color"
+ },
+ "system-button-static-black-outline-content-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-down`.",
+ "control": "color"
+ },
+ "system-button-static-black-outline-content-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-focus`.",
+ "control": "color"
+ },
+ "system-button-static-black-outline-border-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-default`.",
+ "control": "color"
+ },
+ "system-button-static-black-outline-border-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-hover`.",
+ "control": "color"
+ },
+ "system-button-static-black-outline-border-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-down`.",
+ "control": "color"
+ },
+ "system-button-static-black-outline-border-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-focus`.",
+ "control": "color"
+ },
+ "system-button-static-black-secondary-background-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.",
+ "control": "color"
+ },
+ "system-button-static-black-secondary-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.",
+ "control": "color"
+ },
+ "system-button-static-black-secondary-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.",
+ "control": "color"
+ },
+ "system-button-static-black-secondary-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.",
+ "control": "color"
+ },
+ "system-button-static-black-secondary-content-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-default`.",
+ "control": "color"
+ },
+ "system-button-static-black-secondary-content-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-hover`.",
+ "control": "color"
+ },
+ "system-button-static-black-secondary-content-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-down`.",
+ "control": "color"
+ },
+ "system-button-static-black-secondary-content-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-focus`.",
+ "control": "color"
+ },
+ "system-button-static-black-secondary-outline-border-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-default`.",
+ "control": "color"
+ },
+ "system-button-static-black-secondary-outline-border-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-hover`.",
+ "control": "color"
+ },
+ "system-button-static-black-secondary-outline-border-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-down`.",
+ "control": "color"
+ },
+ "system-button-static-black-secondary-outline-border-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-focus`.",
+ "control": "color"
+ },
+ "system-button-static-black-secondary-outline-background-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.",
+ "control": "color"
+ },
+ "system-button-static-black-secondary-outline-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.",
+ "control": "color"
+ },
+ "system-button-static-black-secondary-outline-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.",
+ "control": "color"
+ },
+ "system-button-static-black-secondary-outline-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {
+ "mod-progress-circle-position": {
+ "category": "Passthrough"
+ },
+ "mod-progress-circle-track-border-color": {
+ "category": "Passthrough"
+ },
+ "mod-progress-circle-track-border-color-over-background": {
+ "category": "Passthrough"
+ },
+ "mod-progress-circle-thickness": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-button-background-color-default": {
+ "value": "var(--mod-button-background-color-default, var(--spectrum-button-background-color-default))",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button`.
Defaults to `var(--mod-button-background-color-default, var(--spectrum-button-background-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-button-border-color-default": {
+ "value": "var(--mod-button-border-color-default, var(--spectrum-button-border-color-default))",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button`.
Defaults to `var(--mod-button-border-color-default, var(--spectrum-button-border-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-button-content-color-default": {
+ "value": "var(--mod-button-content-color-default, var(--spectrum-button-content-color-default, inherit))",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button`.
Defaults to `var(--mod-button-content-color-default, var(--spectrum-button-content-color-default, inherit))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-button-background-color-focus": {
+ "value": "var(--mod-button-background-color-focus, var(--spectrum-button-background-color-focus))",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button:focus-visible`.
Defaults to `var(--mod-button-background-color-focus, var(--spectrum-button-background-color-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-button-border-color-focus": {
+ "value": "var(--mod-button-border-color-focus, var(--spectrum-button-border-color-focus))",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button:focus-visible`.
Defaults to `var(--mod-button-border-color-focus, var(--spectrum-button-border-color-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-button-content-color-focus": {
+ "value": "var(--mod-button-content-color-focus, var(--spectrum-button-content-color-focus))",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button:focus-visible`.
Defaults to `var(--mod-button-content-color-focus, var(--spectrum-button-content-color-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-button-background-color-down": {
+ "value": "var(--mod-button-background-color-down, var(--spectrum-button-background-color-down))",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button:active`.
Defaults to `var(--mod-button-background-color-down, var(--spectrum-button-background-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-button-border-color-down": {
+ "value": "var(--mod-button-border-color-down, var(--spectrum-button-border-color-down))",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button:active`.
Defaults to `var(--mod-button-border-color-down, var(--spectrum-button-border-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-button-content-color-down": {
+ "value": "var(--mod-button-content-color-down, var(--spectrum-button-content-color-down))",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button:active`.
Defaults to `var(--mod-button-content-color-down, var(--spectrum-button-content-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-button-background-color-hover": {
+ "value": "var(--mod-button-background-color-hover, var(--spectrum-button-background-color-hover))",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button:hover`.
Defaults to `var(--mod-button-background-color-hover, var(--spectrum-button-background-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-button-border-color-hover": {
+ "value": "var(--mod-button-border-color-hover, var(--spectrum-button-border-color-hover))",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button:hover`.
Defaults to `var(--mod-button-border-color-hover, var(--spectrum-button-border-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-button-content-color-hover": {
+ "value": "var(--mod-button-content-color-hover, var(--spectrum-button-content-color-hover))",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button:hover`.
Defaults to `var(--mod-button-content-color-hover, var(--spectrum-button-content-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-button-background-color-disabled": {
+ "value": "var(--mod-button-background-color-disabled, var(--spectrum-button-background-color-disabled))",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`.
Defaults to `var(--mod-button-background-color-disabled, var(--spectrum-button-background-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-button-border-color-disabled": {
+ "value": "var(--mod-button-border-color-disabled, var(--spectrum-button-border-color-disabled))",
+ "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`.
Defaults to `var(--mod-button-border-color-disabled, var(--spectrum-button-border-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-button-content-color-disabled": {
+ "value": "var(--mod-button-content-color-disabled, var(--spectrum-button-content-color-disabled))",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--accent`.
Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`.
Defaults to `var(--mod-button-content-color-disabled, var(--spectrum-button-content-color-disabled))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js
index 2de4d54053b..bdf34b2302b 100644
--- a/components/button/stories/button.stories.js
+++ b/components/button/stories/button.stories.js
@@ -2,11 +2,13 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isActive, isDisabled, isFocused, isHovered, isPending, size, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { ButtonGroups } from "./button.test.js";
import { ButtonsWithIconOptions, TextOverflowTemplate, TextWrapTemplate, TreatmentTemplate } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.
*
@@ -95,6 +97,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/buttongroup/dist/metadata.json b/components/buttongroup/dist/metadata.json
index 38d29f26e39..c55e59e722e 100644
--- a/components/buttongroup/dist/metadata.json
+++ b/components/buttongroup/dist/metadata.json
@@ -6,20 +6,67 @@
".spectrum-ButtonGroup.spectrum-ButtonGroup--sizeS",
".spectrum-ButtonGroup.spectrum-ButtonGroup--vertical"
],
- "modifiers": [
- "--mod-buttongroup-justify-content",
- "--mod-buttongroup-spacing",
- "--mod-buttongroup-spacing-horizontal",
- "--mod-buttongroup-spacing-vertical"
- ],
- "component": [
- "--spectrum-buttongroup-display",
- "--spectrum-buttongroup-flex-direction",
- "--spectrum-buttongroup-justify-content",
- "--spectrum-buttongroup-spacing"
- ],
- "global": ["--spectrum-spacing-200", "--spectrum-spacing-300"],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-buttongroup-spacing": {
+ "value": "var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-200))",
+ "description": "Defined in `.spectrum-ButtonGroup.spectrum-ButtonGroup--vertical`.
Used by `--spectrum-buttongroup-spacing`.
Defaults to `var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-200))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-buttongroup-spacing-horizontal": {
+ "value": "12px",
+ "description": "Used by `--spectrum-buttongroup-spacing`.
Defaults to `var(--spectrum-spacing-200)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-buttongroup-justify-content": {
+ "description": "Used by `--spectrum-buttongroup-justify-content`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-buttongroup-spacing-vertical": {
+ "description": "Used by `--mod-buttongroup-spacing`.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-buttongroup-spacing": {
+ "description": "Defined in `.spectrum-ButtonGroup`, `.spectrum-ButtonGroup.spectrum-ButtonGroup--sizeS`.
Used by `.spectrum-ButtonGroup`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-buttongroup-display": {
+ "description": "Defined in `.spectrum-ButtonGroup`, `.spectrum-ButtonGroup.spectrum-ButtonGroup--vertical`.
Used by `.spectrum-ButtonGroup`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-buttongroup-flex-direction": {
+ "description": "Defined in `.spectrum-ButtonGroup`, `.spectrum-ButtonGroup.spectrum-ButtonGroup--vertical`.
Used by `.spectrum-ButtonGroup`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-buttongroup-justify-content": {
+ "description": "Defined in `.spectrum-ButtonGroup`.
Used by `.spectrum-ButtonGroup`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `--spectrum-buttongroup-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-buttongroup-spacing`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/buttongroup/stories/buttongroup.stories.js b/components/buttongroup/stories/buttongroup.stories.js
index ba7e125de76..1fe9b2406cd 100644
--- a/components/buttongroup/stories/buttongroup.stories.js
+++ b/components/buttongroup/stories/buttongroup.stories.js
@@ -1,11 +1,13 @@
import { default as Icon } from "@spectrum-css/icon/stories/icon.stories.js";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { ButtonGroup } from "./buttongroup.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* A button group is a grouping of buttons whose actions are related to each other.
*/
@@ -64,6 +66,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/calendar/dist/metadata.json b/components/calendar/dist/metadata.json
index 676c81a041f..5af658123bd 100644
--- a/components/calendar/dist/metadata.json
+++ b/components/calendar/dist/metadata.json
@@ -5,46 +5,46 @@
".spectrum-Calendar--padded",
".spectrum-Calendar-body",
".spectrum-Calendar-date",
+ ".spectrum-Calendar-date:active",
+ ".spectrum-Calendar-date:after",
+ ".spectrum-Calendar-date:before",
+ ".spectrum-Calendar-date:hover",
+ ".spectrum-Calendar-date:hover:not(.is-selection-end, .is-selection-start)",
+ ".spectrum-Calendar-date:lang(ja)",
+ ".spectrum-Calendar-date:lang(ko)",
+ ".spectrum-Calendar-date:lang(zh)",
".spectrum-Calendar-date.is-disabled",
".spectrum-Calendar-date.is-disabled.is-selected",
".spectrum-Calendar-date.is-focused",
+ ".spectrum-Calendar-date.is-focused:not(.is-range-selection)",
+ ".spectrum-Calendar-date.is-focused:not(.is-range-selection):active",
".spectrum-Calendar-date.is-focused.is-range-selection",
".spectrum-Calendar-date.is-focused.is-selected",
".spectrum-Calendar-date.is-focused.is-selected:not(.is-range-selection)",
- ".spectrum-Calendar-date.is-focused:not(.is-range-selection)",
- ".spectrum-Calendar-date.is-focused:not(.is-range-selection):active",
".spectrum-Calendar-date.is-outsideMonth",
".spectrum-Calendar-date.is-range-selection",
+ ".spectrum-Calendar-date.is-range-selection:hover",
".spectrum-Calendar-date.is-range-selection.is-range-end",
".spectrum-Calendar-date.is-range-selection.is-range-end:after",
".spectrum-Calendar-date.is-range-selection.is-range-end:before",
".spectrum-Calendar-date.is-range-selection.is-range-start",
- ".spectrum-Calendar-date.is-range-selection.is-range-start.is-range-end",
".spectrum-Calendar-date.is-range-selection.is-range-start:after",
".spectrum-Calendar-date.is-range-selection.is-range-start:before",
+ ".spectrum-Calendar-date.is-range-selection.is-range-start.is-range-end",
".spectrum-Calendar-date.is-range-selection.is-selection-end",
- ".spectrum-Calendar-date.is-range-selection.is-selection-end.is-range-start",
".spectrum-Calendar-date.is-range-selection.is-selection-end:after",
".spectrum-Calendar-date.is-range-selection.is-selection-end:before",
+ ".spectrum-Calendar-date.is-range-selection.is-selection-end.is-range-start",
".spectrum-Calendar-date.is-range-selection.is-selection-start",
- ".spectrum-Calendar-date.is-range-selection.is-selection-start.is-range-end",
- ".spectrum-Calendar-date.is-range-selection.is-selection-start.is-selection-end",
".spectrum-Calendar-date.is-range-selection.is-selection-start:after",
".spectrum-Calendar-date.is-range-selection.is-selection-start:before",
- ".spectrum-Calendar-date.is-range-selection:hover",
+ ".spectrum-Calendar-date.is-range-selection.is-selection-start.is-range-end",
+ ".spectrum-Calendar-date.is-range-selection.is-selection-start.is-selection-end",
".spectrum-Calendar-date.is-selected",
".spectrum-Calendar-date.is-selected:hover:not(.is-selection-end, .is-selection-start)",
".spectrum-Calendar-date.is-selected:not(.is-range-selection)",
".spectrum-Calendar-date.is-today",
".spectrum-Calendar-date.is-today.is-selected:not(.is-range-selection)",
- ".spectrum-Calendar-date:active",
- ".spectrum-Calendar-date:after",
- ".spectrum-Calendar-date:before",
- ".spectrum-Calendar-date:hover",
- ".spectrum-Calendar-date:hover:not(.is-selection-end, .is-selection-start)",
- ".spectrum-Calendar-date:lang(ja)",
- ".spectrum-Calendar-date:lang(ko)",
- ".spectrum-Calendar-date:lang(zh)",
".spectrum-Calendar-dayOfWeek",
".spectrum-Calendar-dayOfWeek[title]",
".spectrum-Calendar-header",
@@ -57,146 +57,716 @@
".spectrum-Calendar:dir(rtl)",
"[dir=\"rtl\"] .spectrum-Calendar"
],
- "modifiers": [
- "--mod-calendar-border-radius-reset",
- "--mod-calendar-border-width-reset",
- "--mod-calendar-button-icon-color",
- "--mod-calendar-day-background-color",
- "--mod-calendar-day-background-color-cap-selected",
- "--mod-calendar-day-background-color-down",
- "--mod-calendar-day-background-color-focus",
- "--mod-calendar-day-background-color-hover",
- "--mod-calendar-day-background-color-key-focus",
- "--mod-calendar-day-background-color-selected",
- "--mod-calendar-day-background-color-selected-hover",
- "--mod-calendar-day-background-layer-color",
- "--mod-calendar-day-border-color",
- "--mod-calendar-day-border-color-key-focus",
- "--mod-calendar-day-border-size",
- "--mod-calendar-day-fill-content",
- "--mod-calendar-day-fill-display",
- "--mod-calendar-day-height",
- "--mod-calendar-day-padding",
- "--mod-calendar-day-text-color",
- "--mod-calendar-day-text-color-cap-selected",
- "--mod-calendar-day-text-color-disabled",
- "--mod-calendar-day-text-color-hover",
- "--mod-calendar-day-text-color-key-focus",
- "--mod-calendar-day-text-color-selected",
- "--mod-calendar-day-text-font-weight",
- "--mod-calendar-day-text-font-weight-cap-selected",
- "--mod-calendar-day-text-font-weight-selected",
- "--mod-calendar-day-text-size",
- "--mod-calendar-day-text-size-han",
- "--mod-calendar-day-title-text-color",
- "--mod-calendar-day-title-text-font-weight",
- "--mod-calendar-day-title-text-size",
- "--mod-calendar-day-today-background-color-selected-hover",
- "--mod-calendar-day-today-border-color",
- "--mod-calendar-day-today-border-color-disabled",
- "--mod-calendar-day-today-text-color",
- "--mod-calendar-day-today-text-font-weight",
- "--mod-calendar-day-visibility",
- "--mod-calendar-day-width",
- "--mod-calendar-margin-x",
- "--mod-calendar-margin-y",
- "--mod-calendar-title-height",
- "--mod-calendar-title-text-letter-spacing",
- "--mod-calendar-title-text-size",
- "--mod-calendar-width"
- ],
- "component": [
- "--spectrum-calendar-border-radius-reset",
- "--spectrum-calendar-border-width-reset",
- "--spectrum-calendar-button-icon-color",
- "--spectrum-calendar-day-background",
- "--spectrum-calendar-day-background-cap-selected",
- "--spectrum-calendar-day-background-color-cap-selected",
- "--spectrum-calendar-day-background-color-down",
- "--spectrum-calendar-day-background-color-hover",
- "--spectrum-calendar-day-background-color-key-focus",
- "--spectrum-calendar-day-background-color-selected",
- "--spectrum-calendar-day-background-color-selected-disabled",
- "--spectrum-calendar-day-background-color-selected-hover",
- "--spectrum-calendar-day-background-down",
- "--spectrum-calendar-day-background-focus",
- "--spectrum-calendar-day-background-hover",
- "--spectrum-calendar-day-background-layer-color",
- "--spectrum-calendar-day-background-selected",
- "--spectrum-calendar-day-background-selected-hover",
- "--spectrum-calendar-day-border-color",
- "--spectrum-calendar-day-border-color-focus",
- "--spectrum-calendar-day-border-color-key-focus",
- "--spectrum-calendar-day-border-size",
- "--spectrum-calendar-day-height",
- "--spectrum-calendar-day-padding",
- "--spectrum-calendar-day-text-color",
- "--spectrum-calendar-day-text-color-cap-selected",
- "--spectrum-calendar-day-text-color-disabled",
- "--spectrum-calendar-day-text-color-hover",
- "--spectrum-calendar-day-text-color-key-focus",
- "--spectrum-calendar-day-text-color-selected",
- "--spectrum-calendar-day-text-font-weight",
- "--spectrum-calendar-day-text-font-weight-cap-selected",
- "--spectrum-calendar-day-text-font-weight-selected",
- "--spectrum-calendar-day-text-size",
- "--spectrum-calendar-day-today-background-color-selected-hover",
- "--spectrum-calendar-day-today-background-selected-hover",
- "--spectrum-calendar-day-today-border-color",
- "--spectrum-calendar-day-today-border-color-disabled",
- "--spectrum-calendar-day-today-text-color",
- "--spectrum-calendar-day-today-text-font-weight",
- "--spectrum-calendar-day-width",
- "--spectrum-calendar-heading-text-size",
- "--spectrum-calendar-margin-x",
- "--spectrum-calendar-margin-y",
- "--spectrum-calendar-title-height",
- "--spectrum-calendar-title-text-color",
- "--spectrum-calendar-title-text-font-weight",
- "--spectrum-calendar-title-text-letter-spacing",
- "--spectrum-calendar-title-text-size",
- "--spectrum-calendar-width"
- ],
- "global": [
- "--spectrum-bold-font-weight",
- "--spectrum-border-width-200",
- "--spectrum-component-height-100",
- "--spectrum-disabled-border-color",
- "--spectrum-disabled-content-color",
- "--spectrum-font-size-100",
- "--spectrum-font-size-300",
- "--spectrum-font-size-50",
- "--spectrum-gray-100-rgb",
- "--spectrum-gray-800",
- "--spectrum-logical-rotation",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-down",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-neutral-content-color-key-focus",
- "--spectrum-neutral-subdued-content-color-default",
- "--spectrum-regular-font-weight"
- ],
- "system-theme": ["--system-calendar-day-background-color-selected-disabled"],
- "passthroughs": [
- "--mod-actionbutton-content-color-default",
- "--mod-actionbutton-edge-to-text",
- "--mod-actionbutton-min-width"
- ],
- "high-contrast": [
- "--highcontrast-calendar-day-background-cap-selected",
- "--highcontrast-calendar-day-background-down",
- "--highcontrast-calendar-day-background-focus",
- "--highcontrast-calendar-day-background-hover",
- "--highcontrast-calendar-day-background-selected",
- "--highcontrast-calendar-day-background-selected-hover",
- "--highcontrast-calendar-day-border-color-focus",
- "--highcontrast-calendar-day-text-color-cap-selected",
- "--highcontrast-calendar-day-text-color-hover",
- "--highcontrast-calendar-day-text-color-key-focus",
- "--highcontrast-calendar-day-text-color-selected",
- "--highcontrast-calendar-day-title-text-color",
- "--highcontrast-calendar-day-today-background-selected-hover",
- "--highcontrast-calendar-day-today-border-color",
- "--highcontrast-calendar-day-today-text-color"
- ]
+ "modifiers": {
+ "mod-calendar-day-width": {
+ "value": "32px",
+ "description": "Used by `--spectrum-calendar-day-width`.
Defaults to `var(--spectrum-component-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-height": {
+ "value": "32px",
+ "description": "Used by `--spectrum-calendar-day-height`.
Defaults to `var(--spectrum-component-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-border-size": {
+ "value": "2px",
+ "description": "Used by `--spectrum-calendar-day-border-size`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-padding": {
+ "description": "Used by `--spectrum-calendar-day-padding`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-border-radius-reset": {
+ "description": "Used by `--spectrum-calendar-border-radius-reset`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-border-width-reset": {
+ "description": "Used by `--spectrum-calendar-border-width-reset`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-margin-y": {
+ "description": "Used by `--spectrum-calendar-margin-y`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-margin-x": {
+ "description": "Used by `--spectrum-calendar-margin-x`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-width": {
+ "value": "calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7)",
+ "description": "Used by `--spectrum-calendar-width`.
Defaults to `calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-title-text-letter-spacing": {
+ "description": "Used by `--spectrum-calendar-title-text-letter-spacing`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-title-height": {
+ "description": "Used by `--spectrum-calendar-title-height`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-title-text-size": {
+ "value": "18px",
+ "description": "Used by `--spectrum-calendar-title-text-size`.
Defaults to `var(--spectrum-font-size-300)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-title-text-font-weight": {
+ "value": "700",
+ "description": "Used by `--spectrum-calendar-title-text-font-weight`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-title-text-color": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Used by `--spectrum-calendar-title-text-color`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-title-text-size": {
+ "value": "11px",
+ "description": "Used by `--spectrum-calendar-heading-text-size`.
Defaults to `var(--spectrum-font-size-50)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-button-icon-color": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Used by `--spectrum-calendar-button-icon-color`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-background-color": {
+ "description": "Defined in `.spectrum-Calendar-date:hover:not(.is-selection-end, .is-selection-start)`, `.spectrum-Calendar-date.is-range-selection:hover, .spectrum-Calendar-date.is-selected:hover:not(.is-selection-end, .is-selection-start)`, `.spectrum-Calendar-date.is-focused.is-range-selection, .spectrum-Calendar-date.is-focused.is-selected`, `.spectrum-Calendar-date.is-focused:not(.is-range-selection)`, `.spectrum-Calendar-date.is-selected:not(.is-range-selection)`, `.spectrum-Calendar-date.is-selected`.
Used by `--spectrum-calendar-day-background`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-background-color-selected": {
+ "value": "var(--spectrum-calendar-day-background-color-selected)",
+ "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-background-selected`.
Defaults to `var(--spectrum-calendar-day-background-color-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-background-color-selected-hover": {
+ "value": "var(--spectrum-calendar-day-background-color-selected-hover)",
+ "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-background-selected-hover`.
Defaults to `var(--spectrum-calendar-day-background-color-selected-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-background-color-cap-selected": {
+ "value": "var(--spectrum-calendar-day-background-color-cap-selected)",
+ "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-background-cap-selected`.
Defaults to `var(--spectrum-calendar-day-background-color-cap-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-background-color-hover": {
+ "value": "var(--spectrum-calendar-day-background-color-hover)",
+ "description": "Defined in `.spectrum-Calendar-date.is-today.is-selected:not(.is-range-selection)`, `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-background-hover`.
Defaults to `var(--spectrum-calendar-day-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-background-color-key-focus": {
+ "value": "var(--spectrum-calendar-day-background-color-key-focus)",
+ "description": "Defined in `.spectrum-Calendar-date.is-focused.is-selected:not(.is-range-selection), .spectrum-Calendar-date.is-focused:not(.is-range-selection):active`.
Used by `--spectrum-calendar-day-background-focus`.
Defaults to `var(--spectrum-calendar-day-background-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-background-color-down": {
+ "value": "var(--spectrum-calendar-day-background-color-down)",
+ "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-background-down`.
Defaults to `var(--spectrum-calendar-day-background-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-background-layer-color": {
+ "description": "Defined in `.spectrum-Calendar-date:active`, `.spectrum-Calendar-date.is-selected:not(.is-range-selection)`, `.spectrum-Calendar-date.is-selected`, `.spectrum-Calendar-date.is-disabled.is-selected`.
Used by `--spectrum-calendar-day-background-layer-color`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-border-color": {
+ "description": "Defined in `.spectrum-Calendar-date.is-focused`, `.spectrum-Calendar-date.is-focused:not(.is-range-selection)`, `.spectrum-Calendar-date.is-today`.
Used by `--spectrum-calendar-day-border-color`, `.spectrum-Calendar-date:before`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-border-color-key-focus": {
+ "value": "var(--spectrum-calendar-day-border-color-key-focus)",
+ "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-border-color-focus`.
Defaults to `var(--spectrum-calendar-day-border-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-text-size": {
+ "value": "14px",
+ "description": "Used by `--spectrum-calendar-day-text-size`.
Defaults to `var(--spectrum-font-size-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-text-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-Calendar-date.is-range-selection.is-selection-end, .spectrum-Calendar-date.is-range-selection.is-selection-start`, `.spectrum-Calendar-date.is-selected:not(.is-range-selection)`, `.spectrum-Calendar-date.is-today`, `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-text-font-weight`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-text-font-weight-selected": {
+ "value": "700",
+ "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-text-font-weight-selected`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-text-font-weight-cap-selected": {
+ "value": "700",
+ "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-text-font-weight-cap-selected`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-today-background-color-selected-hover": {
+ "value": "var(--spectrum-calendar-day-today-background-color-selected-hover)",
+ "description": "Used by `--spectrum-calendar-day-today-background-selected-hover`.
Defaults to `var(--spectrum-calendar-day-today-background-color-selected-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-today-text-font-weight": {
+ "value": "700",
+ "description": "Used by `--spectrum-calendar-day-today-text-font-weight`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-today-text-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-calendar-day-today-text-color`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-today-border-color": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-today-border-color`.
Defaults to `var(--spectrum-gray-800)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-text-color": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Defined in `.spectrum-Calendar-date:hover`, `.spectrum-Calendar-date.is-range-selection.is-selection-end, .spectrum-Calendar-date.is-range-selection.is-selection-start`, `.spectrum-Calendar-date.is-focused:not(.is-range-selection)`, `.spectrum-Calendar-date.is-selected:not(.is-range-selection)`, `.spectrum-Calendar-date.is-selected`, `.spectrum-Calendar-date.is-today`, `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-text-color`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-text-color-selected": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-text-color-selected`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-text-color-cap-selected": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-text-color-cap-selected`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-text-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-text-color-hover`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-text-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Calendar-date.is-focused.is-selected:not(.is-range-selection), .spectrum-Calendar-date.is-focused:not(.is-range-selection):active`, `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-text-color-key-focus`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-text-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-calendar-day-text-color-disabled`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-today-border-color-disabled": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Used by `--spectrum-calendar-day-today-border-color-disabled`.
Defaults to `var(--spectrum-disabled-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-text-size-han": {
+ "value": "11px",
+ "description": "Used by `--spectrum-calendar-day-text-size`.
Defaults to `var(--spectrum-font-size-50)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-fill-content": {
+ "description": "Defined in `.spectrum-Calendar-date.is-range-selection.is-selection-end, .spectrum-Calendar-date.is-range-selection.is-selection-start`.
Used by `.spectrum-Calendar-date:after`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-visibility": {
+ "description": "Defined in `.spectrum-Calendar-date.is-outsideMonth`.
Used by `.spectrum-Calendar-date`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-fill-display": {
+ "description": "Defined in `.spectrum-Calendar-date.is-range-selection.is-selection-end, .spectrum-Calendar-date.is-range-selection.is-selection-start`.
Used by `.spectrum-Calendar-date:after`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-background-color-focus": {
+ "description": "Defined in `.spectrum-Calendar-date.is-disabled`.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-calendar-day-width": {
+ "description": "Defined in `.spectrum-Calendar`.
Used by `--spectrum-calendar-width`, `--mod-actionbutton-min-width`, `.spectrum-Calendar-dayOfWeek`, `.spectrum-Calendar-tableCell`, `.spectrum-Calendar-date`, `.spectrum-Calendar-date, .spectrum-Calendar-date:before`, `.spectrum-Calendar-date:before`, `.spectrum-Calendar-date:after`, `.spectrum-Calendar-date.is-range-selection`, `.spectrum-Calendar-date.is-range-selection.is-range-start, .spectrum-Calendar-date.is-range-selection.is-selection-end, .spectrum-Calendar-date.is-range-selection.is-selection-start`, `.spectrum-Calendar-date.is-range-selection.is-range-start, .spectrum-Calendar-date.is-range-selection.is-selection-start`, `.spectrum-Calendar-date.is-range-selection.is-range-end, .spectrum-Calendar-date.is-range-selection.is-selection-end`, `.spectrum-Calendar-date.is-range-selection.is-range-start.is-range-end, .spectrum-Calendar-date.is-range-selection.is-selection-end.is-range-start, .spectrum-Calendar-date.is-range-selection.is-selection-start.is-range-end, .spectrum-Calendar-date.is-range-selection.is-selection-start.is-selection-end`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-height": {
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-tableCell`, `.spectrum-Calendar-date, .spectrum-Calendar-date:before`, `.spectrum-Calendar-date:after`, `.spectrum-Calendar-date.is-range-selection`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-border-size": {
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-date`, `.spectrum-Calendar-date:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-padding": {
+ "description": "Defined in `.spectrum-Calendar`.
Used by `--spectrum-calendar-width`, `--mod-actionbutton-edge-to-text`, `.spectrum-Calendar-tableCell`, `.spectrum-Calendar-date`, `.spectrum-Calendar-date.is-range-selection`, `.spectrum-Calendar-date.is-range-selection.is-range-start, .spectrum-Calendar-date.is-range-selection.is-selection-end, .spectrum-Calendar-date.is-range-selection.is-selection-start`, `.spectrum-Calendar-date.is-range-selection.is-range-start, .spectrum-Calendar-date.is-range-selection.is-selection-start`, `.spectrum-Calendar-date.is-range-selection.is-range-end, .spectrum-Calendar-date.is-range-selection.is-selection-end`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-border-radius-reset": {
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-date.is-range-selection`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-border-width-reset": {
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-date.is-range-selection`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-margin-y": {
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar--padded`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-margin-x": {
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar--padded`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-width": {
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-title-text-letter-spacing": {
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-dayOfWeek[title]`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-title-height": {
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-title`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-title-text-size": {
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-title`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-title-text-font-weight": {
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-title`, `.spectrum-Calendar-dayOfWeek`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-title-text-color": {
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-title`, `.spectrum-Calendar-dayOfWeek`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-heading-text-size": {
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-dayOfWeek`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-button-icon-color": {
+ "description": "Defined in `.spectrum-Calendar`.
Used by `--mod-actionbutton-content-color-default`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-background": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `.spectrum-Calendar-date:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-background-selected": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-background-color`, `--mod-calendar-day-background-layer-color`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-background-color-selected": {
+ "description": "Used by `--spectrum-calendar-day-background-selected`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-background-selected-hover": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-background-color`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-background-color-selected-hover": {
+ "description": "Used by `--spectrum-calendar-day-background-selected-hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-background-cap-selected": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-background-color-key-focus`, `--mod-calendar-day-background-color`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-background-color-cap-selected": {
+ "description": "Used by `--spectrum-calendar-day-background-cap-selected`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-background-hover": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-background-color`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-background-color-hover": {
+ "description": "Used by `--spectrum-calendar-day-background-hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-background-focus": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-background-color`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-background-color-key-focus": {
+ "description": "Used by `--spectrum-calendar-day-background-focus`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-background-down": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-background-layer-color`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-background-color-down": {
+ "description": "Used by `--spectrum-calendar-day-background-down`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-background-layer-color": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `.spectrum-Calendar-date`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-border-color": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `.spectrum-Calendar-date`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-border-color-focus": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-border-color-key-focus": {
+ "description": "Used by `--spectrum-calendar-day-border-color-focus`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-text-size": {
+ "description": "Defined in `.spectrum-Calendar-date`, `.spectrum-Calendar-date:lang(ja), .spectrum-Calendar-date:lang(ko), .spectrum-Calendar-date:lang(zh)`.
Used by `.spectrum-Calendar-date`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-text-font-weight": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `.spectrum-Calendar-date`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-text-font-weight-selected": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-font-weight`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-text-font-weight-cap-selected": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-font-weight`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-today-background-selected-hover": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-background-color-hover`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-today-background-color-selected-hover": {
+ "description": "Used by `--spectrum-calendar-day-today-background-selected-hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-today-text-font-weight": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-font-weight`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-today-text-color": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-today-border-color": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-text-color": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `.spectrum-Calendar-date`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-text-color-selected": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-text-color-cap-selected": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-color`, `--mod-calendar-day-text-color-key-focus`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-text-color-hover": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-text-color-key-focus": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-text-color-disabled": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-color`, `--mod-calendar-day-text-color-selected`, `--mod-calendar-day-text-color-cap-selected`, `--mod-calendar-day-text-color-hover`, `--mod-calendar-day-text-color-key-focus`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-today-border-color-disabled": {
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-today-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-background-color-selected-disabled": {
+ "description": "Defined in `.spectrum-Calendar`.
Used by `--mod-calendar-day-background-color-selected`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-100-rgb": {
+ "description": "Used by `--system-calendar-day-background-color-selected-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-calendar-day-width`, `--spectrum-calendar-day-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-calendar-day-border-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-calendar-title-text-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-bold-font-weight": {
+ "value": "700",
+ "description": "Used by `--spectrum-calendar-title-text-font-weight`, `--spectrum-calendar-day-text-font-weight-selected`, `--spectrum-calendar-day-text-font-weight-cap-selected`, `--spectrum-calendar-day-today-text-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Used by `--spectrum-calendar-title-text-color`, `--spectrum-calendar-button-icon-color`, `--spectrum-calendar-day-text-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-font-size-50": {
+ "value": "11px",
+ "description": "Used by `--spectrum-calendar-heading-text-size`, `--spectrum-calendar-day-text-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-logical-rotation": {
+ "description": "Defined in `.spectrum-Calendar:dir(rtl), [dir=\"rtl\"] .spectrum-Calendar`.
Used by `.spectrum-Calendar-nextMonth, .spectrum-Calendar-prevMonth`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-calendar-day-text-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-calendar-day-text-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-calendar-day-today-text-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-800": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Used by `--spectrum-calendar-day-today-border-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-calendar-day-text-color-selected`, `--spectrum-calendar-day-text-color-cap-selected`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-calendar-day-text-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-calendar-day-text-color-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-calendar-day-text-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-border-color": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Used by `--spectrum-calendar-day-today-border-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-calendar-day-background-color-selected-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-calendar-day-background-color-selected-disabled`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {
+ "mod-actionbutton-edge-to-text": {
+ "category": "Passthrough"
+ },
+ "mod-actionbutton-min-width": {
+ "category": "Passthrough"
+ },
+ "mod-actionbutton-content-color-default": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-calendar-day-title-text-color": {
+ "value": "var(--mod-calendar-day-title-text-color, var(--spectrum-neutral-subdued-content-color-default))",
+ "description": "Defined in `.spectrum-Calendar-date`, `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-title-text-color`.
Defaults to `var(--mod-calendar-day-title-text-color, var(--spectrum-neutral-subdued-content-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-calendar-day-background-selected": {
+ "value": "var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--spectrum-calendar-day-background-selected`.
Defaults to `var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected))`, if not set.",
+ "control": "text"
+ },
+ "highcontrast-calendar-day-background-selected-hover": {
+ "value": "var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--spectrum-calendar-day-background-selected-hover`.
Defaults to `var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover))`, if not set.",
+ "control": "text"
+ },
+ "highcontrast-calendar-day-background-cap-selected": {
+ "value": "var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--spectrum-calendar-day-background-cap-selected`.
Defaults to `var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected))`, if not set.",
+ "control": "text"
+ },
+ "highcontrast-calendar-day-background-hover": {
+ "value": "var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--spectrum-calendar-day-background-hover`.
Defaults to `var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover))`, if not set.",
+ "control": "text"
+ },
+ "highcontrast-calendar-day-background-focus": {
+ "value": "var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--spectrum-calendar-day-background-focus`.
Defaults to `var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus))`, if not set.",
+ "control": "text"
+ },
+ "highcontrast-calendar-day-background-down": {
+ "value": "var(--mod-calendar-day-background-color-down, var(--spectrum-calendar-day-background-color-down))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--spectrum-calendar-day-background-down`.
Defaults to `var(--mod-calendar-day-background-color-down, var(--spectrum-calendar-day-background-color-down))`, if not set.",
+ "control": "text"
+ },
+ "highcontrast-calendar-day-border-color-focus": {
+ "value": "var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--spectrum-calendar-day-border-color-focus`.
Defaults to `var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-calendar-day-today-background-selected-hover": {
+ "value": "var(--mod-calendar-day-today-background-color-selected-hover, var(--spectrum-calendar-day-today-background-color-selected-hover))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--spectrum-calendar-day-today-background-selected-hover`.
Defaults to `var(--mod-calendar-day-today-background-color-selected-hover, var(--spectrum-calendar-day-today-background-color-selected-hover))`, if not set.",
+ "control": "text"
+ },
+ "highcontrast-calendar-day-today-text-color": {
+ "value": "var(--mod-calendar-day-today-text-color, var(--spectrum-neutral-content-color-default))",
+ "description": "Defined in `.spectrum-Calendar-date`, `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-today-text-color`.
Defaults to `var(--mod-calendar-day-today-text-color, var(--spectrum-neutral-content-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-calendar-day-today-border-color": {
+ "value": "var(--mod-calendar-day-today-border-color, var(--spectrum-gray-800))",
+ "description": "Defined in `.spectrum-Calendar-date`, `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-today-border-color`.
Defaults to `var(--mod-calendar-day-today-border-color, var(--spectrum-gray-800))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-calendar-day-text-color-selected": {
+ "value": "var(--mod-calendar-day-text-color-selected, var(--spectrum-neutral-content-color-down))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--spectrum-calendar-day-text-color-selected`.
Defaults to `var(--mod-calendar-day-text-color-selected, var(--spectrum-neutral-content-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-calendar-day-text-color-cap-selected": {
+ "value": "var(--mod-calendar-day-text-color-cap-selected, var(--spectrum-neutral-content-color-down))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--spectrum-calendar-day-text-color-cap-selected`.
Defaults to `var(--mod-calendar-day-text-color-cap-selected, var(--spectrum-neutral-content-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-calendar-day-text-color-hover": {
+ "value": "var(--mod-calendar-day-text-color-hover, var(--spectrum-neutral-content-color-hover))",
+ "description": "Defined in `.spectrum-Calendar-date`, `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-text-color-hover`.
Defaults to `var(--mod-calendar-day-text-color-hover, var(--spectrum-neutral-content-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-calendar-day-text-color-key-focus": {
+ "value": "var(--mod-calendar-day-text-color-key-focus, var(--spectrum-neutral-content-color-key-focus))",
+ "description": "Defined in `.spectrum-Calendar-date`, `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-text-color-key-focus`.
Defaults to `var(--mod-calendar-day-text-color-key-focus, var(--spectrum-neutral-content-color-key-focus))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/calendar/stories/calendar.stories.js b/components/calendar/stories/calendar.stories.js
index 303121e9610..47e3b9c37b4 100644
--- a/components/calendar/stories/calendar.stories.js
+++ b/components/calendar/stories/calendar.stories.js
@@ -1,11 +1,13 @@
import ActionButtonStories from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isFocused } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { CalendarGroup } from "./calendar.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
const months = [...Array(12).keys()].map((key) =>
new Date(0, key).toLocaleString("en", { month: "long" })
);
@@ -117,6 +119,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/card/dist/metadata.json b/components/card/dist/metadata.json
index 54eb899211d..4641f9ddd02 100644
--- a/components/card/dist/metadata.json
+++ b/components/card/dist/metadata.json
@@ -9,12 +9,12 @@
".spectrum-Card--gallery .spectrum-Card-preview",
".spectrum-Card--gallery .spectrum-Card-preview:after",
".spectrum-Card--gallery .spectrum-Card-preview:before",
+ ".spectrum-Card--gallery:before",
+ ".spectrum-Card--gallery:hover .spectrum-Card-preview",
".spectrum-Card--gallery.is-drop-target",
".spectrum-Card--gallery.is-drop-target .spectrum-Card-preview",
".spectrum-Card--gallery.is-drop-target .spectrum-Card-preview:before",
".spectrum-Card--gallery.is-selected .spectrum-Card-preview:before",
- ".spectrum-Card--gallery:before",
- ".spectrum-Card--gallery:hover .spectrum-Card-preview",
".spectrum-Card--horizontal",
".spectrum-Card--horizontal .spectrum-Card-body",
".spectrum-Card--horizontal .spectrum-Card-content",
@@ -28,6 +28,10 @@
".spectrum-Card--quiet .spectrum-Card-preview",
".spectrum-Card--quiet .spectrum-Card-preview:after",
".spectrum-Card--quiet .spectrum-Card-preview:before",
+ ".spectrum-Card--quiet:before",
+ ".spectrum-Card--quiet:focus .spectrum-Card-preview:after",
+ ".spectrum-Card--quiet:focus:after",
+ ".spectrum-Card--quiet:hover .spectrum-Card-preview",
".spectrum-Card--quiet.is-drop-target",
".spectrum-Card--quiet.is-drop-target .spectrum-Card-preview",
".spectrum-Card--quiet.is-drop-target .spectrum-Card-preview:before",
@@ -35,10 +39,6 @@
".spectrum-Card--quiet.is-focused:after",
".spectrum-Card--quiet.is-selected .spectrum-Card-preview",
".spectrum-Card--quiet.is-selected .spectrum-Card-preview:before",
- ".spectrum-Card--quiet:before",
- ".spectrum-Card--quiet:focus .spectrum-Card-preview:after",
- ".spectrum-Card--quiet:focus:after",
- ".spectrum-Card--quiet:hover .spectrum-Card-preview",
".spectrum-Card-actionButton",
".spectrum-Card-actions",
".spectrum-Card-body",
@@ -52,15 +52,6 @@
".spectrum-Card-subtitle",
".spectrum-Card-subtitle + .spectrum-Card-description:before",
".spectrum-Card-title",
- ".spectrum-Card.is-drop-target",
- ".spectrum-Card.is-focused .spectrum-Card-actions",
- ".spectrum-Card.is-focused .spectrum-Card-quickActions",
- ".spectrum-Card.is-selected",
- ".spectrum-Card.is-selected .spectrum-Card-actions",
- ".spectrum-Card.is-selected .spectrum-Card-quickActions",
- ".spectrum-Card.is-selected:before",
- ".spectrum-Card.spectrum-Card--gallery",
- ".spectrum-Card.spectrum-Card--quiet",
".spectrum-Card:after",
".spectrum-Card:before",
".spectrum-Card:focus .spectrum-Card-actions",
@@ -71,157 +62,814 @@
".spectrum-Card:focus-visible:after",
".spectrum-Card:hover",
".spectrum-Card:hover .spectrum-Card-actions",
- ".spectrum-Card:hover .spectrum-Card-quickActions"
- ],
- "modifiers": [
- "--mod-animation-duration-100",
- "--mod-card-actions-background-color-opacity",
- "--mod-card-actions-background-color-rgb",
- "--mod-card-actions-border-radius",
- "--mod-card-actions-drop-shadow-blur",
- "--mod-card-actions-drop-shadow-color",
- "--mod-card-actions-drop-shadow-x",
- "--mod-card-actions-drop-shadow-y",
- "--mod-card-actions-size",
- "--mod-card-actions-spacing",
- "--mod-card-animation-duration",
- "--mod-card-background-color",
- "--mod-card-background-color-hover",
- "--mod-card-body-font-color",
- "--mod-card-body-font-family",
- "--mod-card-body-font-size",
- "--mod-card-body-font-style",
- "--mod-card-body-font-weight",
- "--mod-card-body-line-height",
- "--mod-card-body-padding-block-end",
- "--mod-card-body-padding-block-start",
- "--mod-card-body-padding-inline-end",
- "--mod-card-body-padding-inline-start",
- "--mod-card-body-spacing",
- "--mod-card-border-color",
- "--mod-card-border-color-hover",
- "--mod-card-border-color-selected",
- "--mod-card-border-width",
- "--mod-card-content-margin-bottom",
- "--mod-card-content-margin-top",
- "--mod-card-content-margin-top-quiet",
- "--mod-card-corner-radius",
- "--mod-card-divider-color",
- "--mod-card-focus-indicator-color",
- "--mod-card-focus-indicator-width",
- "--mod-card-footer-margin-block-start",
- "--mod-card-footer-margin-inline-end",
- "--mod-card-footer-margin-inline-start",
- "--mod-card-footer-padding-block-end",
- "--mod-card-footer-padding-block-start",
- "--mod-card-horizontal-body-padding",
- "--mod-card-horizontal-preview-padding",
- "--mod-card-minimum-width",
- "--mod-card-minimum-width-quiet",
- "--mod-card-preview-background-color",
- "--mod-card-preview-background-color-hover",
- "--mod-card-preview-border-width-selected",
- "--mod-card-preview-minimum-height",
- "--mod-card-selected-background-color-rgb",
- "--mod-card-selected-background-opacity",
- "--mod-card-subtitle-padding-right",
- "--mod-card-title-font-color",
- "--mod-card-title-font-family",
- "--mod-card-title-font-size",
- "--mod-card-title-font-style",
- "--mod-card-title-font-weight",
- "--mod-card-title-line-height",
- "--mod-card-title-padding-right",
- "--mod-overlay-animation-duration"
- ],
- "component": [
- "--spectrum-card-actions-background-color-opacity",
- "--spectrum-card-actions-background-color-rgb",
- "--spectrum-card-actions-border-radius",
- "--spectrum-card-actions-drop-shadow-blur",
- "--spectrum-card-actions-drop-shadow-color",
- "--spectrum-card-actions-drop-shadow-x",
- "--spectrum-card-actions-drop-shadow-y",
- "--spectrum-card-actions-size",
- "--spectrum-card-actions-spacing",
- "--spectrum-card-background-color",
- "--spectrum-card-body-font-color",
- "--spectrum-card-body-font-family",
- "--spectrum-card-body-font-size",
- "--spectrum-card-body-font-style",
- "--spectrum-card-body-font-weight",
- "--spectrum-card-body-line-height",
- "--spectrum-card-body-padding-block-start",
- "--spectrum-card-body-spacing",
- "--spectrum-card-border-color",
- "--spectrum-card-border-color-hover",
- "--spectrum-card-border-width",
- "--spectrum-card-content-margin-bottom",
- "--spectrum-card-content-margin-top",
- "--spectrum-card-corner-radius",
- "--spectrum-card-divider-color",
- "--spectrum-card-focus-indicator-color",
- "--spectrum-card-focus-indicator-width",
- "--spectrum-card-footer-padding-top",
- "--spectrum-card-horizontal-body-padding",
- "--spectrum-card-horizontal-preview-padding",
- "--spectrum-card-minimum-width",
- "--spectrum-card-preview-background-color",
- "--spectrum-card-preview-background-color-hover",
- "--spectrum-card-preview-border-width-selected",
- "--spectrum-card-preview-minimum-height",
- "--spectrum-card-selected-background-color-rgb",
- "--spectrum-card-selected-background-opacity",
- "--spectrum-card-selection-background-color-opacity",
- "--spectrum-card-selection-background-size",
- "--spectrum-card-subtitle-padding-right",
- "--spectrum-card-title-font-color",
- "--spectrum-card-title-font-family",
- "--spectrum-card-title-font-size",
- "--spectrum-card-title-font-style",
- "--spectrum-card-title-font-weight",
- "--spectrum-card-title-line-height",
- "--spectrum-card-title-padding-right"
- ],
- "global": [
- "--spectrum-animation-duration-100",
- "--spectrum-background-base-color",
- "--spectrum-background-layer-2-color",
- "--spectrum-blue-700",
- "--spectrum-body-color",
- "--spectrum-body-line-height",
- "--spectrum-body-sans-serif-font-style",
- "--spectrum-body-sans-serif-font-weight",
- "--spectrum-body-size-s",
- "--spectrum-border-width-100",
- "--spectrum-corner-radius-100",
- "--spectrum-drop-shadow-blur",
- "--spectrum-drop-shadow-color",
- "--spectrum-drop-shadow-x",
- "--spectrum-drop-shadow-y",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-gray-100",
- "--spectrum-gray-100-rgb",
- "--spectrum-gray-200",
- "--spectrum-heading-color",
- "--spectrum-heading-line-height",
- "--spectrum-heading-sans-serif-font-style",
- "--spectrum-heading-sans-serif-font-weight",
- "--spectrum-heading-size-xxs",
- "--spectrum-sans-font-family-stack",
- "--spectrum-spacing-100",
- "--spectrum-spacing-200",
- "--spectrum-spacing-300",
- "--spectrum-spacing-400"
- ],
- "system-theme": [
- "--system-card-border-color",
- "--system-card-border-color-hover",
- "--system-card-divider-color",
- "--system-card-preview-background-color",
- "--system-card-preview-background-color-hover"
+ ".spectrum-Card:hover .spectrum-Card-quickActions",
+ ".spectrum-Card.is-drop-target",
+ ".spectrum-Card.is-focused .spectrum-Card-actions",
+ ".spectrum-Card.is-focused .spectrum-Card-quickActions",
+ ".spectrum-Card.is-selected",
+ ".spectrum-Card.is-selected .spectrum-Card-actions",
+ ".spectrum-Card.is-selected .spectrum-Card-quickActions",
+ ".spectrum-Card.is-selected:before",
+ ".spectrum-Card.spectrum-Card--gallery",
+ ".spectrum-Card.spectrum-Card--quiet"
],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-card-background-color": {
+ "value": "var(--spectrum-card-preview-background-color)",
+ "description": "Defined in `.spectrum-Card.is-drop-target`.
Used by `--spectrum-card-background-color`, `.spectrum-Card--gallery .spectrum-Card-preview, .spectrum-Card--quiet .spectrum-Card-preview`, `.spectrum-Card--gallery.is-drop-target .spectrum-Card-preview, .spectrum-Card--quiet.is-drop-target .spectrum-Card-preview`.
Defaults to `var(--spectrum-card-preview-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-card-body-spacing": {
+ "value": "24px",
+ "description": "Used by `--spectrum-card-body-spacing`.
Defaults to `var(--spectrum-spacing-400)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-body-padding-block-start": {
+ "value": "16px",
+ "description": "Used by `--spectrum-card-body-padding-block-start`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-title-padding-right": {
+ "value": "24px",
+ "description": "Used by `--spectrum-card-title-padding-right`.
Defaults to `var(--spectrum-spacing-400)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-content-margin-top": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-Card.spectrum-Card--quiet`.
Used by `--spectrum-card-content-margin-top`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-content-margin-bottom": {
+ "value": "16px",
+ "description": "Used by `--spectrum-card-content-margin-bottom`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-footer-padding-block-start": {
+ "value": "8px",
+ "description": "Used by `--spectrum-card-footer-padding-top`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-subtitle-padding-right": {
+ "value": "8px",
+ "description": "Used by `--spectrum-card-subtitle-padding-right`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-border-width": {
+ "value": "1px",
+ "description": "Used by `--spectrum-card-border-width`.
Defaults to `var(--spectrum-border-width-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-corner-radius": {
+ "value": "8px",
+ "description": "Used by `--spectrum-card-corner-radius`.
Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-title-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Used by `--spectrum-card-title-font-family`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-title-font-size": {
+ "value": "var(--spectrum-font-size-100)",
+ "description": "Used by `--spectrum-card-title-font-size`.
Defaults to `var(--spectrum-heading-size-xxs)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-title-font-weight": {
+ "value": "700",
+ "description": "Used by `--spectrum-card-title-font-weight`.
Defaults to `var(--spectrum-heading-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-title-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-card-title-font-style`.
Defaults to `var(--spectrum-heading-sans-serif-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-title-line-height": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-card-title-line-height`.
Defaults to `var(--spectrum-heading-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-title-font-color": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-card-title-font-color`.
Defaults to `var(--spectrum-heading-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-card-body-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Used by `--spectrum-card-body-font-family`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-body-font-size": {
+ "value": "var(--spectrum-font-size-100)",
+ "description": "Used by `--spectrum-card-body-font-size`.
Defaults to `var(--spectrum-body-size-s)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-body-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-card-body-font-weight`.
Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-body-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-card-body-font-style`.
Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-body-line-height": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-card-body-line-height`.
Defaults to `var(--spectrum-body-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-body-font-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-card-body-font-color`.
Defaults to `var(--spectrum-body-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-card-actions-spacing": {
+ "value": "16px",
+ "description": "Used by `--spectrum-card-actions-spacing`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-actions-size": {
+ "value": "40px",
+ "description": "Used by `--spectrum-card-actions-size`.
Defaults to `var(--spectrum-card-selection-background-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-actions-border-radius": {
+ "value": "8px",
+ "description": "Used by `--spectrum-card-actions-border-radius`.
Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-actions-background-color-rgb": {
+ "value": "var(--spectrum-gray-100-rgb)",
+ "description": "Used by `--spectrum-card-actions-background-color-rgb`.
Defaults to `var(--spectrum-gray-100-rgb)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-card-actions-background-color-opacity": {
+ "value": "0.95",
+ "description": "Used by `--spectrum-card-actions-background-color-opacity`.
Defaults to `var(--spectrum-card-selection-background-color-opacity)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-card-actions-drop-shadow-color": {
+ "value": "var(--spectrum-drop-shadow-color-100)",
+ "description": "Used by `--spectrum-card-actions-drop-shadow-color`.
Defaults to `var(--spectrum-drop-shadow-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-card-actions-drop-shadow-x": {
+ "value": "0px",
+ "description": "Used by `--spectrum-card-actions-drop-shadow-x`.
Defaults to `var(--spectrum-drop-shadow-x)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-actions-drop-shadow-y": {
+ "value": "1px",
+ "description": "Used by `--spectrum-card-actions-drop-shadow-y`.
Defaults to `var(--spectrum-drop-shadow-y)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-actions-drop-shadow-blur": {
+ "value": "4px",
+ "description": "Used by `--spectrum-card-actions-drop-shadow-blur`.
Defaults to `var(--spectrum-drop-shadow-blur)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-card-focus-indicator-color`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-card-focus-indicator-width": {
+ "value": "2px",
+ "description": "Used by `--spectrum-card-focus-indicator-width`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-selected-background-opacity": {
+ "value": "var(--spectrum-card-selected-background-opacity)",
+ "description": "Used by `--spectrum-card-selected-background-opacity`, `.spectrum-Card--gallery.is-selected .spectrum-Card-preview:before, .spectrum-Card--quiet.is-selected .spectrum-Card-preview:before`.
Defaults to `var(--spectrum-card-selected-background-opacity)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-preview-border-width-selected": {
+ "value": "1px",
+ "description": "Used by `--spectrum-card-preview-border-width-selected`.
Defaults to `var(--spectrum-border-width-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-horizontal-body-padding": {
+ "value": "16px",
+ "description": "Used by `--spectrum-card-horizontal-body-padding`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-horizontal-preview-padding": {
+ "value": "12px",
+ "description": "Used by `--spectrum-card-horizontal-preview-padding`.
Defaults to `var(--spectrum-spacing-200)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-minimum-width": {
+ "value": "100px",
+ "description": "Defined in `.spectrum-Card.spectrum-Card--quiet`.
Used by `.spectrum-Card`.
Defaults to `var(--spectrum-card-minimum-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-minimum-width-quiet": {
+ "description": "Used by `--mod-card-minimum-width`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-content-margin-top-quiet": {
+ "value": "8px",
+ "description": "Used by `--mod-card-content-margin-top`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-border-color-selected": {
+ "value": "light-dark(rgb(93, 137, 255), rgb(52, 91, 248))",
+ "description": "Used by `--spectrum-card-border-color`.
Defaults to `var(--spectrum-blue-700)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-card-border-color": {
+ "value": "var(--spectrum-card-border-color)",
+ "description": "Defined in `.spectrum-Card:hover`.
Used by `.spectrum-Card`, `.spectrum-Card-coverPhoto`, `.spectrum-Card--horizontal .spectrum-Card-preview`.
Defaults to `var(--spectrum-card-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-card-selected-background-color-rgb": {
+ "value": "var(--spectrum-card-selected-background-color-rgb)",
+ "description": "Used by `.spectrum-Card.is-selected:before`, `.spectrum-Card--gallery.is-selected .spectrum-Card-preview:before, .spectrum-Card--quiet.is-selected .spectrum-Card-preview:before`.
Defaults to `var(--spectrum-card-selected-background-color-rgb)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-overlay-animation-duration": {
+ "value": "var(--spectrum-animation-duration-100, 0.13s)",
+ "description": "Used by `.spectrum-Card-quickActions`.
Defaults to `var(--spectrum-animation-duration-100, 0.13s)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-preview-minimum-height": {
+ "value": "130px",
+ "description": "Used by `.spectrum-Card-coverPhoto`, `.spectrum-Card--gallery .spectrum-Card-preview, .spectrum-Card--quiet .spectrum-Card-preview`.
Defaults to `var(--spectrum-card-preview-minimum-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-preview-background-color": {
+ "value": "var(--spectrum-card-preview-background-color)",
+ "description": "Used by `.spectrum-Card-coverPhoto`, `.spectrum-Card--gallery .spectrum-Card-preview, .spectrum-Card--quiet .spectrum-Card-preview`, `.spectrum-Card--gallery.is-drop-target .spectrum-Card-preview, .spectrum-Card--quiet.is-drop-target .spectrum-Card-preview`, `.spectrum-Card--horizontal .spectrum-Card-preview`.
Defaults to `var(--spectrum-card-preview-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-card-body-padding-inline-end": {
+ "value": "calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))",
+ "description": "Used by `.spectrum-Card-body`.
Defaults to `calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-body-padding-inline-start": {
+ "value": "calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))",
+ "description": "Used by `.spectrum-Card-body`.
Defaults to `calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-body-padding-block-end": {
+ "value": "calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))",
+ "description": "Used by `.spectrum-Card-body`.
Defaults to `calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-footer-margin-block-start": {
+ "value": "calc((var(--spectrum-card-body-spacing) - var(--spectrum-card-content-margin-bottom)) * -1)",
+ "description": "Used by `.spectrum-Card-footer`.
Defaults to `calc((var(--spectrum-card-body-spacing) - var(--spectrum-card-content-margin-bottom)) * -1)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-footer-margin-inline-start": {
+ "value": "var(--spectrum-card-body-spacing)",
+ "description": "Used by `.spectrum-Card-footer`.
Defaults to `var(--spectrum-card-body-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-footer-margin-inline-end": {
+ "value": "var(--spectrum-card-body-spacing)",
+ "description": "Used by `.spectrum-Card-footer`.
Defaults to `var(--spectrum-card-body-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-footer-padding-block-end": {
+ "value": "calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))",
+ "description": "Used by `.spectrum-Card-footer`.
Defaults to `calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-divider-color": {
+ "value": "var(--spectrum-card-divider-color)",
+ "description": "Used by `.spectrum-Card-footer`.
Defaults to `var(--spectrum-card-divider-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-card-border-color-hover": {
+ "value": "var(--spectrum-card-border-color-hover)",
+ "description": "Defined in `.spectrum-Card--gallery, .spectrum-Card--quiet`.
Used by `--mod-card-border-color`, `.spectrum-Card--horizontal:hover .spectrum-Card-preview`.
Defaults to `var(--spectrum-card-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-card-animation-duration": {
+ "value": "var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))",
+ "description": "Used by `.spectrum-Card--gallery .spectrum-Card-preview, .spectrum-Card--quiet .spectrum-Card-preview`.
Defaults to `var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-animation-duration-100": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Used by `.spectrum-Card--gallery .spectrum-Card-preview, .spectrum-Card--quiet .spectrum-Card-preview`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-preview-background-color-hover": {
+ "value": "var(--mod-card-background-color-hover, var(--spectrum-card-preview-background-color-hover))",
+ "description": "Used by `.spectrum-Card--gallery:hover .spectrum-Card-preview, .spectrum-Card--quiet:hover .spectrum-Card-preview`.
Defaults to `var(--mod-card-background-color-hover, var(--spectrum-card-preview-background-color-hover))`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-card-background-color-hover": {
+ "value": "var(--spectrum-card-preview-background-color-hover)",
+ "description": "Used by `.spectrum-Card--gallery:hover .spectrum-Card-preview, .spectrum-Card--quiet:hover .spectrum-Card-preview`.
Defaults to `var(--spectrum-card-preview-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-card-background-color": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-body-spacing": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-body`, `.spectrum-Card-footer`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-body-padding-block-start": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-body`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-title-padding-right": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-title`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-content-margin-top": {
+ "description": "Defined in `.spectrum-Card`, `.spectrum-Card.spectrum-Card--gallery`.
Used by `.spectrum-Card-content`, `.spectrum-Card--gallery .spectrum-Card-body, .spectrum-Card--quiet .spectrum-Card-body`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-content-margin-bottom": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-footer`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-footer-padding-top": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-footer`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-subtitle-padding-right": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-subtitle`, `.spectrum-Card-subtitle + .spectrum-Card-description:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-border-width": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card`, `.spectrum-Card-quickActions`, `.spectrum-Card-coverPhoto`, `.spectrum-Card-body`, `.spectrum-Card-footer`, `.spectrum-Card--horizontal .spectrum-Card-preview`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-corner-radius": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card`, `.spectrum-Card:after`, `.spectrum-Card:focus-visible .spectrum-Card-coverPhoto, .spectrum-Card:focus-visible .spectrum-Card-preview`, `.spectrum-Card-coverPhoto`, `.spectrum-Card-preview`, `.spectrum-Card--gallery .spectrum-Card-preview, .spectrum-Card--quiet .spectrum-Card-preview`, `.spectrum-Card--gallery .spectrum-Card-preview:after, .spectrum-Card--quiet .spectrum-Card-preview:after`, `.spectrum-Card--horizontal .spectrum-Card-preview`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-title-font-family": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-title`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-title-font-size": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-title`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-title-font-weight": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-title`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-title-font-style": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-title`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-title-line-height": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-title`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-title-font-color": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-title`, `.spectrum-Card-subtitle`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-body-font-family": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-description`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-body-font-size": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-description`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-body-font-weight": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-description`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-body-font-style": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-description`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-body-line-height": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-description, .spectrum-Card-footer`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-body-font-color": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-preview`, `.spectrum-Card-description, .spectrum-Card-footer`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-actions-spacing": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`, `.spectrum-Card-actions`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-actions-size": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-selection-background-size": {
+ "value": "40px",
+ "description": "Used by `--spectrum-card-actions-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-actions-border-radius": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-actions-background-color-rgb": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-actions-background-color-opacity": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-selection-background-color-opacity": {
+ "value": "0.95",
+ "description": "Used by `--spectrum-card-actions-background-color-opacity`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-actions-drop-shadow-color": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-actions-drop-shadow-x": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-actions-drop-shadow-y": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-actions-drop-shadow-blur": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-focus-indicator-color": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card:focus-visible:after`, `.spectrum-Card--quiet.is-focused .spectrum-Card-preview:after, .spectrum-Card--quiet:focus .spectrum-Card-preview:after`, `.spectrum-Card--gallery.is-drop-target .spectrum-Card-preview:before, .spectrum-Card--quiet.is-drop-target .spectrum-Card-preview:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-focus-indicator-width": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card:after`, `.spectrum-Card:focus-visible:after`, `.spectrum-Card:focus-visible .spectrum-Card-coverPhoto, .spectrum-Card:focus-visible .spectrum-Card-preview`, `.spectrum-Card--quiet .spectrum-Card-preview`, `.spectrum-Card--gallery .spectrum-Card-preview:after, .spectrum-Card--quiet .spectrum-Card-preview:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-selected-background-opacity": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card.is-selected:before`, `.spectrum-Card--gallery.is-selected .spectrum-Card-preview:before, .spectrum-Card--quiet.is-selected .spectrum-Card-preview:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-preview-border-width-selected": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card--quiet.is-selected .spectrum-Card-preview`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-horizontal-body-padding": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card--horizontal .spectrum-Card-body`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-horizontal-preview-padding": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card--horizontal .spectrum-Card-preview`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-border-color": {
+ "description": "Defined in `.spectrum-Card.is-drop-target, .spectrum-Card.is-selected`, `.spectrum-Card`.
Used by `.spectrum-Card`, `.spectrum-Card.is-drop-target`, `.spectrum-Card-coverPhoto`, `.spectrum-Card--quiet.is-selected .spectrum-Card-preview`, `.spectrum-Card--horizontal .spectrum-Card-preview`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-minimum-width": {
+ "value": "100px",
+ "description": "Used by `.spectrum-Card`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-selected-background-color-rgb": {
+ "description": "Used by `.spectrum-Card.is-selected:before`, `.spectrum-Card--gallery.is-selected .spectrum-Card-preview:before, .spectrum-Card--quiet.is-selected .spectrum-Card-preview:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-preview-minimum-height": {
+ "value": "130px",
+ "description": "Used by `.spectrum-Card-coverPhoto`, `.spectrum-Card--gallery .spectrum-Card-preview, .spectrum-Card--quiet .spectrum-Card-preview`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-preview-background-color": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-coverPhoto`, `.spectrum-Card--gallery .spectrum-Card-preview, .spectrum-Card--quiet .spectrum-Card-preview`, `.spectrum-Card--gallery.is-drop-target .spectrum-Card-preview, .spectrum-Card--quiet.is-drop-target .spectrum-Card-preview`, `.spectrum-Card--horizontal .spectrum-Card-preview`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-divider-color": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-footer`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-border-color-hover": {
+ "description": "Defined in `.spectrum-Card`.
Used by `--mod-card-border-color`, `.spectrum-Card--horizontal:hover .spectrum-Card-preview`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-preview-background-color-hover": {
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card--gallery:hover .spectrum-Card-preview, .spectrum-Card--quiet:hover .spectrum-Card-preview`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--system-card-border-color`, `--system-card-preview-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--system-card-border-color-hover`, `--system-card-divider-color`, `--system-card-preview-background-color-hover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-background-layer-2-color": {
+ "value": "var(--spectrum-gray-75)",
+ "description": "Used by `--spectrum-card-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-spacing-400": {
+ "value": "24px",
+ "description": "Used by `--spectrum-card-body-spacing`, `--spectrum-card-title-padding-right`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `--spectrum-card-body-padding-block-start`, `--spectrum-card-content-margin-bottom`, `--spectrum-card-actions-spacing`, `--spectrum-card-horizontal-body-padding`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-card-content-margin-top`, `--spectrum-card-footer-padding-top`, `--spectrum-card-subtitle-padding-right`, `--mod-card-content-margin-top`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--spectrum-card-border-width`, `--spectrum-card-preview-border-width-selected`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-card-corner-radius`, `--spectrum-card-actions-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-card-title-font-family`, `--spectrum-card-body-font-family`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-size-xxs": {
+ "value": "var(--spectrum-font-size-100)",
+ "description": "Used by `--spectrum-card-title-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-sans-serif-font-weight": {
+ "value": "700",
+ "description": "Used by `--spectrum-card-title-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-sans-serif-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-card-title-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-line-height": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-card-title-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-color": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-card-title-font-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-body-size-s": {
+ "value": "var(--spectrum-font-size-100)",
+ "description": "Used by `--spectrum-card-body-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-sans-serif-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-card-body-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-sans-serif-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-card-body-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-line-height": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-card-body-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-card-body-font-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-100-rgb": {
+ "description": "Used by `--spectrum-card-actions-background-color-rgb`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-color": {
+ "value": "var(--spectrum-drop-shadow-color-100)",
+ "description": "Used by `--spectrum-card-actions-drop-shadow-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-x": {
+ "value": "0px",
+ "description": "Used by `--spectrum-card-actions-drop-shadow-x`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-y": {
+ "value": "1px",
+ "description": "Used by `--spectrum-card-actions-drop-shadow-y`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-blur": {
+ "value": "4px",
+ "description": "Used by `--spectrum-card-actions-drop-shadow-blur`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-card-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-card-focus-indicator-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-card-horizontal-preview-padding`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-blue-700": {
+ "value": "light-dark(rgb(93, 137, 255), rgb(52, 91, 248))",
+ "description": "Used by `--spectrum-card-border-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-background-base-color": {
+ "value": "var(--spectrum-gray-25)",
+ "description": "Used by `--mod-card-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `.spectrum-Card-quickActions`, `.spectrum-Card--gallery .spectrum-Card-preview, .spectrum-Card--quiet .spectrum-Card-preview`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-card-border-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-card-border-color`.",
+ "control": "color"
+ },
+ "system-card-border-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-card-border-color-hover`.",
+ "control": "color"
+ },
+ "system-card-divider-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-card-divider-color`.",
+ "control": "color"
+ },
+ "system-card-preview-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-card-preview-background-color`.",
+ "control": "color"
+ },
+ "system-card-preview-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-card-preview-background-color-hover`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/card/stories/card.stories.js b/components/card/stories/card.stories.js
index 2d8147cda37..ac8eb59f831 100644
--- a/components/card/stories/card.stories.js
+++ b/components/card/stories/card.stories.js
@@ -2,11 +2,13 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/acti
import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isFocused, isQuiet, isSelected } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { CardGroup } from "./card.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* A card represents a rectangular space to contain text or images. Cards are typically used to encapsulate units of a data set, such as a gallery of image/caption pairs.
*/
@@ -127,6 +129,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json
index 695a4df09f6..bbcf84e491f 100644
--- a/components/checkbox/dist/metadata.json
+++ b/components/checkbox/dist/metadata.json
@@ -10,6 +10,10 @@
".spectrum-Checkbox .spectrum-Checkbox-partialCheckmark",
".spectrum-Checkbox--emphasized .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
".spectrum-Checkbox--emphasized .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before",
+ ".spectrum-Checkbox--emphasized:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
+ ".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-box:before",
+ ".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
+ ".spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
".spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-box:before",
".spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
".spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before",
@@ -18,15 +22,11 @@
".spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-box:before",
".spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
".spectrum-Checkbox--emphasized.is-invalid .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before",
- ".spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before",
- ".spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
".spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-box:before",
".spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
".spectrum-Checkbox--emphasized.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
- ".spectrum-Checkbox--emphasized:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
- ".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-box:before",
- ".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
- ".spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
+ ".spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before",
+ ".spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
".spectrum-Checkbox--sizeL",
".spectrum-Checkbox--sizeM",
".spectrum-Checkbox--sizeS",
@@ -47,6 +47,12 @@
".spectrum-Checkbox-label:lang(ja)",
".spectrum-Checkbox-label:lang(ko)",
".spectrum-Checkbox-label:lang(zh)",
+ ".spectrum-Checkbox:active .spectrum-Checkbox-box:before",
+ ".spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
+ ".spectrum-Checkbox:active .spectrum-Checkbox-label",
+ ".spectrum-Checkbox:hover .spectrum-Checkbox-box:before",
+ ".spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
+ ".spectrum-Checkbox:hover .spectrum-Checkbox-label",
".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-checkmark",
".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark",
".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before",
@@ -59,177 +65,816 @@
".spectrum-Checkbox.is-invalid .spectrum-Checkbox-box:before",
".spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
".spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before",
+ ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before",
+ ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before",
".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before",
".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before",
".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-label",
- ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before",
- ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input",
".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before",
".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label",
".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before",
- ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label",
- ".spectrum-Checkbox:active .spectrum-Checkbox-box:before",
- ".spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
- ".spectrum-Checkbox:active .spectrum-Checkbox-label",
- ".spectrum-Checkbox:hover .spectrum-Checkbox-box:before",
- ".spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
- ".spectrum-Checkbox:hover .spectrum-Checkbox-label"
- ],
- "modifiers": [
- "--mod-checkbox-animation-duration",
- "--mod-checkbox-border-width",
- "--mod-checkbox-checkmark-color",
- "--mod-checkbox-content-color-default",
- "--mod-checkbox-content-color-disabled",
- "--mod-checkbox-content-color-down",
- "--mod-checkbox-content-color-focus",
- "--mod-checkbox-content-color-hover",
- "--mod-checkbox-control-color-default",
- "--mod-checkbox-control-color-disabled",
- "--mod-checkbox-control-color-down",
- "--mod-checkbox-control-color-focus",
- "--mod-checkbox-control-color-hover",
- "--mod-checkbox-control-corner-radius",
- "--mod-checkbox-control-invalid-color-down",
- "--mod-checkbox-control-selected-color-default",
- "--mod-checkbox-control-selected-color-down",
- "--mod-checkbox-control-selected-color-focus",
- "--mod-checkbox-control-selected-color-hover",
- "--mod-checkbox-control-size",
- "--mod-checkbox-emphasized-color-default",
- "--mod-checkbox-emphasized-color-down",
- "--mod-checkbox-emphasized-color-focus",
- "--mod-checkbox-emphasized-color-hover",
- "--mod-checkbox-focus-indicator-color",
- "--mod-checkbox-focus-indicator-gap",
- "--mod-checkbox-focus-indicator-thinkness",
- "--mod-checkbox-font-size",
- "--mod-checkbox-height",
- "--mod-checkbox-invalid-color-default",
- "--mod-checkbox-invalid-color-focus",
- "--mod-checkbox-invalid-color-hover",
- "--mod-checkbox-line-height",
- "--mod-checkbox-line-height-cjk",
- "--mod-checkbox-selected-border-width",
- "--mod-checkbox-spacing",
- "--mod-checkbox-text-to-control",
- "--mod-checkbox-top-to-text",
- "--mod-focus-indicator-thickness"
- ],
- "component": [
- "--spectrum-checkbox-animation-duration",
- "--spectrum-checkbox-border-width",
- "--spectrum-checkbox-checkmark-color",
- "--spectrum-checkbox-content-color-default",
- "--spectrum-checkbox-content-color-disabled",
- "--spectrum-checkbox-content-color-down",
- "--spectrum-checkbox-content-color-focus",
- "--spectrum-checkbox-content-color-hover",
- "--spectrum-checkbox-control-color-default",
- "--spectrum-checkbox-control-color-disabled",
- "--spectrum-checkbox-control-color-down",
- "--spectrum-checkbox-control-color-focus",
- "--spectrum-checkbox-control-color-hover",
- "--spectrum-checkbox-control-corner-radius",
- "--spectrum-checkbox-control-selected-color-default",
- "--spectrum-checkbox-control-selected-color-down",
- "--spectrum-checkbox-control-selected-color-focus",
- "--spectrum-checkbox-control-selected-color-hover",
- "--spectrum-checkbox-control-size",
- "--spectrum-checkbox-control-size-extra-large",
- "--spectrum-checkbox-control-size-large",
- "--spectrum-checkbox-control-size-medium",
- "--spectrum-checkbox-control-size-small",
- "--spectrum-checkbox-emphasized-color-default",
- "--spectrum-checkbox-emphasized-color-down",
- "--spectrum-checkbox-emphasized-color-focus",
- "--spectrum-checkbox-emphasized-color-hover",
- "--spectrum-checkbox-focus-indicator-color",
- "--spectrum-checkbox-focus-indicator-gap",
- "--spectrum-checkbox-focus-indicator-thickness",
- "--spectrum-checkbox-font-size",
- "--spectrum-checkbox-height",
- "--spectrum-checkbox-invalid-color-default",
- "--spectrum-checkbox-invalid-color-down",
- "--spectrum-checkbox-invalid-color-focus",
- "--spectrum-checkbox-invalid-color-hover",
- "--spectrum-checkbox-line-height",
- "--spectrum-checkbox-line-height-cjk",
- "--spectrum-checkbox-selected-border-width",
- "--spectrum-checkbox-spacing",
- "--spectrum-checkbox-text-to-control",
- "--spectrum-checkbox-top-to-text"
- ],
- "global": [
- "--spectrum-accent-color-1000",
- "--spectrum-accent-color-1100",
- "--spectrum-accent-color-900",
- "--spectrum-animation-duration-100",
- "--spectrum-border-width-200",
- "--spectrum-cjk-line-height-100",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-75",
- "--spectrum-component-top-to-text-100",
- "--spectrum-component-top-to-text-200",
- "--spectrum-component-top-to-text-300",
- "--spectrum-component-top-to-text-75",
- "--spectrum-disabled-content-color",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-300",
- "--spectrum-font-size-75",
- "--spectrum-gray-50",
- "--spectrum-gray-700",
- "--spectrum-gray-800",
- "--spectrum-line-height-100",
- "--spectrum-negative-color-1000",
- "--spectrum-negative-color-1100",
- "--spectrum-negative-color-900",
- "--spectrum-neutral-background-color-selected-default",
- "--spectrum-neutral-background-color-selected-down",
- "--spectrum-neutral-background-color-selected-hover",
- "--spectrum-neutral-background-color-selected-key-focus",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-down",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-neutral-content-color-key-focus",
- "--spectrum-text-to-control-100",
- "--spectrum-text-to-control-200",
- "--spectrum-text-to-control-300",
- "--spectrum-text-to-control-75"
- ],
- "system-theme": [
- "--system-checkbox-checkmark-color",
- "--system-checkbox-control-color-default",
- "--system-checkbox-control-color-down",
- "--system-checkbox-control-color-focus",
- "--system-checkbox-control-color-hover",
- "--system-checkbox-control-corner-radius"
+ ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label"
],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-checkbox-background-color-default",
- "--highcontrast-checkbox-color-default",
- "--highcontrast-checkbox-color-focus",
- "--highcontrast-checkbox-color-hover",
- "--highcontrast-checkbox-content-color-default",
- "--highcontrast-checkbox-content-color-down",
- "--highcontrast-checkbox-content-color-focus",
- "--highcontrast-checkbox-content-color-hover",
- "--highcontrast-checkbox-disabled-color-default",
- "--highcontrast-checkbox-focus-indicator-color",
- "--highcontrast-checkbox-highlight-color-default",
- "--highcontrast-checkbox-highlight-color-down",
- "--highcontrast-checkbox-highlight-color-focus",
- "--highcontrast-checkbox-highlight-color-hover"
- ]
+ "modifiers": {
+ "mod-checkbox-content-color-default": {
+ "value": "var(--spectrum-checkbox-content-color-default)",
+ "description": "Used by `.spectrum-Checkbox`, `.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label, .spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-height": {
+ "value": "var(--spectrum-checkbox-height)",
+ "description": "Used by `.spectrum-Checkbox`, `--spectrum-checkbox-spacing`.
Defaults to `var(--spectrum-checkbox-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-control-color-down": {
+ "value": "var(--spectrum-checkbox-control-color-down)",
+ "description": "Used by `.spectrum-Checkbox:active .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-control-selected-color-down": {
+ "value": "var(--spectrum-checkbox-control-selected-color-down)",
+ "description": "Used by `.spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-selected-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-content-color-down": {
+ "value": "var(--spectrum-checkbox-content-color-down)",
+ "description": "Used by `.spectrum-Checkbox:active .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-invalid-color-default": {
+ "value": "var(--spectrum-checkbox-invalid-color-default)",
+ "description": "Used by `.spectrum-Checkbox.is-invalid .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-invalid-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-invalid-color-hover": {
+ "value": "var(--spectrum-checkbox-invalid-color-hover)",
+ "description": "Used by `.spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-invalid-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-control-selected-color-default": {
+ "value": "var(--spectrum-checkbox-control-selected-color-default)",
+ "description": "Used by `.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-selected-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-checkmark-color": {
+ "value": "var(--spectrum-checkbox-checkmark-color)",
+ "description": "Used by `.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-checkmark, .spectrum-Checkbox .spectrum-Checkbox-partialCheckmark`, `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-checkmark-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-selected-border-width": {
+ "value": "var(--spectrum-checkbox-selected-border-width)",
+ "description": "Used by `.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-selected-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-control-selected-color-focus": {
+ "value": "var(--spectrum-checkbox-control-selected-color-focus)",
+ "description": "Used by `.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-selected-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-emphasized-color-default": {
+ "value": "var(--spectrum-checkbox-emphasized-color-default)",
+ "description": "Used by `.spectrum-Checkbox--emphasized .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-emphasized-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-emphasized-color-focus": {
+ "value": "var(--spectrum-checkbox-emphasized-color-focus)",
+ "description": "Used by `.spectrum-Checkbox--emphasized .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-emphasized-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-invalid-color-focus": {
+ "value": "var(--spectrum-checkbox-invalid-color-focus)",
+ "description": "Used by `.spectrum-Checkbox--emphasized.is-invalid .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-invalid-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-control-color-hover": {
+ "value": "var(--spectrum-checkbox-control-color-hover)",
+ "description": "Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-control-selected-color-hover": {
+ "value": "var(--spectrum-checkbox-control-selected-color-hover)",
+ "description": "Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-selected-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-content-color-hover": {
+ "value": "var(--spectrum-checkbox-content-color-hover)",
+ "description": "Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-label`, `.spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-emphasized-color-hover": {
+ "value": "var(--spectrum-checkbox-emphasized-color-hover)",
+ "description": "Used by `.spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-emphasized-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-emphasized-color-down": {
+ "value": "var(--spectrum-checkbox-emphasized-color-down)",
+ "description": "Used by `.spectrum-Checkbox--emphasized.is-indeterminate:active .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-emphasized-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-control-invalid-color-down": {
+ "value": "var(--spectrum-checkbox-invalid-color-down)",
+ "description": "Used by `.spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-invalid-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-control-color-focus": {
+ "value": "var(--spectrum-checkbox-control-color-focus)",
+ "description": "Used by `.spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-text-to-control": {
+ "value": "var(--spectrum-checkbox-text-to-control)",
+ "description": "Used by `.spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-text-to-control)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-top-to-text": {
+ "value": "var(--spectrum-checkbox-top-to-text)",
+ "description": "Used by `.spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-font-size": {
+ "value": "var(--spectrum-checkbox-font-size)",
+ "description": "Used by `.spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-animation-duration": {
+ "value": "var(--spectrum-checkbox-animation-duration)",
+ "description": "Used by `.spectrum-Checkbox-label`, `.spectrum-Checkbox-box:before`, `.spectrum-Checkbox-box:after`, `.spectrum-Checkbox .spectrum-Checkbox-checkmark, .spectrum-Checkbox .spectrum-Checkbox-partialCheckmark`.
Defaults to `var(--spectrum-checkbox-animation-duration)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-line-height": {
+ "value": "var(--spectrum-checkbox-line-height)",
+ "description": "Used by `.spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-line-height-cjk": {
+ "value": "var(--spectrum-checkbox-line-height-cjk)",
+ "description": "Used by `.spectrum-Checkbox-label:lang(ja), .spectrum-Checkbox-label:lang(ko), .spectrum-Checkbox-label:lang(zh)`.
Defaults to `var(--spectrum-checkbox-line-height-cjk)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-control-color-default": {
+ "value": "var(--spectrum-checkbox-control-color-default)",
+ "description": "Used by `.spectrum-Checkbox-input`, `.spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-focus-indicator-thinkness": {
+ "value": "var(--spectrum-checkbox-focus-indicator-thickness)",
+ "description": "Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`.
Defaults to `var(--spectrum-checkbox-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-focus-indicator-color": {
+ "value": "var(--spectrum-checkbox-focus-indicator-color)",
+ "description": "Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`.
Defaults to `var(--spectrum-checkbox-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-focus-indicator-gap": {
+ "value": "var(--spectrum-checkbox-focus-indicator-gap)",
+ "description": "Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`, `.spectrum-Checkbox-box:after`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`.
Defaults to `var(--spectrum-checkbox-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-content-color-focus": {
+ "value": "var(--spectrum-checkbox-content-color-focus)",
+ "description": "Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-content-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-control-size": {
+ "value": "var(--spectrum-checkbox-control-size)",
+ "description": "Used by `--spectrum-checkbox-spacing`, `.spectrum-Checkbox-box, .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-spacing": {
+ "value": "var(--spectrum-checkbox-spacing)",
+ "description": "Used by `.spectrum-Checkbox-box`.
Defaults to `var(--spectrum-checkbox-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-control-corner-radius": {
+ "value": "var(--spectrum-checkbox-control-corner-radius)",
+ "description": "Used by `.spectrum-Checkbox-box:before`, `.spectrum-Checkbox-box:after`.
Defaults to `var(--spectrum-checkbox-control-corner-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-border-width": {
+ "value": "var(--spectrum-checkbox-border-width)",
+ "description": "Used by `.spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-control-color-disabled": {
+ "value": "var(--spectrum-checkbox-control-color-disabled)",
+ "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-content-color-disabled": {
+ "value": "var(--spectrum-checkbox-content-color-disabled)",
+ "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label, .spectrum-Checkbox .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-content-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-checkbox-content-color-default": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox`, `.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label, .spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-content-color-hover": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-label`, `.spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-label`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-content-color-down": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:active .spectrum-Checkbox-label`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-content-color-focus": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-focus-indicator-color": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-content-color-disabled": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label, .spectrum-Checkbox .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-color-disabled": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-invalid-color-default": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-invalid .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-invalid-color-hover": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-invalid-color-down": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-invalid-color-focus": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox--emphasized.is-invalid .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-emphasized-color-default": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox--emphasized .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-emphasized-color-hover": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-emphasized-color-down": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox--emphasized.is-indeterminate:active .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-emphasized-color-focus": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox--emphasized .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-selected-color-default": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-selected-color-hover": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-selected-color-down": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-selected-color-focus": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-line-height": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-line-height-cjk": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-label:lang(ja), .spectrum-Checkbox-label:lang(ko), .spectrum-Checkbox-label:lang(zh)`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-focus-indicator-gap": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`, `.spectrum-Checkbox-box:after`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-focus-indicator-thickness": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-border-width": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-box:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-selected-border-width": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-size": {
+ "description": "Defined in `.spectrum-Checkbox, .spectrum-Checkbox--sizeM`, `.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox--sizeXL`.
Used by `--spectrum-checkbox-selected-border-width`, `--spectrum-checkbox-spacing`, `.spectrum-Checkbox-box, .spectrum-Checkbox-box:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-animation-duration": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-label`, `.spectrum-Checkbox-box:before`, `.spectrum-Checkbox-box:after`, `.spectrum-Checkbox .spectrum-Checkbox-checkmark, .spectrum-Checkbox .spectrum-Checkbox-partialCheckmark`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-font-size": {
+ "description": "Defined in `.spectrum-Checkbox, .spectrum-Checkbox--sizeM`, `.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox--sizeXL`.
Used by `.spectrum-Checkbox-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-height": {
+ "description": "Defined in `.spectrum-Checkbox, .spectrum-Checkbox--sizeM`, `.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox--sizeXL`.
Used by `.spectrum-Checkbox`, `--spectrum-checkbox-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-size-medium": {
+ "value": "14px",
+ "description": "Used by `--spectrum-checkbox-control-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-top-to-text": {
+ "description": "Defined in `.spectrum-Checkbox, .spectrum-Checkbox--sizeM`, `.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox--sizeXL`.
Used by `.spectrum-Checkbox-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-text-to-control": {
+ "description": "Defined in `.spectrum-Checkbox, .spectrum-Checkbox--sizeM`, `.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox--sizeXL`.
Used by `.spectrum-Checkbox-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-size-small": {
+ "value": "12px",
+ "description": "Used by `--spectrum-checkbox-control-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-size-large": {
+ "value": "16px",
+ "description": "Used by `--spectrum-checkbox-control-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-size-extra-large": {
+ "value": "18px",
+ "description": "Used by `--spectrum-checkbox-control-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-color-down": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:active .spectrum-Checkbox-box:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-checkmark-color": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-checkmark, .spectrum-Checkbox .spectrum-Checkbox-partialCheckmark`, `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-color-hover": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-box:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-color-focus": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-color-default": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-input`, `.spectrum-Checkbox-box:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-spacing": {
+ "description": "Defined in `.spectrum-Checkbox-box`.
Used by `.spectrum-Checkbox-box`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-corner-radius": {
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-box:before`, `.spectrum-Checkbox-box:after`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--system-checkbox-control-color-default`, `--spectrum-checkbox-content-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-700": {
+ "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+ "description": "Used by `--system-checkbox-control-color-hover`, `--system-checkbox-control-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-800": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Used by `--system-checkbox-control-color-down`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-50": {
+ "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))",
+ "description": "Used by `--system-checkbox-checkmark-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-checkbox-content-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-checkbox-content-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-checkbox-content-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-checkbox-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-checkbox-content-color-disabled`, `--spectrum-checkbox-control-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-color-900": {
+ "value": "var(--spectrum-red-900)",
+ "description": "Used by `--spectrum-checkbox-invalid-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-color-1000": {
+ "value": "var(--spectrum-red-1000)",
+ "description": "Used by `--spectrum-checkbox-invalid-color-hover`, `--spectrum-checkbox-invalid-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-color-1100": {
+ "value": "var(--spectrum-red-1100)",
+ "description": "Used by `--spectrum-checkbox-invalid-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-color-900": {
+ "value": "var(--spectrum-blue-900)",
+ "description": "Used by `--spectrum-checkbox-emphasized-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-color-1000": {
+ "value": "var(--spectrum-blue-1000)",
+ "description": "Used by `--spectrum-checkbox-emphasized-color-hover`, `--spectrum-checkbox-emphasized-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-color-1100": {
+ "value": "var(--spectrum-blue-1100)",
+ "description": "Used by `--spectrum-checkbox-emphasized-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-checkbox-control-selected-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-checkbox-control-selected-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-checkbox-control-selected-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-checkbox-control-selected-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-checkbox-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-checkbox-line-height-cjk`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-checkbox-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-checkbox-focus-indicator-thickness`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-checkbox-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `--spectrum-checkbox-animation-duration`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-checkbox-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-checkbox-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-checkbox-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-control-100": {
+ "value": "10px",
+ "description": "Used by `--spectrum-checkbox-text-to-control`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-checkbox-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-checkbox-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-checkbox-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-control-75": {
+ "value": "9px",
+ "description": "Used by `--spectrum-checkbox-text-to-control`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-checkbox-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-checkbox-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-checkbox-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-control-200": {
+ "value": "11px",
+ "description": "Used by `--spectrum-checkbox-text-to-control`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-checkbox-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-checkbox-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-300": {
+ "value": "12px",
+ "description": "Used by `--spectrum-checkbox-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-control-300": {
+ "value": "13px",
+ "description": "Used by `--spectrum-checkbox-text-to-control`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-checkbox-control-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-checkbox-control-color-default`.",
+ "control": "color"
+ },
+ "system-checkbox-control-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-checkbox-control-color-hover`.",
+ "control": "color"
+ },
+ "system-checkbox-control-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-checkbox-control-color-down`.",
+ "control": "color"
+ },
+ "system-checkbox-control-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-checkbox-control-color-focus`.",
+ "control": "color"
+ },
+ "system-checkbox-checkmark-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-checkbox-checkmark-color`.",
+ "control": "color"
+ },
+ "system-checkbox-control-corner-radius": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-checkbox-control-corner-radius`.",
+ "control": "text"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-checkbox-content-color-default": {
+ "value": "var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default))",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox`.
Defaults to `var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-checkbox-highlight-color-down": {
+ "value": "var(--mod-checkbox-control-selected-color-down, var(--spectrum-checkbox-control-selected-color-down))",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:active .spectrum-Checkbox-box:before`, `.spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--mod-checkbox-control-selected-color-down, var(--spectrum-checkbox-control-selected-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-checkbox-content-color-down": {
+ "value": "var(--mod-checkbox-content-color-down, var(--spectrum-checkbox-content-color-down))",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:active .spectrum-Checkbox-label`.
Defaults to `var(--mod-checkbox-content-color-down, var(--spectrum-checkbox-content-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-checkbox-color-default": {
+ "value": "var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default))",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-invalid .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label, .spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label`, `.spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized.is-invalid .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-box:before`.
Defaults to `var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-checkbox-color-hover": {
+ "value": "var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-checkbox-background-color-default": {
+ "value": "var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-checkmark, .spectrum-Checkbox .spectrum-Checkbox-partialCheckmark`, `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`.
Defaults to `var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-checkbox-highlight-color-default": {
+ "value": "var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized.is-indeterminate:active .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-checkbox-highlight-color-focus": {
+ "value": "var(--mod-checkbox-control-selected-color-focus, var(--spectrum-checkbox-control-selected-color-focus))",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--mod-checkbox-control-selected-color-focus, var(--spectrum-checkbox-control-selected-color-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-checkbox-highlight-color-hover": {
+ "value": "var(--mod-checkbox-emphasized-color-hover, var(--spectrum-checkbox-emphasized-color-hover))",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-box:before`, `.spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--mod-checkbox-emphasized-color-hover, var(--spectrum-checkbox-emphasized-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-checkbox-content-color-hover": {
+ "value": "var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover))",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-label`, `.spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-label`.
Defaults to `var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-checkbox-color-focus": {
+ "value": "var(--mod-checkbox-control-color-focus, var(--spectrum-checkbox-control-color-focus))",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`.
Defaults to `var(--mod-checkbox-control-color-focus, var(--spectrum-checkbox-control-color-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-checkbox-focus-indicator-color": {
+ "value": "var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`.
Defaults to `var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-checkbox-content-color-focus": {
+ "value": "var(--mod-checkbox-content-color-focus, var(--spectrum-checkbox-content-color-focus))",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label`.
Defaults to `var(--mod-checkbox-content-color-focus, var(--spectrum-checkbox-content-color-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-checkbox-disabled-color-default": {
+ "value": "var(--mod-checkbox-content-color-disabled, var(--spectrum-checkbox-content-color-disabled))",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label, .spectrum-Checkbox .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label`.
Defaults to `var(--mod-checkbox-content-color-disabled, var(--spectrum-checkbox-content-color-disabled))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/checkbox/stories/checkbox.stories.js b/components/checkbox/stories/checkbox.stories.js
index cbcad99494f..71646326dd3 100644
--- a/components/checkbox/stories/checkbox.stories.js
+++ b/components/checkbox/stories/checkbox.stories.js
@@ -1,11 +1,13 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isChecked, isDisabled, isEmphasized, isHovered, isIndeterminate, isInvalid, isReadOnly, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { CheckboxGroup } from "./checkbox.test.js";
import { AllVariantsCheckboxGroup, DocsCheckboxGroup, Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected.
*
@@ -59,6 +61,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/clearbutton/dist/metadata.json b/components/clearbutton/dist/metadata.json
index 7702979183f..e00d3a78648 100644
--- a/components/clearbutton/dist/metadata.json
+++ b/components/clearbutton/dist/metadata.json
@@ -7,12 +7,6 @@
".spectrum-ClearButton--staticWhite:focus-visible",
".spectrum-ClearButton-fill",
".spectrum-ClearButton-icon",
- ".spectrum-ClearButton.is-disabled",
- ".spectrum-ClearButton.spectrum-ClearButton--quiet",
- ".spectrum-ClearButton.spectrum-ClearButton--sizeL",
- ".spectrum-ClearButton.spectrum-ClearButton--sizeS",
- ".spectrum-ClearButton.spectrum-ClearButton--sizeXL",
- ".spectrum-ClearButton.spectrum-ClearButton--staticWhite",
".spectrum-ClearButton:disabled",
".spectrum-ClearButton:not(:disabled)",
".spectrum-ClearButton:not(:disabled):active",
@@ -22,61 +16,272 @@
".spectrum-ClearButton:not(:disabled):focus-within",
".spectrum-ClearButton:not(:disabled):focus-within .spectrum-ClearButton-fill",
".spectrum-ClearButton:not(:disabled):hover",
- ".spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill"
- ],
- "modifiers": [
- "--mod-clear-button-background-color",
- "--mod-clear-button-background-color-disabled",
- "--mod-clear-button-background-color-down",
- "--mod-clear-button-background-color-hover",
- "--mod-clear-button-background-color-key-focus",
- "--mod-clear-button-height",
- "--mod-clear-button-icon-color",
- "--mod-clear-button-icon-color-disabled",
- "--mod-clear-button-icon-color-down",
- "--mod-clear-button-icon-color-hover",
- "--mod-clear-button-icon-color-key-focus",
- "--mod-clear-button-padding",
- "--mod-clear-button-width"
- ],
- "component": [
- "--spectrum-clear-button-background-color",
- "--spectrum-clear-button-background-color-down",
- "--spectrum-clear-button-background-color-hover",
- "--spectrum-clear-button-background-color-key-focus",
- "--spectrum-clear-button-height",
- "--spectrum-clear-button-icon-color",
- "--spectrum-clear-button-icon-color-down",
- "--spectrum-clear-button-icon-color-hover",
- "--spectrum-clear-button-icon-color-key-focus",
- "--spectrum-clear-button-padding",
- "--spectrum-clear-button-width"
- ],
- "global": [
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-75",
- "--spectrum-disabled-content-color",
- "--spectrum-disabled-static-white-content-color",
- "--spectrum-in-field-button-edge-to-fill",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-down",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-neutral-content-color-key-focus",
- "--spectrum-transparent-white-400",
- "--spectrum-transparent-white-500",
- "--spectrum-white"
- ],
- "system-theme": [
- "--system-clear-button-background-color",
- "--system-clear-button-background-color-down",
- "--system-clear-button-background-color-hover",
- "--system-clear-button-background-color-key-focus",
- "--system-clear-button-static-white-background-color-down",
- "--system-clear-button-static-white-background-color-hover",
- "--system-clear-button-static-white-background-color-key-focus"
+ ".spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill",
+ ".spectrum-ClearButton.is-disabled",
+ ".spectrum-ClearButton.spectrum-ClearButton--quiet",
+ ".spectrum-ClearButton.spectrum-ClearButton--sizeL",
+ ".spectrum-ClearButton.spectrum-ClearButton--sizeS",
+ ".spectrum-ClearButton.spectrum-ClearButton--sizeXL",
+ ".spectrum-ClearButton.spectrum-ClearButton--staticWhite"
],
- "passthroughs": [],
- "high-contrast": ["--highcontrast-clear-button-icon-color-hover"]
+ "modifiers": {
+ "mod-clear-button-height": {
+ "value": "var(--spectrum-clear-button-height)",
+ "description": "Used by `.spectrum-ClearButton`.
Defaults to `var(--spectrum-clear-button-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-clear-button-width": {
+ "value": "var(--spectrum-clear-button-width)",
+ "description": "Used by `.spectrum-ClearButton`.
Defaults to `var(--spectrum-clear-button-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-clear-button-background-color": {
+ "value": "var(--spectrum-clear-button-background-color)",
+ "description": "Defined in `.spectrum-ClearButton.spectrum-ClearButton--quiet`, `.spectrum-ClearButton.spectrum-ClearButton--staticWhite`, `.spectrum-ClearButton.is-disabled, .spectrum-ClearButton:disabled`.
Used by `.spectrum-ClearButton`, `.spectrum-ClearButton-fill`.
Defaults to `var(--spectrum-clear-button-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-clear-button-padding": {
+ "value": "var(--spectrum-clear-button-padding)",
+ "description": "Used by `.spectrum-ClearButton`.
Defaults to `var(--spectrum-clear-button-padding)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-clear-button-icon-color": {
+ "value": "var(--spectrum-clear-button-icon-color)",
+ "description": "Defined in `.spectrum-ClearButton.spectrum-ClearButton--staticWhite`, `.spectrum-ClearButton.is-disabled, .spectrum-ClearButton:disabled`.
Used by `.spectrum-ClearButton`.
Defaults to `var(--spectrum-clear-button-icon-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-clear-button-background-color-hover": {
+ "value": "var(--spectrum-clear-button-background-color-hover)",
+ "description": "Defined in `.spectrum-ClearButton.spectrum-ClearButton--quiet`.
Used by `.spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill`.
Defaults to `var(--spectrum-clear-button-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-clear-button-background-color-down": {
+ "value": "var(--spectrum-clear-button-background-color-down)",
+ "description": "Defined in `.spectrum-ClearButton.spectrum-ClearButton--quiet`.
Used by `.spectrum-ClearButton:not(:disabled):active .spectrum-ClearButton-fill`.
Defaults to `var(--spectrum-clear-button-background-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-clear-button-background-color-key-focus": {
+ "value": "var(--spectrum-clear-button-background-color-key-focus)",
+ "description": "Defined in `.spectrum-ClearButton.spectrum-ClearButton--quiet`.
Used by `.spectrum-ClearButton:not(:disabled):focus-visible .spectrum-ClearButton-fill, .spectrum-ClearButton:not(:disabled):focus-within .spectrum-ClearButton-fill`.
Defaults to `var(--spectrum-clear-button-background-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-clear-button-icon-color-hover": {
+ "value": "var(--spectrum-clear-button-icon-color-hover)",
+ "description": "Defined in `.spectrum-ClearButton.spectrum-ClearButton--staticWhite`, `.spectrum-ClearButton.is-disabled, .spectrum-ClearButton:disabled`.
Used by `.spectrum-ClearButton:not(:disabled):hover`.
Defaults to `var(--spectrum-clear-button-icon-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-clear-button-icon-color-down": {
+ "value": "var(--spectrum-clear-button-icon-color-down)",
+ "description": "Defined in `.spectrum-ClearButton.spectrum-ClearButton--staticWhite`, `.spectrum-ClearButton.is-disabled, .spectrum-ClearButton:disabled`.
Used by `.spectrum-ClearButton:not(:disabled):active`.
Defaults to `var(--spectrum-clear-button-icon-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-clear-button-icon-color-key-focus": {
+ "value": "var(--spectrum-clear-button-icon-color-key-focus)",
+ "description": "Defined in `.spectrum-ClearButton.spectrum-ClearButton--staticWhite`.
Used by `.spectrum-ClearButton:not(:disabled):focus-visible, .spectrum-ClearButton:not(:disabled):focus-within`.
Defaults to `var(--spectrum-clear-button-icon-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-clear-button-icon-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Defined in `.spectrum-ClearButton.spectrum-ClearButton--staticWhite`.
Used by `--mod-clear-button-icon-color`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-clear-button-background-color-disabled": {
+ "description": "Used by `--mod-clear-button-background-color`.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-clear-button-height": {
+ "description": "Defined in `.spectrum-ClearButton`, `.spectrum-ClearButton.spectrum-ClearButton--sizeS`, `.spectrum-ClearButton.spectrum-ClearButton--sizeL`, `.spectrum-ClearButton.spectrum-ClearButton--sizeXL`.
Used by `.spectrum-ClearButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-clear-button-width": {
+ "description": "Defined in `.spectrum-ClearButton`, `.spectrum-ClearButton.spectrum-ClearButton--sizeS`, `.spectrum-ClearButton.spectrum-ClearButton--sizeL`, `.spectrum-ClearButton.spectrum-ClearButton--sizeXL`.
Used by `.spectrum-ClearButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-clear-button-padding": {
+ "description": "Defined in `.spectrum-ClearButton`.
Used by `.spectrum-ClearButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-clear-button-icon-color": {
+ "description": "Defined in `.spectrum-ClearButton`.
Used by `.spectrum-ClearButton`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-clear-button-icon-color-hover": {
+ "description": "Defined in `.spectrum-ClearButton`.
Used by `.spectrum-ClearButton:not(:disabled):hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-clear-button-icon-color-down": {
+ "description": "Defined in `.spectrum-ClearButton`.
Used by `.spectrum-ClearButton:not(:disabled):active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-clear-button-icon-color-key-focus": {
+ "description": "Defined in `.spectrum-ClearButton`.
Used by `.spectrum-ClearButton:not(:disabled):focus-visible, .spectrum-ClearButton:not(:disabled):focus-within`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-clear-button-background-color-hover": {
+ "description": "Defined in `.spectrum-ClearButton`, `.spectrum-ClearButton.spectrum-ClearButton--staticWhite`.
Used by `.spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-clear-button-background-color-down": {
+ "description": "Defined in `.spectrum-ClearButton`, `.spectrum-ClearButton.spectrum-ClearButton--staticWhite`.
Used by `.spectrum-ClearButton:not(:disabled):active .spectrum-ClearButton-fill`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-clear-button-background-color-key-focus": {
+ "description": "Defined in `.spectrum-ClearButton`, `.spectrum-ClearButton.spectrum-ClearButton--staticWhite`.
Used by `.spectrum-ClearButton:not(:disabled):focus-visible .spectrum-ClearButton-fill, .spectrum-ClearButton:not(:disabled):focus-within .spectrum-ClearButton-fill`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-clear-button-background-color": {
+ "description": "Defined in `.spectrum-ClearButton`.
Used by `.spectrum-ClearButton-fill`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-transparent-white-400": {
+ "value": "light-dark(rgba(255, 255, 255, 0.21), rgba(255, 255, 255, 0.21))",
+ "description": "Used by `--system-clear-button-static-white-background-color-hover`, `--system-clear-button-static-white-background-color-key-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-500": {
+ "value": "light-dark(rgba(255, 255, 255, 0.39), rgba(255, 255, 255, 0.39))",
+ "description": "Used by `--system-clear-button-static-white-background-color-down`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-clear-button-height`, `--spectrum-clear-button-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-in-field-button-edge-to-fill": {
+ "value": "0px",
+ "description": "Used by `--spectrum-clear-button-padding`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-clear-button-icon-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-clear-button-icon-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-clear-button-icon-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-clear-button-icon-color-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-clear-button-height`, `--spectrum-clear-button-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-clear-button-height`, `--spectrum-clear-button-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-clear-button-height`, `--spectrum-clear-button-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--mod-clear-button-icon-color`, `--mod-clear-button-icon-color-hover`, `--mod-clear-button-icon-color-down`, `--mod-clear-button-icon-color-key-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-white-content-color": {
+ "value": "var(--spectrum-transparent-white-400)",
+ "description": "Used by `--mod-clear-button-icon-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--mod-clear-button-icon-color`, `--mod-clear-button-icon-color-hover`, `--mod-clear-button-icon-color-down`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-clear-button-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-clear-button-background-color`.",
+ "control": "color"
+ },
+ "system-clear-button-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-clear-button-background-color-hover`.",
+ "control": "color"
+ },
+ "system-clear-button-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-clear-button-background-color-down`.",
+ "control": "color"
+ },
+ "system-clear-button-background-color-key-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-clear-button-background-color-key-focus`.",
+ "control": "color"
+ },
+ "system-clear-button-static-white-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-clear-button-background-color-hover`.",
+ "control": "color"
+ },
+ "system-clear-button-static-white-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-clear-button-background-color-down`.",
+ "control": "color"
+ },
+ "system-clear-button-static-white-background-color-key-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-clear-button-background-color-key-focus`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-clear-button-icon-color-hover": {
+ "value": "var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover))",
+ "description": "Defined in `.spectrum-ClearButton:not(:disabled)`.
Used by `.spectrum-ClearButton:not(:disabled):hover`.
Defaults to `var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/clearbutton/stories/clearbutton.stories.js b/components/clearbutton/stories/clearbutton.stories.js
index a8dd5359278..ce38ff8dfdd 100644
--- a/components/clearbutton/stories/clearbutton.stories.js
+++ b/components/clearbutton/stories/clearbutton.stories.js
@@ -1,11 +1,13 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isQuiet, size, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { ClearButtonGroup } from "./clearbutton.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The clear button component is an in-field button used in search and tags.
*
@@ -61,6 +63,7 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/closebutton/dist/metadata.json b/components/closebutton/dist/metadata.json
index 756fc3d7e62..f048595d914 100644
--- a/components/closebutton/dist/metadata.json
+++ b/components/closebutton/dist/metadata.json
@@ -3,9 +3,6 @@
"selectors": [
".spectrum-CloseButton",
".spectrum-CloseButton--staticBlack",
- ".spectrum-CloseButton--staticBlack.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon",
- ".spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled)",
- ".spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon",
".spectrum-CloseButton--staticBlack:disabled .spectrum-CloseButton-UIIcon",
".spectrum-CloseButton--staticBlack:not(:disabled)",
".spectrum-CloseButton--staticBlack:not(:disabled) .spectrum-CloseButton-UIIcon",
@@ -16,10 +13,10 @@
".spectrum-CloseButton--staticBlack:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon",
".spectrum-CloseButton--staticBlack:not(:disabled):hover",
".spectrum-CloseButton--staticBlack:not(:disabled):hover .spectrum-CloseButton-UIIcon",
+ ".spectrum-CloseButton--staticBlack.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon",
+ ".spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled)",
+ ".spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon",
".spectrum-CloseButton--staticWhite",
- ".spectrum-CloseButton--staticWhite.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon",
- ".spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled)",
- ".spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon",
".spectrum-CloseButton--staticWhite:disabled .spectrum-CloseButton-UIIcon",
".spectrum-CloseButton--staticWhite:not(:disabled)",
".spectrum-CloseButton--staticWhite:not(:disabled) .spectrum-CloseButton-UIIcon",
@@ -30,17 +27,10 @@
".spectrum-CloseButton--staticWhite:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon",
".spectrum-CloseButton--staticWhite:not(:disabled):hover",
".spectrum-CloseButton--staticWhite:not(:disabled):hover .spectrum-CloseButton-UIIcon",
+ ".spectrum-CloseButton--staticWhite.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon",
+ ".spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled)",
+ ".spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon",
".spectrum-CloseButton-UIIcon",
- ".spectrum-CloseButton.is-disabled",
- ".spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon",
- ".spectrum-CloseButton.is-keyboardFocused:not(:disabled)",
- ".spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon",
- ".spectrum-CloseButton.spectrum-CloseButton--sizeL",
- ".spectrum-CloseButton.spectrum-CloseButton--sizeM",
- ".spectrum-CloseButton.spectrum-CloseButton--sizeS",
- ".spectrum-CloseButton.spectrum-CloseButton--sizeXL",
- ".spectrum-CloseButton.spectrum-CloseButton--staticBlack",
- ".spectrum-CloseButton.spectrum-CloseButton--staticWhite",
".spectrum-CloseButton::-moz-focus-inner",
".spectrum-CloseButton:after",
".spectrum-CloseButton:disabled",
@@ -57,113 +47,537 @@
".spectrum-CloseButton:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon",
".spectrum-CloseButton:not(:disabled):hover",
".spectrum-CloseButton:not(:disabled):hover .spectrum-CloseButton-UIIcon",
+ ".spectrum-CloseButton.is-disabled",
+ ".spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon",
+ ".spectrum-CloseButton.is-keyboardFocused:not(:disabled)",
+ ".spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon",
+ ".spectrum-CloseButton.spectrum-CloseButton--sizeL",
+ ".spectrum-CloseButton.spectrum-CloseButton--sizeM",
+ ".spectrum-CloseButton.spectrum-CloseButton--sizeS",
+ ".spectrum-CloseButton.spectrum-CloseButton--sizeXL",
+ ".spectrum-CloseButton.spectrum-CloseButton--staticBlack",
+ ".spectrum-CloseButton.spectrum-CloseButton--staticWhite",
"a.spectrum-CloseButton"
],
- "modifiers": [
- "--mod-animation-duration-100",
- "--mod-closebutton-align-self",
- "--mod-closebutton-animation-duraction",
- "--mod-closebutton-animation-duration",
- "--mod-closebutton-background-color-default",
- "--mod-closebutton-background-color-down",
- "--mod-closebutton-background-color-focus",
- "--mod-closebutton-background-color-hover",
- "--mod-closebutton-border-radius",
- "--mod-closebutton-focus-indicator-color",
- "--mod-closebutton-focus-indicator-gap",
- "--mod-closebutton-focus-indicator-thickness",
- "--mod-closebutton-height",
- "--mod-closebutton-icon-color-default",
- "--mod-closebutton-icon-color-disabled",
- "--mod-closebutton-icon-color-down",
- "--mod-closebutton-icon-color-focus",
- "--mod-closebutton-icon-color-hover",
- "--mod-closebutton-margin-inline",
- "--mod-closebutton-margin-top",
- "--mod-closebutton-size",
- "--mod-closebutton-static-background-color-default",
- "--mod-closebutton-static-background-color-down",
- "--mod-closebutton-static-background-color-focus",
- "--mod-closebutton-static-background-color-hover",
- "--mod-closebutton-width",
- "--mod-line-height-100",
- "--mod-sans-font-family-stack"
- ],
- "component": [
- "--spectrum-closebutton-animation-duration",
- "--spectrum-closebutton-background-color-default",
- "--spectrum-closebutton-background-color-down",
- "--spectrum-closebutton-background-color-focus",
- "--spectrum-closebutton-background-color-hover",
- "--spectrum-closebutton-border-radius",
- "--spectrum-closebutton-focus-indicator-color",
- "--spectrum-closebutton-focus-indicator-gap",
- "--spectrum-closebutton-focus-indicator-thickness",
- "--spectrum-closebutton-icon-color-default",
- "--spectrum-closebutton-icon-color-disabled",
- "--spectrum-closebutton-icon-color-down",
- "--spectrum-closebutton-icon-color-focus",
- "--spectrum-closebutton-icon-color-hover",
- "--spectrum-closebutton-size",
- "--spectrum-closebutton-static-background-color-default",
- "--spectrum-closebutton-static-background-color-down",
- "--spectrum-closebutton-static-background-color-focus",
- "--spectrum-closebutton-static-background-color-hover"
- ],
- "global": [
- "--spectrum-animation-duration-100",
- "--spectrum-black",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-75",
- "--spectrum-disabled-content-color",
- "--spectrum-disabled-static-black-content-color",
- "--spectrum-disabled-static-white-content-color",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-gray-100",
- "--spectrum-gray-200",
- "--spectrum-line-height-100",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-down",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-neutral-content-color-key-focus",
- "--spectrum-sans-font-family-stack",
- "--spectrum-static-black-focus-indicator-color",
- "--spectrum-static-white-focus-indicator-color",
- "--spectrum-transparent-black-400",
- "--spectrum-transparent-black-500",
- "--spectrum-transparent-white-400",
- "--spectrum-transparent-white-500",
- "--spectrum-white"
- ],
- "system-theme": [
- "--system-close-button-background-color-default",
- "--system-close-button-background-color-down",
- "--system-close-button-background-color-focus",
- "--system-close-button-background-color-hover",
- "--system-close-button-static-black-static-background-color-down",
- "--system-close-button-static-black-static-background-color-focus",
- "--system-close-button-static-black-static-background-color-hover",
- "--system-close-button-static-white-static-background-color-down",
- "--system-close-button-static-white-static-background-color-focus",
- "--system-close-button-static-white-static-background-color-hover"
- ],
- "passthroughs": [
- "--mod-button-animation-duration",
- "--mod-button-font-family",
- "--mod-button-line-height"
- ],
- "high-contrast": [
- "--highcontrast-closebutton-background-color-default",
- "--highcontrast-closebutton-focus-indicator-color",
- "--highcontrast-closebutton-icon-color-default",
- "--highcontrast-closebutton-icon-color-disabled",
- "--highcontrast-closebutton-icon-color-down",
- "--highcontrast-closebutton-icon-color-focus",
- "--highcontrast-closebutton-icon-color-hover",
- "--highcontrast-closebutton-static-background-color-default"
- ]
+ "modifiers": {
+ "mod-sans-font-family-stack": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Used by `.spectrum-CloseButton`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-CloseButton`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-animation-duration-100": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Used by `.spectrum-CloseButton`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-closebutton-focus-indicator-gap": {
+ "value": "var(--spectrum-closebutton-focus-indicator-gap)",
+ "description": "Used by `.spectrum-CloseButton:focus-visible:after`, `.spectrum-CloseButton:after`.
Defaults to `var(--spectrum-closebutton-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-closebutton-animation-duration": {
+ "value": "var(--spectrum-closebutton-animation-duration)",
+ "description": "Used by `.spectrum-CloseButton:focus-visible:after`, `.spectrum-CloseButton`, `.spectrum-CloseButton:after`.
Defaults to `var(--spectrum-closebutton-animation-duration)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-closebutton-animation-duraction": {
+ "value": "var(--spectrum-closebutton-animation-duration)",
+ "description": "Used by `.spectrum-CloseButton:focus-visible:after`.
Defaults to `var(--spectrum-closebutton-animation-duration)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-closebutton-height": {
+ "value": "var(--spectrum-closebutton-size)",
+ "description": "Used by `.spectrum-CloseButton`.
Defaults to `var(--spectrum-closebutton-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-closebutton-width": {
+ "value": "var(--mod-closebutton-height, var(--spectrum-closebutton-size))",
+ "description": "Used by `.spectrum-CloseButton`.
Defaults to `var(--mod-closebutton-height, var(--spectrum-closebutton-size))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-closebutton-border-radius": {
+ "value": "var(--spectrum-closebutton-border-radius)",
+ "description": "Used by `.spectrum-CloseButton`.
Defaults to `var(--spectrum-closebutton-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-closebutton-margin-inline": {
+ "description": "Used by `.spectrum-CloseButton`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-closebutton-margin-top": {
+ "description": "Used by `.spectrum-CloseButton`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-closebutton-align-self": {
+ "description": "Used by `.spectrum-CloseButton`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-closebutton-size": {
+ "value": "var(--spectrum-closebutton-size)",
+ "description": "Used by `.spectrum-CloseButton:after`.
Defaults to `var(--spectrum-closebutton-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-closebutton-focus-indicator-thickness": {
+ "value": "var(--spectrum-closebutton-focus-indicator-thickness)",
+ "description": "Used by `.spectrum-CloseButton:focus-visible:after`.
Defaults to `var(--spectrum-closebutton-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-closebutton-focus-indicator-color": {
+ "value": "var(--spectrum-closebutton-focus-indicator-color)",
+ "description": "Used by `.spectrum-CloseButton:focus-visible:after`.
Defaults to `var(--spectrum-closebutton-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-closebutton-background-color-default": {
+ "value": "var(--spectrum-closebutton-background-color-default)",
+ "description": "Used by `.spectrum-CloseButton:not(:disabled)`, `.spectrum-CloseButton:disabled`.
Defaults to `var(--spectrum-closebutton-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-closebutton-background-color-down": {
+ "value": "var(--spectrum-closebutton-background-color-down)",
+ "description": "Used by `.spectrum-CloseButton:not(:disabled):active`.
Defaults to `var(--spectrum-closebutton-background-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-closebutton-icon-color-down": {
+ "value": "var(--spectrum-closebutton-icon-color-down)",
+ "description": "Used by `.spectrum-CloseButton:not(:disabled):active .spectrum-CloseButton-UIIcon`.
Defaults to `var(--spectrum-closebutton-icon-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-closebutton-background-color-focus": {
+ "value": "var(--spectrum-closebutton-background-color-focus)",
+ "description": "Used by `.spectrum-CloseButton.is-keyboardFocused:not(:disabled), .spectrum-CloseButton:not(:disabled):focus-visible`.
Defaults to `var(--spectrum-closebutton-background-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-closebutton-icon-color-focus": {
+ "value": "var(--spectrum-closebutton-icon-color-focus)",
+ "description": "Used by `.spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton:not(:disabled):focus .spectrum-CloseButton-UIIcon`.
Defaults to `var(--spectrum-closebutton-icon-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-closebutton-icon-color-default": {
+ "value": "var(--spectrum-closebutton-icon-color-default)",
+ "description": "Used by `.spectrum-CloseButton:not(:disabled) .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack:not(:disabled):hover .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):hover .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack:not(:disabled):active .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):active .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticBlack:not(:disabled):focus .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticBlack:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):focus .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled) .spectrum-CloseButton-UIIcon`.
Defaults to `var(--spectrum-closebutton-icon-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-closebutton-icon-color-disabled": {
+ "value": "var(--spectrum-closebutton-icon-color-disabled)",
+ "description": "Used by `.spectrum-CloseButton:disabled .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack:disabled .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:disabled .spectrum-CloseButton-UIIcon`.
Defaults to `var(--spectrum-closebutton-icon-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-closebutton-static-background-color-default": {
+ "value": "var(--spectrum-closebutton-static-background-color-default)",
+ "description": "Used by `.spectrum-CloseButton--staticBlack:not(:disabled), .spectrum-CloseButton--staticWhite:not(:disabled)`.
Defaults to `var(--spectrum-closebutton-static-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-closebutton-background-color-hover": {
+ "value": "var(--spectrum-closebutton-background-color-hover)",
+ "description": "Used by `.spectrum-CloseButton:not(:disabled):hover`.
Defaults to `var(--spectrum-closebutton-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-closebutton-icon-color-hover": {
+ "value": "var(--spectrum-closebutton-icon-color-hover)",
+ "description": "Used by `.spectrum-CloseButton:not(:disabled):hover .spectrum-CloseButton-UIIcon`.
Defaults to `var(--spectrum-closebutton-icon-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-closebutton-static-background-color-hover": {
+ "value": "var(--spectrum-closebutton-static-background-color-hover)",
+ "description": "Used by `.spectrum-CloseButton--staticBlack:not(:disabled):hover, .spectrum-CloseButton--staticWhite:not(:disabled):hover`.
Defaults to `var(--spectrum-closebutton-static-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-closebutton-static-background-color-down": {
+ "value": "var(--spectrum-closebutton-static-background-color-down)",
+ "description": "Used by `.spectrum-CloseButton--staticBlack:not(:disabled):active, .spectrum-CloseButton--staticWhite:not(:disabled):active`.
Defaults to `var(--spectrum-closebutton-static-background-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-closebutton-static-background-color-focus": {
+ "value": "var(--spectrum-closebutton-static-background-color-focus)",
+ "description": "Used by `.spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled), .spectrum-CloseButton--staticBlack:not(:disabled):focus-visible, .spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled), .spectrum-CloseButton--staticWhite:not(:disabled):focus-visible`.
Defaults to `var(--spectrum-closebutton-static-background-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-closebutton-focus-indicator-gap": {
+ "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:focus-visible:after`, `.spectrum-CloseButton:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-closebutton-animation-duration": {
+ "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:focus-visible:after`, `.spectrum-CloseButton`, `.spectrum-CloseButton:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-closebutton-icon-color-default": {
+ "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton:not(:disabled) .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack:not(:disabled):hover .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):hover .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack:not(:disabled):active .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):active .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticBlack:not(:disabled):focus .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticBlack:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):focus .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled) .spectrum-CloseButton-UIIcon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-icon-color-hover": {
+ "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:not(:disabled):hover .spectrum-CloseButton-UIIcon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-icon-color-down": {
+ "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:not(:disabled):active .spectrum-CloseButton-UIIcon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-icon-color-focus": {
+ "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton:not(:disabled):focus .spectrum-CloseButton-UIIcon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-icon-color-disabled": {
+ "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton:disabled .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack:disabled .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:disabled .spectrum-CloseButton-UIIcon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-focus-indicator-thickness": {
+ "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:focus-visible:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-closebutton-focus-indicator-color": {
+ "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton:focus-visible:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-size": {
+ "description": "Defined in `.spectrum-CloseButton.spectrum-CloseButton--sizeS`, `.spectrum-CloseButton, .spectrum-CloseButton.spectrum-CloseButton--sizeM`, `.spectrum-CloseButton.spectrum-CloseButton--sizeL`, `.spectrum-CloseButton.spectrum-CloseButton--sizeXL`.
Used by `.spectrum-CloseButton`, `.spectrum-CloseButton:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-closebutton-border-radius": {
+ "description": "Defined in `.spectrum-CloseButton.spectrum-CloseButton--sizeS`, `.spectrum-CloseButton, .spectrum-CloseButton.spectrum-CloseButton--sizeM`, `.spectrum-CloseButton.spectrum-CloseButton--sizeL`, `.spectrum-CloseButton.spectrum-CloseButton--sizeXL`.
Used by `.spectrum-CloseButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-closebutton-static-background-color-default": {
+ "description": "Defined in `.spectrum-CloseButton.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton--staticBlack:not(:disabled), .spectrum-CloseButton--staticWhite:not(:disabled)`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-background-color-default": {
+ "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:not(:disabled)`, `.spectrum-CloseButton:disabled`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-background-color-down": {
+ "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:not(:disabled):active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-background-color-focus": {
+ "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton.is-keyboardFocused:not(:disabled), .spectrum-CloseButton:not(:disabled):focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-background-color-hover": {
+ "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:not(:disabled):hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-static-background-color-hover": {
+ "description": "Defined in `.spectrum-CloseButton.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton--staticBlack:not(:disabled):hover, .spectrum-CloseButton--staticWhite:not(:disabled):hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-static-background-color-down": {
+ "description": "Defined in `.spectrum-CloseButton.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton--staticBlack:not(:disabled):active, .spectrum-CloseButton--staticWhite:not(:disabled):active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-static-background-color-focus": {
+ "description": "Defined in `.spectrum-CloseButton.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled), .spectrum-CloseButton--staticBlack:not(:disabled):focus-visible, .spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled), .spectrum-CloseButton--staticWhite:not(:disabled):focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--system-close-button-background-color-hover`, `--system-close-button-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--system-close-button-background-color-down`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-400": {
+ "value": "light-dark(rgba(255, 255, 255, 0.21), rgba(255, 255, 255, 0.21))",
+ "description": "Used by `--system-close-button-static-white-static-background-color-hover`, `--system-close-button-static-white-static-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-500": {
+ "value": "light-dark(rgba(255, 255, 255, 0.39), rgba(255, 255, 255, 0.39))",
+ "description": "Used by `--system-close-button-static-white-static-background-color-down`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-400": {
+ "value": "light-dark(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22))",
+ "description": "Used by `--system-close-button-static-black-static-background-color-hover`, `--system-close-button-static-black-static-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-500": {
+ "value": "light-dark(rgba(0, 0, 0, 0.44), rgba(0, 0, 0, 0.44))",
+ "description": "Used by `--system-close-button-static-black-static-background-color-down`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `.spectrum-CloseButton`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-CloseButton`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `.spectrum-CloseButton`, `--spectrum-closebutton-animation-duration`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-closebutton-icon-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-closebutton-icon-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-closebutton-icon-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-closebutton-icon-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-closebutton-icon-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-closebutton-focus-indicator-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-closebutton-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-closebutton-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-closebutton-size`, `--spectrum-closebutton-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-closebutton-size`, `--spectrum-closebutton-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-closebutton-size`, `--spectrum-closebutton-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-closebutton-size`, `--spectrum-closebutton-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--spectrum-closebutton-icon-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-white-content-color": {
+ "value": "var(--spectrum-transparent-white-400)",
+ "description": "Used by `--spectrum-closebutton-icon-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-static-white-focus-indicator-color": {
+ "value": "var(--spectrum-white)",
+ "description": "Used by `--spectrum-closebutton-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-black": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Used by `--spectrum-closebutton-icon-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-black-content-color": {
+ "value": "var(--spectrum-transparent-black-400)",
+ "description": "Used by `--spectrum-closebutton-icon-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-static-black-focus-indicator-color": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Used by `--spectrum-closebutton-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-close-button-background-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-closebutton-background-color-default`.",
+ "control": "color"
+ },
+ "system-close-button-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-closebutton-background-color-hover`.",
+ "control": "color"
+ },
+ "system-close-button-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-closebutton-background-color-down`.",
+ "control": "color"
+ },
+ "system-close-button-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-closebutton-background-color-focus`.",
+ "control": "color"
+ },
+ "system-close-button-static-white-static-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-closebutton-static-background-color-hover`.",
+ "control": "color"
+ },
+ "system-close-button-static-white-static-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-closebutton-static-background-color-down`.",
+ "control": "color"
+ },
+ "system-close-button-static-white-static-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-closebutton-static-background-color-focus`.",
+ "control": "color"
+ },
+ "system-close-button-static-black-static-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-closebutton-static-background-color-hover`.",
+ "control": "color"
+ },
+ "system-close-button-static-black-static-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-closebutton-static-background-color-down`.",
+ "control": "color"
+ },
+ "system-close-button-static-black-static-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-closebutton-static-background-color-focus`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {
+ "mod-button-font-family": {
+ "category": "Passthrough"
+ },
+ "mod-button-line-height": {
+ "category": "Passthrough"
+ },
+ "mod-button-animation-duration": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-closebutton-icon-color-disabled": {
+ "value": "var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled))",
+ "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticBlack`, `.spectrum-CloseButton--staticWhite`.
Used by `.spectrum-CloseButton:disabled .spectrum-CloseButton-UIIcon`.
Defaults to `var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-closebutton-icon-color-down": {
+ "value": "var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down))",
+ "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:not(:disabled):active .spectrum-CloseButton-UIIcon`.
Defaults to `var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-closebutton-icon-color-hover": {
+ "value": "var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover))",
+ "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:not(:disabled):hover .spectrum-CloseButton-UIIcon`.
Defaults to `var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-closebutton-icon-color-focus": {
+ "value": "var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))",
+ "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton:not(:disabled):focus .spectrum-CloseButton-UIIcon`.
Defaults to `var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-closebutton-background-color-default": {
+ "value": "var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default))",
+ "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:not(:disabled)`.
Defaults to `var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-closebutton-focus-indicator-color": {
+ "value": "var(--mod-closebutton-focus-indicator-color, var(--spectrum-closebutton-focus-indicator-color))",
+ "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:focus-visible:after`.
Defaults to `var(--mod-closebutton-focus-indicator-color, var(--spectrum-closebutton-focus-indicator-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-closebutton-static-background-color-default": {
+ "value": "var(--mod-closebutton-static-background-color-default, var(--spectrum-closebutton-static-background-color-default))",
+ "description": "Defined in `.spectrum-CloseButton--staticBlack`, `.spectrum-CloseButton--staticWhite`.
Used by `.spectrum-CloseButton--staticBlack:not(:disabled), .spectrum-CloseButton--staticWhite:not(:disabled)`.
Defaults to `var(--mod-closebutton-static-background-color-default, var(--spectrum-closebutton-static-background-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-closebutton-icon-color-default": {
+ "value": "var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))",
+ "description": "Defined in `.spectrum-CloseButton--staticBlack`, `.spectrum-CloseButton--staticWhite`.
Used by `.spectrum-CloseButton--staticBlack:not(:disabled):hover .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):hover .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack:not(:disabled):active .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):active .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticBlack:not(:disabled):focus .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticBlack:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):focus .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon`.
Defaults to `var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/closebutton/stories/closebutton.stories.js b/components/closebutton/stories/closebutton.stories.js
index f048e3e23b0..9c0c7dfdf2c 100644
--- a/components/closebutton/stories/closebutton.stories.js
+++ b/components/closebutton/stories/closebutton.stories.js
@@ -1,11 +1,13 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isFocused, isHovered, isKeyboardFocused, size, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { CloseButtonGroup } from "./closebutton.test.js";
import { CloseButtonExample, Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* Close button is used to close or dismiss its parent component. It is used inside of other components such
* as [toast](?path=/docs/components-toast--docs) and [action bar](?path=/docs/components-action-bar--docs).
@@ -52,6 +54,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
@@ -135,7 +138,6 @@ StaticBlack.parameters = {
chromatic: { disableSnapshot: true },
};
-
// ********* VRT ONLY ********* //
export const WithForcedColors = CloseButtonGroup.bind({});
WithForcedColors.tags = ["!autodocs", "!dev"];
diff --git a/components/closebutton/stories/template.js b/components/closebutton/stories/template.js
index 644ce705f62..d7d54e207e2 100644
--- a/components/closebutton/stories/template.js
+++ b/components/closebutton/stories/template.js
@@ -12,6 +12,7 @@ import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-CloseButton",
+ id = getRandomId("close-button"),
size = "m",
iconSize = "regular",
label = "Close",
@@ -21,7 +22,6 @@ export const Template = ({
isFocused = false,
isKeyboardFocused = false,
customClasses = [],
- id = getRandomId("closebutton"),
onclick,
} = {}, context = {}) => {
return html`
diff --git a/components/coachindicator/dist/metadata.json b/components/coachindicator/dist/metadata.json
index 9714f9f1ed1..8f902d4cd26 100644
--- a/components/coachindicator/dist/metadata.json
+++ b/components/coachindicator/dist/metadata.json
@@ -15,52 +15,227 @@
"50%",
"to"
],
- "modifiers": [
- "--mod-coach-animation-indicator-ring-center-delay-multiple",
- "--mod-coach-animation-indicator-ring-duration",
- "--mod-coach-animation-indicator-ring-outer-delay-multiple",
- "--mod-coach-indicator-animation-name",
- "--mod-coach-indicator-block-size",
- "--mod-coach-indicator-gap",
- "--mod-coach-indicator-inline-size",
- "--mod-coach-indicator-inner-animation-delay-multiple",
- "--mod-coach-indicator-left",
- "--mod-coach-indicator-min-block-size",
- "--mod-coach-indicator-min-inline-size",
- "--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple",
- "--mod-coach-indicator-quiet-ring-diameter",
- "--mod-coach-indicator-ring-block-size",
- "--mod-coach-indicator-ring-border-size",
- "--mod-coach-indicator-ring-dark-color",
- "--mod-coach-indicator-ring-default-color",
- "--mod-coach-indicator-ring-diameter",
- "--mod-coach-indicator-ring-inline-size",
- "--mod-coach-indicator-ring-light-color",
- "--mod-coach-indicator-top"
- ],
- "component": [
- "--spectrum-coach-indicator-animation-keyframe-scale-initial",
- "--spectrum-coach-indicator-animation-ring-inner-delay-multiple",
- "--spectrum-coach-indicator-block-size",
- "--spectrum-coach-indicator-gap",
- "--spectrum-coach-indicator-inline-size",
- "--spectrum-coach-indicator-min-block-size",
- "--spectrum-coach-indicator-min-inline-size",
- "--spectrum-coach-indicator-quiet-ring-diameter",
- "--spectrum-coach-indicator-ring-border-size",
- "--spectrum-coach-indicator-ring-default-color",
- "--spectrum-coach-indicator-ring-diameter",
- "--spectrum-coach-indicator-ring-diameter-size",
- "--spectrum-coach-indicator-sizing-multiple"
- ],
- "global": [
- "--spectrum-animation-duration-6000",
- "--spectrum-black",
- "--spectrum-border-width-200",
- "--spectrum-coach-animation-indicator-ring-duration",
- "--spectrum-white"
- ],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-coach-indicator-ring-diameter": {
+ "value": "var(--spectrum-coach-indicator-ring-diameter)",
+ "description": "Used by `--spectrum-coach-indicator-ring-diameter-size`.
Defaults to `var(--spectrum-coach-indicator-ring-diameter)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coach-indicator-inline-size": {
+ "value": "var(--spectrum-coach-indicator-min-inline-size)",
+ "description": "Used by `--spectrum-coach-indicator-inline-size`.
Defaults to `var(--spectrum-coach-indicator-min-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coach-indicator-block-size": {
+ "value": "var(--spectrum-coach-indicator-min-block-size)",
+ "description": "Used by `--spectrum-coach-indicator-block-size`.
Defaults to `var(--spectrum-coach-indicator-min-block-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coach-indicator-inner-animation-delay-multiple": {
+ "description": "Used by `--spectrum-coach-indicator-animation-ring-inner-delay-multiple`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coach-indicator-gap": {
+ "value": "var(--spectrum-coach-indicator-gap)",
+ "description": "Used by `.spectrum-CoachIndicator`.
Defaults to `var(--spectrum-coach-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coach-indicator-min-inline-size": {
+ "value": "var(--spectrum-coach-indicator-min-inline-size)",
+ "description": "Used by `.spectrum-CoachIndicator`.
Defaults to `var(--spectrum-coach-indicator-min-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coach-indicator-min-block-size": {
+ "value": "var(--spectrum-coach-indicator-min-block-size)",
+ "description": "Used by `.spectrum-CoachIndicator`.
Defaults to `var(--spectrum-coach-indicator-min-block-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coach-indicator-quiet-ring-diameter": {
+ "value": "var(--spectrum-coach-indicator-quiet-ring-diameter)",
+ "description": "Used by `--spectrum-coach-indicator-ring-diameter-size`.
Defaults to `var(--spectrum-coach-indicator-quiet-ring-diameter)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coach-indicator-quiet-animation-ring-inner-delay-multiple": {
+ "description": "Used by `--spectrum-coach-indicator-animation-ring-inner-delay-multiple`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coach-indicator-ring-light-color": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--spectrum-coach-indicator-ring-default-color`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-coach-indicator-ring-dark-color": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Used by `--spectrum-coach-indicator-ring-default-color`.
Defaults to `var(--spectrum-black)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-coach-indicator-ring-border-size": {
+ "value": "var(--spectrum-coach-indicator-ring-border-size)",
+ "description": "Used by `.spectrum-CoachIndicator-ring`.
Defaults to `var(--spectrum-coach-indicator-ring-border-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coach-indicator-ring-default-color": {
+ "value": "var(--spectrum-coach-indicator-ring-default-color)",
+ "description": "Used by `.spectrum-CoachIndicator-ring`.
Defaults to `var(--spectrum-coach-indicator-ring-default-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-coach-indicator-top": {
+ "value": "calc(var(--spectrum-coach-indicator-block-size) / 3 - var(--spectrum-coach-indicator-ring-border-size))",
+ "description": "Used by `.spectrum-CoachIndicator-ring`.
Defaults to `calc(var(--spectrum-coach-indicator-block-size) / 3 - var(--spectrum-coach-indicator-ring-border-size))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coach-indicator-left": {
+ "value": "calc(var(--spectrum-coach-indicator-inline-size) / 3 - var(--spectrum-coach-indicator-ring-border-size))",
+ "description": "Used by `.spectrum-CoachIndicator-ring`.
Defaults to `calc(var(--spectrum-coach-indicator-inline-size) / 3 - var(--spectrum-coach-indicator-ring-border-size))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coach-indicator-ring-inline-size": {
+ "value": "var(--spectrum-coach-indicator-ring-diameter-size)",
+ "description": "Used by `.spectrum-CoachIndicator-ring`.
Defaults to `var(--spectrum-coach-indicator-ring-diameter-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coach-indicator-ring-block-size": {
+ "value": "var(--spectrum-coach-indicator-ring-diameter-size)",
+ "description": "Used by `.spectrum-CoachIndicator-ring`.
Defaults to `var(--spectrum-coach-indicator-ring-diameter-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coach-indicator-animation-name": {
+ "description": "Used by `.spectrum-CoachIndicator-ring`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coach-animation-indicator-ring-duration": {
+ "value": "var(--spectrum-coach-animation-indicator-ring-duration)",
+ "description": "Used by `.spectrum-CoachIndicator-ring`, `.spectrum-CoachIndicator-ring:first-child`, `.spectrum-CoachIndicator-ring:nth-child(2)`, `.spectrum-CoachIndicator-ring:nth-child(3)`.
Defaults to `var(--spectrum-coach-animation-indicator-ring-duration)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coach-animation-indicator-ring-center-delay-multiple": {
+ "description": "Used by `.spectrum-CoachIndicator-ring:nth-child(2)`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coach-animation-indicator-ring-outer-delay-multiple": {
+ "description": "Used by `.spectrum-CoachIndicator-ring:nth-child(3)`.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-coach-indicator-ring-border-size": {
+ "description": "Defined in `.spectrum-CoachIndicator`.
Used by `.spectrum-CoachIndicator-ring`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-indicator-sizing-multiple": {
+ "description": "Defined in `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--quiet`.
Used by `--spectrum-coach-indicator-min-inline-size`, `--spectrum-coach-indicator-min-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-indicator-ring-diameter-size": {
+ "description": "Defined in `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--quiet`.
Used by `--spectrum-coach-indicator-min-inline-size`, `--spectrum-coach-indicator-min-block-size`, `.spectrum-CoachIndicator-ring`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-indicator-ring-diameter": {
+ "description": "Used by `--spectrum-coach-indicator-ring-diameter-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-indicator-min-inline-size": {
+ "description": "Defined in `.spectrum-CoachIndicator`.
Used by `--spectrum-coach-indicator-inline-size`, `.spectrum-CoachIndicator`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-indicator-min-block-size": {
+ "description": "Defined in `.spectrum-CoachIndicator`.
Used by `--spectrum-coach-indicator-block-size`, `.spectrum-CoachIndicator`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-indicator-inline-size": {
+ "description": "Defined in `.spectrum-CoachIndicator`.
Used by `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator-ring`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-indicator-block-size": {
+ "description": "Defined in `.spectrum-CoachIndicator`.
Used by `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator-ring`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-indicator-animation-keyframe-scale-initial": {
+ "description": "Defined in `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--quiet`.
Used by `0%`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-indicator-animation-ring-inner-delay-multiple": {
+ "description": "Defined in `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--quiet`.
Used by `.spectrum-CoachIndicator-ring:first-child`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-indicator-gap": {
+ "description": "Used by `.spectrum-CoachIndicator`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-indicator-quiet-ring-diameter": {
+ "description": "Used by `--spectrum-coach-indicator-ring-diameter-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-indicator-ring-default-color": {
+ "description": "Defined in `.spectrum-CoachIndicator.spectrum-CoachIndicator--light`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--dark`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--staticBlack`.
Used by `.spectrum-CoachIndicator-ring`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-coach-indicator-ring-border-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-coach-animation-indicator-ring-duration": {
+ "description": "Defined in `.spectrum-CoachIndicator`.
Used by `.spectrum-CoachIndicator-ring`, `.spectrum-CoachIndicator-ring:first-child`, `.spectrum-CoachIndicator-ring:nth-child(2)`, `.spectrum-CoachIndicator-ring:nth-child(3)`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-6000": {
+ "description": "Used by `--spectrum-coach-animation-indicator-ring-duration`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--spectrum-coach-indicator-ring-default-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-black": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Used by `--spectrum-coach-indicator-ring-default-color`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/coachindicator/stories/coachindicator.stories.js b/components/coachindicator/stories/coachindicator.stories.js
index f206b3bef9a..1498c7d5640 100644
--- a/components/coachindicator/stories/coachindicator.stories.js
+++ b/components/coachindicator/stories/coachindicator.stories.js
@@ -1,10 +1,12 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isQuiet, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { CoachIndicatorGroup } from "./coachindicator.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The coach indicator component can be used to bring added attention to specific parts of a page.
*
@@ -30,6 +32,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/coachmark/dist/metadata.json b/components/coachmark/dist/metadata.json
index 8bc036d5fca..8579241b166 100644
--- a/components/coachmark/dist/metadata.json
+++ b/components/coachmark/dist/metadata.json
@@ -15,80 +15,385 @@
".spectrum-CoachMark-step",
".spectrum-CoachMark-title"
],
- "modifiers": [
- "--mod-coachmark-body-to-footer",
- "--mod-coachmark-border-radius",
- "--mod-coachmark-border-size",
- "--mod-coachmark-content-font-color",
- "--mod-coachmark-content-font-family",
- "--mod-coachmark-content-font-size",
- "--mod-coachmark-content-font-style",
- "--mod-coachmark-content-font-weight",
- "--mod-coachmark-content-line-height",
- "--mod-coachmark-header-to-body",
- "--mod-coachmark-heading-to-action-button",
- "--mod-coachmark-max-width",
- "--mod-coachmark-media-height",
- "--mod-coachmark-media-min-height",
- "--mod-coachmark-min-width",
- "--mod-coachmark-padding",
- "--mod-coachmark-step-color",
- "--mod-coachmark-step-font-size",
- "--mod-coachmark-step-font-style",
- "--mod-coachmark-step-text-font-weight",
- "--mod-coachmark-step-text-line-height",
- "--mod-coachmark-step-to-bottom",
- "--mod-coachmark-title-color",
- "--mod-coachmark-title-font-family",
- "--mod-coachmark-title-font-size",
- "--mod-coachmark-title-font-style",
- "--mod-coachmark-title-text-font-weight",
- "--mod-coachmark-title-text-line-height",
- "--mod-coachmark-width"
- ],
- "component": [
- "--spectrum-coach-mark-body-size",
- "--spectrum-coach-mark-edge-to-content",
- "--spectrum-coach-mark-maximum-width",
- "--spectrum-coach-mark-media-height",
- "--spectrum-coach-mark-media-minimum-height",
- "--spectrum-coach-mark-minimum-width",
- "--spectrum-coach-mark-pagination-body-size",
- "--spectrum-coach-mark-pagination-color",
- "--spectrum-coach-mark-pagination-text-to-bottom-edge",
- "--spectrum-coach-mark-title-size",
- "--spectrum-coach-mark-width",
- "--spectrum-coachmark-border-radius",
- "--spectrum-coachmark-border-size",
- "--spectrum-coachmark-buttongroup-display",
- "--spectrum-coachmark-buttongroup-mobile-display",
- "--spectrum-coachmark-menu-display",
- "--spectrum-coachmark-menu-mobile-display"
- ],
- "global": [
- "--spectrum-body-color",
- "--spectrum-body-line-height",
- "--spectrum-body-sans-serif-font-style",
- "--spectrum-body-sans-serif-font-weight",
- "--spectrum-border-width-100",
- "--spectrum-corner-radius-100",
- "--spectrum-heading-color",
- "--spectrum-heading-line-height",
- "--spectrum-heading-sans-serif-font-weight",
- "--spectrum-heading-serif-font-style",
- "--spectrum-sans-serif-font",
- "--spectrum-spacing-100",
- "--spectrum-spacing-200",
- "--spectrum-spacing-300"
- ],
- "system-theme": [],
- "passthroughs": [
- "--mod-button-edge-to-visual-only",
- "--mod-buttongroup-justify-content",
- "--mod-buttongroup-spacing",
- "--mod-popover-border-width",
- "--mod-popover-content-area-spacing-vertical",
- "--mod-popover-corner-radius"
- ],
- "high-contrast": []
+ "modifiers": {
+ "mod-coachmark-border-size": {
+ "value": "var(--mod-popover-border-width)",
+ "description": "Used by `--spectrum-coachmark-border-size`.
Defaults to `var(--mod-popover-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-border-radius": {
+ "value": "var(--mod-popover-corner-radius)",
+ "description": "Used by `--spectrum-coachmark-border-radius`.
Defaults to `var(--mod-popover-corner-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-min-width": {
+ "value": "296px",
+ "description": "Used by `.spectrum-CoachMark`.
Defaults to `var(--spectrum-coach-mark-minimum-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-max-width": {
+ "value": "380px",
+ "description": "Used by `.spectrum-CoachMark`.
Defaults to `var(--spectrum-coach-mark-maximum-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-width": {
+ "value": "296px",
+ "description": "Used by `.spectrum-CoachMark`, `.spectrum-CoachMark-image-wrapper`.
Defaults to `var(--spectrum-coach-mark-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-media-height": {
+ "value": "222px",
+ "description": "Used by `.spectrum-CoachMark-image-wrapper`.
Defaults to `var(--spectrum-coach-mark-media-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-media-min-height": {
+ "value": "166px",
+ "description": "Used by `.spectrum-CoachMark-image-wrapper`.
Defaults to `var(--spectrum-coach-mark-media-minimum-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-padding": {
+ "value": "24px",
+ "description": "Used by `.spectrum-CoachMark-content, .spectrum-CoachMark-footer, .spectrum-CoachMark-header`, `.spectrum-CoachMark-header`, `.spectrum-CoachMark-footer`, `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-coach-mark-edge-to-content)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-header-to-body": {
+ "value": "12px",
+ "description": "Used by `.spectrum-CoachMark-header`.
Defaults to `var(--spectrum-spacing-200)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-title-color": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-heading-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-coachmark-title-font-size": {
+ "value": "var(--spectrum-heading-size-xxs)",
+ "description": "Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-coach-mark-title-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-title-text-font-weight": {
+ "value": "700",
+ "description": "Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-heading-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-title-font-family": {
+ "value": "var(--spectrum-sans-serif-font)",
+ "description": "Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-sans-serif-font)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-title-font-style": {
+ "value": "normal",
+ "description": "Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-heading-serif-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-title-text-line-height": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-heading-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-heading-to-action-button": {
+ "value": "16px",
+ "description": "Used by `.spectrum-CoachMark-action-menu`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-body-to-footer": {
+ "value": "16px",
+ "description": "Used by `.spectrum-CoachMark-content`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-content-font-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `.spectrum-CoachMark-content`.
Defaults to `var(--spectrum-body-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-coachmark-content-font-size": {
+ "value": "var(--spectrum-body-size-xs)",
+ "description": "Used by `.spectrum-CoachMark-content`.
Defaults to `var(--spectrum-coach-mark-body-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-content-font-weight": {
+ "value": "400",
+ "description": "Used by `.spectrum-CoachMark-content`.
Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-content-font-family": {
+ "value": "var(--spectrum-sans-serif-font)",
+ "description": "Used by `.spectrum-CoachMark-content`.
Defaults to `var(--spectrum-sans-serif-font)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-content-font-style": {
+ "value": "normal",
+ "description": "Used by `.spectrum-CoachMark-content`.
Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-content-line-height": {
+ "value": "1.5",
+ "description": "Used by `.spectrum-CoachMark-content`.
Defaults to `var(--spectrum-body-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-step-to-bottom": {
+ "value": "33px",
+ "description": "Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-coach-mark-pagination-text-to-bottom-edge)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-step-color": {
+ "value": "var(--spectrum-gray-600)",
+ "description": "Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-coach-mark-pagination-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-coachmark-step-font-size": {
+ "value": "var(--spectrum-body-size-xs)",
+ "description": "Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-coach-mark-pagination-body-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-step-text-font-weight": {
+ "value": "400",
+ "description": "Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-step-font-style": {
+ "value": "normal",
+ "description": "Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-step-text-line-height": {
+ "value": "1.5",
+ "description": "Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-body-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-coachmark-border-size": {
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-image-wrapper`, `.spectrum-CoachMark-image`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-border-radius": {
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-image`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-minimum-width": {
+ "value": "296px",
+ "description": "Used by `.spectrum-CoachMark`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-maximum-width": {
+ "value": "380px",
+ "description": "Used by `.spectrum-CoachMark`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-width": {
+ "value": "296px",
+ "description": "Used by `.spectrum-CoachMark`, `.spectrum-CoachMark-image-wrapper`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-media-height": {
+ "value": "222px",
+ "description": "Used by `.spectrum-CoachMark-image-wrapper`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-media-minimum-height": {
+ "value": "166px",
+ "description": "Used by `.spectrum-CoachMark-image-wrapper`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-edge-to-content": {
+ "value": "24px",
+ "description": "Used by `.spectrum-CoachMark-content, .spectrum-CoachMark-footer, .spectrum-CoachMark-header`, `.spectrum-CoachMark-header`, `.spectrum-CoachMark-footer`, `.spectrum-CoachMark-step`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-title-size": {
+ "value": "var(--spectrum-heading-size-xxs)",
+ "description": "Used by `.spectrum-CoachMark-title`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-menu-display": {
+ "description": "Defined in `.spectrum-CoachMark-menu--mobile`.
Used by `.spectrum-CoachMark-menu`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-menu-mobile-display": {
+ "description": "Used by `--spectrum-coachmark-menu-display`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-body-size": {
+ "value": "var(--spectrum-body-size-xs)",
+ "description": "Used by `.spectrum-CoachMark-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-pagination-text-to-bottom-edge": {
+ "value": "33px",
+ "description": "Used by `.spectrum-CoachMark-step`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-pagination-color": {
+ "value": "var(--spectrum-gray-600)",
+ "description": "Used by `.spectrum-CoachMark-step`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-pagination-body-size": {
+ "value": "var(--spectrum-body-size-xs)",
+ "description": "Used by `.spectrum-CoachMark-step`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-buttongroup-display": {
+ "description": "Defined in `.spectrum-CoachMark-buttongroup--mobile`.
Used by `.spectrum-CoachMark-buttongroup`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-buttongroup-mobile-display": {
+ "description": "Used by `--spectrum-coachmark-buttongroup-display`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--mod-popover-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--mod-popover-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-200": {
+ "value": "12px",
+ "description": "Used by `.spectrum-CoachMark-header`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-color": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `.spectrum-CoachMark-title`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-heading-sans-serif-font-weight": {
+ "value": "700",
+ "description": "Used by `.spectrum-CoachMark-title`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-sans-serif-font": {
+ "description": "Used by `.spectrum-CoachMark-title`, `.spectrum-CoachMark-content`, `.spectrum-CoachMark-step`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-serif-font-style": {
+ "value": "normal",
+ "description": "Used by `.spectrum-CoachMark-title`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-line-height": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-CoachMark-title`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `.spectrum-CoachMark-action-menu`, `.spectrum-CoachMark-content`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `.spectrum-CoachMark-content`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-body-sans-serif-font-weight": {
+ "value": "400",
+ "description": "Used by `.spectrum-CoachMark-content`, `.spectrum-CoachMark-step`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-sans-serif-font-style": {
+ "value": "normal",
+ "description": "Used by `.spectrum-CoachMark-content`, `.spectrum-CoachMark-step`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-line-height": {
+ "value": "1.5",
+ "description": "Used by `.spectrum-CoachMark-content`, `.spectrum-CoachMark-step`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-100": {
+ "value": "8px",
+ "description": "Used by `--mod-buttongroup-spacing`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {
+ "mod-popover-border-width": {
+ "category": "Passthrough"
+ },
+ "mod-popover-corner-radius": {
+ "category": "Passthrough"
+ },
+ "mod-buttongroup-justify-content": {
+ "category": "Passthrough"
+ },
+ "mod-popover-content-area-spacing-vertical": {
+ "category": "Passthrough"
+ },
+ "mod-button-edge-to-visual-only": {
+ "category": "Passthrough"
+ },
+ "mod-buttongroup-spacing": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {}
}
diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js
index e13b70fce24..b061b8dac58 100644
--- a/components/coachmark/stories/coachmark.stories.js
+++ b/components/coachmark/stories/coachmark.stories.js
@@ -1,11 +1,13 @@
import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
import { default as Menu } from "@spectrum-css/menu/stories/menu.stories.js";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { CoachMarkGroup } from "./coachmark.test.js";
import { CoachmarkMenuStatesTemplate, Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The coach mark component can be used to bring added attention to specific parts of a page, like during a tour. It is a separate component from [the coach indicator](/docs/components-coach-indicator--docs) and similar to [a popover](/docs/components-purpose--docs).
*/
@@ -60,6 +62,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
docs: {
story: {
height: "300px",
@@ -69,6 +72,7 @@ export default {
};
export const Default = CoachMarkGroup.bind({});
+Default.title = "Standard";
Default.tags = ["!autodocs"];
Default.args = {};
diff --git a/components/colorarea/dist/metadata.json b/components/colorarea/dist/metadata.json
index ff86d1c0045..3ae0a3279c8 100644
--- a/components/colorarea/dist/metadata.json
+++ b/components/colorarea/dist/metadata.json
@@ -12,31 +12,123 @@
".spectrum-ColorHandle-color",
"[dir=\"rtl\"] .spectrum-ColorArea-handle"
],
- "modifiers": [
- "--mod-colorarea-border-color",
- "--mod-colorarea-border-radius",
- "--mod-colorarea-border-width",
- "--mod-colorarea-disabled-background-color",
- "--mod-colorarea-height",
- "--mod-colorarea-min-height",
- "--mod-colorarea-min-width",
- "--mod-colorarea-width"
- ],
- "component": [
- "--spectrum-color-area-border-rounding",
- "--spectrum-color-area-border-width",
- "--spectrum-color-area-height",
- "--spectrum-color-area-minimum-height",
- "--spectrum-color-area-minimum-width",
- "--spectrum-color-area-width",
- "--spectrum-colorarea-border-color"
- ],
- "global": ["--spectrum-disabled-background-color"],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-colorarea-border-color",
- "--highcontrast-colorarea-border-color-disabled",
- "--highcontrast-colorarea-fill-color-disabled"
- ]
+ "modifiers": {
+ "mod-colorarea-min-width": {
+ "value": "64px",
+ "description": "Used by `.spectrum-ColorArea`.
Defaults to `var(--spectrum-color-area-minimum-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorarea-min-height": {
+ "value": "64px",
+ "description": "Used by `.spectrum-ColorArea`.
Defaults to `var(--spectrum-color-area-minimum-height)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorarea-width": {
+ "value": "192px",
+ "description": "Used by `.spectrum-ColorArea`, `.spectrum-ColorArea-handle`.
Defaults to `var(--spectrum-color-area-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorarea-height": {
+ "value": "192px",
+ "description": "Used by `.spectrum-ColorArea`.
Defaults to `var(--spectrum-color-area-height)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorarea-border-radius": {
+ "value": "7px",
+ "description": "Used by `.spectrum-ColorArea`, `.spectrum-ColorArea-gradient`.
Defaults to `var(--spectrum-color-area-border-rounding)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorarea-border-width": {
+ "value": "1px",
+ "description": "Used by `.spectrum-ColorArea`, `.spectrum-ColorArea.is-disabled`.
Defaults to `var(--spectrum-color-area-border-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorarea-border-color": {
+ "value": "var(--spectrum-colorarea-border-color)",
+ "description": "Used by `.spectrum-ColorArea`.
Defaults to `var(--spectrum-colorarea-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorarea-disabled-background-color": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `.spectrum-ColorArea.is-disabled`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-colorarea-border-color": {
+ "description": "Defined in `.spectrum-ColorArea`.
Used by `.spectrum-ColorArea`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-area-minimum-width": {
+ "value": "64px",
+ "description": "Used by `.spectrum-ColorArea`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-area-minimum-height": {
+ "value": "64px",
+ "description": "Used by `.spectrum-ColorArea`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-area-width": {
+ "value": "192px",
+ "description": "Used by `.spectrum-ColorArea`, `.spectrum-ColorArea-handle`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-area-height": {
+ "value": "192px",
+ "description": "Used by `.spectrum-ColorArea`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-area-border-rounding": {
+ "value": "7px",
+ "description": "Used by `.spectrum-ColorArea`, `.spectrum-ColorArea-gradient`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-area-border-width": {
+ "value": "1px",
+ "description": "Used by `.spectrum-ColorArea`, `.spectrum-ColorArea.is-disabled`, `.spectrum-ColorArea-handle`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-disabled-background-color": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `.spectrum-ColorArea.is-disabled`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-colorarea-border-color-disabled": {
+ "description": "Defined in `.spectrum-ColorArea`.
Used by `.spectrum-ColorArea.is-disabled`.",
+ "control": "color"
+ },
+ "highcontrast-colorarea-border-color": {
+ "value": "var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color))",
+ "description": "Defined in `.spectrum-ColorArea`.
Used by `.spectrum-ColorArea`.
Defaults to `var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-colorarea-fill-color-disabled": {
+ "value": "var(--mod-colorarea-disabled-background-color, var(--spectrum-disabled-background-color))",
+ "description": "Defined in `.spectrum-ColorArea`.
Used by `.spectrum-ColorArea.is-disabled`.
Defaults to `var(--mod-colorarea-disabled-background-color, var(--spectrum-disabled-background-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/colorarea/stories/colorarea.stories.js b/components/colorarea/stories/colorarea.stories.js
index ec418649f05..2128f1d1408 100644
--- a/components/colorarea/stories/colorarea.stories.js
+++ b/components/colorarea/stories/colorarea.stories.js
@@ -1,10 +1,12 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isFocused } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { ColorAreaGroup } from "./colorarea.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The color area component allows users to visually select two properties of a color simultaneously. It's commonly used together with a [color slider](/docs/components-color-slider--docs) or [color wheel](/docs/components-color-wheel--docs).
*
@@ -49,6 +51,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/colorhandle/dist/metadata.json b/components/colorhandle/dist/metadata.json
index 4d8589ac1c1..890cbbb3bc1 100644
--- a/components/colorhandle/dist/metadata.json
+++ b/components/colorhandle/dist/metadata.json
@@ -3,53 +3,212 @@
"selectors": [
".spectrum-ColorHandle",
".spectrum-ColorHandle-inner",
+ ".spectrum-ColorHandle:after",
+ ".spectrum-ColorHandle:focus-visible",
".spectrum-ColorHandle.is-disabled",
".spectrum-ColorHandle.is-disabled .spectrum-ColorHandle-inner",
- ".spectrum-ColorHandle.is-focused",
- ".spectrum-ColorHandle:after",
- ".spectrum-ColorHandle:focus-visible"
- ],
- "modifiers": [
- "--mod-colorhandle-animation-duration",
- "--mod-colorhandle-animation-easing",
- "--mod-colorhandle-border-color",
- "--mod-colorhandle-border-color-disabled",
- "--mod-colorhandle-border-width",
- "--mod-colorhandle-fill-color-disabled",
- "--mod-colorhandle-focused-size",
- "--mod-colorhandle-hitarea-border-radius",
- "--mod-colorhandle-hitarea-size",
- "--mod-colorhandle-inner-border-color",
- "--mod-colorhandle-inner-border-width",
- "--mod-colorhandle-outer-border-color",
- "--mod-colorhandle-outer-border-width",
- "--mod-colorhandle-size"
- ],
- "component": [
- "--spectrum-color-handle-border-width",
- "--spectrum-color-handle-inner-border-opacity",
- "--spectrum-color-handle-inner-border-width",
- "--spectrum-color-handle-outer-border-opacity",
- "--spectrum-color-handle-outer-border-width",
- "--spectrum-color-handle-size",
- "--spectrum-color-handle-size-key-focus",
- "--spectrum-colorhandle-inner-border-color",
- "--spectrum-colorhandle-outer-border-color",
- "--spectrum-colorhandle-outer-border-width"
- ],
- "global": [
- "--spectrum-animation-duration-100",
- "--spectrum-black-rgb",
- "--spectrum-color-control-track-width",
- "--spectrum-disabled-background-color",
- "--spectrum-disabled-content-color",
- "--spectrum-picked-color",
- "--spectrum-white"
+ ".spectrum-ColorHandle.is-focused"
],
- "system-theme": [],
- "passthroughs": ["--mod-opacity-checkerboard-position"],
- "high-contrast": [
- "--highcontrast-colorhandle-border-color-disabled",
- "--highcontrast-colorhandle-fill-color-disabled"
- ]
+ "modifiers": {
+ "mod-colorhandle-size": {
+ "value": "16px",
+ "description": "Used by `.spectrum-ColorHandle`, `.spectrum-ColorHandle.is-focused, .spectrum-ColorHandle:focus-visible`.
Defaults to `var(--spectrum-color-handle-size)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorhandle-border-width": {
+ "value": "2px",
+ "description": "Used by `.spectrum-ColorHandle`.
Defaults to `var(--spectrum-color-handle-border-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorhandle-border-color": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `.spectrum-ColorHandle`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorhandle-outer-border-width": {
+ "value": "var(--spectrum-colorhandle-outer-border-width)",
+ "description": "Used by `.spectrum-ColorHandle`.
Defaults to `var(--spectrum-colorhandle-outer-border-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorhandle-outer-border-color": {
+ "value": "var(--spectrum-colorhandle-outer-border-color)",
+ "description": "Used by `.spectrum-ColorHandle`.
Defaults to `var(--spectrum-colorhandle-outer-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorhandle-animation-duration": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Used by `.spectrum-ColorHandle`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorhandle-animation-easing": {
+ "description": "Used by `.spectrum-ColorHandle`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorhandle-hitarea-size": {
+ "value": "24px",
+ "description": "Used by `.spectrum-ColorHandle:after`.
Defaults to `var(--spectrum-color-control-track-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorhandle-hitarea-border-radius": {
+ "description": "Used by `.spectrum-ColorHandle:after`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorhandle-focused-size": {
+ "value": "32px",
+ "description": "Used by `.spectrum-ColorHandle.is-focused, .spectrum-ColorHandle:focus-visible`.
Defaults to `var(--spectrum-color-handle-size-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorhandle-border-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `.spectrum-ColorHandle.is-disabled`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorhandle-fill-color-disabled": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `.spectrum-ColorHandle.is-disabled`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorhandle-inner-border-width": {
+ "value": "1px",
+ "description": "Used by `.spectrum-ColorHandle-inner`.
Defaults to `var(--spectrum-color-handle-inner-border-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorhandle-inner-border-color": {
+ "value": "var(--spectrum-colorhandle-inner-border-color)",
+ "description": "Used by `.spectrum-ColorHandle-inner`.
Defaults to `var(--spectrum-colorhandle-inner-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-colorhandle-outer-border-color": {
+ "description": "Defined in `.spectrum-ColorHandle`.
Used by `.spectrum-ColorHandle`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-handle-outer-border-opacity": {
+ "value": "0.42",
+ "description": "Used by `--spectrum-colorhandle-outer-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorhandle-outer-border-width": {
+ "description": "Defined in `.spectrum-ColorHandle`.
Used by `.spectrum-ColorHandle`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-handle-outer-border-width": {
+ "value": "1px",
+ "description": "Used by `--spectrum-colorhandle-outer-border-width`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorhandle-inner-border-color": {
+ "description": "Defined in `.spectrum-ColorHandle`.
Used by `.spectrum-ColorHandle-inner`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-handle-inner-border-opacity": {
+ "value": "0.42",
+ "description": "Used by `--spectrum-colorhandle-inner-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-handle-size": {
+ "value": "16px",
+ "description": "Used by `.spectrum-ColorHandle`, `.spectrum-ColorHandle.is-focused, .spectrum-ColorHandle:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-handle-border-width": {
+ "value": "2px",
+ "description": "Used by `.spectrum-ColorHandle`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-handle-size-key-focus": {
+ "value": "32px",
+ "description": "Used by `.spectrum-ColorHandle.is-focused, .spectrum-ColorHandle:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-handle-inner-border-width": {
+ "value": "1px",
+ "description": "Used by `.spectrum-ColorHandle-inner`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-black-rgb": {
+ "description": "Used by `--spectrum-colorhandle-outer-border-color`, `--spectrum-colorhandle-inner-border-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `.spectrum-ColorHandle`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `.spectrum-ColorHandle`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-color-control-track-width": {
+ "value": "24px",
+ "description": "Used by `.spectrum-ColorHandle:after`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `.spectrum-ColorHandle.is-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-background-color": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `.spectrum-ColorHandle.is-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-picked-color": {
+ "description": "Used by `.spectrum-ColorHandle-inner`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {
+ "mod-opacity-checkerboard-position": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-colorhandle-border-color-disabled": {
+ "value": "var(--mod-colorhandle-border-color-disabled, var(--spectrum-disabled-content-color))",
+ "description": "Defined in `.spectrum-ColorHandle.is-disabled`.
Used by `.spectrum-ColorHandle.is-disabled`.
Defaults to `var(--mod-colorhandle-border-color-disabled, var(--spectrum-disabled-content-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-colorhandle-fill-color-disabled": {
+ "value": "var(--mod-colorhandle-fill-color-disabled, var(--spectrum-disabled-background-color))",
+ "description": "Defined in `.spectrum-ColorHandle.is-disabled`.
Used by `.spectrum-ColorHandle.is-disabled`.
Defaults to `var(--mod-colorhandle-fill-color-disabled, var(--spectrum-disabled-background-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/colorhandle/stories/colorhandle.stories.js b/components/colorhandle/stories/colorhandle.stories.js
index b3923e6d17e..4e3fa505994 100644
--- a/components/colorhandle/stories/colorhandle.stories.js
+++ b/components/colorhandle/stories/colorhandle.stories.js
@@ -1,10 +1,12 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isFocused } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { ColorHandleGroup } from "./colorhandle.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The color handle component is used with [color area](/docs/components-color-area--docs), [color slider](/docs/components-color-slider--docs) and [color wheel](/docs/components-color-wheel--docs) as the color selector.
*/
@@ -52,6 +54,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/colorloupe/dist/metadata.json b/components/colorloupe/dist/metadata.json
index 245bb476b1f..09a7501afb2 100644
--- a/components/colorloupe/dist/metadata.json
+++ b/components/colorloupe/dist/metadata.json
@@ -7,45 +7,183 @@
".spectrum-ColorLoupe-checkerboard-pattern",
".spectrum-ColorLoupe-inner-border",
".spectrum-ColorLoupe-outer-border",
+ ".spectrum-ColorLoupe:dir(rtl)",
".spectrum-ColorLoupe.is-disabled",
".spectrum-ColorLoupe.is-open",
- ".spectrum-ColorLoupe:dir(rtl)",
"[dir=\"rtl\"] .spectrum-ColorLoupe"
],
- "modifiers": [
- "--mod-colorloupe-animation-distance",
- "--mod-colorloupe-drop-shadow-blur",
- "--mod-colorloupe-drop-shadow-color",
- "--mod-colorloupe-drop-shadow-x",
- "--mod-colorloupe-drop-shadow-y",
- "--mod-colorloupe-inner-border-color",
- "--mod-colorloupe-inner-border-width",
- "--mod-colorloupe-offset",
- "--mod-colorloupe-outer-border-color",
- "--mod-colorloupe-outer-border-width"
- ],
- "component": [
- "--spectrum-color-loupe-bottom-to-color-handle",
- "--spectrum-color-loupe-drop-shadow-blur",
- "--spectrum-color-loupe-drop-shadow-color",
- "--spectrum-color-loupe-drop-shadow-y",
- "--spectrum-color-loupe-height",
- "--spectrum-color-loupe-inner-border",
- "--spectrum-color-loupe-inner-border-width",
- "--spectrum-color-loupe-outer-border",
- "--spectrum-color-loupe-outer-border-width",
- "--spectrum-color-loupe-width",
- "--spectrum-colorloupe-checkerboard-fill"
- ],
- "global": [
- "--spectrum-color-handle-outer-border-width",
- "--spectrum-color-handle-size",
- "--spectrum-drop-shadow-x",
- "--spectrum-opacity-checkerboard-square-dark",
- "--spectrum-opacity-checkerboard-square-light",
- "--spectrum-picked-color"
- ],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": ["--highcontrast-colorloupe-outer-border-color"]
+ "modifiers": {
+ "mod-colorloupe-animation-distance": {
+ "description": "Used by `.spectrum-ColorLoupe`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorloupe-offset": {
+ "value": "12px",
+ "description": "Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-color-loupe-bottom-to-color-handle)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorloupe-drop-shadow-x": {
+ "value": "0px",
+ "description": "Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-drop-shadow-x)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorloupe-drop-shadow-y": {
+ "value": "2px",
+ "description": "Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-color-loupe-drop-shadow-y)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorloupe-drop-shadow-blur": {
+ "value": "8px",
+ "description": "Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-color-loupe-drop-shadow-blur)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorloupe-drop-shadow-color": {
+ "value": "var(--spectrum-transparent-black-300)",
+ "description": "Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-color-loupe-drop-shadow-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorloupe-inner-border-color": {
+ "value": "var(--spectrum-transparent-black-200)",
+ "description": "Used by `.spectrum-ColorLoupe-inner-border`.
Defaults to `var(--spectrum-color-loupe-inner-border)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorloupe-inner-border-width": {
+ "value": "1px",
+ "description": "Used by `.spectrum-ColorLoupe-inner-border`.
Defaults to `var(--spectrum-color-loupe-inner-border-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorloupe-outer-border-color": {
+ "value": "var(--spectrum-white)",
+ "description": "Used by `.spectrum-ColorLoupe-outer-border`.
Defaults to `var(--spectrum-color-loupe-outer-border)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorloupe-outer-border-width": {
+ "value": "2px",
+ "description": "Used by `.spectrum-ColorLoupe-outer-border`.
Defaults to `var(--spectrum-color-loupe-outer-border-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-color-loupe-width": {
+ "value": "48px",
+ "description": "Used by `.spectrum-ColorLoupe`, `.spectrum-ColorLoupe:dir(rtl), [dir=\"rtl\"] .spectrum-ColorLoupe`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-loupe-height": {
+ "value": "64px",
+ "description": "Used by `.spectrum-ColorLoupe`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-loupe-bottom-to-color-handle": {
+ "value": "12px",
+ "description": "Used by `.spectrum-ColorLoupe`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-loupe-drop-shadow-y": {
+ "value": "2px",
+ "description": "Used by `.spectrum-ColorLoupe`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-loupe-drop-shadow-blur": {
+ "value": "8px",
+ "description": "Used by `.spectrum-ColorLoupe`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-loupe-drop-shadow-color": {
+ "value": "var(--spectrum-transparent-black-300)",
+ "description": "Used by `.spectrum-ColorLoupe`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-loupe-inner-border": {
+ "value": "var(--spectrum-transparent-black-200)",
+ "description": "Used by `.spectrum-ColorLoupe-inner-border`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-loupe-inner-border-width": {
+ "value": "1px",
+ "description": "Used by `.spectrum-ColorLoupe-inner-border`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-loupe-outer-border": {
+ "value": "var(--spectrum-white)",
+ "description": "Used by `.spectrum-ColorLoupe-outer-border`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-loupe-outer-border-width": {
+ "value": "2px",
+ "description": "Used by `.spectrum-ColorLoupe-outer-border`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorloupe-checkerboard-fill": {
+ "description": "Used by `.spectrum-ColorLoupe-checkerboard-fill`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-color-handle-size": {
+ "value": "16px",
+ "description": "Used by `.spectrum-ColorLoupe`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-color-handle-outer-border-width": {
+ "value": "1px",
+ "description": "Used by `.spectrum-ColorLoupe`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-x": {
+ "value": "0px",
+ "description": "Used by `.spectrum-ColorLoupe`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-picked-color": {
+ "description": "Used by `.spectrum-ColorLoupe-inner-border`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-opacity-checkerboard-square-dark": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `.spectrum-ColorLoupe-checkerboard-pattern`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-opacity-checkerboard-square-light": {
+ "value": "var(--spectrum-white)",
+ "description": "Used by `.spectrum-ColorLoupe-checkerboard-background`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-colorloupe-outer-border-color": {
+ "value": "var(--mod-colorloupe-outer-border-color, var(--spectrum-color-loupe-outer-border))",
+ "description": "Defined in `.spectrum-ColorLoupe`.
Used by `.spectrum-ColorLoupe-outer-border`.
Defaults to `var(--mod-colorloupe-outer-border-color, var(--spectrum-color-loupe-outer-border))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/colorloupe/stories/colorloupe.stories.js b/components/colorloupe/stories/colorloupe.stories.js
index f07cdf83ee7..4863c303c8d 100644
--- a/components/colorloupe/stories/colorloupe.stories.js
+++ b/components/colorloupe/stories/colorloupe.stories.js
@@ -1,8 +1,10 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isOpen } from "@spectrum-css/preview/types";
+import { ColorLoupeGroup } from "./colorloupe.test.js";
+
+// Local assets to render the component styles and structure
import metadata from "../dist/metadata.json";
import packageJson from "../package.json";
-import { ColorLoupeGroup } from "./colorloupe.test.js";
/**
* The color loupe component shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.
@@ -45,6 +47,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/colorslider/dist/metadata.json b/components/colorslider/dist/metadata.json
index ea202a9f0a0..3871501b9d0 100644
--- a/components/colorslider/dist/metadata.json
+++ b/components/colorslider/dist/metadata.json
@@ -16,40 +16,167 @@
".spectrum-ColorSlider.is-focused",
"[dir=\"rtl\"] .spectrum-ColorSlider-gradient"
],
- "modifiers": [
- "--mod-color-slider-background-color-disabled",
- "--mod-color-slider-border-color",
- "--mod-color-slider-border-color-disabled",
- "--mod-color-slider-border-rounding",
- "--mod-color-slider-border-width",
- "--mod-color-slider-control-track-height",
- "--mod-color-slider-control-track-width",
- "--mod-color-slider-handle-hitarea-border-radius",
- "--mod-color-slider-length",
- "--mod-color-slider-minimum-length",
- "--mod-color-slider-vertical-control-track-width",
- "--mod-color-slider-vertical-height",
- "--mod-color-slider-vertical-minimum-height"
- ],
- "component": [
- "--spectrum-color-slider-border-color-default",
- "--spectrum-color-slider-border-color-local",
- "--spectrum-color-slider-border-opacity",
- "--spectrum-color-slider-border-rounding",
- "--spectrum-color-slider-border-width",
- "--spectrum-color-slider-length",
- "--spectrum-color-slider-minimum-length"
- ],
- "global": [
- "--spectrum-color-control-track-width",
- "--spectrum-disabled-background-color",
- "--spectrum-gray-900-rgb"
- ],
- "system-theme": [],
- "passthroughs": ["--mod-colorhandle-hitarea-border-radius"],
- "high-contrast": [
- "--highcontrast-color-slider-background-color-disabled",
- "--highcontrast-color-slider-border-color",
- "--highcontrast-color-slider-border-color-disabled"
- ]
+ "modifiers": {
+ "mod-color-slider-handle-hitarea-border-radius": {
+ "description": "Used by `--mod-colorhandle-hitarea-border-radius`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-color-slider-minimum-length": {
+ "value": "80px",
+ "description": "Used by `.spectrum-ColorSlider`, `.spectrum-ColorSlider--vertical`.
Defaults to `var(--spectrum-color-slider-minimum-length)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-color-slider-length": {
+ "value": "192px",
+ "description": "Used by `.spectrum-ColorSlider`, `.spectrum-ColorSlider--vertical`.
Defaults to `var(--spectrum-color-slider-length)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-color-slider-control-track-width": {
+ "value": "24px",
+ "description": "Used by `.spectrum-ColorSlider`.
Defaults to `var(--spectrum-color-control-track-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-color-slider-vertical-minimum-height": {
+ "value": "var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length))",
+ "description": "Used by `.spectrum-ColorSlider--vertical`.
Defaults to `var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length))`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-color-slider-vertical-height": {
+ "value": "var(--mod-color-slider-length, var(--spectrum-color-slider-length))",
+ "description": "Used by `.spectrum-ColorSlider--vertical`.
Defaults to `var(--mod-color-slider-length, var(--spectrum-color-slider-length))`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-color-slider-vertical-control-track-width": {
+ "value": "var(--mod-color-slider-control-track-height, var(--spectrum-color-control-track-width))",
+ "description": "Used by `.spectrum-ColorSlider--vertical`.
Defaults to `var(--mod-color-slider-control-track-height, var(--spectrum-color-control-track-width))`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-color-slider-control-track-height": {
+ "value": "24px",
+ "description": "Used by `.spectrum-ColorSlider--vertical`.
Defaults to `var(--spectrum-color-control-track-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-color-slider-border-color": {
+ "value": "var(--spectrum-color-slider-border-color-default)",
+ "description": "Used by `--spectrum-color-slider-border-color-local`.
Defaults to `var(--spectrum-color-slider-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-color-slider-border-width": {
+ "value": "1px",
+ "description": "Used by `.spectrum-ColorSlider-checkerboard:before`.
Defaults to `var(--spectrum-color-slider-border-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-color-slider-border-rounding": {
+ "value": "7px",
+ "description": "Used by `.spectrum-ColorSlider-checkerboard:before`, `.spectrum-ColorSlider-checkerboard, .spectrum-ColorSlider-gradient`.
Defaults to `var(--spectrum-color-slider-border-rounding)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-color-slider-border-color-disabled": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--spectrum-color-slider-border-color-local`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-color-slider-background-color-disabled": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `.spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-color-slider-border-color-default": {
+ "description": "Defined in `.spectrum-ColorSlider`.
Used by `--spectrum-color-slider-border-color-local`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-slider-border-opacity": {
+ "value": "0.1",
+ "description": "Used by `--spectrum-color-slider-border-color-default`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-slider-minimum-length": {
+ "value": "80px",
+ "description": "Used by `.spectrum-ColorSlider`, `.spectrum-ColorSlider--vertical`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-slider-length": {
+ "value": "192px",
+ "description": "Used by `.spectrum-ColorSlider`, `.spectrum-ColorSlider--vertical`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-slider-border-color-local": {
+ "description": "Defined in `.spectrum-ColorSlider-checkerboard`, `.spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard`.
Used by `.spectrum-ColorSlider-checkerboard:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-slider-border-width": {
+ "value": "1px",
+ "description": "Used by `.spectrum-ColorSlider-checkerboard:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-slider-border-rounding": {
+ "value": "7px",
+ "description": "Used by `.spectrum-ColorSlider-checkerboard:before`, `.spectrum-ColorSlider-checkerboard, .spectrum-ColorSlider-gradient`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-900-rgb": {
+ "description": "Used by `--spectrum-color-slider-border-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-color-control-track-width": {
+ "value": "24px",
+ "description": "Used by `.spectrum-ColorSlider`, `.spectrum-ColorSlider--vertical`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-background-color": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--spectrum-color-slider-border-color-local`, `.spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {
+ "mod-colorhandle-hitarea-border-radius": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-color-slider-border-color": {
+ "value": "var(--mod-color-slider-border-color, var(--spectrum-color-slider-border-color-default))",
+ "description": "Defined in `.spectrum-ColorSlider`.
Used by `--spectrum-color-slider-border-color-local`.
Defaults to `var(--mod-color-slider-border-color, var(--spectrum-color-slider-border-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-color-slider-border-color-disabled": {
+ "value": "var(--mod-color-slider-border-color-disabled, var(--spectrum-disabled-background-color))",
+ "description": "Defined in `.spectrum-ColorSlider`.
Used by `--spectrum-color-slider-border-color-local`.
Defaults to `var(--mod-color-slider-border-color-disabled, var(--spectrum-disabled-background-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-color-slider-background-color-disabled": {
+ "value": "var(--mod-color-slider-background-color-disabled, var(--spectrum-disabled-background-color))",
+ "description": "Defined in `.spectrum-ColorSlider`.
Used by `.spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard`.
Defaults to `var(--mod-color-slider-background-color-disabled, var(--spectrum-disabled-background-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/colorslider/stories/colorslider.stories.js b/components/colorslider/stories/colorslider.stories.js
index 633fa48b8be..03172685f49 100644
--- a/components/colorslider/stories/colorslider.stories.js
+++ b/components/colorslider/stories/colorslider.stories.js
@@ -1,10 +1,12 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isFocused } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { ColorSliderGroup } from "./colorslider.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The color slider component lets users visually change an individual channel of a color.
*
@@ -62,6 +64,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/colorwheel/dist/metadata.json b/components/colorwheel/dist/metadata.json
index c321e1aca27..5f72a0ce7f2 100644
--- a/components/colorwheel/dist/metadata.json
+++ b/components/colorwheel/dist/metadata.json
@@ -2,11 +2,11 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-ColorWheel",
- ".spectrum-ColorWheel-ColorArea-handle",
- ".spectrum-ColorWheel-ColorArea-handle:dir(rtl)",
".spectrum-ColorWheel-border",
".spectrum-ColorWheel-border.is-disabled",
".spectrum-ColorWheel-colorarea-container",
+ ".spectrum-ColorWheel-ColorArea-handle",
+ ".spectrum-ColorWheel-ColorArea-handle:dir(rtl)",
".spectrum-ColorWheel-handle",
".spectrum-ColorWheel-inner",
".spectrum-ColorWheel-slider",
@@ -17,43 +17,182 @@
".spectrum-ColorWheel.is-focused",
"[dir=\"rtl\"] .spectrum-ColorWheel-ColorArea-handle"
],
- "modifiers": [
- "--mod-colorwheel-border-color",
- "--mod-colorwheel-border-width",
- "--mod-colorwheel-colorarea-container-size",
- "--mod-colorwheel-colorarea-margin",
- "--mod-colorwheel-fill-color-disabled",
- "--mod-colorwheel-height",
- "--mod-colorwheel-min-width",
- "--mod-colorwheel-path",
- "--mod-colorwheel-path-borders",
- "--mod-colorwheel-track-width",
- "--mod-colorwheel-width"
- ],
- "component": [
- "--spectrum-color-wheel-color-area-margin",
- "--spectrum-color-wheel-minimum-width",
- "--spectrum-color-wheel-width",
- "--spectrum-colorwheel-border-color",
- "--spectrum-colorwheel-border-width",
- "--spectrum-colorwheel-colorarea-container-size",
- "--spectrum-colorwheel-fill-color-disabled",
- "--spectrum-colorwheel-height",
- "--spectrum-colorwheel-path",
- "--spectrum-colorwheel-path-borders",
- "--spectrum-colorwheel-track-width",
- "--spectrum-colorwheel-width"
- ],
- "global": [
- "--spectrum-border-width-100",
- "--spectrum-color-control-track-width",
- "--spectrum-disabled-background-color",
- "--spectrum-transparent-black-300"
- ],
- "system-theme": ["--system-color-wheel-border-color"],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-colorwheel-border-color-disabled",
- "--highcontrast-colorwheel-fill-color-disabled"
- ]
+ "modifiers": {
+ "mod-colorwheel-width": {
+ "value": "192px",
+ "description": "Used by `--spectrum-colorwheel-width`.
Defaults to `var(--spectrum-color-wheel-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorwheel-height": {
+ "value": "192px",
+ "description": "Used by `--spectrum-colorwheel-height`.
Defaults to `var(--spectrum-color-wheel-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorwheel-fill-color-disabled": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--spectrum-colorwheel-fill-color-disabled`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorwheel-border-width": {
+ "value": "1px",
+ "description": "Used by `--spectrum-colorwheel-border-width`.
Defaults to `var(--spectrum-border-width-100)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorwheel-track-width": {
+ "value": "24px",
+ "description": "Used by `--spectrum-colorwheel-track-width`.
Defaults to `var(--spectrum-color-control-track-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorwheel-min-width": {
+ "value": "175px",
+ "description": "Used by `.spectrum-ColorWheel`.
Defaults to `var(--spectrum-color-wheel-minimum-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorwheel-colorarea-container-size": {
+ "value": "var(--spectrum-colorwheel-colorarea-container-size)",
+ "description": "Used by `.spectrum-ColorWheel-inner`.
Defaults to `var(--spectrum-colorwheel-colorarea-container-size)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorwheel-colorarea-margin": {
+ "value": "12px",
+ "description": "Used by `.spectrum-ColorWheel-colorarea-container`.
Defaults to `var(--spectrum-color-wheel-color-area-margin)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorwheel-border-color": {
+ "value": "var(--spectrum-colorwheel-border-color)",
+ "description": "Used by `.spectrum-ColorWheel-border`.
Defaults to `var(--spectrum-colorwheel-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorwheel-path-borders": {
+ "value": "var(--spectrum-colorwheel-path-borders)",
+ "description": "Used by `.spectrum-ColorWheel-border`.
Defaults to `var(--spectrum-colorwheel-path-borders)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorwheel-path": {
+ "value": "var(--spectrum-colorwheel-path)",
+ "description": "Used by `.spectrum-ColorWheel-wheel`.
Defaults to `var(--spectrum-colorwheel-path)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-colorwheel-width": {
+ "description": "Defined in `.spectrum-ColorWheel`.
Used by `.spectrum-ColorWheel`, `.spectrum-ColorWheel-handle`, `.spectrum-ColorWheel-border`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-wheel-width": {
+ "value": "192px",
+ "description": "Used by `--spectrum-colorwheel-width`, `--spectrum-colorwheel-height`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorwheel-height": {
+ "description": "Defined in `.spectrum-ColorWheel`.
Used by `.spectrum-ColorWheel`, `.spectrum-ColorWheel-border`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorwheel-fill-color-disabled": {
+ "description": "Defined in `.spectrum-ColorWheel`.
Used by `.spectrum-ColorWheel-border.is-disabled`, `.spectrum-ColorWheel-wheel.is-disabled`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorwheel-border-width": {
+ "description": "Defined in `.spectrum-ColorWheel`.
Used by `--_border-width`, `.spectrum-ColorWheel-wheel`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorwheel-track-width": {
+ "description": "Defined in `.spectrum-ColorWheel`.
Used by `--_track-width`, `.spectrum-ColorWheel-handle`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-wheel-minimum-width": {
+ "value": "175px",
+ "description": "Used by `.spectrum-ColorWheel`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorwheel-colorarea-container-size": {
+ "description": "Used by `.spectrum-ColorWheel-inner`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-wheel-color-area-margin": {
+ "value": "12px",
+ "description": "Used by `.spectrum-ColorWheel-colorarea-container`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorwheel-border-color": {
+ "description": "Defined in `.spectrum-ColorWheel`.
Used by `.spectrum-ColorWheel-border`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorwheel-path-borders": {
+ "description": "Used by `.spectrum-ColorWheel-border`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorwheel-path": {
+ "description": "Used by `.spectrum-ColorWheel-wheel`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-transparent-black-300": {
+ "value": "light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15))",
+ "description": "Used by `--system-color-wheel-border-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-background-color": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--spectrum-colorwheel-fill-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--spectrum-colorwheel-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-color-control-track-width": {
+ "value": "24px",
+ "description": "Used by `--spectrum-colorwheel-track-width`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-color-wheel-border-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-colorwheel-border-color`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-colorwheel-border-color-disabled": {
+ "value": "var(--spectrum-colorwheel-fill-color-disabled)",
+ "description": "Defined in `.spectrum-ColorWheel`.
Used by `.spectrum-ColorWheel-border.is-disabled`.
Defaults to `var(--spectrum-colorwheel-fill-color-disabled)`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-colorwheel-fill-color-disabled": {
+ "value": "var(--spectrum-colorwheel-fill-color-disabled)",
+ "description": "Defined in `.spectrum-ColorWheel`.
Used by `.spectrum-ColorWheel-wheel.is-disabled`.
Defaults to `var(--spectrum-colorwheel-fill-color-disabled)`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/colorwheel/stories/colorwheel.stories.js b/components/colorwheel/stories/colorwheel.stories.js
index 15bba48a20a..2cf66fdd89c 100644
--- a/components/colorwheel/stories/colorwheel.stories.js
+++ b/components/colorwheel/stories/colorwheel.stories.js
@@ -1,10 +1,12 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isFocused } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { ColorWheelGroup } from "./colorwheel.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The color wheel component lets users visually change an individual channel of a color on a circular track.
*
@@ -53,6 +55,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json
index bdf2685d75f..9212e8eaa46 100644
--- a/components/combobox/dist/metadata.json
+++ b/components/combobox/dist/metadata.json
@@ -22,24 +22,24 @@
".spectrum-Combobox--sizeS",
".spectrum-Combobox--sizeXL",
".spectrum-Combobox-button",
+ ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
+ ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):active",
+ ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus",
+ ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus-visible",
+ ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus:hover",
+ ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover",
".spectrum-Combobox-button.is-focused:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
".spectrum-Combobox-button.is-focused:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover",
- ".spectrum-Combobox-button.is-invalid.is-focused:not(:disabled, .spectrum-PickerButton--quiet)",
- ".spectrum-Combobox-button.is-invalid.is-focused:not(:disabled, .spectrum-PickerButton--quiet):hover",
- ".spectrum-Combobox-button.is-invalid.is-keyboardFocused:not(:disabled, .spectrum-PickerButton--quiet)",
".spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
".spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet):active",
".spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet):focus",
".spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet):focus-visible",
".spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet):focus:hover",
".spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet):hover",
+ ".spectrum-Combobox-button.is-invalid.is-focused:not(:disabled, .spectrum-PickerButton--quiet)",
+ ".spectrum-Combobox-button.is-invalid.is-focused:not(:disabled, .spectrum-PickerButton--quiet):hover",
+ ".spectrum-Combobox-button.is-invalid.is-keyboardFocused:not(:disabled, .spectrum-PickerButton--quiet)",
".spectrum-Combobox-button.is-keyboardFocused:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
- ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
- ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):active",
- ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus",
- ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus-visible",
- ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus:hover",
- ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover",
".spectrum-Combobox-input",
".spectrum-Combobox-input::placeholder",
".spectrum-Combobox-input:active",
@@ -49,258 +49,1130 @@
".spectrum-Combobox-progress-circle",
".spectrum-Combobox-progress-circle:dir(rtl)",
".spectrum-Combobox-textfield",
+ ".spectrum-Combobox-textfield:hover .spectrum-Combobox-input",
".spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input",
".spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input:hover",
".spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input",
".spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon",
".spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input",
".spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input",
- ".spectrum-Combobox-textfield:hover .spectrum-Combobox-input",
- ".spectrum-Combobox.is-focused .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
+ ".spectrum-Combobox:has(:active) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
+ ".spectrum-Combobox:has(:active) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
+ ".spectrum-Combobox:has(:focus) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
+ ".spectrum-Combobox:has(:focus) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
+ ".spectrum-Combobox:hover .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
+ ".spectrum-Combobox:hover .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
+ ".spectrum-Combobox:hover:has(:focus) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
+ ".spectrum-Combobox:hover:has(:focus) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
".spectrum-Combobox.is-focused .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
- ".spectrum-Combobox.is-focused:hover .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
+ ".spectrum-Combobox.is-focused .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
".spectrum-Combobox.is-focused:hover .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
- ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
+ ".spectrum-Combobox.is-focused:hover .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
- ".spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only",
- ".spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only:hover",
- ".spectrum-Combobox.is-readOnly.is-invalid:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only",
+ ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only",
".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only:hover",
".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input",
- ".spectrum-Combobox:has(:active) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
- ".spectrum-Combobox:has(:active) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
- ".spectrum-Combobox:has(:focus) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
- ".spectrum-Combobox:has(:focus) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
- ".spectrum-Combobox:hover .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
- ".spectrum-Combobox:hover .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
- ".spectrum-Combobox:hover:has(:focus) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
- ".spectrum-Combobox:hover:has(:focus) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
+ ".spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only",
+ ".spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only:hover",
+ ".spectrum-Combobox.is-readOnly.is-invalid:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only",
".spectrum-Textfield.is-disabled .spectrum-Textfield-validationIcon",
".spectrum-Textfield.is-loading .spectrum-Textfield-validationIcon",
".spectrum-Textfield.is-readOnly .spectrum-Textfield-validationIcon",
"[dir=\"rtl\"] .spectrum-Combobox-progress-circle"
],
- "modifiers": [
- "--mod-combobox-alert-icon-color",
- "--mod-combobox-background-color-default",
- "--mod-combobox-background-color-disabled",
- "--mod-combobox-background-color-focus",
- "--mod-combobox-background-color-focus-hover",
- "--mod-combobox-background-color-hover",
- "--mod-combobox-background-color-key-focus",
- "--mod-combobox-block-size",
- "--mod-combobox-block-spacing-edge-to-alert",
- "--mod-combobox-block-spacing-edge-to-progress-circle",
- "--mod-combobox-border-color-default",
- "--mod-combobox-border-color-disabled",
- "--mod-combobox-border-color-focus",
- "--mod-combobox-border-color-focus-hover",
- "--mod-combobox-border-color-hover",
- "--mod-combobox-border-color-invalid-default",
- "--mod-combobox-border-color-invalid-focus",
- "--mod-combobox-border-color-invalid-focus-hover",
- "--mod-combobox-border-color-invalid-hover",
- "--mod-combobox-border-color-invalid-key-focus",
- "--mod-combobox-border-color-key-focus",
- "--mod-combobox-border-radius",
- "--mod-combobox-border-width",
- "--mod-combobox-button-inline-offset",
- "--mod-combobox-button-width",
- "--mod-combobox-focus-indicator-color",
- "--mod-combobox-focus-indicator-gap",
- "--mod-combobox-focus-indicator-thickness",
- "--mod-combobox-font-color-default",
- "--mod-combobox-font-color-disabled",
- "--mod-combobox-font-color-focus",
- "--mod-combobox-font-color-focus-hover",
- "--mod-combobox-font-color-hover",
- "--mod-combobox-font-color-key-focus",
- "--mod-combobox-font-color-placeholder",
- "--mod-combobox-font-family",
- "--mod-combobox-font-size",
- "--mod-combobox-font-style",
- "--mod-combobox-font-weight",
- "--mod-combobox-icon-size",
- "--mod-combobox-inline-size",
- "--mod-combobox-line-height",
- "--mod-combobox-min-inline-size",
- "--mod-combobox-readonly-border-color-disabled",
- "--mod-combobox-readonly-input-border-color",
- "--mod-combobox-spacing-block-end-edge-to-text",
- "--mod-combobox-spacing-block-start-edge-to-text",
- "--mod-combobox-spacing-edge-to-menu",
- "--mod-combobox-spacing-inline-end-edge-to-text",
- "--mod-combobox-spacing-inline-icon-to-button",
- "--mod-combobox-spacing-inline-start-edge-to-text",
- "--mod-combobox-spacing-label-to-combobox"
- ],
- "component": [
- "--spectrum-combo-box-minimum-width-multiplier",
- "--spectrum-combo-box-quiet-minimum-width-multiplier",
- "--spectrum-combo-box-visual-to-field-button-extra-large",
- "--spectrum-combo-box-visual-to-field-button-large",
- "--spectrum-combo-box-visual-to-field-button-medium",
- "--spectrum-combo-box-visual-to-field-button-quiet",
- "--spectrum-combo-box-visual-to-field-button-small",
- "--spectrum-combobox-background-color-disabled",
- "--spectrum-combobox-block-size",
- "--spectrum-combobox-block-spacing-edge-to-alert",
- "--spectrum-combobox-block-spacing-edge-to-progress-circle",
- "--spectrum-combobox-border-color-default",
- "--spectrum-combobox-border-color-disabled",
- "--spectrum-combobox-border-color-focus",
- "--spectrum-combobox-border-color-focus-hover",
- "--spectrum-combobox-border-color-hover",
- "--spectrum-combobox-border-color-invalid-default",
- "--spectrum-combobox-border-color-invalid-focus",
- "--spectrum-combobox-border-color-invalid-focus-hover",
- "--spectrum-combobox-border-color-invalid-hover",
- "--spectrum-combobox-border-color-invalid-key-focus",
- "--spectrum-combobox-border-color-key-focus",
- "--spectrum-combobox-border-radius",
- "--spectrum-combobox-border-width",
- "--spectrum-combobox-button-inline-offset",
- "--spectrum-combobox-button-width",
- "--spectrum-combobox-focus-indicator-color",
- "--spectrum-combobox-focus-indicator-gap",
- "--spectrum-combobox-focus-indicator-thickness",
- "--spectrum-combobox-font-size",
- "--spectrum-combobox-font-style",
- "--spectrum-combobox-icon-size",
- "--spectrum-combobox-inline-size",
- "--spectrum-combobox-line-height",
- "--spectrum-combobox-min-inline-size",
- "--spectrum-combobox-readonly-background-color-disabled",
- "--spectrum-combobox-readonly-border-color-disabled",
- "--spectrum-combobox-readonly-border-color-invalid-default",
- "--spectrum-combobox-readonly-input-background-color",
- "--spectrum-combobox-readonly-input-border-color",
- "--spectrum-combobox-readonly-text-color-disabled",
- "--spectrum-combobox-spacing-block-end-edge-to-text",
- "--spectrum-combobox-spacing-block-start-edge-to-text",
- "--spectrum-combobox-spacing-edge-to-menu",
- "--spectrum-combobox-spacing-inline-end-edge-to-text",
- "--spectrum-combobox-spacing-inline-icon-to-button",
- "--spectrum-combobox-spacing-inline-start-edge-to-text",
- "--spectrum-combobox-spacing-label-to-combobox"
- ],
- "global": [
- "--spectrum-border-width-100",
- "--spectrum-component-bottom-to-text-100",
- "--spectrum-component-bottom-to-text-200",
- "--spectrum-component-bottom-to-text-300",
- "--spectrum-component-bottom-to-text-75",
- "--spectrum-component-edge-to-text-100",
- "--spectrum-component-edge-to-text-200",
- "--spectrum-component-edge-to-text-300",
- "--spectrum-component-edge-to-text-75",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-75",
- "--spectrum-component-to-menu-extra-large",
- "--spectrum-component-to-menu-large",
- "--spectrum-component-to-menu-medium",
- "--spectrum-component-to-menu-small",
- "--spectrum-component-top-to-text-100",
- "--spectrum-component-top-to-text-200",
- "--spectrum-component-top-to-text-300",
- "--spectrum-component-top-to-text-75",
- "--spectrum-corner-radius-100",
- "--spectrum-default-font-style",
- "--spectrum-disabled-background-color",
- "--spectrum-disabled-border-color",
- "--spectrum-disabled-content-color",
- "--spectrum-field-edge-to-text-quiet",
- "--spectrum-field-label-to-component",
- "--spectrum-field-label-to-component-quiet-extra-large",
- "--spectrum-field-label-to-component-quiet-large",
- "--spectrum-field-label-to-component-quiet-medium",
- "--spectrum-field-label-to-component-quiet-small",
- "--spectrum-field-top-to-alert-icon-extra-large",
- "--spectrum-field-top-to-alert-icon-large",
- "--spectrum-field-top-to-alert-icon-medium",
- "--spectrum-field-top-to-alert-icon-small",
- "--spectrum-field-top-to-progress-circle-extra-large",
- "--spectrum-field-top-to-progress-circle-large",
- "--spectrum-field-top-to-progress-circle-medium",
- "--spectrum-field-top-to-progress-circle-small",
- "--spectrum-field-width",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-300",
- "--spectrum-font-size-75",
- "--spectrum-gray-25",
- "--spectrum-gray-50",
- "--spectrum-gray-500",
- "--spectrum-gray-600",
- "--spectrum-gray-800",
- "--spectrum-gray-900",
- "--spectrum-line-height-100",
- "--spectrum-negative-border-color-default",
- "--spectrum-negative-border-color-focus",
- "--spectrum-negative-border-color-focus-hover",
- "--spectrum-negative-border-color-hover",
- "--spectrum-negative-border-color-key-focus",
- "--spectrum-workflow-icon-size-100",
- "--spectrum-workflow-icon-size-200",
- "--spectrum-workflow-icon-size-300",
- "--spectrum-workflow-icon-size-75"
- ],
- "system-theme": [
- "--system-combobox-background-color-disabled",
- "--system-combobox-border-color-default",
- "--system-combobox-border-color-disabled",
- "--system-combobox-border-color-focus",
- "--system-combobox-border-color-focus-hover",
- "--system-combobox-border-color-hover",
- "--system-combobox-border-color-key-focus",
- "--system-combobox-readonly-input-border-color"
- ],
- "passthroughs": [
- "--mod-picker-button-background-color",
- "--mod-picker-button-background-color-disabled",
- "--mod-picker-button-background-color-quiet",
- "--mod-picker-button-border-color",
- "--mod-picker-button-border-color-disabled",
- "--mod-picker-button-border-color-quiet",
- "--mod-picker-button-border-width",
- "--mod-picker-button-font-color-disabled",
- "--mod-textfield-background-color",
- "--mod-textfield-background-color-disabled",
- "--mod-textfield-border-color",
- "--mod-textfield-border-color-disabled",
- "--mod-textfield-border-color-focus",
- "--mod-textfield-border-color-focus-hover",
- "--mod-textfield-border-color-hover",
- "--mod-textfield-border-color-invalid-default",
- "--mod-textfield-border-color-invalid-focus",
- "--mod-textfield-border-color-invalid-focus-hover",
- "--mod-textfield-border-color-invalid-hover",
- "--mod-textfield-border-color-invalid-keyboard-focus",
- "--mod-textfield-border-color-keyboard-focus",
- "--mod-textfield-border-width",
- "--mod-textfield-focus-indicator-color",
- "--mod-textfield-focus-indicator-gap",
- "--mod-textfield-focus-indicator-width",
- "--mod-textfield-font-family",
- "--mod-textfield-font-weight",
- "--mod-textfield-icon-color-invalid",
- "--mod-textfield-text-color-default",
- "--mod-textfield-text-color-disabled",
- "--mod-textfield-text-color-focus",
- "--mod-textfield-text-color-focus-hover",
- "--mod-textfield-text-color-hover",
- "--mod-textfield-text-color-keyboard-focus"
- ],
- "high-contrast": [
- "--highcontrast-combobox-border-color-highlight",
- "--highcontrast-combobox-border-color-invalid",
- "--highcontrast-textfield-border-color-invalid-default",
- "--highcontrast-textfield-text-color-disabled"
- ]
+ "modifiers": {
+ "mod-combobox-focus-indicator-gap": {
+ "value": "var(--spectrum-combobox-focus-indicator-gap)",
+ "description": "Used by `--mod-textfield-focus-indicator-gap`.
Defaults to `var(--spectrum-combobox-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-focus-indicator-thickness": {
+ "value": "var(--spectrum-combobox-focus-indicator-thickness)",
+ "description": "Used by `--mod-textfield-focus-indicator-width`.
Defaults to `var(--spectrum-combobox-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-focus-indicator-color": {
+ "value": "var(--spectrum-combobox-focus-indicator-color)",
+ "description": "Used by `--mod-textfield-focus-indicator-color`.
Defaults to `var(--spectrum-combobox-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-background-color-default": {
+ "description": "Used by `--mod-textfield-background-color`, `--mod-picker-button-background-color`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-background-color-disabled": {
+ "value": "var(--spectrum-combobox-background-color-disabled)",
+ "description": "Used by `--mod-textfield-background-color-disabled`, `--mod-picker-button-background-color-disabled`.
Defaults to `var(--spectrum-combobox-background-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-font-family": {
+ "description": "Used by `--mod-textfield-font-family`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-font-weight": {
+ "description": "Used by `--mod-textfield-font-weight`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-font-color-default": {
+ "description": "Used by `--mod-textfield-text-color-default`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-font-color-hover": {
+ "description": "Used by `--mod-textfield-text-color-hover`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-font-color-focus": {
+ "description": "Used by `--mod-textfield-text-color-focus`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-font-color-focus-hover": {
+ "description": "Used by `--mod-textfield-text-color-focus-hover`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-font-color-key-focus": {
+ "description": "Used by `--mod-textfield-text-color-keyboard-focus`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-font-color-disabled": {
+ "description": "Used by `--mod-textfield-text-color-disabled`, `--mod-picker-button-font-color-disabled`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-border-width": {
+ "value": "var(--spectrum-combobox-border-width)",
+ "description": "Used by `--mod-textfield-border-width`, `--mod-picker-button-border-width`, `.spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly .spectrum-Combobox-input:read-only`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-border-color-default": {
+ "value": "var(--spectrum-combobox-border-color-default)",
+ "description": "Defined in `.spectrum-Combobox-input:focus, .spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input`, `.spectrum-Combobox-input:focus:hover, .spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input:hover`, `.spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input`.
Used by `--mod-textfield-border-color`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-combobox-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-border-color-disabled": {
+ "value": "var(--spectrum-combobox-border-color-disabled)",
+ "description": "Used by `--mod-textfield-border-color-disabled`, `--mod-picker-button-border-color-disabled`.
Defaults to `var(--spectrum-combobox-border-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-border-color-focus": {
+ "value": "var(--spectrum-combobox-border-color-focus)",
+ "description": "Used by `--mod-textfield-border-color-focus`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-combobox-border-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-border-color-focus-hover": {
+ "value": "var(--spectrum-combobox-border-color-focus-hover)",
+ "description": "Used by `--mod-textfield-border-color-focus-hover`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-combobox-border-color-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-border-color-hover": {
+ "value": "var(--spectrum-combobox-border-color-hover)",
+ "description": "Used by `--mod-textfield-border-color-hover`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-combobox-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-border-color-key-focus": {
+ "value": "var(--spectrum-combobox-border-color-key-focus)",
+ "description": "Used by `--mod-textfield-border-color-keyboard-focus`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-combobox-border-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-border-color-invalid-default": {
+ "value": "var(--spectrum-combobox-border-color-invalid-default)",
+ "description": "Used by `--mod-textfield-border-color-invalid-default`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-combobox-border-color-invalid-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-border-color-invalid-hover": {
+ "value": "var(--spectrum-combobox-border-color-invalid-hover)",
+ "description": "Used by `--mod-textfield-border-color-invalid-hover`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-combobox-border-color-invalid-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-border-color-invalid-focus": {
+ "value": "var(--spectrum-combobox-border-color-invalid-focus)",
+ "description": "Used by `--mod-textfield-border-color-invalid-focus`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-combobox-border-color-invalid-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-border-color-invalid-focus-hover": {
+ "value": "var(--spectrum-combobox-border-color-invalid-focus-hover)",
+ "description": "Used by `--mod-textfield-border-color-invalid-focus-hover`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-combobox-border-color-invalid-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-border-color-invalid-key-focus": {
+ "value": "var(--spectrum-combobox-border-color-invalid-key-focus)",
+ "description": "Used by `--mod-textfield-border-color-invalid-keyboard-focus`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-combobox-border-color-invalid-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-alert-icon-color": {
+ "description": "Used by `--mod-textfield-icon-color-invalid`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-block-size": {
+ "value": "var(--spectrum-combobox-block-size)",
+ "description": "Used by `--spectrum-combobox-button-inline-offset`, `.spectrum-Combobox`.
Defaults to `var(--spectrum-combobox-block-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-icon-size": {
+ "value": "var(--spectrum-combobox-icon-size)",
+ "description": "Used by `--spectrum-combobox-button-inline-offset`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-inline-size": {
+ "value": "var(--spectrum-combobox-inline-size)",
+ "description": "Used by `.spectrum-Combobox`.
Defaults to `var(--spectrum-combobox-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-min-inline-size": {
+ "value": "var(--spectrum-combobox-min-inline-size)",
+ "description": "Used by `.spectrum-Combobox`.
Defaults to `var(--spectrum-combobox-min-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-spacing-label-to-combobox": {
+ "value": "var(--spectrum-combobox-spacing-label-to-combobox)",
+ "description": "Used by `.spectrum-Combobox`.
Defaults to `var(--spectrum-combobox-spacing-label-to-combobox)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-border-radius": {
+ "value": "var(--spectrum-combobox-border-radius)",
+ "description": "Used by `.spectrum-Combobox`.
Defaults to `var(--spectrum-combobox-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-spacing-edge-to-menu": {
+ "value": "var(--spectrum-combobox-spacing-edge-to-menu)",
+ "description": "Used by `.spectrum-Combobox .spectrum-Popover.is-open`.
Defaults to `var(--spectrum-combobox-spacing-edge-to-menu)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-readonly-border-color-disabled": {
+ "value": "var(--spectrum-combobox-readonly-border-color-disabled, transparent)",
+ "description": "Used by `.spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only`.
Defaults to `var(--spectrum-combobox-readonly-border-color-disabled, transparent)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-spacing-inline-icon-to-button": {
+ "value": "var(--spectrum-combobox-spacing-inline-icon-to-button)",
+ "description": "Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-progress-circle:dir(rtl), [dir=\"rtl\"] .spectrum-Combobox-progress-circle`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-spacing-inline-icon-to-button)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-button-width": {
+ "value": "var(--spectrum-combobox-button-width)",
+ "description": "Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-progress-circle:dir(rtl), [dir=\"rtl\"] .spectrum-Combobox-progress-circle`, `.spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-button-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-block-spacing-edge-to-progress-circle": {
+ "value": "var(--spectrum-combobox-block-spacing-edge-to-progress-circle)",
+ "description": "Used by `.spectrum-Combobox-progress-circle`.
Defaults to `var(--spectrum-combobox-block-spacing-edge-to-progress-circle)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-block-spacing-edge-to-alert": {
+ "value": "var(--spectrum-combobox-block-spacing-edge-to-alert)",
+ "description": "Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-combobox-block-spacing-edge-to-alert)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-button-inline-offset": {
+ "value": "var(--spectrum-combobox-button-inline-offset, 0px)",
+ "description": "Used by `.spectrum-Combobox-button`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-button-inline-offset, 0px)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-spacing-block-start-edge-to-text": {
+ "value": "var(--spectrum-combobox-spacing-block-start-edge-to-text)",
+ "description": "Used by `.spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-spacing-block-start-edge-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-spacing-block-end-edge-to-text": {
+ "value": "var(--spectrum-combobox-spacing-block-end-edge-to-text)",
+ "description": "Used by `.spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-spacing-block-end-edge-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-spacing-inline-start-edge-to-text": {
+ "value": "var(--spectrum-combobox-spacing-inline-start-edge-to-text)",
+ "description": "Used by `.spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-spacing-inline-start-edge-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-spacing-inline-end-edge-to-text": {
+ "value": "var(--spectrum-combobox-spacing-inline-end-edge-to-text)",
+ "description": "Used by `.spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-spacing-inline-end-edge-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-line-height": {
+ "value": "var(--spectrum-combobox-line-height)",
+ "description": "Used by `.spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-font-size": {
+ "value": "var(--spectrum-combobox-font-size)",
+ "description": "Used by `.spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-font-style": {
+ "value": "var(--spectrum-combobox-font-style)",
+ "description": "Used by `.spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-font-color-placeholder": {
+ "description": "Used by `--mod-textfield-text-color-default`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-background-color-hover": {
+ "description": "Used by `--mod-textfield-background-color`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-background-color-focus": {
+ "description": "Used by `--mod-textfield-background-color`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-background-color-focus-hover": {
+ "description": "Used by `--mod-textfield-background-color`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-background-color-key-focus": {
+ "description": "Used by `--mod-textfield-background-color`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-readonly-input-border-color": {
+ "value": "var(--spectrum-combobox-readonly-input-border-color)",
+ "description": "Used by `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly .spectrum-Combobox-input:read-only`.
Defaults to `var(--spectrum-combobox-readonly-input-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-combobox-inline-size": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-block-size": {
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `--spectrum-combobox-min-inline-size`, `--spectrum-combobox-button-width`, `--spectrum-combobox-button-inline-offset`, `.spectrum-Combobox`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-min-inline-size": {
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--quiet`.
Used by `.spectrum-Combobox`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combo-box-minimum-width-multiplier": {
+ "value": "2.5",
+ "description": "Used by `--spectrum-combobox-min-inline-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-button-width": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-progress-circle:dir(rtl), [dir=\"rtl\"] .spectrum-Combobox-progress-circle`, `.spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-icon-size": {
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `--spectrum-combobox-button-inline-offset`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-font-size": {
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `.spectrum-Combobox-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-spacing-inline-icon-to-button": {
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`, `.spectrum-Combobox--quiet`.
Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-progress-circle:dir(rtl), [dir=\"rtl\"] .spectrum-Combobox-progress-circle`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combo-box-visual-to-field-button-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-combobox-spacing-inline-icon-to-button`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-block-spacing-edge-to-progress-circle": {
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `.spectrum-Combobox-progress-circle`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-block-spacing-edge-to-alert": {
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-spacing-edge-to-menu": {
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `.spectrum-Combobox .spectrum-Popover.is-open`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-spacing-block-start-edge-to-text": {
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `.spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-spacing-block-end-edge-to-text": {
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `.spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-spacing-inline-start-edge-to-text": {
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`, `.spectrum-Combobox--quiet`.
Used by `.spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-spacing-inline-end-edge-to-text": {
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `.spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-focus-indicator-thickness": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-focus-indicator-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-focus-indicator-gap": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-focus-indicator-color": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-focus-indicator-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-radius": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-width": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-width`, `--mod-picker-button-border-width`, `.spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly .spectrum-Combobox-input:read-only`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-spacing-label-to-combobox": {
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--quiet`, `.spectrum-Combobox--quiet.spectrum-Combobox--sizeS`, `.spectrum-Combobox--quiet.spectrum-Combobox--sizeM`, `.spectrum-Combobox--quiet.spectrum-Combobox--sizeL`, `.spectrum-Combobox--quiet.spectrum-Combobox--sizeXL`.
Used by `.spectrum-Combobox`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-font-style": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-line-height": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-invalid-default": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-invalid-default`, `--mod-picker-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-invalid-hover": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-invalid-hover`, `--mod-picker-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-invalid-focus": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-invalid-focus`, `--mod-picker-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-invalid-focus-hover": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-invalid-focus-hover`, `--mod-picker-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-invalid-key-focus": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-invalid-keyboard-focus`, `--mod-picker-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-background-color-disabled": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-background-color-disabled`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-default": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color`, `--mod-picker-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-disabled": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-disabled`, `--mod-picker-button-border-color-disabled`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-focus": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-focus`, `--mod-picker-button-border-color`, `--mod-combobox-border-color-default`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-focus-hover": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-focus-hover`, `--mod-picker-button-border-color`, `--mod-combobox-border-color-default`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-hover": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-hover`, `--mod-picker-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-key-focus": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-keyboard-focus`, `--mod-picker-button-border-color`, `--mod-combobox-border-color-default`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-readonly-input-background-color": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-readonly-border-color-invalid-default": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox.is-readOnly.is-invalid:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-invalid > .spectrum-Combobox-input:read-only`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-readonly-background-color-disabled": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only`, `.spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-readonly-text-color-disabled": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-disabled .spectrum-Combobox-input:read-only`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-readonly-border-color-disabled": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-disabled .spectrum-Combobox-input:read-only`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combo-box-visual-to-field-button-small": {
+ "value": "7px",
+ "description": "Used by `--spectrum-combobox-spacing-inline-icon-to-button`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combo-box-visual-to-field-button-large": {
+ "value": "9px",
+ "description": "Used by `--spectrum-combobox-spacing-inline-icon-to-button`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combo-box-visual-to-field-button-extra-large": {
+ "value": "10px",
+ "description": "Used by `--spectrum-combobox-spacing-inline-icon-to-button`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combo-box-quiet-minimum-width-multiplier": {
+ "value": "2",
+ "description": "Used by `--spectrum-combobox-min-inline-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combo-box-visual-to-field-button-quiet": {
+ "value": "0px",
+ "description": "Used by `--spectrum-combobox-spacing-inline-icon-to-button`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-button-inline-offset": {
+ "description": "Defined in `.spectrum-Combobox--quiet`.
Used by `.spectrum-Combobox-button`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-readonly-input-border-color": {
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly .spectrum-Combobox-input:read-only`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-500": {
+ "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+ "description": "Used by `--system-combobox-border-color-default`, `--system-combobox-readonly-input-border-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-600": {
+ "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+ "description": "Used by `--system-combobox-border-color-hover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-800": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Used by `--system-combobox-border-color-focus`, `--system-combobox-border-color-key-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-900": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Used by `--system-combobox-border-color-focus-hover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--system-combobox-background-color-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-border-color": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Used by `--system-combobox-border-color-disabled`, `--spectrum-combobox-readonly-border-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-field-width": {
+ "value": "192px",
+ "description": "Used by `--spectrum-combobox-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-combobox-block-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-combobox-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-combobox-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-progress-circle-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-combobox-block-spacing-edge-to-progress-circle`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-alert-icon-medium": {
+ "value": "7px",
+ "description": "Used by `--spectrum-combobox-block-spacing-edge-to-alert`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-to-menu-medium": {
+ "value": "6px",
+ "description": "Used by `--spectrum-combobox-spacing-edge-to-menu`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-combobox-spacing-block-start-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-100": {
+ "value": "9px",
+ "description": "Used by `--spectrum-combobox-spacing-block-end-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-100": {
+ "value": "12px",
+ "description": "Used by `--spectrum-combobox-spacing-inline-start-edge-to-text`, `--spectrum-combobox-spacing-inline-end-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-combobox-focus-indicator-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-combobox-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-combobox-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-combobox-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--spectrum-combobox-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-label-to-component": {
+ "value": "0px",
+ "description": "Used by `--spectrum-combobox-spacing-label-to-combobox`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-combobox-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-combobox-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-default": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Used by `--spectrum-combobox-border-color-invalid-default`, `--spectrum-combobox-readonly-border-color-invalid-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-hover": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--spectrum-combobox-border-color-invalid-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-focus": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--spectrum-combobox-border-color-invalid-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-focus-hover": {
+ "value": "var(--spectrum-negative-border-color-down)",
+ "description": "Used by `--spectrum-combobox-border-color-invalid-focus-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-key-focus": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--spectrum-combobox-border-color-invalid-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-50": {
+ "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))",
+ "description": "Used by `--spectrum-combobox-readonly-input-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-background-color": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--spectrum-combobox-readonly-background-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-combobox-readonly-text-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-combobox-block-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-75": {
+ "value": "16px",
+ "description": "Used by `--spectrum-combobox-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-combobox-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-progress-circle-small": {
+ "value": "4px",
+ "description": "Used by `--spectrum-combobox-block-spacing-edge-to-progress-circle`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-alert-icon-small": {
+ "value": "4px",
+ "description": "Used by `--spectrum-combobox-block-spacing-edge-to-alert`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-to-menu-small": {
+ "value": "6px",
+ "description": "Used by `--spectrum-combobox-spacing-edge-to-menu`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-combobox-spacing-block-start-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-combobox-spacing-block-end-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-75": {
+ "value": "10px",
+ "description": "Used by `--spectrum-combobox-spacing-inline-start-edge-to-text`, `--spectrum-combobox-spacing-inline-end-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-combobox-block-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-200": {
+ "value": "22px",
+ "description": "Used by `--spectrum-combobox-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-combobox-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-progress-circle-large": {
+ "value": "12px",
+ "description": "Used by `--spectrum-combobox-block-spacing-edge-to-progress-circle`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-alert-icon-large": {
+ "value": "10px",
+ "description": "Used by `--spectrum-combobox-block-spacing-edge-to-alert`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-to-menu-large": {
+ "value": "7px",
+ "description": "Used by `--spectrum-combobox-spacing-edge-to-menu`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-combobox-spacing-block-start-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-200": {
+ "value": "11px",
+ "description": "Used by `--spectrum-combobox-spacing-block-end-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-200": {
+ "value": "15px",
+ "description": "Used by `--spectrum-combobox-spacing-inline-start-edge-to-text`, `--spectrum-combobox-spacing-inline-end-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-combobox-block-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-300": {
+ "value": "26px",
+ "description": "Used by `--spectrum-combobox-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-combobox-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-progress-circle-extra-large": {
+ "value": "16px",
+ "description": "Used by `--spectrum-combobox-block-spacing-edge-to-progress-circle`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-alert-icon-extra-large": {
+ "value": "13px",
+ "description": "Used by `--spectrum-combobox-block-spacing-edge-to-alert`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-to-menu-extra-large": {
+ "value": "8px",
+ "description": "Used by `--spectrum-combobox-spacing-edge-to-menu`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-300": {
+ "value": "12px",
+ "description": "Used by `--spectrum-combobox-spacing-block-start-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-combobox-spacing-block-end-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-300": {
+ "value": "17px",
+ "description": "Used by `--spectrum-combobox-spacing-inline-start-edge-to-text`, `--spectrum-combobox-spacing-inline-end-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-text-quiet": {
+ "value": "0px",
+ "description": "Used by `--spectrum-combobox-spacing-inline-start-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-label-to-component-quiet-medium": {
+ "value": "-8px",
+ "description": "Used by `--spectrum-combobox-spacing-label-to-combobox`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-label-to-component-quiet-small": {
+ "value": "-8px",
+ "description": "Used by `--spectrum-combobox-spacing-label-to-combobox`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-label-to-component-quiet-large": {
+ "value": "-12px",
+ "description": "Used by `--spectrum-combobox-spacing-label-to-combobox`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-label-to-component-quiet-extra-large": {
+ "value": "-15px",
+ "description": "Used by `--spectrum-combobox-spacing-label-to-combobox`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-combobox-border-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-combobox-border-color-default`.",
+ "control": "color"
+ },
+ "system-combobox-border-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-combobox-border-color-hover`.",
+ "control": "color"
+ },
+ "system-combobox-border-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-combobox-border-color-focus`.",
+ "control": "color"
+ },
+ "system-combobox-border-color-focus-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-combobox-border-color-focus-hover`.",
+ "control": "color"
+ },
+ "system-combobox-border-color-key-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-combobox-border-color-key-focus`.",
+ "control": "color"
+ },
+ "system-combobox-readonly-input-border-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-combobox-readonly-input-border-color`.",
+ "control": "color"
+ },
+ "system-combobox-background-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-combobox-background-color-disabled`.",
+ "control": "color"
+ },
+ "system-combobox-border-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-combobox-border-color-disabled`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {
+ "mod-textfield-focus-indicator-gap": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-focus-indicator-width": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-focus-indicator-color": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-background-color": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-background-color-disabled": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-font-family": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-font-weight": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-text-color-default": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-text-color-hover": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-text-color-focus": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-text-color-focus-hover": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-text-color-keyboard-focus": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-text-color-disabled": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-width": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-color": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-color-disabled": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-color-focus": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-color-focus-hover": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-color-hover": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-color-keyboard-focus": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-color-invalid-default": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-color-invalid-hover": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-color-invalid-focus": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-color-invalid-focus-hover": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-color-invalid-keyboard-focus": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-icon-color-invalid": {
+ "category": "Passthrough"
+ },
+ "mod-picker-button-border-width": {
+ "category": "Passthrough"
+ },
+ "mod-picker-button-border-color": {
+ "category": "Passthrough"
+ },
+ "mod-picker-button-background-color": {
+ "category": "Passthrough"
+ },
+ "mod-picker-button-background-color-disabled": {
+ "category": "Passthrough"
+ },
+ "mod-picker-button-font-color-disabled": {
+ "category": "Passthrough"
+ },
+ "mod-picker-button-border-color-disabled": {
+ "category": "Passthrough"
+ },
+ "mod-picker-button-background-color-quiet": {
+ "category": "Passthrough"
+ },
+ "mod-picker-button-border-color-quiet": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-combobox-border-color-highlight": {
+ "value": "var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover))",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-picker-button-border-color`.
Defaults to `var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-combobox-border-color-invalid": {
+ "value": "var(--mod-combobox-border-color-invalid-focus-hover, var(--spectrum-combobox-border-color-invalid-focus-hover))",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-picker-button-border-color`.
Defaults to `var(--mod-combobox-border-color-invalid-focus-hover, var(--spectrum-combobox-border-color-invalid-focus-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-border-color-invalid-default": {
+ "value": "var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default))",
+ "description": "Used by `.spectrum-Combobox.is-readOnly.is-invalid:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-invalid > .spectrum-Combobox-input:read-only`.
Defaults to `var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-text-color-disabled": {
+ "value": "var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled))",
+ "description": "Used by `.spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-disabled .spectrum-Combobox-input:read-only`.
Defaults to `var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js
index baea4599d01..77bd46c14b4 100644
--- a/components/combobox/stories/combobox.stories.js
+++ b/components/combobox/stories/combobox.stories.js
@@ -2,11 +2,13 @@ import { Template as Menu } from "@spectrum-css/menu/stories/template.js";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isFocused, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, isReadOnly, size } from "@spectrum-css/preview/types";
import { within } from "@storybook/test";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { ComboBoxGroup } from "./combobox.test.js";
import { Template, VariantGroup } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* Comboboxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.
*
@@ -144,6 +146,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
diff --git a/components/commons/package.json b/components/commons/package.json
index ce1e2046508..21155db101b 100644
--- a/components/commons/package.json
+++ b/components/commons/package.json
@@ -18,8 +18,7 @@
"./*.css": "./*.css",
"./CHANGELOG.md": "./CHANGELOG.md",
"./README.md": "./README.md",
- "./package.json": "./package.json",
- "./stories/*": "./stories/*"
+ "./package.json": "./package.json"
},
"main": "index.css",
"files": [
diff --git a/components/contextualhelp/dist/metadata.json b/components/contextualhelp/dist/metadata.json
index 4f7dbd58c5b..daa6bc96a3a 100644
--- a/components/contextualhelp/dist/metadata.json
+++ b/components/contextualhelp/dist/metadata.json
@@ -8,33 +8,124 @@
".spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body",
".spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading"
],
- "modifiers": [
- "--mod-contextual-help-body-color",
- "--mod-contextual-help-heading-color",
- "--mod-spectrum-contextual-help-body-size",
- "--mod-spectrum-contextual-help-content-spacing",
- "--mod-spectrum-contextual-help-heading-size",
- "--mod-spectrum-contextual-help-link-spacing",
- "--mod-spectrum-contextual-help-minimum-width",
- "--mod-spectrum-contextual-help-padding",
- "--mod-spectrum-contextual-help-popover-maximum-width"
- ],
- "component": [
- "--spectrum-contextual-help-body-size",
- "--spectrum-contextual-help-content-spacing",
- "--spectrum-contextual-help-minimum-width",
- "--spectrum-contextual-help-title-size"
- ],
- "global": [
- "--spectrum-body-color",
- "--spectrum-heading-color",
- "--spectrum-spacing-300",
- "--spectrum-spacing-400"
- ],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-contextual-help-body-color",
- "--highcontrast-contextual-help-heading-color"
- ]
+ "modifiers": {
+ "mod-spectrum-contextual-help-minimum-width": {
+ "value": "268px",
+ "description": "Used by `.spectrum-ContextualHelp`.
Defaults to `var(--spectrum-contextual-help-minimum-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-spectrum-contextual-help-padding": {
+ "value": "24px",
+ "description": "Used by `.spectrum-ContextualHelp-popover`.
Defaults to `var(--spectrum-spacing-400)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-spectrum-contextual-help-body-size": {
+ "value": "var(--spectrum-body-size-xs)",
+ "description": "Used by `.spectrum-ContextualHelp-popover`.
Defaults to `var(--spectrum-contextual-help-body-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-contextual-help-body-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `.spectrum-ContextualHelp-popover`.
Defaults to `var(--spectrum-body-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-spectrum-contextual-help-popover-maximum-width": {
+ "description": "Used by `.spectrum-ContextualHelp-popover`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-spectrum-contextual-help-content-spacing": {
+ "value": "var(--spectrum-contextual-help-content-spacing)",
+ "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.
Defaults to `var(--spectrum-contextual-help-content-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-spectrum-contextual-help-heading-size": {
+ "value": "var(--spectrum-heading-size-xxs)",
+ "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.
Defaults to `var(--spectrum-contextual-help-title-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-contextual-help-heading-color": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.
Defaults to `var(--spectrum-heading-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-spectrum-contextual-help-link-spacing": {
+ "value": "16px",
+ "description": "Used by `.spectrum-ContextualHelp-link`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-contextual-help-minimum-width": {
+ "value": "268px",
+ "description": "Used by `.spectrum-ContextualHelp`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-contextual-help-body-size": {
+ "value": "var(--spectrum-body-size-xs)",
+ "description": "Used by `.spectrum-ContextualHelp-popover`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-contextual-help-content-spacing": {
+ "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-contextual-help-title-size": {
+ "value": "var(--spectrum-heading-size-xxs)",
+ "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-spacing-400": {
+ "value": "24px",
+ "description": "Used by `.spectrum-ContextualHelp-popover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `.spectrum-ContextualHelp-popover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-heading-color": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `.spectrum-ContextualHelp-link`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-contextual-help-body-color": {
+ "value": "var(--mod-contextual-help-body-color, var(--spectrum-body-color))",
+ "description": "Defined in `.spectrum-ContextualHelp`.
Used by `.spectrum-ContextualHelp-popover`.
Defaults to `var(--mod-contextual-help-body-color, var(--spectrum-body-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-contextual-help-heading-color": {
+ "value": "var(--mod-contextual-help-heading-color, var(--spectrum-heading-color))",
+ "description": "Defined in `.spectrum-ContextualHelp`.
Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.
Defaults to `var(--mod-contextual-help-heading-color, var(--spectrum-heading-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/contextualhelp/stories/contextualhelp.stories.js b/components/contextualhelp/stories/contextualhelp.stories.js
index 4b7abd0296a..94736fd153d 100644
--- a/components/contextualhelp/stories/contextualhelp.stories.js
+++ b/components/contextualhelp/stories/contextualhelp.stories.js
@@ -1,10 +1,12 @@
import { default as ActionButtonStories } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { ContextualHelpGroup } from "./contextualhelp.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* Contextual help shows a user extra information in relation to another component or view.
*/
@@ -97,6 +99,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
docs: {
story: {
height: "200px",
diff --git a/components/contextualhelp/stories/template.js b/components/contextualhelp/stories/template.js
index aaeac140d32..136b4b339db 100644
--- a/components/contextualhelp/stories/template.js
+++ b/components/contextualhelp/stories/template.js
@@ -11,7 +11,7 @@ import "../index.css";
export const Template = ({
rootClass = "spectrum-ContextualHelp",
- id = getRandomId("contextualhelp"),
+ id = getRandomId("contextual-help"),
iconName,
iconSet = "workflow",
title,
diff --git a/components/datepicker/dist/metadata.json b/components/datepicker/dist/metadata.json
index f52f1b93cd6..a2e39c9ba84 100644
--- a/components/datepicker/dist/metadata.json
+++ b/components/datepicker/dist/metadata.json
@@ -4,15 +4,16 @@
".spectrum-DatePicker",
".spectrum-DatePicker--quiet",
".spectrum-DatePicker--quiet .spectrum-DatePicker-button",
- ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:not(.is-open)",
".spectrum-DatePicker--quiet .spectrum-DatePicker-button:not(:disabled, .is-open)",
+ ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:not(.is-open)",
+ ".spectrum-DatePicker--quiet:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid)",
".spectrum-DatePicker--quiet.is-disabled",
".spectrum-DatePicker--quiet.is-invalid",
".spectrum-DatePicker--quiet.is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField)",
- ".spectrum-DatePicker--quiet:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid)",
".spectrum-DatePicker--range",
".spectrum-DatePicker--range .spectrum-DatePicker-textfield",
".spectrum-DatePicker--range .spectrum-DatePicker-textfield:first-of-type",
+ ".spectrum-DatePicker--range:after",
".spectrum-DatePicker--range.is-keyboardFocused:not(.spectrum-DatePicker--quiet) .spectrum-DatePicker-textfield:after",
".spectrum-DatePicker--range.is-keyboardFocused:not(.spectrum-DatePicker--quiet):after",
".spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange .spectrum-DatePicker-textfield",
@@ -23,136 +24,607 @@
".spectrum-DatePicker--range.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield",
".spectrum-DatePicker--range.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield:first-of-type",
".spectrum-DatePicker--range.spectrum-DatePicker--quiet.is-keyboardFocused:after",
- ".spectrum-DatePicker--range:after",
".spectrum-DatePicker-button",
".spectrum-DatePicker-input",
".spectrum-DatePicker-input.spectrum-DatePicker-endField",
".spectrum-DatePicker-input.spectrum-DatePicker-startField",
".spectrum-DatePicker-rangeDash",
".spectrum-DatePicker-rangeDash:before",
+ ".spectrum-DatePicker:not(.spectrum-DatePicker--quiet, .is-disabled)",
".spectrum-DatePicker.is-disabled",
".spectrum-DatePicker.is-invalid",
".spectrum-DatePicker.is-invalid:not(.spectrum-DatePicker--quiet, .is-disabled)",
- ".spectrum-DatePicker.spectrum-DatePicker--quiet.is-invalid",
- ".spectrum-DatePicker:not(.spectrum-DatePicker--quiet, .is-disabled)"
- ],
- "modifiers": [
- "--mod-datepicker-border-color-disabled",
- "--mod-datepicker-border-radius",
- "--mod-datepicker-border-radius-quiet",
- "--mod-datepicker-dash-color",
- "--mod-datepicker-dash-color-disabled",
- "--mod-datepicker-dash-font-size",
- "--mod-datepicker-dash-line-height",
- "--mod-datepicker-datetime-input-width",
- "--mod-datepicker-datetime-input-width-first",
- "--mod-datepicker-datetime-quiet-input-width",
- "--mod-datepicker-datetime-quiet-input-width-first",
- "--mod-datepicker-focus-animation",
- "--mod-datepicker-focus-line-gap",
- "--mod-datepicker-focus-ring-color",
- "--mod-datepicker-focus-ring-gap",
- "--mod-datepicker-focus-ring-width",
- "--mod-datepicker-focus-thickness",
- "--mod-datepicker-generic-padding",
- "--mod-datepicker-input-width",
- "--mod-datepicker-input-width-quiet",
- "--mod-datepicker-invalid-quiet-color",
- "--mod-datepicker-min-width",
- "--mod-datepicker-padding-inline",
- "--mod-datepicker-padding-inline-end-invalid-quiet",
- "--mod-datepicker-padding-inline-quiet",
- "--mod-datepicker-pickerbutton-border-color",
- "--mod-datepicker-pickerbutton-border-color-invalid",
- "--mod-datepicker-quiet-border-color-hover",
- "--mod-datepicker-quiet-button-offset",
- "--mod-datepicker-range-dash-margin-left",
- "--mod-datepicker-range-dash-padding-top",
- "--mod-datepicker-range-input-width-first",
- "--mod-datepicker-range-input-width-quiet-first"
- ],
- "component": [
- "--spectrum-datepicker-border-color-disabled",
- "--spectrum-datepicker-border-radius",
- "--spectrum-datepicker-border-radius-quiet",
- "--spectrum-datepicker-border-width",
- "--spectrum-datepicker-dash-color",
- "--spectrum-datepicker-dash-font-size",
- "--spectrum-datepicker-dash-line-height",
- "--spectrum-datepicker-datetime-input-width",
- "--spectrum-datepicker-datetime-input-width-first",
- "--spectrum-datepicker-datetime-quiet-input-width",
- "--spectrum-datepicker-datetime-quiet-input-width-first",
- "--spectrum-datepicker-datetime-width-first",
- "--spectrum-datepicker-focus-animation",
- "--spectrum-datepicker-focus-line-gap",
- "--spectrum-datepicker-focus-ring-color",
- "--spectrum-datepicker-focus-ring-gap",
- "--spectrum-datepicker-focus-ring-width",
- "--spectrum-datepicker-focus-thickness",
- "--spectrum-datepicker-generic-padding",
- "--spectrum-datepicker-icon-size",
- "--spectrum-datepicker-icon-to-text",
- "--spectrum-datepicker-initial-height",
- "--spectrum-datepicker-initial-width",
- "--spectrum-datepicker-input-datetime-width",
- "--spectrum-datepicker-input-width",
- "--spectrum-datepicker-input-width-base",
- "--spectrum-datepicker-input-width-quiet",
- "--spectrum-datepicker-invalid-icon-to-button",
- "--spectrum-datepicker-invalid-icon-to-button-quiet",
- "--spectrum-datepicker-invalid-quiet-color",
- "--spectrum-datepicker-min-width",
- "--spectrum-datepicker-padding-inline-end",
- "--spectrum-datepicker-padding-inline-end-invalid-quiet",
- "--spectrum-datepicker-padding-inline-end-quiet",
- "--spectrum-datepicker-pickerbutton-border-color",
- "--spectrum-datepicker-pickerbutton-border-color-invalid",
- "--spectrum-datepicker-pickerbutton-width",
- "--spectrum-datepicker-pickerbutton-width-quiet",
- "--spectrum-datepicker-quiet-border-color-hover",
- "--spectrum-datepicker-quiet-button-offset",
- "--spectrum-datepicker-range-dash-marin-inline-start",
- "--spectrum-datepicker-range-dash-padding-top",
- "--spectrum-datepicker-range-input-width-first",
- "--spectrum-datepicker-range-input-width-quiet-first",
- "--spectrum-datepicker-width-quiet-first",
- "--spectrum-datepicker-width-quiet-second"
- ],
- "global": [
- "--spectrum-animation-duration-100",
- "--spectrum-border-width-100",
- "--spectrum-component-edge-to-text-100",
- "--spectrum-component-height-100",
- "--spectrum-corner-radius-100",
- "--spectrum-disabled-border-color",
- "--spectrum-disabled-content-color",
- "--spectrum-field-edge-to-disclosure-icon-100",
- "--spectrum-field-width",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-font-size-100",
- "--spectrum-gray-500",
- "--spectrum-negative-border-color-default",
- "--spectrum-neutral-content-color-default",
- "--spectrum-spacing-75",
- "--spectrum-text-to-visual-100",
- "--spectrum-workflow-icon-size-100"
- ],
- "system-theme": ["--system-date-picker-initial-height"],
- "passthroughs": [
- "--mod-picker-button-background-color",
- "--mod-picker-button-background-color-hover-disabled",
- "--mod-picker-button-border-color",
- "--mod-picker-button-border-color-disabled",
- "--mod-textfield-border-color-disabled",
- "--mod-textfield-icon-spacing-inline-end-invalid",
- "--mod-textfield-icon-spacing-inline-end-quiet-invalid"
+ ".spectrum-DatePicker.spectrum-DatePicker--quiet.is-invalid"
],
- "high-contrast": [
- "--highcontrast-datepicker-dash-color",
- "--highcontrast-datepicker-focus-ring-color",
- "--highcontrast-datepicker-pickerbutton-border-color"
- ]
+ "modifiers": {
+ "mod-datepicker-border-radius": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-DatePicker--quiet`, `.spectrum-DatePicker--range`, `.spectrum-DatePicker--range.spectrum-DatePicker--quiet`.
Used by `--spectrum-datepicker-border-radius`.
Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-border-radius-quiet": {
+ "description": "Used by `--spectrum-datepicker-border-radius-quiet`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-min-width": {
+ "value": "192px",
+ "description": "Used by `--spectrum-datepicker-min-width`.
Defaults to `var(--spectrum-field-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-pickerbutton-border-color": {
+ "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+ "description": "Used by `--spectrum-datepicker-pickerbutton-border-color`.
Defaults to `var(--spectrum-gray-500)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-datepicker-pickerbutton-border-color-invalid": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Used by `--spectrum-datepicker-pickerbutton-border-color-invalid`.
Defaults to `var(--spectrum-negative-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-datepicker-quiet-button-offset": {
+ "value": "6px",
+ "description": "Used by `--spectrum-datepicker-quiet-button-offset`.
Defaults to `var(--spectrum-text-to-visual-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-focus-ring-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-datepicker-focus-ring-gap`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-focus-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-datepicker-focus-thickness`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-focus-animation": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Used by `--spectrum-datepicker-focus-animation`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-focus-ring-width": {
+ "value": "1px",
+ "description": "Used by `--spectrum-datepicker-focus-ring-width`.
Defaults to `var(--spectrum-border-width-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-focus-ring-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-datepicker-focus-ring-color`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-datepicker-focus-line-gap": {
+ "value": "4px",
+ "description": "Used by `--spectrum-datepicker-focus-line-gap`.
Defaults to `var(--spectrum-spacing-75)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-invalid-quiet-color": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Used by `--spectrum-datepicker-invalid-quiet-color`.
Defaults to `var(--spectrum-negative-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-datepicker-quiet-border-color-hover": {
+ "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+ "description": "Used by `--spectrum-datepicker-quiet-border-color-hover`.
Defaults to `var(--spectrum-gray-500)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-datepicker-border-color-disabled": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Used by `--spectrum-datepicker-border-color-disabled`.
Defaults to `var(--spectrum-disabled-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-datepicker-dash-font-size": {
+ "value": "14px",
+ "description": "Used by `--spectrum-datepicker-dash-font-size`.
Defaults to `var(--spectrum-font-size-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-dash-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-DatePicker.is-disabled`.
Used by `--spectrum-datepicker-dash-color`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-datepicker-range-dash-padding-top": {
+ "description": "Used by `--spectrum-datepicker-range-dash-padding-top`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-range-dash-margin-left": {
+ "value": "calc(var(--spectrum-datepicker-dash-font-size) * -0.5)",
+ "description": "Used by `--spectrum-datepicker-range-dash-marin-inline-start`.
Defaults to `calc(var(--spectrum-datepicker-dash-font-size) * -0.5)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-range-input-width-first": {
+ "value": "calc(var(--spectrum-datepicker-initial-width) - var(--spectrum-datepicker-generic-padding) * 2)",
+ "description": "Used by `--spectrum-datepicker-range-input-width-first`.
Defaults to `calc(var(--spectrum-datepicker-initial-width) - var(--spectrum-datepicker-generic-padding) * 2)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-input-width": {
+ "value": "calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height))",
+ "description": "Used by `--spectrum-datepicker-input-width`.
Defaults to `calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-range-input-width-quiet-first": {
+ "value": "calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second))",
+ "description": "Used by `--spectrum-datepicker-range-input-width-quiet-first`.
Defaults to `calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-input-width-quiet": {
+ "value": "calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height))",
+ "description": "Used by `--spectrum-datepicker-input-width-quiet`.
Defaults to `calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-datetime-input-width-first": {
+ "value": "calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first))",
+ "description": "Used by `--spectrum-datepicker-datetime-input-width-first`.
Defaults to `calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-datetime-input-width": {
+ "value": "calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height))",
+ "description": "Used by `--spectrum-datepicker-datetime-input-width`.
Defaults to `calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-datetime-quiet-input-width-first": {
+ "value": "calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width))",
+ "description": "Used by `--spectrum-datepicker-datetime-quiet-input-width-first`.
Defaults to `calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-datetime-quiet-input-width": {
+ "value": "calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height))",
+ "description": "Used by `--spectrum-datepicker-datetime-quiet-input-width`.
Defaults to `calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-padding-inline": {
+ "value": "calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--spectrum-datepicker-border-width) * 2)",
+ "description": "Defined in `.spectrum-DatePicker--quiet`.
Used by `--spectrum-datepicker-padding-inline-end`.
Defaults to `calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--spectrum-datepicker-border-width) * 2)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-padding-inline-quiet": {
+ "value": "calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--spectrum-datepicker-quiet-button-offset))",
+ "description": "Used by `--spectrum-datepicker-padding-inline-end-quiet`.
Defaults to `calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--spectrum-datepicker-quiet-button-offset))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-padding-inline-end-invalid-quiet": {
+ "value": "calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text))",
+ "description": "Used by `--spectrum-datepicker-padding-inline-end-invalid-quiet`.
Defaults to `calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-dash-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--mod-datepicker-dash-color`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-datepicker-generic-padding": {
+ "value": "var(--spectrum-datepicker-generic-padding)",
+ "description": "Used by `.spectrum-DatePicker-input.spectrum-DatePicker-startField`, `.spectrum-DatePicker-input.spectrum-DatePicker-endField`.
Defaults to `var(--spectrum-datepicker-generic-padding)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-datepicker-dash-line-height": {
+ "value": "var(--spectrum-datepicker-dash-line-height)",
+ "description": "Used by `.spectrum-DatePicker-rangeDash`.
Defaults to `var(--spectrum-datepicker-dash-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-datepicker-border-radius": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker`, `--mod-datepicker-border-radius`, `.spectrum-DatePicker--range:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-border-radius-quiet": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--mod-datepicker-border-radius`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-border-width": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-padding-inline-end`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-min-width": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-icon-size": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-input-width-base`, `--spectrum-datepicker-input-width-quiet`, `--spectrum-datepicker-datetime-input-width`, `--spectrum-datepicker-datetime-quiet-input-width`, `--spectrum-datepicker-padding-inline-end-invalid-quiet`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-pickerbutton-border-color": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--mod-picker-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-datepicker-pickerbutton-border-color-invalid": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--mod-picker-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-datepicker-pickerbutton-width": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-pickerbutton-width-quiet`, `--spectrum-datepicker-padding-inline-end`, `--spectrum-datepicker-padding-inline-end-quiet`, `--mod-textfield-icon-spacing-inline-end-invalid`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-quiet-button-offset": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-pickerbutton-width-quiet`, `--spectrum-datepicker-padding-inline-end-quiet`, `.spectrum-DatePicker--quiet .spectrum-DatePicker-button`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-icon-to-text": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-padding-inline-end-invalid-quiet`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-pickerbutton-width-quiet": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-padding-inline-end-invalid-quiet`, `--mod-textfield-icon-spacing-inline-end-quiet-invalid`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-focus-ring-gap": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-focus-thickness": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range.spectrum-DatePicker--quiet.is-keyboardFocused:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-focus-animation": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-focus-ring-width": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range.is-keyboardFocused:not(.spectrum-DatePicker--quiet):after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-focus-ring-color": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range.is-keyboardFocused:not(.spectrum-DatePicker--quiet):after`, `.spectrum-DatePicker--range.spectrum-DatePicker--quiet.is-keyboardFocused:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-datepicker-focus-line-gap": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range.spectrum-DatePicker--quiet.is-keyboardFocused:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-invalid-quiet-color": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--mod-picker-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-datepicker-quiet-border-color-hover": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--mod-picker-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-datepicker-border-color-disabled": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--mod-picker-button-border-color-disabled`, `--mod-picker-button-background-color-hover-disabled`, `--mod-textfield-border-color-disabled`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-datepicker-dash-font-size": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-range-dash-marin-inline-start`, `.spectrum-DatePicker-rangeDash:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-dash-color": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker-rangeDash`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-datepicker-range-dash-padding-top": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker-rangeDash`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-range-dash-marin-inline-start": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker-rangeDash:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-range-input-width-first": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-input-width-base`, `.spectrum-DatePicker--range .spectrum-DatePicker-textfield:first-of-type`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-initial-width": {
+ "description": "Used by `--spectrum-datepicker-range-input-width-first`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-generic-padding": {
+ "description": "Used by `--spectrum-datepicker-range-input-width-first`, `.spectrum-DatePicker-input.spectrum-DatePicker-startField`, `.spectrum-DatePicker-input.spectrum-DatePicker-endField`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-input-width-base": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-input-width`, `--spectrum-datepicker-datetime-input-width-first`, `--spectrum-datepicker-datetime-quiet-input-width-first`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-input-width": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range .spectrum-DatePicker-textfield`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-initial-height": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-input-width`, `--spectrum-datepicker-input-width-quiet`, `--spectrum-datepicker-datetime-input-width`, `--spectrum-datepicker-datetime-quiet-input-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-range-input-width-quiet-first": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-input-width-quiet`, `.spectrum-DatePicker--range.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield:first-of-type`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-width-quiet-first": {
+ "description": "Used by `--spectrum-datepicker-range-input-width-quiet-first`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-width-quiet-second": {
+ "description": "Used by `--spectrum-datepicker-range-input-width-quiet-first`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-input-width-quiet": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-datetime-input-width-first": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-datetime-input-width`, `.spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange .spectrum-DatePicker-textfield:first-of-type`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-datetime-width-first": {
+ "description": "Used by `--spectrum-datepicker-datetime-input-width-first`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-datetime-input-width": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange .spectrum-DatePicker-textfield`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-datetime-quiet-input-width-first": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-datetime-quiet-input-width`, `.spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield:first-of-type`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-input-datetime-width": {
+ "description": "Used by `--spectrum-datepicker-datetime-quiet-input-width-first`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-datetime-quiet-input-width": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-padding-inline-end": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-padding-inline-end-quiet": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--mod-datepicker-padding-inline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-padding-inline-end-invalid-quiet": {
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--quiet.is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField)`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-invalid-icon-to-button": {
+ "description": "Used by `--mod-textfield-icon-spacing-inline-end-invalid`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-invalid-icon-to-button-quiet": {
+ "description": "Used by `--mod-textfield-icon-spacing-inline-end-quiet-invalid`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-dash-line-height": {
+ "description": "Used by `.spectrum-DatePicker-rangeDash`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--system-date-picker-initial-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-datepicker-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--spectrum-datepicker-border-width`, `--spectrum-datepicker-focus-ring-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-width": {
+ "value": "192px",
+ "description": "Used by `--spectrum-datepicker-min-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-datepicker-icon-size`, `--spectrum-datepicker-pickerbutton-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-500": {
+ "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+ "description": "Used by `--spectrum-datepicker-pickerbutton-border-color`, `--spectrum-datepicker-quiet-border-color-hover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-default": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Used by `--spectrum-datepicker-pickerbutton-border-color-invalid`, `--spectrum-datepicker-invalid-quiet-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-disclosure-icon-100": {
+ "value": "11px",
+ "description": "Used by `--spectrum-datepicker-pickerbutton-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-datepicker-quiet-button-offset`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-100": {
+ "value": "12px",
+ "description": "Used by `--spectrum-datepicker-icon-to-text`, `--spectrum-datepicker-padding-inline-end`, `--spectrum-datepicker-padding-inline-end-quiet`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-datepicker-focus-ring-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-datepicker-focus-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `--spectrum-datepicker-focus-animation`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-datepicker-focus-ring-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-spacing-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-datepicker-focus-line-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-border-color": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Used by `--spectrum-datepicker-border-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-datepicker-dash-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-datepicker-dash-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--mod-datepicker-dash-color`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-date-picker-initial-height": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-datepicker-initial-height`.",
+ "control": "text"
+ }
+ },
+ "passthroughs": {
+ "mod-textfield-border-color-disabled": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-icon-spacing-inline-end-invalid": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-icon-spacing-inline-end-quiet-invalid": {
+ "category": "Passthrough"
+ },
+ "mod-picker-button-border-color": {
+ "category": "Passthrough"
+ },
+ "mod-picker-button-border-color-disabled": {
+ "category": "Passthrough"
+ },
+ "mod-picker-button-background-color-hover-disabled": {
+ "category": "Passthrough"
+ },
+ "mod-picker-button-background-color": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-datepicker-pickerbutton-border-color": {
+ "value": "var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-negative-border-color-default))",
+ "description": "Defined in `.spectrum-DatePicker`, `.spectrum-DatePicker.spectrum-DatePicker--quiet.is-invalid`.
Used by `--spectrum-datepicker-pickerbutton-border-color`, `--spectrum-datepicker-pickerbutton-border-color-invalid`.
Defaults to `var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-negative-border-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-datepicker-focus-ring-color": {
+ "value": "var(--mod-datepicker-focus-ring-color, var(--spectrum-focus-indicator-color))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-focus-ring-color`.
Defaults to `var(--mod-datepicker-focus-ring-color, var(--spectrum-focus-indicator-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-datepicker-dash-color": {
+ "value": "var(--mod-datepicker-dash-color, var(--spectrum-neutral-content-color-default))",
+ "description": "Defined in `.spectrum-DatePicker`, `.spectrum-DatePicker.is-disabled`.
Used by `--spectrum-datepicker-dash-color`.
Defaults to `var(--mod-datepicker-dash-color, var(--spectrum-neutral-content-color-default))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/datepicker/stories/datepicker.stories.js b/components/datepicker/stories/datepicker.stories.js
index 0d40c563888..e2054a0bfb6 100644
--- a/components/datepicker/stories/datepicker.stories.js
+++ b/components/datepicker/stories/datepicker.stories.js
@@ -2,11 +2,13 @@ import { default as CalendarStories } from "@spectrum-css/calendar/stories/calen
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isInvalid, isOpen, isQuiet, isReadOnly, isRequired, isValid } from "@spectrum-css/preview/types";
import { within } from "@storybook/test";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { DatePickerGroup } from "./datepicker.test.js";
import { OpenClosedTemplate, Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* A date picker displays a text field input with a button next to it, and can display two text fields next to each other for choosing a date range.
*
@@ -77,6 +79,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
diff --git a/components/datepicker/stories/template.js b/components/datepicker/stories/template.js
index 2d56102d24e..d79f7ee42aa 100644
--- a/components/datepicker/stories/template.js
+++ b/components/datepicker/stories/template.js
@@ -15,7 +15,7 @@ import "../themes/express.css";
export const DatePicker = ({
rootClass = "spectrum-DatePicker",
- id = getRandomId("datepicker"),
+ id = getRandomId("date-picker"),
customClasses = [],
isOpen = true,
isInvalid = false,
diff --git a/components/dial/dist/metadata.json b/components/dial/dist/metadata.json
index cf8d026a3b2..f8e189dad57 100644
--- a/components/dial/dist/metadata.json
+++ b/components/dial/dist/metadata.json
@@ -6,8 +6,6 @@
".spectrum-Dial-controls:after",
".spectrum-Dial-controls:before",
".spectrum-Dial-handle",
- ".spectrum-Dial-handle.is-dragged",
- ".spectrum-Dial-handle.is-dragged:after",
".spectrum-Dial-handle:active",
".spectrum-Dial-handle:active:after",
".spectrum-Dial-handle:after",
@@ -18,6 +16,8 @@
".spectrum-Dial-handle:focus-within:after",
".spectrum-Dial-handle:hover",
".spectrum-Dial-handle:hover:after",
+ ".spectrum-Dial-handle.is-dragged",
+ ".spectrum-Dial-handle.is-dragged:after",
".spectrum-Dial-input",
".spectrum-Dial-input:focus",
".spectrum-Dial-label",
@@ -35,96 +35,458 @@
".u-isGrabbing .spectrum-Dial .spectrum-Dial-label",
".u-isGrabbing .spectrum-Dial .spectrum-Dial-value"
],
- "modifiers": [
- "--mod-dial-background-color-default",
- "--mod-dial-border-color",
- "--mod-dial-border-color-hover",
- "--mod-dial-border-radius",
- "--mod-dial-container-width",
- "--mod-dial-controls-margin",
- "--mod-dial-controls-min-height",
- "--mod-dial-handle-block-margin",
- "--mod-dial-handle-border-color-disabled",
- "--mod-dial-handle-border-size",
- "--mod-dial-handle-inline-margin",
- "--mod-dial-handle-marker-border-radius",
- "--mod-dial-handle-marker-color",
- "--mod-dial-handle-marker-color-hover",
- "--mod-dial-handle-marker-color-key-focus",
- "--mod-dial-handle-marker-color-mouse-focus",
- "--mod-dial-handle-marker-height",
- "--mod-dial-handle-marker-width",
- "--mod-dial-handle-position",
- "--mod-dial-handle-size",
- "--mod-dial-height",
- "--mod-dial-label-container-top-to-text",
- "--mod-dial-label-gap-y",
- "--mod-dial-label-line-height",
- "--mod-dial-label-text-color",
- "--mod-dial-label-text-color-disabled",
- "--mod-dial-label-text-size",
- "--mod-dial-min-height",
- "--mod-dial-min-max-tick-angles",
- "--mod-dial-min-max-tick-color",
- "--mod-dial-width"
- ],
- "component": [
- "--spectrum-dial-background-color-default",
- "--spectrum-dial-border-color",
- "--spectrum-dial-border-color-hover",
- "--spectrum-dial-border-radius",
- "--spectrum-dial-container-width",
- "--spectrum-dial-controls-margin",
- "--spectrum-dial-controls-min-height",
- "--spectrum-dial-handle-block-margin",
- "--spectrum-dial-handle-border-color-disabled",
- "--spectrum-dial-handle-border-size",
- "--spectrum-dial-handle-inline-margin",
- "--spectrum-dial-handle-marker-border-radius",
- "--spectrum-dial-handle-marker-color",
- "--spectrum-dial-handle-marker-color-hover",
- "--spectrum-dial-handle-marker-color-key-focus",
- "--spectrum-dial-handle-marker-color-mouse-focus",
- "--spectrum-dial-handle-marker-height",
- "--spectrum-dial-handle-marker-width",
- "--spectrum-dial-handle-position",
- "--spectrum-dial-handle-size",
- "--spectrum-dial-height",
- "--spectrum-dial-label-container-top-to-text",
- "--spectrum-dial-label-gap-y",
- "--spectrum-dial-label-line-height",
- "--spectrum-dial-label-text-color",
- "--spectrum-dial-label-text-color-disabled",
- "--spectrum-dial-label-text-size",
- "--spectrum-dial-min-height",
- "--spectrum-dial-min-max-tick-angles",
- "--spectrum-dial-min-max-tick-color",
- "--spectrum-dial-width"
- ],
- "global": [
- "--spectrum-border-width-200",
- "--spectrum-font-size-75",
- "--spectrum-gray-25",
- "--spectrum-gray-400",
- "--spectrum-gray-600",
- "--spectrum-gray-700",
- "--spectrum-gray-75",
- "--spectrum-gray-800",
- "--spectrum-line-height-200"
- ],
- "system-theme": [
- "--system-dial-background-color-default",
- "--system-dial-handle-marker-color-key-focus"
- ],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-dial-border-color",
- "--highcontrast-dial-border-color-hover",
- "--highcontrast-dial-handle-border-color-disabled",
- "--highcontrast-dial-handle-marker-color",
- "--highcontrast-dial-handle-marker-color-hover",
- "--highcontrast-dial-handle-marker-color-key-focus",
- "--highcontrast-dial-label-text-color-disabled",
- "--highcontrast-dial-min-max-tick-color"
- ]
+ "modifiers": {
+ "mod-dial-min-height": {
+ "value": "var(--spectrum-dial-min-height)",
+ "description": "Used by `.spectrum-Dial`.
Defaults to `var(--spectrum-dial-min-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dial-container-width": {
+ "value": "var(--spectrum-dial-container-width)",
+ "description": "Used by `.spectrum-Dial`.
Defaults to `var(--spectrum-dial-container-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dial-label-text-color-disabled": {
+ "value": "var(--spectrum-dial-label-text-color-disabled)",
+ "description": "Used by `.spectrum-Dial.is-disabled .spectrum-Dial-labelContainer`.
Defaults to `var(--spectrum-dial-label-text-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-dial-handle-border-color-disabled": {
+ "value": "var(--spectrum-dial-handle-border-color-disabled)",
+ "description": "Used by `.spectrum-Dial.is-disabled .spectrum-Dial-controls:after, .spectrum-Dial.is-disabled .spectrum-Dial-controls:before`, `.spectrum-Dial.is-disabled .spectrum-Dial-handle`, `.spectrum-Dial.is-disabled .spectrum-Dial-handle:after, .spectrum-Dial.is-disabled .spectrum-Dial-handle:before`.
Defaults to `var(--spectrum-dial-handle-border-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-dial-background-color-default": {
+ "value": "var(--spectrum-dial-background-color-default)",
+ "description": "Used by `.spectrum-Dial.is-disabled .spectrum-Dial-handle`.
Defaults to `var(--spectrum-dial-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-dial-label-text-color": {
+ "value": "var(--spectrum-dial-label-text-color)",
+ "description": "Used by `.spectrum-Dial-labelContainer`.
Defaults to `var(--spectrum-dial-label-text-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-dial-label-container-top-to-text": {
+ "value": "var(--spectrum-dial-label-container-top-to-text)",
+ "description": "Used by `.spectrum-Dial-labelContainer`.
Defaults to `var(--spectrum-dial-label-container-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dial-label-text-size": {
+ "value": "var(--spectrum-dial-label-text-size)",
+ "description": "Used by `.spectrum-Dial-labelContainer`.
Defaults to `var(--spectrum-dial-label-text-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dial-label-line-height": {
+ "value": "var(--spectrum-dial-label-line-height)",
+ "description": "Used by `.spectrum-Dial-labelContainer`.
Defaults to `var(--spectrum-dial-label-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dial-label-gap-y": {
+ "value": "var(--spectrum-dial-label-gap-y)",
+ "description": "Used by `.spectrum-Dial-labelContainer`.
Defaults to `var(--spectrum-dial-label-gap-y)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dial-width": {
+ "value": "var(--spectrum-dial-width)",
+ "description": "Used by `.spectrum-Dial-controls`.
Defaults to `var(--spectrum-dial-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dial-height": {
+ "value": "var(--spectrum-dial-height)",
+ "description": "Used by `.spectrum-Dial-controls`.
Defaults to `var(--spectrum-dial-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dial-controls-min-height": {
+ "value": "var(--spectrum-dial-controls-min-height)",
+ "description": "Used by `.spectrum-Dial-controls`.
Defaults to `var(--spectrum-dial-controls-min-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dial-controls-margin": {
+ "value": "var(--spectrum-dial-controls-margin)",
+ "description": "Used by `.spectrum-Dial-controls`.
Defaults to `var(--spectrum-dial-controls-margin)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dial-border-radius": {
+ "value": "var(--spectrum-dial-border-radius)",
+ "description": "Used by `.spectrum-Dial-controls`, `.spectrum-Dial-handle`.
Defaults to `var(--spectrum-dial-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dial-min-max-tick-color": {
+ "value": "var(--spectrum-dial-min-max-tick-color)",
+ "description": "Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`.
Defaults to `var(--spectrum-dial-min-max-tick-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-dial-handle-marker-height": {
+ "value": "var(--spectrum-dial-handle-marker-height)",
+ "description": "Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`, `.spectrum-Dial-controls:before`, `.spectrum-Dial-controls:after`, `.spectrum-Dial-handle:after`.
Defaults to `var(--spectrum-dial-handle-marker-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dial-handle-marker-border-radius": {
+ "value": "var(--spectrum-dial-handle-marker-border-radius)",
+ "description": "Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`, `.spectrum-Dial-handle:after`.
Defaults to `var(--spectrum-dial-handle-marker-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dial-min-max-tick-angles": {
+ "value": "var(--spectrum-dial-min-max-tick-angles)",
+ "description": "Used by `.spectrum-Dial-controls:before`, `.spectrum-Dial-controls:after, .spectrum-Dial-handle`.
Defaults to `var(--spectrum-dial-min-max-tick-angles)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dial-border-color": {
+ "value": "var(--spectrum-dial-border-color)",
+ "description": "Used by `.spectrum-Dial-handle`.
Defaults to `var(--spectrum-dial-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-dial-handle-block-margin": {
+ "value": "var(--spectrum-dial-handle-block-margin)",
+ "description": "Used by `.spectrum-Dial-handle`.
Defaults to `var(--spectrum-dial-handle-block-margin)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dial-handle-inline-margin": {
+ "value": "var(--spectrum-dial-handle-inline-margin)",
+ "description": "Used by `.spectrum-Dial-handle`.
Defaults to `var(--spectrum-dial-handle-inline-margin)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dial-handle-size": {
+ "value": "var(--spectrum-dial-handle-size)",
+ "description": "Used by `.spectrum-Dial-handle`.
Defaults to `var(--spectrum-dial-handle-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dial-handle-border-size": {
+ "value": "var(--spectrum-dial-handle-border-size)",
+ "description": "Used by `.spectrum-Dial-handle`, `.spectrum-Dial-handle.is-dragged, .spectrum-Dial-handle:active, .spectrum-Dial-handle:focus-visible, .spectrum-Dial-handle:focus-within`.
Defaults to `var(--spectrum-dial-handle-border-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dial-handle-position": {
+ "value": "var(--spectrum-dial-handle-position)",
+ "description": "Used by `.spectrum-Dial-handle`.
Defaults to `var(--spectrum-dial-handle-position)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dial-handle-marker-width": {
+ "value": "var(--spectrum-dial-handle-marker-width)",
+ "description": "Used by `.spectrum-Dial-handle:after`.
Defaults to `var(--spectrum-dial-handle-marker-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dial-handle-marker-color": {
+ "value": "var(--spectrum-dial-handle-marker-color)",
+ "description": "Used by `.spectrum-Dial-handle:after`.
Defaults to `var(--spectrum-dial-handle-marker-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-dial-border-color-hover": {
+ "value": "var(--spectrum-dial-border-color-hover)",
+ "description": "Used by `.spectrum-Dial-handle:hover`, `.spectrum-Dial-handle.is-dragged, .spectrum-Dial-handle:active`.
Defaults to `var(--spectrum-dial-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-dial-handle-marker-color-hover": {
+ "value": "var(--spectrum-dial-handle-marker-color-hover)",
+ "description": "Used by `.spectrum-Dial-handle:hover:after`.
Defaults to `var(--spectrum-dial-handle-marker-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-dial-handle-marker-color-mouse-focus": {
+ "value": "var(--spectrum-dial-handle-marker-color-mouse-focus)",
+ "description": "Used by `.spectrum-Dial-handle:focus-visible, .spectrum-Dial-handle:focus-within`.
Defaults to `var(--spectrum-dial-handle-marker-color-mouse-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-dial-handle-marker-color-key-focus": {
+ "value": "var(--spectrum-dial-handle-marker-color-key-focus)",
+ "description": "Used by `.spectrum-Dial-handle:focus-visible:after, .spectrum-Dial-handle:focus-within:after`, `.spectrum-Dial-handle.is-dragged:after, .spectrum-Dial-handle:active:after`.
Defaults to `var(--spectrum-dial-handle-marker-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-dial-handle-marker-color": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dial-border-color": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-marker-color-hover": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:hover:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dial-border-color-hover": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:hover`, `.spectrum-Dial-handle.is-dragged, .spectrum-Dial-handle:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-marker-color-mouse-focus": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:focus-visible, .spectrum-Dial-handle:focus-within`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dial-min-max-tick-color": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dial-label-text-color": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-labelContainer`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dial-label-text-color-disabled": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial.is-disabled .spectrum-Dial-labelContainer`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-border-color-disabled": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial.is-disabled .spectrum-Dial-controls:after, .spectrum-Dial.is-disabled .spectrum-Dial-controls:before`, `.spectrum-Dial.is-disabled .spectrum-Dial-handle`, `.spectrum-Dial.is-disabled .spectrum-Dial-handle:after, .spectrum-Dial.is-disabled .spectrum-Dial-handle:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dial-container-width": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-marker-width": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-marker-height": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`, `.spectrum-Dial-controls:before`, `.spectrum-Dial-controls:after`, `.spectrum-Dial-handle:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-marker-border-radius": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`, `.spectrum-Dial-handle:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-size": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle`, `.spectrum-Dial-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-min-height": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-controls-min-height": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-controls`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-min-max-tick-angles": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-controls:before`, `.spectrum-Dial-controls:after, .spectrum-Dial-handle`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-width": {
+ "description": "Defined in `.spectrum-Dial`, `.spectrum-Dial.spectrum-Dial--small`.
Used by `.spectrum-Dial-controls`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-height": {
+ "description": "Defined in `.spectrum-Dial`, `.spectrum-Dial.spectrum-Dial--small`.
Used by `.spectrum-Dial-controls`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-border-size": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle`, `.spectrum-Dial-handle.is-dragged, .spectrum-Dial-handle:active, .spectrum-Dial-handle:focus-visible, .spectrum-Dial-handle:focus-within`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-label-text-size": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-labelContainer`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-label-line-height": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-labelContainer`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-background-color-default": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial.is-disabled .spectrum-Dial-handle`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dial-label-container-top-to-text": {
+ "description": "Used by `.spectrum-Dial-labelContainer`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-label-gap-y": {
+ "description": "Used by `.spectrum-Dial-labelContainer`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-controls-margin": {
+ "description": "Used by `.spectrum-Dial-controls`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-border-radius": {
+ "description": "Used by `.spectrum-Dial-controls`, `.spectrum-Dial-handle`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-block-margin": {
+ "description": "Used by `.spectrum-Dial-handle`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-inline-margin": {
+ "description": "Used by `.spectrum-Dial-handle`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-position": {
+ "description": "Used by `.spectrum-Dial-handle`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-marker-color-key-focus": {
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:focus-visible:after, .spectrum-Dial-handle:focus-within:after`, `.spectrum-Dial-handle.is-dragged:after, .spectrum-Dial-handle:active:after`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-75": {
+ "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+ "description": "Used by `--system-dial-background-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--system-dial-handle-marker-color-key-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-700": {
+ "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+ "description": "Used by `--spectrum-dial-handle-marker-color`, `--spectrum-dial-border-color`, `--spectrum-dial-handle-marker-color-mouse-focus`, `--spectrum-dial-label-text-color`, `--spectrum-dial-label-text-color-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-800": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Used by `--spectrum-dial-handle-marker-color-hover`, `--spectrum-dial-border-color-hover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-600": {
+ "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+ "description": "Used by `--spectrum-dial-min-max-tick-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-400": {
+ "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+ "description": "Used by `--spectrum-dial-handle-border-color-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-dial-handle-border-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-dial-label-text-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-200": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-dial-label-line-height`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-dial-background-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-dial-background-color-default`.",
+ "control": "color"
+ },
+ "system-dial-handle-marker-color-key-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-dial-handle-marker-color-key-focus`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-dial-label-text-color-disabled": {
+ "value": "var(--mod-dial-label-text-color-disabled, var(--spectrum-dial-label-text-color-disabled))",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial.is-disabled .spectrum-Dial-labelContainer`.
Defaults to `var(--mod-dial-label-text-color-disabled, var(--spectrum-dial-label-text-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-dial-handle-border-color-disabled": {
+ "value": "var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled))",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial.is-disabled .spectrum-Dial-controls:after, .spectrum-Dial.is-disabled .spectrum-Dial-controls:before`, `.spectrum-Dial.is-disabled .spectrum-Dial-handle`, `.spectrum-Dial.is-disabled .spectrum-Dial-handle:after, .spectrum-Dial.is-disabled .spectrum-Dial-handle:before`.
Defaults to `var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-dial-min-max-tick-color": {
+ "value": "var(--mod-dial-min-max-tick-color, var(--spectrum-dial-min-max-tick-color))",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`.
Defaults to `var(--mod-dial-min-max-tick-color, var(--spectrum-dial-min-max-tick-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-dial-border-color": {
+ "value": "var(--mod-dial-border-color, var(--spectrum-dial-border-color))",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle`.
Defaults to `var(--mod-dial-border-color, var(--spectrum-dial-border-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-dial-handle-marker-color": {
+ "value": "var(--mod-dial-handle-marker-color, var(--spectrum-dial-handle-marker-color))",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:after`.
Defaults to `var(--mod-dial-handle-marker-color, var(--spectrum-dial-handle-marker-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-dial-border-color-hover": {
+ "value": "var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover))",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:hover`, `.spectrum-Dial-handle.is-dragged, .spectrum-Dial-handle:active`.
Defaults to `var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-dial-handle-marker-color-hover": {
+ "value": "var(--mod-dial-handle-marker-color-hover, var(--spectrum-dial-handle-marker-color-hover))",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:hover:after`.
Defaults to `var(--mod-dial-handle-marker-color-hover, var(--spectrum-dial-handle-marker-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-dial-handle-marker-color-key-focus": {
+ "value": "var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus))",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:focus-visible:after, .spectrum-Dial-handle:focus-within:after`, `.spectrum-Dial-handle.is-dragged:after, .spectrum-Dial-handle:active:after`.
Defaults to `var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/dial/stories/dial.stories.js b/components/dial/stories/dial.stories.js
index 9e9970e234b..15a63effa16 100644
--- a/components/dial/stories/dial.stories.js
+++ b/components/dial/stories/dial.stories.js
@@ -1,10 +1,12 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isDragged, isFocused, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { DialGroup } from "./dial.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* A dial is an input control used for selecting a value within a range, similar to a slider. It's often used in audio and video mixing and editing applications, where horizontal space is limited.
*/
@@ -35,6 +37,7 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/dialog/dist/metadata.json b/components/dialog/dist/metadata.json
index 812542da227..2eae5739687 100644
--- a/components/dialog/dist/metadata.json
+++ b/components/dialog/dist/metadata.json
@@ -27,8 +27,8 @@
".spectrum-Dialog-closeButton",
".spectrum-Dialog-content",
".spectrum-Dialog-footer",
- ".spectrum-Dialog-footer > *",
".spectrum-Dialog-footer > .spectrum-Button + .spectrum-Button",
+ ".spectrum-Dialog-footer > *",
".spectrum-Dialog-header",
".spectrum-Dialog-heading",
".spectrum-Dialog-heading.spectrum-Dialog-heading--noHeader",
@@ -37,65 +37,307 @@
".spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-buttonGroup",
".spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-footer"
],
- "modifiers": [
- "--mod-dialog-confirm-border-radius",
- "--mod-dialog-confirm-buttongroup-padding-top",
- "--mod-dialog-confirm-close-button-padding",
- "--mod-dialog-confirm-close-button-size",
- "--mod-dialog-confirm-description-font-weight",
- "--mod-dialog-confirm-description-margin",
- "--mod-dialog-confirm-description-padding",
- "--mod-dialog-confirm-description-text-color",
- "--mod-dialog-confirm-description-text-line-height",
- "--mod-dialog-confirm-description-text-size",
- "--mod-dialog-confirm-divider-block-spacing-end",
- "--mod-dialog-confirm-divider-block-spacing-start",
- "--mod-dialog-confirm-divider-height",
- "--mod-dialog-confirm-footer-padding-top",
- "--mod-dialog-confirm-gap-size",
- "--mod-dialog-confirm-hero-height",
- "--mod-dialog-confirm-large-width",
- "--mod-dialog-confirm-medium-width",
- "--mod-dialog-confirm-padding-grid",
- "--mod-dialog-confirm-small-width",
- "--mod-dialog-confirm-title-text-color",
- "--mod-dialog-confirm-title-text-line-height",
- "--mod-dialog-confirm-title-text-size",
- "--mod-dialog-fullscreen-header-text-size",
- "--mod-dialog-heading-font-weight",
- "--mod-dialog-min-inline-size",
- "--mod-dialog-width"
- ],
- "component": [
- "--spectrum-dialog-confirm-border-radius",
- "--spectrum-dialog-confirm-buttongroup-padding-top",
- "--spectrum-dialog-confirm-close-button-padding",
- "--spectrum-dialog-confirm-close-button-size",
- "--spectrum-dialog-confirm-description-padding",
- "--spectrum-dialog-confirm-description-text-color",
- "--spectrum-dialog-confirm-description-text-size",
- "--spectrum-dialog-confirm-divider-block-spacing-end",
- "--spectrum-dialog-confirm-divider-block-spacing-start",
- "--spectrum-dialog-confirm-gap-size",
- "--spectrum-dialog-confirm-hero-height",
- "--spectrum-dialog-confirm-padding-grid",
- "--spectrum-dialog-confirm-title-text-size"
- ],
- "global": [
- "--spectrum-component-bottom-to-text-300",
- "--spectrum-component-height-100",
- "--spectrum-component-pill-edge-to-text-100",
- "--spectrum-gray-800",
- "--spectrum-gray-900",
- "--spectrum-heading-sans-serif-font-weight",
- "--spectrum-line-height-100",
- "--spectrum-regular-font-weight",
- "--spectrum-spacing-200",
- "--spectrum-spacing-300",
- "--spectrum-spacing-50",
- "--spectrum-spacing-600"
- ],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-dialog-width": {
+ "value": "var(--mod-dialog-confirm-medium-width, 480px)",
+ "description": "Defined in `.spectrum-Dialog--sizeS`, `.spectrum-Dialog--sizeL`.
Used by `.spectrum-Dialog`.
Defaults to `var(--mod-dialog-confirm-medium-width, 480px)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-medium-width": {
+ "description": "Used by `.spectrum-Dialog`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-min-inline-size": {
+ "description": "Used by `.spectrum-Dialog`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-small-width": {
+ "description": "Used by `--mod-dialog-width`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-large-width": {
+ "description": "Used by `--mod-dialog-width`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-hero-height": {
+ "value": "var(--spectrum-dialog-confirm-hero-height)",
+ "description": "Used by `.spectrum-Dialog-hero`.
Defaults to `var(--spectrum-dialog-confirm-hero-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-border-radius": {
+ "value": "var(--spectrum-dialog-confirm-border-radius)",
+ "description": "Used by `.spectrum-Dialog-hero`.
Defaults to `var(--spectrum-dialog-confirm-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-padding-grid": {
+ "value": "var(--spectrum-dialog-confirm-padding-grid)",
+ "description": "Used by `.spectrum-Dialog .spectrum-Dialog-grid`, `.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid`, `.spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid, .spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid`, `.spectrum-Dialog .spectrum-Dialog-grid, .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid`, `.spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid, .spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid`.
Defaults to `var(--spectrum-dialog-confirm-padding-grid)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-title-text-size": {
+ "value": "var(--spectrum-dialog-confirm-title-text-size)",
+ "description": "Used by `.spectrum-Dialog-heading`, `.spectrum-Dialog--fullscreen .spectrum-Dialog-heading, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading`.
Defaults to `var(--spectrum-dialog-confirm-title-text-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-heading-font-weight": {
+ "value": "700",
+ "description": "Used by `.spectrum-Dialog-heading`.
Defaults to `var(--spectrum-heading-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-title-text-line-height": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-Dialog-heading`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-title-text-color": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Used by `.spectrum-Dialog-heading`.
Defaults to `var(--spectrum-gray-900)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-gap-size": {
+ "value": "var(--spectrum-dialog-confirm-gap-size)",
+ "description": "Used by `.spectrum-Dialog-heading`, `.spectrum-Dialog-buttonGroup`.
Defaults to `var(--spectrum-dialog-confirm-gap-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-divider-block-spacing-end": {
+ "value": "var(--spectrum-dialog-confirm-divider-block-spacing-end)",
+ "description": "Used by `.spectrum-Dialog .spectrum-Dialog-divider`, `.spectrum-Dialog--noDivider .spectrum-Dialog-heading`.
Defaults to `var(--spectrum-dialog-confirm-divider-block-spacing-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-divider-block-spacing-start": {
+ "value": "var(--spectrum-dialog-confirm-divider-block-spacing-start)",
+ "description": "Used by `.spectrum-Dialog .spectrum-Dialog-divider`, `.spectrum-Dialog--fullscreen .spectrum-Dialog-heading + .spectrum-Dialog-divider`, `.spectrum-Dialog--noDivider .spectrum-Dialog-heading`.
Defaults to `var(--spectrum-dialog-confirm-divider-block-spacing-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-description-padding": {
+ "value": "var(--spectrum-dialog-confirm-description-padding)",
+ "description": "Used by `.spectrum-Dialog--fullscreen .spectrum-Dialog-heading + .spectrum-Dialog-divider`, `.spectrum-Dialog-content`.
Defaults to `var(--spectrum-dialog-confirm-description-padding)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-divider-height": {
+ "value": "2px",
+ "description": "Used by `.spectrum-Dialog--noDivider .spectrum-Dialog-heading`.
Defaults to `var(--spectrum-spacing-50)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-description-text-size": {
+ "value": "var(--spectrum-dialog-confirm-description-text-size)",
+ "description": "Used by `.spectrum-Dialog-content`.
Defaults to `var(--spectrum-dialog-confirm-description-text-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-description-font-weight": {
+ "value": "400",
+ "description": "Used by `.spectrum-Dialog-content`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-description-text-line-height": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-Dialog-content`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-description-text-color": {
+ "value": "var(--spectrum-dialog-confirm-description-text-color)",
+ "description": "Used by `.spectrum-Dialog-content`, `.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-footer`.
Defaults to `var(--spectrum-dialog-confirm-description-text-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-description-margin": {
+ "value": "calc(var(--spectrum-spacing-50) * -1)",
+ "description": "Used by `.spectrum-Dialog-content`.
Defaults to `calc(var(--spectrum-spacing-50) * -1)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-footer-padding-top": {
+ "value": "40px",
+ "description": "Used by `.spectrum-Dialog-footer`.
Defaults to `var(--spectrum-spacing-600)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-buttongroup-padding-top": {
+ "value": "var(--spectrum-dialog-confirm-buttongroup-padding-top)",
+ "description": "Used by `.spectrum-Dialog-buttonGroup`, `.spectrum-Dialog--fullscreen .spectrum-Dialog-buttonGroup, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-buttonGroup`.
Defaults to `var(--spectrum-dialog-confirm-buttongroup-padding-top)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-close-button-size": {
+ "value": "var(--spectrum-dialog-confirm-close-button-size)",
+ "description": "Used by `.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid`.
Defaults to `var(--spectrum-dialog-confirm-close-button-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-confirm-close-button-padding": {
+ "value": "var(--spectrum-dialog-confirm-close-button-padding)",
+ "description": "Used by `.spectrum-Dialog-closeButton`.
Defaults to `var(--spectrum-dialog-confirm-close-button-padding)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dialog-fullscreen-header-text-size": {
+ "description": "Used by `.spectrum-Dialog--fullscreen .spectrum-Dialog-heading, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading`.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-dialog-confirm-divider-block-spacing-start": {
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog .spectrum-Dialog-divider`, `.spectrum-Dialog--fullscreen .spectrum-Dialog-heading + .spectrum-Dialog-divider`, `.spectrum-Dialog--noDivider .spectrum-Dialog-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dialog-confirm-divider-block-spacing-end": {
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog .spectrum-Dialog-divider`, `.spectrum-Dialog--noDivider .spectrum-Dialog-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dialog-confirm-description-text-color": {
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-content`, `.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-footer`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dialog-confirm-description-padding": {
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog--fullscreen .spectrum-Dialog-heading + .spectrum-Dialog-divider`, `.spectrum-Dialog-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dialog-confirm-gap-size": {
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-heading`, `.spectrum-Dialog-buttonGroup`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dialog-confirm-buttongroup-padding-top": {
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-buttonGroup`, `.spectrum-Dialog--fullscreen .spectrum-Dialog-buttonGroup, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-buttonGroup`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dialog-confirm-close-button-size": {
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dialog-confirm-close-button-padding": {
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-closeButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dialog-confirm-hero-height": {
+ "description": "Used by `.spectrum-Dialog-hero`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dialog-confirm-border-radius": {
+ "description": "Used by `.spectrum-Dialog-hero`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dialog-confirm-padding-grid": {
+ "description": "Used by `.spectrum-Dialog .spectrum-Dialog-grid`, `.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid`, `.spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid, .spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid`, `.spectrum-Dialog .spectrum-Dialog-grid, .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid`, `.spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid, .spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dialog-confirm-title-text-size": {
+ "description": "Used by `.spectrum-Dialog-heading`, `.spectrum-Dialog--fullscreen .spectrum-Dialog-heading, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dialog-confirm-description-text-size": {
+ "description": "Used by `.spectrum-Dialog-content`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `--spectrum-dialog-confirm-divider-block-spacing-start`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-dialog-confirm-divider-block-spacing-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-800": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Used by `--spectrum-dialog-confirm-description-text-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-50": {
+ "value": "2px",
+ "description": "Used by `--spectrum-dialog-confirm-description-padding`, `.spectrum-Dialog--noDivider .spectrum-Dialog-heading`, `.spectrum-Dialog-content`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-text-100": {
+ "value": "16px",
+ "description": "Used by `--spectrum-dialog-confirm-gap-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-600": {
+ "value": "40px",
+ "description": "Used by `--spectrum-dialog-confirm-buttongroup-padding-top`, `.spectrum-Dialog-footer`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-dialog-confirm-close-button-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-dialog-confirm-close-button-padding`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-sans-serif-font-weight": {
+ "value": "700",
+ "description": "Used by `.spectrum-Dialog-heading`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-Dialog-heading`, `.spectrum-Dialog-content`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-900": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Used by `.spectrum-Dialog-heading`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `.spectrum-Dialog-content`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js
index 45bec9bc1d1..b9970f5c41c 100644
--- a/components/dialog/stories/dialog.stories.js
+++ b/components/dialog/stories/dialog.stories.js
@@ -2,11 +2,13 @@ import { withUnderlayWrapper } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isOpen, size } from "@spectrum-css/preview/types";
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { DialogFullscreen, DialogFullscreenTakeover, DialogGroup } from "./dialog.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* A dialog displays important information that users need to acknowledge. They appear over the interface and block further interactions.
*
@@ -117,6 +119,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
decorators: [
withUnderlayWrapper,
diff --git a/components/divider/dist/metadata.json b/components/divider/dist/metadata.json
index a485bf25e3b..a053dd3f399 100644
--- a/components/divider/dist/metadata.json
+++ b/components/divider/dist/metadata.json
@@ -12,41 +12,169 @@
".spectrum-Divider--staticWhite.spectrum-Divider--sizeS",
".spectrum-Divider--vertical"
],
- "modifiers": [
- "--mod-divider-background-color",
- "--mod-divider-background-color-large-static-black",
- "--mod-divider-background-color-large-static-white",
- "--mod-divider-background-color-medium-static-black",
- "--mod-divider-background-color-medium-static-white",
- "--mod-divider-background-color-small-static-black",
- "--mod-divider-background-color-small-static-white",
- "--mod-divider-thickness",
- "--mod-divider-vertical-align",
- "--mod-divider-vertical-height",
- "--mod-divider-vertical-margin"
- ],
- "component": [
- "--spectrum-divider-background-color",
- "--spectrum-divider-background-color-static-black",
- "--spectrum-divider-background-color-static-white",
- "--spectrum-divider-thickness",
- "--spectrum-divider-thickness-large",
- "--spectrum-divider-thickness-medium",
- "--spectrum-divider-thickness-small"
- ],
- "global": [
- "--spectrum-gray-200",
- "--spectrum-gray-800",
- "--spectrum-transparent-black-200",
- "--spectrum-transparent-black-800",
- "--spectrum-transparent-white-200",
- "--spectrum-transparent-white-800"
- ],
- "system-theme": [
- "--system-divider-background-color",
- "--system-divider-background-color-static-black",
- "--system-divider-background-color-static-white"
- ],
- "passthroughs": [],
- "high-contrast": ["--highcontrast-divider-background-color"]
+ "modifiers": {
+ "mod-divider-background-color": {
+ "value": "var(--spectrum-divider-background-color)",
+ "description": "Defined in `.spectrum-Divider--staticWhite`, `.spectrum-Divider--staticWhite.spectrum-Divider--sizeS`, `.spectrum-Divider--staticWhite.spectrum-Divider--sizeL`, `.spectrum-Divider--staticBlack`, `.spectrum-Divider--staticBlack.spectrum-Divider--sizeS`, `.spectrum-Divider--staticBlack.spectrum-Divider--sizeL`.
Used by `.spectrum-Divider`.
Defaults to `var(--spectrum-divider-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-divider-background-color-medium-static-white": {
+ "value": "var(--spectrum-divider-background-color-static-white)",
+ "description": "Used by `--mod-divider-background-color`.
Defaults to `var(--spectrum-divider-background-color-static-white)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-divider-background-color-small-static-white": {
+ "value": "var(--spectrum-divider-background-color-static-white)",
+ "description": "Used by `--mod-divider-background-color`.
Defaults to `var(--spectrum-divider-background-color-static-white)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-divider-background-color-large-static-white": {
+ "value": "light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85))",
+ "description": "Used by `--mod-divider-background-color`.
Defaults to `var(--spectrum-transparent-white-800)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-divider-background-color-medium-static-black": {
+ "value": "var(--spectrum-divider-background-color-static-black)",
+ "description": "Used by `--mod-divider-background-color`.
Defaults to `var(--spectrum-divider-background-color-static-black)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-divider-background-color-small-static-black": {
+ "value": "var(--spectrum-divider-background-color-static-black)",
+ "description": "Used by `--mod-divider-background-color`.
Defaults to `var(--spectrum-divider-background-color-static-black)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-divider-background-color-large-static-black": {
+ "value": "light-dark(rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.84))",
+ "description": "Used by `--mod-divider-background-color`.
Defaults to `var(--spectrum-transparent-black-800)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-divider-thickness": {
+ "value": "var(--spectrum-divider-thickness)",
+ "description": "Used by `.spectrum-Divider`, `.spectrum-Divider--vertical`.
Defaults to `var(--spectrum-divider-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-divider-vertical-height": {
+ "description": "Used by `.spectrum-Divider--vertical`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-divider-vertical-margin": {
+ "description": "Used by `.spectrum-Divider--vertical`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-divider-vertical-align": {
+ "description": "Used by `.spectrum-Divider--vertical`.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-divider-thickness": {
+ "description": "Defined in `.spectrum-Divider`, `.spectrum-Divider--sizeS`, `.spectrum-Divider--sizeL`.
Used by `.spectrum-Divider`, `.spectrum-Divider--vertical`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-divider-thickness-medium": {
+ "value": "2px",
+ "description": "Used by `--spectrum-divider-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-divider-thickness-small": {
+ "value": "1px",
+ "description": "Used by `--spectrum-divider-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-divider-thickness-large": {
+ "value": "4px",
+ "description": "Used by `--spectrum-divider-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-divider-background-color": {
+ "description": "Defined in `.spectrum-Divider--sizeL`, `.spectrum-Divider`.
Used by `.spectrum-Divider`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-divider-background-color-static-white": {
+ "description": "Defined in `.spectrum-Divider`.
Used by `--mod-divider-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-divider-background-color-static-black": {
+ "description": "Defined in `.spectrum-Divider`.
Used by `--mod-divider-background-color`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--system-divider-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-200": {
+ "value": "light-dark(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14))",
+ "description": "Used by `--system-divider-background-color-static-white`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-200": {
+ "value": "light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12))",
+ "description": "Used by `--system-divider-background-color-static-black`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-800": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Used by `--spectrum-divider-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-800": {
+ "value": "light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85))",
+ "description": "Used by `--mod-divider-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-800": {
+ "value": "light-dark(rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.84))",
+ "description": "Used by `--mod-divider-background-color`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-divider-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-divider-background-color`.",
+ "control": "color"
+ },
+ "system-divider-background-color-static-white": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-divider-background-color-static-white`.",
+ "control": "color"
+ },
+ "system-divider-background-color-static-black": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-divider-background-color-static-black`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-divider-background-color": {
+ "value": "var(--mod-divider-background-color, var(--spectrum-divider-background-color))",
+ "description": "Defined in `.spectrum-Divider`.
Used by `.spectrum-Divider`.
Defaults to `var(--mod-divider-background-color, var(--spectrum-divider-background-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/divider/stories/divider.stories.js b/components/divider/stories/divider.stories.js
index 306e5c0c453..ac273f3e142 100644
--- a/components/divider/stories/divider.stories.js
+++ b/components/divider/stories/divider.stories.js
@@ -1,11 +1,13 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { size, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { DividerGroup } from "./divider.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* Dividers bring clarity to a layout by grouping and dividing content that exists in close proximity. It can also be used to establish rhythm and hierarchy.
*/
@@ -40,6 +42,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/dropindicator/dist/metadata.json b/components/dropindicator/dist/metadata.json
index dd3a7a50810..95bc763de81 100644
--- a/components/dropindicator/dist/metadata.json
+++ b/components/dropindicator/dist/metadata.json
@@ -11,19 +11,64 @@
".spectrum-DropIndicator:after",
".spectrum-DropIndicator:before"
],
- "modifiers": [
- "--mod-dropindicator-border-color",
- "--mod-dropindicator-border-size",
- "--mod-dropindicator-circle-color",
- "--mod-dropindicator-circle-size"
- ],
- "component": [
- "--spectrum-dropindicator-border-size",
- "--spectrum-dropindicator-circle-size",
- "--spectrum-dropindicator-color"
- ],
- "global": ["--spectrum-border-width-200"],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": ["--highcontrast-dropindicator-color"]
+ "modifiers": {
+ "mod-dropindicator-border-color": {
+ "value": "var(--spectrum-dropindicator-color)",
+ "description": "Used by `.spectrum-DropIndicator`.
Defaults to `var(--spectrum-dropindicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-dropindicator-circle-size": {
+ "value": "var(--spectrum-dropindicator-circle-size)",
+ "description": "Used by `.spectrum-DropIndicator:after, .spectrum-DropIndicator:before`, `.spectrum-DropIndicator--horizontal`, `.spectrum-DropIndicator--horizontal:after, .spectrum-DropIndicator--horizontal:before`, `.spectrum-DropIndicator--horizontal:before`, `.spectrum-DropIndicator--horizontal:after`, `.spectrum-DropIndicator--vertical`, `.spectrum-DropIndicator--vertical:after, .spectrum-DropIndicator--vertical:before`, `.spectrum-DropIndicator--vertical:before`, `.spectrum-DropIndicator--vertical:after`.
Defaults to `var(--spectrum-dropindicator-circle-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dropindicator-border-size": {
+ "value": "var(--spectrum-dropindicator-border-size)",
+ "description": "Used by `.spectrum-DropIndicator:after, .spectrum-DropIndicator:before`, `.spectrum-DropIndicator--horizontal`, `.spectrum-DropIndicator--horizontal:after, .spectrum-DropIndicator--horizontal:before`, `.spectrum-DropIndicator--vertical`, `.spectrum-DropIndicator--vertical:after, .spectrum-DropIndicator--vertical:before`.
Defaults to `var(--spectrum-dropindicator-border-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dropindicator-circle-color": {
+ "value": "var(--spectrum-dropindicator-color)",
+ "description": "Used by `.spectrum-DropIndicator:after, .spectrum-DropIndicator:before`.
Defaults to `var(--spectrum-dropindicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-dropindicator-border-size": {
+ "description": "Defined in `.spectrum-DropIndicator`.
Used by `.spectrum-DropIndicator:after, .spectrum-DropIndicator:before`, `.spectrum-DropIndicator--horizontal`, `.spectrum-DropIndicator--horizontal:after, .spectrum-DropIndicator--horizontal:before`, `.spectrum-DropIndicator--vertical`, `.spectrum-DropIndicator--vertical:after, .spectrum-DropIndicator--vertical:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dropindicator-circle-size": {
+ "description": "Defined in `.spectrum-DropIndicator`.
Used by `.spectrum-DropIndicator:after, .spectrum-DropIndicator:before`, `.spectrum-DropIndicator--horizontal`, `.spectrum-DropIndicator--horizontal:after, .spectrum-DropIndicator--horizontal:before`, `.spectrum-DropIndicator--horizontal:before`, `.spectrum-DropIndicator--horizontal:after`, `.spectrum-DropIndicator--vertical`, `.spectrum-DropIndicator--vertical:after, .spectrum-DropIndicator--vertical:before`, `.spectrum-DropIndicator--vertical:before`, `.spectrum-DropIndicator--vertical:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dropindicator-color": {
+ "description": "Used by `.spectrum-DropIndicator`, `.spectrum-DropIndicator:after, .spectrum-DropIndicator:before`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-dropindicator-border-size`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-dropindicator-color": {
+ "value": "var(--mod-dropindicator-circle-color, var(--spectrum-dropindicator-color))",
+ "description": "Defined in `.spectrum-DropIndicator`.
Used by `.spectrum-DropIndicator`, `.spectrum-DropIndicator:after, .spectrum-DropIndicator:before`.
Defaults to `var(--mod-dropindicator-circle-color, var(--spectrum-dropindicator-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/dropindicator/stories/dropindicator.stories.js b/components/dropindicator/stories/dropindicator.stories.js
index ea28cb3b5f1..160f7a8d897 100644
--- a/components/dropindicator/stories/dropindicator.stories.js
+++ b/components/dropindicator/stories/dropindicator.stories.js
@@ -1,9 +1,11 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { DropIndicatorGroup } from "./dropindicator.test.js";
import { DocsDropIndicatorGroup } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The drop indicator component is used to show the insertion position into a list or table.
*/
@@ -41,6 +43,7 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/dropzone/dist/metadata.json b/components/dropzone/dist/metadata.json
index 3044ecfc906..5949c543825 100644
--- a/components/dropzone/dist/metadata.json
+++ b/components/dropzone/dist/metadata.json
@@ -6,129 +6,580 @@
".spectrum-DropZone-button:focus",
".spectrum-DropZone-button:hover",
".spectrum-DropZone-content",
- ".spectrum-DropZone.is-dragged",
- ".spectrum-DropZone.is-filled",
- ".spectrum-DropZone.is-filled.is-dragged",
".spectrum-DropZone:focus-visible",
".spectrum-DropZone:lang(ja)",
".spectrum-DropZone:lang(ko)",
- ".spectrum-DropZone:lang(zh)"
- ],
- "modifiers": [
- "--mod-drop-zone-background-color",
- "--mod-drop-zone-background-color-opacity",
- "--mod-drop-zone-background-color-opacity-filled",
- "--mod-drop-zone-body-color",
- "--mod-drop-zone-body-font-family",
- "--mod-drop-zone-body-font-size",
- "--mod-drop-zone-body-font-style",
- "--mod-drop-zone-body-font-weight",
- "--mod-drop-zone-body-line-height",
- "--mod-drop-zone-border-color",
- "--mod-drop-zone-border-color-hover",
- "--mod-drop-zone-border-style",
- "--mod-drop-zone-border-style-dragged",
- "--mod-drop-zone-border-width",
- "--mod-drop-zone-content-background-color",
- "--mod-drop-zone-content-bottom-to-text",
- "--mod-drop-zone-content-color",
- "--mod-drop-zone-content-display",
- "--mod-drop-zone-content-edge-to-text",
- "--mod-drop-zone-content-font-family",
- "--mod-drop-zone-content-font-size",
- "--mod-drop-zone-content-font-style",
- "--mod-drop-zone-content-font-weight",
- "--mod-drop-zone-content-height",
- "--mod-drop-zone-content-line-height",
- "--mod-drop-zone-content-max-width",
- "--mod-drop-zone-content-maximum-width",
- "--mod-drop-zone-content-top-to-text",
- "--mod-drop-zone-corner-radius",
- "--mod-drop-zone-heading-color",
- "--mod-drop-zone-heading-font-family",
- "--mod-drop-zone-heading-font-size",
- "--mod-drop-zone-heading-font-style",
- "--mod-drop-zone-heading-font-weight",
- "--mod-drop-zone-heading-line-height",
- "--mod-drop-zone-heading-to-body",
- "--mod-drop-zone-illustration-color",
- "--mod-drop-zone-illustration-color-hover",
- "--mod-drop-zone-illustration-to-heading",
- "--mod-drop-zone-padding",
- "--mod-drop-zone-width"
- ],
- "component": [
- "--spectrum-drop-zone-background-color",
- "--spectrum-drop-zone-background-color-opacity",
- "--spectrum-drop-zone-background-color-opacity-filled",
- "--spectrum-drop-zone-background-color-rgb",
- "--spectrum-drop-zone-body-size",
- "--spectrum-drop-zone-border-color",
- "--spectrum-drop-zone-border-color-hover",
- "--spectrum-drop-zone-border-width",
- "--spectrum-drop-zone-cjk-title-size",
- "--spectrum-drop-zone-content-background-color",
- "--spectrum-drop-zone-content-maximum-width",
- "--spectrum-drop-zone-illustration-color",
- "--spectrum-drop-zone-title-size",
- "--spectrum-drop-zone-width"
- ],
- "global": [
- "--spectrum-accent-visual-color",
- "--spectrum-body-color",
- "--spectrum-body-line-height",
- "--spectrum-body-sans-serif-font-style",
- "--spectrum-body-sans-serif-font-weight",
- "--spectrum-bold-font-weight",
- "--spectrum-border-width-200",
- "--spectrum-component-bottom-to-text-300",
- "--spectrum-component-edge-to-text-300",
- "--spectrum-component-height-300",
- "--spectrum-component-top-to-text-300",
- "--spectrum-corner-radius-100",
- "--spectrum-default-font-style",
- "--spectrum-font-size-300",
- "--spectrum-gray-200",
- "--spectrum-heading-color",
- "--spectrum-heading-line-height",
- "--spectrum-heading-sans-serif-font-style",
- "--spectrum-heading-sans-serif-font-weight",
- "--spectrum-line-height-100",
- "--spectrum-neutral-visual-color",
- "--spectrum-sans-font-family-stack",
- "--spectrum-spacing-400",
- "--spectrum-spacing-75",
- "--spectrum-white"
- ],
- "system-theme": ["--system-drop-zone-border-color"],
- "passthroughs": [
- "--mod-actionbutton-edge-to-text",
- "--mod-actionbutton-font-size",
- "--mod-actionbutton-label-color",
- "--mod-illustrated-message-content-maximum-width",
- "--mod-illustrated-message-description-color",
- "--mod-illustrated-message-description-font-family",
- "--mod-illustrated-message-description-font-size",
- "--mod-illustrated-message-description-font-style",
- "--mod-illustrated-message-description-font-weight",
- "--mod-illustrated-message-description-line-height",
- "--mod-illustrated-message-description-position",
- "--mod-illustrated-message-description-z-index",
- "--mod-illustrated-message-display",
- "--mod-illustrated-message-heading-to-body",
- "--mod-illustrated-message-heading-to-description",
- "--mod-illustrated-message-illustration-color",
- "--mod-illustrated-message-title-color",
- "--mod-illustrated-message-title-font-family",
- "--mod-illustrated-message-title-font-size",
- "--mod-illustrated-message-title-font-style",
- "--mod-illustrated-message-title-font-weight",
- "--mod-illustrated-message-title-line-height",
- "--mod-illustrated-message-title-to-heading"
+ ".spectrum-DropZone:lang(zh)",
+ ".spectrum-DropZone.is-dragged",
+ ".spectrum-DropZone.is-filled",
+ ".spectrum-DropZone.is-filled.is-dragged"
],
- "high-contrast": [
- "--highcontrast-drop-zone-border-color-hover",
- "--highcontrast-drop-zone-illustration-color",
- "--highcontrast-illustrated-message-illustration-color"
- ]
+ "modifiers": {
+ "mod-drop-zone-content-maximum-width": {
+ "value": "380px",
+ "description": "Used by `--mod-illustrated-message-content-maximum-width`.
Defaults to `var(--spectrum-drop-zone-content-maximum-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-illustration-color": {
+ "value": "var(--spectrum-drop-zone-illustration-color)",
+ "description": "Used by `--mod-illustrated-message-illustration-color`.
Defaults to `var(--spectrum-drop-zone-illustration-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-illustration-to-heading": {
+ "value": "24px",
+ "description": "Used by `--mod-illustrated-message-title-to-heading`.
Defaults to `var(--spectrum-spacing-400)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-heading-to-body": {
+ "value": "4px",
+ "description": "Used by `--mod-illustrated-message-heading-to-body`.
Defaults to `var(--spectrum-spacing-75)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-heading-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Used by `--mod-illustrated-message-title-font-family`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-heading-font-weight": {
+ "value": "700",
+ "description": "Used by `--mod-illustrated-message-title-font-weight`.
Defaults to `var(--spectrum-heading-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-heading-font-style": {
+ "value": "normal",
+ "description": "Used by `--mod-illustrated-message-title-font-style`.
Defaults to `var(--spectrum-heading-sans-serif-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-heading-font-size": {
+ "value": "var(--spectrum-heading-size-s)",
+ "description": "Used by `--mod-illustrated-message-title-font-size`.
Defaults to `var(--spectrum-drop-zone-title-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-heading-line-height": {
+ "value": "1.3",
+ "description": "Used by `--mod-illustrated-message-title-line-height`.
Defaults to `var(--spectrum-heading-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-heading-color": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--mod-illustrated-message-title-color`.
Defaults to `var(--spectrum-heading-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-body-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Used by `--mod-illustrated-message-description-font-family`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-body-font-weight": {
+ "value": "400",
+ "description": "Used by `--mod-illustrated-message-description-font-weight`.
Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-body-font-style": {
+ "value": "normal",
+ "description": "Used by `--mod-illustrated-message-description-font-style`.
Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-body-font-size": {
+ "value": "var(--spectrum-body-size-xs)",
+ "description": "Used by `--mod-illustrated-message-description-font-size`.
Defaults to `var(--spectrum-drop-zone-body-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-body-line-height": {
+ "value": "1.5",
+ "description": "Used by `--mod-illustrated-message-description-line-height`.
Defaults to `var(--spectrum-body-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-body-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--mod-illustrated-message-description-color`.
Defaults to `var(--spectrum-body-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-content-font-size": {
+ "value": "18px",
+ "description": "Used by `--mod-actionbutton-font-size`.
Defaults to `var(--spectrum-font-size-300)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-content-color": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--mod-actionbutton-label-color`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-content-edge-to-text": {
+ "value": "17px",
+ "description": "Used by `--mod-actionbutton-edge-to-text`.
Defaults to `var(--spectrum-component-edge-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-width": {
+ "value": "428px",
+ "description": "Used by `.spectrum-DropZone`.
Defaults to `var(--spectrum-drop-zone-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-padding": {
+ "value": "24px",
+ "description": "Used by `.spectrum-DropZone`.
Defaults to `var(--spectrum-spacing-400)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-border-width": {
+ "value": "var(--spectrum-drop-zone-border-width)",
+ "description": "Used by `.spectrum-DropZone`.
Defaults to `var(--spectrum-drop-zone-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-border-color": {
+ "value": "var(--spectrum-drop-zone-border-color)",
+ "description": "Defined in `.spectrum-DropZone.is-dragged`, `.spectrum-DropZone:focus-visible`.
Used by `.spectrum-DropZone`.
Defaults to `var(--spectrum-drop-zone-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-corner-radius": {
+ "value": "8px",
+ "description": "Used by `.spectrum-DropZone`.
Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-border-style": {
+ "description": "Defined in `.spectrum-DropZone.is-dragged`, `.spectrum-DropZone:focus-visible`.
Used by `.spectrum-DropZone`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-background-color": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Defined in `.spectrum-DropZone.is-dragged`, `.spectrum-DropZone.is-filled`.
Used by `.spectrum-DropZone`.
Defaults to `var(--spectrum-drop-zone-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-border-style-dragged": {
+ "description": "Used by `--mod-drop-zone-border-style`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-background-color-opacity": {
+ "value": "0.1",
+ "description": "Used by `--mod-drop-zone-background-color`.
Defaults to `var(--spectrum-drop-zone-background-color-opacity)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-border-color-hover": {
+ "value": "var(--spectrum-drop-zone-border-color-hover)",
+ "description": "Used by `--mod-drop-zone-border-color`.
Defaults to `var(--spectrum-drop-zone-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-illustration-color-hover": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--mod-illustrated-message-illustration-color`.
Defaults to `var(--spectrum-accent-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-background-color-opacity-filled": {
+ "value": "0.3",
+ "description": "Used by `--mod-drop-zone-background-color`.
Defaults to `var(--spectrum-drop-zone-background-color-opacity-filled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-content-display": {
+ "description": "Defined in `.spectrum-DropZone.is-filled.is-dragged`.
Used by `.spectrum-DropZone-content`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-content-height": {
+ "value": "48px",
+ "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-content-max-width": {
+ "value": "380px",
+ "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-drop-zone-content-maximum-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-content-top-to-text": {
+ "value": "12px",
+ "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-content-bottom-to-text": {
+ "value": "14px",
+ "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-content-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-content-font-weight": {
+ "value": "700",
+ "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-content-font-style": {
+ "value": "normal",
+ "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-default-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-content-line-height": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-content-background-color": {
+ "value": "var(--spectrum-drop-zone-content-background-color)",
+ "description": "Used by `.spectrum-DropZone-button, .spectrum-DropZone-button:focus`, `.spectrum-DropZone-button:hover`.
Defaults to `var(--spectrum-drop-zone-content-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-drop-zone-border-width": {
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-background-color": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone`, `--mod-drop-zone-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-background-color-rgb": {
+ "description": "Used by `--spectrum-drop-zone-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-border-color-hover": {
+ "description": "Defined in `.spectrum-DropZone`.
Used by `--mod-drop-zone-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-illustration-color": {
+ "description": "Defined in `.spectrum-DropZone`.
Used by `--mod-illustrated-message-illustration-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-content-background-color": {
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone-button, .spectrum-DropZone-button:focus`, `.spectrum-DropZone-button:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-content-maximum-width": {
+ "value": "380px",
+ "description": "Used by `--mod-illustrated-message-content-maximum-width`, `.spectrum-DropZone-button`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-title-size": {
+ "value": "var(--spectrum-heading-size-s)",
+ "description": "Used by `--mod-illustrated-message-title-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-body-size": {
+ "value": "var(--spectrum-body-size-xs)",
+ "description": "Used by `--mod-illustrated-message-description-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-width": {
+ "value": "428px",
+ "description": "Used by `.spectrum-DropZone`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-border-color": {
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-cjk-title-size": {
+ "value": "var(--spectrum-heading-cjk-size-s)",
+ "description": "Used by `--mod-illustrated-message-title-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-background-color-opacity": {
+ "value": "0.1",
+ "description": "Used by `--mod-drop-zone-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-background-color-opacity-filled": {
+ "value": "0.3",
+ "description": "Used by `--mod-drop-zone-background-color`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--system-drop-zone-border-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-drop-zone-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-accent-visual-color": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--spectrum-drop-zone-border-color-hover`, `--spectrum-drop-zone-content-background-color`, `--mod-illustrated-message-illustration-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-visual-color": {
+ "value": "var(--spectrum-gray-600)",
+ "description": "Used by `--spectrum-drop-zone-illustration-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-spacing-400": {
+ "value": "24px",
+ "description": "Used by `--mod-illustrated-message-title-to-heading`, `.spectrum-DropZone`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-75": {
+ "value": "4px",
+ "description": "Used by `--mod-illustrated-message-heading-to-body`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--mod-illustrated-message-title-font-family`, `--mod-illustrated-message-description-font-family`, `.spectrum-DropZone-button`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-sans-serif-font-weight": {
+ "value": "700",
+ "description": "Used by `--mod-illustrated-message-title-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-sans-serif-font-style": {
+ "value": "normal",
+ "description": "Used by `--mod-illustrated-message-title-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-line-height": {
+ "value": "1.3",
+ "description": "Used by `--mod-illustrated-message-title-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-color": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--mod-illustrated-message-title-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-body-sans-serif-font-weight": {
+ "value": "400",
+ "description": "Used by `--mod-illustrated-message-description-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-sans-serif-font-style": {
+ "value": "normal",
+ "description": "Used by `--mod-illustrated-message-description-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-line-height": {
+ "value": "1.5",
+ "description": "Used by `--mod-illustrated-message-description-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--mod-illustrated-message-description-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--mod-actionbutton-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--mod-actionbutton-label-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-300": {
+ "value": "17px",
+ "description": "Used by `--mod-actionbutton-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `.spectrum-DropZone`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `.spectrum-DropZone-button`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-300": {
+ "value": "12px",
+ "description": "Used by `.spectrum-DropZone-button`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-300": {
+ "value": "14px",
+ "description": "Used by `.spectrum-DropZone-button`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-bold-font-weight": {
+ "value": "700",
+ "description": "Used by `.spectrum-DropZone-button`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `.spectrum-DropZone-button`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-DropZone-button`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-drop-zone-border-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-drop-zone-border-color`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {
+ "mod-illustrated-message-content-maximum-width": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-illustration-color": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-title-to-heading": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-heading-to-body": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-title-font-family": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-title-font-weight": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-title-font-style": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-title-font-size": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-title-line-height": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-title-color": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-description-position": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-description-z-index": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-heading-to-description": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-description-font-family": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-description-font-weight": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-description-font-style": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-description-font-size": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-description-line-height": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-description-color": {
+ "category": "Passthrough"
+ },
+ "mod-actionbutton-font-size": {
+ "category": "Passthrough"
+ },
+ "mod-actionbutton-label-color": {
+ "category": "Passthrough"
+ },
+ "mod-actionbutton-edge-to-text": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-display": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-drop-zone-border-color-hover": {
+ "value": "var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `--mod-drop-zone-border-color`.
Defaults to `var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-drop-zone-illustration-color": {
+ "description": "Defined in `.spectrum-DropZone`.
Used by `--highcontrast-illustrated-message-illustration-color`.",
+ "control": "color"
+ },
+ "highcontrast-illustrated-message-illustration-color": {
+ "description": "Defined in `.spectrum-DropZone`.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/dropzone/stories/dropzone.stories.js b/components/dropzone/stories/dropzone.stories.js
index 9d0d7e4c3d2..cd3635aceb8 100644
--- a/components/dropzone/stories/dropzone.stories.js
+++ b/components/dropzone/stories/dropzone.stories.js
@@ -4,9 +4,11 @@ import { Template as Link } from "@spectrum-css/link/stories/template.js";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDragged } from "@spectrum-css/preview/types";
import { html } from "lit";
+import { DropzoneGroup } from "./dropzone.test.js";
+
+// Local assets to render the component styles and structure
import metadata from "../dist/metadata.json";
import packageJson from "../package.json";
-import { DropzoneGroup } from "./dropzone.test.js";
/**
* A drop zone is an area on the screen into a which an object can be dragged and dropped to accomplish a task. It's a common interaction in uploading and file management workflows. For example, a drop zone might be used in an upload workflow to enable the user to simply drop a file from their operating system into the drop zone, which is a more efficient and intuitive action, rather than utilizing the standard "Choose file" dialog.
@@ -41,6 +43,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/dropzone/stories/template.js b/components/dropzone/stories/template.js
index 9eb2dfface7..227ab0fa17d 100644
--- a/components/dropzone/stories/template.js
+++ b/components/dropzone/stories/template.js
@@ -20,7 +20,7 @@ export const Template = ({
heading,
description,
label,
- id = getRandomId("dropzone"),
+ id = getRandomId("drop-zone"),
} = {}, context = {}) => {
return html`
Defaults to `var(--spectrum-field-label-min-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-padding-block": {
+ "value": "var(--mod-field-label-bottom-to-text, var(--spectrum-field-label-bottom-to-text))",
+ "description": "Used by `.spectrum-FieldLabel`.
Defaults to `var(--mod-field-label-bottom-to-text, var(--spectrum-field-label-bottom-to-text))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-field-label-top-to-text": {
+ "value": "var(--spectrum-field-label-top-to-text)",
+ "description": "Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-field-label-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-field-label-bottom-to-text": {
+ "value": "var(--spectrum-field-label-bottom-to-text)",
+ "description": "Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-field-label-bottom-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-padding-inline": {
+ "description": "Used by `.spectrum-FieldLabel`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-margin-block": {
+ "value": "var(--mod-fieldlabel-margin-block-end, 0)",
+ "description": "Used by `.spectrum-FieldLabel`.
Defaults to `var(--mod-fieldlabel-margin-block-end, 0)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-margin-block-start": {
+ "description": "Used by `.spectrum-FieldLabel`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-margin-block-end": {
+ "description": "Used by `.spectrum-FieldLabel`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-margin-inline": {
+ "value": "var(--mod-fieldlabel-margin-inline-end, 0)",
+ "description": "Used by `.spectrum-FieldLabel`.
Defaults to `var(--mod-fieldlabel-margin-inline-end, 0)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-margin-inline-start": {
+ "description": "Used by `.spectrum-FieldLabel`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-margin-inline-end": {
+ "description": "Used by `.spectrum-FieldLabel`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-font-size": {
+ "value": "var(--spectrum-field-label-font-size)",
+ "description": "Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-field-label-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-font-weight": {
+ "value": "400",
+ "description": "Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-FieldLabel:lang(ja), .spectrum-FieldLabel:lang(ko), .spectrum-FieldLabel:lang(zh)`.
Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-color": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Defined in `.spectrum-FieldLabel.is-disabled`.
Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-line-height-cjk": {
+ "value": "1.5",
+ "description": "Used by `--mod-fieldlabel-line-height`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--mod-fieldlabel-color`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-field-label-text-to-asterisk": {
+ "value": "var(--spectrum-field-label-text-to-asterisk)",
+ "description": "Used by `.spectrum-FieldLabel-requiredIcon`.
Defaults to `var(--spectrum-field-label-text-to-asterisk)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-field-label-asterisk-vertical-align": {
+ "description": "Used by `.spectrum-FieldLabel-requiredIcon`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-side-margin-block-start": {
+ "value": "var(--spectrum-field-label-side-margin-block-start)",
+ "description": "Used by `.spectrum-FieldLabel--left, .spectrum-FieldLabel--right`.
Defaults to `var(--spectrum-field-label-side-margin-block-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-side-padding-right": {
+ "value": "var(--spectrum-field-label-side-padding-right)",
+ "description": "Used by `.spectrum-FieldLabel--left, .spectrum-FieldLabel--right`.
Defaults to `var(--spectrum-field-label-side-padding-right)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-field-label-min-height": {
+ "description": "Defined in `.spectrum-FieldLabel, .spectrum-FieldLabel--sizeM`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`.
Used by `.spectrum-FieldLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-top-to-text": {
+ "description": "Defined in `.spectrum-FieldLabel, .spectrum-FieldLabel--sizeM`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`.
Used by `.spectrum-FieldLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-bottom-to-text": {
+ "description": "Defined in `.spectrum-FieldLabel, .spectrum-FieldLabel--sizeM`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`.
Used by `.spectrum-FieldLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-font-size": {
+ "description": "Defined in `.spectrum-FieldLabel, .spectrum-FieldLabel--sizeM`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`.
Used by `.spectrum-FieldLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-side-margin-block-start": {
+ "description": "Defined in `.spectrum-FieldLabel, .spectrum-FieldLabel--sizeM`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`.
Used by `.spectrum-FieldLabel--left, .spectrum-FieldLabel--right`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-top-margin-medium": {
+ "value": "4px",
+ "description": "Used by `--spectrum-field-label-side-margin-block-start`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-side-padding-right": {
+ "description": "Defined in `.spectrum-FieldLabel, .spectrum-FieldLabel--sizeM`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`.
Used by `.spectrum-FieldLabel--left, .spectrum-FieldLabel--right`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-text-to-asterisk": {
+ "description": "Defined in `.spectrum-FieldLabel, .spectrum-FieldLabel--sizeM`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`.
Used by `.spectrum-FieldLabel-requiredIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-text-to-asterisk-medium": {
+ "value": "4px",
+ "description": "Used by `--spectrum-field-label-text-to-asterisk`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-top-margin-small": {
+ "value": "0px",
+ "description": "Used by `--spectrum-field-label-side-margin-block-start`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-text-to-asterisk-small": {
+ "value": "4px",
+ "description": "Used by `--spectrum-field-label-text-to-asterisk`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-top-margin-large": {
+ "value": "5px",
+ "description": "Used by `--spectrum-field-label-side-margin-block-start`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-text-to-asterisk-large": {
+ "value": "5px",
+ "description": "Used by `--spectrum-field-label-text-to-asterisk`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-top-margin-extra-large": {
+ "value": "5px",
+ "description": "Used by `--spectrum-field-label-side-margin-block-start`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-text-to-asterisk-extra-large": {
+ "value": "5px",
+ "description": "Used by `--spectrum-field-label-text-to-asterisk`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-field-label-min-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-field-label-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-field-label-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-field-label-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-field-label-side-padding-right`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-field-label-side-padding-right`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-field-label-min-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-field-label-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-100": {
+ "value": "9px",
+ "description": "Used by `--spectrum-field-label-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-field-label-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-field-label-min-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-field-label-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-200": {
+ "value": "11px",
+ "description": "Used by `--spectrum-field-label-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-field-label-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `.spectrum-FieldLabel`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-FieldLabel`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Used by `.spectrum-FieldLabel`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--mod-fieldlabel-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--mod-fieldlabel-color`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-field-label-content-color": {
+ "value": "var(--mod-fieldlabel-color, var(--spectrum-neutral-subdued-content-color-default))",
+ "description": "Defined in `.spectrum-FieldLabel.is-disabled`.
Used by `.spectrum-FieldLabel`.
Defaults to `var(--mod-fieldlabel-color, var(--spectrum-neutral-subdued-content-color-default))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/fieldlabel/stories/fieldlabel.stories.js b/components/fieldlabel/stories/fieldlabel.stories.js
index 1a268284d7f..099b5de3515 100644
--- a/components/fieldlabel/stories/fieldlabel.stories.js
+++ b/components/fieldlabel/stories/fieldlabel.stories.js
@@ -1,11 +1,13 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isRequired, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { FieldLabelGroup } from "./fieldlabel.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The field label component is used along with inputs to display a label for that input.
*/
@@ -51,6 +53,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/fieldlabel/stories/template.js b/components/fieldlabel/stories/template.js
index 7f5477e4d5f..e7f808da67e 100644
--- a/components/fieldlabel/stories/template.js
+++ b/components/fieldlabel/stories/template.js
@@ -14,7 +14,7 @@ export const Template = ({
customStyles = {},
size = "m",
label,
- id = getRandomId("fieldlabel"),
+ id = getRandomId("field-label"),
testId,
forInput,
alignment,
diff --git a/components/floatingactionbutton/dist/metadata.json b/components/floatingactionbutton/dist/metadata.json
index 7daf062a329..35d7e0dbc9e 100644
--- a/components/floatingactionbutton/dist/metadata.json
+++ b/components/floatingactionbutton/dist/metadata.json
@@ -13,75 +13,359 @@
".spectrum-FloatingActionButton:hover .spectrum-FloatingActionButton-icon",
".spectrum-Icon.spectrum-FloatingActionButton-icon"
],
- "modifiers": [
- "--mod-afloating-action-button-focus-ring-color",
- "--mod-floating-action-button-background-color",
- "--mod-floating-action-button-background-color-down",
- "--mod-floating-action-button-background-color-hover",
- "--mod-floating-action-button-background-color-key-focus",
- "--mod-floating-action-button-border-radius",
- "--mod-floating-action-button-drop-shadow-blur",
- "--mod-floating-action-button-drop-shadow-color",
- "--mod-floating-action-button-drop-shadow-x",
- "--mod-floating-action-button-drop-shadow-y",
- "--mod-floating-action-button-focus-ring-gap",
- "--mod-floating-action-button-focus-ring-width",
- "--mod-floating-action-button-icon-color",
- "--mod-floating-action-button-icon-color-down",
- "--mod-floating-action-button-icon-color-hover",
- "--mod-floating-action-button-icon-color-key-focus",
- "--mod-floating-action-button-icon-size",
- "--mod-floating-action-button-margin",
- "--mod-floating-action-button-padding",
- "--mod-floating-action-button-size"
- ],
- "component": [
- "--spectrum-floating-action-button-background-color",
- "--spectrum-floating-action-button-background-color-down",
- "--spectrum-floating-action-button-background-color-hover",
- "--spectrum-floating-action-button-background-color-key-focus",
- "--spectrum-floating-action-button-drop-shadow-blur",
- "--spectrum-floating-action-button-drop-shadow-color",
- "--spectrum-floating-action-button-drop-shadow-y",
- "--spectrum-floating-action-button-icon-color",
- "--spectrum-floating-action-button-icon-color-down",
- "--spectrum-floating-action-button-icon-color-hover",
- "--spectrum-floating-action-button-icon-color-key-focus",
- "--spectrum-floating-action-button-icon-size",
- "--spectrum-floating-action-button-margin",
- "--spectrum-floating-action-button-padding",
- "--spectrum-floating-action-button-size"
- ],
- "global": [
- "--spectrum-accent-background-color-default",
- "--spectrum-accent-background-color-down",
- "--spectrum-accent-background-color-hover",
- "--spectrum-accent-background-color-key-focus",
- "--spectrum-background-layer-2-color",
- "--spectrum-component-height-200",
- "--spectrum-component-pill-edge-to-visual-only-200",
- "--spectrum-drop-shadow-x",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-neutral-subdued-content-color-default",
- "--spectrum-neutral-subdued-content-color-down",
- "--spectrum-neutral-subdued-content-color-hover",
- "--spectrum-neutral-subdued-content-color-key-focus",
- "--spectrum-spacing-200",
- "--spectrum-white",
- "--spectrum-workflow-icon-size-200"
- ],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-floating-action-button-background-color",
- "--highcontrast-floating-action-button-background-color-down",
- "--highcontrast-floating-action-button-background-color-hover",
- "--highcontrast-floating-action-button-background-color-key-focus",
- "--highcontrast-floating-action-button-icon-color",
- "--highcontrast-floating-action-button-icon-color-down",
- "--highcontrast-floating-action-button-icon-color-hover",
- "--highcontrast-floating-action-button-icon-color-key-focus"
- ]
+ "modifiers": {
+ "mod-floating-action-button-size": {
+ "value": "var(--spectrum-floating-action-button-size)",
+ "description": "Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--spectrum-floating-action-button-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-floating-action-button-border-radius": {
+ "description": "Used by `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton:focus-visible:after`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-floating-action-button-padding": {
+ "value": "var(--spectrum-floating-action-button-padding)",
+ "description": "Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--spectrum-floating-action-button-padding)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-floating-action-button-margin": {
+ "value": "var(--spectrum-floating-action-button-margin)",
+ "description": "Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--spectrum-floating-action-button-margin)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-floating-action-button-drop-shadow-x": {
+ "value": "0px",
+ "description": "Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--spectrum-drop-shadow-x)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-floating-action-button-drop-shadow-y": {
+ "value": "4px",
+ "description": "Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--spectrum-floating-action-button-drop-shadow-y)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-floating-action-button-drop-shadow-blur": {
+ "value": "12px",
+ "description": "Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--spectrum-floating-action-button-drop-shadow-blur)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-floating-action-button-drop-shadow-color": {
+ "value": "var(--spectrum-transparent-black-300)",
+ "description": "Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--spectrum-floating-action-button-drop-shadow-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-floating-action-button-background-color": {
+ "value": "var(--spectrum-floating-action-button-background-color)",
+ "description": "Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--spectrum-floating-action-button-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-floating-action-button-background-color-hover": {
+ "value": "var(--spectrum-floating-action-button-background-color-hover)",
+ "description": "Used by `.spectrum-FloatingActionButton:hover`.
Defaults to `var(--spectrum-floating-action-button-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-floating-action-button-icon-color-hover": {
+ "value": "var(--spectrum-floating-action-button-icon-color-hover)",
+ "description": "Used by `.spectrum-FloatingActionButton:hover .spectrum-FloatingActionButton-icon`.
Defaults to `var(--spectrum-floating-action-button-icon-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-floating-action-button-background-color-down": {
+ "value": "var(--spectrum-floating-action-button-background-color-down)",
+ "description": "Used by `.spectrum-FloatingActionButton:active`.
Defaults to `var(--spectrum-floating-action-button-background-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-floating-action-button-icon-color-down": {
+ "value": "var(--spectrum-floating-action-button-icon-color-down)",
+ "description": "Used by `.spectrum-FloatingActionButton:active .spectrum-FloatingActionButton-icon`.
Defaults to `var(--spectrum-floating-action-button-icon-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-floating-action-button-background-color-key-focus": {
+ "value": "var(--spectrum-floating-action-button-background-color-key-focus)",
+ "description": "Used by `.spectrum-FloatingActionButton:focus-visible`.
Defaults to `var(--spectrum-floating-action-button-background-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-floating-action-button-icon-color-key-focus": {
+ "value": "var(--spectrum-floating-action-button-icon-color-key-focus)",
+ "description": "Used by `.spectrum-FloatingActionButton:focus-visible .spectrum-FloatingActionButton-icon`.
Defaults to `var(--spectrum-floating-action-button-icon-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-floating-action-button-focus-ring-gap": {
+ "value": "2px",
+ "description": "Used by `.spectrum-FloatingActionButton:focus-visible:after`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-floating-action-button-focus-ring-width": {
+ "value": "2px",
+ "description": "Used by `.spectrum-FloatingActionButton:focus-visible:after`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-afloating-action-button-focus-ring-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `.spectrum-FloatingActionButton:focus-visible:after`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-floating-action-button-icon-size": {
+ "value": "var(--spectrum-floating-action-button-icon-size)",
+ "description": "Used by `.spectrum-Icon.spectrum-FloatingActionButton-icon`.
Defaults to `var(--spectrum-floating-action-button-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-floating-action-button-icon-color": {
+ "value": "var(--spectrum-floating-action-button-icon-color)",
+ "description": "Used by `.spectrum-Icon.spectrum-FloatingActionButton-icon`.
Defaults to `var(--spectrum-floating-action-button-icon-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-floating-action-button-size": {
+ "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-icon-size": {
+ "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-Icon.spectrum-FloatingActionButton-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-padding": {
+ "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-margin": {
+ "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-background-color": {
+ "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-FloatingActionButton`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-background-color-hover": {
+ "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-FloatingActionButton:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-background-color-down": {
+ "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-FloatingActionButton:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-background-color-key-focus": {
+ "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-FloatingActionButton:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-icon-color": {
+ "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-Icon.spectrum-FloatingActionButton-icon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-icon-color-hover": {
+ "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-FloatingActionButton:hover .spectrum-FloatingActionButton-icon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-icon-color-down": {
+ "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-FloatingActionButton:active .spectrum-FloatingActionButton-icon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-icon-color-key-focus": {
+ "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-FloatingActionButton:focus-visible .spectrum-FloatingActionButton-icon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-drop-shadow-y": {
+ "value": "4px",
+ "description": "Used by `.spectrum-FloatingActionButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-drop-shadow-blur": {
+ "value": "12px",
+ "description": "Used by `.spectrum-FloatingActionButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-drop-shadow-color": {
+ "value": "var(--spectrum-transparent-black-300)",
+ "description": "Used by `.spectrum-FloatingActionButton`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-floating-action-button-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-200": {
+ "value": "22px",
+ "description": "Used by `--spectrum-floating-action-button-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-visual-only-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-floating-action-button-padding`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-floating-action-button-margin`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-default": {
+ "value": "var(--spectrum-accent-color-800)",
+ "description": "Used by `--spectrum-floating-action-button-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-hover": {
+ "value": "var(--spectrum-accent-color-700)",
+ "description": "Used by `--spectrum-floating-action-button-background-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-down": {
+ "value": "var(--spectrum-accent-color-700)",
+ "description": "Used by `--spectrum-floating-action-button-background-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-key-focus": {
+ "value": "var(--spectrum-accent-color-700)",
+ "description": "Used by `--spectrum-floating-action-button-background-color-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--spectrum-floating-action-button-icon-color`, `--spectrum-floating-action-button-icon-color-hover`, `--spectrum-floating-action-button-icon-color-down`, `--spectrum-floating-action-button-icon-color-key-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-background-layer-2-color": {
+ "value": "var(--spectrum-gray-75)",
+ "description": "Used by `--spectrum-floating-action-button-background-color`, `--spectrum-floating-action-button-background-color-hover`, `--spectrum-floating-action-button-background-color-down`, `--spectrum-floating-action-button-background-color-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Used by `--spectrum-floating-action-button-icon-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-hover": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-floating-action-button-icon-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-down": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-floating-action-button-icon-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-key-focus": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-floating-action-button-icon-color-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-x": {
+ "value": "0px",
+ "description": "Used by `.spectrum-FloatingActionButton`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `.spectrum-FloatingActionButton:focus-visible:after`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `.spectrum-FloatingActionButton:focus-visible:after`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `.spectrum-FloatingActionButton:focus-visible:after`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-floating-action-button-background-color": {
+ "value": "var(--mod-floating-action-button-background-color, var(--spectrum-floating-action-button-background-color))",
+ "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--mod-floating-action-button-background-color, var(--spectrum-floating-action-button-background-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-floating-action-button-background-color-hover": {
+ "value": "var(--mod-floating-action-button-background-color-hover, var(--spectrum-floating-action-button-background-color-hover))",
+ "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton:hover`.
Defaults to `var(--mod-floating-action-button-background-color-hover, var(--spectrum-floating-action-button-background-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-floating-action-button-background-color-down": {
+ "value": "var(--mod-floating-action-button-background-color-down, var(--spectrum-floating-action-button-background-color-down))",
+ "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton:active`.
Defaults to `var(--mod-floating-action-button-background-color-down, var(--spectrum-floating-action-button-background-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-floating-action-button-background-color-key-focus": {
+ "value": "var(--mod-floating-action-button-background-color-key-focus, var(--spectrum-floating-action-button-background-color-key-focus))",
+ "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton:focus-visible`.
Defaults to `var(--mod-floating-action-button-background-color-key-focus, var(--spectrum-floating-action-button-background-color-key-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-floating-action-button-icon-color": {
+ "value": "var(--mod-floating-action-button-icon-color, var(--spectrum-floating-action-button-icon-color))",
+ "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-Icon.spectrum-FloatingActionButton-icon`.
Defaults to `var(--mod-floating-action-button-icon-color, var(--spectrum-floating-action-button-icon-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-floating-action-button-icon-color-hover": {
+ "value": "var(--mod-floating-action-button-icon-color-hover, var(--spectrum-floating-action-button-icon-color-hover))",
+ "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton:hover .spectrum-FloatingActionButton-icon`.
Defaults to `var(--mod-floating-action-button-icon-color-hover, var(--spectrum-floating-action-button-icon-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-floating-action-button-icon-color-down": {
+ "value": "var(--mod-floating-action-button-icon-color-down, var(--spectrum-floating-action-button-icon-color-down))",
+ "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton:active .spectrum-FloatingActionButton-icon`.
Defaults to `var(--mod-floating-action-button-icon-color-down, var(--spectrum-floating-action-button-icon-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-floating-action-button-icon-color-key-focus": {
+ "value": "var(--mod-floating-action-button-icon-color-key-focus, var(--spectrum-floating-action-button-icon-color-key-focus))",
+ "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton:focus-visible .spectrum-FloatingActionButton-icon`.
Defaults to `var(--mod-floating-action-button-icon-color-key-focus, var(--spectrum-floating-action-button-icon-color-key-focus))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/floatingactionbutton/stories/floatingactionbutton.stories.js b/components/floatingactionbutton/stories/floatingactionbutton.stories.js
index 3d96790255d..24154d52592 100644
--- a/components/floatingactionbutton/stories/floatingactionbutton.stories.js
+++ b/components/floatingactionbutton/stories/floatingactionbutton.stories.js
@@ -1,11 +1,13 @@
import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isActive, isFocused, isHovered } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { FloatingActionButtonGroup } from "./floatingactionbutton.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The floating action button component is used to give users a more prominent button for high frequency actions.
*
@@ -49,6 +51,7 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/form/dist/metadata.json b/components/form/dist/metadata.json
index 88655f8edd3..1e35f2ec725 100644
--- a/components/form/dist/metadata.json
+++ b/components/form/dist/metadata.json
@@ -11,27 +11,97 @@
".spectrum-Form-itemLabel.is-disabled",
".spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon"
],
- "modifiers": [
- "--mod-disabled-content-color",
- "--mod-form-grid-template-columns",
- "--mod-form-grid-template-columns-labels-above",
- "--mod-form-inline-size",
- "--mod-form-item-block-spacing",
- "--mod-form-item-block-spacing-labels-above"
- ],
- "component": [
- "--spectrum-form-grid-template-columns",
- "--spectrum-form-grid-template-columns-labels-above",
- "--spectrum-form-item-block-spacing",
- "--spectrum-form-item-block-spacing-labels-above",
- "--spectrum-form-item-disabled-content-color"
- ],
- "global": [
- "--spectrum-disabled-content-color",
- "--spectrum-spacing-200",
- "--spectrum-spacing-300"
- ],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": ["--highcontrast-form-item-disabled-content-color"]
+ "modifiers": {
+ "mod-form-grid-template-columns": {
+ "value": "var(--spectrum-form-grid-template-columns)",
+ "description": "Defined in `.spectrum-Form--labelsAbove`.
Used by `.spectrum-Form`.
Defaults to `var(--spectrum-form-grid-template-columns)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-form-inline-size": {
+ "description": "Used by `.spectrum-Form`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-form-item-block-spacing": {
+ "value": "var(--spectrum-form-item-block-spacing)",
+ "description": "Defined in `.spectrum-Form--labelsAbove`.
Used by `.spectrum-Form`.
Defaults to `var(--spectrum-form-item-block-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-form-item-block-spacing-labels-above": {
+ "value": "var(--spectrum-form-item-block-spacing-labels-above)",
+ "description": "Used by `--mod-form-item-block-spacing`.
Defaults to `var(--spectrum-form-item-block-spacing-labels-above)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-form-grid-template-columns-labels-above": {
+ "value": "var(--spectrum-form-grid-template-columns-labels-above)",
+ "description": "Used by `--mod-form-grid-template-columns`.
Defaults to `var(--spectrum-form-grid-template-columns-labels-above)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-disabled-content-color": {
+ "value": "var(--spectrum-form-item-disabled-content-color)",
+ "description": "Used by `.spectrum-Form-itemLabel.is-disabled, .spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon`.
Defaults to `var(--spectrum-form-item-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-form-item-block-spacing": {
+ "description": "Defined in `.spectrum-Form`.
Used by `.spectrum-Form`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-form-item-block-spacing-labels-above": {
+ "description": "Defined in `.spectrum-Form`.
Used by `--mod-form-item-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-form-grid-template-columns": {
+ "description": "Defined in `.spectrum-Form`.
Used by `.spectrum-Form`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-form-grid-template-columns-labels-above": {
+ "description": "Defined in `.spectrum-Form`.
Used by `--mod-form-grid-template-columns`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-form-item-disabled-content-color": {
+ "description": "Defined in `.spectrum-Form`.
Used by `.spectrum-Form-itemLabel.is-disabled, .spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `--spectrum-form-item-block-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-form-item-block-spacing-labels-above`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-form-item-disabled-content-color`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-form-item-disabled-content-color": {
+ "value": "var(--mod-disabled-content-color, var(--spectrum-form-item-disabled-content-color))",
+ "description": "Defined in `.spectrum-Form`.
Used by `.spectrum-Form-itemLabel.is-disabled, .spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon`.
Defaults to `var(--mod-disabled-content-color, var(--spectrum-form-item-disabled-content-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/form/stories/form.stories.js b/components/form/stories/form.stories.js
index 233f18adb21..2bc1df8261a 100644
--- a/components/form/stories/form.stories.js
+++ b/components/form/stories/form.stories.js
@@ -3,11 +3,13 @@ import { Template as Picker } from "@spectrum-css/picker/stories/template.js";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { Template as Stepper } from "@spectrum-css/stepper/stories/template.js";
import { Template as TextField } from "@spectrum-css/textfield/stories/template.js";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { FormGroup } from "./form.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The form component is used for aligning multiple inputs and field groups within a form. It provides structure and spacing for your form fields.
*/
@@ -107,6 +109,7 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json
index f730c33a671..fc988f11bf8 100644
--- a/components/helptext/dist/metadata.json
+++ b/components/helptext/dist/metadata.json
@@ -4,6 +4,9 @@
".spectrum-HelpText",
".spectrum-HelpText .spectrum-HelpText-text",
".spectrum-HelpText .spectrum-HelpText-validationIcon",
+ ".spectrum-HelpText:lang(ja)",
+ ".spectrum-HelpText:lang(ko)",
+ ".spectrum-HelpText:lang(zh)",
".spectrum-HelpText.is-disabled",
".spectrum-HelpText.is-disabled .spectrum-HelpText-text",
".spectrum-HelpText.is-disabled .spectrum-HelpText-validationIcon",
@@ -16,71 +19,316 @@
".spectrum-HelpText.spectrum-HelpText--sizeL",
".spectrum-HelpText.spectrum-HelpText--sizeM",
".spectrum-HelpText.spectrum-HelpText--sizeS",
- ".spectrum-HelpText.spectrum-HelpText--sizeXL",
- ".spectrum-HelpText:lang(ja)",
- ".spectrum-HelpText:lang(ko)",
- ".spectrum-HelpText:lang(zh)"
- ],
- "modifiers": [
- "--mod-helptext-bottom-to-text",
- "--mod-helptext-bottom-to-workflow-icon",
- "--mod-helptext-content-color-default",
- "--mod-helptext-font-size",
- "--mod-helptext-icon-color-default",
- "--mod-helptext-icon-size",
- "--mod-helptext-line-height",
- "--mod-helptext-line-height-cjk",
- "--mod-helptext-min-height",
- "--mod-helptext-text-to-visual",
- "--mod-helptext-top-to-text",
- "--mod-helptext-top-to-workflow-icon"
- ],
- "component": [
- "--spectrum-help-text-top-to-workflow-icon-extra-large",
- "--spectrum-help-text-top-to-workflow-icon-large",
- "--spectrum-help-text-top-to-workflow-icon-medium",
- "--spectrum-help-text-top-to-workflow-icon-small",
- "--spectrum-helptext-bottom-to-text",
- "--spectrum-helptext-bottom-to-workflow-icon",
- "--spectrum-helptext-content-color-default",
- "--spectrum-helptext-font-size",
- "--spectrum-helptext-icon-color-default",
- "--spectrum-helptext-icon-size",
- "--spectrum-helptext-min-height",
- "--spectrum-helptext-text-to-visual",
- "--spectrum-helptext-top-to-text",
- "--spectrum-helptext-top-to-workflow-icon"
- ],
- "global": [
- "--spectrum-cjk-line-height-100",
- "--spectrum-component-bottom-to-text-100",
- "--spectrum-component-bottom-to-text-200",
- "--spectrum-component-bottom-to-text-75",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-75",
- "--spectrum-component-top-to-text-100",
- "--spectrum-component-top-to-text-200",
- "--spectrum-component-top-to-text-75",
- "--spectrum-disabled-content-color",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-75",
- "--spectrum-line-height-100",
- "--spectrum-negative-color-900",
- "--spectrum-neutral-subdued-content-color-default",
- "--spectrum-text-to-visual-100",
- "--spectrum-text-to-visual-200",
- "--spectrum-text-to-visual-75",
- "--spectrum-workflow-icon-size-100",
- "--spectrum-workflow-icon-size-200",
- "--spectrum-workflow-icon-size-300",
- "--spectrum-workflow-icon-size-75"
+ ".spectrum-HelpText.spectrum-HelpText--sizeXL"
],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-helptext-content-color-default",
- "--highcontrast-helptext-icon-color-default"
- ]
+ "modifiers": {
+ "mod-helptext-content-color-default": {
+ "value": "var(--spectrum-helptext-content-color-default)",
+ "description": "Used by `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-text`, `.spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-text`, `.spectrum-HelpText.is-disabled .spectrum-HelpText-text`.
Defaults to `var(--spectrum-helptext-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-helptext-font-size": {
+ "value": "var(--spectrum-helptext-font-size)",
+ "description": "Used by `.spectrum-HelpText`.
Defaults to `var(--spectrum-helptext-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-helptext-min-height": {
+ "value": "var(--spectrum-helptext-min-height)",
+ "description": "Used by `.spectrum-HelpText`.
Defaults to `var(--spectrum-helptext-min-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-helptext-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-HelpText:lang(ja), .spectrum-HelpText:lang(ko), .spectrum-HelpText:lang(zh)`.
Used by `.spectrum-HelpText .spectrum-HelpText-text`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-helptext-line-height-cjk": {
+ "value": "1.5",
+ "description": "Used by `--mod-helptext-line-height`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-helptext-text-to-visual": {
+ "value": "var(--spectrum-helptext-text-to-visual)",
+ "description": "Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`.
Defaults to `var(--spectrum-helptext-text-to-visual)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-helptext-top-to-workflow-icon": {
+ "value": "var(--spectrum-helptext-top-to-workflow-icon)",
+ "description": "Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`.
Defaults to `var(--spectrum-helptext-top-to-workflow-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-helptext-bottom-to-workflow-icon": {
+ "value": "var(--spectrum-helptext-bottom-to-workflow-icon)",
+ "description": "Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`.
Defaults to `var(--spectrum-helptext-bottom-to-workflow-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-helptext-icon-size": {
+ "value": "var(--spectrum-helptext-icon-size)",
+ "description": "Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`.
Defaults to `var(--spectrum-helptext-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-helptext-top-to-text": {
+ "value": "var(--spectrum-helptext-top-to-text)",
+ "description": "Used by `.spectrum-HelpText .spectrum-HelpText-text`.
Defaults to `var(--spectrum-helptext-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-helptext-bottom-to-text": {
+ "value": "var(--spectrum-helptext-bottom-to-text)",
+ "description": "Used by `.spectrum-HelpText .spectrum-HelpText-text`.
Defaults to `var(--spectrum-helptext-bottom-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-helptext-icon-color-default": {
+ "value": "var(--spectrum-helptext-icon-color-default)",
+ "description": "Used by `.spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon`, `.spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-validationIcon`, `.spectrum-HelpText.is-disabled .spectrum-HelpText-validationIcon`.
Defaults to `var(--spectrum-helptext-icon-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-helptext-content-color-default": {
+ "description": "Defined in `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--neutral`, `.spectrum-HelpText.spectrum-HelpText--negative`, `.spectrum-HelpText.is-disabled`.
Used by `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-text`, `.spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-text`, `.spectrum-HelpText.is-disabled .spectrum-HelpText-text`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-helptext-icon-color-default": {
+ "description": "Defined in `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--neutral`, `.spectrum-HelpText.spectrum-HelpText--negative`, `.spectrum-HelpText.is-disabled`.
Used by `.spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon`, `.spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-validationIcon`, `.spectrum-HelpText.is-disabled .spectrum-HelpText-validationIcon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-helptext-font-size": {
+ "description": "Defined in `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText, .spectrum-HelpText.spectrum-HelpText--sizeM`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `.spectrum-HelpText`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-helptext-min-height": {
+ "description": "Defined in `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText, .spectrum-HelpText.spectrum-HelpText--sizeM`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `.spectrum-HelpText`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-helptext-icon-size": {
+ "description": "Defined in `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText, .spectrum-HelpText.spectrum-HelpText--sizeM`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-helptext-text-to-visual": {
+ "description": "Defined in `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText, .spectrum-HelpText.spectrum-HelpText--sizeM`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-helptext-top-to-workflow-icon": {
+ "description": "Defined in `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText, .spectrum-HelpText.spectrum-HelpText--sizeM`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `--spectrum-helptext-bottom-to-workflow-icon`, `.spectrum-HelpText .spectrum-HelpText-validationIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-help-text-top-to-workflow-icon-small": {
+ "value": "4px",
+ "description": "Used by `--spectrum-helptext-top-to-workflow-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-helptext-bottom-to-workflow-icon": {
+ "description": "Defined in `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText, .spectrum-HelpText.spectrum-HelpText--sizeM`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-helptext-top-to-text": {
+ "description": "Defined in `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText, .spectrum-HelpText.spectrum-HelpText--sizeM`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `.spectrum-HelpText .spectrum-HelpText-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-helptext-bottom-to-text": {
+ "description": "Defined in `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText, .spectrum-HelpText.spectrum-HelpText--sizeM`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `.spectrum-HelpText .spectrum-HelpText-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-help-text-top-to-workflow-icon-medium": {
+ "value": "3px",
+ "description": "Used by `--spectrum-helptext-top-to-workflow-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-help-text-top-to-workflow-icon-large": {
+ "value": "6px",
+ "description": "Used by `--spectrum-helptext-top-to-workflow-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-help-text-top-to-workflow-icon-extra-large": {
+ "value": "9px",
+ "description": "Used by `--spectrum-helptext-top-to-workflow-icon`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-neutral-subdued-content-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Used by `--spectrum-helptext-content-color-default`, `--spectrum-helptext-icon-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-helptext-min-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-75": {
+ "value": "16px",
+ "description": "Used by `--spectrum-helptext-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-helptext-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-helptext-text-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-helptext-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-helptext-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-helptext-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-helptext-min-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-200": {
+ "value": "22px",
+ "description": "Used by `--spectrum-helptext-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-helptext-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-helptext-text-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-helptext-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-100": {
+ "value": "9px",
+ "description": "Used by `--spectrum-helptext-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-helptext-min-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-300": {
+ "value": "26px",
+ "description": "Used by `--spectrum-helptext-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-helptext-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-200": {
+ "value": "7px",
+ "description": "Used by `--spectrum-helptext-text-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-helptext-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-200": {
+ "value": "11px",
+ "description": "Used by `--spectrum-helptext-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-negative-color-900": {
+ "value": "var(--spectrum-red-900)",
+ "description": "Used by `--spectrum-helptext-content-color-default`, `--spectrum-helptext-icon-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-helptext-content-color-default`, `--spectrum-helptext-icon-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--mod-helptext-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-HelpText .spectrum-HelpText-text`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-helptext-content-color-default": {
+ "value": "var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))",
+ "description": "Defined in `.spectrum-HelpText`.
Used by `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-text`, `.spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-text`, `.spectrum-HelpText.is-disabled .spectrum-HelpText-text`.
Defaults to `var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-helptext-icon-color-default": {
+ "value": "var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))",
+ "description": "Defined in `.spectrum-HelpText`.
Used by `.spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon`, `.spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-validationIcon`, `.spectrum-HelpText.is-disabled .spectrum-HelpText-validationIcon`.
Defaults to `var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/helptext/stories/helptext.stories.js b/components/helptext/stories/helptext.stories.js
index 5274cec9f78..90f89cb81e6 100644
--- a/components/helptext/stories/helptext.stories.js
+++ b/components/helptext/stories/helptext.stories.js
@@ -1,11 +1,13 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { HelpTextGroup } from "./helptext.test.js";
import { NegativeTemplate, Template, VariantsTemplate } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* Help text provides either an informative description or an error message that gives more context about what a user needs to input. It's commonly used in forms.
*/
@@ -63,6 +65,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/helptext/stories/template.js b/components/helptext/stories/template.js
index 74fa628ae2a..8b08ceabaab 100644
--- a/components/helptext/stories/template.js
+++ b/components/helptext/stories/template.js
@@ -15,7 +15,7 @@ export const Template = ({
hideIcon = false,
text,
variant,
- id = getRandomId("helptext"),
+ id = getRandomId("help-text"),
customClasses = [],
customStyles = {},
} = {}, context = {}) => {
diff --git a/components/icon/dist/metadata.json b/components/icon/dist/metadata.json
index 7f5d27e3789..c5539bdbfde 100644
--- a/components/icon/dist/metadata.json
+++ b/components/icon/dist/metadata.json
@@ -101,76 +101,383 @@
".spectrum-UIIcon-Dash600",
".spectrum-UIIcon-Dash75"
],
- "modifiers": [
- "--mod-icon-block-size",
- "--mod-icon-color",
- "--mod-icon-inline-size",
- "--mod-icon-size",
- "--mod-ui-icon-large-display",
- "--mod-ui-icon-medium-display"
- ],
- "component": [
- "--spectrum-icon-block-size",
- "--spectrum-icon-inline-size",
- "--spectrum-icon-size"
- ],
- "global": [
- "--spectrum-arrow-icon-size-100",
- "--spectrum-arrow-icon-size-200",
- "--spectrum-arrow-icon-size-300",
- "--spectrum-arrow-icon-size-400",
- "--spectrum-arrow-icon-size-500",
- "--spectrum-arrow-icon-size-600",
- "--spectrum-arrow-icon-size-75",
- "--spectrum-asterisk-icon-size-100",
- "--spectrum-asterisk-icon-size-200",
- "--spectrum-asterisk-icon-size-300",
- "--spectrum-asterisk-icon-size-75",
- "--spectrum-checkmark-icon-size-100",
- "--spectrum-checkmark-icon-size-200",
- "--spectrum-checkmark-icon-size-300",
- "--spectrum-checkmark-icon-size-400",
- "--spectrum-checkmark-icon-size-50",
- "--spectrum-checkmark-icon-size-500",
- "--spectrum-checkmark-icon-size-600",
- "--spectrum-checkmark-icon-size-75",
- "--spectrum-chevron-icon-size-100",
- "--spectrum-chevron-icon-size-200",
- "--spectrum-chevron-icon-size-300",
- "--spectrum-chevron-icon-size-400",
- "--spectrum-chevron-icon-size-50",
- "--spectrum-chevron-icon-size-500",
- "--spectrum-chevron-icon-size-75",
- "--spectrum-corner-triangle-icon-size-100",
- "--spectrum-corner-triangle-icon-size-200",
- "--spectrum-corner-triangle-icon-size-300",
- "--spectrum-corner-triangle-icon-size-75",
- "--spectrum-cross-icon-size-100",
- "--spectrum-cross-icon-size-200",
- "--spectrum-cross-icon-size-300",
- "--spectrum-cross-icon-size-400",
- "--spectrum-cross-icon-size-500",
- "--spectrum-cross-icon-size-600",
- "--spectrum-cross-icon-size-75",
- "--spectrum-dash-icon-size-100",
- "--spectrum-dash-icon-size-200",
- "--spectrum-dash-icon-size-300",
- "--spectrum-dash-icon-size-400",
- "--spectrum-dash-icon-size-50",
- "--spectrum-dash-icon-size-500",
- "--spectrum-dash-icon-size-600",
- "--spectrum-dash-icon-size-75",
- "--spectrum-ui-icon-large-display",
- "--spectrum-ui-icon-medium-display",
- "--spectrum-workflow-icon-size-100",
- "--spectrum-workflow-icon-size-200",
- "--spectrum-workflow-icon-size-300",
- "--spectrum-workflow-icon-size-50",
- "--spectrum-workflow-icon-size-75",
- "--spectrum-workflow-icon-size-xxl",
- "--spectrum-workflow-icon-size-xxs"
- ],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-icon-inline-size": {
+ "value": "var(--mod-icon-size, var(--spectrum-icon-size))",
+ "description": "Used by `--spectrum-icon-inline-size`.
Defaults to `var(--mod-icon-size, var(--spectrum-icon-size))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-icon-size": {
+ "value": "var(--spectrum-icon-size)",
+ "description": "Used by `--spectrum-icon-inline-size`, `--spectrum-icon-block-size`.
Defaults to `var(--spectrum-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-icon-block-size": {
+ "value": "var(--mod-icon-size, var(--spectrum-icon-size))",
+ "description": "Used by `--spectrum-icon-block-size`.
Defaults to `var(--mod-icon-size, var(--spectrum-icon-size))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-icon-color": {
+ "description": "Used by `.spectrum-Icon, .spectrum-UIIcon`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-ui-icon-medium-display": {
+ "value": "var(--spectrum-ui-icon-medium-display, block)",
+ "description": "Used by `.spectrum-UIIcon--medium`.
Defaults to `var(--spectrum-ui-icon-medium-display, block)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-ui-icon-large-display": {
+ "value": "var(--spectrum-ui-icon-large-display, none)",
+ "description": "Used by `.spectrum-UIIcon--large`.
Defaults to `var(--spectrum-ui-icon-large-display, none)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-icon-inline-size": {
+ "description": "Defined in `.spectrum-Icon, .spectrum-UIIcon`.
Used by `.spectrum-Icon, .spectrum-UIIcon`, `.spectrum-Icon img, .spectrum-Icon svg`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-icon-size": {
+ "description": "Defined in `.spectrum-Icon`, `.spectrum-Icon--sizeXXS`, `.spectrum-Icon--sizeXS`, `.spectrum-Icon--sizeS`, `.spectrum-Icon--sizeL`, `.spectrum-Icon--sizeXL`, `.spectrum-Icon--sizeXXL`, `.spectrum-UIIcon-ChevronRight50`, `.spectrum-UIIcon-ChevronRight75`, `.spectrum-UIIcon-ChevronRight100`, `.spectrum-UIIcon-ChevronRight200`, `.spectrum-UIIcon-ChevronRight300`, `.spectrum-UIIcon-ChevronRight400`, `.spectrum-UIIcon-ChevronRight500`, `.spectrum-UIIcon-ChevronDown50`, `.spectrum-UIIcon-ChevronDown75`, `.spectrum-UIIcon-ChevronDown100`, `.spectrum-UIIcon-ChevronDown200`, `.spectrum-UIIcon-ChevronDown300`, `.spectrum-UIIcon-ChevronDown400`, `.spectrum-UIIcon-ChevronDown500`, `.spectrum-UIIcon-ChevronLeft50`, `.spectrum-UIIcon-ChevronLeft75`, `.spectrum-UIIcon-ChevronLeft100`, `.spectrum-UIIcon-ChevronLeft200`, `.spectrum-UIIcon-ChevronLeft300`, `.spectrum-UIIcon-ChevronLeft400`, `.spectrum-UIIcon-ChevronLeft500`, `.spectrum-UIIcon-ChevronUp50`, `.spectrum-UIIcon-ChevronUp75`, `.spectrum-UIIcon-ChevronUp100`, `.spectrum-UIIcon-ChevronUp200`, `.spectrum-UIIcon-ChevronUp300`, `.spectrum-UIIcon-ChevronUp400`, `.spectrum-UIIcon-ChevronUp500`, `.spectrum-UIIcon-ArrowRight75`, `.spectrum-UIIcon-ArrowRight100`, `.spectrum-UIIcon-ArrowRight200`, `.spectrum-UIIcon-ArrowRight300`, `.spectrum-UIIcon-ArrowRight400`, `.spectrum-UIIcon-ArrowRight500`, `.spectrum-UIIcon-ArrowRight600`, `.spectrum-UIIcon-ArrowDown75`, `.spectrum-UIIcon-ArrowDown100`, `.spectrum-UIIcon-ArrowDown200`, `.spectrum-UIIcon-ArrowDown300`, `.spectrum-UIIcon-ArrowDown400`, `.spectrum-UIIcon-ArrowDown500`, `.spectrum-UIIcon-ArrowDown600`, `.spectrum-UIIcon-ArrowLeft75`, `.spectrum-UIIcon-ArrowLeft100`, `.spectrum-UIIcon-ArrowLeft200`, `.spectrum-UIIcon-ArrowLeft300`, `.spectrum-UIIcon-ArrowLeft400`, `.spectrum-UIIcon-ArrowLeft500`, `.spectrum-UIIcon-ArrowLeft600`, `.spectrum-UIIcon-ArrowUp75`, `.spectrum-UIIcon-ArrowUp100`, `.spectrum-UIIcon-ArrowUp200`, `.spectrum-UIIcon-ArrowUp300`, `.spectrum-UIIcon-ArrowUp400`, `.spectrum-UIIcon-ArrowUp500`, `.spectrum-UIIcon-ArrowUp600`, `.spectrum-UIIcon-Checkmark50`, `.spectrum-UIIcon-Checkmark75`, `.spectrum-UIIcon-Checkmark100`, `.spectrum-UIIcon-Checkmark200`, `.spectrum-UIIcon-Checkmark300`, `.spectrum-UIIcon-Checkmark400`, `.spectrum-UIIcon-Checkmark500`, `.spectrum-UIIcon-Checkmark600`, `.spectrum-UIIcon-Dash50`, `.spectrum-UIIcon-Dash75`, `.spectrum-UIIcon-Dash100`, `.spectrum-UIIcon-Dash200`, `.spectrum-UIIcon-Dash300`, `.spectrum-UIIcon-Dash400`, `.spectrum-UIIcon-Dash500`, `.spectrum-UIIcon-Dash600`, `.spectrum-UIIcon-Cross75`, `.spectrum-UIIcon-Cross100`, `.spectrum-UIIcon-Cross200`, `.spectrum-UIIcon-Cross300`, `.spectrum-UIIcon-Cross400`, `.spectrum-UIIcon-Cross500`, `.spectrum-UIIcon-Cross600`, `.spectrum-UIIcon-CornerTriangle75`, `.spectrum-UIIcon-CornerTriangle100`, `.spectrum-UIIcon-CornerTriangle200`, `.spectrum-UIIcon-CornerTriangle300`, `.spectrum-UIIcon-Asterisk75`, `.spectrum-UIIcon-Asterisk100`, `.spectrum-UIIcon-Asterisk200`, `.spectrum-UIIcon-Asterisk300`.
Used by `--spectrum-icon-inline-size`, `--spectrum-icon-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-icon-block-size": {
+ "description": "Defined in `.spectrum-Icon, .spectrum-UIIcon`.
Used by `.spectrum-Icon, .spectrum-UIIcon`, `.spectrum-Icon img, .spectrum-Icon svg`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-xxs": {
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-50": {
+ "value": "14px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-75": {
+ "value": "16px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-200": {
+ "value": "22px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-300": {
+ "value": "26px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-xxl": {
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-ui-icon-medium-display": {
+ "description": "Used by `.spectrum-UIIcon--medium`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-ui-icon-large-display": {
+ "description": "Used by `.spectrum-UIIcon--large`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-chevron-icon-size-50": {
+ "value": "6px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-chevron-icon-size-75": {
+ "value": "10px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-chevron-icon-size-100": {
+ "value": "10px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-chevron-icon-size-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-chevron-icon-size-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-chevron-icon-size-400": {
+ "value": "16px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-chevron-icon-size-500": {
+ "value": "16px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-arrow-icon-size-75": {
+ "value": "10px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-arrow-icon-size-100": {
+ "value": "10px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-arrow-icon-size-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-arrow-icon-size-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-arrow-icon-size-400": {
+ "value": "16px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-arrow-icon-size-500": {
+ "value": "18px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-arrow-icon-size-600": {
+ "value": "20px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-checkmark-icon-size-50": {
+ "value": "10px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-checkmark-icon-size-75": {
+ "value": "10px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-checkmark-icon-size-100": {
+ "value": "10px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-checkmark-icon-size-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-checkmark-icon-size-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-checkmark-icon-size-400": {
+ "value": "16px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-checkmark-icon-size-500": {
+ "value": "16px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-checkmark-icon-size-600": {
+ "value": "18px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-dash-icon-size-50": {
+ "value": "8px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-dash-icon-size-75": {
+ "value": "8px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-dash-icon-size-100": {
+ "value": "10px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-dash-icon-size-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-dash-icon-size-300": {
+ "value": "12px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-dash-icon-size-400": {
+ "value": "14px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-dash-icon-size-500": {
+ "value": "16px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-dash-icon-size-600": {
+ "value": "18px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cross-icon-size-75": {
+ "value": "8px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cross-icon-size-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cross-icon-size-200": {
+ "value": "10px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cross-icon-size-300": {
+ "value": "12px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cross-icon-size-400": {
+ "value": "12px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cross-icon-size-500": {
+ "value": "14px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cross-icon-size-600": {
+ "value": "16px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-triangle-icon-size-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-triangle-icon-size-100": {
+ "value": "5px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-triangle-icon-size-200": {
+ "value": "6px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-triangle-icon-size-300": {
+ "value": "7px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-asterisk-icon-size-75": {
+ "value": "8px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-asterisk-icon-size-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-asterisk-icon-size-200": {
+ "value": "10px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-asterisk-icon-size-300": {
+ "value": "10px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/icon/stories/icon.stories.js b/components/icon/stories/icon.stories.js
index da5fc2cda00..3979a37e667 100644
--- a/components/icon/stories/icon.stories.js
+++ b/components/icon/stories/icon.stories.js
@@ -1,12 +1,14 @@
+import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { size } from "@spectrum-css/preview/types";
-import { Sizes } from "@spectrum-css/preview/decorators";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { IconGroup } from "./icon.test.js";
import { IconListTemplate, Template, UIDefaultTemplate } from "./template.js";
import { uiIconSizes, uiIconsWithDirections, workflowIcons } from "./utilities.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* Create a list of all UI Icons with their sizing numbers.
*
@@ -102,6 +104,7 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/illustratedmessage/dist/metadata.json b/components/illustratedmessage/dist/metadata.json
index 24de798ac33..1eae59915e0 100644
--- a/components/illustratedmessage/dist/metadata.json
+++ b/components/illustratedmessage/dist/metadata.json
@@ -10,76 +10,358 @@
".spectrum-IllustratedMessage:lang(ko)",
".spectrum-IllustratedMessage:lang(zh)"
],
- "modifiers": [
- "--mod-illustrated-message-content-maximum-width",
- "--mod-illustrated-message-description-color",
- "--mod-illustrated-message-description-font-family",
- "--mod-illustrated-message-description-font-size",
- "--mod-illustrated-message-description-font-style",
- "--mod-illustrated-message-description-font-weight",
- "--mod-illustrated-message-description-line-height",
- "--mod-illustrated-message-description-max-inline-size",
- "--mod-illustrated-message-description-pointer-events",
- "--mod-illustrated-message-description-position",
- "--mod-illustrated-message-description-z-index",
- "--mod-illustrated-message-display",
- "--mod-illustrated-message-heading-max-inline-size",
- "--mod-illustrated-message-heading-to-body",
- "--mod-illustrated-message-heading-to-description",
- "--mod-illustrated-message-illustration-accent-color",
- "--mod-illustrated-message-illustration-color",
- "--mod-illustrated-message-pointer-events",
- "--mod-illustrated-message-title-color",
- "--mod-illustrated-message-title-font-family",
- "--mod-illustrated-message-title-font-size",
- "--mod-illustrated-message-title-font-style",
- "--mod-illustrated-message-title-font-weight",
- "--mod-illustrated-message-title-line-height",
- "--mod-illustrated-message-title-to-heading"
- ],
- "component": [
- "--spectrum-illustrated-message-body-size",
- "--spectrum-illustrated-message-cjk-title-size",
- "--spectrum-illustrated-message-description-color",
- "--spectrum-illustrated-message-description-font-family",
- "--spectrum-illustrated-message-description-font-size",
- "--spectrum-illustrated-message-description-font-style",
- "--spectrum-illustrated-message-description-font-weight",
- "--spectrum-illustrated-message-description-line-height",
- "--spectrum-illustrated-message-description-max-inline-size",
- "--spectrum-illustrated-message-heading-max-inline-size",
- "--spectrum-illustrated-message-heading-to-description",
- "--spectrum-illustrated-message-illustration-accent-color",
- "--spectrum-illustrated-message-illustration-color",
- "--spectrum-illustrated-message-maximum-width",
- "--spectrum-illustrated-message-title-color",
- "--spectrum-illustrated-message-title-font-family",
- "--spectrum-illustrated-message-title-font-size",
- "--spectrum-illustrated-message-title-font-style",
- "--spectrum-illustrated-message-title-font-weight",
- "--spectrum-illustrated-message-title-line-height",
- "--spectrum-illustrated-message-title-size",
- "--spectrum-illustrated-message-title-to-heading"
- ],
- "global": [
- "--spectrum-accent-visual-color",
- "--spectrum-body-color",
- "--spectrum-body-line-height",
- "--spectrum-body-sans-serif-font-style",
- "--spectrum-body-sans-serif-font-weight",
- "--spectrum-heading-color",
- "--spectrum-heading-line-height",
- "--spectrum-heading-sans-serif-font-style",
- "--spectrum-heading-sans-serif-font-weight",
- "--spectrum-neutral-visual-color",
- "--spectrum-sans-font-family-stack",
- "--spectrum-spacing-400",
- "--spectrum-spacing-75"
- ],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-illustrated-message-illustration-accent-color",
- "--highcontrast-illustrated-message-illustration-color"
- ]
+ "modifiers": {
+ "mod-illustrated-message-display": {
+ "description": "Used by `.spectrum-IllustratedMessage`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-pointer-events": {
+ "description": "Used by `.spectrum-IllustratedMessage`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-content-maximum-width": {
+ "description": "Used by `.spectrum-IllustratedMessage`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-title-to-heading": {
+ "value": "var(--spectrum-illustrated-message-title-to-heading)",
+ "description": "Used by `.spectrum-IllustratedMessage-illustration`.
Defaults to `var(--spectrum-illustrated-message-title-to-heading)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-illustration-color": {
+ "value": "var(--spectrum-illustrated-message-illustration-color)",
+ "description": "Used by `.spectrum-IllustratedMessage-illustration`.
Defaults to `var(--spectrum-illustrated-message-illustration-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-illustration-accent-color": {
+ "value": "var(--spectrum-illustrated-message-illustration-accent-color)",
+ "description": "Used by `.spectrum-IllustratedMessage-accent`.
Defaults to `var(--spectrum-illustrated-message-illustration-accent-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-title-font-family": {
+ "value": "var(--spectrum-illustrated-message-title-font-family)",
+ "description": "Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-illustrated-message-title-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-title-font-weight": {
+ "value": "var(--spectrum-illustrated-message-title-font-weight)",
+ "description": "Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-illustrated-message-title-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-title-font-style": {
+ "value": "var(--spectrum-illustrated-message-title-font-style)",
+ "description": "Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-illustrated-message-title-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-title-font-size": {
+ "value": "var(--spectrum-illustrated-message-title-font-size)",
+ "description": "Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-illustrated-message-title-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-title-line-height": {
+ "value": "var(--spectrum-illustrated-message-title-line-height)",
+ "description": "Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-illustrated-message-title-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-title-color": {
+ "value": "var(--spectrum-illustrated-message-title-color)",
+ "description": "Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-illustrated-message-title-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-heading-max-inline-size": {
+ "value": "var(--spectrum-illustrated-message-heading-max-inline-size)",
+ "description": "Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-illustrated-message-heading-max-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-heading-to-body": {
+ "description": "Used by `.spectrum-IllustratedMessage-heading`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-description-position": {
+ "description": "Used by `.spectrum-IllustratedMessage-description`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-description-z-index": {
+ "description": "Used by `.spectrum-IllustratedMessage-description`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-description-pointer-events": {
+ "description": "Used by `.spectrum-IllustratedMessage-description`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-description-font-family": {
+ "value": "var(--spectrum-illustrated-message-description-font-family)",
+ "description": "Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-illustrated-message-description-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-description-font-weight": {
+ "value": "var(--spectrum-illustrated-message-description-font-weight)",
+ "description": "Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-illustrated-message-description-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-description-font-style": {
+ "value": "var(--spectrum-illustrated-message-description-font-style)",
+ "description": "Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-illustrated-message-description-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-description-font-size": {
+ "value": "var(--spectrum-illustrated-message-description-font-size)",
+ "description": "Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-illustrated-message-description-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-description-line-height": {
+ "value": "var(--spectrum-illustrated-message-description-line-height)",
+ "description": "Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-illustrated-message-description-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-description-color": {
+ "value": "var(--spectrum-illustrated-message-description-color)",
+ "description": "Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-illustrated-message-description-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-description-max-inline-size": {
+ "value": "var(--spectrum-illustrated-message-description-max-inline-size)",
+ "description": "Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-illustrated-message-description-max-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-heading-to-description": {
+ "value": "var(--spectrum-illustrated-message-heading-to-description)",
+ "description": "Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-illustrated-message-heading-to-description)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-illustrated-message-description-max-inline-size": {
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-description`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-maximum-width": {
+ "value": "380px",
+ "description": "Used by `--spectrum-illustrated-message-description-max-inline-size`, `--spectrum-illustrated-message-heading-max-inline-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-heading-max-inline-size": {
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-title-to-heading": {
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-illustration`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-heading-to-description": {
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-description`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-illustration-color": {
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-illustration`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-illustration-accent-color": {
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-accent`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-title-font-family": {
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-title-font-weight": {
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-title-font-style": {
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-title-font-size": {
+ "description": "Defined in `.spectrum-IllustratedMessage`, `.spectrum-IllustratedMessage:lang(ja), .spectrum-IllustratedMessage:lang(ko), .spectrum-IllustratedMessage:lang(zh)`.
Used by `.spectrum-IllustratedMessage-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-title-size": {
+ "value": "var(--spectrum-heading-size-s)",
+ "description": "Used by `--spectrum-illustrated-message-title-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-title-line-height": {
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-title-color": {
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-heading`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-description-font-family": {
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-description`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-description-font-weight": {
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-description`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-description-font-style": {
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-description`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-description-font-size": {
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-description`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-body-size": {
+ "value": "var(--spectrum-body-size-xs)",
+ "description": "Used by `--spectrum-illustrated-message-description-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-description-line-height": {
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-description`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-description-color": {
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-description`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-cjk-title-size": {
+ "value": "var(--spectrum-heading-cjk-size-s)",
+ "description": "Used by `--spectrum-illustrated-message-title-font-size`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-spacing-400": {
+ "value": "24px",
+ "description": "Used by `--spectrum-illustrated-message-title-to-heading`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-illustrated-message-heading-to-description`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-visual-color": {
+ "value": "var(--spectrum-gray-600)",
+ "description": "Used by `--spectrum-illustrated-message-illustration-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-visual-color": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--spectrum-illustrated-message-illustration-accent-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-illustrated-message-title-font-family`, `--spectrum-illustrated-message-description-font-family`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-sans-serif-font-weight": {
+ "value": "700",
+ "description": "Used by `--spectrum-illustrated-message-title-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-sans-serif-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-illustrated-message-title-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-line-height": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-illustrated-message-title-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-color": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-illustrated-message-title-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-body-sans-serif-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-illustrated-message-description-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-sans-serif-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-illustrated-message-description-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-line-height": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-illustrated-message-description-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-illustrated-message-description-color`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-illustrated-message-illustration-color": {
+ "value": "var(--mod-illustrated-message-illustration-color, var(--spectrum-illustrated-message-illustration-color))",
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-illustration`.
Defaults to `var(--mod-illustrated-message-illustration-color, var(--spectrum-illustrated-message-illustration-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-illustrated-message-illustration-accent-color": {
+ "value": "var(--mod-illustrated-message-illustration-accent-color, var(--spectrum-illustrated-message-illustration-accent-color))",
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-accent`.
Defaults to `var(--mod-illustrated-message-illustration-accent-color, var(--spectrum-illustrated-message-illustration-accent-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/illustratedmessage/stories/illustratedmessage.stories.js b/components/illustratedmessage/stories/illustratedmessage.stories.js
index 2b00b063d31..eab2a41a78b 100644
--- a/components/illustratedmessage/stories/illustratedmessage.stories.js
+++ b/components/illustratedmessage/stories/illustratedmessage.stories.js
@@ -1,11 +1,13 @@
import { Template as Link } from "@spectrum-css/link/stories/template.js";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { html } from "lit";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { IllustratedMessageGroup } from "./illustratedmessage.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The Illustrated Message displays an illustration along with a heading and description. Optionally, part of the illustration can use an accent color. It can be used for status and errors, or as a call to action. For example, the Drop Zone component makes use of Illustrated Message as an area to drag and drop files.
*/
@@ -50,6 +52,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/infieldbutton/dist/metadata.json b/components/infieldbutton/dist/metadata.json
index 563089a4065..485a2087540 100644
--- a/components/infieldbutton/dist/metadata.json
+++ b/components/infieldbutton/dist/metadata.json
@@ -8,6 +8,13 @@
".spectrum-InfieldButton--top .spectrum-InfieldButton-fill",
".spectrum-InfieldButton-fill",
".spectrum-InfieldButton-icon",
+ ".spectrum-InfieldButton:active",
+ ".spectrum-InfieldButton:disabled",
+ ".spectrum-InfieldButton:focus-visible",
+ ".spectrum-InfieldButton:hover",
+ ".spectrum-InfieldButton:not(:disabled):active",
+ ".spectrum-InfieldButton:not(:disabled):focus-visible",
+ ".spectrum-InfieldButton:not(:disabled):hover",
".spectrum-InfieldButton.spectrum-InfieldButton--bottom",
".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeL",
".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeS",
@@ -20,140 +27,654 @@
".spectrum-InfieldButton.spectrum-InfieldButton--top",
".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeL",
".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeS",
- ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeXL",
- ".spectrum-InfieldButton:active",
- ".spectrum-InfieldButton:disabled",
- ".spectrum-InfieldButton:focus-visible",
- ".spectrum-InfieldButton:hover",
- ".spectrum-InfieldButton:not(:disabled):active",
- ".spectrum-InfieldButton:not(:disabled):focus-visible",
- ".spectrum-InfieldButton:not(:disabled):hover"
- ],
- "modifiers": [
- "--mod-infield-border-color",
- "--mod-infield-border-color-quiet",
- "--mod-infield-button-background-color",
- "--mod-infield-button-background-color-disabled",
- "--mod-infield-button-background-color-down",
- "--mod-infield-button-background-color-down-disabled",
- "--mod-infield-button-background-color-down-quiet",
- "--mod-infield-button-background-color-hover",
- "--mod-infield-button-background-color-hover-disabled",
- "--mod-infield-button-background-color-hover-quiet",
- "--mod-infield-button-background-color-key-focus",
- "--mod-infield-button-background-color-key-focus-quiet",
- "--mod-infield-button-background-color-quiet",
- "--mod-infield-button-background-color-quiet-disabled",
- "--mod-infield-button-border-color",
- "--mod-infield-button-border-color-disabled",
- "--mod-infield-button-border-color-quiet-disabled",
- "--mod-infield-button-border-radius",
- "--mod-infield-button-border-radius-reset",
- "--mod-infield-button-border-width",
- "--mod-infield-button-border-width-quiet",
- "--mod-infield-button-edge-to-fill",
- "--mod-infield-button-fill-justify-content",
- "--mod-infield-button-fill-padding",
- "--mod-infield-button-height",
- "--mod-infield-button-icon-color",
- "--mod-infield-button-icon-color-disabled",
- "--mod-infield-button-icon-color-down",
- "--mod-infield-button-icon-color-down-disabled",
- "--mod-infield-button-icon-color-hover",
- "--mod-infield-button-icon-color-hover-disabled",
- "--mod-infield-button-icon-color-key-focus",
- "--mod-infield-button-icon-color-key-focus-disabled",
- "--mod-infield-button-inner-edge-to-fill",
- "--mod-infield-button-stacked-border-radius-reset",
- "--mod-infield-button-stacked-bottom-border-block-end-width",
- "--mod-infield-button-stacked-bottom-border-radius-end-end",
- "--mod-infield-button-stacked-bottom-border-radius-end-start",
- "--mod-infield-button-stacked-fill-padding-inline",
- "--mod-infield-button-stacked-fill-padding-inner",
- "--mod-infield-button-stacked-fill-padding-outer",
- "--mod-infield-button-stacked-top-border-radius-start-start",
- "--mod-infield-button-width",
- "--mod-infield-button-width-stacked"
- ],
- "component": [
- "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large",
- "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large",
- "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium",
- "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small",
- "--spectrum-in-field-button-edge-to-fill",
- "--spectrum-in-field-button-fill-stacked-inner-border-rounding",
- "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large",
- "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large",
- "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium",
- "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small",
- "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large",
- "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large",
- "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium",
- "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small",
- "--spectrum-in-field-button-stacked-inner-edge-to-fill",
- "--spectrum-in-field-button-width-stacked-extra-large",
- "--spectrum-in-field-button-width-stacked-large",
- "--spectrum-in-field-button-width-stacked-medium",
- "--spectrum-in-field-button-width-stacked-small",
- "--spectrum-infield-button-background-color",
- "--spectrum-infield-button-background-color-down",
- "--spectrum-infield-button-background-color-hover",
- "--spectrum-infield-button-background-color-key-focus",
- "--spectrum-infield-button-border-color",
- "--spectrum-infield-button-border-radius",
- "--spectrum-infield-button-border-radius-reset",
- "--spectrum-infield-button-border-width",
- "--spectrum-infield-button-edge-to-fill",
- "--spectrum-infield-button-fill-justify-content",
- "--spectrum-infield-button-fill-padding",
- "--spectrum-infield-button-height",
- "--spectrum-infield-button-icon-color",
- "--spectrum-infield-button-icon-color-down",
- "--spectrum-infield-button-icon-color-hover",
- "--spectrum-infield-button-icon-color-key-focus",
- "--spectrum-infield-button-inner-edge-to-fill",
- "--spectrum-infield-button-stacked-border-radius-reset",
- "--spectrum-infield-button-stacked-bottom-border-radius-end-start",
- "--spectrum-infield-button-stacked-fill-padding-inline",
- "--spectrum-infield-button-stacked-fill-padding-inner",
- "--spectrum-infield-button-stacked-fill-padding-outer",
- "--spectrum-infield-button-stacked-top-border-radius-start-start",
- "--spectrum-infield-button-width"
- ],
- "global": [
- "--spectrum-animation-duration-100",
- "--spectrum-border-width-100",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-75",
- "--spectrum-corner-radius-100",
- "--spectrum-disabled-background-color",
- "--spectrum-disabled-content-color",
- "--spectrum-gray-100",
- "--spectrum-gray-200",
- "--spectrum-gray-300",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-down",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-neutral-content-color-key-focus"
- ],
- "system-theme": [
- "--system-infield-button-background-color",
- "--system-infield-button-background-color-down",
- "--system-infield-button-background-color-hover",
- "--system-infield-button-background-color-key-focus",
- "--system-infield-button-border-color",
- "--system-infield-button-border-radius",
- "--system-infield-button-border-radius-reset",
- "--system-infield-button-border-width",
- "--system-infield-button-disabled-border-color",
- "--system-infield-button-stacked-bottom-border-radius-end-start",
- "--system-infield-button-stacked-top-border-radius-start-start"
+ ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeXL"
],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-infield-button-border-color",
- "--highcontrast-infield-button-border-color-active"
- ]
+ "modifiers": {
+ "mod-infield-button-background-color": {
+ "value": "var(--spectrum-infield-button-background-color)",
+ "description": "Defined in `.spectrum-InfieldButton:disabled`, `.spectrum-InfieldButton.spectrum-InfieldButton--quiet`, `.spectrum-InfieldButton.spectrum-InfieldButton--quiet:disabled`, `.spectrum-InfieldButton:hover`, `.spectrum-InfieldButton:active`, `.spectrum-InfieldButton:focus-visible`.
Used by `.spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-background-color-disabled": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--mod-infield-button-background-color`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-background-color-hover": {
+ "value": "var(--spectrum-infield-button-background-color-hover)",
+ "description": "Defined in `.spectrum-InfieldButton:disabled`, `.spectrum-InfieldButton.spectrum-InfieldButton--quiet`.
Used by `--mod-infield-button-background-color`.
Defaults to `var(--spectrum-infield-button-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-background-color-hover-disabled": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--mod-infield-button-background-color-hover`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-background-color-down": {
+ "value": "var(--spectrum-infield-button-background-color-down)",
+ "description": "Defined in `.spectrum-InfieldButton:disabled`, `.spectrum-InfieldButton.spectrum-InfieldButton--quiet`.
Used by `--mod-infield-button-background-color`.
Defaults to `var(--spectrum-infield-button-background-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-background-color-down-disabled": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--mod-infield-button-background-color-down`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-border-color": {
+ "value": "var(--spectrum-infield-button-border-color)",
+ "description": "Defined in `.spectrum-InfieldButton:disabled`, `.spectrum-InfieldButton.spectrum-InfieldButton--quiet:disabled`.
Used by `.spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-border-color-disabled": {
+ "value": "var(--spectrum-infield-button-border-color)",
+ "description": "Used by `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-infield-button-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-icon-color": {
+ "value": "var(--spectrum-infield-button-icon-color)",
+ "description": "Defined in `.spectrum-InfieldButton:disabled`, `.spectrum-InfieldButton:hover`, `.spectrum-InfieldButton:active`, `.spectrum-InfieldButton:focus-visible`.
Used by `.spectrum-InfieldButton-icon`.
Defaults to `var(--spectrum-infield-button-icon-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-icon-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--mod-infield-button-icon-color`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-icon-color-hover": {
+ "value": "var(--spectrum-infield-button-icon-color-hover)",
+ "description": "Defined in `.spectrum-InfieldButton:disabled`.
Used by `--mod-infield-button-icon-color`.
Defaults to `var(--spectrum-infield-button-icon-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-icon-color-hover-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--mod-infield-button-icon-color-hover`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-icon-color-down": {
+ "value": "var(--spectrum-infield-button-icon-color-down)",
+ "description": "Defined in `.spectrum-InfieldButton:disabled`.
Used by `--mod-infield-button-icon-color`.
Defaults to `var(--spectrum-infield-button-icon-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-icon-color-down-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--mod-infield-button-icon-color-down`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-icon-color-key-focus": {
+ "value": "var(--spectrum-infield-button-icon-color-key-focus)",
+ "description": "Defined in `.spectrum-InfieldButton:disabled`.
Used by `--mod-infield-button-icon-color`.
Defaults to `var(--spectrum-infield-button-icon-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-icon-color-key-focus-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--mod-infield-button-icon-color-key-focus`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-width": {
+ "value": "var(--spectrum-infield-button-width)",
+ "description": "Defined in `.spectrum-InfieldButton.spectrum-InfieldButton--bottom, .spectrum-InfieldButton.spectrum-InfieldButton--top`, `.spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeS, .spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeL, .spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeXL, .spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeXL`.
Used by `.spectrum-InfieldButton`.
Defaults to `var(--spectrum-infield-button-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-width-stacked": {
+ "value": "44px",
+ "description": "Used by `--mod-infield-button-width`.
Defaults to `var(--spectrum-in-field-button-width-stacked-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-background-color-quiet": {
+ "description": "Used by `--mod-infield-button-background-color`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-background-color-hover-quiet": {
+ "description": "Used by `--mod-infield-button-background-color-hover`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-background-color-down-quiet": {
+ "description": "Used by `--mod-infield-button-background-color-down`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-background-color-key-focus": {
+ "value": "var(--spectrum-infield-button-background-color-key-focus)",
+ "description": "Defined in `.spectrum-InfieldButton.spectrum-InfieldButton--quiet`.
Used by `--mod-infield-button-background-color`.
Defaults to `var(--spectrum-infield-button-background-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-background-color-key-focus-quiet": {
+ "description": "Used by `--mod-infield-button-background-color-key-focus`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-border-color": {
+ "description": "Defined in `.spectrum-InfieldButton.spectrum-InfieldButton--quiet`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-border-color-quiet": {
+ "description": "Used by `--mod-infield-border-color`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-border-width": {
+ "value": "var(--spectrum-infield-button-border-width)",
+ "description": "Defined in `.spectrum-InfieldButton.spectrum-InfieldButton--quiet`.
Used by `.spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill, .spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-border-width-quiet": {
+ "description": "Used by `--mod-infield-button-border-width`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-background-color-quiet-disabled": {
+ "description": "Used by `--mod-infield-button-background-color`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-border-color-quiet-disabled": {
+ "description": "Used by `--mod-infield-button-border-color`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-height": {
+ "value": "var(--spectrum-infield-button-height)",
+ "description": "Used by `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--bottom, .spectrum-InfieldButton.spectrum-InfieldButton--top`.
Defaults to `var(--spectrum-infield-button-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-edge-to-fill": {
+ "value": "var(--spectrum-infield-button-edge-to-fill)",
+ "description": "Used by `.spectrum-InfieldButton`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill, .spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-edge-to-fill)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-inner-edge-to-fill": {
+ "value": "var(--spectrum-infield-button-inner-edge-to-fill)",
+ "description": "Used by `.spectrum-InfieldButton.spectrum-InfieldButton--top`, `.spectrum-InfieldButton.spectrum-InfieldButton--bottom`, `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-inner-edge-to-fill)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-border-radius": {
+ "value": "var(--spectrum-infield-button-border-radius)",
+ "description": "Used by `.spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-fill-padding": {
+ "value": "var(--spectrum-infield-button-fill-padding)",
+ "description": "Used by `.spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-fill-padding)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-fill-justify-content": {
+ "value": "var(--spectrum-infield-button-fill-justify-content)",
+ "description": "Used by `.spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-fill-justify-content)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-border-radius-reset": {
+ "value": "var(--spectrum-infield-button-border-radius-reset)",
+ "description": "Used by `.spectrum-InfieldButton--right .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--left .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-border-radius-reset)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-stacked-fill-padding-inline": {
+ "value": "var(--spectrum-infield-button-stacked-fill-padding-inline)",
+ "description": "Used by `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill, .spectrum-InfieldButton--top .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-stacked-fill-padding-inline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-stacked-fill-padding-outer": {
+ "value": "var(--spectrum-infield-button-stacked-fill-padding-outer)",
+ "description": "Used by `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-stacked-fill-padding-outer)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-stacked-fill-padding-inner": {
+ "value": "var(--spectrum-infield-button-stacked-fill-padding-inner)",
+ "description": "Used by `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-stacked-fill-padding-inner)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-stacked-top-border-radius-start-start": {
+ "value": "var(--spectrum-infield-button-stacked-top-border-radius-start-start)",
+ "description": "Used by `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-stacked-top-border-radius-start-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-stacked-border-radius-reset": {
+ "value": "var(--spectrum-infield-button-stacked-border-radius-reset)",
+ "description": "Used by `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-stacked-border-radius-reset)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-stacked-bottom-border-radius-end-start": {
+ "value": "var(--spectrum-infield-button-stacked-bottom-border-radius-end-start)",
+ "description": "Used by `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-stacked-bottom-border-radius-end-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-stacked-bottom-border-radius-end-end": {
+ "value": "var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius))",
+ "description": "Used by `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.
Defaults to `var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-stacked-bottom-border-block-end-width": {
+ "value": "var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))",
+ "description": "Used by `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.
Defaults to `var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-infield-button-height": {
+ "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`.
Used by `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--bottom, .spectrum-InfieldButton.spectrum-InfieldButton--top`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-width": {
+ "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`.
Used by `.spectrum-InfieldButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-stacked-border-radius-reset": {
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-fill-stacked-inner-border-rounding": {
+ "value": "0px",
+ "description": "Used by `--spectrum-infield-button-stacked-border-radius-reset`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-edge-to-fill": {
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill, .spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-edge-to-fill": {
+ "value": "0px",
+ "description": "Used by `--spectrum-infield-button-edge-to-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-inner-edge-to-fill": {
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton.spectrum-InfieldButton--top`, `.spectrum-InfieldButton.spectrum-InfieldButton--bottom`, `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-stacked-inner-edge-to-fill": {
+ "value": "0px",
+ "description": "Used by `--spectrum-infield-button-inner-edge-to-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-fill-padding": {
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-stacked-fill-padding-inline": {
+ "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`.
Used by `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill, .spectrum-InfieldButton--top .spectrum-InfieldButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium": {
+ "value": "9px",
+ "description": "Used by `--spectrum-infield-button-stacked-fill-padding-inline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-stacked-fill-padding-outer": {
+ "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`.
Used by `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium": {
+ "value": "3px",
+ "description": "Used by `--spectrum-infield-button-stacked-fill-padding-outer`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-stacked-fill-padding-inner": {
+ "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`.
Used by `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium": {
+ "value": "3px",
+ "description": "Used by `--spectrum-infield-button-stacked-fill-padding-inner`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-icon-color": {
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton-icon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-infield-button-icon-color-hover": {
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `--mod-infield-button-icon-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-infield-button-icon-color-down": {
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `--mod-infield-button-icon-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-infield-button-icon-color-key-focus": {
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `--mod-infield-button-icon-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-infield-button-fill-justify-content": {
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-border-color": {
+ "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton:disabled`.
Used by `--mod-infield-button-border-color`, `.spectrum-InfieldButton-fill`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-edge-to-disclosure-icon-stacked-small": {
+ "value": "7px",
+ "description": "Used by `--spectrum-infield-button-stacked-fill-padding-inline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small": {
+ "value": "3px",
+ "description": "Used by `--spectrum-infield-button-stacked-fill-padding-outer`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small": {
+ "value": "3px",
+ "description": "Used by `--spectrum-infield-button-stacked-fill-padding-inner`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-edge-to-disclosure-icon-stacked-large": {
+ "value": "13px",
+ "description": "Used by `--spectrum-infield-button-stacked-fill-padding-inline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large": {
+ "value": "4px",
+ "description": "Used by `--spectrum-infield-button-stacked-fill-padding-outer`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large": {
+ "value": "4px",
+ "description": "Used by `--spectrum-infield-button-stacked-fill-padding-inner`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large": {
+ "value": "16px",
+ "description": "Used by `--spectrum-infield-button-stacked-fill-padding-inline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large": {
+ "value": "5px",
+ "description": "Used by `--spectrum-infield-button-stacked-fill-padding-outer`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large": {
+ "value": "5px",
+ "description": "Used by `--spectrum-infield-button-stacked-fill-padding-inner`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-width-stacked-medium": {
+ "value": "28px",
+ "description": "Used by `--mod-infield-button-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-width-stacked-small": {
+ "value": "20px",
+ "description": "Used by `--mod-infield-button-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-width-stacked-large": {
+ "value": "36px",
+ "description": "Used by `--mod-infield-button-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-width-stacked-extra-large": {
+ "value": "44px",
+ "description": "Used by `--mod-infield-button-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-background-color-hover": {
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `--mod-infield-button-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-infield-button-background-color-down": {
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `--mod-infield-button-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-infield-button-background-color-key-focus": {
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `--mod-infield-button-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-infield-button-background-color": {
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton-fill`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-infield-button-border-width": {
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill, .spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-border-radius": {
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-border-radius-reset": {
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton--right .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--left .spectrum-InfieldButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-stacked-top-border-radius-start-start": {
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-stacked-bottom-border-radius-end-start": {
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--system-infield-button-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--system-infield-button-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--system-infield-button-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--system-infield-button-background-color-hover`, `--system-infield-button-background-color-down`, `--system-infield-button-background-color-key-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-300": {
+ "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+ "description": "Used by `--system-infield-button-disabled-border-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-infield-button-height`, `--spectrum-infield-button-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-infield-button-icon-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-infield-button-icon-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-infield-button-icon-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-infield-button-icon-color-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-background-color": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--mod-infield-button-background-color`, `--mod-infield-button-background-color-hover`, `--mod-infield-button-background-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--mod-infield-button-icon-color`, `--mod-infield-button-icon-color-hover`, `--mod-infield-button-icon-color-down`, `--mod-infield-button-icon-color-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-infield-button-height`, `--spectrum-infield-button-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-infield-button-height`, `--spectrum-infield-button-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-infield-button-height`, `--spectrum-infield-button-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `.spectrum-InfieldButton-fill`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-infield-button-border-width": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-infield-button-border-width`.",
+ "control": "text"
+ },
+ "system-infield-button-border-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-infield-button-border-color`.",
+ "control": "color"
+ },
+ "system-infield-button-border-radius": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-infield-button-border-radius`.",
+ "control": "text"
+ },
+ "system-infield-button-border-radius-reset": {
+ "description": "Defined in `.spectrum`.
Used by `--system-infield-button-stacked-top-border-radius-start-start`, `--system-infield-button-stacked-bottom-border-radius-end-start`, `--spectrum-infield-button-border-radius-reset`.",
+ "control": "text"
+ },
+ "system-infield-button-stacked-top-border-radius-start-start": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-infield-button-stacked-top-border-radius-start-start`.",
+ "control": "text"
+ },
+ "system-infield-button-stacked-bottom-border-radius-end-start": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-infield-button-stacked-bottom-border-radius-end-start`.",
+ "control": "text"
+ },
+ "system-infield-button-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-infield-button-background-color`.",
+ "control": "color"
+ },
+ "system-infield-button-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-infield-button-background-color-hover`.",
+ "control": "color"
+ },
+ "system-infield-button-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-infield-button-background-color-down`.",
+ "control": "color"
+ },
+ "system-infield-button-background-color-key-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-infield-button-background-color-key-focus`.",
+ "control": "color"
+ },
+ "system-infield-button-disabled-border-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-infield-button-border-color`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-infield-button-border-color": {
+ "value": "var(--mod-infield-button-border-color, var(--spectrum-infield-button-border-color))",
+ "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton:disabled`, `.spectrum-InfieldButton:not(:disabled):active, .spectrum-InfieldButton:not(:disabled):focus-visible`, `.spectrum-InfieldButton:not(:disabled):hover`.
Used by `.spectrum-InfieldButton-fill`.
Defaults to `var(--mod-infield-button-border-color, var(--spectrum-infield-button-border-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-infield-button-border-color-active": {
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `--highcontrast-infield-button-border-color`.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/infieldbutton/stories/infieldbutton.stories.js b/components/infieldbutton/stories/infieldbutton.stories.js
index 0f435313795..8734c63f3e9 100644
--- a/components/infieldbutton/stories/infieldbutton.stories.js
+++ b/components/infieldbutton/stories/infieldbutton.stories.js
@@ -1,11 +1,13 @@
import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isActive, isDisabled, isFocused, isHovered, isQuiet, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { InfieldButtonGroup } from "./infieldbutton.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The in-field button component is a button used inside a text field.
*/
@@ -50,6 +52,7 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json
index 935c89f08a3..c723bd6910f 100644
--- a/components/inlinealert/dist/metadata.json
+++ b/components/inlinealert/dist/metadata.json
@@ -16,94 +16,463 @@
".spectrum-InLineAlert-header",
".spectrum-InLineAlert-icon"
],
- "modifiers": [
- "--mod-inlinealert-background-color",
- "--mod-inlinealert-border-and-icon-color",
- "--mod-inlinealert-border-and-icon-color-info",
- "--mod-inlinealert-border-and-icon-color-negative",
- "--mod-inlinealert-border-and-icon-color-notice",
- "--mod-inlinealert-border-and-icon-color-positive",
- "--mod-inlinealert-border-radius",
- "--mod-inlinealert-border-width",
- "--mod-inlinealert-content-color",
- "--mod-inlinealert-content-font-family",
- "--mod-inlinealert-content-font-size",
- "--mod-inlinealert-content-font-style",
- "--mod-inlinealert-content-font-weight",
- "--mod-inlinealert-content-line-height",
- "--mod-inlinealert-header-color",
- "--mod-inlinealert-header-min-block-size",
- "--mod-inlinealert-heading-font-family",
- "--mod-inlinealert-heading-font-size",
- "--mod-inlinealert-heading-font-style",
- "--mod-inlinealert-heading-font-weight",
- "--mod-inlinealert-heading-line-height",
- "--mod-inlinealert-icon-size",
- "--mod-inlinealert-min-inline-size",
- "--mod-inlinealert-spacing-edge-to-text",
- "--mod-inlinealert-spacing-header-content-button",
- "--mod-inlinealert-spacing-header-to-icon"
- ],
- "component": [
- "--spectrum-in-line-alert-minimum-width",
- "--spectrum-inlinealert-background-color",
- "--spectrum-inlinealert-border-and-icon-color",
- "--spectrum-inlinealert-border-and-icon-color-info",
- "--spectrum-inlinealert-border-and-icon-color-negative",
- "--spectrum-inlinealert-border-and-icon-color-notice",
- "--spectrum-inlinealert-border-and-icon-color-positive",
- "--spectrum-inlinealert-border-radius",
- "--spectrum-inlinealert-border-width",
- "--spectrum-inlinealert-content-color",
- "--spectrum-inlinealert-content-font-family",
- "--spectrum-inlinealert-content-font-size",
- "--spectrum-inlinealert-content-font-style",
- "--spectrum-inlinealert-content-font-weight",
- "--spectrum-inlinealert-content-line-height",
- "--spectrum-inlinealert-header-color",
- "--spectrum-inlinealert-header-min-block-size",
- "--spectrum-inlinealert-heading-font-family",
- "--spectrum-inlinealert-heading-font-size",
- "--spectrum-inlinealert-heading-font-style",
- "--spectrum-inlinealert-heading-font-weight",
- "--spectrum-inlinealert-heading-line-height",
- "--spectrum-inlinealert-icon-size",
- "--spectrum-inlinealert-min-inline-size",
- "--spectrum-inlinealert-spacing-edge-to-text",
- "--spectrum-inlinealert-spacing-header-content-button",
- "--spectrum-inlinealert-spacing-header-to-icon"
- ],
- "global": [
- "--spectrum-background-layer-2-color",
- "--spectrum-body-color",
- "--spectrum-body-line-height",
- "--spectrum-body-sans-serif-font-style",
- "--spectrum-body-sans-serif-font-weight",
- "--spectrum-body-size-s",
- "--spectrum-border-width-200",
- "--spectrum-component-height-50",
- "--spectrum-corner-radius-100",
- "--spectrum-heading-color",
- "--spectrum-heading-line-height",
- "--spectrum-heading-sans-serif-font-style",
- "--spectrum-heading-sans-serif-font-weight",
- "--spectrum-heading-size-xxs",
- "--spectrum-informative-visual-color",
- "--spectrum-negative-visual-color",
- "--spectrum-neutral-visual-color",
- "--spectrum-notice-visual-color",
- "--spectrum-positive-visual-color",
- "--spectrum-sans-font-family-stack",
- "--spectrum-spacing-300",
- "--spectrum-spacing-400",
- "--spectrum-workflow-icon-size-100"
- ],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-inlinealert-background-color",
- "--highcontrast-inlinealert-border-and-icon-color",
- "--highcontrast-inlinealert-content-color",
- "--highcontrast-inlinealert-header-color"
- ]
+ "modifiers": {
+ "mod-inlinealert-min-inline-size": {
+ "value": "var(--spectrum-inlinealert-min-inline-size)",
+ "description": "Used by `.spectrum-InLineAlert`.
Defaults to `var(--spectrum-inlinealert-min-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-spacing-edge-to-text": {
+ "value": "var(--spectrum-inlinealert-spacing-edge-to-text)",
+ "description": "Used by `.spectrum-InLineAlert`.
Defaults to `var(--spectrum-inlinealert-spacing-edge-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-border-width": {
+ "value": "var(--spectrum-inlinealert-border-width)",
+ "description": "Used by `.spectrum-InLineAlert`.
Defaults to `var(--spectrum-inlinealert-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-border-radius": {
+ "value": "var(--spectrum-inlinealert-border-radius)",
+ "description": "Used by `.spectrum-InLineAlert`.
Defaults to `var(--spectrum-inlinealert-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-background-color": {
+ "value": "var(--spectrum-inlinealert-background-color)",
+ "description": "Used by `.spectrum-InLineAlert`.
Defaults to `var(--spectrum-inlinealert-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-border-and-icon-color": {
+ "value": "var(--spectrum-inlinealert-border-and-icon-color)",
+ "description": "Used by `.spectrum-InLineAlert`.
Defaults to `var(--spectrum-inlinealert-border-and-icon-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-icon-size": {
+ "value": "var(--spectrum-inlinealert-icon-size)",
+ "description": "Used by `.spectrum-InLineAlert-icon`.
Defaults to `var(--spectrum-inlinealert-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-spacing-header-to-icon": {
+ "value": "var(--spectrum-inlinealert-spacing-header-to-icon)",
+ "description": "Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-inlinealert-spacing-header-to-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-heading-font-weight": {
+ "value": "var(--spectrum-inlinealert-heading-font-weight)",
+ "description": "Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-inlinealert-heading-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-heading-font-family": {
+ "value": "var(--spectrum-inlinealert-heading-font-family)",
+ "description": "Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-inlinealert-heading-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-heading-font-style": {
+ "value": "var(--spectrum-inlinealert-heading-font-style)",
+ "description": "Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-inlinealert-heading-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-heading-font-size": {
+ "value": "var(--spectrum-inlinealert-heading-font-size)",
+ "description": "Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-inlinealert-heading-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-heading-line-height": {
+ "value": "var(--spectrum-inlinealert-heading-line-height)",
+ "description": "Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-inlinealert-heading-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-header-min-block-size": {
+ "value": "var(--spectrum-inlinealert-header-min-block-size)",
+ "description": "Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-inlinealert-header-min-block-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-header-color": {
+ "value": "var(--spectrum-inlinealert-header-color)",
+ "description": "Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-inlinealert-header-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-content-font-weight": {
+ "value": "var(--spectrum-inlinealert-content-font-weight)",
+ "description": "Used by `.spectrum-InLineAlert-content`.
Defaults to `var(--spectrum-inlinealert-content-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-content-font-family": {
+ "value": "var(--spectrum-inlinealert-content-font-family)",
+ "description": "Used by `.spectrum-InLineAlert-content`.
Defaults to `var(--spectrum-inlinealert-content-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-content-font-style": {
+ "value": "var(--spectrum-inlinealert-content-font-style)",
+ "description": "Used by `.spectrum-InLineAlert-content`.
Defaults to `var(--spectrum-inlinealert-content-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-content-font-size": {
+ "value": "var(--spectrum-inlinealert-content-font-size)",
+ "description": "Used by `.spectrum-InLineAlert-content`.
Defaults to `var(--spectrum-inlinealert-content-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-content-line-height": {
+ "value": "var(--spectrum-inlinealert-content-line-height)",
+ "description": "Used by `.spectrum-InLineAlert-content`.
Defaults to `var(--spectrum-inlinealert-content-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-content-color": {
+ "value": "var(--spectrum-inlinealert-content-color)",
+ "description": "Used by `.spectrum-InLineAlert-content`.
Defaults to `var(--spectrum-inlinealert-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-spacing-header-content-button": {
+ "value": "var(--spectrum-inlinealert-spacing-header-content-button)",
+ "description": "Used by `.spectrum-InLineAlert-content, .spectrum-InLineAlert-footer`.
Defaults to `var(--spectrum-inlinealert-spacing-header-content-button)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-border-and-icon-color-info": {
+ "value": "var(--spectrum-inlinealert-border-and-icon-color-info)",
+ "description": "Used by `.spectrum-InLineAlert--info`, `.spectrum-InLineAlert--info .spectrum-InLineAlert-icon`.
Defaults to `var(--spectrum-inlinealert-border-and-icon-color-info)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-border-and-icon-color-notice": {
+ "value": "var(--spectrum-inlinealert-border-and-icon-color-notice)",
+ "description": "Used by `.spectrum-InLineAlert--notice`, `.spectrum-InLineAlert--notice .spectrum-InLineAlert-icon`.
Defaults to `var(--spectrum-inlinealert-border-and-icon-color-notice)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-border-and-icon-color-positive": {
+ "value": "var(--spectrum-inlinealert-border-and-icon-color-positive)",
+ "description": "Used by `.spectrum-InLineAlert--positive`, `.spectrum-InLineAlert--positive .spectrum-InLineAlert-icon`.
Defaults to `var(--spectrum-inlinealert-border-and-icon-color-positive)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-border-and-icon-color-negative": {
+ "value": "var(--spectrum-inlinealert-border-and-icon-color-negative)",
+ "description": "Used by `.spectrum-InLineAlert--negative`, `.spectrum-InLineAlert--negative .spectrum-InLineAlert-icon`.
Defaults to `var(--spectrum-inlinealert-border-and-icon-color-negative)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-inlinealert-heading-font-family": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-heading-font-weight": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-heading-font-style": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-heading-font-size": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-heading-line-height": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-content-font-family": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-content-font-weight": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-content-font-style": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-content-font-size": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-content-line-height": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-border-width": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-border-radius": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-icon-size": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-min-inline-size": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-line-alert-minimum-width": {
+ "value": "240px",
+ "description": "Used by `--spectrum-inlinealert-min-inline-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-header-min-block-size": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-spacing-edge-to-text": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-spacing-header-to-icon": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-spacing-header-content-button": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content, .spectrum-InLineAlert-footer`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-background-color": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-border-and-icon-color": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-header-color": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-content-color": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-border-and-icon-color-info": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert--info`, `.spectrum-InLineAlert--info .spectrum-InLineAlert-icon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-border-and-icon-color-positive": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert--positive`, `.spectrum-InLineAlert--positive .spectrum-InLineAlert-icon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-border-and-icon-color-notice": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert--notice`, `.spectrum-InLineAlert--notice .spectrum-InLineAlert-icon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-border-and-icon-color-negative": {
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert--negative`, `.spectrum-InLineAlert--negative .spectrum-InLineAlert-icon`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-inlinealert-heading-font-family`, `--spectrum-inlinealert-content-font-family`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-sans-serif-font-weight": {
+ "value": "700",
+ "description": "Used by `--spectrum-inlinealert-heading-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-sans-serif-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-inlinealert-heading-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-size-xxs": {
+ "value": "var(--spectrum-font-size-100)",
+ "description": "Used by `--spectrum-inlinealert-heading-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-line-height": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-inlinealert-heading-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-sans-serif-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-inlinealert-content-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-sans-serif-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-inlinealert-content-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-size-s": {
+ "value": "var(--spectrum-font-size-100)",
+ "description": "Used by `--spectrum-inlinealert-content-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-line-height": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-inlinealert-content-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-inlinealert-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-inlinealert-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-inlinealert-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-50": {
+ "value": "20px",
+ "description": "Used by `--spectrum-inlinealert-header-min-block-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-400": {
+ "value": "24px",
+ "description": "Used by `--spectrum-inlinealert-spacing-edge-to-text`, `--spectrum-inlinealert-spacing-header-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `--spectrum-inlinealert-spacing-header-content-button`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-background-layer-2-color": {
+ "value": "var(--spectrum-gray-75)",
+ "description": "Used by `--spectrum-inlinealert-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-visual-color": {
+ "value": "var(--spectrum-gray-600)",
+ "description": "Used by `--spectrum-inlinealert-border-and-icon-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-heading-color": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-inlinealert-header-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-body-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-inlinealert-content-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-informative-visual-color": {
+ "value": "var(--spectrum-informative-color-900)",
+ "description": "Used by `--spectrum-inlinealert-border-and-icon-color-info`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-positive-visual-color": {
+ "value": "var(--spectrum-positive-color-900)",
+ "description": "Used by `--spectrum-inlinealert-border-and-icon-color-positive`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-notice-visual-color": {
+ "value": "var(--spectrum-notice-color-900)",
+ "description": "Used by `--spectrum-inlinealert-border-and-icon-color-notice`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-visual-color": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Used by `--spectrum-inlinealert-border-and-icon-color-negative`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-inlinealert-background-color": {
+ "value": "var(--mod-inlinealert-background-color, var(--spectrum-inlinealert-background-color))",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert`.
Defaults to `var(--mod-inlinealert-background-color, var(--spectrum-inlinealert-background-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-inlinealert-border-and-icon-color": {
+ "value": "var(--mod-inlinealert-border-and-icon-color-negative, var(--spectrum-inlinealert-border-and-icon-color-negative))",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert`, `.spectrum-InLineAlert--info`, `.spectrum-InLineAlert--info .spectrum-InLineAlert-icon`, `.spectrum-InLineAlert--notice`, `.spectrum-InLineAlert--notice .spectrum-InLineAlert-icon`, `.spectrum-InLineAlert--positive`, `.spectrum-InLineAlert--positive .spectrum-InLineAlert-icon`, `.spectrum-InLineAlert--negative`, `.spectrum-InLineAlert--negative .spectrum-InLineAlert-icon`.
Defaults to `var(--mod-inlinealert-border-and-icon-color-negative, var(--spectrum-inlinealert-border-and-icon-color-negative))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-inlinealert-header-color": {
+ "value": "var(--mod-inlinealert-header-color, var(--spectrum-inlinealert-header-color))",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--mod-inlinealert-header-color, var(--spectrum-inlinealert-header-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-inlinealert-content-color": {
+ "value": "var(--mod-inlinealert-content-color, var(--spectrum-inlinealert-content-color))",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content`.
Defaults to `var(--mod-inlinealert-content-color, var(--spectrum-inlinealert-content-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/inlinealert/stories/inlinealert.stories.js b/components/inlinealert/stories/inlinealert.stories.js
index 6ed4d7c5f18..afea05e9645 100644
--- a/components/inlinealert/stories/inlinealert.stories.js
+++ b/components/inlinealert/stories/inlinealert.stories.js
@@ -1,9 +1,11 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { InlineAlertGroup } from "./inlinealert.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* In-line alerts display a non-modal message associated with objects in a view. These are often used in form validation, providing a place to aggregate feedback related to multiple fields.
*/
@@ -65,6 +67,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/link/dist/metadata.json b/components/link/dist/metadata.json
index 9befaceefc4..32004c81271 100644
--- a/components/link/dist/metadata.json
+++ b/components/link/dist/metadata.json
@@ -11,38 +11,173 @@
".spectrum-Link:focus-visible",
".spectrum-Link:hover"
],
- "modifiers": [
- "--mod-link-animation-duration",
- "--mod-link-text-color",
- "--mod-link-text-color-active",
- "--mod-link-text-color-black",
- "--mod-link-text-color-focus",
- "--mod-link-text-color-hover",
- "--mod-link-text-color-primary-active",
- "--mod-link-text-color-primary-default",
- "--mod-link-text-color-primary-focus",
- "--mod-link-text-color-primary-hover",
- "--mod-link-text-color-secondary-active",
- "--mod-link-text-color-secondary-default",
- "--mod-link-text-color-secondary-focus",
- "--mod-link-text-color-secondary-hover",
- "--mod-link-text-color-white"
- ],
- "component": [],
- "global": [
- "--spectrum-accent-content-color-default",
- "--spectrum-accent-content-color-down",
- "--spectrum-accent-content-color-hover",
- "--spectrum-accent-content-color-key-focus",
- "--spectrum-animation-duration-100",
- "--spectrum-black",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-down",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-neutral-content-color-key-focus",
- "--spectrum-white"
- ],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": ["--highcontrast-link-text-color"]
+ "modifiers": {
+ "mod-link-text-color": {
+ "value": "var(--mod-link-text-color-primary-default, var(--spectrum-accent-content-color-default))",
+ "description": "Defined in `.spectrum-Link--secondary`, `.spectrum-Link:active`, `.spectrum-Link:focus-visible`, `.spectrum-Link:hover`, `.spectrum-Link--staticWhite`, `.spectrum-Link--staticBlack`.
Used by `.spectrum-Link`.
Defaults to `var(--mod-link-text-color-primary-default, var(--spectrum-accent-content-color-default))`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-link-text-color-secondary-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--mod-link-text-color`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-link-text-color-hover": {
+ "value": "var(--mod-link-text-color-primary-hover, var(--spectrum-accent-content-color-hover))",
+ "description": "Defined in `.spectrum-Link--secondary`, `.spectrum-Link--staticWhite`, `.spectrum-Link--staticBlack`.
Used by `--mod-link-text-color`.
Defaults to `var(--mod-link-text-color-primary-hover, var(--spectrum-accent-content-color-hover))`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-link-text-color-secondary-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--mod-link-text-color-hover`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-link-text-color-active": {
+ "value": "var(--mod-link-text-color-primary-active, var(--spectrum-accent-content-color-down))",
+ "description": "Defined in `.spectrum-Link--secondary`, `.spectrum-Link--staticWhite`, `.spectrum-Link--staticBlack`.
Used by `--mod-link-text-color`.
Defaults to `var(--mod-link-text-color-primary-active, var(--spectrum-accent-content-color-down))`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-link-text-color-secondary-active": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--mod-link-text-color-active`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-link-text-color-focus": {
+ "value": "var(--mod-link-text-color-primary-focus, var(--spectrum-accent-content-color-key-focus))",
+ "description": "Defined in `.spectrum-Link--secondary`, `.spectrum-Link--staticWhite`, `.spectrum-Link--staticBlack`.
Used by `--mod-link-text-color`.
Defaults to `var(--mod-link-text-color-primary-focus, var(--spectrum-accent-content-color-key-focus))`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-link-text-color-secondary-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--mod-link-text-color-focus`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-link-animation-duration": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Used by `.spectrum-Link`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-link-text-color-primary-default": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `.spectrum-Link`.
Defaults to `var(--spectrum-accent-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-link-text-color-primary-active": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--mod-link-text-color`.
Defaults to `var(--spectrum-accent-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-link-text-color-primary-focus": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--mod-link-text-color`.
Defaults to `var(--spectrum-accent-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-link-text-color-primary-hover": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--mod-link-text-color`.
Defaults to `var(--spectrum-accent-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-link-text-color-white": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--mod-link-text-color`, `--mod-link-text-color-hover`, `--mod-link-text-color-active`, `--mod-link-text-color-focus`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-link-text-color-black": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Used by `--mod-link-text-color`, `--mod-link-text-color-hover`, `--mod-link-text-color-active`, `--mod-link-text-color-focus`.
Defaults to `var(--spectrum-black)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {},
+ "global": {
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--mod-link-text-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--mod-link-text-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--mod-link-text-color-active`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--mod-link-text-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `.spectrum-Link`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-default": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `.spectrum-Link`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-down": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--mod-link-text-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-key-focus": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--mod-link-text-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-hover": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--mod-link-text-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--mod-link-text-color`, `--mod-link-text-color-hover`, `--mod-link-text-color-active`, `--mod-link-text-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-black": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Used by `--mod-link-text-color`, `--mod-link-text-color-hover`, `--mod-link-text-color-active`, `--mod-link-text-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-link-text-color": {
+ "value": "var(--mod-link-text-color, var(--mod-link-text-color-primary-default, var(--spectrum-accent-content-color-default)))",
+ "description": "Defined in `.spectrum-Link`.
Used by `.spectrum-Link`.
Defaults to `var(--mod-link-text-color, var(--mod-link-text-color-primary-default, var(--spectrum-accent-content-color-default)))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/link/stories/link.stories.js b/components/link/stories/link.stories.js
index 53c71bfacb2..442d22dfdac 100644
--- a/components/link/stories/link.stories.js
+++ b/components/link/stories/link.stories.js
@@ -1,10 +1,12 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isActive, isFocused, isHovered, isQuiet, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { LinkGroup } from "./link.test.js";
import { TemplateWithFillerText } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* A link allows users to navigate to a different location. They can be presented in-line inside a paragraph or as standalone text.
*/
@@ -76,6 +78,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/logicbutton/dist/metadata.json b/components/logicbutton/dist/metadata.json
index 6adfbf58b24..2004fc7b6c1 100644
--- a/components/logicbutton/dist/metadata.json
+++ b/components/logicbutton/dist/metadata.json
@@ -6,115 +6,508 @@
".spectrum-LogicButton--and:hover:not([disabled])",
".spectrum-LogicButton--or",
".spectrum-LogicButton--or:hover:not([disabled])",
- ".spectrum-LogicButton.is-disabled",
".spectrum-LogicButton::-moz-focus-inner",
".spectrum-LogicButton:after",
".spectrum-LogicButton:disabled",
".spectrum-LogicButton:focus",
".spectrum-LogicButton:focus-visible",
- ".spectrum-LogicButton:focus-visible:after"
+ ".spectrum-LogicButton:focus-visible:after",
+ ".spectrum-LogicButton.is-disabled"
],
- "modifiers": [
- "--mod-animation-duration-100",
- "--mod-focus-indicator-gap",
- "--mod-line-height-100",
- "--mod-logic-button-and-background-color",
- "--mod-logic-button-and-background-color-disabled",
- "--mod-logic-button-and-background-color-hover",
- "--mod-logic-button-and-background-color-hover-disabled",
- "--mod-logic-button-and-border-color",
- "--mod-logic-button-and-border-color-disabled",
- "--mod-logic-button-and-border-color-hover",
- "--mod-logic-button-and-border-color-hover-disabled",
- "--mod-logic-button-and-text-color",
- "--mod-logic-button-and-text-color-disabled",
- "--mod-logic-button-border-radius",
- "--mod-logic-button-border-width",
- "--mod-logic-button-focus-indicator-color",
- "--mod-logic-button-focus-indicator-gap",
- "--mod-logic-button-focus-indicator-width",
- "--mod-logic-button-font-size",
- "--mod-logic-button-font-weight",
- "--mod-logic-button-height",
- "--mod-logic-button-or-background-color",
- "--mod-logic-button-or-background-color-disabled",
- "--mod-logic-button-or-background-color-hover",
- "--mod-logic-button-or-background-color-hover-disabled",
- "--mod-logic-button-or-border-color",
- "--mod-logic-button-or-border-color-disabled",
- "--mod-logic-button-or-border-color-hover",
- "--mod-logic-button-or-border-color-hover-disabled",
- "--mod-logic-button-or-text-color",
- "--mod-logic-button-or-text-color-disabled",
- "--mod-logic-button-padding",
- "--mod-sans-font-family-stack"
- ],
- "component": [
- "--spectrum-logic-button-and-background-color",
- "--spectrum-logic-button-and-background-color-disabled",
- "--spectrum-logic-button-and-background-color-hover",
- "--spectrum-logic-button-and-background-color-hover-disabled",
- "--spectrum-logic-button-and-border-color",
- "--spectrum-logic-button-and-border-color-disabled",
- "--spectrum-logic-button-and-border-color-hover",
- "--spectrum-logic-button-and-border-color-hover-disabled",
- "--spectrum-logic-button-and-text-color",
- "--spectrum-logic-button-border-radius",
- "--spectrum-logic-button-or-background-color",
- "--spectrum-logic-button-or-background-color-disabled",
- "--spectrum-logic-button-or-background-color-hover",
- "--spectrum-logic-button-or-background-color-hover-disabled",
- "--spectrum-logic-button-or-border-color",
- "--spectrum-logic-button-or-border-color-disabled",
- "--spectrum-logic-button-or-border-color-hover",
- "--spectrum-logic-button-or-border-color-hover-disabled",
- "--spectrum-logic-button-or-text-color",
- "--spectrum-logic-button-text-color-disabled"
- ],
- "global": [
- "--spectrum-animation-duration-100",
- "--spectrum-blue-1100",
- "--spectrum-bold-font-weight",
- "--spectrum-border-width-200",
- "--spectrum-component-edge-to-text-50",
- "--spectrum-corner-radius-100",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-font-size-100",
- "--spectrum-gray-100",
- "--spectrum-gray-500",
- "--spectrum-line-height-100",
- "--spectrum-sans-font-family-stack",
- "--spectrum-white"
- ],
- "system-theme": [
- "--system-logic-button-and-background-color-disabled",
- "--system-logic-button-and-background-color-hover-disabled",
- "--system-logic-button-and-border-color-disabled",
- "--system-logic-button-and-border-color-hover-disabled",
- "--system-logic-button-or-background-color-disabled",
- "--system-logic-button-or-background-color-hover-disabled",
- "--system-logic-button-or-border-color-disabled",
- "--system-logic-button-or-border-color-hover-disabled"
- ],
- "passthroughs": [
- "--mod-button-animation-duration",
- "--mod-button-focus-indicator-gap",
- "--mod-button-font-family",
- "--mod-button-line-height"
- ],
- "high-contrast": [
- "--highcontrast-logic-button-and-background-color",
- "--highcontrast-logic-button-and-background-color-hover",
- "--highcontrast-logic-button-and-border-color",
- "--highcontrast-logic-button-and-border-color-hover",
- "--highcontrast-logic-button-and-text-color",
- "--highcontrast-logic-button-focus-indicator-color",
- "--highcontrast-logic-button-or-background-color",
- "--highcontrast-logic-button-or-background-color-hover",
- "--highcontrast-logic-button-or-border-color",
- "--highcontrast-logic-button-or-border-color-hover",
- "--highcontrast-logic-button-or-text-color"
- ]
+ "modifiers": {
+ "mod-sans-font-family-stack": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Used by `.spectrum-LogicButton`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-LogicButton`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-animation-duration-100": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Used by `.spectrum-LogicButton`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `.spectrum-LogicButton:focus-visible:after`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-logic-button-height": {
+ "description": "Used by `.spectrum-LogicButton`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-logic-button-padding": {
+ "value": "8px",
+ "description": "Used by `.spectrum-LogicButton`.
Defaults to `var(--spectrum-component-edge-to-text-50)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-logic-button-border-width": {
+ "value": "2px",
+ "description": "Used by `.spectrum-LogicButton`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-logic-button-border-radius": {
+ "value": "var(--spectrum-logic-button-border-radius)",
+ "description": "Used by `.spectrum-LogicButton`, `.spectrum-LogicButton:after`.
Defaults to `var(--spectrum-logic-button-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-logic-button-font-size": {
+ "value": "14px",
+ "description": "Used by `.spectrum-LogicButton`.
Defaults to `var(--spectrum-font-size-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-logic-button-font-weight": {
+ "value": "700",
+ "description": "Used by `.spectrum-LogicButton`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-logic-button-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `.spectrum-LogicButton:after`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-logic-button-focus-indicator-width": {
+ "value": "2px",
+ "description": "Used by `.spectrum-LogicButton:focus-visible:after`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-logic-button-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `.spectrum-LogicButton:focus-visible:after`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-logic-button-and-background-color": {
+ "value": "var(--spectrum-logic-button-and-background-color)",
+ "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--and`.
Defaults to `var(--spectrum-logic-button-and-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-logic-button-and-background-color-disabled": {
+ "value": "var(--spectrum-logic-button-and-background-color-disabled)",
+ "description": "Used by `--mod-logic-button-and-background-color`.
Defaults to `var(--spectrum-logic-button-and-background-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-logic-button-and-border-color": {
+ "value": "var(--spectrum-logic-button-and-border-color)",
+ "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--and`.
Defaults to `var(--spectrum-logic-button-and-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-logic-button-and-border-color-disabled": {
+ "value": "var(--spectrum-logic-button-and-border-color-disabled)",
+ "description": "Used by `--mod-logic-button-and-border-color`.
Defaults to `var(--spectrum-logic-button-and-border-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-logic-button-and-text-color": {
+ "value": "var(--spectrum-logic-button-and-text-color)",
+ "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--and`.
Defaults to `var(--spectrum-logic-button-and-text-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-logic-button-and-text-color-disabled": {
+ "value": "var(--spectrum-logic-button-text-color-disabled)",
+ "description": "Used by `--mod-logic-button-and-text-color`.
Defaults to `var(--spectrum-logic-button-text-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-logic-button-and-background-color-hover": {
+ "value": "var(--spectrum-logic-button-and-background-color-hover)",
+ "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--and:hover:not([disabled])`.
Defaults to `var(--spectrum-logic-button-and-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-logic-button-and-background-color-hover-disabled": {
+ "value": "var(--spectrum-logic-button-and-background-color-hover-disabled)",
+ "description": "Used by `--mod-logic-button-and-background-color-hover`.
Defaults to `var(--spectrum-logic-button-and-background-color-hover-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-logic-button-and-border-color-hover": {
+ "value": "var(--spectrum-logic-button-and-border-color-hover)",
+ "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--and:hover:not([disabled])`.
Defaults to `var(--spectrum-logic-button-and-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-logic-button-and-border-color-hover-disabled": {
+ "value": "var(--spectrum-logic-button-and-border-color-hover-disabled)",
+ "description": "Used by `--mod-logic-button-and-border-color-hover`.
Defaults to `var(--spectrum-logic-button-and-border-color-hover-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-logic-button-or-background-color": {
+ "value": "var(--spectrum-logic-button-or-background-color)",
+ "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--or`.
Defaults to `var(--spectrum-logic-button-or-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-logic-button-or-background-color-disabled": {
+ "value": "var(--spectrum-logic-button-or-background-color-disabled)",
+ "description": "Used by `--mod-logic-button-or-background-color`.
Defaults to `var(--spectrum-logic-button-or-background-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-logic-button-or-border-color": {
+ "value": "var(--spectrum-logic-button-or-border-color)",
+ "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--or`.
Defaults to `var(--spectrum-logic-button-or-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-logic-button-or-border-color-disabled": {
+ "value": "var(--spectrum-logic-button-or-border-color-disabled)",
+ "description": "Used by `--mod-logic-button-or-border-color`.
Defaults to `var(--spectrum-logic-button-or-border-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-logic-button-or-text-color": {
+ "value": "var(--spectrum-logic-button-or-text-color)",
+ "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--or`.
Defaults to `var(--spectrum-logic-button-or-text-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-logic-button-or-text-color-disabled": {
+ "value": "var(--spectrum-logic-button-text-color-disabled)",
+ "description": "Used by `--mod-logic-button-or-text-color`.
Defaults to `var(--spectrum-logic-button-text-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-logic-button-or-background-color-hover": {
+ "value": "var(--spectrum-logic-button-or-background-color-hover)",
+ "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--or:hover:not([disabled])`.
Defaults to `var(--spectrum-logic-button-or-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-logic-button-or-background-color-hover-disabled": {
+ "value": "var(--spectrum-logic-button-or-background-color-hover-disabled)",
+ "description": "Used by `--mod-logic-button-or-background-color-hover`.
Defaults to `var(--spectrum-logic-button-or-background-color-hover-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-logic-button-or-border-color-hover": {
+ "value": "var(--spectrum-logic-button-or-border-color-hover)",
+ "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--or:hover:not([disabled])`.
Defaults to `var(--spectrum-logic-button-or-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-logic-button-or-border-color-hover-disabled": {
+ "value": "var(--spectrum-logic-button-or-border-color-hover-disabled)",
+ "description": "Used by `--mod-logic-button-or-border-color-hover`.
Defaults to `var(--spectrum-logic-button-or-border-color-hover-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-logic-button-border-radius": {
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton`, `.spectrum-LogicButton:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-logic-button-and-text-color": {
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton--and`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-and-background-color-hover": {
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton--and:hover:not([disabled])`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-and-border-color-hover": {
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton--and:hover:not([disabled])`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-or-text-color": {
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton--or`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-text-color-disabled": {
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-and-text-color`, `--mod-logic-button-or-text-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-and-background-color-disabled": {
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-and-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-and-border-color-disabled": {
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-and-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-and-background-color-hover-disabled": {
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-and-background-color-hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-and-border-color-hover-disabled": {
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-and-border-color-hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-or-background-color-disabled": {
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-or-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-or-border-color-disabled": {
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-or-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-or-background-color-hover-disabled": {
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-or-background-color-hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-or-border-color-hover-disabled": {
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-or-border-color-hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-and-background-color": {
+ "description": "Used by `.spectrum-LogicButton--and`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-and-border-color": {
+ "description": "Used by `.spectrum-LogicButton--and`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-or-background-color": {
+ "description": "Used by `.spectrum-LogicButton--or`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-or-border-color": {
+ "description": "Used by `.spectrum-LogicButton--or`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-or-background-color-hover": {
+ "description": "Used by `.spectrum-LogicButton--or:hover:not([disabled])`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-or-border-color-hover": {
+ "description": "Used by `.spectrum-LogicButton--or:hover:not([disabled])`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `.spectrum-LogicButton`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-LogicButton`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `.spectrum-LogicButton`, `.spectrum-LogicButton:after`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `.spectrum-LogicButton:after`, `.spectrum-LogicButton:focus-visible:after`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--system-logic-button-and-background-color-disabled`, `--system-logic-button-and-border-color-disabled`, `--system-logic-button-and-background-color-hover-disabled`, `--system-logic-button-and-border-color-hover-disabled`, `--system-logic-button-or-background-color-disabled`, `--system-logic-button-or-border-color-disabled`, `--system-logic-button-or-background-color-hover-disabled`, `--system-logic-button-or-border-color-hover-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-logic-button-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--spectrum-logic-button-and-text-color`, `--spectrum-logic-button-or-text-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-blue-1100": {
+ "value": "light-dark(rgb(29, 62, 207), rgb(124, 169, 252))",
+ "description": "Used by `--spectrum-logic-button-and-background-color-hover`, `--spectrum-logic-button-and-border-color-hover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-500": {
+ "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+ "description": "Used by `--spectrum-logic-button-text-color-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-50": {
+ "value": "8px",
+ "description": "Used by `.spectrum-LogicButton`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `.spectrum-LogicButton`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `.spectrum-LogicButton`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-bold-font-weight": {
+ "value": "700",
+ "description": "Used by `.spectrum-LogicButton`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `.spectrum-LogicButton:focus-visible:after`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `.spectrum-LogicButton:focus-visible:after`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-logic-button-and-background-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-logic-button-and-background-color-disabled`.",
+ "control": "color"
+ },
+ "system-logic-button-and-border-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-logic-button-and-border-color-disabled`.",
+ "control": "color"
+ },
+ "system-logic-button-and-background-color-hover-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-logic-button-and-background-color-hover-disabled`.",
+ "control": "color"
+ },
+ "system-logic-button-and-border-color-hover-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-logic-button-and-border-color-hover-disabled`.",
+ "control": "color"
+ },
+ "system-logic-button-or-background-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-logic-button-or-background-color-disabled`.",
+ "control": "color"
+ },
+ "system-logic-button-or-border-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-logic-button-or-border-color-disabled`.",
+ "control": "color"
+ },
+ "system-logic-button-or-background-color-hover-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-logic-button-or-background-color-hover-disabled`.",
+ "control": "color"
+ },
+ "system-logic-button-or-border-color-hover-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-logic-button-or-border-color-hover-disabled`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {
+ "mod-button-font-family": {
+ "category": "Passthrough"
+ },
+ "mod-button-line-height": {
+ "category": "Passthrough"
+ },
+ "mod-button-animation-duration": {
+ "category": "Passthrough"
+ },
+ "mod-button-focus-indicator-gap": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-logic-button-focus-indicator-color": {
+ "value": "var(--mod-logic-button-focus-indicator-color, var(--spectrum-focus-indicator-color))",
+ "description": "Defined in `.spectrum-LogicButton:after`.
Used by `.spectrum-LogicButton:focus-visible:after`.
Defaults to `var(--mod-logic-button-focus-indicator-color, var(--spectrum-focus-indicator-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-logic-button-and-background-color": {
+ "value": "var(--mod-logic-button-and-background-color, var(--spectrum-logic-button-and-background-color))",
+ "description": "Defined in `.spectrum-LogicButton`, `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--and`.
Defaults to `var(--mod-logic-button-and-background-color, var(--spectrum-logic-button-and-background-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-logic-button-and-border-color": {
+ "value": "var(--mod-logic-button-and-border-color, var(--spectrum-logic-button-and-border-color))",
+ "description": "Defined in `.spectrum-LogicButton`, `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--and`.
Defaults to `var(--mod-logic-button-and-border-color, var(--spectrum-logic-button-and-border-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-logic-button-and-text-color": {
+ "value": "var(--mod-logic-button-and-text-color, var(--spectrum-logic-button-and-text-color))",
+ "description": "Defined in `.spectrum-LogicButton`, `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--and`.
Defaults to `var(--mod-logic-button-and-text-color, var(--spectrum-logic-button-and-text-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-logic-button-or-background-color": {
+ "value": "var(--mod-logic-button-or-background-color, var(--spectrum-logic-button-or-background-color))",
+ "description": "Defined in `.spectrum-LogicButton`, `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--or`.
Defaults to `var(--mod-logic-button-or-background-color, var(--spectrum-logic-button-or-background-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-logic-button-or-border-color": {
+ "value": "var(--mod-logic-button-or-border-color, var(--spectrum-logic-button-or-border-color))",
+ "description": "Defined in `.spectrum-LogicButton`, `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--or`.
Defaults to `var(--mod-logic-button-or-border-color, var(--spectrum-logic-button-or-border-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-logic-button-or-text-color": {
+ "value": "var(--mod-logic-button-or-text-color, var(--spectrum-logic-button-or-text-color))",
+ "description": "Defined in `.spectrum-LogicButton`, `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--or`.
Defaults to `var(--mod-logic-button-or-text-color, var(--spectrum-logic-button-or-text-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-logic-button-and-background-color-hover": {
+ "value": "var(--mod-logic-button-and-background-color-hover, var(--spectrum-logic-button-and-background-color-hover))",
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton--and:hover:not([disabled])`.
Defaults to `var(--mod-logic-button-and-background-color-hover, var(--spectrum-logic-button-and-background-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-logic-button-and-border-color-hover": {
+ "value": "var(--mod-logic-button-and-border-color-hover, var(--spectrum-logic-button-and-border-color-hover))",
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton--and:hover:not([disabled])`.
Defaults to `var(--mod-logic-button-and-border-color-hover, var(--spectrum-logic-button-and-border-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-logic-button-or-background-color-hover": {
+ "value": "var(--mod-logic-button-or-background-color-hover, var(--spectrum-logic-button-or-background-color-hover))",
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton--or:hover:not([disabled])`.
Defaults to `var(--mod-logic-button-or-background-color-hover, var(--spectrum-logic-button-or-background-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-logic-button-or-border-color-hover": {
+ "value": "var(--mod-logic-button-or-border-color-hover, var(--spectrum-logic-button-or-border-color-hover))",
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton--or:hover:not([disabled])`.
Defaults to `var(--mod-logic-button-or-border-color-hover, var(--spectrum-logic-button-or-border-color-hover))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/logicbutton/stories/logicbutton.stories.js b/components/logicbutton/stories/logicbutton.stories.js
index 6b38a131275..02814d657dd 100644
--- a/components/logicbutton/stories/logicbutton.stories.js
+++ b/components/logicbutton/stories/logicbutton.stories.js
@@ -1,10 +1,12 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { LogicButtonGroup } from "./logicbutton.test.js";
import { Template, VariantGroup } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* A logic button displays an operator within a boolean logic sequence.
*/
@@ -32,6 +34,7 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/menu/dist/metadata.json b/components/menu/dist/metadata.json
index 5142e09aa66..ee955ee0e64 100644
--- a/components/menu/dist/metadata.json
+++ b/components/menu/dist/metadata.json
@@ -9,11 +9,11 @@
".spectrum-Menu .spectrum-Menu-divider",
".spectrum-Menu .spectrum-Menu-divider.spectrum-Divider--sizeS",
".spectrum-Menu .spectrum-Menu-item",
- ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open.is-focused",
".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:active",
".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus",
".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus-within",
".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:hover",
+ ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open.is-focused",
".spectrum-Menu .spectrum-Menu-item--drillIn.is-open",
".spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemCheckbox",
".spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch",
@@ -47,39 +47,19 @@
".spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon",
".spectrum-Menu-item--collapsible.is-open",
".spectrum-Menu-item--collapsible.is-open .spectrum-Menu-chevron",
- ".spectrum-Menu-item--collapsible.is-open.is-focused",
".spectrum-Menu-item--collapsible.is-open:active",
".spectrum-Menu-item--collapsible.is-open:focus",
".spectrum-Menu-item--collapsible.is-open:hover",
+ ".spectrum-Menu-item--collapsible.is-open.is-focused",
".spectrum-Menu-item--drillIn .spectrum-Menu-chevron",
+ ".spectrum-Menu-item--drillIn:active .spectrum-Menu-chevron",
+ ".spectrum-Menu-item--drillIn:focus .spectrum-Menu-chevron",
+ ".spectrum-Menu-item--drillIn:hover .spectrum-Menu-chevron",
".spectrum-Menu-item--drillIn.is-focused .spectrum-Menu-chevron",
".spectrum-Menu-item--drillIn.is-open",
".spectrum-Menu-item--drillIn.is-open .spectrum-Menu-checkmark",
".spectrum-Menu-item--drillIn.is-open .spectrum-Menu-chevron",
".spectrum-Menu-item--drillIn.is-open .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)",
- ".spectrum-Menu-item--drillIn:active .spectrum-Menu-chevron",
- ".spectrum-Menu-item--drillIn:focus .spectrum-Menu-chevron",
- ".spectrum-Menu-item--drillIn:hover .spectrum-Menu-chevron",
- ".spectrum-Menu-item.is-disabled",
- ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemDescription",
- ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemIcon",
- ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel",
- ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemValue",
- ".spectrum-Menu-item.is-disabled .spectrum-Menu-sectionHeading",
- ".spectrum-Menu-item.is-disabled:hover",
- ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemDescription",
- ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemIcon",
- ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemLabel",
- ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemValue",
- ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-sectionHeading",
- ".spectrum-Menu-item.is-focused",
- ".spectrum-Menu-item.is-focused > .spectrum-Menu-checkmark",
- ".spectrum-Menu-item.is-focused > .spectrum-Menu-chevron",
- ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemDescription",
- ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)",
- ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemLabel",
- ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemValue",
- ".spectrum-Menu-item.is-focused > .spectrum-Menu-sectionHeading",
".spectrum-Menu-item:active",
".spectrum-Menu-item:active > .spectrum-Menu-checkmark",
".spectrum-Menu-item:active > .spectrum-Menu-chevron",
@@ -105,12 +85,26 @@
".spectrum-Menu-item:hover > .spectrum-Menu-itemLabel",
".spectrum-Menu-item:hover > .spectrum-Menu-itemValue",
".spectrum-Menu-item:hover > .spectrum-Menu-sectionHeading",
- ".spectrum-Menu-itemActions",
- ".spectrum-Menu-itemDescription",
- ".spectrum-Menu-itemLabel",
- ".spectrum-Menu-itemLabel--truncate",
- ".spectrum-Menu-itemSelection",
- ".spectrum-Menu-itemValue",
+ ".spectrum-Menu-item.is-disabled",
+ ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemDescription",
+ ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemIcon",
+ ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel",
+ ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemValue",
+ ".spectrum-Menu-item.is-disabled .spectrum-Menu-sectionHeading",
+ ".spectrum-Menu-item.is-disabled:hover",
+ ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemDescription",
+ ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemIcon",
+ ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemLabel",
+ ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemValue",
+ ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-sectionHeading",
+ ".spectrum-Menu-item.is-focused",
+ ".spectrum-Menu-item.is-focused > .spectrum-Menu-checkmark",
+ ".spectrum-Menu-item.is-focused > .spectrum-Menu-chevron",
+ ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemDescription",
+ ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)",
+ ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemLabel",
+ ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemValue",
+ ".spectrum-Menu-item.is-focused > .spectrum-Menu-sectionHeading",
".spectrum-Menu-item[aria-disabled=\"true\"]",
".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemDescription",
".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemIcon",
@@ -123,7 +117,17 @@
".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemLabel",
".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemValue",
".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-sectionHeading",
+ ".spectrum-Menu-itemActions",
+ ".spectrum-Menu-itemDescription",
+ ".spectrum-Menu-itemLabel",
+ ".spectrum-Menu-itemLabel--truncate",
+ ".spectrum-Menu-itemSelection",
+ ".spectrum-Menu-itemValue",
".spectrum-Menu-sectionHeading",
+ ".spectrum-Menu:dir(rtl)",
+ ".spectrum-Menu:lang(ja)",
+ ".spectrum-Menu:lang(ko)",
+ ".spectrum-Menu:lang(zh)",
".spectrum-Menu.is-selectable .spectrum-Menu-item",
".spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected",
".spectrum-Menu.is-selectableMultiple .spectrum-Menu-item",
@@ -131,285 +135,1445 @@
".spectrum-Menu.spectrum-Menu--sizeL",
".spectrum-Menu.spectrum-Menu--sizeS",
".spectrum-Menu.spectrum-Menu--sizeXL",
- ".spectrum-Menu:dir(rtl)",
- ".spectrum-Menu:lang(ja)",
- ".spectrum-Menu:lang(ko)",
- ".spectrum-Menu:lang(zh)",
"[dir=\"rtl\"] .spectrum-Menu",
"[dir=\"rtl\"] .spectrum-Menu .spectrum-Menu-chevron"
],
- "modifiers": [
- "--mod-menu-back-heading-color",
- "--mod-menu-back-icon-color-default",
- "--mod-menu-back-icon-margin-block",
- "--mod-menu-back-icon-margin-inline",
- "--mod-menu-back-padding-block-end",
- "--mod-menu-back-padding-block-start",
- "--mod-menu-back-padding-inline-end",
- "--mod-menu-back-padding-inline-start",
- "--mod-menu-checkmark-display",
- "--mod-menu-checkmark-icon-color-default",
- "--mod-menu-checkmark-icon-color-down",
- "--mod-menu-checkmark-icon-color-focus",
- "--mod-menu-checkmark-icon-color-hover",
- "--mod-menu-collapsible-icon-color",
- "--mod-menu-drillin-icon-color-default",
- "--mod-menu-drillin-icon-color-down",
- "--mod-menu-drillin-icon-color-focus",
- "--mod-menu-drillin-icon-color-hover",
- "--mod-menu-inline-size",
- "--mod-menu-item-background-color-default",
- "--mod-menu-item-background-color-down",
- "--mod-menu-item-background-color-hover",
- "--mod-menu-item-background-color-key-focus",
- "--mod-menu-item-bottom-edge-to-text",
- "--mod-menu-item-checkmark-height",
- "--mod-menu-item-checkmark-width",
- "--mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start",
- "--mod-menu-item-description-color-default",
- "--mod-menu-item-description-color-disabled",
- "--mod-menu-item-description-color-down",
- "--mod-menu-item-description-color-focus",
- "--mod-menu-item-description-color-hover",
- "--mod-menu-item-description-font-size",
- "--mod-menu-item-description-line-height",
- "--mod-menu-item-description-line-height-cjk",
- "--mod-menu-item-focus-indicator-color",
- "--mod-menu-item-focus-indicator-width",
- "--mod-menu-item-icon-height",
- "--mod-menu-item-icon-width",
- "--mod-menu-item-label-content-color-default",
- "--mod-menu-item-label-content-color-disabled",
- "--mod-menu-item-label-content-color-down",
- "--mod-menu-item-label-content-color-focus",
- "--mod-menu-item-label-content-color-hover",
- "--mod-menu-item-label-font-size",
- "--mod-menu-item-label-icon-color-default",
- "--mod-menu-item-label-icon-color-disabled",
- "--mod-menu-item-label-icon-color-down",
- "--mod-menu-item-label-icon-color-focus",
- "--mod-menu-item-label-icon-color-hover",
- "--mod-menu-item-label-inline-edge-to-content",
- "--mod-menu-item-label-line-height",
- "--mod-menu-item-label-line-height-cjk",
- "--mod-menu-item-label-text-to-visual",
- "--mod-menu-item-label-to-description-spacing",
- "--mod-menu-item-label-to-value-area-min-spacing",
- "--mod-menu-item-min-height",
- "--mod-menu-item-selectable-edge-to-text-not-selected",
- "--mod-menu-item-text-to-control",
- "--mod-menu-item-top-edge-to-text",
- "--mod-menu-item-top-to-action",
- "--mod-menu-item-top-to-checkbox",
- "--mod-menu-item-top-to-checkmark",
- "--mod-menu-item-value-color-default",
- "--mod-menu-item-value-color-down",
- "--mod-menu-item-value-color-focus",
- "--mod-menu-item-value-color-hover",
- "--mod-menu-section-divider-margin-block",
- "--mod-menu-section-header-bottom-edge-to-text",
- "--mod-menu-section-header-color",
- "--mod-menu-section-header-font-size",
- "--mod-menu-section-header-font-weight",
- "--mod-menu-section-header-line-height",
- "--mod-menu-section-header-line-height-cjk",
- "--mod-menu-section-header-min-width",
- "--mod-menu-section-header-top-edge-to-text"
- ],
- "component": [
- "--spectrum-menu-back-icon-margin",
- "--spectrum-menu-checkmark-display",
- "--spectrum-menu-checkmark-display-hidden",
- "--spectrum-menu-checkmark-display-shown",
- "--spectrum-menu-checkmark-icon-color-default",
- "--spectrum-menu-checkmark-icon-color-down",
- "--spectrum-menu-checkmark-icon-color-focus",
- "--spectrum-menu-checkmark-icon-color-hover",
- "--spectrum-menu-collapsible-icon-color",
- "--spectrum-menu-divider-thickness",
- "--spectrum-menu-drillin-icon-color-default",
- "--spectrum-menu-drillin-icon-color-down",
- "--spectrum-menu-drillin-icon-color-focus",
- "--spectrum-menu-drillin-icon-color-hover",
- "--spectrum-menu-item-background-color-default",
- "--spectrum-menu-item-background-color-down",
- "--spectrum-menu-item-background-color-hover",
- "--spectrum-menu-item-background-color-key-focus",
- "--spectrum-menu-item-bottom-edge-to-text",
- "--spectrum-menu-item-checkmark-height",
- "--spectrum-menu-item-checkmark-height-extra-large",
- "--spectrum-menu-item-checkmark-height-large",
- "--spectrum-menu-item-checkmark-height-medium",
- "--spectrum-menu-item-checkmark-height-small",
- "--spectrum-menu-item-checkmark-width",
- "--spectrum-menu-item-checkmark-width-extra-large",
- "--spectrum-menu-item-checkmark-width-large",
- "--spectrum-menu-item-checkmark-width-medium",
- "--spectrum-menu-item-checkmark-width-small",
- "--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start",
- "--spectrum-menu-item-corner-radius",
- "--spectrum-menu-item-description-color-default",
- "--spectrum-menu-item-description-color-disabled",
- "--spectrum-menu-item-description-color-down",
- "--spectrum-menu-item-description-color-focus",
- "--spectrum-menu-item-description-color-hover",
- "--spectrum-menu-item-description-font-size",
- "--spectrum-menu-item-description-line-height",
- "--spectrum-menu-item-description-line-height-cjk",
- "--spectrum-menu-item-focus-indicator-border-width",
- "--spectrum-menu-item-focus-indicator-color",
- "--spectrum-menu-item-focus-indicator-color-default",
- "--spectrum-menu-item-focus-indicator-direction-scalar",
- "--spectrum-menu-item-focus-indicator-offset",
- "--spectrum-menu-item-focus-indicator-outline-style",
- "--spectrum-menu-item-focus-indicator-shadow",
- "--spectrum-menu-item-focus-indicator-width",
- "--spectrum-menu-item-icon-height",
- "--spectrum-menu-item-icon-width",
- "--spectrum-menu-item-label-content-color-default",
- "--spectrum-menu-item-label-content-color-disabled",
- "--spectrum-menu-item-label-content-color-down",
- "--spectrum-menu-item-label-content-color-focus",
- "--spectrum-menu-item-label-content-color-hover",
- "--spectrum-menu-item-label-font-size",
- "--spectrum-menu-item-label-icon-color-default",
- "--spectrum-menu-item-label-icon-color-disabled",
- "--spectrum-menu-item-label-icon-color-down",
- "--spectrum-menu-item-label-icon-color-focus",
- "--spectrum-menu-item-label-icon-color-hover",
- "--spectrum-menu-item-label-inline-edge-to-content",
- "--spectrum-menu-item-label-line-height",
- "--spectrum-menu-item-label-line-height-cjk",
- "--spectrum-menu-item-label-text-to-visual",
- "--spectrum-menu-item-label-to-description",
- "--spectrum-menu-item-label-to-description-spacing",
- "--spectrum-menu-item-label-to-value-area-min-spacing",
- "--spectrum-menu-item-min-height",
- "--spectrum-menu-item-section-divider-height",
- "--spectrum-menu-item-selectable-edge-to-text-not-selected",
- "--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large",
- "--spectrum-menu-item-selectable-edge-to-text-not-selected-large",
- "--spectrum-menu-item-selectable-edge-to-text-not-selected-medium",
- "--spectrum-menu-item-selectable-edge-to-text-not-selected-small",
- "--spectrum-menu-item-spacing-multiplier",
- "--spectrum-menu-item-text-to-control",
- "--spectrum-menu-item-top-edge-to-text",
- "--spectrum-menu-item-top-to-action",
- "--spectrum-menu-item-top-to-checkbox",
- "--spectrum-menu-item-top-to-checkmark",
- "--spectrum-menu-item-top-to-selected-icon-extra-large",
- "--spectrum-menu-item-top-to-selected-icon-large",
- "--spectrum-menu-item-top-to-selected-icon-medium",
- "--spectrum-menu-item-top-to-selected-icon-small",
- "--spectrum-menu-item-value-color-default",
- "--spectrum-menu-item-value-color-down",
- "--spectrum-menu-item-value-color-focus",
- "--spectrum-menu-item-value-color-hover",
- "--spectrum-menu-section-header-color",
- "--spectrum-menu-section-header-font-size",
- "--spectrum-menu-section-header-font-weight",
- "--spectrum-menu-section-header-line-height",
- "--spectrum-menu-section-header-line-height-cjk",
- "--spectrum-menu-section-header-min-width"
- ],
- "global": [
- "--spectrum-accent-color-1000",
- "--spectrum-accent-color-1100",
- "--spectrum-accent-color-900",
- "--spectrum-blue-800",
- "--spectrum-bold-font-weight",
- "--spectrum-border-width-200",
- "--spectrum-cjk-line-height-100",
- "--spectrum-component-bottom-to-text-100",
- "--spectrum-component-bottom-to-text-200",
- "--spectrum-component-bottom-to-text-300",
- "--spectrum-component-bottom-to-text-75",
- "--spectrum-component-edge-to-text-100",
- "--spectrum-component-edge-to-text-200",
- "--spectrum-component-edge-to-text-300",
- "--spectrum-component-edge-to-text-75",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-75",
- "--spectrum-component-top-to-text-100",
- "--spectrum-component-top-to-text-200",
- "--spectrum-component-top-to-text-300",
- "--spectrum-component-top-to-text-75",
- "--spectrum-corner-radius-100",
- "--spectrum-disabled-content-color",
- "--spectrum-divider-thickness-medium",
- "--spectrum-divider-thickness-small",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-300",
- "--spectrum-font-size-50",
- "--spectrum-font-size-75",
- "--spectrum-gray-1000-rgb",
- "--spectrum-gray-900",
- "--spectrum-line-height-100",
- "--spectrum-navigational-indicator-top-to-back-icon-extra-large",
- "--spectrum-navigational-indicator-top-to-back-icon-large",
- "--spectrum-navigational-indicator-top-to-back-icon-medium",
- "--spectrum-navigational-indicator-top-to-back-icon-small",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-down",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-neutral-content-color-key-focus",
- "--spectrum-neutral-subdued-content-color-default",
- "--spectrum-neutral-subdued-content-color-down",
- "--spectrum-neutral-subdued-content-color-hover",
- "--spectrum-neutral-subdued-content-color-key-focus",
- "--spectrum-spacing-100",
- "--spectrum-spacing-50",
- "--spectrum-text-to-control-100",
- "--spectrum-text-to-control-200",
- "--spectrum-text-to-control-300",
- "--spectrum-text-to-control-75",
- "--spectrum-text-to-visual-100",
- "--spectrum-text-to-visual-200",
- "--spectrum-text-to-visual-300",
- "--spectrum-text-to-visual-75",
- "--spectrum-transparent-black-200-opacity",
- "--spectrum-workflow-icon-size-100",
- "--spectrum-workflow-icon-size-200",
- "--spectrum-workflow-icon-size-300",
- "--spectrum-workflow-icon-size-75"
- ],
- "system-theme": [
- "--system-menu-item-background-color-down",
- "--system-menu-item-background-color-hover",
- "--system-menu-item-background-color-key-focus",
- "--system-menu-item-corner-radius",
- "--system-menu-item-focus-indicator-offset",
- "--system-menu-item-focus-indicator-outline-style",
- "--system-menu-item-focus-indicator-shadow",
- "--system-menu-item-spacing-multiplier"
- ],
- "passthroughs": [
- "--mod-checkbox-text-to-control",
- "--mod-checkbox-top-to-text",
- "--mod-switch-control-label-spacing",
- "--mod-switch-spacing-top-to-label"
- ],
- "high-contrast": [
- "--highcontrast-checkbox-highlight-color-default",
- "--highcontrast-checkbox-highlight-color-hover",
- "--highcontrast-menu-checkmark-icon-color-default",
- "--highcontrast-menu-item-background-color-default",
- "--highcontrast-menu-item-background-color-focus",
- "--highcontrast-menu-item-color-default",
- "--highcontrast-menu-item-color-disabled",
- "--highcontrast-menu-item-color-focus",
- "--highcontrast-menu-item-focus-indicator-color",
- "--highcontrast-menu-item-selected-background-color",
- "--highcontrast-menu-item-selected-color",
- "--highcontrast-switch-background-color-selected-default",
- "--highcontrast-switch-background-color-selected-hover",
- "--highcontrast-switch-handle-border-color-hover",
- "--highcontrast-switch-handle-border-color-selected-default",
- "--highcontrast-switch-handle-border-color-selected-hover"
- ]
+ "modifiers": {
+ "mod-menu-item-focus-indicator-width": {
+ "value": "2px",
+ "description": "Used by `--spectrum-menu-item-focus-indicator-width`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-focus-indicator-color": {
+ "value": "var(--spectrum-menu-item-focus-indicator-color)",
+ "description": "Used by `--spectrum-menu-item-focus-indicator-color-default`.
Defaults to `var(--spectrum-menu-item-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-inline-size": {
+ "description": "Used by `.spectrum-Menu`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-label-line-height-cjk": {
+ "value": "var(--spectrum-menu-item-label-line-height-cjk)",
+ "description": "Used by `--spectrum-menu-item-label-line-height`.
Defaults to `var(--spectrum-menu-item-label-line-height-cjk)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-description-line-height-cjk": {
+ "value": "var(--spectrum-menu-item-description-line-height-cjk)",
+ "description": "Used by `--spectrum-menu-item-description-line-height`.
Defaults to `var(--spectrum-menu-item-description-line-height-cjk)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-section-header-line-height-cjk": {
+ "value": "var(--spectrum-menu-section-header-line-height-cjk)",
+ "description": "Used by `--spectrum-menu-section-header-line-height`.
Defaults to `var(--spectrum-menu-section-header-line-height-cjk)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-selectable-edge-to-text-not-selected": {
+ "value": "var(--spectrum-menu-item-selectable-edge-to-text-not-selected)",
+ "description": "Used by `.spectrum-Menu.is-selectable .spectrum-Menu-item`.
Defaults to `var(--spectrum-menu-item-selectable-edge-to-text-not-selected)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-label-inline-edge-to-content": {
+ "value": "var(--spectrum-menu-item-label-inline-edge-to-content)",
+ "description": "Used by `.spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected`, `.spectrum-Menu .spectrum-Menu-divider`, `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible .spectrum-Menu`.
Defaults to `var(--spectrum-menu-item-label-inline-edge-to-content)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-section-divider-margin-block": {
+ "value": "max(0px, (var(--spectrum-menu-item-section-divider-height) - var(--spectrum-menu-divider-thickness))/2)",
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-divider`.
Defaults to `max(0px, (var(--spectrum-menu-item-section-divider-height) - var(--spectrum-menu-divider-thickness))/2)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-label-icon-color-default": {
+ "value": "var(--spectrum-menu-item-label-icon-color-default)",
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-itemIcon`.
Defaults to `var(--spectrum-menu-item-label-icon-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-checkmark-display": {
+ "value": "var(--spectrum-menu-checkmark-display)",
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark`.
Defaults to `var(--spectrum-menu-checkmark-display)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-checkmark-height": {
+ "value": "var(--spectrum-menu-item-checkmark-height)",
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark`.
Defaults to `var(--spectrum-menu-item-checkmark-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-checkmark-width": {
+ "value": "var(--spectrum-menu-item-checkmark-width)",
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark`.
Defaults to `var(--spectrum-menu-item-checkmark-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-checkmark-icon-color-default": {
+ "value": "var(--spectrum-menu-checkmark-icon-color-default)",
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark`.
Defaults to `var(--spectrum-menu-checkmark-icon-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-top-to-checkmark": {
+ "value": "var(--spectrum-menu-item-top-to-checkmark)",
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark`.
Defaults to `var(--spectrum-menu-item-top-to-checkmark)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-top-edge-to-text": {
+ "value": "var(--spectrum-menu-item-top-edge-to-text)",
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark`, `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon`.
Defaults to `var(--spectrum-menu-item-top-edge-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-text-to-control": {
+ "value": "var(--spectrum-menu-item-text-to-control)",
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark, .spectrum-Menu .spectrum-Menu-chevron`, `.spectrum-Menu-item .spectrum-Menu-itemCheckbox .spectrum-Checkbox-box`.
Defaults to `var(--spectrum-menu-item-text-to-control)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-back-icon-margin-block": {
+ "value": "var(--spectrum-menu-back-icon-margin)",
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-backIcon`.
Defaults to `var(--spectrum-menu-back-icon-margin)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-back-icon-margin-inline": {
+ "value": "var(--spectrum-menu-back-icon-margin)",
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-backIcon`.
Defaults to `var(--spectrum-menu-back-icon-margin)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-back-icon-color-default": {
+ "value": "var(--spectrum-menu-section-header-color)",
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-backIcon`.
Defaults to `var(--spectrum-menu-section-header-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-label-text-to-visual": {
+ "value": "var(--spectrum-menu-item-label-text-to-visual)",
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon`.
Defaults to `var(--spectrum-menu-item-label-text-to-visual)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-icon-height": {
+ "value": "var(--spectrum-menu-item-icon-height)",
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.
Defaults to `var(--spectrum-menu-item-icon-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-icon-width": {
+ "value": "var(--spectrum-menu-item-icon-width)",
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.
Defaults to `var(--spectrum-menu-item-icon-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-background-color-default": {
+ "value": "var(--spectrum-menu-item-background-color-default)",
+ "description": "Used by `.spectrum-Menu-item`, `.spectrum-Menu-item--collapsible.is-open.is-focused, .spectrum-Menu-item--collapsible.is-open:active, .spectrum-Menu-item--collapsible.is-open:focus`, `.spectrum-Menu-item--collapsible.is-open:hover`.
Defaults to `var(--spectrum-menu-item-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-label-line-height": {
+ "value": "var(--spectrum-menu-item-label-line-height)",
+ "description": "Used by `.spectrum-Menu-item`.
Defaults to `var(--spectrum-menu-item-label-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-min-height": {
+ "value": "var(--spectrum-menu-item-min-height)",
+ "description": "Used by `.spectrum-Menu-item`.
Defaults to `var(--spectrum-menu-item-min-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-bottom-edge-to-text": {
+ "value": "var(--spectrum-menu-item-bottom-edge-to-text)",
+ "description": "Used by `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon`.
Defaults to `var(--spectrum-menu-item-bottom-edge-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-top-to-checkbox": {
+ "value": "var(--spectrum-menu-item-top-to-checkbox)",
+ "description": "Used by `.spectrum-Menu-item .spectrum-Menu-itemCheckbox .spectrum-Checkbox-box`.
Defaults to `var(--spectrum-menu-item-top-to-checkbox)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-top-to-action": {
+ "value": "var(--spectrum-menu-item-top-to-action)",
+ "description": "Used by `.spectrum-Menu-item .spectrum-Menu-itemSwitch .spectrum-Switch-switch`.
Defaults to `var(--spectrum-menu-item-top-to-action)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-background-color-key-focus": {
+ "value": "var(--spectrum-menu-item-background-color-key-focus)",
+ "description": "Used by `.spectrum-Menu-item.is-focused, .spectrum-Menu-item:focus`.
Defaults to `var(--spectrum-menu-item-background-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-label-content-color-focus": {
+ "value": "var(--spectrum-menu-item-label-content-color-focus)",
+ "description": "Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemLabel, .spectrum-Menu-item:focus > .spectrum-Menu-itemLabel`.
Defaults to `var(--spectrum-menu-item-label-content-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-section-header-color": {
+ "value": "var(--spectrum-menu-section-header-color)",
+ "description": "Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-sectionHeading, .spectrum-Menu-item:focus > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item:active > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item:hover > .spectrum-Menu-sectionHeading`.
Defaults to `var(--spectrum-menu-section-header-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-description-color-focus": {
+ "value": "var(--spectrum-menu-item-description-color-focus)",
+ "description": "Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemDescription, .spectrum-Menu-item:focus > .spectrum-Menu-itemDescription`.
Defaults to `var(--spectrum-menu-item-description-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-value-color-focus": {
+ "value": "var(--spectrum-menu-item-value-color-focus)",
+ "description": "Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemValue, .spectrum-Menu-item:focus > .spectrum-Menu-itemValue`.
Defaults to `var(--spectrum-menu-item-value-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-label-icon-color-focus": {
+ "value": "var(--spectrum-menu-item-label-icon-color-focus)",
+ "description": "Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark), .spectrum-Menu-item:focus > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.
Defaults to `var(--spectrum-menu-item-label-icon-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-collapsible-icon-color": {
+ "value": "var(--spectrum-menu-collapsible-icon-color)",
+ "description": "Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-chevron, .spectrum-Menu-item:focus > .spectrum-Menu-chevron`, `.spectrum-Menu-item:active > .spectrum-Menu-chevron`, `.spectrum-Menu-item:hover > .spectrum-Menu-chevron`.
Defaults to `var(--spectrum-menu-collapsible-icon-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-checkmark-icon-color-focus": {
+ "value": "var(--spectrum-menu-checkmark-icon-color-focus)",
+ "description": "Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-checkmark, .spectrum-Menu-item:focus > .spectrum-Menu-checkmark`.
Defaults to `var(--spectrum-menu-checkmark-icon-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-background-color-down": {
+ "value": "var(--spectrum-menu-item-background-color-down)",
+ "description": "Used by `.spectrum-Menu-item:active`.
Defaults to `var(--spectrum-menu-item-background-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-label-content-color-down": {
+ "value": "var(--spectrum-menu-item-label-content-color-down)",
+ "description": "Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemLabel`.
Defaults to `var(--spectrum-menu-item-label-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-description-color-down": {
+ "value": "var(--spectrum-menu-item-description-color-down)",
+ "description": "Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemDescription`.
Defaults to `var(--spectrum-menu-item-description-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-value-color-down": {
+ "value": "var(--spectrum-menu-item-value-color-down)",
+ "description": "Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemValue`.
Defaults to `var(--spectrum-menu-item-value-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-label-icon-color-down": {
+ "value": "var(--spectrum-menu-item-label-icon-color-down)",
+ "description": "Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.
Defaults to `var(--spectrum-menu-item-label-icon-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-checkmark-icon-color-down": {
+ "value": "var(--spectrum-menu-checkmark-icon-color-down)",
+ "description": "Used by `.spectrum-Menu-item:active > .spectrum-Menu-checkmark`.
Defaults to `var(--spectrum-menu-checkmark-icon-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-label-content-color-disabled": {
+ "value": "var(--spectrum-menu-item-label-content-color-disabled)",
+ "description": "Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel, .spectrum-Menu-item.is-disabled .spectrum-Menu-itemValue, .spectrum-Menu-item.is-disabled .spectrum-Menu-sectionHeading, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemLabel, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemValue, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemLabel, .spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemValue, .spectrum-Menu-item.is-disabled:hover .spectrum-Menu-sectionHeading, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemLabel, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemValue, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-sectionHeading`.
Defaults to `var(--spectrum-menu-item-label-content-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-description-color-disabled": {
+ "value": "var(--spectrum-menu-item-description-color-disabled)",
+ "description": "Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemDescription, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemDescription`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemDescription, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemDescription`.
Defaults to `var(--spectrum-menu-item-description-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-label-icon-color-disabled": {
+ "value": "var(--spectrum-menu-item-label-icon-color-disabled)",
+ "description": "Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemIcon, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemIcon`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemIcon, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemIcon`.
Defaults to `var(--spectrum-menu-item-label-icon-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-label-font-size": {
+ "value": "var(--spectrum-menu-item-label-font-size)",
+ "description": "Used by `.spectrum-Menu-itemLabel`, `.spectrum-Menu-itemValue`.
Defaults to `var(--spectrum-menu-item-label-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-label-content-color-default": {
+ "value": "var(--spectrum-menu-item-label-content-color-default)",
+ "description": "Used by `.spectrum-Menu-itemLabel`.
Defaults to `var(--spectrum-menu-item-label-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-value-color-default": {
+ "value": "var(--spectrum-menu-item-value-color-default)",
+ "description": "Used by `.spectrum-Menu-itemValue`.
Defaults to `var(--spectrum-menu-item-value-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-label-to-value-area-min-spacing": {
+ "value": "var(--spectrum-menu-item-label-to-value-area-min-spacing)",
+ "description": "Used by `.spectrum-Menu-itemActions, .spectrum-Menu-itemValue`, `.spectrum-Menu-item--drillIn .spectrum-Menu-chevron`.
Defaults to `var(--spectrum-menu-item-label-to-value-area-min-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-section-header-font-size": {
+ "value": "var(--spectrum-menu-section-header-font-size)",
+ "description": "Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`.
Defaults to `var(--spectrum-menu-section-header-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-section-header-font-weight": {
+ "value": "var(--spectrum-menu-section-header-font-weight)",
+ "description": "Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`.
Defaults to `var(--spectrum-menu-section-header-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-section-header-line-height": {
+ "value": "var(--spectrum-menu-section-header-line-height)",
+ "description": "Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`.
Defaults to `var(--spectrum-menu-section-header-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-section-header-min-width": {
+ "value": "var(--spectrum-menu-section-header-min-width)",
+ "description": "Used by `.spectrum-Menu-sectionHeading`.
Defaults to `var(--spectrum-menu-section-header-min-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-section-header-top-edge-to-text": {
+ "value": "var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))",
+ "description": "Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon`.
Defaults to `var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-section-header-bottom-edge-to-text": {
+ "value": "var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text))",
+ "description": "Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon`.
Defaults to `var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-description-color-default": {
+ "value": "var(--spectrum-menu-item-description-color-default)",
+ "description": "Used by `.spectrum-Menu-itemDescription`.
Defaults to `var(--spectrum-menu-item-description-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-description-font-size": {
+ "value": "var(--spectrum-menu-item-description-font-size)",
+ "description": "Used by `.spectrum-Menu-itemDescription`.
Defaults to `var(--spectrum-menu-item-description-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-label-to-description-spacing": {
+ "value": "var(--spectrum-menu-item-label-to-description-spacing)",
+ "description": "Used by `.spectrum-Menu-itemDescription`.
Defaults to `var(--spectrum-menu-item-label-to-description-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-description-line-height": {
+ "value": "var(--spectrum-menu-item-description-line-height)",
+ "description": "Used by `.spectrum-Menu-itemDescription`.
Defaults to `var(--spectrum-menu-item-description-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start": {
+ "value": "var(--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start)",
+ "description": "Used by `.spectrum-Menu-item--collapsible .spectrum-Menu .spectrum-Menu-item`.
Defaults to `var(--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-drillin-icon-color-default": {
+ "value": "var(--spectrum-menu-drillin-icon-color-default)",
+ "description": "Used by `.spectrum-Menu-item--drillIn .spectrum-Menu-chevron`.
Defaults to `var(--spectrum-menu-drillin-icon-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-background-color-hover": {
+ "value": "var(--spectrum-menu-item-background-color-hover)",
+ "description": "Used by `--spectrum-menu-item-background-color-default`, `.spectrum-Menu-item:hover`.
Defaults to `var(--spectrum-menu-item-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-label-icon-color-hover": {
+ "value": "var(--spectrum-menu-item-label-icon-color-hover)",
+ "description": "Used by `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`, `.spectrum-Menu-item:hover > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.
Defaults to `var(--spectrum-menu-item-label-icon-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-drillin-icon-color-hover": {
+ "value": "var(--spectrum-menu-drillin-icon-color-hover)",
+ "description": "Used by `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-chevron`, `.spectrum-Menu-item--drillIn:hover .spectrum-Menu-chevron`.
Defaults to `var(--spectrum-menu-drillin-icon-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-checkmark-icon-color-hover": {
+ "value": "var(--spectrum-menu-checkmark-icon-color-hover)",
+ "description": "Used by `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-checkmark`, `.spectrum-Menu-item:hover > .spectrum-Menu-checkmark`.
Defaults to `var(--spectrum-menu-checkmark-icon-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-label-content-color-hover": {
+ "value": "var(--spectrum-menu-item-label-content-color-hover)",
+ "description": "Used by `.spectrum-Menu-item:hover > .spectrum-Menu-itemLabel`.
Defaults to `var(--spectrum-menu-item-label-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-description-color-hover": {
+ "value": "var(--spectrum-menu-item-description-color-hover)",
+ "description": "Used by `.spectrum-Menu-item:hover > .spectrum-Menu-itemDescription`.
Defaults to `var(--spectrum-menu-item-description-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-value-color-hover": {
+ "value": "var(--spectrum-menu-item-value-color-hover)",
+ "description": "Used by `.spectrum-Menu-item:hover > .spectrum-Menu-itemValue`.
Defaults to `var(--spectrum-menu-item-value-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-drillin-icon-color-focus": {
+ "value": "var(--spectrum-menu-drillin-icon-color-focus)",
+ "description": "Used by `.spectrum-Menu-item--drillIn.is-focused .spectrum-Menu-chevron, .spectrum-Menu-item--drillIn:focus .spectrum-Menu-chevron`.
Defaults to `var(--spectrum-menu-drillin-icon-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-drillin-icon-color-down": {
+ "value": "var(--spectrum-menu-drillin-icon-color-down)",
+ "description": "Used by `.spectrum-Menu-item--drillIn:active .spectrum-Menu-chevron`.
Defaults to `var(--spectrum-menu-drillin-icon-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-back-padding-inline-start": {
+ "description": "Used by `.spectrum-Menu-back`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-back-padding-inline-end": {
+ "value": "var(--spectrum-menu-item-label-inline-edge-to-content)",
+ "description": "Used by `.spectrum-Menu-back`.
Defaults to `var(--spectrum-menu-item-label-inline-edge-to-content)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-back-padding-block-start": {
+ "description": "Used by `.spectrum-Menu-back`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-back-padding-block-end": {
+ "description": "Used by `.spectrum-Menu-back`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-back-heading-color": {
+ "value": "var(--spectrum-menu-section-header-color)",
+ "description": "Used by `.spectrum-Menu-backHeading`.
Defaults to `var(--spectrum-menu-section-header-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-menu-item-focus-indicator-shadow": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus-within`, `.spectrum-Menu .spectrum-Menu-item--collapsible.is-open:hover`, `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-focus-indicator-border-width": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus-within`, `.spectrum-Menu .spectrum-Menu-item--collapsible.is-open:hover`, `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-focus-indicator-color-default": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus-within`, `.spectrum-Menu .spectrum-Menu-item--collapsible.is-open:hover`, `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-top-to-action": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item .spectrum-Menu-itemSwitch .spectrum-Switch-switch`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-top-to-checkbox": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item .spectrum-Menu-itemCheckbox .spectrum-Checkbox-box`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-line-height": {
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu:lang(ja), .spectrum-Menu:lang(ko), .spectrum-Menu:lang(zh)`.
Used by `.spectrum-Menu-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-line-height-cjk": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-item-label-line-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-to-description-spacing": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-itemDescription`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-to-description": {
+ "value": "1px",
+ "description": "Used by `--spectrum-menu-item-label-to-description-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-focus-indicator-width": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start`, `--spectrum-menu-item-focus-indicator-border-width`, `.spectrum-Menu-item`, `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-focus-indicator-color": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-item-focus-indicator-color-default`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-to-value-area-min-spacing": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-itemActions, .spectrum-Menu-itemValue`, `.spectrum-Menu-item--drillIn .spectrum-Menu-chevron`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-content-color-default": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-itemLabel`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-content-color-hover": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:hover > .spectrum-Menu-itemLabel`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-content-color-down": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemLabel`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-content-color-focus": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemLabel, .spectrum-Menu-item:focus > .spectrum-Menu-itemLabel`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-icon-color-default": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu .spectrum-Menu-itemIcon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-icon-color-hover": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`, `.spectrum-Menu-item:hover > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-icon-color-down": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-icon-color-focus": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark), .spectrum-Menu-item:focus > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-content-color-disabled": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel, .spectrum-Menu-item.is-disabled .spectrum-Menu-itemValue, .spectrum-Menu-item.is-disabled .spectrum-Menu-sectionHeading, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemLabel, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemValue, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemLabel, .spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemValue, .spectrum-Menu-item.is-disabled:hover .spectrum-Menu-sectionHeading, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemLabel, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemValue, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-sectionHeading`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-icon-color-disabled": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemIcon, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemIcon`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemIcon, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemIcon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-description-line-height": {
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu:lang(ja), .spectrum-Menu:lang(ko), .spectrum-Menu:lang(zh)`.
Used by `.spectrum-Menu-itemDescription`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-description-line-height-cjk": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-item-description-line-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-description-color-default": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-itemDescription`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-description-color-hover": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:hover > .spectrum-Menu-itemDescription`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-description-color-down": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemDescription`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-description-color-focus": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemDescription, .spectrum-Menu-item:focus > .spectrum-Menu-itemDescription`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-description-color-disabled": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemDescription, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemDescription`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemDescription, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemDescription`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-section-header-line-height": {
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu:lang(ja), .spectrum-Menu:lang(ko), .spectrum-Menu:lang(zh)`.
Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-section-header-line-height-cjk": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-section-header-line-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-section-header-font-weight": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-section-header-color": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu .spectrum-Menu-backIcon`, `.spectrum-Menu-item.is-focused > .spectrum-Menu-sectionHeading, .spectrum-Menu-item:focus > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item:active > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item:hover > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-collapsible-icon-color": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-chevron, .spectrum-Menu-item:focus > .spectrum-Menu-chevron`, `.spectrum-Menu-item:active > .spectrum-Menu-chevron`, `.spectrum-Menu-item:hover > .spectrum-Menu-chevron`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-checkmark-icon-color-default": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu .spectrum-Menu-checkmark`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-checkmark-icon-color-hover": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-checkmark`, `.spectrum-Menu-item:hover > .spectrum-Menu-checkmark`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-checkmark-icon-color-down": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:active > .spectrum-Menu-checkmark`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-checkmark-icon-color-focus": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-checkmark, .spectrum-Menu-item:focus > .spectrum-Menu-checkmark`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-drillin-icon-color-default": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item--drillIn .spectrum-Menu-chevron`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-drillin-icon-color-hover": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-chevron`, `.spectrum-Menu-item--drillIn:hover .spectrum-Menu-chevron`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-drillin-icon-color-down": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item--drillIn:active .spectrum-Menu-chevron`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-drillin-icon-color-focus": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item--drillIn.is-focused .spectrum-Menu-chevron, .spectrum-Menu-item--drillIn:focus .spectrum-Menu-chevron`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-value-color-default": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-itemValue`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-value-color-hover": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:hover > .spectrum-Menu-itemValue`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-value-color-down": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemValue`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-value-color-focus": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemValue, .spectrum-Menu-item:focus > .spectrum-Menu-itemValue`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-checkmark-display-hidden": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-checkmark-display`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-checkmark-display-shown": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-checkmark-display`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-checkmark-display": {
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.is-selectable .spectrum-Menu-item`, `.spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected`.
Used by `.spectrum-Menu .spectrum-Menu-checkmark`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-min-height": {
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-icon-height": {
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-icon-width": {
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-font-size": {
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu-itemLabel`, `.spectrum-Menu-itemValue`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-text-to-visual": {
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start`, `.spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-inline-edge-to-content": {
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start`, `.spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected`, `.spectrum-Menu .spectrum-Menu-divider`, `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible .spectrum-Menu`, `.spectrum-Menu-back`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-top-edge-to-text": {
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu .spectrum-Menu-checkmark`, `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-bottom-edge-to-text": {
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-text-to-control": {
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu .spectrum-Menu-checkmark, .spectrum-Menu .spectrum-Menu-chevron`, `.spectrum-Menu-item .spectrum-Menu-itemCheckbox .spectrum-Checkbox-box`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-description-font-size": {
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu-itemDescription`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-section-header-font-size": {
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-section-header-min-width": {
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu-sectionHeading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-selectable-edge-to-text-not-selected": {
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu.is-selectable .spectrum-Menu-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-selectable-edge-to-text-not-selected-medium": {
+ "description": "Used by `--spectrum-menu-item-selectable-edge-to-text-not-selected`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-checkmark-height": {
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu .spectrum-Menu-checkmark`, `.spectrum-Menu .spectrum-Menu-chevron`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-checkmark-height-medium": {
+ "description": "Used by `--spectrum-menu-item-checkmark-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-checkmark-width": {
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start`, `.spectrum-Menu .spectrum-Menu-checkmark`, `.spectrum-Menu .spectrum-Menu-chevron`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-checkmark-width-medium": {
+ "description": "Used by `--spectrum-menu-item-checkmark-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-top-to-checkmark": {
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu .spectrum-Menu-checkmark`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-top-to-selected-icon-medium": {
+ "value": "11px",
+ "description": "Used by `--spectrum-menu-item-top-to-checkmark`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-back-icon-margin": {
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu .spectrum-Menu-backIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item--collapsible .spectrum-Menu .spectrum-Menu-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-focus-indicator-direction-scalar": {
+ "description": "Defined in `.spectrum-Menu:dir(rtl), [dir=\"rtl\"] .spectrum-Menu`.
Used by `--spectrum-menu-item-focus-indicator-border-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-selectable-edge-to-text-not-selected-small": {
+ "description": "Used by `--spectrum-menu-item-selectable-edge-to-text-not-selected`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-checkmark-height-small": {
+ "description": "Used by `--spectrum-menu-item-checkmark-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-checkmark-width-small": {
+ "description": "Used by `--spectrum-menu-item-checkmark-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-top-to-selected-icon-small": {
+ "value": "7px",
+ "description": "Used by `--spectrum-menu-item-top-to-checkmark`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-selectable-edge-to-text-not-selected-large": {
+ "description": "Used by `--spectrum-menu-item-selectable-edge-to-text-not-selected`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-checkmark-height-large": {
+ "description": "Used by `--spectrum-menu-item-checkmark-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-checkmark-width-large": {
+ "description": "Used by `--spectrum-menu-item-checkmark-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-top-to-selected-icon-large": {
+ "value": "14px",
+ "description": "Used by `--spectrum-menu-item-top-to-checkmark`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large": {
+ "description": "Used by `--spectrum-menu-item-selectable-edge-to-text-not-selected`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-checkmark-height-extra-large": {
+ "description": "Used by `--spectrum-menu-item-checkmark-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-checkmark-width-extra-large": {
+ "description": "Used by `--spectrum-menu-item-checkmark-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-top-to-selected-icon-extra-large": {
+ "value": "17px",
+ "description": "Used by `--spectrum-menu-item-top-to-checkmark`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-divider-thickness": {
+ "description": "Defined in `.spectrum-Menu .spectrum-Menu-divider`, `.spectrum-Menu .spectrum-Menu-divider.spectrum-Divider--sizeS`.
Used by `.spectrum-Menu .spectrum-Menu-divider`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-section-divider-height": {
+ "value": "8px",
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-divider`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-corner-radius": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item`, `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-background-color-default": {
+ "description": "Defined in `.spectrum-Menu-item--drillIn.is-open`.
Used by `.spectrum-Menu-item`, `.spectrum-Menu-item--collapsible.is-open.is-focused, .spectrum-Menu-item--collapsible.is-open:active, .spectrum-Menu-item--collapsible.is-open:focus`, `.spectrum-Menu-item--collapsible.is-open:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-focus-indicator-offset": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item`, `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-spacing-multiplier": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-background-color-key-focus": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focused, .spectrum-Menu-item:focus`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-background-color-down": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-focus-indicator-outline-style": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-background-color-hover": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-item-background-color-default`, `.spectrum-Menu-item:hover`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-1000-rgb": {
+ "description": "Used by `--system-menu-item-background-color-hover`, `--system-menu-item-background-color-down`, `--system-menu-item-background-color-key-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-200-opacity": {
+ "description": "Used by `--system-menu-item-background-color-hover`, `--system-menu-item-background-color-down`, `--system-menu-item-background-color-key-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--system-menu-item-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-50": {
+ "value": "2px",
+ "description": "Used by `--system-menu-item-focus-indicator-offset`, `--spectrum-menu-item-top-to-action`, `--spectrum-menu-item-top-to-checkbox`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-menu-item-label-line-height`, `--spectrum-menu-item-description-line-height`, `--spectrum-menu-section-header-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-menu-item-label-line-height-cjk`, `--spectrum-menu-item-description-line-height-cjk`, `--spectrum-menu-section-header-line-height-cjk`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-menu-item-focus-indicator-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-blue-800": {
+ "value": "light-dark(rgb(75, 117, 255), rgb(64, 105, 253))",
+ "description": "Used by `--spectrum-menu-item-focus-indicator-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-menu-item-label-to-value-area-min-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-menu-item-label-content-color-default`, `--spectrum-menu-item-label-icon-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-menu-item-label-content-color-hover`, `--spectrum-menu-item-label-icon-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-menu-item-label-content-color-down`, `--spectrum-menu-item-label-icon-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-menu-item-label-content-color-focus`, `--spectrum-menu-item-label-icon-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-menu-item-label-content-color-disabled`, `--spectrum-menu-item-label-icon-color-disabled`, `--spectrum-menu-item-description-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Used by `--spectrum-menu-item-description-color-default`, `--spectrum-menu-drillin-icon-color-default`, `--spectrum-menu-item-value-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-hover": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-menu-item-description-color-hover`, `--spectrum-menu-drillin-icon-color-hover`, `--spectrum-menu-item-value-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-down": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-menu-item-description-color-down`, `--spectrum-menu-drillin-icon-color-down`, `--spectrum-menu-item-value-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-key-focus": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-menu-item-description-color-focus`, `--spectrum-menu-drillin-icon-color-focus`, `--spectrum-menu-item-value-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-bold-font-weight": {
+ "value": "700",
+ "description": "Used by `--spectrum-menu-section-header-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-900": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Used by `--spectrum-menu-section-header-color`, `--spectrum-menu-collapsible-icon-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-accent-color-900": {
+ "value": "var(--spectrum-blue-900)",
+ "description": "Used by `--spectrum-menu-checkmark-icon-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-color-1000": {
+ "value": "var(--spectrum-blue-1000)",
+ "description": "Used by `--spectrum-menu-checkmark-icon-color-hover`, `--spectrum-menu-checkmark-icon-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-color-1100": {
+ "value": "var(--spectrum-blue-1100)",
+ "description": "Used by `--spectrum-menu-checkmark-icon-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-menu-item-min-height`, `--spectrum-menu-section-header-min-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-menu-item-icon-height`, `--spectrum-menu-item-icon-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-menu-item-label-font-size`, `--spectrum-menu-section-header-font-size`, `--spectrum-menu-item-description-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-menu-item-label-text-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-100": {
+ "value": "12px",
+ "description": "Used by `--spectrum-menu-item-label-inline-edge-to-content`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-menu-item-top-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-100": {
+ "value": "9px",
+ "description": "Used by `--spectrum-menu-item-bottom-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-control-100": {
+ "value": "10px",
+ "description": "Used by `--spectrum-menu-item-text-to-control`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-menu-item-description-font-size`, `--spectrum-menu-item-label-font-size`, `--spectrum-menu-section-header-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-navigational-indicator-top-to-back-icon-medium": {
+ "value": "9px",
+ "description": "Used by `--spectrum-menu-back-icon-margin`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-menu-item-min-height`, `--spectrum-menu-section-header-min-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-75": {
+ "value": "16px",
+ "description": "Used by `--spectrum-menu-item-icon-height`, `--spectrum-menu-item-icon-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-menu-item-label-text-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-75": {
+ "value": "10px",
+ "description": "Used by `--spectrum-menu-item-label-inline-edge-to-content`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-menu-item-top-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-menu-item-bottom-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-control-75": {
+ "value": "9px",
+ "description": "Used by `--spectrum-menu-item-text-to-control`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-50": {
+ "value": "11px",
+ "description": "Used by `--spectrum-menu-item-description-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-navigational-indicator-top-to-back-icon-small": {
+ "value": "6px",
+ "description": "Used by `--spectrum-menu-back-icon-margin`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-menu-item-min-height`, `--spectrum-menu-section-header-min-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-200": {
+ "value": "22px",
+ "description": "Used by `--spectrum-menu-item-icon-height`, `--spectrum-menu-item-icon-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-menu-item-label-font-size`, `--spectrum-menu-section-header-font-size`, `--spectrum-menu-item-description-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-200": {
+ "value": "7px",
+ "description": "Used by `--spectrum-menu-item-label-text-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-200": {
+ "value": "15px",
+ "description": "Used by `--spectrum-menu-item-label-inline-edge-to-content`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-menu-item-top-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-200": {
+ "value": "11px",
+ "description": "Used by `--spectrum-menu-item-bottom-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-control-200": {
+ "value": "11px",
+ "description": "Used by `--spectrum-menu-item-text-to-control`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-navigational-indicator-top-to-back-icon-large": {
+ "value": "12px",
+ "description": "Used by `--spectrum-menu-back-icon-margin`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-menu-item-min-height`, `--spectrum-menu-section-header-min-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-300": {
+ "value": "26px",
+ "description": "Used by `--spectrum-menu-item-icon-height`, `--spectrum-menu-item-icon-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-menu-item-label-font-size`, `--spectrum-menu-section-header-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-300": {
+ "value": "8px",
+ "description": "Used by `--spectrum-menu-item-label-text-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-300": {
+ "value": "17px",
+ "description": "Used by `--spectrum-menu-item-label-inline-edge-to-content`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-300": {
+ "value": "12px",
+ "description": "Used by `--spectrum-menu-item-top-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-menu-item-bottom-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-control-300": {
+ "value": "13px",
+ "description": "Used by `--spectrum-menu-item-text-to-control`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-navigational-indicator-top-to-back-icon-extra-large": {
+ "value": "15px",
+ "description": "Used by `--spectrum-menu-back-icon-margin`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-divider-thickness-medium": {
+ "value": "2px",
+ "description": "Used by `--spectrum-menu-divider-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-divider-thickness-small": {
+ "value": "1px",
+ "description": "Used by `--spectrum-menu-divider-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `.spectrum-Menu-backButton:focus-visible`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `.spectrum-Menu-backButton:focus-visible`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-menu-item-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-menu-item-background-color-hover`.",
+ "control": "color"
+ },
+ "system-menu-item-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-menu-item-background-color-down`.",
+ "control": "color"
+ },
+ "system-menu-item-background-color-key-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-menu-item-background-color-key-focus`.",
+ "control": "color"
+ },
+ "system-menu-item-corner-radius": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-menu-item-corner-radius`.",
+ "control": "text"
+ },
+ "system-menu-item-focus-indicator-shadow": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-menu-item-focus-indicator-shadow`.",
+ "control": "text"
+ },
+ "system-menu-item-focus-indicator-offset": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-menu-item-focus-indicator-offset`.",
+ "control": "text"
+ },
+ "system-menu-item-spacing-multiplier": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-menu-item-spacing-multiplier`.",
+ "control": "text"
+ },
+ "system-menu-item-focus-indicator-outline-style": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-menu-item-focus-indicator-outline-style`.",
+ "control": "text"
+ }
+ },
+ "passthroughs": {
+ "mod-checkbox-top-to-text": {
+ "category": "Passthrough"
+ },
+ "mod-checkbox-text-to-control": {
+ "category": "Passthrough"
+ },
+ "mod-switch-control-label-spacing": {
+ "category": "Passthrough"
+ },
+ "mod-switch-spacing-top-to-label": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-menu-item-background-color-default": {
+ "value": "var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default))",
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu .spectrum-Menu-item--drillIn.is-open`.
Used by `.spectrum-Menu-item`, `.spectrum-Menu-item--collapsible.is-open.is-focused, .spectrum-Menu-item--collapsible.is-open:active, .spectrum-Menu-item--collapsible.is-open:focus`, `.spectrum-Menu-item--collapsible.is-open:hover`.
Defaults to `var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-menu-item-color-default": {
+ "value": "var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color))",
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu .spectrum-Menu-item--drillIn.is-open`.
Used by `--highcontrast-menu-item-color-focus`, `.spectrum-Menu .spectrum-Menu-itemIcon`, `.spectrum-Menu .spectrum-Menu-backIcon`, `.spectrum-Menu-itemLabel`, `.spectrum-Menu-itemValue`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-itemDescription`, `.spectrum-Menu-item--drillIn .spectrum-Menu-chevron`, `.spectrum-Menu-backHeading`.
Defaults to `var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-menu-item-background-color-focus": {
+ "value": "var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focused, .spectrum-Menu-item:focus`, `.spectrum-Menu-item:active`, `.spectrum-Menu-item:hover`.
Defaults to `var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-menu-item-color-focus": {
+ "value": "var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down))",
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu .spectrum-Menu-item--collapsible.is-open.is-focused, .spectrum-Menu .spectrum-Menu-item--collapsible.is-open:active, .spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus`, `.spectrum-Menu .spectrum-Menu-item--collapsible.is-open:hover`.
Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemLabel, .spectrum-Menu-item:focus > .spectrum-Menu-itemLabel`, `.spectrum-Menu-item.is-focused > .spectrum-Menu-sectionHeading, .spectrum-Menu-item:focus > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemDescription, .spectrum-Menu-item:focus > .spectrum-Menu-itemDescription`, `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemValue, .spectrum-Menu-item:focus > .spectrum-Menu-itemValue`, `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark), .spectrum-Menu-item:focus > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`, `.spectrum-Menu-item.is-focused > .spectrum-Menu-chevron, .spectrum-Menu-item:focus > .spectrum-Menu-chevron`, `.spectrum-Menu-item.is-focused > .spectrum-Menu-checkmark, .spectrum-Menu-item:focus > .spectrum-Menu-checkmark`, `.spectrum-Menu-item:active > .spectrum-Menu-itemLabel`, `.spectrum-Menu-item:active > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item:active > .spectrum-Menu-itemDescription`, `.spectrum-Menu-item:active > .spectrum-Menu-itemValue`, `.spectrum-Menu-item:active > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`, `.spectrum-Menu-item:active > .spectrum-Menu-chevron`, `.spectrum-Menu-item:active > .spectrum-Menu-checkmark`, `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`, `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-chevron`, `.spectrum-Menu-item:hover > .spectrum-Menu-itemLabel`, `.spectrum-Menu-item:hover > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item:hover > .spectrum-Menu-itemDescription`, `.spectrum-Menu-item:hover > .spectrum-Menu-itemValue`, `.spectrum-Menu-item:hover > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`, `.spectrum-Menu-item:hover > .spectrum-Menu-chevron`, `.spectrum-Menu-item:hover > .spectrum-Menu-checkmark`, `.spectrum-Menu-item--drillIn:hover .spectrum-Menu-chevron`, `.spectrum-Menu-item--drillIn.is-focused .spectrum-Menu-chevron, .spectrum-Menu-item--drillIn:focus .spectrum-Menu-chevron`, `.spectrum-Menu-item--drillIn:active .spectrum-Menu-chevron`.
Defaults to `var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-menu-checkmark-icon-color-default": {
+ "value": "var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu .spectrum-Menu-checkmark`, `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-checkmark`.
Defaults to `var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-menu-item-color-disabled": {
+ "value": "var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel, .spectrum-Menu-item.is-disabled .spectrum-Menu-itemValue, .spectrum-Menu-item.is-disabled .spectrum-Menu-sectionHeading, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemLabel, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemValue, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemDescription, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemDescription`, `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemIcon, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemIcon`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemLabel, .spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemValue, .spectrum-Menu-item.is-disabled:hover .spectrum-Menu-sectionHeading, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemLabel, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemValue, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemDescription, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemDescription`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemIcon, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemIcon`.
Defaults to `var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-menu-item-focus-indicator-color": {
+ "value": "var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))",
+ "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-item-focus-indicator-color-default`.
Defaults to `var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-menu-item-selected-background-color": {
+ "value": "var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))",
+ "description": "Defined in `.spectrum-Menu`.
Used by `--highcontrast-menu-item-background-color-default`, `--spectrum-menu-item-background-color-default`.
Defaults to `var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-menu-item-selected-color": {
+ "description": "Defined in `.spectrum-Menu`.
Used by `--highcontrast-menu-item-color-default`.",
+ "control": "color"
+ },
+ "highcontrast-checkbox-highlight-color-hover": {
+ "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemCheckbox`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemCheckbox`.",
+ "control": "color"
+ },
+ "highcontrast-checkbox-highlight-color-default": {
+ "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemCheckbox`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemCheckbox`.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-border-color-hover": {
+ "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch`.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-border-color-selected-default": {
+ "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch`.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-border-color-selected-hover": {
+ "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch`.",
+ "control": "color"
+ },
+ "highcontrast-switch-background-color-selected-default": {
+ "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch`.",
+ "control": "color"
+ },
+ "highcontrast-switch-background-color-selected-hover": {
+ "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch`.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/menu/stories/menu.stories.js b/components/menu/stories/menu.stories.js
index 23f82bfd300..6a4828193c7 100644
--- a/components/menu/stories/menu.stories.js
+++ b/components/menu/stories/menu.stories.js
@@ -2,11 +2,13 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isActive, isDisabled, isFocused, isHovered, isSelected, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { MenuItemGroup, MenuTraySubmenu, MenuWithVariants } from "./menu.test.js";
import { DisabledItemGroup, OverflowGroup, SelectionGroup, SubmenuInPopover, Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* A menu is used for creating a menu list. The various elements inside a menu can be: a menu group, a menu item, or a
* menu divider. Often a menu will appear in a popover so that it displays as a toggling menu.
@@ -88,6 +90,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/menu/stories/template.js b/components/menu/stories/template.js
index c50482cb696..feae8f6270c 100644
--- a/components/menu/stories/template.js
+++ b/components/menu/stories/template.js
@@ -41,7 +41,7 @@ export const MenuItem = (
iconName,
iconSet = "workflow",
hasActions = false,
- id = getRandomId("menuitem"),
+ id = getRandomId("menu-item"),
idx = 0,
isActive = false,
isCollapsible = false,
@@ -226,7 +226,7 @@ export const MenuGroup = (
{
hasActions = false,
heading,
- id = getRandomId("menugroup"),
+ id = getRandomId("menu-group"),
idx = 0,
items = [],
isDisabled = false,
diff --git a/components/meter/dist/metadata.json b/components/meter/dist/metadata.json
index 9bfe3424ce7..2e2df6ca298 100644
--- a/components/meter/dist/metadata.json
+++ b/components/meter/dist/metadata.json
@@ -8,36 +8,125 @@
".spectrum-Meter.spectrum-Meter--sizeL",
".spectrum-Meter.spectrum-Meter--sizeS"
],
- "modifiers": [
- "--mod-meter-inline-size",
- "--mod-meter-max-width",
- "--mod-meter-min-width"
- ],
- "component": [
- "--spectrum-meter-default-width",
- "--spectrum-meter-maximum-width",
- "--spectrum-meter-minimum-width",
- "--spectrum-meter-thickness-large",
- "--spectrum-meter-thickness-small"
- ],
- "global": [
- "--spectrum-component-top-to-text-200",
- "--spectrum-component-top-to-text-75",
- "--spectrum-font-size-100",
- "--spectrum-font-size-75",
- "--spectrum-negative-visual-color",
- "--spectrum-notice-visual-color",
- "--spectrum-positive-visual-color"
- ],
- "system-theme": [],
- "passthroughs": [
- "--mod-progressbar-fill-color",
- "--mod-progressbar-font-size",
- "--mod-progressbar-max-size",
- "--mod-progressbar-min-size",
- "--mod-progressbar-size-default",
- "--mod-progressbar-spacing-top-to-text",
- "--mod-progressbar-thickness"
- ],
- "high-contrast": []
+ "modifiers": {
+ "mod-meter-inline-size": {
+ "value": "var(--spectrum-meter-width)",
+ "description": "Used by `--mod-progressbar-size-default`.
Defaults to `var(--spectrum-meter-default-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-meter-max-width": {
+ "value": "768px",
+ "description": "Used by `--mod-progressbar-max-size`.
Defaults to `var(--spectrum-meter-maximum-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-meter-min-width": {
+ "value": "48px",
+ "description": "Used by `--mod-progressbar-min-size`.
Defaults to `var(--spectrum-meter-minimum-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-meter-default-width": {
+ "value": "var(--spectrum-meter-width)",
+ "description": "Used by `--mod-progressbar-size-default`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-meter-maximum-width": {
+ "value": "768px",
+ "description": "Used by `--mod-progressbar-max-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-meter-minimum-width": {
+ "value": "48px",
+ "description": "Used by `--mod-progressbar-min-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-meter-thickness-small": {
+ "value": "4px",
+ "description": "Used by `--mod-progressbar-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-meter-thickness-large": {
+ "value": "6px",
+ "description": "Used by `--mod-progressbar-thickness`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--mod-progressbar-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--mod-progressbar-spacing-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--mod-progressbar-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--mod-progressbar-spacing-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-positive-visual-color": {
+ "value": "var(--spectrum-positive-color-900)",
+ "description": "Used by `--mod-progressbar-fill-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-notice-visual-color": {
+ "value": "var(--spectrum-notice-color-900)",
+ "description": "Used by `--mod-progressbar-fill-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-visual-color": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Used by `--mod-progressbar-fill-color`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {
+ "mod-progressbar-size-default": {
+ "category": "Passthrough"
+ },
+ "mod-progressbar-max-size": {
+ "category": "Passthrough"
+ },
+ "mod-progressbar-min-size": {
+ "category": "Passthrough"
+ },
+ "mod-progressbar-thickness": {
+ "category": "Passthrough"
+ },
+ "mod-progressbar-font-size": {
+ "category": "Passthrough"
+ },
+ "mod-progressbar-spacing-top-to-text": {
+ "category": "Passthrough"
+ },
+ "mod-progressbar-fill-color": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {}
}
diff --git a/components/meter/stories/meter.stories.js b/components/meter/stories/meter.stories.js
index 15603bc9d7c..bec71ff90a8 100644
--- a/components/meter/stories/meter.stories.js
+++ b/components/meter/stories/meter.stories.js
@@ -2,11 +2,13 @@ import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { size } from "@spectrum-css/preview/types";
import { default as ProgressBar } from "@spectrum-css/progressbar/stories/progressbar.stories.js";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { MeterGroup } from "./meter.test.js";
import { FillGroup, Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The meter component is a visual representations of a quantity or an achievement. The progress is determined by user actions, rather than system actions.
*
@@ -47,6 +49,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/miller/dist/metadata.json b/components/miller/dist/metadata.json
index adb2109144c..fdae33a51d1 100644
--- a/components/miller/dist/metadata.json
+++ b/components/miller/dist/metadata.json
@@ -5,15 +5,41 @@
".spectrum-MillerColumns-item",
".spectrum-MillerColumns-item:first-child"
],
- "modifiers": [
- "--mod-millercolumns-inline-size",
- "--mod-millercolumns-margin-inline-end",
- "--mod-millercolumns-margin-inline-start",
- "--mod-millercolumns-padding"
- ],
- "component": [],
- "global": ["--spectrum-spacing-100"],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-millercolumns-padding": {
+ "value": "8px",
+ "description": "Used by `.spectrum-MillerColumns`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-millercolumns-inline-size": {
+ "description": "Used by `.spectrum-MillerColumns-item`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-millercolumns-margin-inline-end": {
+ "value": "8px",
+ "description": "Used by `.spectrum-MillerColumns-item`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-millercolumns-margin-inline-start": {
+ "value": "8px",
+ "description": "Used by `.spectrum-MillerColumns-item:first-child`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {},
+ "global": {
+ "spectrum-spacing-100": {
+ "value": "8px",
+ "description": "Used by `.spectrum-MillerColumns`, `.spectrum-MillerColumns-item`, `.spectrum-MillerColumns-item:first-child`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/miller/stories/miller.stories.js b/components/miller/stories/miller.stories.js
index a255362e891..16ef2ac2869 100644
--- a/components/miller/stories/miller.stories.js
+++ b/components/miller/stories/miller.stories.js
@@ -1,9 +1,11 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { MillerGroup } from "./miller.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* Miller columns are a browsing/visualization technique that can be applied to tree structures. The columns allow for multiple levels of the hierarchy to be open at once and provide a visual representation of the current location.
*/
@@ -79,6 +81,7 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/modal/dist/metadata.json b/components/modal/dist/metadata.json
index 950d9fca3c6..93e928e2c92 100644
--- a/components/modal/dist/metadata.json
+++ b/components/modal/dist/metadata.json
@@ -11,42 +11,175 @@
".spectrum-Modal-wrapper.is-open",
".spectrum-Modal.is-open"
],
- "modifiers": [
- "--mod-modal-background-color",
- "--mod-modal-confirm-border-radius",
- "--mod-modal-confirm-entry-animation-delay",
- "--mod-modal-confirm-entry-animation-distance",
- "--mod-modal-confirm-entry-animation-duration",
- "--mod-modal-confirm-exit-animation-delay",
- "--mod-modal-confirm-exit-animation-duration",
- "--mod-modal-fullscreen-margin",
- "--mod-modal-max-height",
- "--mod-modal-max-width",
- "--mod-modal-transition-animation-duration",
- "--mod-overlay-animation-duration",
- "--mod-overlay-animation-duration-opened"
- ],
- "component": [
- "--spectrum-modal-background-color",
- "--spectrum-modal-confirm-entry-animation-delay",
- "--spectrum-modal-confirm-entry-animation-duration",
- "--spectrum-modal-confirm-exit-animation-delay",
- "--spectrum-modal-confirm-exit-animation-duration",
- "--spectrum-modal-fullscreen-margin"
- ],
- "global": [
- "--spectrum-animation-duration-0",
- "--spectrum-animation-duration-100",
- "--spectrum-animation-duration-200",
- "--spectrum-animation-duration-500",
- "--spectrum-animation-ease-in",
- "--spectrum-animation-ease-out",
- "--spectrum-animation-linear",
- "--spectrum-background-layer-2-color",
- "--spectrum-corner-radius-100",
- "--spectrum-dialog-confirm-entry-animation-distance"
- ],
- "system-theme": ["--system-modal-background-color"],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-modal-confirm-entry-animation-duration": {
+ "value": "var(--spectrum-animation-duration-500)",
+ "description": "Used by `--spectrum-modal-confirm-entry-animation-duration`.
Defaults to `var(--spectrum-animation-duration-500)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-overlay-animation-duration-opened": {
+ "value": "var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200))",
+ "description": "Used by `--spectrum-modal-confirm-entry-animation-delay`.
Defaults to `var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-modal-confirm-entry-animation-delay": {
+ "value": "var(--spectrum-animation-duration-200)",
+ "description": "Used by `--spectrum-modal-confirm-entry-animation-delay`.
Defaults to `var(--spectrum-animation-duration-200)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-overlay-animation-duration": {
+ "value": "var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100))",
+ "description": "Used by `--spectrum-modal-confirm-exit-animation-duration`.
Defaults to `var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-modal-confirm-exit-animation-duration": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Used by `--spectrum-modal-confirm-exit-animation-duration`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-modal-confirm-exit-animation-delay": {
+ "value": "var(--spectrum-animation-duration-0)",
+ "description": "Used by `--spectrum-modal-confirm-exit-animation-delay`.
Defaults to `var(--spectrum-animation-duration-0)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-modal-fullscreen-margin": {
+ "description": "Used by `--spectrum-modal-fullscreen-margin`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-modal-transition-animation-duration": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Used by `.spectrum-Modal-wrapper`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-modal-confirm-entry-animation-distance": {
+ "value": "var(--spectrum-dialog-confirm-entry-animation-distance)",
+ "description": "Used by `.spectrum-Modal`.
Defaults to `var(--spectrum-dialog-confirm-entry-animation-distance)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-modal-max-height": {
+ "description": "Used by `.spectrum-Modal`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-modal-max-width": {
+ "description": "Used by `.spectrum-Modal`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-modal-background-color": {
+ "value": "var(--spectrum-modal-background-color)",
+ "description": "Used by `.spectrum-Modal`.
Defaults to `var(--spectrum-modal-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-modal-confirm-border-radius": {
+ "value": "8px",
+ "description": "Used by `.spectrum-Modal`.
Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-modal-confirm-entry-animation-duration": {
+ "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal.is-open`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-modal-confirm-entry-animation-delay": {
+ "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal.is-open`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-modal-confirm-exit-animation-duration": {
+ "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-modal-confirm-exit-animation-delay": {
+ "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-modal-fullscreen-margin": {
+ "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal--fullscreen`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-modal-background-color": {
+ "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-background-layer-2-color": {
+ "value": "var(--spectrum-gray-75)",
+ "description": "Used by `--system-modal-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-500": {
+ "description": "Used by `--spectrum-modal-confirm-entry-animation-duration`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-200": {
+ "description": "Used by `--spectrum-modal-confirm-entry-animation-delay`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `--spectrum-modal-confirm-exit-animation-duration`, `.spectrum-Modal-wrapper`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-0": {
+ "description": "Used by `--spectrum-modal-confirm-exit-animation-delay`, `.spectrum-Modal`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-dialog-confirm-entry-animation-distance": {
+ "description": "Used by `.spectrum-Modal`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `.spectrum-Modal`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-ease-in": {
+ "description": "Used by `.spectrum-Modal`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-linear": {
+ "description": "Used by `.spectrum-Modal`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-ease-out": {
+ "description": "Used by `.spectrum-Modal.is-open`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-modal-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-modal-background-color`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/modal/stories/modal.stories.js b/components/modal/stories/modal.stories.js
index a4ce483de5f..511dd56bdcb 100644
--- a/components/modal/stories/modal.stories.js
+++ b/components/modal/stories/modal.stories.js
@@ -2,9 +2,11 @@ import { withUnderlayWrapper } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isOpen } from "@spectrum-css/preview/types";
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
+import { ModalGroup } from "./modal.test.js";
+
+// Local assets to render the component styles and structure
import metadata from "../dist/metadata.json";
import packageJson from "../package.json";
-import { ModalGroup } from "./modal.test.js";
/**
* A modal component is a dialog box/popup window that is displayed on top of the current page using `position: fixed`.
@@ -51,6 +53,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
decorators: [
withUnderlayWrapper,
diff --git a/components/opacitycheckerboard/dist/metadata.json b/components/opacitycheckerboard/dist/metadata.json
index 51c1a155873..733b68b1178 100644
--- a/components/opacitycheckerboard/dist/metadata.json
+++ b/components/opacitycheckerboard/dist/metadata.json
@@ -1,19 +1,53 @@
{
"sourceFile": "index.css",
"selectors": [".spectrum-OpacityCheckerboard"],
- "modifiers": [
- "--mod-opacity-checkerboard-dark",
- "--mod-opacity-checkerboard-light",
- "--mod-opacity-checkerboard-position",
- "--mod-opacity-checkerboard-size"
- ],
- "component": [
- "--spectrum-opacity-checkerboard-square-dark",
- "--spectrum-opacity-checkerboard-square-light",
- "--spectrum-opacity-checkerboard-square-size"
- ],
- "global": [],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-opacity-checkerboard-light": {
+ "value": "var(--spectrum-white)",
+ "description": "Used by `.spectrum-OpacityCheckerboard`.
Defaults to `var(--spectrum-opacity-checkerboard-square-light)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-opacity-checkerboard-dark": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `.spectrum-OpacityCheckerboard`.
Defaults to `var(--spectrum-opacity-checkerboard-square-dark)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-opacity-checkerboard-position": {
+ "description": "Used by `.spectrum-OpacityCheckerboard`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-opacity-checkerboard-size": {
+ "value": "8px",
+ "description": "Used by `.spectrum-OpacityCheckerboard`.
Defaults to `var(--spectrum-opacity-checkerboard-square-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-opacity-checkerboard-square-light": {
+ "value": "var(--spectrum-white)",
+ "description": "Used by `.spectrum-OpacityCheckerboard`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-opacity-checkerboard-square-dark": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `.spectrum-OpacityCheckerboard`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-opacity-checkerboard-square-size": {
+ "value": "8px",
+ "description": "Used by `.spectrum-OpacityCheckerboard`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {},
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
index e908a5cd05b..577a4e946a3 100644
--- a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
+++ b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
@@ -1,9 +1,11 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { OpacityCheckboardGroup } from "./opacitycheckerboard.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* Opacity checkerboard is used with other components to highlight opacity.
*/
@@ -32,6 +34,7 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/page/dist/metadata.json b/components/page/dist/metadata.json
index cb8c8163de8..23358041739 100644
--- a/components/page/dist/metadata.json
+++ b/components/page/dist/metadata.json
@@ -1,16 +1,56 @@
{
"sourceFile": "index.css",
"selectors": [":root"],
- "modifiers": ["--mod-page-background", "--mod-page-content-tap-highlight"],
- "component": [
- "--spectrum-page-background-color",
- "--spectrum-page-content-tap-highlight"
- ],
- "global": ["--spectrum-gray-75", "--spectrum-transparent-black-25"],
- "system-theme": [
- "--system-root-page-background-color",
- "--system-root-page-content-tap-highlight"
- ],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-page-background": {
+ "value": "var(--spectrum-page-background-color)",
+ "description": "Used by `:root`.
Defaults to `var(--spectrum-page-background-color)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-page-content-tap-highlight": {
+ "value": "var(--spectrum-page-content-tap-highlight)",
+ "description": "Used by `:root`.
Defaults to `var(--spectrum-page-content-tap-highlight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-page-background-color": {
+ "description": "Defined in `:root`.
Used by `:root`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-page-content-tap-highlight": {
+ "description": "Defined in `:root`.
Used by `:root`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-75": {
+ "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+ "description": "Used by `--system-root-page-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-25": {
+ "value": "light-dark(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0))",
+ "description": "Used by `--system-root-page-content-tap-highlight`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-root-page-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-page-background-color`.",
+ "control": "color"
+ },
+ "system-root-page-content-tap-highlight": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-page-content-tap-highlight`.",
+ "control": "text"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/pagination/dist/metadata.json b/components/pagination/dist/metadata.json
index 7a0b21fe8dd..abb0fa98f9b 100644
--- a/components/pagination/dist/metadata.json
+++ b/components/pagination/dist/metadata.json
@@ -13,28 +13,103 @@
".spectrum-Pagination:dir(rtl)",
"[dir=\"rtl\"] .spectrum-Pagination"
],
- "modifiers": [
- "--mod-pagination-counter-color",
- "--mod-pagination-counter-font-size",
- "--mod-pagination-counter-line-height",
- "--mod-pagination-page-button-inline-spacing",
- "--mod-pagination-textfield-width"
- ],
- "component": [
- "--spectrum-pagination-counter-color",
- "--spectrum-pagination-counter-font-size",
- "--spectrum-pagination-counter-inline-spacing",
- "--spectrum-pagination-counter-line-height",
- "--spectrum-pagination-item-inline-spacing",
- "--spectrum-pagination-textfield-width"
- ],
- "global": [
- "--spectrum-font-size-100",
- "--spectrum-line-height-100",
- "--spectrum-logical-rotation",
- "--spectrum-neutral-subdued-content-color-default"
- ],
- "system-theme": [],
- "passthroughs": ["--mod-textfield-min-width", "--mod-textfield-width"],
- "high-contrast": []
+ "modifiers": {
+ "mod-pagination-counter-color": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Used by `--spectrum-pagination-counter-color`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-pagination-counter-font-size": {
+ "value": "14px",
+ "description": "Used by `--spectrum-pagination-counter-font-size`.
Defaults to `var(--spectrum-font-size-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-pagination-counter-line-height": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-pagination-counter-line-height`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-pagination-page-button-inline-spacing": {
+ "value": "var(--spectrum-pagination-item-inline-spacing)",
+ "description": "Used by `--spectrum-pagination-counter-inline-spacing`.
Defaults to `var(--spectrum-pagination-item-inline-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-pagination-textfield-width": {
+ "value": "var(--spectrum-pagination-textfield-width)",
+ "description": "Used by `--mod-textfield-width`, `--mod-textfield-min-width`.
Defaults to `var(--spectrum-pagination-textfield-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-pagination-counter-color": {
+ "description": "Defined in `.spectrum-Pagination`.
Used by `.spectrum-Pagination-counter`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-pagination-counter-font-size": {
+ "description": "Defined in `.spectrum-Pagination`.
Used by `.spectrum-Pagination-counter`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-pagination-counter-line-height": {
+ "description": "Defined in `.spectrum-Pagination`.
Used by `.spectrum-Pagination-counter`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-pagination-counter-inline-spacing": {
+ "description": "Defined in `.spectrum-Pagination`.
Used by `.spectrum-Pagination-counter, .spectrum-Pagination-nextButton`, `.spectrum-Pagination-prevButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-pagination-item-inline-spacing": {
+ "description": "Used by `--spectrum-pagination-counter-inline-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-pagination-textfield-width": {
+ "description": "Used by `--mod-textfield-width`, `--mod-textfield-min-width`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-neutral-subdued-content-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Used by `--spectrum-pagination-counter-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-pagination-counter-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-pagination-counter-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-logical-rotation": {
+ "description": "Defined in `.spectrum-Pagination:dir(rtl), [dir=\"rtl\"] .spectrum-Pagination`.
Used by `.spectrum-Pagination-nextButton .spectrum-Icon`, `.spectrum-Pagination-prevButton .spectrum-Icon`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {
+ "mod-textfield-width": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-min-width": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {}
}
diff --git a/components/pagination/stories/pagination.stories.js b/components/pagination/stories/pagination.stories.js
index 7fa6fa909e1..6b41f929d03 100644
--- a/components/pagination/stories/pagination.stories.js
+++ b/components/pagination/stories/pagination.stories.js
@@ -1,11 +1,13 @@
import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { PaginationGroup } from "./pagination.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The pagination component displays numbered buttons or an input field to allow for navigation.
*/
@@ -70,6 +72,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json
index e2c3b4e5c0a..df11d23c4bf 100644
--- a/components/picker/dist/metadata.json
+++ b/components/picker/dist/metadata.json
@@ -2,23 +2,23 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-Picker",
- ".spectrum-Picker + .spectrum-Popover--bottom.is-open",
".spectrum-Picker .spectrum-Picker-icon",
".spectrum-Picker .spectrum-Picker-label",
".spectrum-Picker .spectrum-ProgressCircle",
+ ".spectrum-Picker + .spectrum-Popover--bottom.is-open",
".spectrum-Picker--quiet",
".spectrum-Picker--quiet .spectrum-Picker-menuIcon",
- ".spectrum-Picker--quiet.is-keyboardFocused",
- ".spectrum-Picker--quiet.is-keyboardFocused:after",
- ".spectrum-Picker--quiet.is-open",
- ".spectrum-Picker--quiet.spectrum-Picker--sideLabel",
- ".spectrum-Picker--quiet.spectrum-Picker.is-disabled",
- ".spectrum-Picker--quiet.spectrum-Picker:disabled",
".spectrum-Picker--quiet:active",
".spectrum-Picker--quiet:after",
".spectrum-Picker--quiet:focus-visible",
".spectrum-Picker--quiet:focus-visible:after",
".spectrum-Picker--quiet:hover",
+ ".spectrum-Picker--quiet.is-keyboardFocused",
+ ".spectrum-Picker--quiet.is-keyboardFocused:after",
+ ".spectrum-Picker--quiet.is-open",
+ ".spectrum-Picker--quiet.spectrum-Picker--sideLabel",
+ ".spectrum-Picker--quiet.spectrum-Picker:disabled",
+ ".spectrum-Picker--quiet.spectrum-Picker.is-disabled",
".spectrum-Picker--sideLabel",
".spectrum-Picker--sizeL",
".spectrum-Picker--sizeL + .spectrum-Popover--bottom.is-open",
@@ -34,20 +34,36 @@
".spectrum-Picker-menuIcon",
".spectrum-Picker-menuIcon:active",
".spectrum-Picker-validationIcon",
+ ".spectrum-Picker::-moz-focus-inner",
+ ".spectrum-Picker:active",
+ ".spectrum-Picker:active:after",
+ ".spectrum-Picker:after",
+ ".spectrum-Picker:disabled",
+ ".spectrum-Picker:disabled .spectrum-Picker-icon",
+ ".spectrum-Picker:disabled .spectrum-Picker-label.is-placeholder",
+ ".spectrum-Picker:disabled .spectrum-Picker-menuIcon",
+ ".spectrum-Picker:disabled .spectrum-Picker-validationIcon",
+ ".spectrum-Picker:focus",
+ ".spectrum-Picker:focus-visible",
+ ".spectrum-Picker:focus-visible .spectrum-Picker-label.is-placeholder",
+ ".spectrum-Picker:focus-visible .spectrum-Picker-menuIcon",
+ ".spectrum-Picker:focus-visible:after",
+ ".spectrum-Picker:hover",
+ ".spectrum-Picker:hover .spectrum-Picker-menuIcon",
".spectrum-Picker.is-disabled",
".spectrum-Picker.is-disabled .spectrum-Picker-icon",
".spectrum-Picker.is-disabled .spectrum-Picker-label.is-placeholder",
".spectrum-Picker.is-disabled .spectrum-Picker-menuIcon",
".spectrum-Picker.is-disabled .spectrum-Picker-validationIcon",
".spectrum-Picker.is-invalid .spectrum-Picker-label",
- ".spectrum-Picker.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled)",
- ".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled)",
- ".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled):hover",
".spectrum-Picker.is-invalid:not(:disabled, .is-disabled)",
".spectrum-Picker.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon",
".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):active",
".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):focus-visible",
".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):hover",
+ ".spectrum-Picker.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled)",
+ ".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled)",
+ ".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled):hover",
".spectrum-Picker.is-keyboardFocused",
".spectrum-Picker.is-keyboardFocused .spectrum-Picker-label.is-placeholder",
".spectrum-Picker.is-keyboardFocused .spectrum-Picker-menuIcon",
@@ -58,280 +74,1387 @@
".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled) .spectrum-Picker-menuIcon",
".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover",
".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover .spectrum-Picker-menuIcon",
- ".spectrum-Picker.is-placeholder:active .spectrum-Picker-label",
- ".spectrum-Picker::-moz-focus-inner",
- ".spectrum-Picker:active",
- ".spectrum-Picker:active:after",
- ".spectrum-Picker:after",
- ".spectrum-Picker:disabled",
- ".spectrum-Picker:disabled .spectrum-Picker-icon",
- ".spectrum-Picker:disabled .spectrum-Picker-label.is-placeholder",
- ".spectrum-Picker:disabled .spectrum-Picker-menuIcon",
- ".spectrum-Picker:disabled .spectrum-Picker-validationIcon",
- ".spectrum-Picker:focus",
- ".spectrum-Picker:focus-visible",
- ".spectrum-Picker:focus-visible .spectrum-Picker-label.is-placeholder",
- ".spectrum-Picker:focus-visible .spectrum-Picker-menuIcon",
- ".spectrum-Picker:focus-visible:after",
- ".spectrum-Picker:hover",
- ".spectrum-Picker:hover .spectrum-Picker-menuIcon"
- ],
- "modifiers": [
- "--mod-animation-duration-100",
- "--mod-line-height-100",
- "--mod-picker-animation-duration",
- "--mod-picker-background-color-active",
- "--mod-picker-background-color-default",
- "--mod-picker-background-color-default-open",
- "--mod-picker-background-color-disabled",
- "--mod-picker-background-color-hover",
- "--mod-picker-background-color-hover-open",
- "--mod-picker-background-color-key-focus",
- "--mod-picker-block-size",
- "--mod-picker-border-active",
- "--mod-picker-border-color-default",
- "--mod-picker-border-color-error-active",
- "--mod-picker-border-color-error-default",
- "--mod-picker-border-color-error-default-open",
- "--mod-picker-border-color-error-hover",
- "--mod-picker-border-color-error-hover-open",
- "--mod-picker-border-color-error-key-focus",
- "--mod-picker-border-color-hover",
- "--mod-picker-border-color-hover-open",
- "--mod-picker-border-color-key-focus",
- "--mod-picker-border-default-open",
- "--mod-picker-border-radius",
- "--mod-picker-border-width",
- "--mod-picker-focus-indicator-color",
- "--mod-picker-focus-indicator-gap",
- "--mod-picker-focus-indicator-thickness",
- "--mod-picker-font-color-active",
- "--mod-picker-font-color-default",
- "--mod-picker-font-color-default-open",
- "--mod-picker-font-color-disabled",
- "--mod-picker-font-color-hover",
- "--mod-picker-font-color-hover-open",
- "--mod-picker-font-color-key-focus",
- "--mod-picker-font-size",
- "--mod-picker-font-weight",
- "--mod-picker-icon-color-active",
- "--mod-picker-icon-color-default",
- "--mod-picker-icon-color-default-open",
- "--mod-picker-icon-color-disabled",
- "--mod-picker-icon-color-error",
- "--mod-picker-icon-color-hover",
- "--mod-picker-icon-color-hover-open",
- "--mod-picker-icon-color-key-focus",
- "--mod-picker-inline-size",
- "--mod-picker-line-height",
- "--mod-picker-placeholder-font-style",
- "--mod-picker-placeholder-font-weight",
- "--mod-picker-spacing-bottom-to-text",
- "--mod-picker-spacing-edge-to-disclosure-icon",
- "--mod-picker-spacing-edge-to-disclosure-icon-quiet",
- "--mod-picker-spacing-edge-to-text",
- "--mod-picker-spacing-edge-to-text-quiet",
- "--mod-picker-spacing-icon-to-disclosure-icon",
- "--mod-picker-spacing-label-to-picker",
- "--mod-picker-spacing-label-to-picker-quiet",
- "--mod-picker-spacing-picker-to-popover",
- "--mod-picker-spacing-text-to-alert-icon-inline-start",
- "--mod-picker-spacing-text-to-icon",
- "--mod-picker-spacing-text-to-icon-inline-end",
- "--mod-picker-spacing-top-to-alert-icon",
- "--mod-picker-spacing-top-to-disclosure-icon",
- "--mod-picker-spacing-top-to-progress-circle",
- "--mod-picker-spacing-top-to-text",
- "--mod-sans-font-family-stack"
- ],
- "component": [
- "--spectrum-picker-animation-duration",
- "--spectrum-picker-background-color-active",
- "--spectrum-picker-background-color-default",
- "--spectrum-picker-background-color-default-open",
- "--spectrum-picker-background-color-disabled",
- "--spectrum-picker-background-color-hover",
- "--spectrum-picker-background-color-hover-open",
- "--spectrum-picker-background-color-key-focus",
- "--spectrum-picker-block-size",
- "--spectrum-picker-border-color-active",
- "--spectrum-picker-border-color-default",
- "--spectrum-picker-border-color-default-open",
- "--spectrum-picker-border-color-disabled",
- "--spectrum-picker-border-color-error-active",
- "--spectrum-picker-border-color-error-default",
- "--spectrum-picker-border-color-error-default-open",
- "--spectrum-picker-border-color-error-hover",
- "--spectrum-picker-border-color-error-hover-open",
- "--spectrum-picker-border-color-error-key-focus",
- "--spectrum-picker-border-color-hover",
- "--spectrum-picker-border-color-hover-open",
- "--spectrum-picker-border-color-key-focus",
- "--spectrum-picker-border-radius",
- "--spectrum-picker-border-width",
- "--spectrum-picker-end-edge-to-disclousure-icon-quiet",
- "--spectrum-picker-focus-indicator-color",
- "--spectrum-picker-focus-indicator-gap",
- "--spectrum-picker-focus-indicator-thickness",
- "--spectrum-picker-font-color-active",
- "--spectrum-picker-font-color-default",
- "--spectrum-picker-font-color-default-open",
- "--spectrum-picker-font-color-disabled",
- "--spectrum-picker-font-color-hover",
- "--spectrum-picker-font-color-hover-open",
- "--spectrum-picker-font-color-key-focus",
- "--spectrum-picker-font-size",
- "--spectrum-picker-font-weight",
- "--spectrum-picker-icon-color-active",
- "--spectrum-picker-icon-color-default",
- "--spectrum-picker-icon-color-default-open",
- "--spectrum-picker-icon-color-disabled",
- "--spectrum-picker-icon-color-error",
- "--spectrum-picker-icon-color-hover",
- "--spectrum-picker-icon-color-hover-open",
- "--spectrum-picker-icon-color-key-focus",
- "--spectrum-picker-inline-size",
- "--spectrum-picker-line-height",
- "--spectrum-picker-minimum-width-multiplier",
- "--spectrum-picker-placeholder-font-style",
- "--spectrum-picker-spacing-bottom-to-text",
- "--spectrum-picker-spacing-edge-to-disclosure-icon",
- "--spectrum-picker-spacing-edge-to-disclosure-icon-quiet",
- "--spectrum-picker-spacing-edge-to-text",
- "--spectrum-picker-spacing-edge-to-text-quiet",
- "--spectrum-picker-spacing-icon-to-disclosure-icon",
- "--spectrum-picker-spacing-label-to-picker",
- "--spectrum-picker-spacing-label-to-picker-quiet",
- "--spectrum-picker-spacing-picker-to-popover",
- "--spectrum-picker-spacing-text-to-icon",
- "--spectrum-picker-spacing-text-to-icon-inline-end",
- "--spectrum-picker-spacing-top-to-alert-icon",
- "--spectrum-picker-spacing-top-to-disclosure-icon",
- "--spectrum-picker-spacing-top-to-progress-circle",
- "--spectrum-picker-spacing-top-to-text",
- "--spectrum-picker-visual-to-disclosure-icon-extra-large",
- "--spectrum-picker-visual-to-disclosure-icon-large",
- "--spectrum-picker-visual-to-disclosure-icon-medium",
- "--spectrum-picker-visual-to-disclosure-icon-small"
- ],
- "global": [
- "--spectrum-animation-duration-100",
- "--spectrum-border-width-100",
- "--spectrum-component-bottom-to-text-100",
- "--spectrum-component-bottom-to-text-200",
- "--spectrum-component-bottom-to-text-300",
- "--spectrum-component-bottom-to-text-75",
- "--spectrum-component-edge-to-text-100",
- "--spectrum-component-edge-to-text-200",
- "--spectrum-component-edge-to-text-300",
- "--spectrum-component-edge-to-text-75",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-75",
- "--spectrum-component-to-menu-extra-large",
- "--spectrum-component-to-menu-large",
- "--spectrum-component-to-menu-medium",
- "--spectrum-component-to-menu-small",
- "--spectrum-component-top-to-text-100",
- "--spectrum-component-top-to-text-200",
- "--spectrum-component-top-to-text-300",
- "--spectrum-component-top-to-text-75",
- "--spectrum-corner-radius-100",
- "--spectrum-default-font-style",
- "--spectrum-disabled-background-color",
- "--spectrum-disabled-content-color",
- "--spectrum-field-edge-to-text-quiet",
- "--spectrum-field-end-edge-to-disclosure-icon-100",
- "--spectrum-field-end-edge-to-disclosure-icon-200",
- "--spectrum-field-end-edge-to-disclosure-icon-300",
- "--spectrum-field-end-edge-to-disclosure-icon-75",
- "--spectrum-field-label-to-component",
- "--spectrum-field-label-to-component-quiet-extra-large",
- "--spectrum-field-label-to-component-quiet-large",
- "--spectrum-field-label-to-component-quiet-medium",
- "--spectrum-field-label-to-component-quiet-small",
- "--spectrum-field-text-to-alert-icon-extra-large",
- "--spectrum-field-text-to-alert-icon-large",
- "--spectrum-field-text-to-alert-icon-medium",
- "--spectrum-field-text-to-alert-icon-small",
- "--spectrum-field-top-to-alert-icon-extra-large",
- "--spectrum-field-top-to-alert-icon-large",
- "--spectrum-field-top-to-alert-icon-medium",
- "--spectrum-field-top-to-alert-icon-small",
- "--spectrum-field-top-to-disclosure-icon-100",
- "--spectrum-field-top-to-disclosure-icon-200",
- "--spectrum-field-top-to-disclosure-icon-300",
- "--spectrum-field-top-to-disclosure-icon-75",
- "--spectrum-field-top-to-progress-circle-extra-large",
- "--spectrum-field-top-to-progress-circle-large",
- "--spectrum-field-top-to-progress-circle-medium",
- "--spectrum-field-top-to-progress-circle-small",
- "--spectrum-field-width",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-300",
- "--spectrum-font-size-75",
- "--spectrum-gray-100",
- "--spectrum-gray-200",
- "--spectrum-gray-300",
- "--spectrum-gray-500",
- "--spectrum-gray-600",
- "--spectrum-gray-700",
- "--spectrum-gray-800",
- "--spectrum-gray-900",
- "--spectrum-line-height-100",
- "--spectrum-negative-border-color-default",
- "--spectrum-negative-border-color-down",
- "--spectrum-negative-border-color-focus",
- "--spectrum-negative-border-color-focus-hover",
- "--spectrum-negative-border-color-hover",
- "--spectrum-negative-border-color-key-focus",
- "--spectrum-negative-visual-color",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-down",
- "--spectrum-neutral-content-color-focus",
- "--spectrum-neutral-content-color-focus-hover",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-neutral-content-color-key-focus",
- "--spectrum-regular-font-weight",
- "--spectrum-sans-font-family-stack",
- "--spectrum-text-to-visual-100",
- "--spectrum-text-to-visual-200",
- "--spectrum-text-to-visual-300",
- "--spectrum-text-to-visual-75"
- ],
- "system-theme": [
- "--system-picker-background-color-active",
- "--system-picker-background-color-default",
- "--system-picker-background-color-default-open",
- "--system-picker-background-color-hover",
- "--system-picker-background-color-hover-open",
- "--system-picker-background-color-key-focus",
- "--system-picker-border-color-active",
- "--system-picker-border-color-default",
- "--system-picker-border-color-default-open",
- "--system-picker-border-color-disabled",
- "--system-picker-border-color-hover",
- "--system-picker-border-color-hover-open",
- "--system-picker-border-color-key-focus",
- "--system-picker-border-width"
- ],
- "passthroughs": [
- "--mod-button-animation-duration",
- "--mod-button-font-family",
- "--mod-button-line-height"
+ ".spectrum-Picker.is-placeholder:active .spectrum-Picker-label"
],
- "high-contrast": [
- "--highcontrast-picker-background-color",
- "--highcontrast-picker-border-color-default",
- "--highcontrast-picker-border-color-disabled",
- "--highcontrast-picker-border-color-hover",
- "--highcontrast-picker-content-color-default",
- "--highcontrast-picker-content-color-disabled",
- "--highcontrast-picker-focus-indicator-color"
- ]
+ "modifiers": {
+ "mod-sans-font-family-stack": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Used by `.spectrum-Picker`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-Picker`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-animation-duration-100": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Used by `.spectrum-Picker`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-block-size": {
+ "value": "var(--spectrum-picker-block-size)",
+ "description": "Used by `.spectrum-Picker`.
Defaults to `var(--spectrum-picker-block-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-inline-size": {
+ "value": "var(--spectrum-picker-inline-size)",
+ "description": "Used by `.spectrum-Picker`.
Defaults to `var(--spectrum-picker-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-label-to-picker": {
+ "value": "var(--spectrum-picker-spacing-label-to-picker)",
+ "description": "Used by `.spectrum-Picker`.
Defaults to `var(--spectrum-picker-spacing-label-to-picker)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-edge-to-text": {
+ "value": "var(--spectrum-picker-spacing-edge-to-text)",
+ "description": "Used by `.spectrum-Picker`.
Defaults to `var(--spectrum-picker-spacing-edge-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-edge-to-disclosure-icon": {
+ "value": "var(--spectrum-picker-spacing-edge-to-disclosure-icon)",
+ "description": "Used by `.spectrum-Picker`.
Defaults to `var(--spectrum-picker-spacing-edge-to-disclosure-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-border-width": {
+ "value": "1px",
+ "description": "Used by `.spectrum-Picker`, `.spectrum-Picker:after`, `.spectrum-Picker-label`, `.spectrum-Picker-validationIcon`, `.spectrum-Picker .spectrum-ProgressCircle`, `.spectrum-Picker--quiet.is-keyboardFocused:after, .spectrum-Picker--quiet:focus-visible:after`.
Defaults to `var(--spectrum-picker-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-border-radius": {
+ "value": "var(--spectrum-picker-border-radius)",
+ "description": "Used by `.spectrum-Picker`, `.spectrum-Picker:after`.
Defaults to `var(--spectrum-picker-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-animation-duration": {
+ "value": "var(--spectrum-picker-animation-duration)",
+ "description": "Used by `.spectrum-Picker`, `.spectrum-Picker-label.is-placeholder`, `.spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-picker-animation-duration)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-font-color-default": {
+ "value": "var(--spectrum-picker-font-color-default)",
+ "description": "Used by `.spectrum-Picker`, `.spectrum-Picker-label.is-placeholder`, `.spectrum-Picker--quiet`.
Defaults to `var(--spectrum-picker-font-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-background-color-default": {
+ "value": "var(--spectrum-picker-background-color-default)",
+ "description": "Used by `.spectrum-Picker`.
Defaults to `var(--spectrum-picker-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-border-color-default": {
+ "value": "var(--spectrum-picker-border-color-default)",
+ "description": "Used by `.spectrum-Picker`.
Defaults to `var(--spectrum-picker-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-focus-indicator-gap": {
+ "value": "var(--spectrum-picker-focus-indicator-gap)",
+ "description": "Used by `.spectrum-Picker:after`, `.spectrum-Picker--quiet.is-keyboardFocused:after, .spectrum-Picker--quiet:focus-visible:after`.
Defaults to `var(--spectrum-picker-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-focus-indicator-thickness": {
+ "value": "var(--spectrum-picker-focus-indicator-thickness)",
+ "description": "Used by `.spectrum-Picker:after`, `.spectrum-Picker--quiet.is-keyboardFocused:after, .spectrum-Picker--quiet:focus-visible:after`.
Defaults to `var(--spectrum-picker-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-background-color-active": {
+ "value": "var(--spectrum-picker-background-color-active)",
+ "description": "Used by `.spectrum-Picker:active`.
Defaults to `var(--spectrum-picker-background-color-active)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-border-active": {
+ "value": "var(--spectrum-picker-border-color-active)",
+ "description": "Used by `.spectrum-Picker:active`.
Defaults to `var(--spectrum-picker-border-color-active)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-font-color-active": {
+ "value": "var(--spectrum-picker-font-color-active)",
+ "description": "Used by `.spectrum-Picker.is-placeholder:active .spectrum-Picker-label`, `.spectrum-Picker-label.is-placeholder:active`.
Defaults to `var(--spectrum-picker-font-color-active)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-background-color-key-focus": {
+ "value": "var(--spectrum-picker-background-color-key-focus)",
+ "description": "Used by `.spectrum-Picker.is-keyboardFocused, .spectrum-Picker:focus-visible`.
Defaults to `var(--spectrum-picker-background-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-border-color-key-focus": {
+ "value": "var(--spectrum-picker-border-color-key-focus)",
+ "description": "Used by `.spectrum-Picker.is-keyboardFocused, .spectrum-Picker:focus-visible`.
Defaults to `var(--spectrum-picker-border-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-font-color-key-focus": {
+ "value": "var(--spectrum-picker-font-color-key-focus)",
+ "description": "Used by `.spectrum-Picker.is-keyboardFocused, .spectrum-Picker:focus-visible`, `.spectrum-Picker.is-keyboardFocused .spectrum-Picker-label.is-placeholder, .spectrum-Picker:focus-visible .spectrum-Picker-label.is-placeholder`.
Defaults to `var(--spectrum-picker-font-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-focus-indicator-color": {
+ "value": "var(--spectrum-picker-focus-indicator-color)",
+ "description": "Used by `.spectrum-Picker.is-keyboardFocused:after, .spectrum-Picker:focus-visible:after`, `.spectrum-Picker--quiet.is-keyboardFocused:after, .spectrum-Picker--quiet:focus-visible:after`.
Defaults to `var(--spectrum-picker-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-icon-color-key-focus": {
+ "value": "var(--spectrum-picker-icon-color-key-focus)",
+ "description": "Used by `.spectrum-Picker.is-keyboardFocused .spectrum-Picker-menuIcon, .spectrum-Picker:focus-visible .spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-picker-icon-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-font-color-default-open": {
+ "value": "var(--spectrum-picker-font-color-default-open)",
+ "description": "Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled)`.
Defaults to `var(--spectrum-picker-font-color-default-open)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-background-color-default-open": {
+ "value": "var(--spectrum-picker-background-color-default-open)",
+ "description": "Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled)`.
Defaults to `var(--spectrum-picker-background-color-default-open)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-border-default-open": {
+ "value": "var(--spectrum-picker-border-color-default-open)",
+ "description": "Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled)`.
Defaults to `var(--spectrum-picker-border-color-default-open)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-icon-color-default-open": {
+ "value": "var(--spectrum-picker-icon-color-default-open)",
+ "description": "Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled) .spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-picker-icon-color-default-open)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-border-color-error-default": {
+ "value": "var(--spectrum-picker-border-color-error-default)",
+ "description": "Used by `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled)`.
Defaults to `var(--spectrum-picker-border-color-error-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-icon-color-error": {
+ "value": "var(--spectrum-picker-icon-color-error)",
+ "description": "Used by `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon`.
Defaults to `var(--spectrum-picker-icon-color-error)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-border-color-error-active": {
+ "value": "var(--spectrum-picker-border-color-error-active)",
+ "description": "Used by `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled):active`.
Defaults to `var(--spectrum-picker-border-color-error-active)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-border-color-error-default-open": {
+ "value": "var(--spectrum-picker-border-color-error-default-open)",
+ "description": "Used by `.spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled)`.
Defaults to `var(--spectrum-picker-border-color-error-default-open)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-border-color-error-key-focus": {
+ "value": "var(--spectrum-picker-border-color-error-key-focus)",
+ "description": "Used by `.spectrum-Picker.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled), .spectrum-Picker.is-invalid:not(:disabled, .is-disabled):focus-visible`.
Defaults to `var(--spectrum-picker-border-color-error-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-icon-color-disabled": {
+ "value": "var(--spectrum-picker-icon-color-disabled)",
+ "description": "Used by `.spectrum-Picker.is-loading .spectrum-Picker-menuIcon`, `.spectrum-Picker.is-disabled .spectrum-Picker-icon, .spectrum-Picker.is-disabled .spectrum-Picker-menuIcon, .spectrum-Picker.is-disabled .spectrum-Picker-validationIcon, .spectrum-Picker:disabled .spectrum-Picker-icon, .spectrum-Picker:disabled .spectrum-Picker-menuIcon, .spectrum-Picker:disabled .spectrum-Picker-validationIcon`.
Defaults to `var(--spectrum-picker-icon-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-text-to-icon-inline-end": {
+ "value": "var(--mod-picker-spacing-text-to-alert-icon-inline-start, var(--spectrum-picker-spacing-text-to-icon-inline-end))",
+ "description": "Used by `.spectrum-Picker.is-invalid .spectrum-Picker-label, .spectrum-Picker.is-loading .spectrum-Picker-label`.
Defaults to `var(--mod-picker-spacing-text-to-alert-icon-inline-start, var(--spectrum-picker-spacing-text-to-icon-inline-end))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-text-to-alert-icon-inline-start": {
+ "value": "var(--spectrum-picker-spacing-text-to-icon-inline-end)",
+ "description": "Used by `.spectrum-Picker.is-invalid .spectrum-Picker-label, .spectrum-Picker.is-loading .spectrum-Picker-label`.
Defaults to `var(--spectrum-picker-spacing-text-to-icon-inline-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-text-to-icon": {
+ "value": "var(--spectrum-picker-spacing-text-to-icon)",
+ "description": "Used by `.spectrum-Picker .spectrum-Picker-icon`, `.spectrum-Picker-label ~ .spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-picker-spacing-text-to-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-font-size": {
+ "value": "var(--spectrum-picker-font-size)",
+ "description": "Used by `.spectrum-Picker-label`.
Defaults to `var(--spectrum-picker-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-line-height": {
+ "value": "var(--spectrum-picker-line-height)",
+ "description": "Used by `.spectrum-Picker-label`.
Defaults to `var(--spectrum-picker-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-font-weight": {
+ "value": "var(--spectrum-picker-font-weight)",
+ "description": "Used by `.spectrum-Picker-label`.
Defaults to `var(--spectrum-picker-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-top-to-text": {
+ "value": "var(--spectrum-picker-spacing-top-to-text)",
+ "description": "Used by `.spectrum-Picker-label`.
Defaults to `var(--spectrum-picker-spacing-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-bottom-to-text": {
+ "value": "var(--spectrum-picker-spacing-bottom-to-text)",
+ "description": "Used by `.spectrum-Picker-label`.
Defaults to `var(--spectrum-picker-spacing-bottom-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-placeholder-font-weight": {
+ "value": "var(--spectrum-picker-font-weight)",
+ "description": "Used by `.spectrum-Picker-label.is-placeholder`.
Defaults to `var(--spectrum-picker-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-placeholder-font-style": {
+ "value": "var(--spectrum-picker-placeholder-font-style)",
+ "description": "Used by `.spectrum-Picker-label.is-placeholder`.
Defaults to `var(--spectrum-picker-placeholder-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-icon-to-disclosure-icon": {
+ "value": "var(--spectrum-picker-spacing-icon-to-disclosure-icon)",
+ "description": "Used by `.spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-picker-spacing-icon-to-disclosure-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-top-to-disclosure-icon": {
+ "value": "var(--spectrum-picker-spacing-top-to-disclosure-icon)",
+ "description": "Used by `.spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-picker-spacing-top-to-disclosure-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-icon-color-default": {
+ "value": "var(--spectrum-picker-icon-color-default)",
+ "description": "Used by `.spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-picker-icon-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-icon-color-active": {
+ "value": "var(--spectrum-picker-icon-color-active)",
+ "description": "Used by `.spectrum-Picker-menuIcon:active`.
Defaults to `var(--spectrum-picker-icon-color-active)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-top-to-alert-icon": {
+ "value": "var(--spectrum-picker-spacing-top-to-alert-icon)",
+ "description": "Used by `.spectrum-Picker-validationIcon`.
Defaults to `var(--spectrum-picker-spacing-top-to-alert-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-top-to-progress-circle": {
+ "value": "var(--spectrum-picker-spacing-top-to-progress-circle)",
+ "description": "Used by `.spectrum-Picker .spectrum-ProgressCircle`.
Defaults to `var(--spectrum-picker-spacing-top-to-progress-circle)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-picker-to-popover": {
+ "value": "var(--spectrum-picker-spacing-picker-to-popover)",
+ "description": "Used by `.spectrum-Picker + .spectrum-Popover--bottom.is-open`.
Defaults to `var(--spectrum-picker-spacing-picker-to-popover)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-edge-to-text-quiet": {
+ "value": "var(--spectrum-picker-spacing-edge-to-text-quiet)",
+ "description": "Used by `.spectrum-Picker--quiet`.
Defaults to `var(--spectrum-picker-spacing-edge-to-text-quiet)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-label-to-picker-quiet": {
+ "value": "var(--spectrum-picker-spacing-label-to-picker-quiet)",
+ "description": "Used by `.spectrum-Picker--quiet`.
Defaults to `var(--spectrum-picker-spacing-label-to-picker-quiet)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-edge-to-disclosure-icon-quiet": {
+ "value": "var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet)",
+ "description": "Used by `.spectrum-Picker--quiet .spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-font-color-hover": {
+ "value": "var(--spectrum-picker-font-color-hover)",
+ "description": "Used by `.spectrum-Picker:hover`, `.spectrum-Picker-label.is-placeholder:hover`.
Defaults to `var(--spectrum-picker-font-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-background-color-hover": {
+ "value": "var(--spectrum-picker-background-color-hover)",
+ "description": "Used by `.spectrum-Picker:hover`.
Defaults to `var(--spectrum-picker-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-border-color-hover": {
+ "value": "var(--spectrum-picker-border-color-hover)",
+ "description": "Used by `.spectrum-Picker:hover`.
Defaults to `var(--spectrum-picker-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-icon-color-hover": {
+ "value": "var(--spectrum-picker-icon-color-hover)",
+ "description": "Used by `.spectrum-Picker:hover .spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-picker-icon-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-font-color-hover-open": {
+ "value": "var(--spectrum-picker-font-color-hover-open)",
+ "description": "Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover`.
Defaults to `var(--spectrum-picker-font-color-hover-open)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-background-color-hover-open": {
+ "value": "var(--spectrum-picker-background-color-hover-open)",
+ "description": "Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover`.
Defaults to `var(--spectrum-picker-background-color-hover-open)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-border-color-hover-open": {
+ "value": "var(--spectrum-picker-border-color-hover-open)",
+ "description": "Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover`.
Defaults to `var(--spectrum-picker-border-color-hover-open)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-icon-color-hover-open": {
+ "value": "var(--spectrum-picker-icon-color-hover-open)",
+ "description": "Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover .spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-picker-icon-color-hover-open)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-border-color-error-hover": {
+ "value": "var(--spectrum-picker-border-color-error-hover)",
+ "description": "Used by `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled):hover`.
Defaults to `var(--spectrum-picker-border-color-error-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-border-color-error-hover-open": {
+ "value": "var(--spectrum-picker-border-color-error-hover-open)",
+ "description": "Used by `.spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled):hover`.
Defaults to `var(--spectrum-picker-border-color-error-hover-open)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-background-color-disabled": {
+ "value": "var(--spectrum-picker-background-color-disabled)",
+ "description": "Used by `.spectrum-Picker.is-disabled, .spectrum-Picker:disabled`.
Defaults to `var(--spectrum-picker-background-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-font-color-disabled": {
+ "value": "var(--spectrum-picker-font-color-disabled)",
+ "description": "Used by `.spectrum-Picker.is-disabled, .spectrum-Picker:disabled`, `.spectrum-Picker.is-disabled .spectrum-Picker-label.is-placeholder, .spectrum-Picker:disabled .spectrum-Picker-label.is-placeholder`.
Defaults to `var(--spectrum-picker-font-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-picker-font-size": {
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-font-weight": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-label`, `.spectrum-Picker-label.is-placeholder`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-placeholder-font-style": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-label.is-placeholder`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-line-height": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-block-size": {
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-inline-size": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-border-radius": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`, `.spectrum-Picker:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-top-to-text": {
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-bottom-to-text": {
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-edge-to-text": {
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-edge-to-text-quiet": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker--quiet`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-label-to-picker": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-text-to-icon": {
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker .spectrum-Picker-icon`, `.spectrum-Picker-label ~ .spectrum-Picker-menuIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-text-to-icon-inline-end": {
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker.is-invalid .spectrum-Picker-label, .spectrum-Picker.is-loading .spectrum-Picker-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-icon-to-disclosure-icon": {
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker-menuIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-visual-to-disclosure-icon-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-picker-spacing-icon-to-disclosure-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-label-to-picker-quiet": {
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker--quiet`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-top-to-alert-icon": {
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker-validationIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-top-to-progress-circle": {
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker .spectrum-ProgressCircle`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-top-to-disclosure-icon": {
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker-menuIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-edge-to-disclosure-icon": {
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-edge-to-disclosure-icon-quiet": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker--quiet .spectrum-Picker-menuIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-end-edge-to-disclousure-icon-quiet": {
+ "value": "0px",
+ "description": "Used by `--spectrum-picker-spacing-edge-to-disclosure-icon-quiet`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-animation-duration": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`, `.spectrum-Picker-label.is-placeholder`, `.spectrum-Picker-menuIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-font-color-default": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`, `.spectrum-Picker-label.is-placeholder`, `.spectrum-Picker--quiet`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-font-color-default-open": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled)`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-font-color-hover": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker:hover`, `.spectrum-Picker-label.is-placeholder:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-font-color-hover-open": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-font-color-active": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-placeholder:active .spectrum-Picker-label`, `.spectrum-Picker-label.is-placeholder:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-font-color-key-focus": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-keyboardFocused, .spectrum-Picker:focus-visible`, `.spectrum-Picker.is-keyboardFocused .spectrum-Picker-label.is-placeholder, .spectrum-Picker:focus-visible .spectrum-Picker-label.is-placeholder`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-icon-color-default": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-menuIcon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-icon-color-default-open": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled) .spectrum-Picker-menuIcon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-icon-color-hover": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker:hover .spectrum-Picker-menuIcon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-icon-color-hover-open": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover .spectrum-Picker-menuIcon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-icon-color-active": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-menuIcon:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-icon-color-key-focus": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-keyboardFocused .spectrum-Picker-menuIcon, .spectrum-Picker:focus-visible .spectrum-Picker-menuIcon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-error-default": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled)`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-error-default-open": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled)`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-error-hover": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled):hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-error-hover-open": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled):hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-error-active": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled):active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-error-key-focus": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled), .spectrum-Picker.is-invalid:not(:disabled, .is-disabled):focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-icon-color-error": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-background-color-disabled": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-disabled, .spectrum-Picker:disabled`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-font-color-disabled": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-disabled, .spectrum-Picker:disabled`, `.spectrum-Picker.is-disabled .spectrum-Picker-label.is-placeholder, .spectrum-Picker:disabled .spectrum-Picker-label.is-placeholder`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-icon-color-disabled": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-loading .spectrum-Picker-menuIcon`, `.spectrum-Picker.is-disabled .spectrum-Picker-icon, .spectrum-Picker.is-disabled .spectrum-Picker-menuIcon, .spectrum-Picker.is-disabled .spectrum-Picker-validationIcon, .spectrum-Picker:disabled .spectrum-Picker-icon, .spectrum-Picker:disabled .spectrum-Picker-menuIcon, .spectrum-Picker:disabled .spectrum-Picker-validationIcon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-focus-indicator-gap": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker:after`, `.spectrum-Picker--quiet.is-keyboardFocused:after, .spectrum-Picker--quiet:focus-visible:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-focus-indicator-thickness": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker:after`, `.spectrum-Picker--quiet.is-keyboardFocused:after, .spectrum-Picker--quiet:focus-visible:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-focus-indicator-color": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-keyboardFocused:after, .spectrum-Picker:focus-visible:after`, `.spectrum-Picker--quiet.is-keyboardFocused:after, .spectrum-Picker--quiet:focus-visible:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-picker-to-popover": {
+ "description": "Defined in `.spectrum-Picker + .spectrum-Popover--bottom.is-open`, `.spectrum-Picker--sizeS + .spectrum-Popover--bottom.is-open`, `.spectrum-Picker--sizeL + .spectrum-Popover--bottom.is-open`, `.spectrum-Picker--sizeXL + .spectrum-Popover--bottom.is-open`.
Used by `.spectrum-Picker + .spectrum-Popover--bottom.is-open`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-visual-to-disclosure-icon-small": {
+ "value": "7px",
+ "description": "Used by `--spectrum-picker-spacing-icon-to-disclosure-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-visual-to-disclosure-icon-large": {
+ "value": "9px",
+ "description": "Used by `--spectrum-picker-spacing-icon-to-disclosure-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-visual-to-disclosure-icon-extra-large": {
+ "value": "10px",
+ "description": "Used by `--spectrum-picker-spacing-icon-to-disclosure-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-minimum-width-multiplier": {
+ "value": "2",
+ "description": "Used by `.spectrum-Picker`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-border-width": {
+ "value": "1px",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`, `.spectrum-Picker:after`, `.spectrum-Picker-label`, `.spectrum-Picker-validationIcon`, `.spectrum-Picker .spectrum-ProgressCircle`, `.spectrum-Picker--quiet.is-keyboardFocused:after, .spectrum-Picker--quiet:focus-visible:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-background-color-default": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-default": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-background-color-active": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-active": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-background-color-key-focus": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-keyboardFocused, .spectrum-Picker:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-key-focus": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-keyboardFocused, .spectrum-Picker:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-background-color-default-open": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled)`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-default-open": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled)`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-background-color-hover": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-hover": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-background-color-hover-open": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-hover-open": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-disabled": {
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-disabled, .spectrum-Picker:disabled`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--system-picker-background-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--system-picker-background-color-default-open`, `--system-picker-background-color-hover`, `--system-picker-background-color-hover-open`, `--system-picker-background-color-active`, `--system-picker-background-color-key-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-500": {
+ "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+ "description": "Used by `--system-picker-border-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-800": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Used by `--system-picker-border-color-default-open`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-600": {
+ "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+ "description": "Used by `--system-picker-border-color-hover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-900": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Used by `--system-picker-border-color-hover-open`, `--system-picker-border-color-key-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-700": {
+ "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+ "description": "Used by `--system-picker-border-color-active`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-300": {
+ "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+ "description": "Used by `--system-picker-border-color-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--system-picker-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `.spectrum-Picker`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-Picker`, `--spectrum-picker-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `.spectrum-Picker`, `--spectrum-picker-animation-duration`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-picker-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-picker-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-picker-placeholder-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-picker-block-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-width": {
+ "value": "192px",
+ "description": "Used by `--spectrum-picker-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-picker-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-picker-spacing-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-100": {
+ "value": "9px",
+ "description": "Used by `--spectrum-picker-spacing-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-100": {
+ "value": "12px",
+ "description": "Used by `--spectrum-picker-spacing-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-text-quiet": {
+ "value": "0px",
+ "description": "Used by `--spectrum-picker-spacing-edge-to-text-quiet`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-label-to-component": {
+ "value": "0px",
+ "description": "Used by `--spectrum-picker-spacing-label-to-picker`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-picker-spacing-text-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-text-to-alert-icon-medium": {
+ "value": "12px",
+ "description": "Used by `--spectrum-picker-spacing-text-to-icon-inline-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-label-to-component-quiet-medium": {
+ "value": "-8px",
+ "description": "Used by `--spectrum-picker-spacing-label-to-picker-quiet`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-alert-icon-medium": {
+ "value": "7px",
+ "description": "Used by `--spectrum-picker-spacing-top-to-alert-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-progress-circle-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-picker-spacing-top-to-progress-circle`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-disclosure-icon-100": {
+ "value": "11px",
+ "description": "Used by `--spectrum-picker-spacing-top-to-disclosure-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-end-edge-to-disclosure-icon-100": {
+ "value": "11px",
+ "description": "Used by `--spectrum-picker-spacing-edge-to-disclosure-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-picker-font-color-default`, `--spectrum-picker-icon-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-focus": {
+ "value": "var(--spectrum-neutral-content-color-down)",
+ "description": "Used by `--spectrum-picker-font-color-default-open`, `--spectrum-picker-icon-color-default-open`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-picker-font-color-hover`, `--spectrum-picker-icon-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-focus-hover": {
+ "value": "var(--spectrum-neutral-content-color-down)",
+ "description": "Used by `--spectrum-picker-font-color-hover-open`, `--spectrum-picker-icon-color-hover-open`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-picker-font-color-active`, `--spectrum-picker-icon-color-active`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-picker-font-color-key-focus`, `--spectrum-picker-icon-color-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-default": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Used by `--spectrum-picker-border-color-error-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-focus": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--spectrum-picker-border-color-error-default-open`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-hover": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--spectrum-picker-border-color-error-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-focus-hover": {
+ "value": "var(--spectrum-negative-border-color-down)",
+ "description": "Used by `--spectrum-picker-border-color-error-hover-open`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-down": {
+ "value": "var(--spectrum-negative-color-1100)",
+ "description": "Used by `--spectrum-picker-border-color-error-active`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-key-focus": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--spectrum-picker-border-color-error-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-visual-color": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Used by `--spectrum-picker-icon-color-error`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-background-color": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--spectrum-picker-background-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-picker-font-color-disabled`, `--spectrum-picker-icon-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-picker-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-picker-focus-indicator-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-picker-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-to-menu-medium": {
+ "value": "6px",
+ "description": "Used by `--spectrum-picker-spacing-picker-to-popover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-picker-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-picker-block-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-picker-spacing-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-picker-spacing-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-75": {
+ "value": "10px",
+ "description": "Used by `--spectrum-picker-spacing-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-picker-spacing-text-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-text-to-alert-icon-small": {
+ "value": "8px",
+ "description": "Used by `--spectrum-picker-spacing-text-to-icon-inline-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-label-to-component-quiet-small": {
+ "value": "-8px",
+ "description": "Used by `--spectrum-picker-spacing-label-to-picker-quiet`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-alert-icon-small": {
+ "value": "4px",
+ "description": "Used by `--spectrum-picker-spacing-top-to-alert-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-progress-circle-small": {
+ "value": "4px",
+ "description": "Used by `--spectrum-picker-spacing-top-to-progress-circle`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-disclosure-icon-75": {
+ "value": "7px",
+ "description": "Used by `--spectrum-picker-spacing-top-to-disclosure-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-end-edge-to-disclosure-icon-75": {
+ "value": "7px",
+ "description": "Used by `--spectrum-picker-spacing-edge-to-disclosure-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-to-menu-small": {
+ "value": "6px",
+ "description": "Used by `--spectrum-picker-spacing-picker-to-popover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-picker-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-picker-block-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-picker-spacing-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-200": {
+ "value": "11px",
+ "description": "Used by `--spectrum-picker-spacing-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-200": {
+ "value": "15px",
+ "description": "Used by `--spectrum-picker-spacing-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-200": {
+ "value": "7px",
+ "description": "Used by `--spectrum-picker-spacing-text-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-text-to-alert-icon-large": {
+ "value": "15px",
+ "description": "Used by `--spectrum-picker-spacing-text-to-icon-inline-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-label-to-component-quiet-large": {
+ "value": "-12px",
+ "description": "Used by `--spectrum-picker-spacing-label-to-picker-quiet`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-alert-icon-large": {
+ "value": "10px",
+ "description": "Used by `--spectrum-picker-spacing-top-to-alert-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-progress-circle-large": {
+ "value": "12px",
+ "description": "Used by `--spectrum-picker-spacing-top-to-progress-circle`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-disclosure-icon-200": {
+ "value": "14px",
+ "description": "Used by `--spectrum-picker-spacing-top-to-disclosure-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-end-edge-to-disclosure-icon-200": {
+ "value": "14px",
+ "description": "Used by `--spectrum-picker-spacing-edge-to-disclosure-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-to-menu-large": {
+ "value": "7px",
+ "description": "Used by `--spectrum-picker-spacing-picker-to-popover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-picker-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-picker-block-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-300": {
+ "value": "12px",
+ "description": "Used by `--spectrum-picker-spacing-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-picker-spacing-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-300": {
+ "value": "17px",
+ "description": "Used by `--spectrum-picker-spacing-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-300": {
+ "value": "8px",
+ "description": "Used by `--spectrum-picker-spacing-text-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-text-to-alert-icon-extra-large": {
+ "value": "18px",
+ "description": "Used by `--spectrum-picker-spacing-text-to-icon-inline-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-label-to-component-quiet-extra-large": {
+ "value": "-15px",
+ "description": "Used by `--spectrum-picker-spacing-label-to-picker-quiet`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-alert-icon-extra-large": {
+ "value": "13px",
+ "description": "Used by `--spectrum-picker-spacing-top-to-alert-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-progress-circle-extra-large": {
+ "value": "16px",
+ "description": "Used by `--spectrum-picker-spacing-top-to-progress-circle`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-disclosure-icon-300": {
+ "value": "17px",
+ "description": "Used by `--spectrum-picker-spacing-top-to-disclosure-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-end-edge-to-disclosure-icon-300": {
+ "value": "17px",
+ "description": "Used by `--spectrum-picker-spacing-edge-to-disclosure-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-to-menu-extra-large": {
+ "value": "8px",
+ "description": "Used by `--spectrum-picker-spacing-picker-to-popover`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-picker-background-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-background-color-default`.",
+ "control": "color"
+ },
+ "system-picker-background-color-default-open": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-background-color-default-open`.",
+ "control": "color"
+ },
+ "system-picker-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-background-color-hover`.",
+ "control": "color"
+ },
+ "system-picker-background-color-hover-open": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-background-color-hover-open`.",
+ "control": "color"
+ },
+ "system-picker-background-color-active": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-background-color-active`.",
+ "control": "color"
+ },
+ "system-picker-background-color-key-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-background-color-key-focus`.",
+ "control": "color"
+ },
+ "system-picker-border-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-border-color-default`.",
+ "control": "color"
+ },
+ "system-picker-border-color-default-open": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-border-color-default-open`.",
+ "control": "color"
+ },
+ "system-picker-border-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-border-color-hover`.",
+ "control": "color"
+ },
+ "system-picker-border-color-hover-open": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-border-color-hover-open`.",
+ "control": "color"
+ },
+ "system-picker-border-color-active": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-border-color-active`.",
+ "control": "color"
+ },
+ "system-picker-border-color-key-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-border-color-key-focus`.",
+ "control": "color"
+ },
+ "system-picker-border-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-border-color-disabled`.",
+ "control": "color"
+ },
+ "system-picker-border-width": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-border-width`.",
+ "control": "text"
+ }
+ },
+ "passthroughs": {
+ "mod-button-font-family": {
+ "category": "Passthrough"
+ },
+ "mod-button-line-height": {
+ "category": "Passthrough"
+ },
+ "mod-button-animation-duration": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-picker-focus-indicator-color": {
+ "value": "var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color))",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-keyboardFocused:after, .spectrum-Picker:focus-visible:after`, `.spectrum-Picker--quiet.is-keyboardFocused:after, .spectrum-Picker--quiet:focus-visible:after`.
Defaults to `var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-picker-border-color-default": {
+ "value": "var(--mod-picker-border-color-error-key-focus, var(--spectrum-picker-border-color-error-key-focus))",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`, `.spectrum-Picker:active`, `.spectrum-Picker.is-keyboardFocused, .spectrum-Picker:focus-visible`, `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled)`, `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled)`, `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled):active`, `.spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled)`, `.spectrum-Picker.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled), .spectrum-Picker.is-invalid:not(:disabled, .is-disabled):focus-visible`.
Defaults to `var(--mod-picker-border-color-error-key-focus, var(--spectrum-picker-border-color-error-key-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-picker-border-color-hover": {
+ "value": "var(--mod-picker-border-color-error-hover-open, var(--spectrum-picker-border-color-error-hover-open))",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker.is-keyboardFocused, .spectrum-Picker:focus-visible`.
Used by `.spectrum-Picker:hover`, `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover`, `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled):hover`, `.spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled):hover`.
Defaults to `var(--mod-picker-border-color-error-hover-open, var(--spectrum-picker-border-color-error-hover-open))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-picker-border-color-disabled": {
+ "value": "var(--spectrum-picker-border-color-disabled)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-disabled, .spectrum-Picker:disabled`.
Defaults to `var(--spectrum-picker-border-color-disabled)`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-picker-content-color-default": {
+ "value": "var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover))",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`, `.spectrum-Picker.is-placeholder:active .spectrum-Picker-label`, `.spectrum-Picker.is-keyboardFocused, .spectrum-Picker:focus-visible`, `.spectrum-Picker.is-keyboardFocused .spectrum-Picker-label.is-placeholder, .spectrum-Picker:focus-visible .spectrum-Picker-label.is-placeholder`, `.spectrum-Picker.is-keyboardFocused .spectrum-Picker-menuIcon, .spectrum-Picker:focus-visible .spectrum-Picker-menuIcon`, `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled)`, `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled) .spectrum-Picker-menuIcon`, `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon`, `.spectrum-Picker-label.is-placeholder`, `.spectrum-Picker-label.is-placeholder:active`, `.spectrum-Picker-menuIcon`, `.spectrum-Picker-menuIcon:active`, `.spectrum-Picker--quiet`, `.spectrum-Picker:hover`, `.spectrum-Picker:hover .spectrum-Picker-menuIcon`, `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover`, `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover .spectrum-Picker-menuIcon`, `.spectrum-Picker-label.is-placeholder:hover`.
Defaults to `var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-picker-content-color-disabled": {
+ "value": "var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-loading .spectrum-Picker-menuIcon`, `.spectrum-Picker.is-disabled, .spectrum-Picker:disabled`, `.spectrum-Picker.is-disabled .spectrum-Picker-icon, .spectrum-Picker.is-disabled .spectrum-Picker-menuIcon, .spectrum-Picker.is-disabled .spectrum-Picker-validationIcon, .spectrum-Picker:disabled .spectrum-Picker-icon, .spectrum-Picker:disabled .spectrum-Picker-menuIcon, .spectrum-Picker:disabled .spectrum-Picker-validationIcon`, `.spectrum-Picker.is-disabled .spectrum-Picker-label.is-placeholder, .spectrum-Picker:disabled .spectrum-Picker-label.is-placeholder`.
Defaults to `var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-picker-background-color": {
+ "value": "var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled))",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`, `.spectrum-Picker:active`, `.spectrum-Picker.is-keyboardFocused, .spectrum-Picker:focus-visible`, `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled)`, `.spectrum-Picker--quiet`, `.spectrum-Picker:hover`, `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover`, `.spectrum-Picker--quiet:hover`, `.spectrum-Picker--quiet.is-keyboardFocused, .spectrum-Picker--quiet:focus-visible`, `.spectrum-Picker--quiet.is-open, .spectrum-Picker--quiet.spectrum-Picker.is-disabled, .spectrum-Picker--quiet.spectrum-Picker:disabled, .spectrum-Picker--quiet:active`, `.spectrum-Picker.is-disabled, .spectrum-Picker:disabled`.
Defaults to `var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js
index c2fa56e619d..5dde6ce94ec 100644
--- a/components/picker/stories/picker.stories.js
+++ b/components/picker/stories/picker.stories.js
@@ -2,11 +2,13 @@ import { WithDividers as MenuStories } from "@spectrum-css/menu/stories/menu.sto
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isActive, isDisabled, isHovered, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { PickerGroup } from "./picker.test.js";
import { ClosedAndOpenTemplate, DisabledTemplate, Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The picker component (sometimes known as a "dropdown" or "select") allows users to choose from a list of options in a limited space. The list of options can change based on the context.
*/
@@ -139,6 +141,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json
index 7eb82d7c8c4..d223d7360f4 100644
--- a/components/pickerbutton/dist/metadata.json
+++ b/components/pickerbutton/dist/metadata.json
@@ -13,6 +13,11 @@
".spectrum-PickerButton-fill",
".spectrum-PickerButton-icon",
".spectrum-PickerButton-label",
+ ".spectrum-PickerButton:active",
+ ".spectrum-PickerButton:disabled",
+ ".spectrum-PickerButton:focus",
+ ".spectrum-PickerButton:focus-visible",
+ ".spectrum-PickerButton:hover",
".spectrum-PickerButton.is-focused",
".spectrum-PickerButton.is-keyboardFocused",
".spectrum-PickerButton.is-open",
@@ -20,134 +25,638 @@
".spectrum-PickerButton.spectrum-PickerButton--sizeL",
".spectrum-PickerButton.spectrum-PickerButton--sizeS",
".spectrum-PickerButton.spectrum-PickerButton--sizeXL",
- ".spectrum-PickerButton.spectrum-PickerButton--uiicononly",
- ".spectrum-PickerButton:active",
- ".spectrum-PickerButton:disabled",
- ".spectrum-PickerButton:focus",
- ".spectrum-PickerButton:focus-visible",
- ".spectrum-PickerButton:hover"
- ],
- "modifiers": [
- "--mod-picker-button-background-animation-duration",
- "--mod-picker-button-background-color",
- "--mod-picker-button-background-color-disabled",
- "--mod-picker-button-background-color-down",
- "--mod-picker-button-background-color-down-disabled",
- "--mod-picker-button-background-color-down-quiet",
- "--mod-picker-button-background-color-hover",
- "--mod-picker-button-background-color-hover-disabled",
- "--mod-picker-button-background-color-hover-quiet",
- "--mod-picker-button-background-color-key-focus",
- "--mod-picker-button-background-color-key-focus-quiet",
- "--mod-picker-button-background-color-quiet",
- "--mod-picker-button-border-color",
- "--mod-picker-button-border-color-disabled",
- "--mod-picker-button-border-color-quiet",
- "--mod-picker-button-border-radius",
- "--mod-picker-button-border-radius-rounded",
- "--mod-picker-button-border-radius-rounded-sided",
- "--mod-picker-button-border-radius-sided",
- "--mod-picker-button-border-width",
- "--mod-picker-button-fill-padding",
- "--mod-picker-button-font-color",
- "--mod-picker-button-font-color-disabled",
- "--mod-picker-button-font-color-down",
- "--mod-picker-button-font-color-down-disabled",
- "--mod-picker-button-font-color-hover",
- "--mod-picker-button-font-color-hover-disabled",
- "--mod-picker-button-font-color-key-focus",
- "--mod-picker-button-font-family",
- "--mod-picker-button-font-size",
- "--mod-picker-button-font-style",
- "--mod-picker-button-font-weight",
- "--mod-picker-button-gap",
- "--mod-picker-button-height",
- "--mod-picker-button-icon-color",
- "--mod-picker-button-icon-color-disabled",
- "--mod-picker-button-icon-color-down",
- "--mod-picker-button-icon-color-down-disabled",
- "--mod-picker-button-icon-color-hover",
- "--mod-picker-button-icon-color-hover-disabled",
- "--mod-picker-button-icon-color-key-focus",
- "--mod-picker-button-label-padding",
- "--mod-picker-button-padding",
- "--mod-picker-button-width"
- ],
- "component": [
- "--spectrum-picker-button-background-animation-duration",
- "--spectrum-picker-button-background-color",
- "--spectrum-picker-button-background-color-down",
- "--spectrum-picker-button-background-color-hover",
- "--spectrum-picker-button-background-color-key-focus",
- "--spectrum-picker-button-border-color",
- "--spectrum-picker-button-border-radius",
- "--spectrum-picker-button-border-radius-rounded",
- "--spectrum-picker-button-border-radius-rounded-sided",
- "--spectrum-picker-button-border-radius-sided",
- "--spectrum-picker-button-border-width",
- "--spectrum-picker-button-fill-padding",
- "--spectrum-picker-button-font-color",
- "--spectrum-picker-button-font-color-down",
- "--spectrum-picker-button-font-color-hover",
- "--spectrum-picker-button-font-color-key-focus",
- "--spectrum-picker-button-font-family",
- "--spectrum-picker-button-font-size",
- "--spectrum-picker-button-font-style",
- "--spectrum-picker-button-font-weight",
- "--spectrum-picker-button-gap",
- "--spectrum-picker-button-height",
- "--spectrum-picker-button-icon-color",
- "--spectrum-picker-button-icon-color-down",
- "--spectrum-picker-button-icon-color-hover",
- "--spectrum-picker-button-icon-color-key-focus",
- "--spectrum-picker-button-label-padding",
- "--spectrum-picker-button-padding",
- "--spectrum-picker-button-width"
- ],
- "global": [
- "--spectrum-animation-duration-100",
- "--spectrum-body-sans-serif-font-weight",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-75",
- "--spectrum-corner-radius-200",
- "--spectrum-corner-radius-75",
- "--spectrum-default-font-style",
- "--spectrum-disabled-background-color",
- "--spectrum-disabled-content-color",
- "--spectrum-field-edge-to-disclosure-icon-100",
- "--spectrum-field-edge-to-disclosure-icon-200",
- "--spectrum-field-edge-to-disclosure-icon-300",
- "--spectrum-field-edge-to-disclosure-icon-75",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-300",
- "--spectrum-font-size-75",
- "--spectrum-gray-100",
- "--spectrum-gray-200",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-down",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-neutral-content-color-key-focus",
- "--spectrum-sans-font-family-stack",
- "--spectrum-spacing-75",
- "--spectrum-text-to-visual-200",
- "--spectrum-text-to-visual-300",
- "--spectrum-text-to-visual-50"
- ],
- "system-theme": [
- "--system-picker-button-background-color",
- "--system-picker-button-background-color-down",
- "--system-picker-button-background-color-hover",
- "--system-picker-button-background-color-key-focus",
- "--system-picker-button-border-color",
- "--system-picker-button-border-radius",
- "--system-picker-button-border-radius-rounded-sided",
- "--system-picker-button-border-radius-sided",
- "--system-picker-button-border-width",
- "--system-picker-button-padding"
+ ".spectrum-PickerButton.spectrum-PickerButton--uiicononly"
],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-picker-button-background-color": {
+ "value": "var(--spectrum-picker-button-background-color)",
+ "description": "Defined in `.spectrum-PickerButton:hover`, `.spectrum-PickerButton.is-open, .spectrum-PickerButton:active`, `.spectrum-PickerButton.is-focused, .spectrum-PickerButton.is-keyboardFocused, .spectrum-PickerButton:focus, .spectrum-PickerButton:focus-visible`, `.spectrum-PickerButton:disabled`, `.spectrum-PickerButton.spectrum-PickerButton--quiet`.
Used by `.spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-background-color-hover": {
+ "value": "var(--spectrum-picker-button-background-color-hover)",
+ "description": "Defined in `.spectrum-PickerButton:disabled`, `.spectrum-PickerButton.spectrum-PickerButton--quiet`.
Used by `--mod-picker-button-background-color`.
Defaults to `var(--spectrum-picker-button-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-font-color": {
+ "value": "var(--spectrum-picker-button-font-color)",
+ "description": "Defined in `.spectrum-PickerButton:hover`, `.spectrum-PickerButton.is-open, .spectrum-PickerButton:active`, `.spectrum-PickerButton.is-focused, .spectrum-PickerButton.is-keyboardFocused, .spectrum-PickerButton:focus, .spectrum-PickerButton:focus-visible`, `.spectrum-PickerButton:disabled`.
Used by `.spectrum-PickerButton-label`.
Defaults to `var(--spectrum-picker-button-font-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-font-color-hover": {
+ "value": "var(--spectrum-picker-button-font-color-hover)",
+ "description": "Defined in `.spectrum-PickerButton:disabled`.
Used by `--mod-picker-button-font-color`.
Defaults to `var(--spectrum-picker-button-font-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-icon-color": {
+ "value": "var(--spectrum-picker-button-icon-color)",
+ "description": "Defined in `.spectrum-PickerButton:hover`, `.spectrum-PickerButton.is-open, .spectrum-PickerButton:active`, `.spectrum-PickerButton.is-focused, .spectrum-PickerButton.is-keyboardFocused, .spectrum-PickerButton:focus, .spectrum-PickerButton:focus-visible`, `.spectrum-PickerButton:disabled`.
Used by `.spectrum-PickerButton-icon`.
Defaults to `var(--spectrum-picker-button-icon-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-icon-color-hover": {
+ "value": "var(--spectrum-picker-button-icon-color-hover)",
+ "description": "Defined in `.spectrum-PickerButton:disabled`.
Used by `--mod-picker-button-icon-color`.
Defaults to `var(--spectrum-picker-button-icon-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-background-color-down": {
+ "value": "var(--spectrum-picker-button-background-color-down)",
+ "description": "Defined in `.spectrum-PickerButton:disabled`, `.spectrum-PickerButton.spectrum-PickerButton--quiet`.
Used by `--mod-picker-button-background-color`.
Defaults to `var(--spectrum-picker-button-background-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-font-color-down": {
+ "value": "var(--spectrum-picker-button-font-color-down)",
+ "description": "Defined in `.spectrum-PickerButton:disabled`.
Used by `--mod-picker-button-font-color`.
Defaults to `var(--spectrum-picker-button-font-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-icon-color-down": {
+ "value": "var(--spectrum-picker-button-icon-color-down)",
+ "description": "Defined in `.spectrum-PickerButton:disabled`.
Used by `--mod-picker-button-icon-color`.
Defaults to `var(--spectrum-picker-button-icon-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-background-color-key-focus": {
+ "value": "var(--spectrum-picker-button-background-color-key-focus)",
+ "description": "Defined in `.spectrum-PickerButton.spectrum-PickerButton--quiet`.
Used by `--mod-picker-button-background-color`.
Defaults to `var(--spectrum-picker-button-background-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-font-color-key-focus": {
+ "value": "var(--spectrum-picker-button-font-color-key-focus)",
+ "description": "Used by `--mod-picker-button-font-color`.
Defaults to `var(--spectrum-picker-button-font-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-icon-color-key-focus": {
+ "value": "var(--spectrum-picker-button-icon-color-key-focus)",
+ "description": "Used by `--mod-picker-button-icon-color`.
Defaults to `var(--spectrum-picker-button-icon-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-background-color-disabled": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--mod-picker-button-background-color`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-background-color-hover-disabled": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--mod-picker-button-background-color-hover`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-background-color-down-disabled": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--mod-picker-button-background-color-down`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-border-color": {
+ "value": "var(--spectrum-picker-button-border-color)",
+ "description": "Defined in `.spectrum-PickerButton:disabled`, `.spectrum-PickerButton.spectrum-PickerButton--quiet`.
Used by `.spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-border-color-disabled": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-font-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--mod-picker-button-font-color`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-font-color-hover-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--mod-picker-button-font-color-hover`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-font-color-down-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--mod-picker-button-font-color-down`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-icon-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--mod-picker-button-icon-color`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-icon-color-hover-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--mod-picker-button-icon-color-hover`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-icon-color-down-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--mod-picker-button-icon-color-down`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-background-color-quiet": {
+ "description": "Used by `--mod-picker-button-background-color`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-background-color-hover-quiet": {
+ "description": "Used by `--mod-picker-button-background-color-hover`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-background-color-down-quiet": {
+ "description": "Used by `--mod-picker-button-background-color-down`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-background-color-key-focus-quiet": {
+ "description": "Used by `--mod-picker-button-background-color-key-focus`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-border-color-quiet": {
+ "description": "Used by `--mod-picker-button-border-color`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-button-width": {
+ "value": "var(--spectrum-picker-button-width)",
+ "description": "Used by `.spectrum-PickerButton`.
Defaults to `var(--spectrum-picker-button-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-button-padding": {
+ "value": "var(--spectrum-picker-button-padding)",
+ "description": "Used by `.spectrum-PickerButton`, `.spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-padding)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-button-height": {
+ "value": "var(--spectrum-picker-button-height)",
+ "description": "Used by `.spectrum-PickerButton.spectrum-PickerButton--uiicononly`.
Defaults to `var(--spectrum-picker-button-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-button-label-padding": {
+ "value": "var(--spectrum-picker-button-label-padding)",
+ "description": "Used by `.spectrum-PickerButton-label`.
Defaults to `var(--spectrum-picker-button-label-padding)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-button-font-family": {
+ "value": "var(--spectrum-picker-button-font-family)",
+ "description": "Used by `.spectrum-PickerButton-label`.
Defaults to `var(--spectrum-picker-button-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-button-font-style": {
+ "value": "var(--spectrum-picker-button-font-style)",
+ "description": "Used by `.spectrum-PickerButton-label`.
Defaults to `var(--spectrum-picker-button-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-button-font-weight": {
+ "value": "var(--spectrum-picker-button-font-weight)",
+ "description": "Used by `.spectrum-PickerButton-label`.
Defaults to `var(--spectrum-picker-button-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-button-font-size": {
+ "value": "var(--spectrum-picker-button-font-size)",
+ "description": "Used by `.spectrum-PickerButton-label`.
Defaults to `var(--spectrum-picker-button-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-button-gap": {
+ "value": "var(--spectrum-picker-button-gap)",
+ "description": "Used by `.spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-button-border-width": {
+ "value": "var(--spectrum-picker-button-border-width)",
+ "description": "Used by `.spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-button-fill-padding": {
+ "value": "var(--spectrum-picker-button-fill-padding)",
+ "description": "Used by `.spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-fill-padding)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-button-border-radius": {
+ "value": "var(--spectrum-picker-button-border-radius)",
+ "description": "Used by `.spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-button-background-animation-duration": {
+ "value": "var(--spectrum-picker-button-background-animation-duration)",
+ "description": "Used by `.spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-background-animation-duration)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-button-border-radius-sided": {
+ "value": "var(--spectrum-picker-button-border-radius-sided)",
+ "description": "Used by `.spectrum-PickerButton--right .spectrum-PickerButton-fill`, `.spectrum-PickerButton--left .spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-border-radius-sided)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-button-border-radius-rounded-sided": {
+ "value": "var(--spectrum-picker-button-border-radius-rounded-sided)",
+ "description": "Used by `.spectrum-PickerButton--right.spectrum-PickerButton--rounded .spectrum-PickerButton-fill`, `.spectrum-PickerButton--left.spectrum-PickerButton--rounded .spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-border-radius-rounded-sided)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-button-border-radius-rounded": {
+ "value": "var(--spectrum-picker-button-border-radius-rounded)",
+ "description": "Used by `.spectrum-PickerButton--rounded .spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-border-radius-rounded)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-picker-button-height": {
+ "description": "Defined in `.spectrum-PickerButton`, `.spectrum-PickerButton.spectrum-PickerButton--sizeS`, `.spectrum-PickerButton.spectrum-PickerButton--sizeL`, `.spectrum-PickerButton.spectrum-PickerButton--sizeXL`.
Used by `.spectrum-PickerButton.spectrum-PickerButton--uiicononly`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-width": {
+ "description": "Defined in `.spectrum-PickerButton`, `.spectrum-PickerButton.spectrum-PickerButton--sizeS`, `.spectrum-PickerButton.spectrum-PickerButton--sizeL`, `.spectrum-PickerButton.spectrum-PickerButton--sizeXL`.
Used by `.spectrum-PickerButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-gap": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-label-padding": {
+ "description": "Defined in `.spectrum-PickerButton`, `.spectrum-PickerButton.spectrum-PickerButton--sizeS`, `.spectrum-PickerButton.spectrum-PickerButton--sizeL`, `.spectrum-PickerButton.spectrum-PickerButton--sizeXL`.
Used by `.spectrum-PickerButton-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-fill-padding": {
+ "description": "Defined in `.spectrum-PickerButton`, `.spectrum-PickerButton.spectrum-PickerButton--sizeS`, `.spectrum-PickerButton.spectrum-PickerButton--sizeL`, `.spectrum-PickerButton.spectrum-PickerButton--sizeXL`.
Used by `.spectrum-PickerButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-icon-color": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-icon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-icon-color-hover": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-icon-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-icon-color-down": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-icon-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-icon-color-key-focus": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-icon-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-font-color": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-label`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-font-color-hover": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-font-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-font-color-down": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-font-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-font-color-key-focus": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-font-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-font-family": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-font-style": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-font-weight": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-font-size": {
+ "description": "Defined in `.spectrum-PickerButton`, `.spectrum-PickerButton.spectrum-PickerButton--sizeS`, `.spectrum-PickerButton.spectrum-PickerButton--sizeL`, `.spectrum-PickerButton.spectrum-PickerButton--sizeXL`.
Used by `.spectrum-PickerButton-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-border-radius-rounded": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton--rounded .spectrum-PickerButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-background-animation-duration": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-background-color-hover": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-background-color-down": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-background-color-key-focus": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-padding": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton`, `.spectrum-PickerButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-background-color": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-fill`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-border-color": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-fill`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-border-width": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-border-radius": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-border-radius-sided": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton--right .spectrum-PickerButton-fill`, `.spectrum-PickerButton--left .spectrum-PickerButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-border-radius-rounded-sided": {
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton--right.spectrum-PickerButton--rounded .spectrum-PickerButton-fill`, `.spectrum-PickerButton--left.spectrum-PickerButton--rounded .spectrum-PickerButton-fill`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--system-picker-button-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--system-picker-button-background-color-hover`, `--system-picker-button-background-color-down`, `--system-picker-button-background-color-key-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-75": {
+ "value": "4px",
+ "description": "Used by `--system-picker-button-border-radius`, `--system-picker-button-border-radius-sided`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-200": {
+ "value": "10px",
+ "description": "Used by `--system-picker-button-border-radius-rounded-sided`, `--spectrum-picker-button-border-radius-rounded`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-picker-button-height`, `--spectrum-picker-button-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-50": {
+ "value": "5px",
+ "description": "Used by `--spectrum-picker-button-gap`, `--spectrum-picker-button-label-padding`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-disclosure-icon-100": {
+ "value": "11px",
+ "description": "Used by `--spectrum-picker-button-fill-padding`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-picker-button-icon-color`, `--spectrum-picker-button-font-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-picker-button-icon-color-hover`, `--spectrum-picker-button-font-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-picker-button-icon-color-down`, `--spectrum-picker-button-font-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-picker-button-icon-color-key-focus`, `--spectrum-picker-button-font-color-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-picker-button-font-family`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-picker-button-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-sans-serif-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-picker-button-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-picker-button-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `--spectrum-picker-button-background-animation-duration`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-background-color": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--mod-picker-button-background-color`, `--mod-picker-button-background-color-hover`, `--mod-picker-button-background-color-down`, `--mod-picker-button-border-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--mod-picker-button-font-color`, `--mod-picker-button-font-color-hover`, `--mod-picker-button-font-color-down`, `--mod-picker-button-icon-color`, `--mod-picker-button-icon-color-hover`, `--mod-picker-button-icon-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-picker-button-height`, `--spectrum-picker-button-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-picker-button-label-padding`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-picker-button-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-disclosure-icon-75": {
+ "value": "7px",
+ "description": "Used by `--spectrum-picker-button-fill-padding`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-picker-button-height`, `--spectrum-picker-button-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-200": {
+ "value": "7px",
+ "description": "Used by `--spectrum-picker-button-label-padding`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-picker-button-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-disclosure-icon-200": {
+ "value": "14px",
+ "description": "Used by `--spectrum-picker-button-fill-padding`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-picker-button-height`, `--spectrum-picker-button-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-300": {
+ "value": "8px",
+ "description": "Used by `--spectrum-picker-button-label-padding`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-picker-button-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-disclosure-icon-300": {
+ "value": "17px",
+ "description": "Used by `--spectrum-picker-button-fill-padding`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-picker-button-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-button-background-color`.",
+ "control": "color"
+ },
+ "system-picker-button-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-button-background-color-hover`.",
+ "control": "color"
+ },
+ "system-picker-button-background-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-button-background-color-down`.",
+ "control": "color"
+ },
+ "system-picker-button-background-color-key-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-button-background-color-key-focus`.",
+ "control": "color"
+ },
+ "system-picker-button-border-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-button-border-color`.",
+ "control": "color"
+ },
+ "system-picker-button-border-radius": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-button-border-radius`.",
+ "control": "text"
+ },
+ "system-picker-button-border-radius-rounded-sided": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-button-border-radius-rounded-sided`.",
+ "control": "text"
+ },
+ "system-picker-button-border-radius-sided": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-button-border-radius-sided`.",
+ "control": "text"
+ },
+ "system-picker-button-border-width": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-button-border-width`.",
+ "control": "text"
+ },
+ "system-picker-button-padding": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-button-padding`.",
+ "control": "text"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js
index c01a0f00eec..46703466e65 100644
--- a/components/pickerbutton/stories/pickerbutton.stories.js
+++ b/components/pickerbutton/stories/pickerbutton.stories.js
@@ -2,11 +2,13 @@ import { default as Icon } from "@spectrum-css/icon/stories/icon.stories.js";
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isFocused, isOpen, isQuiet, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { PickerGroup } from "./pickerbutton.test.js";
import { CustomIconTemplate, Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The picker button component is used as a dropdown trigger within other components such as [combobox](?path=/docs/components-combobox--docs).
*/
@@ -87,6 +89,7 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js
index 3df4f85b636..47472844720 100644
--- a/components/pickerbutton/stories/template.js
+++ b/components/pickerbutton/stories/template.js
@@ -14,7 +14,7 @@ import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-PickerButton",
- id = getRandomId("pickerbutton"),
+ id = getRandomId("picker-button"),
size = "m",
label,
position,
diff --git a/components/popover/dist/metadata.json b/components/popover/dist/metadata.json
index 234562ed9ae..0dd81fbe583 100644
--- a/components/popover/dist/metadata.json
+++ b/components/popover/dist/metadata.json
@@ -98,58 +98,277 @@
"[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip",
"[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip"
],
- "modifiers": [
- "--mod-overlay-animation-duration",
- "--mod-overlay-animation-duration-opened",
- "--mod-popover-animation-distance",
- "--mod-popover-background-color",
- "--mod-popover-border-color",
- "--mod-popover-border-width",
- "--mod-popover-content-area-spacing-vertical",
- "--mod-popover-corner-radius",
- "--mod-popover-filter",
- "--mod-popover-pointer-edge-spacing",
- "--mod-popover-pointer-height",
- "--mod-popover-pointer-width",
- "--mod-popover-shadow-blur",
- "--mod-popover-shadow-color",
- "--mod-popover-shadow-horizontal",
- "--mod-popover-shadow-vertical"
- ],
- "component": [
- "--spectrum-popover-animation-distance",
- "--spectrum-popover-background-color",
- "--spectrum-popover-border-color",
- "--spectrum-popover-border-width",
- "--spectrum-popover-content-area-spacing-vertical",
- "--spectrum-popover-corner-radius",
- "--spectrum-popover-filter",
- "--spectrum-popover-pointer-edge-offset",
- "--spectrum-popover-pointer-edge-spacing",
- "--spectrum-popover-pointer-height",
- "--spectrum-popover-pointer-width",
- "--spectrum-popover-shadow-blur",
- "--spectrum-popover-shadow-color",
- "--spectrum-popover-shadow-horizontal",
- "--spectrum-popover-shadow-vertical",
- "--spectrum-popover-tip-height",
- "--spectrum-popover-tip-width",
- "--spectrum-popover-top-to-content-area"
- ],
- "global": [
- "--spectrum-animation-duration-0",
- "--spectrum-animation-duration-100",
- "--spectrum-background-layer-2-color",
- "--spectrum-border-width-100",
- "--spectrum-corner-radius-100",
- "--spectrum-drop-shadow-blur",
- "--spectrum-drop-shadow-color",
- "--spectrum-drop-shadow-x",
- "--spectrum-drop-shadow-y",
- "--spectrum-gray-400",
- "--spectrum-spacing-100"
- ],
- "system-theme": ["--system-popover-border-width"],
- "passthroughs": [],
- "high-contrast": ["--highcontrast-popover-border-color"]
+ "modifiers": {
+ "mod-overlay-animation-duration": {
+ "value": "var(--spectrum-animation-duration-100, 0.13s)",
+ "description": "Used by `.spectrum-Popover`.
Defaults to `var(--spectrum-animation-duration-100, 0.13s)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-overlay-animation-duration-opened": {
+ "value": "var(--spectrum-animation-duration-0, 0s)",
+ "description": "Used by `.spectrum-Popover.is-open`.
Defaults to `var(--spectrum-animation-duration-0, 0s)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-popover-shadow-horizontal": {
+ "value": "var(--spectrum-popover-shadow-horizontal)",
+ "description": "Used by `--spectrum-popover-filter`.
Defaults to `var(--spectrum-popover-shadow-horizontal)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-popover-shadow-vertical": {
+ "value": "var(--spectrum-popover-shadow-vertical)",
+ "description": "Used by `--spectrum-popover-filter`.
Defaults to `var(--spectrum-popover-shadow-vertical)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-popover-shadow-blur": {
+ "value": "var(--spectrum-popover-shadow-blur)",
+ "description": "Used by `--spectrum-popover-filter`.
Defaults to `var(--spectrum-popover-shadow-blur)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-popover-shadow-color": {
+ "value": "var(--spectrum-popover-shadow-color)",
+ "description": "Used by `--spectrum-popover-filter`.
Defaults to `var(--spectrum-popover-shadow-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-popover-content-area-spacing-vertical": {
+ "value": "var(--spectrum-popover-content-area-spacing-vertical)",
+ "description": "Used by `.spectrum-Popover`.
Defaults to `var(--spectrum-popover-content-area-spacing-vertical)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-popover-corner-radius": {
+ "value": "var(--spectrum-popover-corner-radius)",
+ "description": "Used by `.spectrum-Popover`.
Defaults to `var(--spectrum-popover-corner-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-popover-border-color": {
+ "value": "var(--spectrum-popover-border-color)",
+ "description": "Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`.
Defaults to `var(--spectrum-popover-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-popover-border-width": {
+ "value": "var(--spectrum-popover-border-width)",
+ "description": "Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`, `.spectrum-Popover--top-end.spectrum-Popover--withTip, .spectrum-Popover--top-left.spectrum-Popover--withTip, .spectrum-Popover--top-right.spectrum-Popover--withTip, .spectrum-Popover--top-start.spectrum-Popover--withTip, .spectrum-Popover--top.spectrum-Popover--withTip`, `.spectrum-Popover--bottom-end.spectrum-Popover--withTip, .spectrum-Popover--bottom-left.spectrum-Popover--withTip, .spectrum-Popover--bottom-right.spectrum-Popover--withTip, .spectrum-Popover--bottom-start.spectrum-Popover--withTip, .spectrum-Popover--bottom.spectrum-Popover--withTip`, `.spectrum-Popover--right-bottom.spectrum-Popover--withTip, .spectrum-Popover--right-top.spectrum-Popover--withTip, .spectrum-Popover--right.spectrum-Popover--withTip`, `.spectrum-Popover--left-bottom.spectrum-Popover--withTip, .spectrum-Popover--left-top.spectrum-Popover--withTip, .spectrum-Popover--left.spectrum-Popover--withTip`, `.spectrum-Popover--start-bottom.spectrum-Popover--withTip, .spectrum-Popover--start-top.spectrum-Popover--withTip, .spectrum-Popover--start.spectrum-Popover--withTip`, `.spectrum-Popover--end-bottom.spectrum-Popover--withTip, .spectrum-Popover--end-top.spectrum-Popover--withTip, .spectrum-Popover--end.spectrum-Popover--withTip`.
Defaults to `var(--spectrum-popover-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-popover-background-color": {
+ "value": "var(--spectrum-popover-background-color)",
+ "description": "Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`.
Defaults to `var(--spectrum-popover-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-popover-filter": {
+ "value": "var(--spectrum-popover-filter)",
+ "description": "Defined in `.spectrum-Popover *`.
Used by `.spectrum-Popover`.
Defaults to `var(--spectrum-popover-filter)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-popover-pointer-height": {
+ "value": "var(--spectrum-popover-pointer-height)",
+ "description": "Used by `.spectrum-Popover--top-end.spectrum-Popover--withTip, .spectrum-Popover--top-left.spectrum-Popover--withTip, .spectrum-Popover--top-right.spectrum-Popover--withTip, .spectrum-Popover--top-start.spectrum-Popover--withTip, .spectrum-Popover--top.spectrum-Popover--withTip`, `.spectrum-Popover--bottom-end.spectrum-Popover--withTip, .spectrum-Popover--bottom-left.spectrum-Popover--withTip, .spectrum-Popover--bottom-right.spectrum-Popover--withTip, .spectrum-Popover--bottom-start.spectrum-Popover--withTip, .spectrum-Popover--bottom.spectrum-Popover--withTip`, `.spectrum-Popover--withTip.spectrum-Popover .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip`.
Defaults to `var(--spectrum-popover-pointer-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-popover-animation-distance": {
+ "value": "var(--spectrum-popover-animation-distance)",
+ "description": "Used by `.spectrum-Popover--top-end.is-open, .spectrum-Popover--top-left.is-open, .spectrum-Popover--top-right.is-open, .spectrum-Popover--top-start.is-open, .spectrum-Popover--top.is-open`, `.spectrum-Popover--bottom-end.is-open, .spectrum-Popover--bottom-left.is-open, .spectrum-Popover--bottom-right.is-open, .spectrum-Popover--bottom-start.is-open, .spectrum-Popover--bottom.is-open`, `.spectrum-Popover--right-bottom.is-open, .spectrum-Popover--right-top.is-open, .spectrum-Popover--right.is-open`, `.spectrum-Popover--left-bottom.is-open, .spectrum-Popover--left-top.is-open, .spectrum-Popover--left.is-open`, `.spectrum-Popover--start-bottom.is-open, .spectrum-Popover--start-top.is-open, .spectrum-Popover--start.is-open`, `.spectrum-Popover--start-bottom.is-open:dir(rtl), .spectrum-Popover--start-top.is-open:dir(rtl), .spectrum-Popover--start.is-open:dir(rtl), [dir=\"rtl\"] .spectrum-Popover--start-bottom.is-open, [dir=\"rtl\"] .spectrum-Popover--start-top.is-open, [dir=\"rtl\"] .spectrum-Popover--start.is-open`, `.spectrum-Popover--end-bottom.is-open, .spectrum-Popover--end-top.is-open, .spectrum-Popover--end.is-open`, `.spectrum-Popover--end-bottom.is-open:dir(rtl), .spectrum-Popover--end-top.is-open:dir(rtl), .spectrum-Popover--end.is-open:dir(rtl), [dir=\"rtl\"] .spectrum-Popover--end-bottom.is-open, [dir=\"rtl\"] .spectrum-Popover--end-top.is-open, [dir=\"rtl\"] .spectrum-Popover--end.is-open`.
Defaults to `var(--spectrum-popover-animation-distance)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-popover-pointer-width": {
+ "value": "var(--spectrum-popover-pointer-width)",
+ "description": "Used by `.spectrum-Popover--right-bottom.spectrum-Popover--withTip, .spectrum-Popover--right-top.spectrum-Popover--withTip, .spectrum-Popover--right.spectrum-Popover--withTip`, `.spectrum-Popover--left-bottom.spectrum-Popover--withTip, .spectrum-Popover--left-top.spectrum-Popover--withTip, .spectrum-Popover--left.spectrum-Popover--withTip`, `.spectrum-Popover--start-bottom.spectrum-Popover--withTip, .spectrum-Popover--start-top.spectrum-Popover--withTip, .spectrum-Popover--start.spectrum-Popover--withTip`, `.spectrum-Popover--end-bottom.spectrum-Popover--withTip, .spectrum-Popover--end-top.spectrum-Popover--withTip, .spectrum-Popover--end.spectrum-Popover--withTip`, `.spectrum-Popover--withTip.spectrum-Popover .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip`.
Defaults to `var(--spectrum-popover-pointer-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-popover-pointer-edge-spacing": {
+ "value": "var(--spectrum-popover-pointer-edge-spacing)",
+ "description": "Used by `.spectrum-Popover--withTip.spectrum-Popover--top-left .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--top-right .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--top-end .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-left .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-right .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-end .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip`.
Defaults to `var(--spectrum-popover-pointer-edge-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-popover-animation-distance": {
+ "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover--top-end.is-open, .spectrum-Popover--top-left.is-open, .spectrum-Popover--top-right.is-open, .spectrum-Popover--top-start.is-open, .spectrum-Popover--top.is-open`, `.spectrum-Popover--bottom-end.is-open, .spectrum-Popover--bottom-left.is-open, .spectrum-Popover--bottom-right.is-open, .spectrum-Popover--bottom-start.is-open, .spectrum-Popover--bottom.is-open`, `.spectrum-Popover--right-bottom.is-open, .spectrum-Popover--right-top.is-open, .spectrum-Popover--right.is-open`, `.spectrum-Popover--left-bottom.is-open, .spectrum-Popover--left-top.is-open, .spectrum-Popover--left.is-open`, `.spectrum-Popover--start-bottom.is-open, .spectrum-Popover--start-top.is-open, .spectrum-Popover--start.is-open`, `.spectrum-Popover--start-bottom.is-open:dir(rtl), .spectrum-Popover--start-top.is-open:dir(rtl), .spectrum-Popover--start.is-open:dir(rtl), [dir=\"rtl\"] .spectrum-Popover--start-bottom.is-open, [dir=\"rtl\"] .spectrum-Popover--start-top.is-open, [dir=\"rtl\"] .spectrum-Popover--start.is-open`, `.spectrum-Popover--end-bottom.is-open, .spectrum-Popover--end-top.is-open, .spectrum-Popover--end.is-open`, `.spectrum-Popover--end-bottom.is-open:dir(rtl), .spectrum-Popover--end-top.is-open:dir(rtl), .spectrum-Popover--end.is-open:dir(rtl), [dir=\"rtl\"] .spectrum-Popover--end-bottom.is-open, [dir=\"rtl\"] .spectrum-Popover--end-top.is-open, [dir=\"rtl\"] .spectrum-Popover--end.is-open`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-background-color": {
+ "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-popover-border-color": {
+ "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-popover-content-area-spacing-vertical": {
+ "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-top-to-content-area": {
+ "value": "4px",
+ "description": "Used by `--spectrum-popover-content-area-spacing-vertical`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-shadow-horizontal": {
+ "description": "Defined in `.spectrum-Popover`.
Used by `--spectrum-popover-filter`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-shadow-vertical": {
+ "description": "Defined in `.spectrum-Popover`.
Used by `--spectrum-popover-filter`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-shadow-blur": {
+ "description": "Defined in `.spectrum-Popover`.
Used by `--spectrum-popover-filter`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-shadow-color": {
+ "description": "Defined in `.spectrum-Popover`.
Used by `--spectrum-popover-filter`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-popover-corner-radius": {
+ "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-pointer-width": {
+ "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover--right-bottom.spectrum-Popover--withTip, .spectrum-Popover--right-top.spectrum-Popover--withTip, .spectrum-Popover--right.spectrum-Popover--withTip`, `.spectrum-Popover--left-bottom.spectrum-Popover--withTip, .spectrum-Popover--left-top.spectrum-Popover--withTip, .spectrum-Popover--left.spectrum-Popover--withTip`, `.spectrum-Popover--start-bottom.spectrum-Popover--withTip, .spectrum-Popover--start-top.spectrum-Popover--withTip, .spectrum-Popover--start.spectrum-Popover--withTip`, `.spectrum-Popover--end-bottom.spectrum-Popover--withTip, .spectrum-Popover--end-top.spectrum-Popover--withTip, .spectrum-Popover--end.spectrum-Popover--withTip`, `.spectrum-Popover--withTip.spectrum-Popover .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-tip-width": {
+ "value": "16px",
+ "description": "Used by `--spectrum-popover-pointer-width`, `--spectrum-popover-pointer-edge-offset`, `--spectrum-popover-pointer-edge-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-pointer-height": {
+ "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover--top-end.spectrum-Popover--withTip, .spectrum-Popover--top-left.spectrum-Popover--withTip, .spectrum-Popover--top-right.spectrum-Popover--withTip, .spectrum-Popover--top-start.spectrum-Popover--withTip, .spectrum-Popover--top.spectrum-Popover--withTip`, `.spectrum-Popover--bottom-end.spectrum-Popover--withTip, .spectrum-Popover--bottom-left.spectrum-Popover--withTip, .spectrum-Popover--bottom-right.spectrum-Popover--withTip, .spectrum-Popover--bottom-start.spectrum-Popover--withTip, .spectrum-Popover--bottom.spectrum-Popover--withTip`, `.spectrum-Popover--withTip.spectrum-Popover .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-tip-height": {
+ "value": "8px",
+ "description": "Used by `--spectrum-popover-pointer-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-pointer-edge-offset": {
+ "description": "Defined in `.spectrum-Popover`.
Used by `--spectrum-popover-pointer-edge-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-pointer-edge-spacing": {
+ "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover--withTip.spectrum-Popover--top-left .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--top-right .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--top-end .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-left .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-right .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-end .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-filter": {
+ "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-border-width": {
+ "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`, `.spectrum-Popover--top-end.spectrum-Popover--withTip, .spectrum-Popover--top-left.spectrum-Popover--withTip, .spectrum-Popover--top-right.spectrum-Popover--withTip, .spectrum-Popover--top-start.spectrum-Popover--withTip, .spectrum-Popover--top.spectrum-Popover--withTip`, `.spectrum-Popover--bottom-end.spectrum-Popover--withTip, .spectrum-Popover--bottom-left.spectrum-Popover--withTip, .spectrum-Popover--bottom-right.spectrum-Popover--withTip, .spectrum-Popover--bottom-start.spectrum-Popover--withTip, .spectrum-Popover--bottom.spectrum-Popover--withTip`, `.spectrum-Popover--right-bottom.spectrum-Popover--withTip, .spectrum-Popover--right-top.spectrum-Popover--withTip, .spectrum-Popover--right.spectrum-Popover--withTip`, `.spectrum-Popover--left-bottom.spectrum-Popover--withTip, .spectrum-Popover--left-top.spectrum-Popover--withTip, .spectrum-Popover--left.spectrum-Popover--withTip`, `.spectrum-Popover--start-bottom.spectrum-Popover--withTip, .spectrum-Popover--start-top.spectrum-Popover--withTip, .spectrum-Popover--start.spectrum-Popover--withTip`, `.spectrum-Popover--end-bottom.spectrum-Popover--withTip, .spectrum-Popover--end-top.spectrum-Popover--withTip, .spectrum-Popover--end.spectrum-Popover--withTip`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--system-popover-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `.spectrum-Popover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-0": {
+ "description": "Used by `.spectrum-Popover.is-open`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-popover-animation-distance`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-background-layer-2-color": {
+ "value": "var(--spectrum-gray-75)",
+ "description": "Used by `--spectrum-popover-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-400": {
+ "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+ "description": "Used by `--spectrum-popover-border-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-x": {
+ "value": "0px",
+ "description": "Used by `--spectrum-popover-shadow-horizontal`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-y": {
+ "value": "1px",
+ "description": "Used by `--spectrum-popover-shadow-vertical`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-blur": {
+ "value": "4px",
+ "description": "Used by `--spectrum-popover-shadow-blur`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-color": {
+ "value": "var(--spectrum-drop-shadow-color-100)",
+ "description": "Used by `--spectrum-popover-shadow-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-popover-corner-radius`, `--spectrum-popover-pointer-edge-offset`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-popover-border-width": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-popover-border-width`.",
+ "control": "text"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-popover-border-color": {
+ "value": "var(--mod-popover-border-color, var(--spectrum-popover-border-color))",
+ "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`.
Defaults to `var(--mod-popover-border-color, var(--spectrum-popover-border-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/popover/stories/popover.stories.js b/components/popover/stories/popover.stories.js
index e5e7f986607..75532d54ba8 100644
--- a/components/popover/stories/popover.stories.js
+++ b/components/popover/stories/popover.stories.js
@@ -5,11 +5,13 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isOpen } from "@spectrum-css/preview/types";
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
import { html } from "lit";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { PopoverGroup } from "./popover.test.js";
import { FixedWidthSourceTemplate, Template, TipPlacementVariants } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* A popover is used to display transient content (menus, options, additional actions, etc.) and appears when clicking/tapping on a source (tools, buttons, etc.).
* It stands out via its visual style (stroke and drop shadow) and floats on top of the rest of the interface.
@@ -97,6 +99,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/progressbar/dist/metadata.json b/components/progressbar/dist/metadata.json
index 3294d6c477a..222c2848fc6 100644
--- a/components/progressbar/dist/metadata.json
+++ b/components/progressbar/dist/metadata.json
@@ -14,101 +14,446 @@
".spectrum-ProgressBar-label",
".spectrum-ProgressBar-percentage",
".spectrum-ProgressBar-track",
- ".spectrum-ProgressBar.spectrum-ProgressBar--sideLabel",
- ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite",
".spectrum-ProgressBar:dir(rtl)",
".spectrum-ProgressBar:lang(ja)",
".spectrum-ProgressBar:lang(ko)",
".spectrum-ProgressBar:lang(zh)",
- "0%",
+ ".spectrum-ProgressBar.spectrum-ProgressBar--sideLabel",
+ ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite",
"[dir=\"rtl\"] .spectrum-ProgressBar",
+ "0%",
"to"
],
- "modifiers": [
- "--mod-progressbar-animation-duration-indeterminate",
- "--mod-progressbar-animation-ease-in-out-indeterminate",
- "--mod-progressbar-fill-color",
- "--mod-progressbar-fill-color-white",
- "--mod-progressbar-fill-size-indeterminate",
- "--mod-progressbar-font-size",
- "--mod-progressbar-label-and-value-white",
- "--mod-progressbar-line-height",
- "--mod-progressbar-line-height-cjk",
- "--mod-progressbar-max-size",
- "--mod-progressbar-min-size",
- "--mod-progressbar-size-default",
- "--mod-progressbar-spacing-label-to-progressbar",
- "--mod-progressbar-spacing-label-to-text",
- "--mod-progressbar-spacing-top-to-text",
- "--mod-progressbar-text-color",
- "--mod-progressbar-thickness",
- "--mod-progressbar-track-color"
- ],
- "component": [
- "--spectrum-progress-bar-maximum-width",
- "--spectrum-progress-bar-minimum-width",
- "--spectrum-progress-bar-thickness-extra-large",
- "--spectrum-progress-bar-thickness-large",
- "--spectrum-progress-bar-thickness-small",
- "--spectrum-progressbar-animation-duration-indeterminate",
- "--spectrum-progressbar-animation-ease-in-out-indeterminate",
- "--spectrum-progressbar-corner-radius",
- "--spectrum-progressbar-dir-indeterminate-multiplier",
- "--spectrum-progressbar-fill-color",
- "--spectrum-progressbar-fill-color-white",
- "--spectrum-progressbar-fill-size-indeterminate",
- "--spectrum-progressbar-font-size",
- "--spectrum-progressbar-label-and-value-white",
- "--spectrum-progressbar-line-height",
- "--spectrum-progressbar-line-height-cjk",
- "--spectrum-progressbar-max-size",
- "--spectrum-progressbar-min-size",
- "--spectrum-progressbar-size-2400",
- "--spectrum-progressbar-size-2500",
- "--spectrum-progressbar-size-2800",
- "--spectrum-progressbar-size-default",
- "--spectrum-progressbar-sized-font-size",
- "--spectrum-progressbar-sized-size-default",
- "--spectrum-progressbar-sized-spacing-top-to-text",
- "--spectrum-progressbar-sized-thickness",
- "--spectrum-progressbar-spacing-label-to-progressbar",
- "--spectrum-progressbar-spacing-label-to-text",
- "--spectrum-progressbar-spacing-top-to-text",
- "--spectrum-progressbar-static-white-track-color",
- "--spectrum-progressbar-text-color",
- "--spectrum-progressbar-thickness",
- "--spectrum-progressbar-track-color",
- "--spectrum-progressbar-track-color-default",
- "--spectrum-progressbar-track-color-white"
- ],
- "global": [
- "--spectrum-accent-color-900",
- "--spectrum-animation-duration-2000",
- "--spectrum-animation-ease-in-out",
- "--spectrum-cjk-line-height-100",
- "--spectrum-component-top-to-text-100",
- "--spectrum-component-top-to-text-200",
- "--spectrum-component-top-to-text-300",
- "--spectrum-component-top-to-text-75",
- "--spectrum-corner-radius-100",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-75",
- "--spectrum-gray-200",
- "--spectrum-line-height-100",
- "--spectrum-neutral-content-color-default",
- "--spectrum-spacing-200",
- "--spectrum-spacing-75",
- "--spectrum-transparent-white-400",
- "--spectrum-white"
- ],
- "system-theme": [
- "--system-progress-bar-track-color",
- "--system-progress-bar-track-color-white"
- ],
- "passthroughs": ["--mod-fieldlabel-font-size"],
- "high-contrast": [
- "--highcontrast-progressbar-fill-color",
- "--highcontrast-progressbar-track-color"
- ]
+ "modifiers": {
+ "mod-progressbar-size-default": {
+ "value": "var(--spectrum-progressbar-sized-size-default)",
+ "description": "Used by `--spectrum-progressbar-size-default`.
Defaults to `var(--spectrum-progressbar-sized-size-default)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-font-size": {
+ "value": "var(--spectrum-progressbar-sized-font-size)",
+ "description": "Used by `--spectrum-progressbar-font-size`.
Defaults to `var(--spectrum-progressbar-sized-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-thickness": {
+ "value": "var(--spectrum-progressbar-sized-thickness)",
+ "description": "Used by `--spectrum-progressbar-thickness`.
Defaults to `var(--spectrum-progressbar-sized-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-spacing-top-to-text": {
+ "value": "var(--spectrum-progressbar-sized-spacing-top-to-text)",
+ "description": "Used by `--spectrum-progressbar-spacing-top-to-text`.
Defaults to `var(--spectrum-progressbar-sized-spacing-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-animation-ease-in-out-indeterminate": {
+ "value": "var(--spectrum-animation-ease-in-out)",
+ "description": "Used by `--spectrum-progressbar-animation-ease-in-out-indeterminate`.
Defaults to `var(--spectrum-animation-ease-in-out)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-animation-duration-indeterminate": {
+ "value": "var(--spectrum-animation-duration-2000)",
+ "description": "Used by `--spectrum-progressbar-animation-duration-indeterminate`.
Defaults to `var(--spectrum-animation-duration-2000)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-fill-size-indeterminate": {
+ "description": "Used by `--spectrum-progressbar-fill-size-indeterminate`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-line-height-cjk": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-progressbar-line-height-cjk`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-min-size": {
+ "value": "48px",
+ "description": "Used by `--spectrum-progressbar-min-size`.
Defaults to `var(--spectrum-progress-bar-minimum-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-max-size": {
+ "value": "768px",
+ "description": "Used by `--spectrum-progressbar-max-size`.
Defaults to `var(--spectrum-progress-bar-maximum-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-ProgressBar:lang(ja), .spectrum-ProgressBar:lang(ko), .spectrum-ProgressBar:lang(zh)`.
Used by `--spectrum-progressbar-line-height`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-spacing-label-to-progressbar": {
+ "value": "4px",
+ "description": "Used by `--spectrum-progressbar-spacing-label-to-progressbar`.
Defaults to `var(--spectrum-spacing-75)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-spacing-label-to-text": {
+ "value": "12px",
+ "description": "Used by `--spectrum-progressbar-spacing-label-to-text`.
Defaults to `var(--spectrum-spacing-200)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-fill-color": {
+ "value": "var(--spectrum-blue-900)",
+ "description": "Defined in `.spectrum-ProgressBar.spectrum-ProgressBar--staticWhite`.
Used by `--spectrum-progressbar-fill-color`.
Defaults to `var(--spectrum-accent-color-900)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-progressbar-track-color": {
+ "value": "var(--spectrum-progressbar-track-color)",
+ "description": "Defined in `.spectrum-ProgressBar.spectrum-ProgressBar--staticWhite`.
Used by `--spectrum-progressbar-track-color-default`.
Defaults to `var(--spectrum-progressbar-track-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-progressbar-text-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-ProgressBar.spectrum-ProgressBar--staticWhite`.
Used by `--spectrum-progressbar-text-color`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-progressbar-label-and-value-white": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--spectrum-progressbar-label-and-value-white`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-fill-color-white": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--spectrum-progressbar-fill-color-white`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-progressbar-sized-size-default": {
+ "description": "Defined in `.spectrum-ProgressBar, .spectrum-ProgressBar--sizeM`, `.spectrum-ProgressBar--sizeS`, `.spectrum-ProgressBar--sizeL`, `.spectrum-ProgressBar--sizeXL`.
Used by `--spectrum-progressbar-size-default`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-size-2400": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `--spectrum-progressbar-sized-size-default`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-sized-font-size": {
+ "description": "Defined in `.spectrum-ProgressBar, .spectrum-ProgressBar--sizeM`, `.spectrum-ProgressBar--sizeS`, `.spectrum-ProgressBar--sizeL`, `.spectrum-ProgressBar--sizeXL`.
Used by `--spectrum-progressbar-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-sized-thickness": {
+ "description": "Defined in `.spectrum-ProgressBar, .spectrum-ProgressBar--sizeM`, `.spectrum-ProgressBar--sizeS`, `.spectrum-ProgressBar--sizeL`, `.spectrum-ProgressBar--sizeXL`.
Used by `--spectrum-progressbar-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progress-bar-thickness-large": {
+ "value": "8px",
+ "description": "Used by `--spectrum-progressbar-sized-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-sized-spacing-top-to-text": {
+ "description": "Defined in `.spectrum-ProgressBar, .spectrum-ProgressBar--sizeM`, `.spectrum-ProgressBar--sizeS`, `.spectrum-ProgressBar--sizeL`, `.spectrum-ProgressBar--sizeXL`.
Used by `--spectrum-progressbar-spacing-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progress-bar-thickness-small": {
+ "value": "4px",
+ "description": "Used by `--spectrum-progressbar-sized-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-size-2500": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `--spectrum-progressbar-sized-size-default`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-size-2800": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `--spectrum-progressbar-sized-size-default`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progress-bar-thickness-extra-large": {
+ "value": "10px",
+ "description": "Used by `--spectrum-progressbar-sized-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-size-default": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar`, `.spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track`, `to`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-font-size": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `--mod-fieldlabel-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-thickness": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar-track`, `.spectrum-ProgressBar-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-spacing-top-to-text": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar-label, .spectrum-ProgressBar-percentage`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-animation-ease-in-out-indeterminate": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-animation-duration-indeterminate": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-corner-radius": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar-track`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-fill-size-indeterminate": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill`, `0%`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-dir-indeterminate-multiplier": {
+ "description": "Defined in `.spectrum-ProgressBar`, `.spectrum-ProgressBar:dir(rtl), [dir=\"rtl\"] .spectrum-ProgressBar`.
Used by `0%`, `to`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-line-height-cjk": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `--mod-progressbar-line-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-min-size": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progress-bar-minimum-width": {
+ "value": "48px",
+ "description": "Used by `--spectrum-progressbar-min-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-max-size": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progress-bar-maximum-width": {
+ "value": "768px",
+ "description": "Used by `--spectrum-progressbar-max-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-line-height": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar-label, .spectrum-ProgressBar-percentage`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-spacing-label-to-progressbar": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar-label, .spectrum-ProgressBar-percentage`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-spacing-label-to-text": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label`, `.spectrum-ProgressBar-percentage`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-fill-color": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar-fill`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-progressbar-track-color-default": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar-track`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-progressbar-track-color": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `--spectrum-progressbar-track-color-default`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-progressbar-text-color": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar-label, .spectrum-ProgressBar-percentage`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-progressbar-label-and-value-white": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `--mod-progressbar-text-color`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-fill-color-white": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `--mod-progressbar-fill-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-progressbar-static-white-track-color": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `--mod-progressbar-track-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-progressbar-track-color-white": {
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `--spectrum-progressbar-static-white-track-color`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--system-progress-bar-track-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-400": {
+ "value": "light-dark(rgba(255, 255, 255, 0.21), rgba(255, 255, 255, 0.21))",
+ "description": "Used by `--system-progress-bar-track-color-white`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-progressbar-sized-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-progressbar-sized-spacing-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-progressbar-sized-spacing-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-progressbar-sized-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-progressbar-sized-spacing-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-progressbar-sized-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-300": {
+ "value": "12px",
+ "description": "Used by `--spectrum-progressbar-sized-spacing-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-ease-in-out": {
+ "description": "Used by `--spectrum-progressbar-animation-ease-in-out-indeterminate`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-2000": {
+ "description": "Used by `--spectrum-progressbar-animation-duration-indeterminate`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-progressbar-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-progressbar-line-height-cjk`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-progressbar-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-progressbar-spacing-label-to-progressbar`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-progressbar-spacing-label-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-accent-color-900": {
+ "value": "var(--spectrum-blue-900)",
+ "description": "Used by `--spectrum-progressbar-fill-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-progressbar-text-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--spectrum-progressbar-label-and-value-white`, `--spectrum-progressbar-fill-color-white`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-progress-bar-track-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-progressbar-track-color`.",
+ "control": "color"
+ },
+ "system-progress-bar-track-color-white": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-progressbar-track-color-white`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {
+ "mod-fieldlabel-font-size": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-progressbar-fill-color": {
+ "value": "var(--mod-progressbar-fill-color, var(--spectrum-accent-color-900))",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `--spectrum-progressbar-fill-color`.
Defaults to `var(--mod-progressbar-fill-color, var(--spectrum-accent-color-900))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-progressbar-track-color": {
+ "value": "var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `--spectrum-progressbar-track-color-default`.
Defaults to `var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js
index 4468a701277..8407f4d1a55 100644
--- a/components/progressbar/stories/progressbar.stories.js
+++ b/components/progressbar/stories/progressbar.stories.js
@@ -1,11 +1,13 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isIndeterminate, size, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { ProgressBarGroup } from "./progressbar.test.js";
import { IndeterminateGroup, Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The progress bar component shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way.
*
@@ -98,6 +100,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/progresscircle/dist/metadata.json b/components/progresscircle/dist/metadata.json
index 82493f14621..b3ac38098b2 100644
--- a/components/progresscircle/dist/metadata.json
+++ b/components/progresscircle/dist/metadata.json
@@ -2,16 +2,16 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-ProgressCircle",
+ ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fills",
".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fillSubMask1",
".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fillSubMask2",
- ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fills",
".spectrum-ProgressCircle--indeterminate-fill-submask-2",
".spectrum-ProgressCircle-fill",
".spectrum-ProgressCircle-fillMask1",
".spectrum-ProgressCircle-fillMask2",
+ ".spectrum-ProgressCircle-fills",
".spectrum-ProgressCircle-fillSubMask1",
".spectrum-ProgressCircle-fillSubMask2",
- ".spectrum-ProgressCircle-fills",
".spectrum-ProgressCircle-track",
".spectrum-ProgressCircle.spectrum-ProgressCircle--large",
".spectrum-ProgressCircle.spectrum-ProgressCircle--medium",
@@ -79,48 +79,197 @@
"98.31%",
"to"
],
- "modifiers": [
- "--mod-progress-circle-fill-border-color",
- "--mod-progress-circle-fill-border-color-over-background",
- "--mod-progress-circle-position",
- "--mod-progress-circle-size",
- "--mod-progress-circle-thickness",
- "--mod-progress-circle-track-border-color",
- "--mod-progress-circle-track-border-color-over-background",
- "--mod-progress-circle-track-border-style"
- ],
- "component": [
- "--spectrum-progress-circle-fill-border-color",
- "--spectrum-progress-circle-fill-border-color-over-background",
- "--spectrum-progress-circle-size",
- "--spectrum-progress-circle-size-large",
- "--spectrum-progress-circle-size-medium",
- "--spectrum-progress-circle-size-small",
- "--spectrum-progress-circle-thickness",
- "--spectrum-progress-circle-thickness-large",
- "--spectrum-progress-circle-thickness-medium",
- "--spectrum-progress-circle-thickness-small",
- "--spectrum-progress-circle-track-border-color",
- "--spectrum-progress-circle-track-border-color-over-background",
- "--spectrum-progress-circle-track-border-style"
- ],
- "global": [
- "--spectrum-accent-content-color-default",
- "--spectrum-gray-200",
- "--spectrum-gray-300",
- "--spectrum-transparent-white-1000",
- "--spectrum-transparent-white-300",
- "--spectrum-transparent-white-400",
- "--spectrum-transparent-white-900"
- ],
- "system-theme": [
- "--system-progress-circle-fill-border-color-over-background",
- "--system-progress-circle-track-border-color",
- "--system-progress-circle-track-border-color-over-background"
- ],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-progress-circle-fill-border-color",
- "--highcontrast-progress-circle-fill-border-color-over-background"
- ]
+ "modifiers": {
+ "mod-progress-circle-size": {
+ "value": "var(--spectrum-progress-circle-size)",
+ "description": "Used by `.spectrum-ProgressCircle`, `.spectrum-ProgressCircle-track`, `.spectrum-ProgressCircle-fill`.
Defaults to `var(--spectrum-progress-circle-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progress-circle-position": {
+ "description": "Used by `.spectrum-ProgressCircle`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progress-circle-track-border-style": {
+ "value": "var(--spectrum-progress-circle-track-border-style)",
+ "description": "Used by `.spectrum-ProgressCircle-track`.
Defaults to `var(--spectrum-progress-circle-track-border-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progress-circle-thickness": {
+ "value": "var(--spectrum-progress-circle-thickness)",
+ "description": "Used by `.spectrum-ProgressCircle-track`, `.spectrum-ProgressCircle-fill`.
Defaults to `var(--spectrum-progress-circle-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progress-circle-track-border-color": {
+ "value": "var(--spectrum-progress-circle-track-border-color)",
+ "description": "Used by `.spectrum-ProgressCircle-track`.
Defaults to `var(--spectrum-progress-circle-track-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-progress-circle-fill-border-color": {
+ "value": "var(--spectrum-progress-circle-fill-border-color)",
+ "description": "Used by `.spectrum-ProgressCircle-fill`.
Defaults to `var(--spectrum-progress-circle-fill-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-progress-circle-track-border-color-over-background": {
+ "value": "var(--spectrum-progress-circle-track-border-color-over-background)",
+ "description": "Used by `.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-track`.
Defaults to `var(--spectrum-progress-circle-track-border-color-over-background)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-progress-circle-fill-border-color-over-background": {
+ "value": "var(--spectrum-progress-circle-fill-border-color-over-background)",
+ "description": "Used by `.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-fill`.
Defaults to `var(--spectrum-progress-circle-fill-border-color-over-background)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-progress-circle-track-border-style": {
+ "description": "Defined in `.spectrum-ProgressCircle-track`, `.spectrum-ProgressCircle`.
Used by `.spectrum-ProgressCircle-track`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progress-circle-track-border-color": {
+ "description": "Defined in `.spectrum-ProgressCircle`.
Used by `.spectrum-ProgressCircle-track`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-progress-circle-fill-border-color": {
+ "description": "Defined in `.spectrum-ProgressCircle`.
Used by `.spectrum-ProgressCircle-fill`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-progress-circle-track-border-color-over-background": {
+ "description": "Defined in `.spectrum-ProgressCircle`.
Used by `.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-track`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-progress-circle-fill-border-color-over-background": {
+ "description": "Defined in `.spectrum-ProgressCircle`.
Used by `.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-fill`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-progress-circle-size": {
+ "description": "Defined in `.spectrum-ProgressCircle.spectrum-ProgressCircle--small`, `.spectrum-ProgressCircle, .spectrum-ProgressCircle.spectrum-ProgressCircle--medium`, `.spectrum-ProgressCircle.spectrum-ProgressCircle--large`.
Used by `.spectrum-ProgressCircle`, `.spectrum-ProgressCircle-track`, `.spectrum-ProgressCircle-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progress-circle-size-small": {
+ "value": "16px",
+ "description": "Used by `--spectrum-progress-circle-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progress-circle-thickness": {
+ "description": "Defined in `.spectrum-ProgressCircle.spectrum-ProgressCircle--small`, `.spectrum-ProgressCircle, .spectrum-ProgressCircle.spectrum-ProgressCircle--medium`, `.spectrum-ProgressCircle.spectrum-ProgressCircle--large`.
Used by `.spectrum-ProgressCircle-track`, `.spectrum-ProgressCircle-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progress-circle-thickness-small": {
+ "value": "2px",
+ "description": "Used by `--spectrum-progress-circle-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progress-circle-size-medium": {
+ "value": "32px",
+ "description": "Used by `--spectrum-progress-circle-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progress-circle-thickness-medium": {
+ "value": "3px",
+ "description": "Used by `--spectrum-progress-circle-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progress-circle-size-large": {
+ "value": "64px",
+ "description": "Used by `--spectrum-progress-circle-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progress-circle-thickness-large": {
+ "value": "4px",
+ "description": "Used by `--spectrum-progress-circle-thickness`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--system-progress-circle-track-border-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-400": {
+ "value": "light-dark(rgba(255, 255, 255, 0.21), rgba(255, 255, 255, 0.21))",
+ "description": "Used by `--system-progress-circle-track-border-color-over-background`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-1000": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--system-progress-circle-fill-border-color-over-background`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-300": {
+ "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+ "description": "Used by `--spectrum-progress-circle-track-border-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-default": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--spectrum-progress-circle-fill-border-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-300": {
+ "value": "light-dark(rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.17))",
+ "description": "Used by `--spectrum-progress-circle-track-border-color-over-background`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-900": {
+ "value": "light-dark(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94))",
+ "description": "Used by `--spectrum-progress-circle-fill-border-color-over-background`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-progress-circle-track-border-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-progress-circle-track-border-color`.",
+ "control": "color"
+ },
+ "system-progress-circle-track-border-color-over-background": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-progress-circle-track-border-color-over-background`.",
+ "control": "color"
+ },
+ "system-progress-circle-fill-border-color-over-background": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-progress-circle-fill-border-color-over-background`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-progress-circle-fill-border-color": {
+ "value": "var(--mod-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color))",
+ "description": "Defined in `.spectrum-ProgressCircle`.
Used by `.spectrum-ProgressCircle-fill`.
Defaults to `var(--mod-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-progress-circle-fill-border-color-over-background": {
+ "value": "var(--mod-progress-circle-fill-border-color-over-background, var(--spectrum-progress-circle-fill-border-color-over-background))",
+ "description": "Defined in `.spectrum-ProgressCircle`.
Used by `.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-fill`.
Defaults to `var(--mod-progress-circle-fill-border-color-over-background, var(--spectrum-progress-circle-fill-border-color-over-background))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/progresscircle/stories/progresscircle.stories.js b/components/progresscircle/stories/progresscircle.stories.js
index f64c2f2780a..5b27f6ecb64 100644
--- a/components/progresscircle/stories/progresscircle.stories.js
+++ b/components/progresscircle/stories/progresscircle.stories.js
@@ -1,11 +1,13 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isIndeterminate, size, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { ProgressCircleGroup } from "./progresscircle.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* Progress circles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or indeterminate progress.
*/
@@ -33,6 +35,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json
index b94c6dfcf90..04f1794cdfb 100644
--- a/components/radio/dist/metadata.json
+++ b/components/radio/dist/metadata.json
@@ -26,10 +26,6 @@
".spectrum-Radio-label:lang(ja)",
".spectrum-Radio-label:lang(ko)",
".spectrum-Radio-label:lang(zh)",
- ".spectrum-Radio.is-readOnly .spectrum-Radio-input",
- ".spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label",
- ".spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label",
- ".spectrum-Radio.is-readOnly .spectrum-Radio-label",
".spectrum-Radio:active .spectrum-Radio-button:before",
".spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
".spectrum-Radio:active .spectrum-Radio-label",
@@ -44,157 +40,796 @@
".spectrum-Radio:lang(ja)",
".spectrum-Radio:lang(ko)",
".spectrum-Radio:lang(zh)",
+ ".spectrum-Radio.is-readOnly .spectrum-Radio-input",
+ ".spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label",
+ ".spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label",
+ ".spectrum-Radio.is-readOnly .spectrum-Radio-label",
"[dir=\"rtl\"] .spectrum-Radio .spectrum-Radio-button:after"
],
- "modifiers": [
- "--mod-radio-animation-duration",
- "--mod-radio-border-width",
- "--mod-radio-button-background-color",
- "--mod-radio-button-border-color-default",
- "--mod-radio-button-border-color-down",
- "--mod-radio-button-border-color-focus",
- "--mod-radio-button-border-color-hover",
- "--mod-radio-button-checked-border-color-default",
- "--mod-radio-button-checked-border-color-down",
- "--mod-radio-button-checked-border-color-focus",
- "--mod-radio-button-checked-border-color-hover",
- "--mod-radio-button-control-size",
- "--mod-radio-button-top-to-control",
- "--mod-radio-disabled-border-color",
- "--mod-radio-disabled-content-color",
- "--mod-radio-emphasized-accent-color",
- "--mod-radio-emphasized-accent-color-down",
- "--mod-radio-emphasized-accent-color-focus",
- "--mod-radio-emphasized-accent-color-hover",
- "--mod-radio-focus-indicator-color",
- "--mod-radio-focus-indicator-thickness",
- "--mod-radio-font-size",
- "--mod-radio-height",
- "--mod-radio-line-height",
- "--mod-radio-line-height-cjk",
- "--mod-radio-neutral-content-color",
- "--mod-radio-neutral-content-color-down",
- "--mod-radio-neutral-content-color-focus",
- "--mod-radio-neutral-content-color-hover",
- "--mod-radio-text-to-control"
- ],
- "component": [
- "--spectrum-radio-animation-duration",
- "--spectrum-radio-border-width",
- "--spectrum-radio-button-background-color",
- "--spectrum-radio-button-border-color-default",
- "--spectrum-radio-button-border-color-down",
- "--spectrum-radio-button-border-color-focus",
- "--spectrum-radio-button-border-color-hover",
- "--spectrum-radio-button-checked-border-color-default",
- "--spectrum-radio-button-checked-border-color-down",
- "--spectrum-radio-button-checked-border-color-focus",
- "--spectrum-radio-button-checked-border-color-hover",
- "--spectrum-radio-button-control-size",
- "--spectrum-radio-button-control-size-extra-large",
- "--spectrum-radio-button-control-size-large",
- "--spectrum-radio-button-control-size-medium",
- "--spectrum-radio-button-control-size-small",
- "--spectrum-radio-button-selection-indicator",
- "--spectrum-radio-button-top-to-control",
- "--spectrum-radio-button-top-to-control-extra-large",
- "--spectrum-radio-button-top-to-control-large",
- "--spectrum-radio-button-top-to-control-medium",
- "--spectrum-radio-button-top-to-control-small",
- "--spectrum-radio-disabled-border-color",
- "--spectrum-radio-disabled-content-color",
- "--spectrum-radio-emphasized-accent-color",
- "--spectrum-radio-emphasized-accent-color-down",
- "--spectrum-radio-emphasized-accent-color-focus",
- "--spectrum-radio-emphasized-accent-color-hover",
- "--spectrum-radio-focus-indicator-color",
- "--spectrum-radio-focus-indicator-gap",
- "--spectrum-radio-focus-indicator-thickness",
- "--spectrum-radio-font-size",
- "--spectrum-radio-height",
- "--spectrum-radio-label-bottom-to-text",
- "--spectrum-radio-label-top-to-text",
- "--spectrum-radio-line-height",
- "--spectrum-radio-line-height-cjk",
- "--spectrum-radio-neutral-content-color",
- "--spectrum-radio-neutral-content-color-down",
- "--spectrum-radio-neutral-content-color-focus",
- "--spectrum-radio-neutral-content-color-hover",
- "--spectrum-radio-text-to-control"
- ],
- "global": [
- "--spectrum-accent-color-1000",
- "--spectrum-accent-color-1100",
- "--spectrum-accent-color-900",
- "--spectrum-animation-duration-100",
- "--spectrum-border-width-200",
- "--spectrum-cjk-line-height-100",
- "--spectrum-component-bottom-to-text-100",
- "--spectrum-component-bottom-to-text-200",
- "--spectrum-component-bottom-to-text-300",
- "--spectrum-component-bottom-to-text-75",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-75",
- "--spectrum-component-top-to-text-100",
- "--spectrum-component-top-to-text-200",
- "--spectrum-component-top-to-text-300",
- "--spectrum-component-top-to-text-75",
- "--spectrum-disabled-content-color",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-300",
- "--spectrum-font-size-75",
- "--spectrum-gray-50",
- "--spectrum-gray-600",
- "--spectrum-gray-700",
- "--spectrum-gray-800",
- "--spectrum-line-height-100",
- "--spectrum-neutral-background-color-selected-default",
- "--spectrum-neutral-background-color-selected-down",
- "--spectrum-neutral-background-color-selected-hover",
- "--spectrum-neutral-background-color-selected-key-focus",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-down",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-neutral-content-color-key-focus",
- "--spectrum-text-to-control-100",
- "--spectrum-text-to-control-200",
- "--spectrum-text-to-control-300",
- "--spectrum-text-to-control-75"
- ],
- "system-theme": [
- "--system-radio-button-background-color",
- "--system-radio-button-border-color-default",
- "--system-radio-button-border-color-down",
- "--system-radio-button-border-color-focus",
- "--system-radio-button-border-color-hover"
- ],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-radio-button-background-color",
- "--highcontrast-radio-button-border-color-default",
- "--highcontrast-radio-button-border-color-down",
- "--highcontrast-radio-button-border-color-focus",
- "--highcontrast-radio-button-border-color-hover",
- "--highcontrast-radio-button-checked-border-color-default",
- "--highcontrast-radio-button-checked-border-color-down",
- "--highcontrast-radio-button-checked-border-color-focus",
- "--highcontrast-radio-button-checked-border-color-hover",
- "--highcontrast-radio-disabled-border-color",
- "--highcontrast-radio-disabled-content-color",
- "--highcontrast-radio-emphasized-accent-color",
- "--highcontrast-radio-emphasized-accent-color-down",
- "--highcontrast-radio-emphasized-accent-color-focus",
- "--highcontrast-radio-emphasized-accent-color-hover",
- "--highcontrast-radio-focus-indicator-color",
- "--highcontrast-radio-neutral-content-color",
- "--highcontrast-radio-neutral-content-color-down",
- "--highcontrast-radio-neutral-content-color-focus",
- "--highcontrast-radio-neutral-content-color-hover"
- ]
+ "modifiers": {
+ "mod-radio-height": {
+ "value": "var(--spectrum-radio-height)",
+ "description": "Used by `.spectrum-Radio`.
Defaults to `var(--spectrum-radio-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-radio-button-border-color-down": {
+ "value": "var(--spectrum-radio-button-border-color-down)",
+ "description": "Used by `.spectrum-Radio:active .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-border-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-radio-button-checked-border-color-down": {
+ "value": "var(--spectrum-radio-button-checked-border-color-down)",
+ "description": "Used by `.spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-checked-border-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-radio-neutral-content-color-down": {
+ "value": "var(--spectrum-radio-neutral-content-color-down)",
+ "description": "Used by `.spectrum-Radio:active .spectrum-Radio-label`.
Defaults to `var(--spectrum-radio-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-radio-button-border-color-focus": {
+ "value": "var(--spectrum-radio-button-border-color-focus)",
+ "description": "Used by `.spectrum-Radio:focus .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-border-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-radio-focus-indicator-color": {
+ "value": "var(--spectrum-radio-focus-indicator-color)",
+ "description": "Used by `.spectrum-Radio:focus .spectrum-Radio-button:after`, `.spectrum-Radio-input:focus-visible + .spectrum-Radio-button:after`.
Defaults to `var(--spectrum-radio-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-radio-focus-indicator-thickness": {
+ "value": "var(--spectrum-radio-focus-indicator-thickness)",
+ "description": "Used by `.spectrum-Radio:focus .spectrum-Radio-button:after`, `.spectrum-Radio-input:focus-visible + .spectrum-Radio-button:after`.
Defaults to `var(--spectrum-radio-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-radio-button-checked-border-color-focus": {
+ "value": "var(--spectrum-radio-button-checked-border-color-focus)",
+ "description": "Used by `.spectrum-Radio:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-checked-border-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-radio-neutral-content-color-focus": {
+ "value": "var(--spectrum-radio-neutral-content-color-focus)",
+ "description": "Used by `.spectrum-Radio:focus .spectrum-Radio-label`.
Defaults to `var(--spectrum-radio-neutral-content-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-radio-neutral-content-color": {
+ "value": "var(--spectrum-radio-neutral-content-color)",
+ "description": "Used by `.spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label, .spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label, .spectrum-Radio.is-readOnly .spectrum-Radio-label`, `.spectrum-Radio-label`.
Defaults to `var(--spectrum-radio-neutral-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-radio-emphasized-accent-color": {
+ "value": "var(--spectrum-radio-emphasized-accent-color)",
+ "description": "Used by `.spectrum-Radio--emphasized .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-emphasized-accent-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-radio-button-border-color-hover": {
+ "value": "var(--spectrum-radio-button-border-color-hover)",
+ "description": "Used by `.spectrum-Radio:hover .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-radio-button-checked-border-color-hover": {
+ "value": "var(--spectrum-radio-button-checked-border-color-hover)",
+ "description": "Used by `.spectrum-Radio:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-checked-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-radio-neutral-content-color-hover": {
+ "value": "var(--spectrum-radio-neutral-content-color-hover)",
+ "description": "Used by `.spectrum-Radio:hover .spectrum-Radio-label`.
Defaults to `var(--spectrum-radio-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-radio-emphasized-accent-color-hover": {
+ "value": "var(--spectrum-radio-emphasized-accent-color-hover)",
+ "description": "Used by `.spectrum-Radio--emphasized:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-emphasized-accent-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-radio-emphasized-accent-color-down": {
+ "value": "var(--spectrum-radio-emphasized-accent-color-down)",
+ "description": "Used by `.spectrum-Radio--emphasized:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-emphasized-accent-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-radio-emphasized-accent-color-focus": {
+ "value": "var(--spectrum-radio-emphasized-accent-color-focus)",
+ "description": "Used by `.spectrum-Radio--emphasized:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-emphasized-accent-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-radio-disabled-border-color": {
+ "value": "var(--spectrum-radio-disabled-border-color)",
+ "description": "Used by `.spectrum-Radio .spectrum-Radio-input:checked:disabled + .spectrum-Radio-button:before, .spectrum-Radio .spectrum-Radio-input:disabled + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-disabled-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-radio-disabled-content-color": {
+ "value": "var(--spectrum-radio-disabled-content-color)",
+ "description": "Used by `.spectrum-Radio .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label, .spectrum-Radio .spectrum-Radio-input:disabled ~ .spectrum-Radio-label`.
Defaults to `var(--spectrum-radio-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-radio-line-height": {
+ "value": "var(--spectrum-radio-line-height)",
+ "description": "Used by `.spectrum-Radio-input`, `.spectrum-Radio-label`.
Defaults to `var(--spectrum-radio-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-radio-button-checked-border-color-default": {
+ "value": "var(--spectrum-radio-button-checked-border-color-default)",
+ "description": "Used by `.spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-checked-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-radio-text-to-control": {
+ "value": "var(--spectrum-radio-text-to-control)",
+ "description": "Used by `.spectrum-Radio-label`.
Defaults to `var(--spectrum-radio-text-to-control)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-radio-font-size": {
+ "value": "var(--spectrum-radio-font-size)",
+ "description": "Used by `.spectrum-Radio-label`.
Defaults to `var(--spectrum-radio-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-radio-animation-duration": {
+ "value": "var(--spectrum-radio-animation-duration)",
+ "description": "Used by `.spectrum-Radio-label`, `.spectrum-Radio-button:before`, `.spectrum-Radio-button:after`.
Defaults to `var(--spectrum-radio-animation-duration)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-radio-line-height-cjk": {
+ "value": "var(--spectrum-radio-line-height-cjk)",
+ "description": "Used by `.spectrum-Radio-label:lang(ja), .spectrum-Radio-label:lang(ko), .spectrum-Radio-label:lang(zh)`.
Defaults to `var(--spectrum-radio-line-height-cjk)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-radio-button-control-size": {
+ "value": "var(--spectrum-radio-button-control-size)",
+ "description": "Used by `.spectrum-Radio-button`, `.spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-control-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-radio-button-top-to-control": {
+ "value": "var(--spectrum-radio-button-top-to-control)",
+ "description": "Used by `.spectrum-Radio-button`.
Defaults to `var(--spectrum-radio-button-top-to-control)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-radio-button-background-color": {
+ "value": "var(--spectrum-radio-button-background-color)",
+ "description": "Used by `.spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-radio-border-width": {
+ "value": "var(--spectrum-radio-border-width)",
+ "description": "Used by `.spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-radio-button-border-color-default": {
+ "value": "var(--spectrum-radio-button-border-color-default)",
+ "description": "Used by `.spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-radio-neutral-content-color": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label, .spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label, .spectrum-Radio.is-readOnly .spectrum-Radio-label`, `.spectrum-Radio-label`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-neutral-content-color-hover": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:hover .spectrum-Radio-label`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-neutral-content-color-down": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:active .spectrum-Radio-label`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-neutral-content-color-focus": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-label`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-focus-indicator-thickness": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-button:after`, `.spectrum-Radio-input:focus-visible + .spectrum-Radio-button:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-focus-indicator-gap": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-button:after`, `.spectrum-Radio-input:focus-visible + .spectrum-Radio-button:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-focus-indicator-color": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-button:after`, `.spectrum-Radio-input:focus-visible + .spectrum-Radio-button:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-disabled-content-color": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label, .spectrum-Radio .spectrum-Radio-input:disabled ~ .spectrum-Radio-label`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-disabled-border-color": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio .spectrum-Radio-input:checked:disabled + .spectrum-Radio-button:before, .spectrum-Radio .spectrum-Radio-input:disabled + .spectrum-Radio-button:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-emphasized-accent-color": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio--emphasized .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-emphasized-accent-color-hover": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio--emphasized:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-emphasized-accent-color-down": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio--emphasized:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-emphasized-accent-color-focus": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio--emphasized:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-border-width": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-button:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-button-checked-border-color-default": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-input:checked + .spectrum-Radio-button:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-button-checked-border-color-hover": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-button-checked-border-color-down": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-button-checked-border-color-focus": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-line-height": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-input`, `.spectrum-Radio-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-animation-duration": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-label`, `.spectrum-Radio-button:before`, `.spectrum-Radio-button:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-line-height-cjk": {
+ "description": "Defined in `.spectrum-Radio:lang(ja), .spectrum-Radio:lang(ko), .spectrum-Radio:lang(zh)`.
Used by `.spectrum-Radio-label:lang(ja), .spectrum-Radio-label:lang(ko), .spectrum-Radio-label:lang(zh)`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-height": {
+ "description": "Defined in `.spectrum-Radio, .spectrum-Radio--sizeM`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`.
Used by `.spectrum-Radio`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-button-control-size": {
+ "description": "Defined in `.spectrum-Radio, .spectrum-Radio--sizeM`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`.
Used by `.spectrum-Radio:focus .spectrum-Radio-button:after`, `.spectrum-Radio-input:checked + .spectrum-Radio-button:before`, `.spectrum-Radio-input:focus-visible + .spectrum-Radio-button:after`, `.spectrum-Radio-button`, `.spectrum-Radio-button:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-button-control-size-medium": {
+ "value": "14px",
+ "description": "Used by `--spectrum-radio-button-control-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-text-to-control": {
+ "description": "Defined in `.spectrum-Radio, .spectrum-Radio--sizeM`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`.
Used by `.spectrum-Radio-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-label-top-to-text": {
+ "description": "Defined in `.spectrum-Radio, .spectrum-Radio--sizeM`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`.
Used by `.spectrum-Radio-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-label-bottom-to-text": {
+ "description": "Defined in `.spectrum-Radio, .spectrum-Radio--sizeM`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`.
Used by `.spectrum-Radio-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-button-top-to-control": {
+ "description": "Defined in `.spectrum-Radio, .spectrum-Radio--sizeM`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`.
Used by `.spectrum-Radio-button`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-button-top-to-control-medium": {
+ "value": "9px",
+ "description": "Used by `--spectrum-radio-button-top-to-control`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-font-size": {
+ "description": "Defined in `.spectrum-Radio, .spectrum-Radio--sizeM`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`.
Used by `.spectrum-Radio-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-button-control-size-small": {
+ "value": "12px",
+ "description": "Used by `--spectrum-radio-button-control-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-button-top-to-control-small": {
+ "value": "6px",
+ "description": "Used by `--spectrum-radio-button-top-to-control`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-button-control-size-large": {
+ "value": "16px",
+ "description": "Used by `--spectrum-radio-button-control-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-button-top-to-control-large": {
+ "value": "12px",
+ "description": "Used by `--spectrum-radio-button-top-to-control`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-button-control-size-extra-large": {
+ "value": "18px",
+ "description": "Used by `--spectrum-radio-button-control-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-button-top-to-control-extra-large": {
+ "value": "15px",
+ "description": "Used by `--spectrum-radio-button-top-to-control`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-button-border-color-down": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:active .spectrum-Radio-button:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-button-border-color-focus": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-button:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-button-border-color-hover": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:hover .spectrum-Radio-button:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-button-selection-indicator": {
+ "value": "4px",
+ "description": "Used by `.spectrum-Radio-input:checked + .spectrum-Radio-button:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-button-background-color": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-button:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-button-border-color-default": {
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-button:before`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-600": {
+ "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+ "description": "Used by `--system-radio-button-border-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-700": {
+ "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+ "description": "Used by `--system-radio-button-border-color-hover`, `--system-radio-button-border-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-800": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Used by `--system-radio-button-border-color-down`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-50": {
+ "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))",
+ "description": "Used by `--system-radio-button-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-radio-neutral-content-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-radio-neutral-content-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-radio-neutral-content-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-radio-neutral-content-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-radio-focus-indicator-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-radio-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-radio-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-radio-disabled-content-color`, `--spectrum-radio-disabled-border-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-color-900": {
+ "value": "var(--spectrum-blue-900)",
+ "description": "Used by `--spectrum-radio-emphasized-accent-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-color-1000": {
+ "value": "var(--spectrum-blue-1000)",
+ "description": "Used by `--spectrum-radio-emphasized-accent-color-hover`, `--spectrum-radio-emphasized-accent-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-color-1100": {
+ "value": "var(--spectrum-blue-1100)",
+ "description": "Used by `--spectrum-radio-emphasized-accent-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-radio-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-radio-button-checked-border-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-radio-button-checked-border-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-radio-button-checked-border-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-radio-button-checked-border-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-radio-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `--spectrum-radio-animation-duration`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-radio-line-height-cjk`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-radio-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-control-100": {
+ "value": "10px",
+ "description": "Used by `--spectrum-radio-text-to-control`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-radio-label-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-100": {
+ "value": "9px",
+ "description": "Used by `--spectrum-radio-label-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-radio-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-radio-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-control-75": {
+ "value": "9px",
+ "description": "Used by `--spectrum-radio-text-to-control`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-radio-label-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-radio-label-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-radio-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-radio-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-control-200": {
+ "value": "11px",
+ "description": "Used by `--spectrum-radio-text-to-control`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-radio-label-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-200": {
+ "value": "11px",
+ "description": "Used by `--spectrum-radio-label-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-radio-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-radio-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-control-300": {
+ "value": "13px",
+ "description": "Used by `--spectrum-radio-text-to-control`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-300": {
+ "value": "12px",
+ "description": "Used by `--spectrum-radio-label-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-radio-label-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-radio-font-size`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-radio-button-border-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-radio-button-border-color-default`.",
+ "control": "color"
+ },
+ "system-radio-button-border-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-radio-button-border-color-hover`.",
+ "control": "color"
+ },
+ "system-radio-button-border-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-radio-button-border-color-down`.",
+ "control": "color"
+ },
+ "system-radio-button-border-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-radio-button-border-color-focus`.",
+ "control": "color"
+ },
+ "system-radio-button-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-radio-button-background-color`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-radio-button-background-color": {
+ "description": "Defined in `.spectrum-Radio`.",
+ "control": "color"
+ },
+ "highcontrast-radio-neutral-content-color": {
+ "value": "var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color))",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label, .spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label, .spectrum-Radio.is-readOnly .spectrum-Radio-label`, `.spectrum-Radio-label`.
Defaults to `var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-radio-neutral-content-color-hover": {
+ "value": "var(--mod-radio-neutral-content-color-hover, var(--spectrum-radio-neutral-content-color-hover))",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:hover .spectrum-Radio-label`.
Defaults to `var(--mod-radio-neutral-content-color-hover, var(--spectrum-radio-neutral-content-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-radio-neutral-content-color-down": {
+ "value": "var(--mod-radio-neutral-content-color-down, var(--spectrum-radio-neutral-content-color-down))",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:active .spectrum-Radio-label`.
Defaults to `var(--mod-radio-neutral-content-color-down, var(--spectrum-radio-neutral-content-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-radio-neutral-content-color-focus": {
+ "value": "var(--mod-radio-neutral-content-color-focus, var(--spectrum-radio-neutral-content-color-focus))",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-label`.
Defaults to `var(--mod-radio-neutral-content-color-focus, var(--spectrum-radio-neutral-content-color-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-radio-button-border-color-default": {
+ "value": "var(--mod-radio-button-border-color-default, var(--spectrum-radio-button-border-color-default))",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-button-border-color-default, var(--spectrum-radio-button-border-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-radio-button-border-color-hover": {
+ "value": "var(--mod-radio-button-border-color-hover, var(--spectrum-radio-button-border-color-hover))",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:hover .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-button-border-color-hover, var(--spectrum-radio-button-border-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-radio-button-border-color-down": {
+ "value": "var(--mod-radio-button-border-color-down, var(--spectrum-radio-button-border-color-down))",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:active .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-button-border-color-down, var(--spectrum-radio-button-border-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-radio-button-border-color-focus": {
+ "value": "var(--mod-radio-button-border-color-focus, var(--spectrum-radio-button-border-color-focus))",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-button-border-color-focus, var(--spectrum-radio-button-border-color-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-radio-emphasized-accent-color": {
+ "value": "var(--mod-radio-emphasized-accent-color, var(--spectrum-radio-emphasized-accent-color))",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio--emphasized .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-emphasized-accent-color, var(--spectrum-radio-emphasized-accent-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-radio-emphasized-accent-color-hover": {
+ "value": "var(--mod-radio-emphasized-accent-color-hover, var(--spectrum-radio-emphasized-accent-color-hover))",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio--emphasized:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-emphasized-accent-color-hover, var(--spectrum-radio-emphasized-accent-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-radio-emphasized-accent-color-down": {
+ "value": "var(--mod-radio-emphasized-accent-color-down, var(--spectrum-radio-emphasized-accent-color-down))",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio--emphasized:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-emphasized-accent-color-down, var(--spectrum-radio-emphasized-accent-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-radio-emphasized-accent-color-focus": {
+ "value": "var(--mod-radio-emphasized-accent-color-focus, var(--spectrum-radio-emphasized-accent-color-focus))",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio--emphasized:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-emphasized-accent-color-focus, var(--spectrum-radio-emphasized-accent-color-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-radio-button-checked-border-color-default": {
+ "value": "var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-checked-border-color-default))",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-checked-border-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-radio-button-checked-border-color-hover": {
+ "value": "var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-checked-border-color-hover))",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-checked-border-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-radio-button-checked-border-color-down": {
+ "value": "var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-checked-border-color-down))",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-checked-border-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-radio-button-checked-border-color-focus": {
+ "value": "var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-checked-border-color-focus))",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-checked-border-color-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-radio-disabled-content-color": {
+ "value": "var(--mod-radio-disabled-content-color, var(--spectrum-radio-disabled-content-color))",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label, .spectrum-Radio .spectrum-Radio-input:disabled ~ .spectrum-Radio-label`.
Defaults to `var(--mod-radio-disabled-content-color, var(--spectrum-radio-disabled-content-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-radio-disabled-border-color": {
+ "value": "var(--mod-radio-disabled-border-color, var(--spectrum-radio-disabled-border-color))",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio .spectrum-Radio-input:checked:disabled + .spectrum-Radio-button:before, .spectrum-Radio .spectrum-Radio-input:disabled + .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-disabled-border-color, var(--spectrum-radio-disabled-border-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-radio-focus-indicator-color": {
+ "value": "var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color))",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-button:after`, `.spectrum-Radio-input:focus-visible + .spectrum-Radio-button:after`.
Defaults to `var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/radio/stories/radio.stories.js b/components/radio/stories/radio.stories.js
index 1d6ff3d9b16..3a78c6beea6 100644
--- a/components/radio/stories/radio.stories.js
+++ b/components/radio/stories/radio.stories.js
@@ -1,11 +1,13 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isChecked, isDisabled, isEmphasized, isReadOnly, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { RadioGroup } from "./radio.test.js";
import { BasicGroupTemplate } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* Radio buttons allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare.
*
@@ -60,6 +62,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/rating/dist/metadata.json b/components/rating/dist/metadata.json
index 75ee43e0895..b7d2fb78653 100644
--- a/components/rating/dist/metadata.json
+++ b/components/rating/dist/metadata.json
@@ -3,118 +3,421 @@
"selectors": [
".spectrum-Rating",
".spectrum-Rating--emphasized .spectrum-Rating-icon",
- ".spectrum-Rating--emphasized .spectrum-Rating-icon.is-selected",
".spectrum-Rating--emphasized .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon",
- ".spectrum-Rating--emphasized.is-focused .spectrum-Rating-icon.is-selected",
+ ".spectrum-Rating--emphasized .spectrum-Rating-icon.is-selected",
".spectrum-Rating--emphasized:hover .spectrum-Rating-icon",
- ".spectrum-Rating--emphasized:hover .spectrum-Rating-icon.is-currentValue:after",
".spectrum-Rating--emphasized:hover .spectrum-Rating-icon:active",
".spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover",
".spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon",
+ ".spectrum-Rating--emphasized:hover .spectrum-Rating-icon.is-currentValue:after",
+ ".spectrum-Rating--emphasized.is-focused .spectrum-Rating-icon.is-selected",
".spectrum-Rating-icon",
".spectrum-Rating-icon .spectrum-Rating-starActive",
".spectrum-Rating-icon .spectrum-Rating-starInactive",
+ ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon",
+ ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon .spectrum-Rating-starActive",
+ ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon .spectrum-Rating-starInactive",
".spectrum-Rating-icon.is-currentValue:after",
".spectrum-Rating-icon.is-selected",
".spectrum-Rating-icon.is-selected .spectrum-Rating-starActive",
".spectrum-Rating-icon.is-selected .spectrum-Rating-starInactive",
- ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon",
- ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon .spectrum-Rating-starActive",
- ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon .spectrum-Rating-starInactive",
".spectrum-Rating-input",
".spectrum-Rating-starActive",
".spectrum-Rating-starInactive",
+ ".spectrum-Rating:hover .spectrum-Rating-icon",
+ ".spectrum-Rating:hover .spectrum-Rating-icon:active",
+ ".spectrum-Rating:hover .spectrum-Rating-icon:hover",
+ ".spectrum-Rating:hover .spectrum-Rating-icon.is-currentValue:after",
+ ".spectrum-Rating:hover .spectrum-Rating-starActive",
+ ".spectrum-Rating:hover .spectrum-Rating-starInactive",
".spectrum-Rating.is-disabled",
".spectrum-Rating.is-disabled .spectrum-Rating-icon",
".spectrum-Rating.is-disabled .spectrum-Rating-icon.is-selected",
".spectrum-Rating.is-focused",
".spectrum-Rating.is-focused .spectrum-Rating-icon",
".spectrum-Rating.is-focused .spectrum-Rating-icon.is-selected",
- ".spectrum-Rating.is-readOnly",
- ".spectrum-Rating:hover .spectrum-Rating-icon",
- ".spectrum-Rating:hover .spectrum-Rating-icon.is-currentValue:after",
- ".spectrum-Rating:hover .spectrum-Rating-icon:active",
- ".spectrum-Rating:hover .spectrum-Rating-icon:hover",
- ".spectrum-Rating:hover .spectrum-Rating-starActive",
- ".spectrum-Rating:hover .spectrum-Rating-starInactive"
- ],
- "modifiers": [
- "--mod-rating-border-radius",
- "--mod-rating-emphasized-icon-color-default",
- "--mod-rating-emphasized-icon-color-down",
- "--mod-rating-emphasized-icon-color-hover",
- "--mod-rating-emphasized-icon-color-key-focus",
- "--mod-rating-focus-indicator-color",
- "--mod-rating-focus-indicator-gap",
- "--mod-rating-focus-indicator-thickness",
- "--mod-rating-icon-color-default",
- "--mod-rating-icon-color-disabled",
- "--mod-rating-icon-color-down",
- "--mod-rating-icon-color-hover",
- "--mod-rating-icon-color-key-focus",
- "--mod-rating-icon-count",
- "--mod-rating-icon-height",
- "--mod-rating-icon-spacing",
- "--mod-rating-icon-spacing-vertical-top",
- "--mod-rating-icon-width",
- "--mod-rating-indicator-border-radius",
- "--mod-rating-indicator-height"
- ],
- "component": [
- "--spectrum-rating-border-radius",
- "--spectrum-rating-emphasized-icon-color-default",
- "--spectrum-rating-emphasized-icon-color-down",
- "--spectrum-rating-emphasized-icon-color-hover",
- "--spectrum-rating-emphasized-icon-color-key-focus",
- "--spectrum-rating-focus-indicator-color",
- "--spectrum-rating-focus-indicator-gap",
- "--spectrum-rating-focus-indicator-thickness",
- "--spectrum-rating-icon-color-default",
- "--spectrum-rating-icon-color-disabled",
- "--spectrum-rating-icon-color-down",
- "--spectrum-rating-icon-color-hover",
- "--spectrum-rating-icon-color-key-focus",
- "--spectrum-rating-icon-count",
- "--spectrum-rating-icon-height",
- "--spectrum-rating-icon-spacing",
- "--spectrum-rating-icon-spacing-vertical-top",
- "--spectrum-rating-icon-width",
- "--spectrum-rating-indicator-border-radius",
- "--spectrum-rating-indicator-height",
- "--spectrum-rating-indicator-width"
- ],
- "global": [
- "--spectrum-accent-content-color-default",
- "--spectrum-accent-content-color-down",
- "--spectrum-accent-content-color-hover",
- "--spectrum-accent-content-color-key-focus",
- "--spectrum-border-width-200",
- "--spectrum-component-top-to-workflow-icon-100",
- "--spectrum-corner-radius-100",
- "--spectrum-disabled-content-color",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-neutral-subdued-content-color-default",
- "--spectrum-neutral-subdued-content-color-down",
- "--spectrum-neutral-subdued-content-color-hover",
- "--spectrum-neutral-subdued-content-color-key-focus",
- "--spectrum-workflow-icon-size-100"
- ],
- "system-theme": [
- "--system-rating-icon-color-default",
- "--system-rating-icon-color-down",
- "--system-rating-icon-color-hover",
- "--system-rating-icon-color-key-focus",
- "--system-rating-indicator-border-radius"
+ ".spectrum-Rating.is-readOnly"
],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-rating-emphasized-icon-color-default",
- "--highcontrast-rating-emphasized-icon-color-down",
- "--highcontrast-rating-emphasized-icon-color-hover",
- "--highcontrast-rating-focus-color-outline",
- "--highcontrast-rating-icon-color-disabled",
- "--highcontrast-rating-icon-color-key-focus"
- ]
+ "modifiers": {
+ "mod-rating-icon-spacing": {
+ "value": "var(--spectrum-rating-icon-spacing)",
+ "description": "Used by `.spectrum-Rating`.
Defaults to `var(--spectrum-rating-icon-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-rating-icon-width": {
+ "value": "var(--spectrum-rating-icon-width)",
+ "description": "Used by `.spectrum-Rating`, `.spectrum-Rating-icon`.
Defaults to `var(--spectrum-rating-icon-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-rating-icon-count": {
+ "value": "var(--spectrum-rating-icon-count)",
+ "description": "Used by `.spectrum-Rating`.
Defaults to `var(--spectrum-rating-icon-count)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-rating-border-radius": {
+ "value": "var(--spectrum-rating-border-radius)",
+ "description": "Used by `.spectrum-Rating`.
Defaults to `var(--spectrum-rating-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-rating-focus-indicator-gap": {
+ "value": "var(--spectrum-rating-focus-indicator-gap)",
+ "description": "Used by `.spectrum-Rating`, `.spectrum-Rating-icon`, `.spectrum-Rating-icon.is-currentValue:after`.
Defaults to `var(--spectrum-rating-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-rating-focus-indicator-thickness": {
+ "value": "var(--spectrum-rating-focus-indicator-thickness)",
+ "description": "Used by `.spectrum-Rating.is-focused`.
Defaults to `var(--spectrum-rating-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-rating-focus-indicator-color": {
+ "value": "var(--spectrum-rating-focus-indicator-color)",
+ "description": "Used by `.spectrum-Rating.is-focused`.
Defaults to `var(--spectrum-rating-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-rating-icon-color-key-focus": {
+ "value": "var(--spectrum-rating-icon-color-key-focus)",
+ "description": "Used by `.spectrum-Rating.is-focused .spectrum-Rating-icon, .spectrum-Rating.is-focused .spectrum-Rating-icon.is-selected`.
Defaults to `var(--spectrum-rating-icon-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-rating-icon-height": {
+ "value": "var(--spectrum-rating-icon-height)",
+ "description": "Used by `.spectrum-Rating-icon`.
Defaults to `var(--spectrum-rating-icon-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-rating-icon-spacing-vertical-top": {
+ "value": "var(--spectrum-rating-icon-spacing-vertical-top)",
+ "description": "Used by `.spectrum-Rating-icon`.
Defaults to `var(--spectrum-rating-icon-spacing-vertical-top)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-rating-indicator-border-radius": {
+ "value": "var(--spectrum-rating-indicator-border-radius)",
+ "description": "Used by `.spectrum-Rating-icon.is-currentValue:after`.
Defaults to `var(--spectrum-rating-indicator-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-rating-indicator-height": {
+ "value": "var(--spectrum-rating-indicator-height)",
+ "description": "Used by `.spectrum-Rating-icon.is-currentValue:after`.
Defaults to `var(--spectrum-rating-indicator-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-rating-icon-color-default": {
+ "value": "var(--spectrum-rating-icon-color-default)",
+ "description": "Used by `.spectrum-Rating-icon, .spectrum-Rating-icon.is-selected`, `.spectrum-Rating--emphasized .spectrum-Rating-icon`, `.spectrum-Rating:hover .spectrum-Rating-icon`, `.spectrum-Rating--emphasized .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon, .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon`, `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon`.
Defaults to `var(--spectrum-rating-icon-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-rating-emphasized-icon-color-key-focus": {
+ "value": "var(--spectrum-rating-emphasized-icon-color-key-focus)",
+ "description": "Used by `.spectrum-Rating--emphasized.is-focused .spectrum-Rating-icon.is-selected`.
Defaults to `var(--spectrum-rating-emphasized-icon-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-rating-emphasized-icon-color-default": {
+ "value": "var(--spectrum-rating-emphasized-icon-color-default)",
+ "description": "Used by `.spectrum-Rating--emphasized .spectrum-Rating-icon.is-selected`, `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon`.
Defaults to `var(--spectrum-rating-emphasized-icon-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-rating-icon-color-hover": {
+ "value": "var(--spectrum-rating-icon-color-hover)",
+ "description": "Used by `.spectrum-Rating:hover .spectrum-Rating-icon:hover`.
Defaults to `var(--spectrum-rating-icon-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-rating-icon-color-down": {
+ "value": "var(--spectrum-rating-icon-color-down)",
+ "description": "Used by `.spectrum-Rating:hover .spectrum-Rating-icon:active`.
Defaults to `var(--spectrum-rating-icon-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-rating-emphasized-icon-color-hover": {
+ "value": "var(--spectrum-rating-emphasized-icon-color-hover)",
+ "description": "Used by `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover`.
Defaults to `var(--spectrum-rating-emphasized-icon-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-rating-emphasized-icon-color-down": {
+ "value": "var(--spectrum-rating-emphasized-icon-color-down)",
+ "description": "Used by `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:active`.
Defaults to `var(--spectrum-rating-emphasized-icon-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-rating-icon-color-disabled": {
+ "value": "var(--spectrum-rating-icon-color-disabled)",
+ "description": "Used by `.spectrum-Rating.is-disabled .spectrum-Rating-icon, .spectrum-Rating.is-disabled .spectrum-Rating-icon.is-selected`.
Defaults to `var(--spectrum-rating-icon-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-rating-icon-height": {
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-icon-width": {
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating`, `.spectrum-Rating-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-border-radius": {
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-focus-indicator-thickness": {
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating.is-focused`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-focus-indicator-color": {
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating.is-focused`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-rating-focus-indicator-gap": {
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating`, `.spectrum-Rating-icon`, `.spectrum-Rating-icon.is-currentValue:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-icon-spacing-vertical-top": {
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-indicator-height": {
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating-icon.is-currentValue:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-emphasized-icon-color-default": {
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating--emphasized .spectrum-Rating-icon.is-selected`, `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-rating-emphasized-icon-color-hover": {
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-rating-emphasized-icon-color-down": {
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-rating-emphasized-icon-color-key-focus": {
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating--emphasized.is-focused .spectrum-Rating-icon.is-selected`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-rating-icon-color-disabled": {
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating.is-disabled .spectrum-Rating-icon, .spectrum-Rating.is-disabled .spectrum-Rating-icon.is-selected`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-rating-icon-count": {
+ "description": "Defined in `.spectrum-Rating`.
Used by `--spectrum-rating-icon-count`, `.spectrum-Rating`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-icon-spacing": {
+ "description": "Used by `.spectrum-Rating`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-icon-color-key-focus": {
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating.is-focused .spectrum-Rating-icon, .spectrum-Rating.is-focused .spectrum-Rating-icon.is-selected`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-rating-indicator-border-radius": {
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating-icon.is-currentValue:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-indicator-width": {
+ "value": "18px",
+ "description": "Used by `.spectrum-Rating-icon.is-currentValue:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-icon-color-default": {
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating-icon, .spectrum-Rating-icon.is-selected`, `.spectrum-Rating--emphasized .spectrum-Rating-icon`, `.spectrum-Rating:hover .spectrum-Rating-icon`, `.spectrum-Rating--emphasized .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon, .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon`, `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-rating-icon-color-hover": {
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating:hover .spectrum-Rating-icon:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-rating-icon-color-down": {
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating:hover .spectrum-Rating-icon:active`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-neutral-subdued-content-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Used by `--system-rating-icon-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-hover": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--system-rating-icon-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-down": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--system-rating-icon-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-key-focus": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--system-rating-icon-color-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-rating-icon-height`, `--spectrum-rating-icon-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-rating-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-rating-focus-indicator-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-rating-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-rating-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-rating-icon-spacing-vertical-top`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-rating-indicator-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-default": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--spectrum-rating-emphasized-icon-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-hover": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-rating-emphasized-icon-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-down": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-rating-emphasized-icon-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-key-focus": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-rating-emphasized-icon-color-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-rating-icon-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-rating-icon-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-rating-icon-color-default`.",
+ "control": "color"
+ },
+ "system-rating-icon-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-rating-icon-color-hover`.",
+ "control": "color"
+ },
+ "system-rating-icon-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-rating-icon-color-down`.",
+ "control": "color"
+ },
+ "system-rating-icon-color-key-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-rating-icon-color-key-focus`.",
+ "control": "color"
+ },
+ "system-rating-indicator-border-radius": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-rating-indicator-border-radius`.",
+ "control": "text"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-rating-icon-color-key-focus": {
+ "value": "var(--mod-rating-icon-color-key-focus, var(--spectrum-rating-icon-color-key-focus))",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating.is-focused .spectrum-Rating-icon, .spectrum-Rating.is-focused .spectrum-Rating-icon.is-selected`, `.spectrum-Rating:hover .spectrum-Rating-icon.is-currentValue:after`.
Defaults to `var(--mod-rating-icon-color-key-focus, var(--spectrum-rating-icon-color-key-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-rating-emphasized-icon-color-default": {
+ "value": "var(--mod-rating-emphasized-icon-color-default, var(--spectrum-rating-emphasized-icon-color-default))",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating--emphasized .spectrum-Rating-icon.is-selected`, `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon`, `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon.is-currentValue:after`.
Defaults to `var(--mod-rating-emphasized-icon-color-default, var(--spectrum-rating-emphasized-icon-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-rating-emphasized-icon-color-hover": {
+ "value": "var(--mod-rating-emphasized-icon-color-hover, var(--spectrum-rating-emphasized-icon-color-hover))",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover`.
Defaults to `var(--mod-rating-emphasized-icon-color-hover, var(--spectrum-rating-emphasized-icon-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-rating-emphasized-icon-color-down": {
+ "value": "var(--mod-rating-emphasized-icon-color-down, var(--spectrum-rating-emphasized-icon-color-down))",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:active`.
Defaults to `var(--mod-rating-emphasized-icon-color-down, var(--spectrum-rating-emphasized-icon-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-rating-icon-color-disabled": {
+ "value": "var(--mod-rating-icon-color-disabled, var(--spectrum-rating-icon-color-disabled))",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating.is-disabled .spectrum-Rating-icon, .spectrum-Rating.is-disabled .spectrum-Rating-icon.is-selected`.
Defaults to `var(--mod-rating-icon-color-disabled, var(--spectrum-rating-icon-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-rating-focus-color-outline": {
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating.is-focused`.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/rating/stories/rating.stories.js b/components/rating/stories/rating.stories.js
index e9315f918c2..d969617e61b 100644
--- a/components/rating/stories/rating.stories.js
+++ b/components/rating/stories/rating.stories.js
@@ -1,10 +1,12 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isEmphasized, isFocused, isReadOnly } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { RatingGroup } from "./rating.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The rating component is used to display or collect a user's rating of an item as represented by a number of stars.
*
@@ -59,6 +61,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/search/dist/metadata.json b/components/search/dist/metadata.json
index b701431ddf2..01aa74e1077 100644
--- a/components/search/dist/metadata.json
+++ b/components/search/dist/metadata.json
@@ -18,186 +18,824 @@
".spectrum-Search-input::-webkit-search-cancel-button",
".spectrum-Search-input::-webkit-search-decoration",
".spectrum-Search-textfield",
+ ".spectrum-Search-textfield:hover .spectrum-Search-icon",
".spectrum-Search-textfield.is-disabled .spectrum-Search-icon",
".spectrum-Search-textfield.is-disabled:hover .spectrum-Search-icon",
".spectrum-Search-textfield.is-focused .spectrum-Search-icon",
".spectrum-Search-textfield.is-focused:hover .spectrum-Search-icon",
".spectrum-Search-textfield.is-keyboardFocused .spectrum-Search-icon",
- ".spectrum-Search-textfield:hover .spectrum-Search-icon",
+ ".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-icon",
+ ".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input",
".spectrum-Search.is-disabled .spectrum-Search-clearButton",
".spectrum-Search.spectrum-Search--sizeL",
".spectrum-Search.spectrum-Search--sizeM",
".spectrum-Search.spectrum-Search--sizeS",
- ".spectrum-Search.spectrum-Search--sizeXL",
- ".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-icon",
- ".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input"
- ],
- "modifiers": [
- "--mod-search-background-color",
- "--mod-search-background-color-disabled",
- "--mod-search-block-size",
- "--mod-search-border-color-default",
- "--mod-search-border-color-disabled",
- "--mod-search-border-color-focus",
- "--mod-search-border-color-focus-hover",
- "--mod-search-border-color-hover",
- "--mod-search-border-color-key-focus",
- "--mod-search-border-radius",
- "--mod-search-border-width",
- "--mod-search-bottom-to-text",
- "--mod-search-button-inline-size",
- "--mod-search-color-default",
- "--mod-search-color-disabled",
- "--mod-search-color-focus",
- "--mod-search-color-focus-hover",
- "--mod-search-color-hover",
- "--mod-search-color-key-focus",
- "--mod-search-edge-to-visual",
- "--mod-search-focus-indicator-color",
- "--mod-search-focus-indicator-gap",
- "--mod-search-focus-indicator-thickness",
- "--mod-search-font-family",
- "--mod-search-font-style",
- "--mod-search-font-weight",
- "--mod-search-icon-size",
- "--mod-search-inline-size",
- "--mod-search-line-height",
- "--mod-search-min-inline-size",
- "--mod-search-text-to-icon",
- "--mod-search-to-help-text",
- "--mod-search-top-to-text"
- ],
- "component": [
- "--spectrum-search-background-color",
- "--spectrum-search-background-color-disabled",
- "--spectrum-search-block-size",
- "--spectrum-search-border-color-default",
- "--spectrum-search-border-color-disabled",
- "--spectrum-search-border-color-focus",
- "--spectrum-search-border-color-focus-hover",
- "--spectrum-search-border-color-hover",
- "--spectrum-search-border-color-key-focus",
- "--spectrum-search-border-radius",
- "--spectrum-search-border-width",
- "--spectrum-search-bottom-to-text",
- "--spectrum-search-button-inline-size",
- "--spectrum-search-color",
- "--spectrum-search-color-default",
- "--spectrum-search-color-disabled",
- "--spectrum-search-color-focus",
- "--spectrum-search-color-focus-hover",
- "--spectrum-search-color-hover",
- "--spectrum-search-color-key-focus",
- "--spectrum-search-edge-to-visual",
- "--spectrum-search-field-minimum-width-multiplier",
- "--spectrum-search-focus-indicator-color",
- "--spectrum-search-focus-indicator-gap",
- "--spectrum-search-focus-indicator-thickness",
- "--spectrum-search-font-family",
- "--spectrum-search-font-style",
- "--spectrum-search-font-weight",
- "--spectrum-search-icon-size",
- "--spectrum-search-inline-size",
- "--spectrum-search-line-height",
- "--spectrum-search-min-inline-size",
- "--spectrum-search-text-to-icon",
- "--spectrum-search-to-help-text",
- "--spectrum-search-top-to-text"
- ],
- "global": [
- "--spectrum-border-width-100",
- "--spectrum-component-bottom-to-text-100",
- "--spectrum-component-edge-to-visual-100",
- "--spectrum-component-edge-to-visual-200",
- "--spectrum-component-edge-to-visual-300",
- "--spectrum-component-edge-to-visual-75",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-75",
- "--spectrum-component-top-to-text-100",
- "--spectrum-corner-radius-100",
- "--spectrum-default-font-style",
- "--spectrum-disabled-border-color",
- "--spectrum-disabled-content-color",
- "--spectrum-field-edge-to-visual-quiet",
- "--spectrum-field-width",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-gray-25",
- "--spectrum-gray-300",
- "--spectrum-gray-500",
- "--spectrum-gray-600",
- "--spectrum-gray-800",
- "--spectrum-gray-900",
- "--spectrum-help-text-to-component",
- "--spectrum-line-height-100",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-focus",
- "--spectrum-neutral-content-color-focus-hover",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-neutral-content-color-key-focus",
- "--spectrum-regular-font-weight",
- "--spectrum-sans-font-family-stack",
- "--spectrum-text-to-visual-100",
- "--spectrum-text-to-visual-200",
- "--spectrum-text-to-visual-300",
- "--spectrum-text-to-visual-75",
- "--spectrum-workflow-icon-size-100",
- "--spectrum-workflow-icon-size-200",
- "--spectrum-workflow-icon-size-300",
- "--spectrum-workflow-icon-size-75"
- ],
- "system-theme": [
- "--system-search-background-color",
- "--system-search-background-color-disabled",
- "--system-search-border-color-default",
- "--system-search-border-color-disabled",
- "--system-search-border-color-focus",
- "--system-search-border-color-focus-hover",
- "--system-search-border-color-hover",
- "--system-search-border-color-key-focus",
- "--system-search-border-radius",
- "--system-search-edge-to-visual",
- "--system-search-quiet-background-color-disabled",
- "--system-search-quiet-border-color-disabled",
- "--system-search-size-l-border-radius",
- "--system-search-size-l-edge-to-visual",
- "--system-search-size-m-border-radius",
- "--system-search-size-m-edge-to-visual",
- "--system-search-size-s-border-radius",
- "--system-search-size-s-edge-to-visual",
- "--system-search-size-xl-border-radius",
- "--system-search-size-xl-edge-to-visual"
- ],
- "passthroughs": [
- "--mod-textfield-background-color",
- "--mod-textfield-background-color-disabled",
- "--mod-textfield-border-color",
- "--mod-textfield-border-color-disabled",
- "--mod-textfield-border-color-focus",
- "--mod-textfield-border-color-focus-hover",
- "--mod-textfield-border-color-hover",
- "--mod-textfield-border-color-keyboard-focus",
- "--mod-textfield-border-width",
- "--mod-textfield-corner-radius",
- "--mod-textfield-focus-indicator-color",
- "--mod-textfield-focus-indicator-gap",
- "--mod-textfield-focus-indicator-width",
- "--mod-textfield-font-family",
- "--mod-textfield-font-weight",
- "--mod-textfield-text-color-default",
- "--mod-textfield-text-color-disabled",
- "--mod-textfield-text-color-focus",
- "--mod-textfield-text-color-focus-hover",
- "--mod-textfield-text-color-hover",
- "--mod-textfield-text-color-keyboard-focus"
+ ".spectrum-Search.spectrum-Search--sizeXL"
],
- "high-contrast": [
- "--highcontrast-search-color-default",
- "--highcontrast-search-color-disabled",
- "--highcontrast-search-color-focus",
- "--highcontrast-search-color-hover"
- ]
+ "modifiers": {
+ "mod-search-font-family": {
+ "value": "var(--spectrum-search-font-family)",
+ "description": "Used by `--mod-textfield-font-family`.
Defaults to `var(--spectrum-search-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-font-weight": {
+ "value": "var(--spectrum-search-font-weight)",
+ "description": "Used by `--mod-textfield-font-weight`.
Defaults to `var(--spectrum-search-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-border-radius": {
+ "value": "var(--spectrum-search-border-radius)",
+ "description": "Defined in `.spectrum-Search--quiet`.
Used by `--mod-textfield-corner-radius`, `.spectrum-Search-clearButton, .spectrum-Search-clearButton .spectrum-ClearButton-fill`, `.spectrum-Search--quiet .spectrum-Search-input`.
Defaults to `var(--spectrum-search-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-border-width": {
+ "value": "var(--spectrum-search-border-width)",
+ "description": "Used by `--mod-textfield-border-width`, `.spectrum-Search-input`, `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input`.
Defaults to `var(--spectrum-search-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-focus-indicator-gap": {
+ "value": "var(--spectrum-search-focus-indicator-gap)",
+ "description": "Used by `--mod-textfield-focus-indicator-gap`.
Defaults to `var(--spectrum-search-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-focus-indicator-thickness": {
+ "value": "var(--spectrum-search-focus-indicator-thickness)",
+ "description": "Used by `--mod-textfield-focus-indicator-width`.
Defaults to `var(--spectrum-search-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-focus-indicator-color": {
+ "value": "var(--spectrum-search-focus-indicator-color)",
+ "description": "Used by `--mod-textfield-focus-indicator-color`.
Defaults to `var(--spectrum-search-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-search-color-default": {
+ "value": "var(--spectrum-search-color-default)",
+ "description": "Used by `--mod-textfield-text-color-default`, `--spectrum-search-color`.
Defaults to `var(--spectrum-search-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-search-color-hover": {
+ "value": "var(--spectrum-search-color-hover)",
+ "description": "Used by `--mod-textfield-text-color-hover`, `--spectrum-search-color`.
Defaults to `var(--spectrum-search-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-search-color-focus": {
+ "value": "var(--spectrum-search-color-focus)",
+ "description": "Used by `--mod-textfield-text-color-focus`, `--spectrum-search-color`.
Defaults to `var(--spectrum-search-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-search-color-focus-hover": {
+ "value": "var(--spectrum-search-color-focus-hover)",
+ "description": "Used by `--mod-textfield-text-color-focus-hover`, `--spectrum-search-color`.
Defaults to `var(--spectrum-search-color-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-search-color-key-focus": {
+ "value": "var(--spectrum-search-color-key-focus)",
+ "description": "Used by `--mod-textfield-text-color-keyboard-focus`, `--spectrum-search-color`.
Defaults to `var(--spectrum-search-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-search-color-disabled": {
+ "value": "var(--spectrum-search-color-disabled)",
+ "description": "Used by `--mod-textfield-text-color-disabled`, `--spectrum-search-color`.
Defaults to `var(--spectrum-search-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-search-border-color-default": {
+ "value": "var(--spectrum-search-border-color-default)",
+ "description": "Used by `--mod-textfield-border-color`.
Defaults to `var(--spectrum-search-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-search-border-color-hover": {
+ "value": "var(--spectrum-search-border-color-hover)",
+ "description": "Used by `--mod-textfield-border-color-hover`.
Defaults to `var(--spectrum-search-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-search-border-color-focus": {
+ "value": "var(--spectrum-search-border-color-focus)",
+ "description": "Used by `--mod-textfield-border-color-focus`.
Defaults to `var(--spectrum-search-border-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-search-border-color-focus-hover": {
+ "value": "var(--spectrum-search-border-color-focus-hover)",
+ "description": "Used by `--mod-textfield-border-color-focus-hover`.
Defaults to `var(--spectrum-search-border-color-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-search-border-color-key-focus": {
+ "value": "var(--spectrum-search-border-color-key-focus)",
+ "description": "Used by `--mod-textfield-border-color-keyboard-focus`.
Defaults to `var(--spectrum-search-border-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-search-border-color-disabled": {
+ "value": "var(--spectrum-search-border-color-disabled)",
+ "description": "Used by `--mod-textfield-border-color-disabled`.
Defaults to `var(--spectrum-search-border-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-search-background-color": {
+ "value": "var(--spectrum-search-background-color)",
+ "description": "Used by `--mod-textfield-background-color`.
Defaults to `var(--spectrum-search-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-search-background-color-disabled": {
+ "value": "var(--spectrum-search-background-color-disabled)",
+ "description": "Used by `--mod-textfield-background-color-disabled`.
Defaults to `var(--spectrum-search-background-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-search-inline-size": {
+ "value": "var(--spectrum-search-inline-size)",
+ "description": "Used by `.spectrum-Search`.
Defaults to `var(--spectrum-search-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-min-inline-size": {
+ "value": "var(--spectrum-search-min-inline-size)",
+ "description": "Used by `.spectrum-Search`.
Defaults to `var(--spectrum-search-min-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-to-help-text": {
+ "value": "var(--spectrum-search-to-help-text)",
+ "description": "Used by `.spectrum-Search .spectrum-HelpText`.
Defaults to `var(--spectrum-search-to-help-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-block-size": {
+ "value": "var(--spectrum-search-block-size)",
+ "description": "Used by `.spectrum-Search-input`.
Defaults to `var(--spectrum-search-block-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-top-to-text": {
+ "value": "var(--spectrum-search-top-to-text)",
+ "description": "Used by `.spectrum-Search-input`, `.spectrum-Search--quiet .spectrum-Search-input`.
Defaults to `var(--spectrum-search-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-bottom-to-text": {
+ "value": "var(--spectrum-search-bottom-to-text)",
+ "description": "Used by `.spectrum-Search-input`.
Defaults to `var(--spectrum-search-bottom-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-font-style": {
+ "value": "var(--spectrum-search-font-style)",
+ "description": "Used by `.spectrum-Search-input`.
Defaults to `var(--spectrum-search-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-line-height": {
+ "value": "var(--spectrum-search-line-height)",
+ "description": "Used by `.spectrum-Search-input`.
Defaults to `var(--spectrum-search-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-edge-to-visual": {
+ "value": "var(--spectrum-search-edge-to-visual)",
+ "description": "Defined in `.spectrum-Search--quiet`.
Used by `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-icon`, `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input`, `.spectrum-Search--quiet .spectrum-Search-input`.
Defaults to `var(--spectrum-search-edge-to-visual)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-icon-size": {
+ "value": "var(--spectrum-search-icon-size)",
+ "description": "Used by `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input`, `.spectrum-Search--quiet .spectrum-Search-input`.
Defaults to `var(--spectrum-search-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-text-to-icon": {
+ "value": "var(--spectrum-search-text-to-icon)",
+ "description": "Used by `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input`, `.spectrum-Search--quiet .spectrum-Search-input`.
Defaults to `var(--spectrum-search-text-to-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-button-inline-size": {
+ "value": "var(--spectrum-search-button-inline-size)",
+ "description": "Used by `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input`, `.spectrum-Search--quiet .spectrum-Search-input`.
Defaults to `var(--spectrum-search-button-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-search-inline-size": {
+ "description": "Defined in `.spectrum-Search`.
Used by `.spectrum-Search`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-block-size": {
+ "description": "Defined in `.spectrum-Search`, `.spectrum-Search--sizeS`, `.spectrum-Search--sizeL`, `.spectrum-Search--sizeXL`.
Used by `--spectrum-search-button-inline-size`, `--spectrum-search-min-inline-size`, `.spectrum-Search-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-button-inline-size": {
+ "description": "Defined in `.spectrum-Search`.
Used by `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input`, `.spectrum-Search--quiet .spectrum-Search-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-min-inline-size": {
+ "description": "Defined in `.spectrum-Search`.
Used by `.spectrum-Search`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-field-minimum-width-multiplier": {
+ "value": "3",
+ "description": "Used by `--spectrum-search-min-inline-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-icon-size": {
+ "description": "Defined in `.spectrum-Search`, `.spectrum-Search--sizeS`, `.spectrum-Search--sizeL`, `.spectrum-Search--sizeXL`.
Used by `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input`, `.spectrum-Search--quiet .spectrum-Search-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-text-to-icon": {
+ "description": "Defined in `.spectrum-Search`, `.spectrum-Search--sizeS`, `.spectrum-Search--sizeL`, `.spectrum-Search--sizeXL`.
Used by `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input`, `.spectrum-Search--quiet .spectrum-Search-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-to-help-text": {
+ "description": "Defined in `.spectrum-Search`.
Used by `.spectrum-Search .spectrum-HelpText`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-top-to-text": {
+ "description": "Defined in `.spectrum-Search`.
Used by `.spectrum-Search-input`, `.spectrum-Search--quiet .spectrum-Search-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-bottom-to-text": {
+ "description": "Defined in `.spectrum-Search`.
Used by `.spectrum-Search-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-focus-indicator-thickness": {
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-focus-indicator-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-focus-indicator-gap": {
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-focus-indicator-color": {
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-focus-indicator-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-font-family": {
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-font-family`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-font-weight": {
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-font-weight`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-font-style": {
+ "description": "Defined in `.spectrum-Search`.
Used by `.spectrum-Search-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-line-height": {
+ "description": "Defined in `.spectrum-Search`.
Used by `.spectrum-Search-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-color-default": {
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-text-color-default`, `--spectrum-search-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-color-hover": {
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-text-color-hover`, `--spectrum-search-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-color-focus": {
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-text-color-focus`, `--spectrum-search-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-color-focus-hover": {
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-text-color-focus-hover`, `--spectrum-search-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-color-key-focus": {
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-text-color-keyboard-focus`, `--spectrum-search-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-border-width": {
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-border-width`, `.spectrum-Search-input`, `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-color-disabled": {
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-text-color-disabled`, `--spectrum-search-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-border-radius": {
+ "description": "Defined in `.spectrum-Search`, `.spectrum-Search.spectrum-Search--sizeM`, `.spectrum-Search.spectrum-Search--sizeS`, `.spectrum-Search.spectrum-Search--sizeL`, `.spectrum-Search.spectrum-Search--sizeXL`.
Used by `--mod-textfield-corner-radius`, `.spectrum-Search-clearButton, .spectrum-Search-clearButton .spectrum-ClearButton-fill`, `.spectrum-Search--quiet .spectrum-Search-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-border-color-default": {
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-border-color-hover": {
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-border-color-hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-border-color-focus": {
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-border-color-focus`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-border-color-focus-hover": {
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-border-color-focus-hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-border-color-key-focus": {
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-border-color-keyboard-focus`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-border-color-disabled": {
+ "description": "Defined in `.spectrum-Search--quiet`, `.spectrum-Search`.
Used by `--mod-textfield-border-color-disabled`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-background-color": {
+ "description": "Defined in `.spectrum-Search--quiet`, `.spectrum-Search`.
Used by `--mod-textfield-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-background-color-disabled": {
+ "description": "Defined in `.spectrum-Search--quiet`, `.spectrum-Search`.
Used by `--mod-textfield-background-color-disabled`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-color": {
+ "description": "Defined in `.spectrum-Search-icon`, `.spectrum-Search-textfield.is-focused .spectrum-Search-icon`, `.spectrum-Search-textfield.is-keyboardFocused .spectrum-Search-icon`, `.spectrum-Search-textfield.is-disabled .spectrum-Search-icon`, `.spectrum-Search-textfield:hover .spectrum-Search-icon`, `.spectrum-Search-textfield.is-focused:hover .spectrum-Search-icon`, `.spectrum-Search-textfield.is-disabled:hover .spectrum-Search-icon`.
Used by `.spectrum-Search-icon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-edge-to-visual": {
+ "description": "Defined in `.spectrum-Search`, `.spectrum-Search.spectrum-Search--sizeM`, `.spectrum-Search.spectrum-Search--sizeS`, `.spectrum-Search.spectrum-Search--sizeL`, `.spectrum-Search.spectrum-Search--sizeXL`.
Used by `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-icon`, `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input`, `.spectrum-Search--quiet .spectrum-Search-input`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-500": {
+ "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+ "description": "Used by `--system-search-border-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-600": {
+ "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+ "description": "Used by `--system-search-border-color-hover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-800": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Used by `--system-search-border-color-focus`, `--system-search-border-color-key-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-900": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Used by `--system-search-border-color-focus-hover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--system-search-background-color`, `--system-search-background-color-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-300": {
+ "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+ "description": "Used by `--system-search-border-color-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--system-search-border-radius`, `--system-search-size-m-border-radius`, `--system-search-size-s-border-radius`, `--system-search-size-l-border-radius`, `--system-search-size-xl-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-100": {
+ "value": "10px",
+ "description": "Used by `--system-search-edge-to-visual`, `--system-search-size-m-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-75": {
+ "value": "8px",
+ "description": "Used by `--system-search-size-s-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-200": {
+ "value": "13px",
+ "description": "Used by `--system-search-size-l-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-300": {
+ "value": "14px",
+ "description": "Used by `--system-search-size-xl-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-border-color": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Used by `--system-search-quiet-border-color-disabled`, `--spectrum-search-border-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-field-width": {
+ "value": "192px",
+ "description": "Used by `--spectrum-search-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-search-block-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-search-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-search-text-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-help-text-to-component": {
+ "value": "0px",
+ "description": "Used by `--spectrum-search-to-help-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-search-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-100": {
+ "value": "9px",
+ "description": "Used by `--spectrum-search-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-search-focus-indicator-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-search-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-search-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-search-font-family`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-search-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-search-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-search-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-search-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-search-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-focus": {
+ "value": "var(--spectrum-neutral-content-color-down)",
+ "description": "Used by `--spectrum-search-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-focus-hover": {
+ "value": "var(--spectrum-neutral-content-color-down)",
+ "description": "Used by `--spectrum-search-color-focus-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-search-color-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--spectrum-search-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-search-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-search-block-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-75": {
+ "value": "16px",
+ "description": "Used by `--spectrum-search-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-search-text-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-search-block-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-200": {
+ "value": "22px",
+ "description": "Used by `--spectrum-search-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-200": {
+ "value": "7px",
+ "description": "Used by `--spectrum-search-text-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-search-block-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-300": {
+ "value": "26px",
+ "description": "Used by `--spectrum-search-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-300": {
+ "value": "8px",
+ "description": "Used by `--spectrum-search-text-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-visual-quiet": {
+ "value": "0px",
+ "description": "Used by `--mod-search-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-search-border-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-color-default`.",
+ "control": "color"
+ },
+ "system-search-border-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-color-hover`.",
+ "control": "color"
+ },
+ "system-search-border-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-color-focus`.",
+ "control": "color"
+ },
+ "system-search-border-color-focus-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-color-focus-hover`.",
+ "control": "color"
+ },
+ "system-search-border-color-key-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-color-key-focus`.",
+ "control": "color"
+ },
+ "system-search-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-search-background-color`.",
+ "control": "color"
+ },
+ "system-search-background-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-search-background-color-disabled`.",
+ "control": "color"
+ },
+ "system-search-border-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-color-disabled`.",
+ "control": "color"
+ },
+ "system-search-border-radius": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-radius`.",
+ "control": "text"
+ },
+ "system-search-size-m-border-radius": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-radius`.",
+ "control": "text"
+ },
+ "system-search-edge-to-visual": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-search-edge-to-visual`.",
+ "control": "text"
+ },
+ "system-search-size-m-edge-to-visual": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-search-edge-to-visual`.",
+ "control": "text"
+ },
+ "system-search-size-s-border-radius": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-radius`.",
+ "control": "text"
+ },
+ "system-search-size-s-edge-to-visual": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-search-edge-to-visual`.",
+ "control": "text"
+ },
+ "system-search-size-l-border-radius": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-radius`.",
+ "control": "text"
+ },
+ "system-search-size-l-edge-to-visual": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-search-edge-to-visual`.",
+ "control": "text"
+ },
+ "system-search-size-xl-border-radius": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-radius`.",
+ "control": "text"
+ },
+ "system-search-size-xl-edge-to-visual": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-search-edge-to-visual`.",
+ "control": "text"
+ },
+ "system-search-quiet-background-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-search-background-color-disabled`.",
+ "control": "color"
+ },
+ "system-search-quiet-border-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-color-disabled`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {
+ "mod-textfield-font-family": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-font-weight": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-corner-radius": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-width": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-focus-indicator-gap": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-focus-indicator-width": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-focus-indicator-color": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-text-color-default": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-text-color-hover": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-text-color-focus": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-text-color-focus-hover": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-text-color-keyboard-focus": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-text-color-disabled": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-color": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-color-hover": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-color-focus": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-color-focus-hover": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-color-keyboard-focus": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-color-disabled": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-background-color": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-background-color-disabled": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-search-color-default": {
+ "value": "var(--mod-search-color-default, var(--spectrum-search-color-default))",
+ "description": "Defined in `.spectrum-Search .spectrum-Search-textfield, .spectrum-Search .spectrum-Search-textfield .spectrum-Search-input`.
Used by `--spectrum-search-color`.
Defaults to `var(--mod-search-color-default, var(--spectrum-search-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-search-color-hover": {
+ "value": "var(--mod-search-color-hover, var(--spectrum-search-color-hover))",
+ "description": "Defined in `.spectrum-Search .spectrum-Search-textfield, .spectrum-Search .spectrum-Search-textfield .spectrum-Search-input`.
Used by `--spectrum-search-color`.
Defaults to `var(--mod-search-color-hover, var(--spectrum-search-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-search-color-focus": {
+ "value": "var(--mod-search-color-focus-hover, var(--spectrum-search-color-focus-hover))",
+ "description": "Defined in `.spectrum-Search .spectrum-Search-textfield, .spectrum-Search .spectrum-Search-textfield .spectrum-Search-input`.
Used by `--spectrum-search-color`.
Defaults to `var(--mod-search-color-focus-hover, var(--spectrum-search-color-focus-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-search-color-disabled": {
+ "value": "var(--mod-search-color-disabled, var(--spectrum-search-color-disabled))",
+ "description": "Defined in `.spectrum-Search .spectrum-Search-textfield, .spectrum-Search .spectrum-Search-textfield .spectrum-Search-input`.
Used by `--spectrum-search-color`.
Defaults to `var(--mod-search-color-disabled, var(--spectrum-search-color-disabled))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/search/stories/search.stories.js b/components/search/stories/search.stories.js
index fd3e3807c8e..30e8dafd47a 100644
--- a/components/search/stories/search.stories.js
+++ b/components/search/stories/search.stories.js
@@ -1,11 +1,13 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isQuiet, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { SearchGroup } from "./search.test.js";
import { SearchOptions, Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* A search field is used for searching and filtering items.
*
@@ -62,6 +64,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/sidenav/dist/metadata.json b/components/sidenav/dist/metadata.json
index a0be758aa57..39bd9c4c263 100644
--- a/components/sidenav/dist/metadata.json
+++ b/components/sidenav/dist/metadata.json
@@ -12,198 +12,952 @@
".spectrum-SideNav-item",
".spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink",
".spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink",
- ".spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink.is-keyboardFocused",
".spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:active",
".spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:focus-visible",
".spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:hover",
+ ".spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink.is-keyboardFocused",
".spectrum-SideNav-itemLink",
".spectrum-SideNav-itemLink .spectrum-Icon",
".spectrum-SideNav-itemLink .spectrum-SideNav-link-text",
- ".spectrum-SideNav-itemLink.is-keyboardFocused",
".spectrum-SideNav-itemLink:active",
".spectrum-SideNav-itemLink:focus-visible",
".spectrum-SideNav-itemLink:hover",
+ ".spectrum-SideNav-itemLink.is-keyboardFocused",
".spectrum-SideNav:lang(ja)",
".spectrum-SideNav:lang(ko)",
".spectrum-SideNav:lang(zh)"
],
- "modifiers": [
- "--mod-sidenav-background-default",
- "--mod-sidenav-background-disabled",
- "--mod-sidenav-background-hover",
- "--mod-sidenav-background-hover-selected",
- "--mod-sidenav-background-key-focus",
- "--mod-sidenav-background-key-focus-selected",
- "--mod-sidenav-border-radius",
- "--mod-sidenav-bottom-to-label",
- "--mod-sidenav-content-color-default",
- "--mod-sidenav-content-color-default-selected",
- "--mod-sidenav-content-color-down",
- "--mod-sidenav-content-color-down-selected",
- "--mod-sidenav-content-color-hover",
- "--mod-sidenav-content-color-hover-selected",
- "--mod-sidenav-content-color-key-focus",
- "--mod-sidenav-content-color-key-focus-selected",
- "--mod-sidenav-content-disabled-color",
- "--mod-sidenav-focus-ring-color",
- "--mod-sidenav-focus-ring-gap",
- "--mod-sidenav-focus-ring-size",
- "--mod-sidenav-gap",
- "--mod-sidenav-header-color",
- "--mod-sidenav-header-font-size",
- "--mod-sidenav-header-font-style",
- "--mod-sidenav-header-font-weight",
- "--mod-sidenav-header-line-height",
- "--mod-sidenav-heading-bottom-margin",
- "--mod-sidenav-heading-top-margin",
- "--mod-sidenav-icon-size",
- "--mod-sidenav-icon-spacing",
- "--mod-sidenav-inline-padding",
- "--mod-sidenav-item-background-default-selected",
- "--mod-sidenav-item-background-down",
- "--mod-sidenav-item-background-down-selected",
- "--mod-sidenav-max-width",
- "--mod-sidenav-min-height",
- "--mod-sidenav-min-width",
- "--mod-sidenav-start-to-content-second-level",
- "--mod-sidenav-start-to-content-third-level",
- "--mod-sidenav-start-to-content-with-icon-second-level",
- "--mod-sidenav-start-to-content-with-icon-third-level",
- "--mod-sidenav-text-font-family",
- "--mod-sidenav-text-font-size",
- "--mod-sidenav-text-font-style",
- "--mod-sidenav-text-font-weight",
- "--mod-sidenav-text-line-height",
- "--mod-sidenav-top-level-font-family",
- "--mod-sidenav-top-level-font-size",
- "--mod-sidenav-top-level-font-style",
- "--mod-sidenav-top-level-font-weight",
- "--mod-sidenav-top-level-line-height",
- "--mod-sidenav-top-to-icon",
- "--mod-sidenav-top-to-label",
- "--mod-sidenav-width"
- ],
- "component": [
- "--spectrum-side-navigation-bottom-to-text",
- "--spectrum-side-navigation-header-to-item",
- "--spectrum-side-navigation-item-to-header",
- "--spectrum-side-navigation-item-to-item",
- "--spectrum-side-navigation-maximum-width",
- "--spectrum-side-navigation-minimum-width",
- "--spectrum-side-navigation-second-level-edge-to-text",
- "--spectrum-side-navigation-third-level-edge-to-text",
- "--spectrum-side-navigation-with-icon-second-level-edge-to-text",
- "--spectrum-side-navigation-with-icon-third-level-edge-to-text",
- "--spectrum-sidenav-background-default",
- "--spectrum-sidenav-background-disabled",
- "--spectrum-sidenav-background-hover",
- "--spectrum-sidenav-background-hover-selected",
- "--spectrum-sidenav-background-key-focus",
- "--spectrum-sidenav-background-key-focus-selected",
- "--spectrum-sidenav-border-radius",
- "--spectrum-sidenav-bottom-to-label",
- "--spectrum-sidenav-content-color-default",
- "--spectrum-sidenav-content-color-default-selected",
- "--spectrum-sidenav-content-color-down",
- "--spectrum-sidenav-content-color-down-selected",
- "--spectrum-sidenav-content-color-hover",
- "--spectrum-sidenav-content-color-hover-selected",
- "--spectrum-sidenav-content-color-key-focus",
- "--spectrum-sidenav-content-color-key-focus-selected",
- "--spectrum-sidenav-content-disabled-color",
- "--spectrum-sidenav-focus-ring-color",
- "--spectrum-sidenav-focus-ring-gap",
- "--spectrum-sidenav-focus-ring-size",
- "--spectrum-sidenav-gap",
- "--spectrum-sidenav-header-color",
- "--spectrum-sidenav-header-font-family",
- "--spectrum-sidenav-header-font-size",
- "--spectrum-sidenav-header-font-style",
- "--spectrum-sidenav-header-font-weight",
- "--spectrum-sidenav-header-line-height",
- "--spectrum-sidenav-heading-bottom-margin",
- "--spectrum-sidenav-heading-top-margin",
- "--spectrum-sidenav-icon-size",
- "--spectrum-sidenav-icon-spacing",
- "--spectrum-sidenav-inline-padding",
- "--spectrum-sidenav-item-background-default-selected",
- "--spectrum-sidenav-item-background-down",
- "--spectrum-sidenav-item-background-down-selected",
- "--spectrum-sidenav-max-width",
- "--spectrum-sidenav-min-height",
- "--spectrum-sidenav-min-width",
- "--spectrum-sidenav-start-to-content-second-level",
- "--spectrum-sidenav-start-to-content-third-level",
- "--spectrum-sidenav-start-to-content-with-icon-second-level",
- "--spectrum-sidenav-start-to-content-with-icon-third-level",
- "--spectrum-sidenav-text-font-family",
- "--spectrum-sidenav-text-font-size",
- "--spectrum-sidenav-text-font-style",
- "--spectrum-sidenav-text-font-weight",
- "--spectrum-sidenav-text-line-height",
- "--spectrum-sidenav-top-level-font-family",
- "--spectrum-sidenav-top-level-font-size",
- "--spectrum-sidenav-top-level-font-style",
- "--spectrum-sidenav-top-level-font-weight",
- "--spectrum-sidenav-top-level-line-height",
- "--spectrum-sidenav-top-to-icon",
- "--spectrum-sidenav-top-to-label",
- "--spectrum-sidenav-width"
- ],
- "global": [
- "--spectrum-animation-duration-100",
- "--spectrum-bold-font-weight",
- "--spectrum-cjk-line-height-100",
- "--spectrum-component-edge-to-text-100",
- "--spectrum-component-height-100",
- "--spectrum-component-top-to-text-100",
- "--spectrum-component-top-to-workflow-icon-100",
- "--spectrum-corner-radius-100",
- "--spectrum-default-font-style",
- "--spectrum-disabled-content-color",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-font-size-100",
- "--spectrum-font-size-75",
- "--spectrum-gray-100",
- "--spectrum-gray-200",
- "--spectrum-gray-600",
- "--spectrum-line-height-100",
- "--spectrum-medium-font-weight",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-down",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-neutral-content-color-key-focus",
- "--spectrum-regular-font-weight",
- "--spectrum-sans-font-family-stack",
- "--spectrum-text-to-visual-100",
- "--spectrum-workflow-icon-size-100"
- ],
- "system-theme": [
- "--system-side-nav-background-hover",
- "--system-side-nav-background-hover-selected",
- "--system-side-nav-background-key-focus",
- "--system-side-nav-background-key-focus-selected",
- "--system-side-nav-item-background-default-selected",
- "--system-side-nav-item-background-down",
- "--system-side-nav-item-background-down-selected"
- ],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-sidenav-background-hover",
- "--highcontrast-sidenav-background-hover-selected",
- "--highcontrast-sidenav-background-key-focus",
- "--highcontrast-sidenav-background-key-focus-selected",
- "--highcontrast-sidenav-content-color-default",
- "--highcontrast-sidenav-content-color-default-selected",
- "--highcontrast-sidenav-content-color-down",
- "--highcontrast-sidenav-content-color-hover",
- "--highcontrast-sidenav-content-disabled-color",
- "--highcontrast-sidenav-focus-ring-color",
- "--highcontrast-sidenav-item-background-default-selected",
- "--highcontrast-sidenav-item-background-down",
- "--highcontrast-sidenav-item-background-down-selected",
- "--highcontrast-sidenav-top-level-font-color"
- ]
+ "modifiers": {
+ "mod-sidenav-background-disabled": {
+ "value": "var(--spectrum-sidenav-background-disabled)",
+ "description": "Used by `.spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-background-disabled)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-content-disabled-color": {
+ "value": "var(--spectrum-sidenav-content-disabled-color)",
+ "description": "Used by `.spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-content-disabled-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-sidenav-item-background-default-selected": {
+ "value": "var(--spectrum-sidenav-item-background-default-selected)",
+ "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-item-background-default-selected)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-content-color-default-selected": {
+ "value": "var(--spectrum-sidenav-content-color-default-selected)",
+ "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-content-color-default-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-sidenav-item-background-down-selected": {
+ "value": "var(--spectrum-sidenav-item-background-down-selected)",
+ "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:active`.
Defaults to `var(--spectrum-sidenav-item-background-down-selected)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-content-color-down-selected": {
+ "value": "var(--spectrum-sidenav-content-color-down-selected)",
+ "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:active`.
Defaults to `var(--spectrum-sidenav-content-color-down-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-sidenav-background-key-focus-selected": {
+ "value": "var(--spectrum-sidenav-background-key-focus-selected)",
+ "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--spectrum-sidenav-background-key-focus-selected)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-content-color-key-focus-selected": {
+ "value": "var(--spectrum-sidenav-content-color-key-focus-selected)",
+ "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--spectrum-sidenav-content-color-key-focus-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-sidenav-inline-padding": {
+ "value": "var(--spectrum-sidenav-inline-padding)",
+ "description": "Used by `.spectrum-SideNav-itemLink`, `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-sidenav-inline-padding)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-gap": {
+ "value": "var(--spectrum-sidenav-gap)",
+ "description": "Used by `.spectrum-SideNav-itemLink`, `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-sidenav-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-border-radius": {
+ "value": "var(--spectrum-sidenav-border-radius)",
+ "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-background-default": {
+ "value": "var(--spectrum-sidenav-background-default)",
+ "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-background-default)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-content-color-default": {
+ "value": "var(--spectrum-sidenav-content-color-default)",
+ "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-sidenav-width": {
+ "value": "var(--spectrum-sidenav-width)",
+ "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-min-width": {
+ "value": "var(--spectrum-sidenav-min-width)",
+ "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-min-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-max-width": {
+ "value": "var(--spectrum-sidenav-max-width)",
+ "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-max-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-min-height": {
+ "value": "var(--spectrum-sidenav-min-height)",
+ "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-min-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-text-font-family": {
+ "value": "var(--spectrum-sidenav-text-font-family)",
+ "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-text-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-text-font-size": {
+ "value": "var(--spectrum-sidenav-text-font-size)",
+ "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-text-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-text-font-weight": {
+ "value": "var(--spectrum-sidenav-text-font-weight)",
+ "description": "Used by `.spectrum-SideNav-itemLink`, `.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-text-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-text-font-style": {
+ "value": "var(--spectrum-sidenav-text-font-style)",
+ "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-text-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-text-line-height": {
+ "value": "var(--spectrum-sidenav-text-line-height)",
+ "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-text-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-top-to-label": {
+ "value": "var(--spectrum-sidenav-top-to-label)",
+ "description": "Used by `.spectrum-SideNav-itemLink .spectrum-SideNav-link-text`.
Defaults to `var(--spectrum-sidenav-top-to-label)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-bottom-to-label": {
+ "value": "var(--spectrum-sidenav-bottom-to-label)",
+ "description": "Used by `.spectrum-SideNav-itemLink .spectrum-SideNav-link-text`.
Defaults to `var(--spectrum-sidenav-bottom-to-label)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-icon-size": {
+ "value": "var(--spectrum-sidenav-icon-size)",
+ "description": "Used by `.spectrum-SideNav-itemLink .spectrum-Icon`.
Defaults to `var(--spectrum-sidenav-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-icon-spacing": {
+ "value": "var(--spectrum-sidenav-icon-spacing)",
+ "description": "Used by `.spectrum-SideNav-itemLink .spectrum-Icon`.
Defaults to `var(--spectrum-sidenav-icon-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-top-to-icon": {
+ "value": "var(--spectrum-sidenav-top-to-icon)",
+ "description": "Used by `.spectrum-SideNav-itemLink .spectrum-Icon`.
Defaults to `var(--spectrum-sidenav-top-to-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-background-hover-selected": {
+ "value": "var(--spectrum-sidenav-background-hover-selected)",
+ "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:hover`.
Defaults to `var(--spectrum-sidenav-background-hover-selected)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-content-color-hover-selected": {
+ "value": "var(--spectrum-sidenav-content-color-hover-selected)",
+ "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:hover`.
Defaults to `var(--spectrum-sidenav-content-color-hover-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-sidenav-background-hover": {
+ "value": "var(--spectrum-sidenav-background-hover)",
+ "description": "Used by `.spectrum-SideNav-itemLink:hover`.
Defaults to `var(--spectrum-sidenav-background-hover)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-content-color-hover": {
+ "value": "var(--spectrum-sidenav-content-color-hover)",
+ "description": "Used by `.spectrum-SideNav-itemLink:hover`.
Defaults to `var(--spectrum-sidenav-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-sidenav-item-background-down": {
+ "value": "var(--spectrum-sidenav-item-background-down)",
+ "description": "Used by `.spectrum-SideNav-itemLink:active`.
Defaults to `var(--spectrum-sidenav-item-background-down)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-content-color-down": {
+ "value": "var(--spectrum-sidenav-content-color-down)",
+ "description": "Used by `.spectrum-SideNav-itemLink:active`.
Defaults to `var(--spectrum-sidenav-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-sidenav-focus-ring-color": {
+ "value": "var(--spectrum-sidenav-focus-ring-color)",
+ "description": "Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--spectrum-sidenav-focus-ring-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-sidenav-focus-ring-size": {
+ "value": "var(--spectrum-sidenav-focus-ring-size)",
+ "description": "Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--spectrum-sidenav-focus-ring-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-focus-ring-gap": {
+ "value": "var(--spectrum-sidenav-focus-ring-gap)",
+ "description": "Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--spectrum-sidenav-focus-ring-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-background-key-focus": {
+ "value": "var(--spectrum-sidenav-background-key-focus)",
+ "description": "Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--spectrum-sidenav-background-key-focus)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-content-color-key-focus": {
+ "value": "var(--spectrum-sidenav-content-color-key-focus)",
+ "description": "Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--spectrum-sidenav-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-sidenav-heading-top-margin": {
+ "value": "var(--spectrum-sidenav-heading-top-margin)",
+ "description": "Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-sidenav-heading-top-margin)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-heading-bottom-margin": {
+ "value": "var(--spectrum-sidenav-heading-bottom-margin)",
+ "description": "Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-sidenav-heading-bottom-margin)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-header-color": {
+ "value": "var(--spectrum-sidenav-header-color)",
+ "description": "Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-sidenav-header-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-sidenav-header-font-size": {
+ "value": "var(--spectrum-sidenav-header-font-size)",
+ "description": "Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-sidenav-header-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-header-font-weight": {
+ "value": "var(--spectrum-sidenav-header-font-weight)",
+ "description": "Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-sidenav-header-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-header-font-style": {
+ "value": "var(--spectrum-sidenav-header-font-style)",
+ "description": "Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-sidenav-header-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-header-line-height": {
+ "value": "var(--spectrum-sidenav-header-line-height)",
+ "description": "Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-sidenav-header-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-top-level-font-family": {
+ "value": "var(--spectrum-sidenav-top-level-font-family)",
+ "description": "Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-top-level-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-top-level-font-weight": {
+ "value": "var(--spectrum-sidenav-top-level-font-weight)",
+ "description": "Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-top-level-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-top-level-font-style": {
+ "value": "var(--spectrum-sidenav-top-level-font-style)",
+ "description": "Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-top-level-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-top-level-font-size": {
+ "value": "var(--spectrum-sidenav-top-level-font-size)",
+ "description": "Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-top-level-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-top-level-line-height": {
+ "value": "var(--spectrum-sidenav-top-level-line-height)",
+ "description": "Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-top-level-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-start-to-content-second-level": {
+ "value": "var(--spectrum-sidenav-start-to-content-second-level)",
+ "description": "Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-start-to-content-second-level)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-start-to-content-third-level": {
+ "value": "var(--spectrum-sidenav-start-to-content-third-level)",
+ "description": "Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-start-to-content-third-level)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-start-to-content-with-icon-second-level": {
+ "value": "var(--spectrum-sidenav-start-to-content-with-icon-second-level)",
+ "description": "Used by `.spectrum-SideNav--hasIcon.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-start-to-content-with-icon-second-level)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-sidenav-start-to-content-with-icon-third-level": {
+ "value": "var(--spectrum-sidenav-start-to-content-with-icon-third-level)",
+ "description": "Used by `.spectrum-SideNav--hasIcon.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-start-to-content-with-icon-third-level)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-sidenav-focus-ring-size": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-focus-ring-gap": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-focus-ring-color": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-min-height": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-width": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-min-width": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-side-navigation-minimum-width": {
+ "value": "160px",
+ "description": "Used by `--spectrum-sidenav-min-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-max-width": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-side-navigation-maximum-width": {
+ "value": "240px",
+ "description": "Used by `--spectrum-sidenav-max-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-border-radius": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-icon-size": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink .spectrum-Icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-icon-spacing": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink .spectrum-Icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-inline-padding": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`, `.spectrum-SideNav-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-gap": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`, `.spectrum-SideNav-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-side-navigation-item-to-item": {
+ "value": "4px",
+ "description": "Used by `--spectrum-sidenav-gap`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-top-to-icon": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink .spectrum-Icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-top-to-label": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink .spectrum-SideNav-link-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-bottom-to-label": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink .spectrum-SideNav-link-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-side-navigation-bottom-to-text": {
+ "value": "8px",
+ "description": "Used by `--spectrum-sidenav-bottom-to-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-start-to-content-second-level": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-side-navigation-second-level-edge-to-text": {
+ "value": "24px",
+ "description": "Used by `--spectrum-sidenav-start-to-content-second-level`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-start-to-content-third-level": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-side-navigation-third-level-edge-to-text": {
+ "value": "36px",
+ "description": "Used by `--spectrum-sidenav-start-to-content-third-level`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-start-to-content-with-icon-second-level": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--hasIcon.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-side-navigation-with-icon-second-level-edge-to-text": {
+ "value": "50px",
+ "description": "Used by `--spectrum-sidenav-start-to-content-with-icon-second-level`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-start-to-content-with-icon-third-level": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--hasIcon.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-side-navigation-with-icon-third-level-edge-to-text": {
+ "value": "62px",
+ "description": "Used by `--spectrum-sidenav-start-to-content-with-icon-third-level`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-heading-top-margin": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-side-navigation-item-to-header": {
+ "value": "24px",
+ "description": "Used by `--spectrum-sidenav-heading-top-margin`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-heading-bottom-margin": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-side-navigation-header-to-item": {
+ "value": "8px",
+ "description": "Used by `--spectrum-sidenav-heading-bottom-margin`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-background-disabled": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-background-default": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-header-color": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-heading`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-content-disabled-color": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-content-color-default": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-content-color-hover": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-content-color-down": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-content-color-key-focus": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-content-color-default-selected": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-content-color-hover-selected": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-content-color-down-selected": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-content-color-key-focus-selected": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-text-font-family": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-text-font-weight": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`, `.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-text-font-style": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-text-font-size": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-text-line-height": {
+ "description": "Defined in `.spectrum-SideNav`, `.spectrum-SideNav:lang(ja), .spectrum-SideNav:lang(ko), .spectrum-SideNav:lang(zh)`.
Used by `.spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-top-level-font-family": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-top-level-font-weight": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-top-level-font-style": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-top-level-font-size": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-top-level-line-height": {
+ "description": "Defined in `.spectrum-SideNav`, `.spectrum-SideNav:lang(ja), .spectrum-SideNav:lang(ko), .spectrum-SideNav:lang(zh)`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-header-font-family": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-header-font-weight": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-header-font-style": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-header-font-size": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-header-line-height": {
+ "description": "Defined in `.spectrum-SideNav`, `.spectrum-SideNav:lang(ja), .spectrum-SideNav:lang(ko), .spectrum-SideNav:lang(zh)`.
Used by `.spectrum-SideNav-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-item-background-default-selected": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-item-background-down-selected": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:active`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-background-key-focus-selected": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:focus-visible`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-background-hover-selected": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:hover`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-background-hover": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink:hover`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-item-background-down": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink:active`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-background-key-focus": {
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--system-side-nav-background-hover`, `--system-side-nav-background-key-focus`, `--system-side-nav-item-background-default-selected`, `--system-side-nav-background-key-focus-selected`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--system-side-nav-item-background-down`, `--system-side-nav-background-hover-selected`, `--system-side-nav-item-background-down-selected`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-sidenav-focus-ring-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-sidenav-focus-ring-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-sidenav-focus-ring-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-sidenav-min-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-sidenav-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-sidenav-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-sidenav-icon-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-100": {
+ "value": "12px",
+ "description": "Used by `--spectrum-sidenav-inline-padding`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-sidenav-top-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-sidenav-top-to-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-600": {
+ "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+ "description": "Used by `--spectrum-sidenav-header-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-sidenav-content-disabled-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-sidenav-content-color-default`, `--spectrum-sidenav-content-color-default-selected`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-sidenav-content-color-hover`, `--spectrum-sidenav-content-color-hover-selected`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-sidenav-content-color-down`, `--spectrum-sidenav-content-color-down-selected`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-sidenav-content-color-key-focus`, `--spectrum-sidenav-content-color-key-focus-selected`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-sidenav-text-font-family`, `--spectrum-sidenav-top-level-font-family`, `--spectrum-sidenav-header-font-family`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-sidenav-text-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-sidenav-text-font-style`, `--spectrum-sidenav-top-level-font-style`, `--spectrum-sidenav-header-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-sidenav-text-font-size`, `--spectrum-sidenav-top-level-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-sidenav-text-line-height`, `--spectrum-sidenav-top-level-line-height`, `--spectrum-sidenav-header-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-bold-font-weight": {
+ "value": "700",
+ "description": "Used by `--spectrum-sidenav-top-level-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-medium-font-weight": {
+ "value": "500",
+ "description": "Used by `--spectrum-sidenav-header-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-sidenav-header-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-sidenav-text-line-height`, `--spectrum-sidenav-top-level-line-height`, `--spectrum-sidenav-header-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `.spectrum-SideNav-itemLink`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-side-nav-background-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-sidenav-background-hover`.",
+ "control": "text"
+ },
+ "system-side-nav-item-background-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-sidenav-item-background-down`.",
+ "control": "text"
+ },
+ "system-side-nav-background-key-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-sidenav-background-key-focus`.",
+ "control": "text"
+ },
+ "system-side-nav-item-background-default-selected": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-sidenav-item-background-default-selected`.",
+ "control": "text"
+ },
+ "system-side-nav-background-hover-selected": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-sidenav-background-hover-selected`.",
+ "control": "text"
+ },
+ "system-side-nav-item-background-down-selected": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-sidenav-item-background-down-selected`.",
+ "control": "text"
+ },
+ "system-side-nav-background-key-focus-selected": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-sidenav-background-key-focus-selected`.",
+ "control": "text"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-sidenav-content-disabled-color": {
+ "value": "var(--mod-sidenav-content-disabled-color, var(--spectrum-sidenav-content-disabled-color))",
+ "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink`.
Defaults to `var(--mod-sidenav-content-disabled-color, var(--spectrum-sidenav-content-disabled-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-sidenav-focus-ring-color": {
+ "value": "var(--mod-sidenav-focus-ring-color, var(--spectrum-sidenav-focus-ring-color))",
+ "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--mod-sidenav-focus-ring-color, var(--spectrum-sidenav-focus-ring-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-sidenav-content-color-default-selected": {
+ "value": "var(--mod-sidenav-content-color-default-selected, var(--spectrum-sidenav-content-color-default-selected))",
+ "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink`.
Defaults to `var(--mod-sidenav-content-color-default-selected, var(--spectrum-sidenav-content-color-default-selected))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-sidenav-item-background-default-selected": {
+ "value": "var(--mod-sidenav-item-background-default-selected, var(--spectrum-sidenav-item-background-default-selected))",
+ "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink`.
Defaults to `var(--mod-sidenav-item-background-default-selected, var(--spectrum-sidenav-item-background-default-selected))`, if not set.",
+ "control": "text"
+ },
+ "highcontrast-sidenav-background-key-focus-selected": {
+ "value": "var(--mod-sidenav-background-key-focus-selected, var(--spectrum-sidenav-background-key-focus-selected))",
+ "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--mod-sidenav-background-key-focus-selected, var(--spectrum-sidenav-background-key-focus-selected))`, if not set.",
+ "control": "text"
+ },
+ "highcontrast-sidenav-background-hover-selected": {
+ "value": "var(--mod-sidenav-background-hover-selected, var(--spectrum-sidenav-background-hover-selected))",
+ "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:hover`.
Defaults to `var(--mod-sidenav-background-hover-selected, var(--spectrum-sidenav-background-hover-selected))`, if not set.",
+ "control": "text"
+ },
+ "highcontrast-sidenav-item-background-down-selected": {
+ "value": "var(--mod-sidenav-item-background-down-selected, var(--spectrum-sidenav-item-background-down-selected))",
+ "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:active`.
Defaults to `var(--mod-sidenav-item-background-down-selected, var(--spectrum-sidenav-item-background-down-selected))`, if not set.",
+ "control": "text"
+ },
+ "highcontrast-sidenav-item-background-down": {
+ "value": "var(--mod-sidenav-item-background-down, var(--spectrum-sidenav-item-background-down))",
+ "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-itemLink:active`.
Defaults to `var(--mod-sidenav-item-background-down, var(--spectrum-sidenav-item-background-down))`, if not set.",
+ "control": "text"
+ },
+ "highcontrast-sidenav-background-hover": {
+ "value": "var(--mod-sidenav-background-hover, var(--spectrum-sidenav-background-hover))",
+ "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-itemLink:hover`.
Defaults to `var(--mod-sidenav-background-hover, var(--spectrum-sidenav-background-hover))`, if not set.",
+ "control": "text"
+ },
+ "highcontrast-sidenav-content-color-hover": {
+ "value": "var(--mod-sidenav-content-color-hover, var(--spectrum-sidenav-content-color-hover))",
+ "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-itemLink:hover`.
Defaults to `var(--mod-sidenav-content-color-hover, var(--spectrum-sidenav-content-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-sidenav-background-key-focus": {
+ "value": "var(--mod-sidenav-background-key-focus, var(--spectrum-sidenav-background-key-focus))",
+ "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--mod-sidenav-background-key-focus, var(--spectrum-sidenav-background-key-focus))`, if not set.",
+ "control": "text"
+ },
+ "highcontrast-sidenav-top-level-font-color": {
+ "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.",
+ "control": "color"
+ },
+ "highcontrast-sidenav-content-color-default": {
+ "value": "var(--mod-sidenav-content-color-default, var(--spectrum-sidenav-content-color-default))",
+ "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--mod-sidenav-content-color-default, var(--spectrum-sidenav-content-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-sidenav-content-color-down": {
+ "value": "var(--mod-sidenav-content-color-down, var(--spectrum-sidenav-content-color-down))",
+ "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-itemLink:active`.
Defaults to `var(--mod-sidenav-content-color-down, var(--spectrum-sidenav-content-color-down))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/sidenav/stories/sidenav.stories.js b/components/sidenav/stories/sidenav.stories.js
index b5381efd78d..4bfdc87e567 100644
--- a/components/sidenav/stories/sidenav.stories.js
+++ b/components/sidenav/stories/sidenav.stories.js
@@ -1,9 +1,11 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { SideNavGroup } from "./sidenav.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* Side nav lets users navigate the entire content of a product or a section. These can be used for a single level or a multi-level navigation.
*
@@ -69,6 +71,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json
index 015c2145100..704463ca7e9 100644
--- a/components/slider/dist/metadata.json
+++ b/components/slider/dist/metadata.json
@@ -15,8 +15,8 @@
".spectrum-Slider--sideLabel",
".spectrum-Slider--sideLabel .spectrum-Slider-controls",
".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer",
- ".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer + .spectrum-Slider-controls",
".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer .spectrum-Slider-label",
+ ".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer + .spectrum-Slider-controls",
".spectrum-Slider--sideLabel .spectrum-Slider-value",
".spectrum-Slider--sizeL",
".spectrum-Slider--sizeS",
@@ -31,13 +31,13 @@
".spectrum-Slider-fill--right",
".spectrum-Slider-fill:before",
".spectrum-Slider-handle",
+ ".spectrum-Slider-handle:active",
+ ".spectrum-Slider-handle:before",
+ ".spectrum-Slider-handle:hover",
".spectrum-Slider-handle.is-dragged",
".spectrum-Slider-handle.is-focused",
".spectrum-Slider-handle.is-focused:before",
".spectrum-Slider-handle.is-tophandle",
- ".spectrum-Slider-handle:active",
- ".spectrum-Slider-handle:before",
- ".spectrum-Slider-handle:hover",
".spectrum-Slider-handleContainer",
".spectrum-Slider-input",
".spectrum-Slider-input:focus",
@@ -68,6 +68,13 @@
".spectrum-Slider-track:not(:has(~ .spectrum-Slider-fill)):before",
".spectrum-Slider-trackContainer",
".spectrum-Slider-value",
+ ".spectrum-Slider:dir(rtl)",
+ ".spectrum-Slider:dir(rtl) .spectrum-Slider-handle:before",
+ ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active",
+ ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within",
+ ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover",
+ ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused",
+ ".spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)",
".spectrum-Slider.is-disabled",
".spectrum-Slider.is-disabled .spectrum-Slider-controls",
".spectrum-Slider.is-disabled .spectrum-Slider-fill:before",
@@ -87,223 +94,1090 @@
".spectrum-Slider.spectrum-Slider--sizeM",
".spectrum-Slider.spectrum-Slider--sizeS",
".spectrum-Slider.spectrum-Slider--sizeXL",
- ".spectrum-Slider:dir(rtl)",
- ".spectrum-Slider:dir(rtl) .spectrum-Slider-handle:before",
- ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused",
- ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active",
- ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within",
- ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover",
- ".spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)",
"[dir=\"rtl\"] .spectrum-Slider",
"[dir=\"rtl\"] .spectrum-Slider .spectrum-Slider-handle:before"
],
- "modifiers": [
- "--mod-animation-duration-100",
- "--mod-disabled-border-color",
- "--mod-focus-indicator-gap",
- "--mod-font-size-75",
- "--mod-line-height-100",
- "--mod-sectrum-slider-ramp-handle-border-color-active",
- "--mod-slider-cjk-line-height",
- "--mod-slider-control-height",
- "--mod-slider-controls-margin",
- "--mod-slider-font-size",
- "--mod-slider-handle-background-color",
- "--mod-slider-handle-background-color-disabled",
- "--mod-slider-handle-border-color",
- "--mod-slider-handle-border-color-disabled",
- "--mod-slider-handle-border-color-down",
- "--mod-slider-handle-border-color-hover",
- "--mod-slider-handle-border-color-key-focus",
- "--mod-slider-handle-border-radius",
- "--mod-slider-handle-border-width",
- "--mod-slider-handle-border-width-down",
- "--mod-slider-handle-disabled-background-color",
- "--mod-slider-handle-focus-ring-color-key-focus",
- "--mod-slider-handle-gap",
- "--mod-slider-handle-size",
- "--mod-slider-input-left",
- "--mod-slider-input-top-size",
- "--mod-slider-label-margin-start",
- "--mod-slider-label-text-color",
- "--mod-slider-label-text-color-disabled",
- "--mod-slider-label-top-to-text",
- "--mod-slider-min-size",
- "--mod-slider-ramp-handle-background-color",
- "--mod-slider-ramp-track-color",
- "--mod-slider-ramp-track-color-disabled",
- "--mod-slider-ramp-track-height",
- "--mod-slider-range-track-reset",
- "--mod-slider-tick-handle-background-color",
- "--mod-slider-tick-label-color",
- "--mod-slider-tick-mark-border-radius",
- "--mod-slider-tick-mark-color",
- "--mod-slider-tick-mark-color-disabled",
- "--mod-slider-tick-mark-height",
- "--mod-slider-tick-mark-width",
- "--mod-slider-ticks-handle-background-color",
- "--mod-slider-track-color",
- "--mod-slider-track-color-disabled",
- "--mod-slider-track-corner-radius",
- "--mod-slider-track-fill-color",
- "--mod-slider-track-fill-color-disabled",
- "--mod-slider-track-fill-thickness",
- "--mod-slider-track-handleoffset",
- "--mod-slider-track-margin-offset",
- "--mod-slider-track-middle-handleoffset",
- "--mod-slider-track-thickness",
- "--mod-slider-value-inline-size",
- "--mod-slider-value-side-padding-inline"
- ],
- "component": [
- "--spectrum-slider-cjk-line-height",
- "--spectrum-slider-control-height",
- "--spectrum-slider-control-to-field-label",
- "--spectrum-slider-control-to-field-label-extra-large",
- "--spectrum-slider-control-to-field-label-large",
- "--spectrum-slider-control-to-field-label-medium",
- "--spectrum-slider-control-to-field-label-small",
- "--spectrum-slider-controls-margin",
- "--spectrum-slider-font-size",
- "--spectrum-slider-handle-background-color",
- "--spectrum-slider-handle-background-color-disabled",
- "--spectrum-slider-handle-border-color",
- "--spectrum-slider-handle-border-color-disabled",
- "--spectrum-slider-handle-border-color-down",
- "--spectrum-slider-handle-border-color-hover",
- "--spectrum-slider-handle-border-color-key-focus",
- "--spectrum-slider-handle-border-radius",
- "--spectrum-slider-handle-border-width",
- "--spectrum-slider-handle-border-width-down",
- "--spectrum-slider-handle-border-width-down-extra-large",
- "--spectrum-slider-handle-border-width-down-large",
- "--spectrum-slider-handle-border-width-down-medium",
- "--spectrum-slider-handle-border-width-down-small",
- "--spectrum-slider-handle-disabled-background-color",
- "--spectrum-slider-handle-focus-ring-color-key-focus",
- "--spectrum-slider-handle-gap",
- "--spectrum-slider-handle-margin-left",
- "--spectrum-slider-handle-size",
- "--spectrum-slider-handle-size-extra-large",
- "--spectrum-slider-handle-size-large",
- "--spectrum-slider-handle-size-medium",
- "--spectrum-slider-handle-size-small",
- "--spectrum-slider-input-left",
- "--spectrum-slider-input-top-size",
- "--spectrum-slider-label-margin-start",
- "--spectrum-slider-label-text-color",
- "--spectrum-slider-label-text-color-disabled",
- "--spectrum-slider-label-top-to-text",
- "--spectrum-slider-min-size",
- "--spectrum-slider-ramp-handle-background-color",
- "--spectrum-slider-ramp-handle-border-color-active",
- "--spectrum-slider-ramp-track-color",
- "--spectrum-slider-ramp-track-color-disabled",
- "--spectrum-slider-ramp-track-height",
- "--spectrum-slider-range-track-reset",
- "--spectrum-slider-tick-handle-background-color",
- "--spectrum-slider-tick-label-color",
- "--spectrum-slider-tick-mark-border-radius",
- "--spectrum-slider-tick-mark-color",
- "--spectrum-slider-tick-mark-color-disabled",
- "--spectrum-slider-tick-mark-height",
- "--spectrum-slider-tick-mark-width",
- "--spectrum-slider-ticks-handle-background-color",
- "--spectrum-slider-track-color",
- "--spectrum-slider-track-color-disabled",
- "--spectrum-slider-track-corner-radius",
- "--spectrum-slider-track-fill-color",
- "--spectrum-slider-track-fill-color-disabled",
- "--spectrum-slider-track-fill-thickness",
- "--spectrum-slider-track-handleoffset",
- "--spectrum-slider-track-margin-offset",
- "--spectrum-slider-track-middle-handleoffset",
- "--spectrum-slider-track-thickness",
- "--spectrum-slider-value-inline-size",
- "--spectrum-slider-value-side-padding-inline"
- ],
- "global": [
- "--spectrum-animation-duration-100",
- "--spectrum-border-width-200",
- "--spectrum-cjk-line-height-100",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-75",
- "--spectrum-component-top-to-text-100",
- "--spectrum-component-top-to-text-200",
- "--spectrum-component-top-to-text-75",
- "--spectrum-corner-radius-500",
- "--spectrum-disabled-background-color",
- "--spectrum-disabled-border-color",
- "--spectrum-disabled-content-color",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-75",
- "--spectrum-gray-100",
- "--spectrum-gray-200",
- "--spectrum-gray-400",
- "--spectrum-gray-700",
- "--spectrum-gray-75",
- "--spectrum-gray-800",
- "--spectrum-line-height-100",
- "--spectrum-logical-rotation",
- "--spectrum-neutral-content-color-default",
- "--spectrum-spacing-100",
- "--spectrum-spacing-200",
- "--spectrum-spacing-300",
- "--spectrum-spacing-900",
- "--spectrum-text-to-visual-75"
- ],
- "system-theme": [
- "--system-slider-handle-background-color",
- "--system-slider-handle-background-color-disabled",
- "--system-slider-handle-border-color",
- "--system-slider-handle-border-color-down",
- "--system-slider-handle-border-color-hover",
- "--system-slider-handle-border-color-key-focus",
- "--system-slider-handle-border-radius",
- "--system-slider-handle-disabled-background-color",
- "--system-slider-handle-focus-ring-color-key-focus",
- "--system-slider-ramp-handle-background-color",
- "--system-slider-ramp-track-color",
- "--system-slider-ramp-track-color-disabled",
- "--system-slider-size-l-handle-border-radius",
- "--system-slider-size-m-handle-border-radius",
- "--system-slider-size-s-handle-border-radius",
- "--system-slider-size-xl-handle-border-radius",
- "--system-slider-tick-mark-color",
- "--system-slider-ticks-handle-background-color",
- "--system-slider-track-color",
- "--system-slider-track-corner-radius",
- "--system-slider-track-fill-color"
- ],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-slider-filled-track-fill-color",
- "--highcontrast-slider-handle-background-color",
- "--highcontrast-slider-handle-background-color-disabled",
- "--highcontrast-slider-handle-border-color",
- "--highcontrast-slider-handle-border-color-disabled",
- "--highcontrast-slider-handle-border-color-down",
- "--highcontrast-slider-handle-border-color-hover",
- "--highcontrast-slider-handle-border-color-key-focus",
- "--highcontrast-slider-handle-disabled-background-color",
- "--highcontrast-slider-handle-focus-ring-color-key-focus",
- "--highcontrast-slider-label-text-color",
- "--highcontrast-slider-label-text-color-disabled",
- "--highcontrast-slider-ramp-handle-background-color",
- "--highcontrast-slider-ramp-handle-border-color-active",
- "--highcontrast-slider-ramp-track-color",
- "--highcontrast-slider-ramp-track-color-disabled",
- "--highcontrast-slider-tick-mark-color",
- "--highcontrast-slider-tick-mark-color-disabled",
- "--highcontrast-slider-track-color",
- "--highcontrast-slider-track-color-disabled",
- "--highcontrast-slider-track-color-static",
- "--highcontrast-slider-track-fill-color-disabled"
- ]
+ "modifiers": {
+ "mod-slider-min-size": {
+ "value": "var(--spectrum-slider-min-size)",
+ "description": "Used by `.spectrum-Slider`.
Defaults to `var(--spectrum-slider-min-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-ramp-track-height": {
+ "value": "var(--spectrum-slider-ramp-track-height)",
+ "description": "Used by `.spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)`, `.spectrum-Slider-ramp`.
Defaults to `var(--spectrum-slider-ramp-track-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-value-side-padding-inline": {
+ "value": "var(--spectrum-slider-value-side-padding-inline)",
+ "description": "Used by `.spectrum-Slider--sideLabel .spectrum-Slider-labelContainer .spectrum-Slider-label`, `.spectrum-Slider--sideLabel .spectrum-Slider-value`.
Defaults to `var(--spectrum-slider-value-side-padding-inline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-controls-margin": {
+ "value": "var(--spectrum-slider-controls-margin)",
+ "description": "Used by `.spectrum-Slider--sideLabel .spectrum-Slider-controls`, `.spectrum-Slider-controls`, `.spectrum-Slider-fill`, `.spectrum-Slider-fill--right`.
Defaults to `var(--spectrum-slider-controls-margin)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-value-inline-size": {
+ "value": "var(--spectrum-slider-value-inline-size)",
+ "description": "Used by `.spectrum-Slider--sideLabel .spectrum-Slider-value`.
Defaults to `var(--spectrum-slider-value-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-control-height": {
+ "value": "var(--spectrum-slider-control-height)",
+ "description": "Used by `.spectrum-Slider-controls`, `.spectrum-Slider--tick`, `.spectrum-Slider-fill, .spectrum-Slider-track`, `.spectrum-Slider-handle`, `.spectrum-Slider-trackContainer`.
Defaults to `var(--spectrum-slider-control-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-track-fill-thickness": {
+ "value": "var(--spectrum-slider-track-fill-thickness)",
+ "description": "Used by `.spectrum-Slider-fill, .spectrum-Slider-track`.
Defaults to `var(--spectrum-slider-track-fill-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-handle-gap": {
+ "value": "4px",
+ "description": "Used by `.spectrum-Slider-fill, .spectrum-Slider-track`.
Defaults to `var(--spectrum-slider-handle-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-track-margin-offset": {
+ "value": "var(--spectrum-slider-track-margin-offset)",
+ "description": "Used by `.spectrum-Slider-fill, .spectrum-Slider-track`, `.spectrum-Slider-track ~ .spectrum-Slider-track`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type`, `.spectrum-Slider--range .spectrum-Slider-track:last-of-type`, `.spectrum-Slider-ticks`.
Defaults to `var(--spectrum-slider-track-margin-offset)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-track-corner-radius": {
+ "value": "var(--spectrum-slider-track-corner-radius)",
+ "description": "Used by `.spectrum-Slider-track:first-of-type:before`, `.spectrum-Slider-track:last-of-type:before`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type:before`, `.spectrum-Slider--range .spectrum-Slider-track:last-of-type:before`, `.spectrum-Slider-track ~ .spectrum-Slider-track:before`.
Defaults to `var(--spectrum-slider-track-corner-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-range-track-reset": {
+ "value": "var(--spectrum-slider-range-track-reset)",
+ "description": "Used by `.spectrum-Slider-track ~ .spectrum-Slider-track`, `.spectrum-Slider--range .spectrum-Slider-track ~ .spectrum-Slider-track`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type`, `.spectrum-Slider--range .spectrum-Slider-track:last-of-type`.
Defaults to `var(--spectrum-slider-range-track-reset)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-track-handleoffset": {
+ "value": "var(--spectrum-slider-track-handleoffset)",
+ "description": "Used by `.spectrum-Slider-track ~ .spectrum-Slider-track`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type`.
Defaults to `var(--spectrum-slider-track-handleoffset)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-track-middle-handleoffset": {
+ "value": "var(--spectrum-slider-track-middle-handleoffset)",
+ "description": "Used by `.spectrum-Slider--range .spectrum-Slider-track ~ .spectrum-Slider-track`.
Defaults to `var(--spectrum-slider-track-middle-handleoffset)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-handle-size": {
+ "value": "var(--spectrum-slider-handle-size)",
+ "description": "Used by `.spectrum-Slider-handle`, `.spectrum-Slider-handle:before`, `.spectrum-Slider-handle.is-focused:before`, `.spectrum-Slider-input`.
Defaults to `var(--spectrum-slider-handle-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-handle-border-width": {
+ "value": "var(--spectrum-slider-handle-border-width)",
+ "description": "Used by `.spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-handle-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-handle-border-radius": {
+ "value": "var(--spectrum-slider-handle-border-radius)",
+ "description": "Used by `.spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-handle-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-animation-duration-100": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Used by `.spectrum-Slider-handle`, `.spectrum-Slider-handle:before`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-handle-border-width-down": {
+ "value": "var(--spectrum-slider-handle-border-width-down)",
+ "description": "Used by `.spectrum-Slider-handle.is-dragged, .spectrum-Slider-handle:active`.
Defaults to `var(--spectrum-slider-handle-border-width-down)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `.spectrum-Slider-handle.is-focused:before`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-input-top-size": {
+ "value": "var(--spectrum-slider-input-top-size)",
+ "description": "Used by `.spectrum-Slider-input`.
Defaults to `var(--spectrum-slider-input-top-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-input-left": {
+ "value": "var(--spectrum-slider-input-left)",
+ "description": "Used by `.spectrum-Slider-input`.
Defaults to `var(--spectrum-slider-input-left)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-font-size": {
+ "value": "var(--spectrum-slider-font-size)",
+ "description": "Used by `.spectrum-Slider-labelContainer`, `.spectrum-Slider-label`.
Defaults to `var(--spectrum-slider-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-Slider-labelContainer`, `.spectrum-Slider-tick .spectrum-Slider-tickLabel`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-label-top-to-text": {
+ "value": "var(--spectrum-slider-label-top-to-text)",
+ "description": "Used by `.spectrum-Slider-labelContainer`.
Defaults to `var(--spectrum-slider-label-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-cjk-line-height": {
+ "value": "var(--spectrum-slider-cjk-line-height)",
+ "description": "Used by `.spectrum-Slider-labelContainer:lang(ja), .spectrum-Slider-labelContainer:lang(ko), .spectrum-Slider-labelContainer:lang(zh)`.
Defaults to `var(--spectrum-slider-cjk-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-label-margin-start": {
+ "value": "var(--spectrum-slider-label-margin-start)",
+ "description": "Used by `.spectrum-Slider-value`.
Defaults to `var(--spectrum-slider-label-margin-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-tick-handle-background-color": {
+ "value": "var(--spectrum-slider-tick-handle-background-color)",
+ "description": "Used by `.spectrum-Slider--tick .spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-tick-handle-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-tick-mark-height": {
+ "value": "var(--spectrum-slider-tick-mark-height)",
+ "description": "Used by `.spectrum-Slider--tick .spectrum-Slider-controls`, `.spectrum-Slider--tick .spectrum-Slider-tickLabel`, `.spectrum-Slider-tick`, `.spectrum-Slider-tick:after`.
Defaults to `var(--spectrum-slider-tick-mark-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-track-thickness": {
+ "value": "var(--spectrum-slider-control-height)",
+ "description": "Used by `.spectrum-Slider--tick .spectrum-Slider-controls`, `.spectrum-Slider-tick`.
Defaults to `var(--spectrum-slider-control-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-ticks-handle-background-color": {
+ "value": "var(--spectrum-slider-ticks-handle-background-color)",
+ "description": "Used by `.spectrum-Slider-ticks ~ .spectrum-Slider-handleContainer .spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-ticks-handle-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-tick-mark-width": {
+ "value": "var(--spectrum-slider-tick-mark-width)",
+ "description": "Used by `.spectrum-Slider-tick, .spectrum-Slider-tick:after`, `.spectrum-Slider-tick:after`, `.spectrum-Slider-tick:first-of-type`, `.spectrum-Slider-tick:last-of-type`.
Defaults to `var(--spectrum-slider-tick-mark-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-tick-mark-border-radius": {
+ "value": "var(--spectrum-slider-tick-mark-border-radius)",
+ "description": "Used by `.spectrum-Slider-tick:after`.
Defaults to `var(--spectrum-slider-tick-mark-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-font-size-75": {
+ "value": "12px",
+ "description": "Used by `.spectrum-Slider-tick .spectrum-Slider-tickLabel`.
Defaults to `var(--spectrum-font-size-75)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-tick-label-color": {
+ "value": "var(--spectrum-slider-tick-label-color)",
+ "description": "Used by `.spectrum-Slider-tick .spectrum-Slider-tickLabel`.
Defaults to `var(--spectrum-slider-tick-label-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-track-color": {
+ "value": "var(--spectrum-slider-track-color)",
+ "description": "Used by `.spectrum-Slider-track:before`, `.spectrum-Slider-track:not(:has(~ .spectrum-Slider-fill)):before`.
Defaults to `var(--spectrum-slider-track-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-label-text-color": {
+ "value": "var(--spectrum-slider-label-text-color)",
+ "description": "Used by `.spectrum-Slider-labelContainer`.
Defaults to `var(--spectrum-slider-label-text-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-track-fill-color": {
+ "value": "var(--spectrum-slider-track-fill-color)",
+ "description": "Used by `.spectrum-Slider--filled .spectrum-Slider-track:first-child:before, .spectrum-Slider-fill:before`, `.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`.
Defaults to `var(--spectrum-slider-track-fill-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-ramp-track-color": {
+ "value": "var(--spectrum-slider-ramp-track-color)",
+ "description": "Used by `.spectrum-Slider-ramp path`.
Defaults to `var(--spectrum-slider-ramp-track-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-handle-border-color": {
+ "value": "var(--spectrum-slider-handle-border-color)",
+ "description": "Used by `.spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-handle-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-handle-background-color": {
+ "value": "var(--spectrum-slider-handle-background-color)",
+ "description": "Used by `.spectrum-Slider-handle`, `.spectrum-Slider-handle.is-dragged`.
Defaults to `var(--spectrum-slider-handle-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-handle-border-color-key-focus": {
+ "value": "var(--spectrum-slider-handle-border-color-key-focus)",
+ "description": "Used by `.spectrum-Slider-handle.is-focused`.
Defaults to `var(--spectrum-slider-handle-border-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-handle-focus-ring-color-key-focus": {
+ "value": "var(--spectrum-slider-handle-focus-ring-color-key-focus)",
+ "description": "Used by `.spectrum-Slider-handle.is-focused:before`.
Defaults to `var(--spectrum-slider-handle-focus-ring-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-handle-border-color-down": {
+ "value": "var(--spectrum-slider-handle-border-color-down)",
+ "description": "Used by `.spectrum-Slider-handle.is-dragged, .spectrum-Slider-handle:active`, `.spectrum-Slider-handle.is-dragged`.
Defaults to `var(--spectrum-slider-handle-border-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-sectrum-slider-ramp-handle-border-color-active": {
+ "value": "var(--spectrum-slider-ramp-handle-border-color-active)",
+ "description": "Used by `.spectrum-Slider--ramp .spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-ramp-handle-border-color-active)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-ramp-handle-background-color": {
+ "value": "var(--highcontrast-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color))",
+ "description": "Used by `.spectrum-Slider--ramp .spectrum-Slider-handle`.
Defaults to `var(--highcontrast-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color))`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-tick-mark-color": {
+ "value": "var(--spectrum-slider-tick-mark-color)",
+ "description": "Used by `.spectrum-Slider-tick:after`.
Defaults to `var(--spectrum-slider-tick-mark-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-label-text-color-disabled": {
+ "value": "var(--spectrum-slider-label-text-color-disabled)",
+ "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-labelContainer, .spectrum-Slider.is-disabled .spectrum-Slider-tickLabel`.
Defaults to `var(--spectrum-slider-label-text-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-handle-border-color-disabled": {
+ "value": "var(--spectrum-slider-handle-border-color-disabled)",
+ "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-handle-border-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-handle-disabled-background-color": {
+ "value": "var(--spectrum-slider-handle-disabled-background-color)",
+ "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-handle-disabled-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-disabled-border-color": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle:active`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:hover`.
Defaults to `var(--spectrum-disabled-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-handle-background-color-disabled": {
+ "value": "var(--spectrum-slider-handle-background-color-disabled)",
+ "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle:active`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:hover`.
Defaults to `var(--spectrum-slider-handle-background-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-handle-border-color-hover": {
+ "value": "var(--spectrum-slider-handle-border-color-hover)",
+ "description": "Used by `.spectrum-Slider-handle:hover`.
Defaults to `var(--spectrum-slider-handle-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-track-color-disabled": {
+ "value": "var(--spectrum-slider-track-color-disabled)",
+ "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-track:before`, `.spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`.
Defaults to `var(--spectrum-slider-track-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-track-fill-color-disabled": {
+ "value": "var(--spectrum-slider-track-fill-color-disabled)",
+ "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-fill:before, .spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before`.
Defaults to `var(--spectrum-slider-track-fill-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-ramp-track-color-disabled": {
+ "value": "var(--spectrum-slider-ramp-track-color-disabled)",
+ "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-ramp path`.
Defaults to `var(--spectrum-slider-ramp-track-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-tick-mark-color-disabled": {
+ "value": "var(--spectrum-slider-tick-mark-color-disabled)",
+ "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-tick:after`.
Defaults to `var(--spectrum-slider-tick-mark-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-slider-font-size": {
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider-labelContainer`, `.spectrum-Slider-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-size": {
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `--spectrum-slider-handle-margin-left`, `--spectrum-slider-controls-margin`, `--spectrum-slider-track-middle-handleoffset`, `--spectrum-slider-input-top-size`, `.spectrum-Slider-handle`, `.spectrum-Slider-handle:before`, `.spectrum-Slider-handle.is-focused:before`, `.spectrum-Slider-input`, `.spectrum-Slider-handleContainer, .spectrum-Slider-trackContainer`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-size-medium": {
+ "value": "16px",
+ "description": "Used by `--spectrum-slider-handle-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-height": {
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider-controls`, `.spectrum-Slider--tick`, `.spectrum-Slider-fill, .spectrum-Slider-track`, `.spectrum-Slider-handle`, `.spectrum-Slider-tick`, `.spectrum-Slider-trackContainer`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-border-width-down": {
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider-handle.is-dragged, .spectrum-Slider-handle:active`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-border-width-down-medium": {
+ "value": "6px",
+ "description": "Used by `--spectrum-slider-handle-border-width-down`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-label-top-to-text": {
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider-labelContainer`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-field-label": {
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider-labelContainer + .spectrum-Slider-controls`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-field-label-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-slider-control-to-field-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-value-side-padding-inline": {
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider--sideLabel .spectrum-Slider-labelContainer .spectrum-Slider-label`, `.spectrum-Slider--sideLabel .spectrum-Slider-value`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-value-inline-size": {
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider--sideLabel .spectrum-Slider-value`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-cjk-line-height": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-labelContainer:lang(ja), .spectrum-Slider-labelContainer:lang(ko), .spectrum-Slider-labelContainer:lang(zh)`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-min-size": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-label-margin-start": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-value`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-border-width": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-margin-left": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `--spectrum-slider-input-left`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-controls-margin": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `--spectrum-slider-track-margin-offset`, `.spectrum-Slider--sideLabel .spectrum-Slider-controls`, `.spectrum-Slider-controls`, `.spectrum-Slider-fill`, `.spectrum-Slider-fill--right`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-track-margin-offset": {
+ "value": "var(--spectrum-slider-track-margin-offset)",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-fill, .spectrum-Slider-track`, `.spectrum-Slider-track ~ .spectrum-Slider-track`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type`, `.spectrum-Slider--range .spectrum-Slider-track:last-of-type`, `.spectrum-Slider-ramp`, `.spectrum-Slider-ticks`.
Defaults to `var(--spectrum-slider-track-margin-offset)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-track-middle-handleoffset": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--range .spectrum-Slider-track ~ .spectrum-Slider-track`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-gap": {
+ "value": "4px",
+ "description": "Used by `--spectrum-slider-track-middle-handleoffset`, `--spectrum-slider-track-handleoffset`, `.spectrum-Slider-fill, .spectrum-Slider-track`, `.spectrum-Slider-fill`, `.spectrum-Slider-fill--right`, `.spectrum-Slider--ramp .spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-handle-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-input-top-size": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-track-fill-thickness": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-fill, .spectrum-Slider-track`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-track-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-slider-track-fill-thickness`, `.spectrum-Slider--tick .spectrum-Slider-controls`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-tick-mark-width": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-tick, .spectrum-Slider-tick:after`, `.spectrum-Slider-tick:after`, `.spectrum-Slider-tick:first-of-type`, `.spectrum-Slider-tick:last-of-type`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-tick-mark-border-radius": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-tick:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-tick-handle-background-color": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--tick .spectrum-Slider-handle`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-track-color-disabled": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-track:before`, `.spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-track-fill-color-disabled": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-fill:before, .spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-border-color-disabled": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-label-text-color": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-labelContainer`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-tick-label-color": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-tick .spectrum-Slider-tickLabel`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-label-text-color-disabled": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-labelContainer, .spectrum-Slider.is-disabled .spectrum-Slider-tickLabel`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-tick-mark-color-disabled": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-tick:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-ramp-handle-border-color-active": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--ramp .spectrum-Slider-handle`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-input-left": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-track-handleoffset": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-track ~ .spectrum-Slider-track`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type`, `.spectrum-Slider--range .spectrum-Slider-track:last-of-type`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-range-track-reset": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-track ~ .spectrum-Slider-track`, `.spectrum-Slider--range .spectrum-Slider-track ~ .spectrum-Slider-track`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type`, `.spectrum-Slider--range .spectrum-Slider-track:last-of-type`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-ramp-track-height": {
+ "description": "Used by `.spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)`, `.spectrum-Slider-ramp`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-size-small": {
+ "value": "14px",
+ "description": "Used by `--spectrum-slider-handle-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-border-width-down-small": {
+ "value": "5px",
+ "description": "Used by `--spectrum-slider-handle-border-width-down`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-field-label-small": {
+ "value": "5px",
+ "description": "Used by `--spectrum-slider-control-to-field-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-size-large": {
+ "value": "18px",
+ "description": "Used by `--spectrum-slider-handle-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-border-width-down-large": {
+ "value": "7px",
+ "description": "Used by `--spectrum-slider-handle-border-width-down`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-field-label-large": {
+ "value": "11px",
+ "description": "Used by `--spectrum-slider-control-to-field-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-size-extra-large": {
+ "value": "20px",
+ "description": "Used by `--spectrum-slider-handle-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-border-width-down-extra-large": {
+ "value": "8px",
+ "description": "Used by `--spectrum-slider-handle-border-width-down`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-field-label-extra-large": {
+ "value": "14px",
+ "description": "Used by `--spectrum-slider-control-to-field-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-track-corner-radius": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-track:first-of-type:before`, `.spectrum-Slider-track:last-of-type:before`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type:before`, `.spectrum-Slider--range .spectrum-Slider-track:last-of-type:before`, `.spectrum-Slider-track ~ .spectrum-Slider-track:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-border-radius": {
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider.spectrum-Slider--sizeM`, `.spectrum-Slider.spectrum-Slider--sizeS`, `.spectrum-Slider.spectrum-Slider--sizeL`, `.spectrum-Slider.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider-handle`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-tick-mark-height": {
+ "description": "Used by `.spectrum-Slider--tick .spectrum-Slider-controls`, `.spectrum-Slider--tick .spectrum-Slider-tickLabel`, `.spectrum-Slider-tick`, `.spectrum-Slider-tick:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-ticks-handle-background-color": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-ticks ~ .spectrum-Slider-handleContainer .spectrum-Slider-handle`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-track-color": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-track:before`, `.spectrum-Slider-track:not(:has(~ .spectrum-Slider-fill)):before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-track-fill-color": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--filled .spectrum-Slider-track:first-child:before, .spectrum-Slider-fill:before`, `.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-ramp-track-color": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-ramp path`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-border-color": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-background-color": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle`, `.spectrum-Slider-handle.is-dragged`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-border-color-key-focus": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle.is-focused`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-focus-ring-color-key-focus": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle.is-focused:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-border-color-down": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle.is-dragged, .spectrum-Slider-handle:active`, `.spectrum-Slider-handle.is-dragged`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-ramp-handle-background-color": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--ramp .spectrum-Slider-handle`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-tick-mark-color": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-tick:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-disabled-background-color": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-background-color-disabled": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle:active`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-border-color-hover": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-ramp-track-color-disabled": {
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-ramp path`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--system-slider-track-color`, `--system-slider-tick-mark-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-700": {
+ "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+ "description": "Used by `--system-slider-track-fill-color`, `--system-slider-handle-border-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-400": {
+ "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+ "description": "Used by `--system-slider-ramp-track-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--system-slider-ramp-track-color-disabled`, `--spectrum-slider-tick-handle-background-color`, `--spectrum-slider-ramp-handle-border-color-active`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-75": {
+ "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+ "description": "Used by `--system-slider-ramp-handle-background-color`, `--system-slider-ticks-handle-background-color`, `--system-slider-handle-disabled-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-800": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Used by `--system-slider-handle-border-color-hover`, `--system-slider-handle-border-color-down`, `--system-slider-handle-border-color-key-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--system-slider-handle-focus-ring-color-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-500": {
+ "value": "8px",
+ "description": "Used by `--system-slider-handle-border-radius`, `--system-slider-size-m-handle-border-radius`, `--system-slider-size-s-handle-border-radius`, `--system-slider-size-l-handle-border-radius`, `--system-slider-size-xl-handle-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-slider-font-size`, `.spectrum-Slider-tick .spectrum-Slider-tickLabel`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-slider-control-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-slider-label-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-slider-value-side-padding-inline`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-slider-cjk-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-900": {
+ "value": "80px",
+ "description": "Used by `--spectrum-slider-min-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `--spectrum-slider-label-margin-start`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-slider-handle-border-width`, `--spectrum-slider-tick-mark-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-background-color": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--spectrum-slider-track-color-disabled`, `--spectrum-slider-track-fill-color-disabled`, `--spectrum-slider-tick-mark-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-border-color": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Used by `--spectrum-slider-handle-border-color-disabled`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:active`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-slider-label-text-color`, `--spectrum-slider-tick-label-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-slider-label-text-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-logical-rotation": {
+ "description": "Defined in `.spectrum-Slider:dir(rtl), [dir=\"rtl\"] .spectrum-Slider`.
Used by `.spectrum-Slider-ramp svg`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-slider-control-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-slider-value-side-padding-inline`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-slider-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-slider-control-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-slider-label-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-slider-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-slider-control-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-slider-label-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `.spectrum-Slider-handle`, `.spectrum-Slider-handle:before`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `.spectrum-Slider-handle.is-focused:before`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-Slider-labelContainer`, `.spectrum-Slider-tick .spectrum-Slider-tickLabel`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-75": {
+ "value": "5px",
+ "description": "Used by `.spectrum-Slider--tick .spectrum-Slider-controls`, `.spectrum-Slider--tick .spectrum-Slider-tickLabel`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `.spectrum-Slider-handle.is-focused:before`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-slider-track-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-track-color`.",
+ "control": "color"
+ },
+ "system-slider-track-fill-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-track-fill-color`.",
+ "control": "color"
+ },
+ "system-slider-ramp-track-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-ramp-track-color`.",
+ "control": "color"
+ },
+ "system-slider-ramp-track-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-ramp-track-color-disabled`.",
+ "control": "color"
+ },
+ "system-slider-handle-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-background-color`.",
+ "control": "color"
+ },
+ "system-slider-handle-background-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-background-color-disabled`.",
+ "control": "color"
+ },
+ "system-slider-ramp-handle-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-ramp-handle-background-color`.",
+ "control": "color"
+ },
+ "system-slider-ticks-handle-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-ticks-handle-background-color`.",
+ "control": "color"
+ },
+ "system-slider-handle-border-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-border-color`.",
+ "control": "color"
+ },
+ "system-slider-handle-disabled-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-disabled-background-color`.",
+ "control": "color"
+ },
+ "system-slider-tick-mark-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-tick-mark-color`.",
+ "control": "color"
+ },
+ "system-slider-handle-border-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-border-color-hover`.",
+ "control": "color"
+ },
+ "system-slider-handle-border-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-border-color-down`.",
+ "control": "color"
+ },
+ "system-slider-handle-border-color-key-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-border-color-key-focus`.",
+ "control": "color"
+ },
+ "system-slider-handle-focus-ring-color-key-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-focus-ring-color-key-focus`.",
+ "control": "color"
+ },
+ "system-slider-track-corner-radius": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-track-corner-radius`.",
+ "control": "text"
+ },
+ "system-slider-handle-border-radius": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-border-radius`.",
+ "control": "text"
+ },
+ "system-slider-size-m-handle-border-radius": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-border-radius`.",
+ "control": "text"
+ },
+ "system-slider-size-s-handle-border-radius": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-border-radius`.",
+ "control": "text"
+ },
+ "system-slider-size-l-handle-border-radius": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-border-radius`.",
+ "control": "text"
+ },
+ "system-slider-size-xl-handle-border-radius": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-border-radius`.",
+ "control": "text"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-slider-label-text-color": {
+ "value": "var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-tick .spectrum-Slider-tickLabel`, `.spectrum-Slider-labelContainer`.
Defaults to `var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-track-color-static": {
+ "value": "var(--mod-slider-track-color, var(--spectrum-slider-track-color))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-track:before`.
Defaults to `var(--mod-slider-track-color, var(--spectrum-slider-track-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-track-color": {
+ "value": "var(--mod-slider-track-color, var(--spectrum-slider-track-color))",
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused, .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active, .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within`, `.spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover`.
Used by `.spectrum-Slider-track:not(:has(~ .spectrum-Slider-fill)):before`.
Defaults to `var(--mod-slider-track-color, var(--spectrum-slider-track-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-filled-track-fill-color": {
+ "value": "var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--filled .spectrum-Slider-track:first-child:before, .spectrum-Slider-fill:before`, `.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`.
Defaults to `var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-ramp-track-color": {
+ "value": "var(--mod-slider-ramp-track-color, var(--spectrum-slider-ramp-track-color))",
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused, .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active, .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within`, `.spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover`.
Used by `.spectrum-Slider-ramp path`.
Defaults to `var(--mod-slider-ramp-track-color, var(--spectrum-slider-ramp-track-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-handle-border-color": {
+ "value": "var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color))",
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused, .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active, .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within`, `.spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover`.
Used by `.spectrum-Slider-handle`.
Defaults to `var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-handle-background-color": {
+ "value": "var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle`, `.spectrum-Slider-handle.is-dragged`.
Defaults to `var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-handle-border-color-key-focus": {
+ "value": "var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle.is-focused`.
Defaults to `var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-handle-focus-ring-color-key-focus": {
+ "value": "var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle.is-focused:before`.
Defaults to `var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-handle-border-color-down": {
+ "value": "var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle.is-dragged, .spectrum-Slider-handle:active`, `.spectrum-Slider-handle.is-dragged`.
Defaults to `var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-ramp-handle-border-color-active": {
+ "value": "var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--ramp .spectrum-Slider-handle`.
Defaults to `var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-ramp-handle-background-color": {
+ "value": "var(--spectrum-slider-ramp-handle-background-color)",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--ramp .spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-ramp-handle-background-color)`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-tick-mark-color": {
+ "value": "var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color))",
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused, .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active, .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within`, `.spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover`.
Used by `.spectrum-Slider-tick:after`.
Defaults to `var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-label-text-color-disabled": {
+ "value": "var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-labelContainer, .spectrum-Slider.is-disabled .spectrum-Slider-tickLabel`.
Defaults to `var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-handle-border-color-disabled": {
+ "value": "var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`.
Defaults to `var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-handle-disabled-background-color": {
+ "value": "var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`.
Defaults to `var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-handle-background-color-disabled": {
+ "value": "var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle:active`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:hover`.
Defaults to `var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-handle-border-color-hover": {
+ "value": "var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle:hover`.
Defaults to `var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-track-color-disabled": {
+ "value": "var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-track:before`, `.spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`.
Defaults to `var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-track-fill-color-disabled": {
+ "value": "var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-fill:before, .spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before`.
Defaults to `var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-ramp-track-color-disabled": {
+ "value": "var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-ramp path`.
Defaults to `var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-tick-mark-color-disabled": {
+ "value": "var(--mod-slider-tick-mark-color-disabled, var(--spectrum-slider-tick-mark-color-disabled))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-tick:after`.
Defaults to `var(--mod-slider-tick-mark-color-disabled, var(--spectrum-slider-tick-mark-color-disabled))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js
index 1d6f5b9d479..e588d77139e 100644
--- a/components/slider/stories/slider.stories.js
+++ b/components/slider/stories/slider.stories.js
@@ -1,11 +1,13 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isFocused, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { SliderGroup } from "./slider.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* A slider allows users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.
*
@@ -146,6 +148,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/splitview/dist/metadata.json b/components/splitview/dist/metadata.json
index 4902e8e2368..0f2b9c60c67 100644
--- a/components/splitview/dist/metadata.json
+++ b/components/splitview/dist/metadata.json
@@ -18,12 +18,6 @@
".spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before",
".spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper",
".spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before",
- ".spectrum-SplitView-splitter.is-draggable.is-active",
- ".spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper",
- ".spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper:before",
- ".spectrum-SplitView-splitter.is-draggable.is-hovered",
- ".spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper",
- ".spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper:before",
".spectrum-SplitView-splitter.is-draggable:active",
".spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper",
".spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper:before",
@@ -33,64 +27,279 @@
".spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper:before",
".spectrum-SplitView-splitter.is-draggable:hover",
".spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper",
- ".spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper:before"
- ],
- "modifiers": [
- "--mod-splitview-background-color",
- "--mod-splitview-content-color",
- "--mod-splitview-gripper-border-radius",
- "--mod-splitview-gripper-border-width-horizontal",
- "--mod-splitview-gripper-border-width-vertical",
- "--mod-splitview-gripper-height",
- "--mod-splitview-gripper-width",
- "--mod-splitview-handle-background-color",
- "--mod-splitview-handle-background-color-down",
- "--mod-splitview-handle-background-color-focus",
- "--mod-splitview-handle-background-color-hover",
- "--mod-splitview-handle-width",
- "--mod-splitview-vertical-gripper-outer-width",
- "--mod-splitview-vertical-gripper-reset",
- "--mod-splitview-vertical-gripper-width",
- "--mod-splitview-vertical-width"
- ],
- "component": [
- "--spectrum-splitview-background-color",
- "--spectrum-splitview-content-color",
- "--spectrum-splitview-gripper-border-radius",
- "--spectrum-splitview-gripper-border-width-horizontal",
- "--spectrum-splitview-gripper-border-width-vertical",
- "--spectrum-splitview-gripper-height",
- "--spectrum-splitview-gripper-width",
- "--spectrum-splitview-handle-background-color",
- "--spectrum-splitview-handle-background-color-down",
- "--spectrum-splitview-handle-background-color-focus",
- "--spectrum-splitview-handle-background-color-hover",
- "--spectrum-splitview-handle-width",
- "--spectrum-splitview-vertical-gripper-outer-width",
- "--spectrum-splitview-vertical-gripper-reset",
- "--spectrum-splitview-vertical-gripper-width",
- "--spectrum-splitview-vertical-width"
- ],
- "global": [
- "--spectrum-body-color",
- "--spectrum-border-width-200",
- "--spectrum-border-width-400",
- "--spectrum-focus-indicator-color",
- "--spectrum-gray-200",
- "--spectrum-gray-400",
- "--spectrum-gray-75",
- "--spectrum-gray-800"
- ],
- "system-theme": [
- "--system-split-view-background-color",
- "--system-split-view-gripper-border-radius",
- "--system-split-view-handle-background-color"
+ ".spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper:before",
+ ".spectrum-SplitView-splitter.is-draggable.is-active",
+ ".spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper",
+ ".spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper:before",
+ ".spectrum-SplitView-splitter.is-draggable.is-hovered",
+ ".spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper",
+ ".spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper:before"
],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-splitview-handle-background-color",
- "--highcontrast-splitview-handle-background-color-down",
- "--highcontrast-splitview-handle-background-color-focus",
- "--highcontrast-splitview-handle-background-color-hover"
- ]
+ "modifiers": {
+ "mod-splitview-background-color": {
+ "value": "var(--spectrum-splitview-background-color)",
+ "description": "Used by `.spectrum-SplitView-pane`.
Defaults to `var(--spectrum-splitview-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-splitview-content-color": {
+ "value": "var(--spectrum-splitview-content-color)",
+ "description": "Used by `.spectrum-SplitView-pane`.
Defaults to `var(--spectrum-splitview-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-splitview-gripper-border-radius": {
+ "value": "var(--spectrum-splitview-gripper-border-radius)",
+ "description": "Used by `.spectrum-SplitView-gripper`.
Defaults to `var(--spectrum-splitview-gripper-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-splitview-handle-background-color": {
+ "value": "var(--spectrum-splitview-handle-background-color)",
+ "description": "Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView-gripper:before`, `.spectrum-SplitView-splitter`.
Defaults to `var(--spectrum-splitview-handle-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-splitview-gripper-width": {
+ "value": "var(--spectrum-splitview-gripper-width)",
+ "description": "Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`.
Defaults to `var(--spectrum-splitview-gripper-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-splitview-gripper-border-width-vertical": {
+ "value": "var(--spectrum-splitview-gripper-border-width-vertical)",
+ "description": "Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`.
Defaults to `var(--spectrum-splitview-gripper-border-width-vertical)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-splitview-gripper-height": {
+ "value": "var(--spectrum-splitview-gripper-height)",
+ "description": "Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`.
Defaults to `var(--spectrum-splitview-gripper-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-splitview-gripper-border-width-horizontal": {
+ "value": "var(--spectrum-splitview-gripper-border-width-horizontal)",
+ "description": "Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`.
Defaults to `var(--spectrum-splitview-gripper-border-width-horizontal)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-splitview-handle-width": {
+ "value": "var(--spectrum-splitview-handle-width)",
+ "description": "Used by `.spectrum-SplitView-splitter`, `.spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`.
Defaults to `var(--spectrum-splitview-handle-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-splitview-handle-background-color-hover": {
+ "value": "var(--spectrum-splitview-handle-background-color-hover)",
+ "description": "Used by `.spectrum-SplitView-splitter.is-draggable.is-hovered`, `.spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper:before`, `.spectrum-SplitView-splitter.is-draggable:hover`, `.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper:before`.
Defaults to `var(--spectrum-splitview-handle-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-splitview-handle-background-color-down": {
+ "value": "var(--spectrum-splitview-handle-background-color-down)",
+ "description": "Used by `.spectrum-SplitView-splitter.is-draggable.is-active, .spectrum-SplitView-splitter.is-draggable:active`, `.spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper, .spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper:before, .spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper:before`.
Defaults to `var(--spectrum-splitview-handle-background-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-splitview-handle-background-color-focus": {
+ "value": "var(--spectrum-splitview-handle-background-color-focus)",
+ "description": "Used by `.spectrum-SplitView-splitter.is-draggable:focus-visible`, `.spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper:before`.
Defaults to `var(--spectrum-splitview-handle-background-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-splitview-vertical-width": {
+ "value": "var(--spectrum-splitview-vertical-width)",
+ "description": "Used by `.spectrum-SplitView--vertical .spectrum-SplitView-pane`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter`.
Defaults to `var(--spectrum-splitview-vertical-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-splitview-vertical-gripper-width": {
+ "value": "var(--spectrum-splitview-vertical-gripper-width)",
+ "description": "Used by `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`.
Defaults to `var(--spectrum-splitview-vertical-gripper-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-splitview-vertical-gripper-reset": {
+ "value": "var(--spectrum-splitview-vertical-gripper-reset)",
+ "description": "Used by `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper`.
Defaults to `var(--spectrum-splitview-vertical-gripper-reset)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-splitview-vertical-gripper-outer-width": {
+ "value": "var(--spectrum-splitview-vertical-gripper-outer-width)",
+ "description": "Used by `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`.
Defaults to `var(--spectrum-splitview-vertical-gripper-outer-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-splitview-vertical-width": {
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView--vertical .spectrum-SplitView-pane`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-splitview-vertical-gripper-width": {
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-splitview-vertical-gripper-outer-width": {
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-splitview-vertical-gripper-reset": {
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-splitview-content-color": {
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-pane`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-splitview-handle-background-color-hover": {
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-splitter.is-draggable.is-hovered`, `.spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper:before`, `.spectrum-SplitView-splitter.is-draggable:hover`, `.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-splitview-handle-background-color-down": {
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-splitter.is-draggable.is-active, .spectrum-SplitView-splitter.is-draggable:active`, `.spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper, .spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper:before, .spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-splitview-handle-background-color-focus": {
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-splitter.is-draggable:focus-visible`, `.spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-splitview-handle-width": {
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-splitter`, `.spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-splitview-gripper-width": {
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-splitview-gripper-height": {
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-splitview-gripper-border-width-horizontal": {
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-splitview-gripper-border-width-vertical": {
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-splitview-background-color": {
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-pane`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-splitview-gripper-border-radius": {
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-gripper`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-splitview-handle-background-color": {
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView-gripper:before`, `.spectrum-SplitView-splitter`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-75": {
+ "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+ "description": "Used by `--system-split-view-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--system-split-view-handle-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-splitview-content-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-400": {
+ "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+ "description": "Used by `--spectrum-splitview-handle-background-color-hover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-800": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Used by `--spectrum-splitview-handle-background-color-down`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-splitview-handle-background-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-splitview-handle-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-400": {
+ "value": "4px",
+ "description": "Used by `--spectrum-splitview-gripper-width`, `--spectrum-splitview-gripper-border-width-vertical`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-split-view-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-splitview-background-color`.",
+ "control": "color"
+ },
+ "system-split-view-handle-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-splitview-handle-background-color`.",
+ "control": "color"
+ },
+ "system-split-view-gripper-border-radius": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-splitview-gripper-border-radius`.",
+ "control": "text"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-splitview-handle-background-color": {
+ "value": "var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color))",
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView-gripper:before`, `.spectrum-SplitView-splitter`.
Defaults to `var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-splitview-handle-background-color-hover": {
+ "value": "var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))",
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-splitter.is-draggable.is-hovered`, `.spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper:before`, `.spectrum-SplitView-splitter.is-draggable:hover`, `.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper:before`.
Defaults to `var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-splitview-handle-background-color-down": {
+ "value": "var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down))",
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-splitter.is-draggable.is-active, .spectrum-SplitView-splitter.is-draggable:active`, `.spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper, .spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper:before, .spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper:before`.
Defaults to `var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-splitview-handle-background-color-focus": {
+ "value": "var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))",
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-splitter.is-draggable:focus-visible`, `.spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper:before`.
Defaults to `var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/splitview/stories/splitview.stories.js b/components/splitview/stories/splitview.stories.js
index 1c615f12b97..a3c2e1da1f7 100644
--- a/components/splitview/stories/splitview.stories.js
+++ b/components/splitview/stories/splitview.stories.js
@@ -1,10 +1,12 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isFocused } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { SplitViewGroup } from "./splitview.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
export default {
title: "Split view",
component: "SplitView",
@@ -81,6 +83,7 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/statuslight/dist/metadata.json b/components/statuslight/dist/metadata.json
index 7c7c6a7587f..fa04234d6c0 100644
--- a/components/statuslight/dist/metadata.json
+++ b/components/statuslight/dist/metadata.json
@@ -32,138 +32,721 @@
".spectrum-StatusLight:lang(ko)",
".spectrum-StatusLight:lang(zh)"
],
- "modifiers": [
- "--mod-statuslight-border-width",
- "--mod-statuslight-content-color-default",
- "--mod-statuslight-corner-radius",
- "--mod-statuslight-dot-size",
- "--mod-statuslight-font-size",
- "--mod-statuslight-font-weight",
- "--mod-statuslight-height",
- "--mod-statuslight-line-height",
- "--mod-statuslight-line-height-cjk",
- "--mod-statuslight-nonsemantic-blue-color",
- "--mod-statuslight-nonsemantic-celery-color",
- "--mod-statuslight-nonsemantic-chartreuse-color",
- "--mod-statuslight-nonsemantic-cyan-color",
- "--mod-statuslight-nonsemantic-fuchsia-color",
- "--mod-statuslight-nonsemantic-gray-color",
- "--mod-statuslight-nonsemantic-green-color",
- "--mod-statuslight-nonsemantic-indigo-color",
- "--mod-statuslight-nonsemantic-magenta-color",
- "--mod-statuslight-nonsemantic-orange-color",
- "--mod-statuslight-nonsemantic-purple-color",
- "--mod-statuslight-nonsemantic-red-color",
- "--mod-statuslight-nonsemantic-seafoam-color",
- "--mod-statuslight-nonsemantic-yellow-color",
- "--mod-statuslight-semantic-accent-color",
- "--mod-statuslight-semantic-info-color",
- "--mod-statuslight-semantic-negative-color",
- "--mod-statuslight-semantic-neutral-color",
- "--mod-statuslight-semantic-notice-color",
- "--mod-statuslight-semantic-positive-color",
- "--mod-statuslight-spacing-bottom-to-label",
- "--mod-statuslight-spacing-dot-to-label",
- "--mod-statuslight-spacing-top-to-dot",
- "--mod-statuslight-spacing-top-to-label",
- "--mod-statuslight-subdued-content-color-default"
- ],
- "component": [
- "--spectrum-status-light-dot-size-extra-large",
- "--spectrum-status-light-dot-size-large",
- "--spectrum-status-light-dot-size-medium",
- "--spectrum-status-light-dot-size-small",
- "--spectrum-status-light-top-to-dot-extra-large",
- "--spectrum-status-light-top-to-dot-large",
- "--spectrum-status-light-top-to-dot-medium",
- "--spectrum-status-light-top-to-dot-small",
- "--spectrum-statuslight-border-width",
- "--spectrum-statuslight-content-color-default",
- "--spectrum-statuslight-corner-radius",
- "--spectrum-statuslight-dot-size",
- "--spectrum-statuslight-font-size",
- "--spectrum-statuslight-font-weight",
- "--spectrum-statuslight-height",
- "--spectrum-statuslight-line-height",
- "--spectrum-statuslight-line-height-cjk",
- "--spectrum-statuslight-nonsemantic-blue-color",
- "--spectrum-statuslight-nonsemantic-celery-color",
- "--spectrum-statuslight-nonsemantic-chartreuse-color",
- "--spectrum-statuslight-nonsemantic-cyan-color",
- "--spectrum-statuslight-nonsemantic-fuchsia-color",
- "--spectrum-statuslight-nonsemantic-gray-color",
- "--spectrum-statuslight-nonsemantic-green-color",
- "--spectrum-statuslight-nonsemantic-indigo-color",
- "--spectrum-statuslight-nonsemantic-magenta-color",
- "--spectrum-statuslight-nonsemantic-orange-color",
- "--spectrum-statuslight-nonsemantic-purple-color",
- "--spectrum-statuslight-nonsemantic-red-color",
- "--spectrum-statuslight-nonsemantic-seafoam-color",
- "--spectrum-statuslight-nonsemantic-yellow-color",
- "--spectrum-statuslight-semantic-accent-color",
- "--spectrum-statuslight-semantic-info-color",
- "--spectrum-statuslight-semantic-negative-color",
- "--spectrum-statuslight-semantic-neutral-color",
- "--spectrum-statuslight-semantic-notice-color",
- "--spectrum-statuslight-semantic-positive-color",
- "--spectrum-statuslight-spacing-bottom-to-label",
- "--spectrum-statuslight-spacing-computed-top-to-dot",
- "--spectrum-statuslight-spacing-dot-to-label",
- "--spectrum-statuslight-spacing-top-to-dot",
- "--spectrum-statuslight-spacing-top-to-label",
- "--spectrum-statuslight-subdued-content-color-default"
- ],
- "global": [
- "--spectrum-accent-visual-color",
- "--spectrum-blue-visual-color",
- "--spectrum-border-width-100",
- "--spectrum-celery-visual-color",
- "--spectrum-chartreuse-visual-color",
- "--spectrum-cjk-line-height-100",
- "--spectrum-component-bottom-to-text-100",
- "--spectrum-component-bottom-to-text-200",
- "--spectrum-component-bottom-to-text-300",
- "--spectrum-component-bottom-to-text-75",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-75",
- "--spectrum-component-top-to-text-100",
- "--spectrum-component-top-to-text-200",
- "--spectrum-component-top-to-text-300",
- "--spectrum-component-top-to-text-75",
- "--spectrum-cyan-visual-color",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-300",
- "--spectrum-font-size-75",
- "--spectrum-fuchsia-visual-color",
- "--spectrum-gray-visual-color",
- "--spectrum-green-visual-color",
- "--spectrum-indigo-visual-color",
- "--spectrum-informative-visual-color",
- "--spectrum-line-height-100",
- "--spectrum-magenta-visual-color",
- "--spectrum-negative-visual-color",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-subdued-content-color-default",
- "--spectrum-neutral-visual-color",
- "--spectrum-notice-visual-color",
- "--spectrum-orange-visual-color",
- "--spectrum-positive-visual-color",
- "--spectrum-purple-visual-color",
- "--spectrum-red-visual-color",
- "--spectrum-seafoam-visual-color",
- "--spectrum-text-to-visual-100",
- "--spectrum-text-to-visual-200",
- "--spectrum-text-to-visual-300",
- "--spectrum-text-to-visual-75",
- "--spectrum-yellow-visual-color"
- ],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-statuslight-content-color-default",
- "--highcontrast-statuslight-subdued-content-color-default"
- ]
+ "modifiers": {
+ "mod-statuslight-height": {
+ "value": "var(--spectrum-statuslight-height)",
+ "description": "Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-statuslight-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-statuslight-spacing-top-to-label": {
+ "value": "var(--spectrum-statuslight-spacing-top-to-label)",
+ "description": "Used by `.spectrum-StatusLight`, `--spectrum-statuslight-spacing-computed-top-to-dot`.
Defaults to `var(--spectrum-statuslight-spacing-top-to-label)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-statuslight-spacing-bottom-to-label": {
+ "value": "var(--spectrum-statuslight-spacing-bottom-to-label)",
+ "description": "Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-statuslight-spacing-bottom-to-label)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-statuslight-font-size": {
+ "value": "var(--spectrum-statuslight-font-size)",
+ "description": "Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-statuslight-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-statuslight-font-weight": {
+ "value": "var(--spectrum-statuslight-font-weight)",
+ "description": "Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-statuslight-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-statuslight-line-height": {
+ "value": "var(--spectrum-statuslight-line-height)",
+ "description": "Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-statuslight-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-statuslight-content-color-default": {
+ "value": "var(--spectrum-statuslight-content-color-default)",
+ "description": "Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-statuslight-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-line-height-cjk": {
+ "value": "var(--spectrum-statuslight-line-height-cjk)",
+ "description": "Used by `.spectrum-StatusLight:lang(ja), .spectrum-StatusLight:lang(ko), .spectrum-StatusLight:lang(zh)`.
Defaults to `var(--spectrum-statuslight-line-height-cjk)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-statuslight-spacing-top-to-dot": {
+ "value": "var(--spectrum-statuslight-spacing-top-to-dot)",
+ "description": "Used by `--spectrum-statuslight-spacing-computed-top-to-dot`.
Defaults to `var(--spectrum-statuslight-spacing-top-to-dot)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-statuslight-dot-size": {
+ "value": "var(--spectrum-statuslight-dot-size)",
+ "description": "Used by `.spectrum-StatusLight:before`.
Defaults to `var(--spectrum-statuslight-dot-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-statuslight-corner-radius": {
+ "value": "var(--spectrum-statuslight-corner-radius)",
+ "description": "Used by `.spectrum-StatusLight:before`.
Defaults to `var(--spectrum-statuslight-corner-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-statuslight-spacing-dot-to-label": {
+ "value": "var(--spectrum-statuslight-spacing-dot-to-label)",
+ "description": "Used by `.spectrum-StatusLight:before`.
Defaults to `var(--spectrum-statuslight-spacing-dot-to-label)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-statuslight-subdued-content-color-default": {
+ "value": "var(--spectrum-statuslight-subdued-content-color-default)",
+ "description": "Used by `.spectrum-StatusLight--neutral`.
Defaults to `var(--spectrum-statuslight-subdued-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-semantic-neutral-color": {
+ "value": "var(--spectrum-statuslight-semantic-neutral-color)",
+ "description": "Used by `.spectrum-StatusLight--neutral:before`.
Defaults to `var(--spectrum-statuslight-semantic-neutral-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-semantic-accent-color": {
+ "value": "var(--spectrum-statuslight-semantic-accent-color)",
+ "description": "Used by `.spectrum-StatusLight--accent:before`.
Defaults to `var(--spectrum-statuslight-semantic-accent-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-semantic-info-color": {
+ "value": "var(--spectrum-statuslight-semantic-info-color)",
+ "description": "Used by `.spectrum-StatusLight--info:before`.
Defaults to `var(--spectrum-statuslight-semantic-info-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-semantic-negative-color": {
+ "value": "var(--spectrum-statuslight-semantic-negative-color)",
+ "description": "Used by `.spectrum-StatusLight--negative:before`.
Defaults to `var(--spectrum-statuslight-semantic-negative-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-semantic-notice-color": {
+ "value": "var(--spectrum-statuslight-semantic-notice-color)",
+ "description": "Used by `.spectrum-StatusLight--notice:before`.
Defaults to `var(--spectrum-statuslight-semantic-notice-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-semantic-positive-color": {
+ "value": "var(--spectrum-statuslight-semantic-positive-color)",
+ "description": "Used by `.spectrum-StatusLight--positive:before`.
Defaults to `var(--spectrum-statuslight-semantic-positive-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-nonsemantic-gray-color": {
+ "value": "var(--spectrum-statuslight-nonsemantic-gray-color)",
+ "description": "Used by `.spectrum-StatusLight--gray:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-gray-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-nonsemantic-red-color": {
+ "value": "var(--spectrum-statuslight-nonsemantic-red-color)",
+ "description": "Used by `.spectrum-StatusLight--red:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-red-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-nonsemantic-orange-color": {
+ "value": "var(--spectrum-statuslight-nonsemantic-orange-color)",
+ "description": "Used by `.spectrum-StatusLight--orange:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-orange-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-nonsemantic-yellow-color": {
+ "value": "var(--spectrum-statuslight-nonsemantic-yellow-color)",
+ "description": "Used by `.spectrum-StatusLight--yellow:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-yellow-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-nonsemantic-chartreuse-color": {
+ "value": "var(--spectrum-statuslight-nonsemantic-chartreuse-color)",
+ "description": "Used by `.spectrum-StatusLight--chartreuse:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-chartreuse-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-nonsemantic-celery-color": {
+ "value": "var(--spectrum-statuslight-nonsemantic-celery-color)",
+ "description": "Used by `.spectrum-StatusLight--celery:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-celery-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-nonsemantic-green-color": {
+ "value": "var(--spectrum-statuslight-nonsemantic-green-color)",
+ "description": "Used by `.spectrum-StatusLight--green:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-green-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-nonsemantic-seafoam-color": {
+ "value": "var(--spectrum-statuslight-nonsemantic-seafoam-color)",
+ "description": "Used by `.spectrum-StatusLight--seafoam:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-seafoam-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-nonsemantic-cyan-color": {
+ "value": "var(--spectrum-statuslight-nonsemantic-cyan-color)",
+ "description": "Used by `.spectrum-StatusLight--cyan:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-cyan-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-nonsemantic-blue-color": {
+ "value": "var(--spectrum-statuslight-nonsemantic-blue-color)",
+ "description": "Used by `.spectrum-StatusLight--blue:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-blue-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-nonsemantic-indigo-color": {
+ "value": "var(--spectrum-statuslight-nonsemantic-indigo-color)",
+ "description": "Used by `.spectrum-StatusLight--indigo:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-indigo-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-nonsemantic-purple-color": {
+ "value": "var(--spectrum-statuslight-nonsemantic-purple-color)",
+ "description": "Used by `.spectrum-StatusLight--purple:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-purple-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-nonsemantic-fuchsia-color": {
+ "value": "var(--spectrum-statuslight-nonsemantic-fuchsia-color)",
+ "description": "Used by `.spectrum-StatusLight--fuchsia:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-fuchsia-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-nonsemantic-magenta-color": {
+ "value": "var(--spectrum-statuslight-nonsemantic-magenta-color)",
+ "description": "Used by `.spectrum-StatusLight--magenta:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-magenta-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-border-width": {
+ "value": "var(--spectrum-statuslight-border-width)",
+ "description": "Used by `.spectrum-StatusLight:before`.
Defaults to `var(--spectrum-statuslight-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-statuslight-height": {
+ "description": "Defined in `.spectrum-StatusLight, .spectrum-StatusLight--sizeM`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`.
Used by `.spectrum-StatusLight`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-dot-size": {
+ "description": "Defined in `.spectrum-StatusLight, .spectrum-StatusLight--sizeM`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`.
Used by `.spectrum-StatusLight:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-status-light-dot-size-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-statuslight-dot-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-font-size": {
+ "description": "Defined in `.spectrum-StatusLight, .spectrum-StatusLight--sizeM`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`.
Used by `.spectrum-StatusLight`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-spacing-dot-to-label": {
+ "description": "Defined in `.spectrum-StatusLight, .spectrum-StatusLight--sizeM`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`.
Used by `.spectrum-StatusLight:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-spacing-top-to-dot": {
+ "description": "Defined in `.spectrum-StatusLight, .spectrum-StatusLight--sizeM`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`.
Used by `--spectrum-statuslight-spacing-computed-top-to-dot`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-status-light-top-to-dot-medium": {
+ "value": "12px",
+ "description": "Used by `--spectrum-statuslight-spacing-top-to-dot`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-spacing-top-to-label": {
+ "description": "Defined in `.spectrum-StatusLight, .spectrum-StatusLight--sizeM`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`.
Used by `.spectrum-StatusLight`, `--spectrum-statuslight-spacing-computed-top-to-dot`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-spacing-bottom-to-label": {
+ "description": "Defined in `.spectrum-StatusLight, .spectrum-StatusLight--sizeM`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`.
Used by `.spectrum-StatusLight`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-status-light-dot-size-small": {
+ "value": "8px",
+ "description": "Used by `--spectrum-statuslight-dot-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-status-light-top-to-dot-small": {
+ "value": "8px",
+ "description": "Used by `--spectrum-statuslight-spacing-top-to-dot`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-status-light-dot-size-large": {
+ "value": "10px",
+ "description": "Used by `--spectrum-statuslight-dot-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-status-light-top-to-dot-large": {
+ "value": "15px",
+ "description": "Used by `--spectrum-statuslight-spacing-top-to-dot`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-status-light-dot-size-extra-large": {
+ "value": "10px",
+ "description": "Used by `--spectrum-statuslight-dot-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-status-light-top-to-dot-extra-large": {
+ "value": "19px",
+ "description": "Used by `--spectrum-statuslight-spacing-top-to-dot`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-corner-radius": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-font-weight": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-border-width": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-line-height": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-line-height-cjk": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight:lang(ja), .spectrum-StatusLight:lang(ko), .spectrum-StatusLight:lang(zh)`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-content-color-default": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-subdued-content-color-default": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--neutral`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-semantic-neutral-color": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--neutral:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-semantic-accent-color": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--accent:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-semantic-negative-color": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--negative:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-semantic-info-color": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--info:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-semantic-notice-color": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--notice:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-semantic-positive-color": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--positive:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-gray-color": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--gray:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-red-color": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--red:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-orange-color": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--orange:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-yellow-color": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--yellow:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-chartreuse-color": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--chartreuse:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-celery-color": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--celery:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-green-color": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--green:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-seafoam-color": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--seafoam:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-cyan-color": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--cyan:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-blue-color": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--blue:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-indigo-color": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--indigo:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-purple-color": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--purple:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-fuchsia-color": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--fuchsia:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-magenta-color": {
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--magenta:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-spacing-computed-top-to-dot": {
+ "description": "Defined in `.spectrum-StatusLight:before`.
Used by `.spectrum-StatusLight:before`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-statuslight-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-statuslight-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-statuslight-spacing-dot-to-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-statuslight-spacing-top-to-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-100": {
+ "value": "9px",
+ "description": "Used by `--spectrum-statuslight-spacing-bottom-to-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-statuslight-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-statuslight-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-statuslight-spacing-dot-to-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-statuslight-spacing-top-to-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-statuslight-spacing-bottom-to-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-statuslight-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-statuslight-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-200": {
+ "value": "7px",
+ "description": "Used by `--spectrum-statuslight-spacing-dot-to-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-statuslight-spacing-top-to-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-200": {
+ "value": "11px",
+ "description": "Used by `--spectrum-statuslight-spacing-bottom-to-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-statuslight-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-statuslight-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-300": {
+ "value": "8px",
+ "description": "Used by `--spectrum-statuslight-spacing-dot-to-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-300": {
+ "value": "12px",
+ "description": "Used by `--spectrum-statuslight-spacing-top-to-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-statuslight-spacing-bottom-to-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--spectrum-statuslight-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-statuslight-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-statuslight-line-height-cjk`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-statuslight-content-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Used by `--spectrum-statuslight-subdued-content-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-visual-color": {
+ "value": "var(--spectrum-gray-600)",
+ "description": "Used by `--spectrum-statuslight-semantic-neutral-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-visual-color": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--spectrum-statuslight-semantic-accent-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-visual-color": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Used by `--spectrum-statuslight-semantic-negative-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-informative-visual-color": {
+ "value": "var(--spectrum-informative-color-900)",
+ "description": "Used by `--spectrum-statuslight-semantic-info-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-notice-visual-color": {
+ "value": "var(--spectrum-notice-color-900)",
+ "description": "Used by `--spectrum-statuslight-semantic-notice-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-positive-visual-color": {
+ "value": "var(--spectrum-positive-color-900)",
+ "description": "Used by `--spectrum-statuslight-semantic-positive-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-visual-color": {
+ "value": "var(--spectrum-gray-600)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-gray-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-red-visual-color": {
+ "value": "var(--spectrum-red-700)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-red-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-orange-visual-color": {
+ "value": "var(--spectrum-orange-900)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-orange-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-yellow-visual-color": {
+ "value": "var(--spectrum-yellow-1100)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-yellow-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-chartreuse-visual-color": {
+ "value": "var(--spectrum-chartreuse-900)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-chartreuse-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-celery-visual-color": {
+ "value": "var(--spectrum-celery-800)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-celery-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-green-visual-color": {
+ "value": "var(--spectrum-green-800)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-green-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-seafoam-visual-color": {
+ "value": "var(--spectrum-seafoam-800)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-seafoam-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-cyan-visual-color": {
+ "value": "var(--spectrum-cyan-900)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-cyan-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-blue-visual-color": {
+ "value": "var(--spectrum-blue-900)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-blue-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-indigo-visual-color": {
+ "value": "var(--spectrum-indigo-900)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-indigo-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-purple-visual-color": {
+ "value": "var(--spectrum-purple-900)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-purple-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-fuchsia-visual-color": {
+ "value": "var(--spectrum-fuchsia-900)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-fuchsia-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-magenta-visual-color": {
+ "value": "var(--spectrum-magenta-900)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-magenta-color`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-statuslight-content-color-default": {
+ "value": "var(--mod-statuslight-content-color-default, var(--spectrum-statuslight-content-color-default))",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight`.
Defaults to `var(--mod-statuslight-content-color-default, var(--spectrum-statuslight-content-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-statuslight-subdued-content-color-default": {
+ "value": "var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default))",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--neutral`.
Defaults to `var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/statuslight/stories/statuslight.stories.js b/components/statuslight/stories/statuslight.stories.js
index b385bcc9da3..7a29bc03b32 100644
--- a/components/statuslight/stories/statuslight.stories.js
+++ b/components/statuslight/stories/statuslight.stories.js
@@ -1,11 +1,13 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { StatusLightGroup } from "./statuslight.test.js";
import { NonsemanticGroup, SemanticGroup, Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* Status lights describe the condition of an entity. They can be used to convey semantic meaning, such as statuses and categories.
*/
@@ -71,6 +73,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/steplist/dist/metadata.json b/components/steplist/dist/metadata.json
index 3e4e5dc0bed..f29e2b34b45 100644
--- a/components/steplist/dist/metadata.json
+++ b/components/steplist/dist/metadata.json
@@ -3,8 +3,8 @@
"selectors": [
".spectrum-Steplist",
".spectrum-Steplist--interactive .spectrum-Steplist-item :focus .spectrum-Steplist-marker",
- ".spectrum-Steplist--interactive .spectrum-Steplist-item.is-focused .spectrum-Steplist-marker",
".spectrum-Steplist--interactive .spectrum-Steplist-item:focus .spectrum-Steplist-marker",
+ ".spectrum-Steplist--interactive .spectrum-Steplist-item.is-focused .spectrum-Steplist-marker",
".spectrum-Steplist--interactive .spectrum-Steplist-label",
".spectrum-Steplist--interactive .spectrum-Steplist-markerContainer",
".spectrum-Steplist--small",
@@ -15,15 +15,6 @@
".spectrum-Steplist--small .spectrum-Steplist-item:last-child",
".spectrum-Steplist--small .spectrum-Steplist-item:last-child .spectrum-Steplist-markerContainer",
".spectrum-Steplist-item",
- ".spectrum-Steplist-item.is-complete + .spectrum-Steplist-item .spectrum-Steplist-segment",
- ".spectrum-Steplist-item.is-complete .spectrum-Steplist-label",
- ".spectrum-Steplist-item.is-complete .spectrum-Steplist-marker",
- ".spectrum-Steplist-item.is-complete .spectrum-Steplist-segment",
- ".spectrum-Steplist-item.is-selected .spectrum-Steplist-label",
- ".spectrum-Steplist-item.is-selected .spectrum-Steplist-marker",
- ".spectrum-Steplist-item.is-selected .spectrum-Steplist-segment",
- ".spectrum-Steplist-item.is-selected :focus",
- ".spectrum-Steplist-item.is-selected:focus",
".spectrum-Steplist-item:first-child",
".spectrum-Steplist-item:first-child .spectrum-Steplist-label",
".spectrum-Steplist-item:first-child .spectrum-Steplist-markerContainer",
@@ -36,6 +27,15 @@
".spectrum-Steplist-item:only-child .spectrum-Steplist-label",
".spectrum-Steplist-item:only-child .spectrum-Steplist-label:dir(rtl)",
".spectrum-Steplist-item:only-child .spectrum-Steplist-markerContainer",
+ ".spectrum-Steplist-item.is-complete .spectrum-Steplist-label",
+ ".spectrum-Steplist-item.is-complete .spectrum-Steplist-marker",
+ ".spectrum-Steplist-item.is-complete .spectrum-Steplist-segment",
+ ".spectrum-Steplist-item.is-complete + .spectrum-Steplist-item .spectrum-Steplist-segment",
+ ".spectrum-Steplist-item.is-selected :focus",
+ ".spectrum-Steplist-item.is-selected .spectrum-Steplist-label",
+ ".spectrum-Steplist-item.is-selected .spectrum-Steplist-marker",
+ ".spectrum-Steplist-item.is-selected .spectrum-Steplist-segment",
+ ".spectrum-Steplist-item.is-selected:focus",
".spectrum-Steplist-label",
".spectrum-Steplist-label:dir(rtl)",
".spectrum-Steplist-marker",
@@ -45,60 +45,260 @@
"[dir=\"rtl\"] .spectrum-Steplist-item:only-child .spectrum-Steplist-label",
"[dir=\"rtl\"] .spectrum-Steplist-label"
],
- "modifiers": [
- "--mod-steplist-complete-label-text-color",
- "--mod-steplist-complete-marker-background-color",
- "--mod-steplist-complete-segment-border-block-end-color",
- "--mod-steplist-current-label-text-color",
- "--mod-steplist-current-marker-color",
- "--mod-steplist-current-marker-color-key-focus",
- "--mod-steplist-incomplete-label-color",
- "--mod-steplist-incomplete-marker-border-color",
- "--mod-steplist-incomplete-segment-border-block-end-color",
- "--mod-steplist-label-labelOffset",
- "--mod-steplist-label-text-size",
- "--mod-steplist-marker-diameter",
- "--mod-steplist-marker-hitArea",
- "--mod-steplist-segment-height",
- "--mod-steplist-sidePadding",
- "--mod-steplist-small-topPadding",
- "--mod-steplist-step-width",
- "--mod-steplist-topPadding"
- ],
- "component": [
- "--spectrum-steplist-complete-label-text-color",
- "--spectrum-steplist-complete-marker-background-color",
- "--spectrum-steplist-complete-segment-border-block-end-color",
- "--spectrum-steplist-current-label-text-color",
- "--spectrum-steplist-current-marker-color",
- "--spectrum-steplist-current-marker-color-key-focus",
- "--spectrum-steplist-incomplete-label-color",
- "--spectrum-steplist-incomplete-marker-border-color",
- "--spectrum-steplist-incomplete-segment-border-block-end-color",
- "--spectrum-steplist-label-labelOffset",
- "--spectrum-steplist-label-text-size",
- "--spectrum-steplist-marker-diameter",
- "--spectrum-steplist-marker-hitArea",
- "--spectrum-steplist-segment-height",
- "--spectrum-steplist-sidePadding",
- "--spectrum-steplist-small-topPadding",
- "--spectrum-steplist-step-width",
- "--spectrum-steplist-topPadding"
- ],
- "global": [
- "--spectrum-gray-200",
- "--spectrum-gray-600",
- "--spectrum-gray-700",
- "--spectrum-gray-800"
- ],
- "system-theme": [
- "--system-steplist-incomplete-marker-border-color",
- "--system-steplist-incomplete-segment-border-block-end-color"
- ],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-steplist-complete-marker-background-color",
- "--highcontrast-steplist-current-marker-color",
- "--highcontrast-steplist-current-marker-color-key-focus"
- ]
+ "modifiers": {
+ "mod-steplist-topPadding": {
+ "value": "var(--spectrum-steplist-topPadding)",
+ "description": "Used by `.spectrum-Steplist`.
Defaults to `var(--spectrum-steplist-topPadding)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-steplist-sidePadding": {
+ "value": "var(--spectrum-steplist-sidePadding)",
+ "description": "Used by `.spectrum-Steplist`.
Defaults to `var(--spectrum-steplist-sidePadding)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-steplist-current-marker-color-key-focus": {
+ "value": "var(--spectrum-steplist-current-marker-color-key-focus)",
+ "description": "Used by `.spectrum-Steplist--interactive .spectrum-Steplist-item :focus .spectrum-Steplist-marker, .spectrum-Steplist--interactive .spectrum-Steplist-item.is-focused .spectrum-Steplist-marker, .spectrum-Steplist--interactive .spectrum-Steplist-item:focus .spectrum-Steplist-marker`.
Defaults to `var(--spectrum-steplist-current-marker-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-steplist-small-topPadding": {
+ "value": "var(--spectrum-steplist-small-topPadding)",
+ "description": "Used by `.spectrum-Steplist--small`.
Defaults to `var(--spectrum-steplist-small-topPadding)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-steplist-step-width": {
+ "value": "var(--spectrum-steplist-step-width)",
+ "description": "Used by `.spectrum-Steplist-item`, `.spectrum-Steplist-label`, `.spectrum-Steplist-segment`, `.spectrum-Steplist-item:first-child, .spectrum-Steplist-item:last-child`.
Defaults to `var(--spectrum-steplist-step-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-steplist-complete-label-text-color": {
+ "value": "var(--spectrum-steplist-complete-label-text-color)",
+ "description": "Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-label`.
Defaults to `var(--spectrum-steplist-complete-label-text-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-steplist-complete-marker-background-color": {
+ "value": "var(--spectrum-steplist-complete-marker-background-color)",
+ "description": "Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-marker`.
Defaults to `var(--spectrum-steplist-complete-marker-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-steplist-segment-height": {
+ "value": "var(--spectrum-steplist-segment-height)",
+ "description": "Used by `.spectrum-Steplist-item.is-complete + .spectrum-Steplist-item .spectrum-Steplist-segment`, `.spectrum-Steplist-segment`.
Defaults to `var(--spectrum-steplist-segment-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-steplist-current-label-text-color": {
+ "value": "var(--spectrum-steplist-current-label-text-color)",
+ "description": "Used by `.spectrum-Steplist-item.is-selected .spectrum-Steplist-label`.
Defaults to `var(--spectrum-steplist-current-label-text-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-steplist-current-marker-color": {
+ "value": "var(--spectrum-steplist-current-marker-color)",
+ "description": "Used by `.spectrum-Steplist-item.is-selected .spectrum-Steplist-marker`.
Defaults to `var(--spectrum-steplist-current-marker-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-steplist-complete-segment-border-block-end-color": {
+ "value": "var(--spectrum-steplist-complete-segment-border-block-end-color)",
+ "description": "Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-segment, .spectrum-Steplist-item.is-selected .spectrum-Steplist-segment`.
Defaults to `var(--spectrum-steplist-complete-segment-border-block-end-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-steplist-label-labelOffset": {
+ "value": "var(--spectrum-steplist-label-labelOffset)",
+ "description": "Used by `.spectrum-Steplist-label`.
Defaults to `var(--spectrum-steplist-label-labelOffset)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-steplist-label-text-size": {
+ "value": "var(--spectrum-steplist-label-text-size)",
+ "description": "Used by `.spectrum-Steplist-label`.
Defaults to `var(--spectrum-steplist-label-text-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-steplist-incomplete-label-color": {
+ "value": "var(--spectrum-steplist-incomplete-label-color)",
+ "description": "Used by `.spectrum-Steplist-label`.
Defaults to `var(--spectrum-steplist-incomplete-label-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-steplist-marker-hitArea": {
+ "value": "var(--spectrum-steplist-marker-hitArea)",
+ "description": "Used by `.spectrum-Steplist-markerContainer`, `.spectrum-Steplist-item:last-child .spectrum-Steplist-markerContainer`, `.spectrum-Steplist-item:only-child .spectrum-Steplist-markerContainer`.
Defaults to `var(--spectrum-steplist-marker-hitArea)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-steplist-marker-diameter": {
+ "value": "var(--spectrum-steplist-marker-diameter)",
+ "description": "Used by `.spectrum-Steplist-marker`, `.spectrum-Steplist-segment`, `.spectrum-Steplist-item:last-child .spectrum-Steplist-segment`, `.spectrum-Steplist-item:first-child, .spectrum-Steplist-item:last-child`.
Defaults to `var(--spectrum-steplist-marker-diameter)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-steplist-incomplete-marker-border-color": {
+ "value": "var(--spectrum-steplist-incomplete-marker-border-color)",
+ "description": "Used by `.spectrum-Steplist-marker`.
Defaults to `var(--spectrum-steplist-incomplete-marker-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-steplist-incomplete-segment-border-block-end-color": {
+ "value": "var(--spectrum-steplist-incomplete-segment-border-block-end-color)",
+ "description": "Used by `.spectrum-Steplist-segment`.
Defaults to `var(--spectrum-steplist-incomplete-segment-border-block-end-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-steplist-step-width": {
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item`, `.spectrum-Steplist-label`, `.spectrum-Steplist-segment`, `.spectrum-Steplist-item:first-child, .spectrum-Steplist-item:last-child`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-steplist-marker-diameter": {
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-marker`, `.spectrum-Steplist-segment`, `.spectrum-Steplist-item:last-child .spectrum-Steplist-segment`, `.spectrum-Steplist-item:first-child, .spectrum-Steplist-item:last-child`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-steplist-marker-hitArea": {
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-markerContainer`, `.spectrum-Steplist-item:last-child .spectrum-Steplist-markerContainer`, `.spectrum-Steplist-item:only-child .spectrum-Steplist-markerContainer`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-steplist-segment-height": {
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-complete + .spectrum-Steplist-item .spectrum-Steplist-segment`, `.spectrum-Steplist-segment`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-steplist-topPadding": {
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-steplist-small-topPadding": {
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist--small`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-steplist-sidePadding": {
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-steplist-label-labelOffset": {
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-steplist-label-text-size": {
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-steplist-current-label-text-color": {
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-selected .spectrum-Steplist-label`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-steplist-current-marker-color": {
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-selected .spectrum-Steplist-marker`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-steplist-complete-label-text-color": {
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-label`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-steplist-complete-marker-background-color": {
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-marker`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-steplist-complete-segment-border-block-end-color": {
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-segment, .spectrum-Steplist-item.is-selected .spectrum-Steplist-segment`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-steplist-incomplete-label-color": {
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-label`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-steplist-current-marker-color-key-focus": {
+ "description": "Used by `.spectrum-Steplist--interactive .spectrum-Steplist-item :focus .spectrum-Steplist-marker, .spectrum-Steplist--interactive .spectrum-Steplist-item.is-focused .spectrum-Steplist-marker, .spectrum-Steplist--interactive .spectrum-Steplist-item:focus .spectrum-Steplist-marker`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-steplist-incomplete-marker-border-color": {
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-marker`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-steplist-incomplete-segment-border-block-end-color": {
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-segment`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--system-steplist-incomplete-marker-border-color`, `--system-steplist-incomplete-segment-border-block-end-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-800": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Used by `--spectrum-steplist-current-label-text-color`, `--spectrum-steplist-current-marker-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-700": {
+ "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+ "description": "Used by `--spectrum-steplist-complete-label-text-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-600": {
+ "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+ "description": "Used by `--spectrum-steplist-complete-marker-background-color`, `--spectrum-steplist-complete-segment-border-block-end-color`, `--spectrum-steplist-incomplete-label-color`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-steplist-incomplete-marker-border-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-steplist-incomplete-marker-border-color`.",
+ "control": "color"
+ },
+ "system-steplist-incomplete-segment-border-block-end-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-steplist-incomplete-segment-border-block-end-color`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-steplist-current-marker-color-key-focus": {
+ "value": "var(--mod-steplist-current-marker-color-key-focus, var(--spectrum-steplist-current-marker-color-key-focus))",
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist--interactive .spectrum-Steplist-item :focus .spectrum-Steplist-marker, .spectrum-Steplist--interactive .spectrum-Steplist-item.is-focused .spectrum-Steplist-marker, .spectrum-Steplist--interactive .spectrum-Steplist-item:focus .spectrum-Steplist-marker`.
Defaults to `var(--mod-steplist-current-marker-color-key-focus, var(--spectrum-steplist-current-marker-color-key-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-steplist-complete-marker-background-color": {
+ "value": "var(--mod-steplist-complete-marker-background-color, var(--spectrum-steplist-complete-marker-background-color))",
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-marker`.
Defaults to `var(--mod-steplist-complete-marker-background-color, var(--spectrum-steplist-complete-marker-background-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-steplist-current-marker-color": {
+ "value": "var(--mod-steplist-current-marker-color, var(--spectrum-steplist-current-marker-color))",
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-selected .spectrum-Steplist-marker`.
Defaults to `var(--mod-steplist-current-marker-color, var(--spectrum-steplist-current-marker-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/steplist/stories/steplist.stories.js b/components/steplist/stories/steplist.stories.js
index 9266631e646..23e42afd979 100644
--- a/components/steplist/stories/steplist.stories.js
+++ b/components/steplist/stories/steplist.stories.js
@@ -1,9 +1,11 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { SteplistGroup } from "./steplist.test.js";
import { DocsSteplistGroup } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* A steplist can communicate the progress of a task or workflow. It can help users understand where they are in a process and what they need to do next.
*
@@ -76,6 +78,7 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json
index cfea6e878d6..c9c1f84528f 100644
--- a/components/stepper/dist/metadata.json
+++ b/components/stepper/dist/metadata.json
@@ -3,203 +3,775 @@
"selectors": [
".spectrum-Stepper",
".spectrum-Stepper--quiet",
+ ".spectrum-Stepper--quiet:after",
".spectrum-Stepper--quiet.hide-stepper .spectrum-Stepper-input",
".spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled)",
- ".spectrum-Stepper--quiet:after",
".spectrum-Stepper-button",
".spectrum-Stepper-buttons",
".spectrum-Stepper-input",
+ ".spectrum-Stepper:before",
+ ".spectrum-Stepper:hover:not(.is-invalid, .is-disabled, .is-focused)",
+ ".spectrum-Stepper:not(.is-disabled) .is-focused",
+ ".spectrum-Stepper:not(.is-disabled) .is-focused:hover",
+ ".spectrum-Stepper:not(.is-disabled):focus",
+ ".spectrum-Stepper:not(.is-disabled):focus-visible",
+ ".spectrum-Stepper:not(.is-disabled):focus:hover",
+ ".spectrum-Stepper:not(.is-disabled):hover",
+ ".spectrum-Stepper:not(.spectrum-Stepper--quiet)",
".spectrum-Stepper.hide-stepper .spectrum-Stepper-input",
".spectrum-Stepper.is-disabled",
".spectrum-Stepper.is-focused:not(.is-disabled)",
".spectrum-Stepper.is-focused:not(.is-disabled):hover",
".spectrum-Stepper.is-invalid",
- ".spectrum-Stepper.is-invalid.is-focused",
- ".spectrum-Stepper.is-invalid.is-focused:hover",
- ".spectrum-Stepper.is-invalid.is-keyboardFocused",
".spectrum-Stepper.is-invalid:focus",
".spectrum-Stepper.is-invalid:focus-visible",
".spectrum-Stepper.is-invalid:focus:hover",
".spectrum-Stepper.is-invalid:hover",
+ ".spectrum-Stepper.is-invalid.is-focused",
+ ".spectrum-Stepper.is-invalid.is-focused:hover",
+ ".spectrum-Stepper.is-invalid.is-keyboardFocused",
".spectrum-Stepper.is-keyboardFocused:not(.is-disabled)",
".spectrum-Stepper.spectrum-Stepper--quiet",
+ ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):focus",
+ ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):focus:hover",
+ ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover",
".spectrum-Stepper.spectrum-Stepper--quiet.is-focused:not(.is-disabled)",
".spectrum-Stepper.spectrum-Stepper--quiet.is-focused:not(.is-disabled):hover",
".spectrum-Stepper.spectrum-Stepper--quiet.is-invalid",
".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled)",
".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled):hover",
- ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):focus",
- ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):focus:hover",
- ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover",
".spectrum-Stepper.spectrum-Stepper--sizeL",
".spectrum-Stepper.spectrum-Stepper--sizeM",
".spectrum-Stepper.spectrum-Stepper--sizeS",
- ".spectrum-Stepper.spectrum-Stepper--sizeXL",
- ".spectrum-Stepper:before",
- ".spectrum-Stepper:hover:not(.is-invalid, .is-disabled, .is-focused)",
- ".spectrum-Stepper:not(.is-disabled) .is-focused",
- ".spectrum-Stepper:not(.is-disabled) .is-focused:hover",
- ".spectrum-Stepper:not(.is-disabled):focus",
- ".spectrum-Stepper:not(.is-disabled):focus-visible",
- ".spectrum-Stepper:not(.is-disabled):focus:hover",
- ".spectrum-Stepper:not(.is-disabled):hover",
- ".spectrum-Stepper:not(.spectrum-Stepper--quiet)"
- ],
- "modifiers": [
- "--mod-stepper-animation-duration",
- "--mod-stepper-border-color",
- "--mod-stepper-border-color-focus",
- "--mod-stepper-border-color-focus-hover",
- "--mod-stepper-border-color-focus-hover-invalid",
- "--mod-stepper-border-color-focus-invalid",
- "--mod-stepper-border-color-hover",
- "--mod-stepper-border-color-hover-invalid",
- "--mod-stepper-border-color-invalid",
- "--mod-stepper-border-color-keyboard-focus",
- "--mod-stepper-border-color-keyboard-focus-invalid",
- "--mod-stepper-border-radius",
- "--mod-stepper-border-width",
- "--mod-stepper-button-border-width",
- "--mod-stepper-button-width",
- "--mod-stepper-button-width-quiet",
- "--mod-stepper-buttons-background-color",
- "--mod-stepper-buttons-border-color",
- "--mod-stepper-buttons-border-color-focus",
- "--mod-stepper-buttons-border-color-focus-hover",
- "--mod-stepper-buttons-border-color-hover",
- "--mod-stepper-buttons-border-color-keyboard-focus",
- "--mod-stepper-buttons-border-style",
- "--mod-stepper-buttons-border-width",
- "--mod-stepper-focus-indicator-color",
- "--mod-stepper-focus-indicator-gap",
- "--mod-stepper-focus-indicator-visibility",
- "--mod-stepper-focus-indicator-width",
- "--mod-stepper-height",
- "--mod-stepper-min-width-multiplier",
- "--mod-stepper-width"
- ],
- "component": [
- "--spectrum-stepper-animation-duration",
- "--spectrum-stepper-border-color",
- "--spectrum-stepper-border-color-default",
- "--spectrum-stepper-border-color-disabled",
- "--spectrum-stepper-border-color-focus",
- "--spectrum-stepper-border-color-focus-hover",
- "--spectrum-stepper-border-color-focus-hover-invalid",
- "--spectrum-stepper-border-color-focus-invalid",
- "--spectrum-stepper-border-color-hover",
- "--spectrum-stepper-border-color-invalid",
- "--spectrum-stepper-border-color-keyboard-focus",
- "--spectrum-stepper-border-color-keyboard-focus-invalid",
- "--spectrum-stepper-border-radius",
- "--spectrum-stepper-border-width",
- "--spectrum-stepper-button-border-width",
- "--spectrum-stepper-button-border-width-disabled",
- "--spectrum-stepper-button-edge-to-fill",
- "--spectrum-stepper-button-width",
- "--spectrum-stepper-buttons-background-color",
- "--spectrum-stepper-buttons-background-color-disabled",
- "--spectrum-stepper-buttons-border-color",
- "--spectrum-stepper-buttons-border-color-focus",
- "--spectrum-stepper-buttons-border-color-focus-hover",
- "--spectrum-stepper-buttons-border-color-hover",
- "--spectrum-stepper-buttons-border-color-keyboard-focus",
- "--spectrum-stepper-buttons-border-style",
- "--spectrum-stepper-buttons-border-width",
- "--spectrum-stepper-focus-indicator-color",
- "--spectrum-stepper-focus-indicator-gap",
- "--spectrum-stepper-focus-indicator-width",
- "--spectrum-stepper-height",
- "--spectrum-stepper-width"
- ],
- "global": [
- "--spectrum-animation-duration-100",
- "--spectrum-border-width-100",
- "--spectrum-border-width-200",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-75",
- "--spectrum-corner-radius-100",
- "--spectrum-disabled-border-color",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-gray-100",
- "--spectrum-gray-300",
- "--spectrum-gray-50",
- "--spectrum-gray-500",
- "--spectrum-gray-600",
- "--spectrum-gray-800",
- "--spectrum-gray-900",
- "--spectrum-in-field-button-width-stacked-extra-large",
- "--spectrum-in-field-button-width-stacked-large",
- "--spectrum-in-field-button-width-stacked-medium",
- "--spectrum-in-field-button-width-stacked-small",
- "--spectrum-negative-border-color-default",
- "--spectrum-negative-border-color-focus",
- "--spectrum-negative-border-color-focus-hover",
- "--spectrum-negative-border-color-hover",
- "--spectrum-negative-border-color-key-focus",
- "--spectrum-text-field-minimum-width-multiplier"
- ],
- "system-theme": [
- "--system-stepper-border-color-default",
- "--system-stepper-border-color-disabled",
- "--system-stepper-border-color-focus",
- "--system-stepper-border-color-focus-hover",
- "--system-stepper-border-color-focus-hover-invalid",
- "--system-stepper-border-color-focus-invalid",
- "--system-stepper-border-color-hover",
- "--system-stepper-border-color-invalid",
- "--system-stepper-border-color-keyboard-focus",
- "--system-stepper-border-color-keyboard-focus-invalid",
- "--system-stepper-border-width",
- "--system-stepper-button-border-width",
- "--system-stepper-button-border-width-disabled",
- "--system-stepper-buttons-background-color",
- "--system-stepper-buttons-background-color-disabled",
- "--system-stepper-buttons-border-color",
- "--system-stepper-buttons-border-color-focus",
- "--system-stepper-buttons-border-color-hover",
- "--system-stepper-buttons-border-color-keyboard-focus",
- "--system-stepper-buttons-border-style",
- "--system-stepper-buttons-border-width",
- "--system-stepper-quiet-button-edge-to-fill",
- "--system-stepper-quiet-buttons-border-style"
- ],
- "passthroughs": [
- "--mod-infield-button-border-block-end-width",
- "--mod-infield-button-border-color",
- "--mod-infield-button-border-color-quiet",
- "--mod-infield-button-border-color-quiet-disabled",
- "--mod-infield-button-border-width",
- "--mod-infield-button-edge-to-fill",
- "--mod-infield-button-fill-justify-content",
- "--mod-infield-button-inner-edge-to-fill",
- "--mod-infield-button-stacked-bottom-border-block-end-width",
- "--mod-infield-button-stacked-bottom-border-radius-end-end",
- "--mod-infield-button-stacked-bottom-border-radius-end-start",
- "--mod-infield-button-width-stacked",
- "--mod-textfield-background-color",
- "--mod-textfield-border-color",
- "--mod-textfield-border-color-disabled",
- "--mod-textfield-border-color-hover",
- "--mod-textfield-border-width",
- "--mod-textfield-focus-indicator-color",
- "--mod-textfield-focus-indicator-width",
- "--mod-textfield-icon-spacing-inline-start-invalid"
+ ".spectrum-Stepper.spectrum-Stepper--sizeXL"
],
- "high-contrast": [
- "--highcontrast-infield-button-border-color",
- "--highcontrast-infield-button-border-color-active",
- "--highcontrast-stepper-border-color",
- "--highcontrast-stepper-border-color-focus",
- "--highcontrast-stepper-border-color-focus-hover",
- "--highcontrast-stepper-border-color-hover",
- "--highcontrast-stepper-border-color-keyboard-focus",
- "--highcontrast-stepper-buttons-border-width",
- "--highcontrast-stepper-focus-indicator-color",
- "--highcontrast-textfield-border-color"
- ]
+ "modifiers": {
+ "mod-stepper-border-width": {
+ "value": "var(--spectrum-stepper-border-width)",
+ "description": "Used by `--highcontrast-stepper-buttons-border-width`, `--mod-textfield-border-width`, `--mod-infield-button-border-block-end-width`, `--mod-infield-button-stacked-bottom-border-block-end-width`, `--spectrum-stepper-width`, `.spectrum-Stepper.hide-stepper .spectrum-Stepper-input`.
Defaults to `var(--spectrum-stepper-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-stepper-border-color": {
+ "value": "var(--spectrum-stepper-border-color-default)",
+ "description": "Defined in `.spectrum-Stepper.is-invalid`, `.spectrum-Stepper.is-focused:not(.is-disabled), .spectrum-Stepper:not(.is-disabled):focus`, `.spectrum-Stepper.is-keyboardFocused:not(.is-disabled)`, `.spectrum-Stepper.spectrum-Stepper--quiet.is-invalid`, `.spectrum-Stepper:not(.is-disabled):hover`, `.spectrum-Stepper.is-focused:not(.is-disabled):hover, .spectrum-Stepper:not(.is-disabled):focus:hover`.
Used by `--spectrum-stepper-border-color`.
Defaults to `var(--spectrum-stepper-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-stepper-border-radius": {
+ "value": "8px",
+ "description": "Used by `--spectrum-stepper-border-radius`.
Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-stepper-focus-indicator-width": {
+ "value": "2px",
+ "description": "Used by `--spectrum-stepper-focus-indicator-width`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-stepper-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-stepper-focus-indicator-gap`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-stepper-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-stepper-focus-indicator-color`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-stepper-animation-duration": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Used by `--spectrum-stepper-animation-duration`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-stepper-button-width": {
+ "value": "44px",
+ "description": "Used by `--spectrum-stepper-button-width`.
Defaults to `var(--spectrum-in-field-button-width-stacked-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-stepper-height": {
+ "value": "48px",
+ "description": "Used by `--spectrum-stepper-height`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-stepper-border-color-invalid": {
+ "value": "var(--spectrum-stepper-border-color-invalid)",
+ "description": "Used by `--mod-stepper-border-color`, `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-border-color-invalid)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-stepper-border-color-hover": {
+ "value": "var(--spectrum-stepper-border-color-hover)",
+ "description": "Defined in `.spectrum-Stepper.is-invalid`.
Used by `--mod-textfield-border-color-hover`, `--mod-stepper-border-color`, `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-stepper-border-color-hover-invalid": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--mod-stepper-border-color-hover`, `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-negative-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-stepper-border-color-focus": {
+ "value": "var(--spectrum-stepper-border-color-focus)",
+ "description": "Defined in `.spectrum-Stepper.is-invalid`.
Used by `--mod-stepper-border-color`, `--mod-stepper-buttons-border-color`, `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-border-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-stepper-border-color-focus-invalid": {
+ "value": "var(--spectrum-stepper-border-color-focus-invalid)",
+ "description": "Used by `--mod-stepper-border-color-focus`, `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-border-color-focus-invalid)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-stepper-border-color-focus-hover": {
+ "value": "var(--spectrum-stepper-border-color-focus-hover)",
+ "description": "Defined in `.spectrum-Stepper.is-invalid`.
Used by `--mod-stepper-border-color`, `--mod-stepper-buttons-border-color`, `--mod-textfield-border-color`, `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-border-color-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-stepper-border-color-focus-hover-invalid": {
+ "value": "var(--spectrum-stepper-border-color-focus-hover-invalid)",
+ "description": "Used by `--mod-stepper-border-color-focus-hover`, `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-border-color-focus-hover-invalid)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-stepper-border-color-keyboard-focus": {
+ "value": "var(--spectrum-stepper-border-color-keyboard-focus)",
+ "description": "Defined in `.spectrum-Stepper.is-invalid`.
Used by `--mod-textfield-border-color`, `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-border-color-keyboard-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-stepper-border-color-keyboard-focus-invalid": {
+ "value": "var(--spectrum-stepper-border-color-keyboard-focus-invalid)",
+ "description": "Used by `--mod-stepper-border-color-keyboard-focus`, `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-border-color-keyboard-focus-invalid)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-stepper-buttons-border-color": {
+ "value": "var(--spectrum-stepper-buttons-border-color)",
+ "description": "Defined in `.spectrum-Stepper.is-focused:not(.is-disabled), .spectrum-Stepper:not(.is-disabled):focus`, `.spectrum-Stepper.is-focused:not(.is-disabled):hover, .spectrum-Stepper:not(.is-disabled):focus:hover`.
Used by `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-buttons-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-stepper-buttons-background-color": {
+ "value": "var(--spectrum-stepper-buttons-background-color)",
+ "description": "Defined in `.spectrum-Stepper.spectrum-Stepper--quiet`, `.spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover`.
Used by `.spectrum-Stepper-buttons`.
Defaults to `var(--spectrum-stepper-buttons-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-stepper-focus-indicator-visibility": {
+ "description": "Defined in `.spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled)`.
Used by `.spectrum-Stepper--quiet:after`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-stepper-button-border-width": {
+ "value": "var(--spectrum-stepper-button-border-width)",
+ "description": "Used by `--mod-infield-button-border-width`.
Defaults to `var(--spectrum-stepper-button-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-stepper-buttons-border-color-focus": {
+ "value": "var(--spectrum-stepper-buttons-border-color-focus)",
+ "description": "Used by `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-buttons-border-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-stepper-buttons-border-color-keyboard-focus": {
+ "value": "var(--spectrum-stepper-buttons-border-color-keyboard-focus)",
+ "description": "Used by `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-buttons-border-color-keyboard-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-stepper-button-width-quiet": {
+ "value": "var(--spectrum-stepper-button-width)",
+ "description": "Used by `--mod-infield-button-width-stacked`.
Defaults to `var(--spectrum-stepper-button-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-stepper-buttons-border-color-hover": {
+ "value": "var(--spectrum-stepper-buttons-border-color-hover)",
+ "description": "Used by `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-buttons-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-stepper-buttons-border-color-focus-hover": {
+ "value": "var(--spectrum-stepper-buttons-border-color-focus-hover)",
+ "description": "Used by `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-buttons-border-color-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-stepper-width": {
+ "value": "calc(var(--spectrum-stepper-height) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--spectrum-stepper-button-width) + var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2)",
+ "description": "Used by `--spectrum-stepper-width`.
Defaults to `calc(var(--spectrum-stepper-height) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--spectrum-stepper-button-width) + var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-stepper-min-width-multiplier": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-stepper-width`.
Defaults to `var(--spectrum-text-field-minimum-width-multiplier)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-stepper-buttons-border-style": {
+ "value": "var(--spectrum-stepper-buttons-border-style)",
+ "description": "Used by `.spectrum-Stepper-buttons`.
Defaults to `var(--spectrum-stepper-buttons-border-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-stepper-buttons-border-width": {
+ "value": "var(--spectrum-stepper-buttons-border-width)",
+ "description": "Used by `.spectrum-Stepper-buttons`.
Defaults to `var(--spectrum-stepper-buttons-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-stepper-border-width": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `--highcontrast-stepper-buttons-border-width`, `--mod-textfield-border-width`, `--mod-infield-button-border-block-end-width`, `--mod-infield-button-stacked-bottom-border-block-end-width`, `--spectrum-stepper-width`, `.spectrum-Stepper.hide-stepper .spectrum-Stepper-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-stepper-border-color": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-textfield-border-color`, `--mod-infield-button-border-color`, `--mod-infield-button-border-color-quiet`, `.spectrum-Stepper-buttons`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-stepper-border-color-default": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `--spectrum-stepper-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-stepper-border-radius": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `.spectrum-Stepper`, `.spectrum-Stepper-buttons, .spectrum-Stepper.hide-stepper .spectrum-Stepper-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-stepper-focus-indicator-width": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `.spectrum-Stepper.is-keyboardFocused:not(.is-disabled), .spectrum-Stepper:not(.is-disabled):focus-visible`, `.spectrum-Stepper--quiet:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-stepper-focus-indicator-gap": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `.spectrum-Stepper.is-keyboardFocused:not(.is-disabled), .spectrum-Stepper:not(.is-disabled):focus-visible`, `.spectrum-Stepper--quiet:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-stepper-focus-indicator-color": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `.spectrum-Stepper.is-keyboardFocused:not(.is-disabled), .spectrum-Stepper:not(.is-disabled):focus-visible`, `.spectrum-Stepper--quiet:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-stepper-animation-duration": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `.spectrum-Stepper-buttons`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-stepper-button-width": {
+ "description": "Defined in `.spectrum-Stepper, .spectrum-Stepper.spectrum-Stepper--sizeM`, `.spectrum-Stepper.spectrum-Stepper--sizeS`, `.spectrum-Stepper.spectrum-Stepper--sizeL`, `.spectrum-Stepper.spectrum-Stepper--sizeXL`.
Used by `--mod-infield-button-width-stacked`, `--spectrum-stepper-width`, `.spectrum-Stepper-buttons`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-stepper-height": {
+ "description": "Defined in `.spectrum-Stepper, .spectrum-Stepper.spectrum-Stepper--sizeM`, `.spectrum-Stepper.spectrum-Stepper--sizeS`, `.spectrum-Stepper.spectrum-Stepper--sizeL`, `.spectrum-Stepper.spectrum-Stepper--sizeXL`.
Used by `--spectrum-stepper-width`, `.spectrum-Stepper`, `.spectrum-Stepper-buttons`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-stepper-buttons-border-width": {
+ "description": "Defined in `.spectrum-Stepper.is-disabled`, `.spectrum-Stepper`.
Used by `.spectrum-Stepper-buttons`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-stepper-button-border-width-disabled": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `--spectrum-stepper-buttons-border-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-stepper-buttons-background-color": {
+ "description": "Defined in `.spectrum-Stepper.is-disabled`, `.spectrum-Stepper`.
Used by `.spectrum-Stepper-buttons`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-stepper-buttons-background-color-disabled": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `--spectrum-stepper-buttons-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-stepper-border-color-focus": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-stepper-border-color`, `--mod-stepper-buttons-border-color`, `--mod-infield-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-stepper-border-color-keyboard-focus": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-stepper-border-color`, `--mod-textfield-border-color`, `--mod-infield-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-stepper-buttons-border-color": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-infield-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-stepper-button-border-width": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-infield-button-border-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-stepper-border-color-disabled": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-textfield-border-color-disabled`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-stepper-buttons-border-color-focus": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-infield-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-stepper-buttons-border-color-keyboard-focus": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-infield-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-stepper-border-color-invalid": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-infield-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-stepper-border-color-focus-invalid": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-infield-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-stepper-border-color-keyboard-focus-invalid": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-infield-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-stepper-button-edge-to-fill": {
+ "description": "Defined in `.spectrum-Stepper--quiet`.
Used by `--mod-infield-button-inner-edge-to-fill`, `--mod-infield-button-edge-to-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-stepper-border-color-hover": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-textfield-border-color-hover`, `--mod-stepper-border-color`, `--mod-infield-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-stepper-border-color-focus-hover": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-stepper-border-color`, `--mod-stepper-buttons-border-color`, `--mod-textfield-border-color`, `--mod-infield-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-stepper-buttons-border-color-hover": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-infield-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-stepper-buttons-border-color-focus-hover": {
+ "description": "Used by `--mod-infield-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-stepper-border-color-focus-hover-invalid": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-infield-button-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-stepper-width": {
+ "description": "Defined in `.spectrum-Stepper`.
Used by `.spectrum-Stepper`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-stepper-buttons-border-style": {
+ "description": "Defined in `.spectrum-Stepper`, `.spectrum-Stepper--quiet`.
Used by `.spectrum-Stepper-buttons`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--system-stepper-border-width`, `--system-stepper-button-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-500": {
+ "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+ "description": "Used by `--system-stepper-border-color-default`, `--system-stepper-buttons-border-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-600": {
+ "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+ "description": "Used by `--system-stepper-border-color-hover`, `--system-stepper-buttons-border-color-hover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-800": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Used by `--system-stepper-border-color-focus`, `--system-stepper-border-color-keyboard-focus`, `--system-stepper-buttons-border-color-focus`, `--system-stepper-buttons-border-color-keyboard-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-900": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Used by `--system-stepper-border-color-focus-hover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--system-stepper-buttons-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-default": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Used by `--system-stepper-border-color-invalid`, `--mod-stepper-border-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-focus": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--system-stepper-border-color-focus-invalid`, `--mod-stepper-border-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-focus-hover": {
+ "value": "var(--spectrum-negative-border-color-down)",
+ "description": "Used by `--system-stepper-border-color-focus-hover-invalid`, `--mod-stepper-border-color-focus-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-key-focus": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--system-stepper-border-color-keyboard-focus-invalid`, `--mod-stepper-border-color-keyboard-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-300": {
+ "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+ "description": "Used by `--system-stepper-border-color-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--system-stepper-button-border-width-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-50": {
+ "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))",
+ "description": "Used by `--system-stepper-buttons-background-color-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-stepper-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-stepper-focus-indicator-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-stepper-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-stepper-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `--spectrum-stepper-animation-duration`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-in-field-button-width-stacked-medium": {
+ "value": "28px",
+ "description": "Used by `--spectrum-stepper-button-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-stepper-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-in-field-button-width-stacked-small": {
+ "value": "20px",
+ "description": "Used by `--spectrum-stepper-button-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-stepper-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-in-field-button-width-stacked-large": {
+ "value": "36px",
+ "description": "Used by `--spectrum-stepper-button-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-stepper-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-in-field-button-width-stacked-extra-large": {
+ "value": "44px",
+ "description": "Used by `--spectrum-stepper-button-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-stepper-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-hover": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--mod-stepper-border-color-hover`, `--mod-infield-button-border-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-border-color": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Used by `--mod-infield-button-border-color-quiet-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-text-field-minimum-width-multiplier": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-stepper-width`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-stepper-border-width": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-width`.",
+ "control": "text"
+ },
+ "system-stepper-border-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-color-default`.",
+ "control": "color"
+ },
+ "system-stepper-border-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-color-hover`.",
+ "control": "color"
+ },
+ "system-stepper-border-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-color-focus`.",
+ "control": "color"
+ },
+ "system-stepper-border-color-focus-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-color-focus-hover`.",
+ "control": "color"
+ },
+ "system-stepper-border-color-keyboard-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-color-keyboard-focus`.",
+ "control": "color"
+ },
+ "system-stepper-buttons-border-style": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-buttons-border-style`.",
+ "control": "text"
+ },
+ "system-stepper-buttons-border-width": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-buttons-border-width`.",
+ "control": "text"
+ },
+ "system-stepper-buttons-border-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-buttons-border-color`.",
+ "control": "color"
+ },
+ "system-stepper-buttons-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-buttons-background-color`.",
+ "control": "color"
+ },
+ "system-stepper-buttons-border-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-buttons-border-color-hover`.",
+ "control": "color"
+ },
+ "system-stepper-buttons-border-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-buttons-border-color-focus`.",
+ "control": "color"
+ },
+ "system-stepper-buttons-border-color-keyboard-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-buttons-border-color-keyboard-focus`.",
+ "control": "color"
+ },
+ "system-stepper-button-border-width": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-button-border-width`.",
+ "control": "text"
+ },
+ "system-stepper-border-color-invalid": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-color-invalid`.",
+ "control": "color"
+ },
+ "system-stepper-border-color-focus-invalid": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-color-focus-invalid`.",
+ "control": "color"
+ },
+ "system-stepper-border-color-focus-hover-invalid": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-color-focus-hover-invalid`.",
+ "control": "color"
+ },
+ "system-stepper-border-color-keyboard-focus-invalid": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-color-keyboard-focus-invalid`.",
+ "control": "color"
+ },
+ "system-stepper-border-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-color-disabled`.",
+ "control": "color"
+ },
+ "system-stepper-button-border-width-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-button-border-width-disabled`.",
+ "control": "text"
+ },
+ "system-stepper-buttons-background-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-buttons-background-color-disabled`.",
+ "control": "color"
+ },
+ "system-stepper-quiet-buttons-border-style": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-buttons-border-style`.",
+ "control": "text"
+ },
+ "system-stepper-quiet-button-edge-to-fill": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-button-edge-to-fill`.",
+ "control": "text"
+ }
+ },
+ "passthroughs": {
+ "mod-infield-button-border-color": {
+ "category": "Passthrough"
+ },
+ "mod-infield-button-border-color-quiet-disabled": {
+ "category": "Passthrough"
+ },
+ "mod-infield-button-border-width": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-width": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-color": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-color-disabled": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-focus-indicator-width": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-icon-spacing-inline-start-invalid": {
+ "category": "Passthrough"
+ },
+ "mod-infield-button-width-stacked": {
+ "category": "Passthrough"
+ },
+ "mod-infield-button-border-color-quiet": {
+ "category": "Passthrough"
+ },
+ "mod-infield-button-border-block-end-width": {
+ "category": "Passthrough"
+ },
+ "mod-infield-button-stacked-bottom-border-block-end-width": {
+ "category": "Passthrough"
+ },
+ "mod-infield-button-stacked-bottom-border-radius-end-end": {
+ "category": "Passthrough"
+ },
+ "mod-infield-button-stacked-bottom-border-radius-end-start": {
+ "category": "Passthrough"
+ },
+ "mod-infield-button-fill-justify-content": {
+ "category": "Passthrough"
+ },
+ "mod-infield-button-inner-edge-to-fill": {
+ "category": "Passthrough"
+ },
+ "mod-infield-button-edge-to-fill": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-focus-indicator-color": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-background-color": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-border-color-hover": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-stepper-border-color": {
+ "value": "var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))",
+ "description": "Defined in `.spectrum-Stepper`, `.spectrum-Stepper.is-invalid`, `.spectrum-Stepper.is-disabled`, `.spectrum-Stepper.is-focused:not(.is-disabled), .spectrum-Stepper:not(.is-disabled):focus`, `.spectrum-Stepper:not(.is-disabled):hover`, `.spectrum-Stepper.is-focused:not(.is-disabled):hover, \t.spectrum-Stepper:not(.is-disabled):focus:hover`, `.spectrum-Stepper.is-keyboardFocused:not(.is-disabled), .spectrum-Stepper:not(.is-disabled):focus-visible`.
Used by `--highcontrast-textfield-border-color`, `--highcontrast-infield-button-border-color`, `--highcontrast-infield-button-border-color-active`, `--spectrum-stepper-border-color`, `--mod-infield-button-border-color`, `--mod-textfield-border-color-hover`.
Defaults to `var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-stepper-border-color-hover": {
+ "value": "var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))",
+ "description": "Defined in `.spectrum-Stepper`, `.spectrum-Stepper.is-invalid`.
Used by `--highcontrast-stepper-border-color`, `--mod-stepper-border-color`.
Defaults to `var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-stepper-border-color-focus": {
+ "value": "var(--mod-stepper-buttons-border-color-focus, var(--spectrum-stepper-buttons-border-color-focus))",
+ "description": "Defined in `.spectrum-Stepper`, `.spectrum-Stepper.is-invalid`.
Used by `--highcontrast-stepper-border-color`, `--mod-stepper-border-color`, `--mod-stepper-buttons-border-color`, `--mod-infield-button-border-color`.
Defaults to `var(--mod-stepper-buttons-border-color-focus, var(--spectrum-stepper-buttons-border-color-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-stepper-border-color-focus-hover": {
+ "value": "var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover))",
+ "description": "Defined in `.spectrum-Stepper`, `.spectrum-Stepper.is-invalid`.
Used by `--highcontrast-stepper-border-color`, `--mod-stepper-border-color`, `--mod-stepper-buttons-border-color`, `--mod-textfield-border-color`.
Defaults to `var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-stepper-border-color-keyboard-focus": {
+ "value": "var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus))",
+ "description": "Defined in `.spectrum-Stepper`, `.spectrum-Stepper.is-invalid`.
Used by `--highcontrast-stepper-border-color`, `--mod-infield-button-border-color`, `--mod-textfield-border-color`.
Defaults to `var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-stepper-focus-indicator-color": {
+ "value": "var(--mod-stepper-focus-indicator-color, var(--spectrum-focus-indicator-color))",
+ "description": "Defined in `.spectrum-Stepper`.
Used by `--spectrum-stepper-focus-indicator-color`.
Defaults to `var(--mod-stepper-focus-indicator-color, var(--spectrum-focus-indicator-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-stepper-buttons-border-width": {
+ "value": "var(--mod-stepper-buttons-border-width, var(--spectrum-stepper-buttons-border-width))",
+ "description": "Defined in `.spectrum-Stepper.is-disabled`.
Used by `.spectrum-Stepper-buttons`.
Defaults to `var(--mod-stepper-buttons-border-width, var(--spectrum-stepper-buttons-border-width))`, if not set.",
+ "control": "text"
+ },
+ "highcontrast-textfield-border-color": {
+ "description": "Defined in `.spectrum-Stepper-input`.",
+ "control": "color"
+ },
+ "highcontrast-infield-button-border-color": {
+ "description": "Defined in `.spectrum-Stepper-button`.",
+ "control": "color"
+ },
+ "highcontrast-infield-button-border-color-active": {
+ "description": "Defined in `.spectrum-Stepper-button`.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/stepper/stories/stepper.stories.js b/components/stepper/stories/stepper.stories.js
index 8775574a342..342abe3437d 100644
--- a/components/stepper/stories/stepper.stories.js
+++ b/components/stepper/stories/stepper.stories.js
@@ -1,11 +1,13 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isFocused, isHovered, isInvalid, isKeyboardFocused, isQuiet, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { StepperGroup } from "./stepper.test.js";
import { AllDefaultVariantsGroup, DisabledVariantsGroup, Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* A stepper can be used to increment or decrement a value by a specified amount via an up/down button. An input field displays the current value.
*/
@@ -48,6 +50,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/swatch/dist/metadata.json b/components/swatch/dist/metadata.json
index 896cc7acc7c..394529b3357 100644
--- a/components/swatch/dist/metadata.json
+++ b/components/swatch/dist/metadata.json
@@ -7,20 +7,20 @@
".spectrum-Swatch--lightBorder .spectrum-Swatch-fill:before",
".spectrum-Swatch--noBorder .spectrum-Swatch-fill:before",
".spectrum-Swatch--rectangle",
- ".spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill",
- ".spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before",
".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle)",
".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill",
".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before",
".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle):after",
".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle):before",
+ ".spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill",
+ ".spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before",
".spectrum-Swatch--roundingNone",
".spectrum-Swatch--roundingNone .spectrum-Swatch-fill",
".spectrum-Swatch--roundingNone .spectrum-Swatch-fill:before",
- ".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill",
- ".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill:before",
".spectrum-Swatch--roundingNone:after",
".spectrum-Swatch--roundingNone:before",
+ ".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill",
+ ".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill:before",
".spectrum-Swatch--sizeL",
".spectrum-Swatch--sizeM",
".spectrum-Swatch--sizeS",
@@ -32,6 +32,9 @@
".spectrum-Swatch-fill:before",
".spectrum-Swatch-image",
".spectrum-Swatch-mixedValueIcon",
+ ".spectrum-Swatch:after",
+ ".spectrum-Swatch:before",
+ ".spectrum-Swatch:focus-visible:after",
".spectrum-Swatch.is-disabled",
".spectrum-Swatch.is-disabled .spectrum-Swatch-disabledIcon",
".spectrum-Swatch.is-image .spectrum-Swatch-fill:before",
@@ -44,95 +47,428 @@
".spectrum-Swatch.is-selected .spectrum-Swatch-fill",
".spectrum-Swatch.is-selected .spectrum-Swatch-fill:before",
".spectrum-Swatch.is-selected:before",
- ".spectrum-Swatch:after",
- ".spectrum-Swatch:before",
- ".spectrum-Swatch:focus-visible:after",
".spectrum-Swatch[disabled]",
".spectrum-Swatch[disabled] .spectrum-Swatch-disabledIcon"
],
- "modifiers": [
- "--mod-animation-duration-100",
- "--mod-swatch-border-color",
- "--mod-swatch-border-color-light",
- "--mod-swatch-border-color-selected",
- "--mod-swatch-border-radius",
- "--mod-swatch-border-thickness",
- "--mod-swatch-border-thickness-selected",
- "--mod-swatch-disabled-icon-color",
- "--mod-swatch-disabled-icon-size",
- "--mod-swatch-focus-indicator-border-radius",
- "--mod-swatch-focus-indicator-color",
- "--mod-swatch-focus-indicator-gap",
- "--mod-swatch-focus-indicator-thickness",
- "--mod-swatch-icon-border-color",
- "--mod-swatch-inner-border-color-selected",
- "--mod-swatch-size",
- "--mod-swatch-slash-icon-color",
- "--mod-swatch-slash-thickness"
- ],
- "component": [
- "--spectrum-swatch-border-color",
- "--spectrum-swatch-border-color-light",
- "--spectrum-swatch-border-color-opacity",
- "--spectrum-swatch-border-color-selected",
- "--spectrum-swatch-border-radius",
- "--spectrum-swatch-border-thickness",
- "--spectrum-swatch-border-thickness-selected",
- "--spectrum-swatch-dash-icon-color",
- "--spectrum-swatch-disabled-icon-border-opacity",
- "--spectrum-swatch-disabled-icon-color",
- "--spectrum-swatch-disabled-icon-size",
- "--spectrum-swatch-focus-indicator-border-radius",
- "--spectrum-swatch-focus-indicator-color",
- "--spectrum-swatch-focus-indicator-gap",
- "--spectrum-swatch-focus-indicator-thickness",
- "--spectrum-swatch-icon-border-color",
- "--spectrum-swatch-inner-border-color-selected",
- "--spectrum-swatch-size",
- "--spectrum-swatch-size-extra-small",
- "--spectrum-swatch-size-large",
- "--spectrum-swatch-size-medium",
- "--spectrum-swatch-size-small",
- "--spectrum-swatch-slash-icon-color",
- "--spectrum-swatch-slash-thickness",
- "--spectrum-swatch-slash-thickness-extra-small",
- "--spectrum-swatch-slash-thickness-large",
- "--spectrum-swatch-slash-thickness-medium",
- "--spectrum-swatch-slash-thickness-small"
- ],
- "global": [
- "--spectrum-animation-duration-100",
- "--spectrum-black-rgb",
- "--spectrum-border-width-100",
- "--spectrum-border-width-200",
- "--spectrum-corner-radius-75",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-gray-1000-rgb",
- "--spectrum-gray-25",
- "--spectrum-gray-800",
- "--spectrum-gray-900",
- "--spectrum-picked-color",
- "--spectrum-red-900",
- "--spectrum-white",
- "--spectrum-workflow-icon-size-100",
- "--spectrum-workflow-icon-size-200",
- "--spectrum-workflow-icon-size-50",
- "--spectrum-workflow-icon-size-75"
- ],
- "system-theme": [
- "--system-swatch-border-color",
- "--system-swatch-border-radius",
- "--system-swatch-inner-border-color-selected"
- ],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-swatch-background-color-selected",
- "--highcontrast-swatch-border-color",
- "--highcontrast-swatch-border-color-selected",
- "--highcontrast-swatch-disabled-icon-color",
- "--highcontrast-swatch-fill-foreground-color",
- "--highcontrast-swatch-focus-indicator-color"
- ]
+ "modifiers": {
+ "mod-swatch-size": {
+ "value": "var(--spectrum-swatch-size)",
+ "description": "Used by `.spectrum-Swatch`, `.spectrum-Swatch--rectangle`.
Defaults to `var(--spectrum-swatch-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-swatch-disabled-icon-size": {
+ "value": "var(--spectrum-swatch-disabled-icon-size)",
+ "description": "Used by `.spectrum-Swatch .spectrum-Swatch-disabledIcon`.
Defaults to `var(--spectrum-swatch-disabled-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-swatch-border-radius": {
+ "value": "var(--spectrum-swatch-border-radius)",
+ "description": "Used by `.spectrum-Swatch, .spectrum-Swatch:before`, `.spectrum-Swatch-fill, .spectrum-Swatch-fill:before`.
Defaults to `var(--spectrum-swatch-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-swatch-inner-border-color-selected": {
+ "value": "var(--spectrum-swatch-inner-border-color-selected)",
+ "description": "Used by `.spectrum-Swatch.is-selected`.
Defaults to `var(--spectrum-swatch-inner-border-color-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-swatch-border-thickness-selected": {
+ "value": "var(--spectrum-swatch-border-thickness-selected)",
+ "description": "Used by `.spectrum-Swatch.is-selected .spectrum-Swatch-fill`, `.spectrum-Swatch:before`, `.spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill`.
Defaults to `var(--spectrum-swatch-border-thickness-selected)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-swatch-slash-thickness": {
+ "value": "var(--spectrum-swatch-slash-thickness)",
+ "description": "Used by `.spectrum-Swatch.is-nothing .spectrum-Swatch-fill:after`.
Defaults to `var(--spectrum-swatch-slash-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-swatch-slash-icon-color": {
+ "value": "var(--spectrum-swatch-slash-icon-color)",
+ "description": "Used by `.spectrum-Swatch.is-nothing .spectrum-Swatch-fill:after`.
Defaults to `var(--spectrum-swatch-slash-icon-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-swatch-border-color-selected": {
+ "value": "var(--spectrum-swatch-border-color-selected)",
+ "description": "Used by `.spectrum-Swatch:before`.
Defaults to `var(--spectrum-swatch-border-color-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-swatch-focus-indicator-gap": {
+ "value": "var(--spectrum-swatch-focus-indicator-gap)",
+ "description": "Used by `.spectrum-Swatch:after`.
Defaults to `var(--spectrum-swatch-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-swatch-focus-indicator-thickness": {
+ "value": "var(--spectrum-swatch-focus-indicator-thickness)",
+ "description": "Used by `.spectrum-Swatch:after`.
Defaults to `var(--spectrum-swatch-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-swatch-focus-indicator-color": {
+ "value": "var(--spectrum-swatch-focus-indicator-color)",
+ "description": "Used by `.spectrum-Swatch:after`.
Defaults to `var(--spectrum-swatch-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-swatch-focus-indicator-border-radius": {
+ "value": "var(--spectrum-swatch-focus-indicator-border-radius)",
+ "description": "Used by `.spectrum-Swatch:after`.
Defaults to `var(--spectrum-swatch-focus-indicator-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-animation-duration-100": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Used by `.spectrum-Swatch:after`, `.spectrum-Swatch-image`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-swatch-border-thickness": {
+ "value": "var(--spectrum-swatch-border-thickness)",
+ "description": "Used by `.spectrum-Swatch-fill:before`, `.spectrum-Swatch--lightBorder .spectrum-Swatch-fill:before`.
Defaults to `var(--spectrum-swatch-border-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-swatch-border-color": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `.spectrum-Swatch-fill:before`.
Defaults to `var(--spectrum-swatch-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-swatch-border-color-light": {
+ "value": "var(--spectrum-swatch-border-color-light)",
+ "description": "Used by `.spectrum-Swatch--lightBorder .spectrum-Swatch-fill:before`.
Defaults to `var(--spectrum-swatch-border-color-light)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-swatch-disabled-icon-color": {
+ "value": "var(--spectrum-swatch-disabled-icon-color)",
+ "description": "Used by `.spectrum-Swatch-disabledIcon`, `.spectrum-Swatch-disabledIcon path:first-child`.
Defaults to `var(--spectrum-swatch-disabled-icon-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-swatch-icon-border-color": {
+ "value": "var(--spectrum-swatch-icon-border-color)",
+ "description": "Used by `.spectrum-Swatch-disabledIcon path:last-child`.
Defaults to `var(--spectrum-swatch-icon-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-swatch-border-color-opacity": {
+ "description": "Used by `--system-swatch-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-swatch-size": {
+ "description": "Defined in `.spectrum-Swatch, .spectrum-Swatch--sizeS`, `.spectrum-Swatch--sizeXS`, `.spectrum-Swatch--sizeM`, `.spectrum-Swatch--sizeL`.
Used by `.spectrum-Swatch`, `.spectrum-Swatch--rectangle`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-size-small": {
+ "value": "24px",
+ "description": "Used by `--spectrum-swatch-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-disabled-icon-size": {
+ "description": "Defined in `.spectrum-Swatch, .spectrum-Swatch--sizeS`, `.spectrum-Swatch--sizeXS`, `.spectrum-Swatch--sizeM`, `.spectrum-Swatch--sizeL`.
Used by `.spectrum-Swatch .spectrum-Swatch-disabledIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-slash-thickness": {
+ "description": "Defined in `.spectrum-Swatch, .spectrum-Swatch--sizeS`, `.spectrum-Swatch--sizeXS`, `.spectrum-Swatch--sizeM`, `.spectrum-Swatch--sizeL`.
Used by `.spectrum-Swatch.is-nothing .spectrum-Swatch-fill:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-slash-thickness-small": {
+ "value": "3px",
+ "description": "Used by `--spectrum-swatch-slash-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-size-extra-small": {
+ "value": "16px",
+ "description": "Used by `--spectrum-swatch-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-slash-thickness-extra-small": {
+ "value": "2px",
+ "description": "Used by `--spectrum-swatch-slash-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-size-medium": {
+ "value": "32px",
+ "description": "Used by `--spectrum-swatch-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-slash-thickness-medium": {
+ "value": "4px",
+ "description": "Used by `--spectrum-swatch-slash-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-size-large": {
+ "value": "40px",
+ "description": "Used by `--spectrum-swatch-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-slash-thickness-large": {
+ "value": "5px",
+ "description": "Used by `--spectrum-swatch-slash-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-focus-indicator-border-radius": {
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-icon-border-color": {
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch-disabledIcon path:last-child`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-swatch-disabled-icon-border-opacity": {
+ "value": "0.51",
+ "description": "Used by `--spectrum-swatch-icon-border-color`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-disabled-icon-color": {
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch-disabledIcon`, `.spectrum-Swatch-disabledIcon path:first-child`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-swatch-border-thickness": {
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch-fill:before`, `.spectrum-Swatch--lightBorder .spectrum-Swatch-fill:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-border-thickness-selected": {
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch.is-selected .spectrum-Swatch-fill`, `.spectrum-Swatch:before`, `.spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-focus-indicator-thickness": {
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-focus-indicator-gap": {
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-border-color-selected": {
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-swatch-dash-icon-color": {
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch.is-mixedValue .spectrum-Swatch-mixedValueIcon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-swatch-slash-icon-color": {
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch.is-nothing .spectrum-Swatch-fill:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-swatch-focus-indicator-color": {
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-swatch-border-radius": {
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch, .spectrum-Swatch:before`, `.spectrum-Swatch-fill, .spectrum-Swatch-fill:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-inner-border-color-selected": {
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch.is-selected`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-swatch-border-color": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch-fill:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-swatch-border-color-light": {
+ "description": "Used by `.spectrum-Swatch--lightBorder .spectrum-Swatch-fill:before`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-1000-rgb": {
+ "description": "Used by `--system-swatch-border-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--system-swatch-inner-border-color-selected`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-75": {
+ "value": "4px",
+ "description": "Used by `--system-swatch-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-75": {
+ "value": "16px",
+ "description": "Used by `--spectrum-swatch-disabled-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-50": {
+ "value": "14px",
+ "description": "Used by `--spectrum-swatch-disabled-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-swatch-disabled-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-200": {
+ "value": "22px",
+ "description": "Used by `--spectrum-swatch-disabled-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-black-rgb": {
+ "description": "Used by `--spectrum-swatch-icon-border-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--spectrum-swatch-disabled-icon-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--spectrum-swatch-border-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-swatch-border-thickness-selected`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-swatch-focus-indicator-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-swatch-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-900": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Used by `--spectrum-swatch-border-color-selected`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-800": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Used by `--spectrum-swatch-dash-icon-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-red-900": {
+ "value": "light-dark(rgb(215, 50, 32), rgb(252, 67, 46))",
+ "description": "Used by `--spectrum-swatch-slash-icon-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-swatch-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-picked-color": {
+ "description": "Used by `.spectrum-Swatch.is-mixedValue .spectrum-Swatch-fill`, `.spectrum-Swatch.is-nothing .spectrum-Swatch-fill`, `.spectrum-Swatch-fill:before`, `.spectrum-Swatch--noBorder .spectrum-Swatch-fill:before`, `.spectrum-Swatch-mixedValueIcon`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `.spectrum-Swatch:after`, `.spectrum-Swatch-image`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-swatch-border-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-swatch-border-color`.",
+ "control": "color"
+ },
+ "system-swatch-inner-border-color-selected": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-swatch-inner-border-color-selected`.",
+ "control": "color"
+ },
+ "system-swatch-border-radius": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-swatch-border-radius`.",
+ "control": "text"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-swatch-disabled-icon-color": {
+ "value": "var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch-disabledIcon`, `.spectrum-Swatch-disabledIcon path:first-child`.
Defaults to `var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-swatch-focus-indicator-color": {
+ "value": "var(--mod-swatch-focus-indicator-color, var(--spectrum-swatch-focus-indicator-color))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch:after`.
Defaults to `var(--mod-swatch-focus-indicator-color, var(--spectrum-swatch-focus-indicator-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-swatch-background-color-selected": {
+ "value": "var(--mod-swatch-inner-border-color-selected, var(--spectrum-swatch-inner-border-color-selected))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch.is-selected`.
Defaults to `var(--mod-swatch-inner-border-color-selected, var(--spectrum-swatch-inner-border-color-selected))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-swatch-border-color-selected": {
+ "value": "var(--mod-swatch-border-color-selected, var(--spectrum-swatch-border-color-selected))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch:before`.
Defaults to `var(--mod-swatch-border-color-selected, var(--spectrum-swatch-border-color-selected))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-swatch-border-color": {
+ "value": "var(--mod-swatch-border-color, var(--spectrum-swatch-border-color))",
+ "description": "Defined in `.spectrum-Swatch`, `.spectrum-Swatch.is-disabled, .spectrum-Swatch[disabled]`.
Used by `.spectrum-Swatch-fill:before`.
Defaults to `var(--mod-swatch-border-color, var(--spectrum-swatch-border-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-swatch-fill-foreground-color": {
+ "value": "var(--mod-swatch-slash-icon-color, var(--spectrum-swatch-slash-icon-color))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch.is-nothing .spectrum-Swatch-fill:after`.
Defaults to `var(--mod-swatch-slash-icon-color, var(--spectrum-swatch-slash-icon-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/swatch/stories/swatch.stories.js b/components/swatch/stories/swatch.stories.js
index d3d1b44b1c2..1d19dd65f58 100644
--- a/components/swatch/stories/swatch.stories.js
+++ b/components/swatch/stories/swatch.stories.js
@@ -1,11 +1,13 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isSelected, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { SwatchGroup } from "./swatch.test.js";
import { BorderGroup, DisabledGroup, EmptyGroup, RoundingGroup, SizingGroup, Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* A swatch shows a small sample of a fill--such as a color, gradient, texture, or material--that is intended to be applied to an object.
*
@@ -105,6 +107,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/swatchgroup/dist/metadata.json b/components/swatchgroup/dist/metadata.json
index 74adf019d54..1780299a054 100644
--- a/components/swatchgroup/dist/metadata.json
+++ b/components/swatchgroup/dist/metadata.json
@@ -5,18 +5,52 @@
".spectrum-SwatchGroup--compact",
".spectrum-SwatchGroup--spacious"
],
- "modifiers": [
- "--mod-swatchgroup-spacing-compact",
- "--mod-swatchgroup-spacing-regular",
- "--mod-swatchgroup-spacing-spacious"
- ],
- "component": ["--spectrum-swatchgroup-spacing"],
- "global": [
- "--spectrum-spacing-100",
- "--spectrum-spacing-50",
- "--spectrum-spacing-75"
- ],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-swatchgroup-spacing-regular": {
+ "value": "var(--spectrum-swatchgroup-spacing)",
+ "description": "Defined in `.spectrum-SwatchGroup--compact`, `.spectrum-SwatchGroup--spacious`.
Used by `.spectrum-SwatchGroup`.
Defaults to `var(--spectrum-swatchgroup-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-swatchgroup-spacing-compact": {
+ "description": "Used by `--mod-swatchgroup-spacing-regular`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-swatchgroup-spacing-spacious": {
+ "description": "Used by `--mod-swatchgroup-spacing-regular`.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-swatchgroup-spacing": {
+ "description": "Defined in `.spectrum-SwatchGroup`, `.spectrum-SwatchGroup--compact`, `.spectrum-SwatchGroup--spacious`.
Used by `.spectrum-SwatchGroup`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-spacing-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-swatchgroup-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-50": {
+ "value": "2px",
+ "description": "Used by `--spectrum-swatchgroup-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-swatchgroup-spacing`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/swatchgroup/stories/swatchgroup.stories.js b/components/swatchgroup/stories/swatchgroup.stories.js
index 2a842f06695..eaf646045ee 100644
--- a/components/swatchgroup/stories/swatchgroup.stories.js
+++ b/components/swatchgroup/stories/swatchgroup.stories.js
@@ -1,11 +1,13 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { default as Swatch } from "@spectrum-css/swatch/stories/swatch.stories.js";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { SwatchgroupGroup } from "./swatchgroup.test.js";
import { RoundingTemplate, Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The swatch group component is a collection of [swatches](?path=/docs/components-swatch--docs).
*
@@ -118,6 +120,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/swatchgroup/stories/template.js b/components/swatchgroup/stories/template.js
index 01c059998bd..caa7978e606 100644
--- a/components/swatchgroup/stories/template.js
+++ b/components/swatchgroup/stories/template.js
@@ -9,6 +9,7 @@ import "../index.css";
export const Template = ({
rootClass = "spectrum-SwatchGroup",
+ id = getRandomId("swatch-group"),
customClasses = [],
size = "m",
density = "regular",
@@ -19,7 +20,6 @@ export const Template = ({
customStyles = {},
isDisabled =false,
isSelected = false,
- id = getRandomId("swatchgroup"),
} = {}, context = {}) => html`
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-switch-height": {
+ "value": "var(--spectrum-switch-min-height)",
+ "description": "Used by `.spectrum-Switch`, `.spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-min-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-switch-control-width": {
+ "value": "var(--spectrum-switch-control-width)",
+ "description": "Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch-input:checked + .spectrum-Switch-switch:dir(rtl):before, [dir=\"rtl\"] .spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-control-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`, `.spectrum-Switch-switch:after`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-switch-label-color-default": {
+ "value": "var(--spectrum-switch-label-color-default)",
+ "description": "Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-label-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-control-label-spacing": {
+ "value": "var(--spectrum-switch-control-label-spacing)",
+ "description": "Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-control-label-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-switch-spacing-top-to-label": {
+ "value": "var(--spectrum-switch-spacing-top-to-label)",
+ "description": "Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-spacing-top-to-label)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-switch-font-size": {
+ "value": "var(--spectrum-switch-font-size)",
+ "description": "Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-animation-duration-200": {
+ "value": "var(--spectrum-animation-duration-200)",
+ "description": "Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-animation-duration-200)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-switch-control-height": {
+ "value": "var(--spectrum-switch-control-height)",
+ "description": "Used by `.spectrum-Switch-switch`, `.spectrum-Switch-switch:before`, `.spectrum-Switch-switch:after`.
Defaults to `var(--spectrum-switch-control-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-switch-spacing-top-to-control": {
+ "value": "var(--spectrum-switch-spacing-top-to-control)",
+ "description": "Used by `.spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-spacing-top-to-control)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-animation-duration-100": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Used by `.spectrum-Switch-switch`, `.spectrum-Switch-switch:before`, `.spectrum-Switch-switch:after`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-border-width-200": {
+ "value": "2px",
+ "description": "Used by `.spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-switch-background-color": {
+ "value": "var(--spectrum-switch-background-color)",
+ "description": "Used by `.spectrum-Switch .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-handle-background-color": {
+ "value": "var(--spectrum-switch-handle-background-color)",
+ "description": "Used by `.spectrum-Switch .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-handle-border-color-default": {
+ "value": "var(--spectrum-switch-handle-border-color-default)",
+ "description": "Used by `.spectrum-Switch .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-handle-border-color-down": {
+ "value": "var(--spectrum-switch-handle-border-color-down)",
+ "description": "Used by `.spectrum-Switch:active .spectrum-Switch-input + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-border-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-label-color-down": {
+ "value": "var(--spectrum-switch-label-color-down)",
+ "description": "Used by `.spectrum-Switch:active .spectrum-Switch-input ~ .spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-label-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-background-color-selected-down": {
+ "value": "var(--spectrum-switch-background-color-selected-down)",
+ "description": "Used by `.spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-background-color-selected-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-handle-border-color-selected-down": {
+ "value": "var(--spectrum-switch-handle-border-color-selected-down)",
+ "description": "Used by `.spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-border-color-selected-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-focus-indicator-thickness": {
+ "value": "var(--spectrum-switch-focus-indicator-thickness)",
+ "description": "Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`.
Defaults to `var(--spectrum-switch-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-switch-focus-indicator-color": {
+ "value": "var(--spectrum-switch-focus-indicator-color)",
+ "description": "Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`.
Defaults to `var(--spectrum-switch-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-handle-border-color-focus": {
+ "value": "var(--spectrum-switch-handle-border-color-focus)",
+ "description": "Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-border-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-background-color-selected-focus": {
+ "value": "var(--spectrum-switch-background-color-selected-focus)",
+ "description": "Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-background-color-selected-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-handle-border-color-selected-focus": {
+ "value": "var(--spectrum-switch-handle-border-color-selected-focus)",
+ "description": "Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-border-color-selected-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-label-color-focus": {
+ "value": "var(--spectrum-switch-label-color-focus)",
+ "description": "Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-label-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-handle-border-color-hover": {
+ "value": "var(--spectrum-switch-handle-border-color-hover)",
+ "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-input + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-label-color-hover": {
+ "value": "var(--spectrum-switch-label-color-hover)",
+ "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-input ~ .spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-label-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-background-color-selected-hover": {
+ "value": "var(--spectrum-switch-background-color-selected-hover)",
+ "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-background-color-selected-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-handle-border-color-selected-hover": {
+ "value": "var(--spectrum-switch-handle-border-color-selected-hover)",
+ "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-border-color-selected-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-background-color-disabled": {
+ "value": "var(--spectrum-switch-background-color-disabled)",
+ "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`, `.spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-background-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-handle-border-color-disabled": {
+ "value": "var(--spectrum-switch-handle-border-color-disabled)",
+ "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch-input:disabled + .spectrum-Switch-switch:before, .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before`, `.spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before, .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-border-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-label-color-disabled": {
+ "value": "var(--spectrum-switch-label-color-disabled)",
+ "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch:hover .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked ~ .spectrum-Switch-label, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked ~ .spectrum-Switch-label`, `.spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-label-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-background-color-selected-disabled": {
+ "value": "var(--spectrum-switch-background-color-selected-disabled)",
+ "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`, `.spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-background-color-selected-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-background-color-selected-default": {
+ "value": "var(--spectrum-switch-background-color-selected-default)",
+ "description": "Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-background-color-selected-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-handle-border-color-selected-default": {
+ "value": "var(--spectrum-switch-handle-border-color-selected-default)",
+ "description": "Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-border-color-selected-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-switch-label-color-default": {
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--disabled`.
Used by `.spectrum-Switch-label`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-label-color-hover": {
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input ~ .spectrum-Switch-label`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-label-color-down": {
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:active .spectrum-Switch-input ~ .spectrum-Switch-label`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-label-color-focus": {
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-label-color-disabled": {
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch:hover .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked ~ .spectrum-Switch-label, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked ~ .spectrum-Switch-label`, `.spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-background-color-selected-default": {
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`.
Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-background-color-selected-hover": {
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-background-color-selected-down": {
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`.
Used by `.spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-background-color-selected-focus": {
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-background-color-selected-disabled": {
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`, `.spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-focus-indicator-thickness": {
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-focus-indicator-color": {
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-border-color-disabled": {
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch-input:disabled + .spectrum-Switch-switch:before, .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before`, `.spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before, .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-border-color-selected-default": {
+ "description": "Defined in `.spectrum-Switch.spectrum-Switch--emphasized`, `.spectrum-Switch`.
Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-border-color-selected-hover": {
+ "description": "Defined in `.spectrum-Switch.spectrum-Switch--emphasized`, `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-border-color-selected-down": {
+ "description": "Defined in `.spectrum-Switch.spectrum-Switch--emphasized`, `.spectrum-Switch`.
Used by `.spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-border-color-selected-focus": {
+ "description": "Defined in `.spectrum-Switch.spectrum-Switch--emphasized`, `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-min-height": {
+ "description": "Defined in `.spectrum-Switch, .spectrum-Switch--sizeM`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch`, `.spectrum-Switch-switch`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-control-width": {
+ "description": "Defined in `.spectrum-Switch, .spectrum-Switch--sizeM`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch-input:checked + .spectrum-Switch-switch:dir(rtl):before, [dir=\"rtl\"] .spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch-switch`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-control-width-medium": {
+ "value": "26px",
+ "description": "Used by `--spectrum-switch-control-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-control-height": {
+ "description": "Defined in `.spectrum-Switch, .spectrum-Switch--sizeM`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch-switch`, `.spectrum-Switch-switch:before`, `.spectrum-Switch-switch:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-control-height-medium": {
+ "value": "14px",
+ "description": "Used by `--spectrum-switch-control-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-control-label-spacing": {
+ "description": "Defined in `.spectrum-Switch, .spectrum-Switch--sizeM`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-spacing-top-to-control": {
+ "description": "Defined in `.spectrum-Switch, .spectrum-Switch--sizeM`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch-switch`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-top-to-control-medium": {
+ "value": "9px",
+ "description": "Used by `--spectrum-switch-spacing-top-to-control`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-spacing-top-to-label": {
+ "description": "Defined in `.spectrum-Switch, .spectrum-Switch--sizeM`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-font-size": {
+ "description": "Defined in `.spectrum-Switch, .spectrum-Switch--sizeM`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-control-width-small": {
+ "value": "23px",
+ "description": "Used by `--spectrum-switch-control-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-control-height-small": {
+ "value": "12px",
+ "description": "Used by `--spectrum-switch-control-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-top-to-control-small": {
+ "value": "6px",
+ "description": "Used by `--spectrum-switch-spacing-top-to-control`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-control-width-large": {
+ "value": "29px",
+ "description": "Used by `--spectrum-switch-control-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-control-height-large": {
+ "value": "16px",
+ "description": "Used by `--spectrum-switch-control-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-top-to-control-large": {
+ "value": "12px",
+ "description": "Used by `--spectrum-switch-spacing-top-to-control`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-control-width-extra-large": {
+ "value": "33px",
+ "description": "Used by `--spectrum-switch-control-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-control-height-extra-large": {
+ "value": "18px",
+ "description": "Used by `--spectrum-switch-control-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-top-to-control-extra-large": {
+ "value": "15px",
+ "description": "Used by `--spectrum-switch-spacing-top-to-control`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-background-color": {
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-switch`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-background-color": {
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-switch:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-border-color-default": {
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-switch:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-border-color-down": {
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:active .spectrum-Switch-input + .spectrum-Switch-switch:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-border-color-focus": {
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-border-color-hover": {
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input + .spectrum-Switch-switch:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-background-color-disabled": {
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`, `.spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-600": {
+ "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+ "description": "Used by `--system-switch-handle-border-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-700": {
+ "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+ "description": "Used by `--system-switch-handle-border-color-hover`, `--system-switch-handle-border-color-focus`, `--system-switch-handle-border-color-selected-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-800": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Used by `--system-switch-handle-border-color-down`, `--system-switch-handle-border-color-selected-hover`, `--system-switch-handle-border-color-selected-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-900": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Used by `--system-switch-handle-border-color-selected-down`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--system-switch-background-color`, `--system-switch-background-color-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-50": {
+ "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))",
+ "description": "Used by `--system-switch-handle-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-switch-label-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-switch-label-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-switch-label-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-switch-label-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-switch-label-color-disabled`, `--spectrum-switch-background-color-selected-disabled`, `--spectrum-switch-handle-border-color-disabled`, `--spectrum-switch-label-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-switch-background-color-selected-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-switch-background-color-selected-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-switch-background-color-selected-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-switch-background-color-selected-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-switch-focus-indicator-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-switch-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-color-900": {
+ "value": "var(--spectrum-blue-900)",
+ "description": "Used by `--spectrum-switch-background-color-selected-default`, `--spectrum-switch-handle-border-color-selected-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-color-1000": {
+ "value": "var(--spectrum-blue-1000)",
+ "description": "Used by `--spectrum-switch-background-color-selected-hover`, `--spectrum-switch-background-color-selected-focus`, `--spectrum-switch-handle-border-color-selected-hover`, `--spectrum-switch-handle-border-color-selected-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-color-1100": {
+ "value": "var(--spectrum-blue-1100)",
+ "description": "Used by `--spectrum-switch-background-color-selected-down`, `--spectrum-switch-handle-border-color-selected-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-switch-min-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-control-100": {
+ "value": "10px",
+ "description": "Used by `--spectrum-switch-control-label-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-switch-spacing-top-to-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-switch-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-switch-min-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-control-75": {
+ "value": "9px",
+ "description": "Used by `--spectrum-switch-control-label-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-switch-spacing-top-to-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-switch-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-switch-min-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-control-200": {
+ "value": "11px",
+ "description": "Used by `--spectrum-switch-control-label-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-switch-spacing-top-to-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-switch-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-switch-min-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-control-300": {
+ "value": "13px",
+ "description": "Used by `--spectrum-switch-control-label-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-300": {
+ "value": "12px",
+ "description": "Used by `--spectrum-switch-spacing-top-to-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-switch-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`, `.spectrum-Switch-switch:after`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-Switch-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-200": {
+ "description": "Used by `.spectrum-Switch-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Used by `.spectrum-Switch-switch`, `.spectrum-Switch-switch:before`, `.spectrum-Switch-switch:after`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `.spectrum-Switch-switch:before`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-switch-handle-border-color-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-handle-border-color-default`.",
+ "control": "color"
+ },
+ "system-switch-handle-border-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-handle-border-color-hover`.",
+ "control": "color"
+ },
+ "system-switch-handle-border-color-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-handle-border-color-down`.",
+ "control": "color"
+ },
+ "system-switch-handle-border-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-handle-border-color-focus`.",
+ "control": "color"
+ },
+ "system-switch-handle-border-color-selected-default": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-handle-border-color-selected-default`.",
+ "control": "color"
+ },
+ "system-switch-handle-border-color-selected-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-handle-border-color-selected-hover`.",
+ "control": "color"
+ },
+ "system-switch-handle-border-color-selected-down": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-handle-border-color-selected-down`.",
+ "control": "color"
+ },
+ "system-switch-handle-border-color-selected-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-handle-border-color-selected-focus`.",
+ "control": "color"
+ },
+ "system-switch-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-background-color`.",
+ "control": "color"
+ },
+ "system-switch-background-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-background-color-disabled`.",
+ "control": "color"
+ },
+ "system-switch-handle-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-handle-background-color`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-switch-label-color-default": {
+ "value": "var(--mod-switch-label-color-default, var(--spectrum-switch-label-color-default))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-label`.
Defaults to `var(--mod-switch-label-color-default, var(--spectrum-switch-label-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-background-color": {
+ "value": "var(--mod-switch-background-color, var(--spectrum-switch-background-color))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-switch`.
Defaults to `var(--mod-switch-background-color, var(--spectrum-switch-background-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-background-color": {
+ "value": "var(--mod-switch-handle-background-color, var(--spectrum-switch-handle-background-color))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-background-color, var(--spectrum-switch-handle-background-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-border-color-default": {
+ "value": "var(--mod-switch-handle-border-color-default, var(--spectrum-switch-handle-border-color-default))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-border-color-default, var(--spectrum-switch-handle-border-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-border-color-down": {
+ "value": "var(--mod-switch-handle-border-color-down, var(--spectrum-switch-handle-border-color-down))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:active .spectrum-Switch-input + .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-border-color-down, var(--spectrum-switch-handle-border-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-label-color-down": {
+ "value": "var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:active .spectrum-Switch-input ~ .spectrum-Switch-label`.
Defaults to `var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-background-color-selected-down": {
+ "value": "var(--mod-switch-background-color-selected-down, var(--spectrum-switch-background-color-selected-down))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch`.
Defaults to `var(--mod-switch-background-color-selected-down, var(--spectrum-switch-background-color-selected-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-border-color-selected-down": {
+ "value": "var(--mod-switch-handle-border-color-selected-down, var(--spectrum-switch-handle-border-color-selected-down))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-border-color-selected-down, var(--spectrum-switch-handle-border-color-selected-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-focus-indicator-color": {
+ "value": "var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`.
Defaults to `var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-border-color-focus": {
+ "value": "var(--mod-switch-handle-border-color-focus, var(--spectrum-switch-handle-border-color-focus))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-border-color-focus, var(--spectrum-switch-handle-border-color-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-background-color-selected-focus": {
+ "value": "var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch`.
Defaults to `var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-border-color-selected-focus": {
+ "value": "var(--mod-switch-handle-border-color-selected-focus, var(--spectrum-switch-handle-border-color-selected-focus))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-border-color-selected-focus, var(--spectrum-switch-handle-border-color-selected-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-label-color-focus": {
+ "value": "var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label`.
Defaults to `var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-border-color-hover": {
+ "value": "var(--mod-switch-handle-border-color-hover, var(--spectrum-switch-handle-border-color-hover))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input + .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-border-color-hover, var(--spectrum-switch-handle-border-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-label-color-hover": {
+ "value": "var(--mod-switch-label-color-hover, var(--spectrum-switch-label-color-hover))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input ~ .spectrum-Switch-label`.
Defaults to `var(--mod-switch-label-color-hover, var(--spectrum-switch-label-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-background-color-selected-hover": {
+ "value": "var(--mod-switch-background-color-selected-hover, var(--spectrum-switch-background-color-selected-hover))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch`.
Defaults to `var(--mod-switch-background-color-selected-hover, var(--spectrum-switch-background-color-selected-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-border-color-selected-hover": {
+ "value": "var(--mod-switch-handle-border-color-selected-hover, var(--spectrum-switch-handle-border-color-selected-hover))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-border-color-selected-hover, var(--spectrum-switch-handle-border-color-selected-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-border-color-disabled": {
+ "value": "var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch-input:disabled + .spectrum-Switch-switch:before, .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before`, `.spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before, .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-label-color-disabled": {
+ "value": "var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch:hover .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked ~ .spectrum-Switch-label, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked ~ .spectrum-Switch-label`, `.spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`.
Defaults to `var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-background-color-selected-disabled": {
+ "value": "var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`, `.spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`.
Defaults to `var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-background-color-selected-default": {
+ "value": "var(--mod-switch-background-color-selected-default, var(--spectrum-switch-background-color-selected-default))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch`.
Defaults to `var(--mod-switch-background-color-selected-default, var(--spectrum-switch-background-color-selected-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-border-color-selected-default": {
+ "value": "var(--mod-switch-handle-border-color-selected-default, var(--spectrum-switch-handle-border-color-selected-default))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-border-color-selected-default, var(--spectrum-switch-handle-border-color-selected-default))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/switch/stories/switch.stories.js b/components/switch/stories/switch.stories.js
index 5286b307882..7b853c606ce 100644
--- a/components/switch/stories/switch.stories.js
+++ b/components/switch/stories/switch.stories.js
@@ -1,11 +1,13 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isChecked, isDisabled, isEmphasized, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { SwitchGroup } from "./switch.test.js";
import { DocsSwitchGroup, Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* A switch is used to turn an option on or off. Switches allow users to select the state of a single option at a time and are best used for communicating activation.
*/
@@ -45,6 +47,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/table/dist/metadata.json b/components/table/dist/metadata.json
index e319678fb13..a91fb6395e9 100644
--- a/components/table/dist/metadata.json
+++ b/components/table/dist/metadata.json
@@ -29,8 +29,8 @@
".spectrum-Table-cell--alignRight",
".spectrum-Table-cell--collapsible",
".spectrum-Table-cell--divider",
- ".spectrum-Table-cell.is-focused",
".spectrum-Table-cell:focus-visible",
+ ".spectrum-Table-cell.is-focused",
".spectrum-Table-checkboxCell",
".spectrum-Table-checkboxCell .spectrum-Table-checkbox",
".spectrum-Table-checkboxCell.spectrum-Table-cell .spectrum-Table-checkbox",
@@ -39,30 +39,30 @@
".spectrum-Table-collapseInner .spectrum-Table-collapseContent",
".spectrum-Table-columnTitle",
".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon",
- ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused",
".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:active",
".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:after",
".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus",
".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible",
".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus:hover",
".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:hover",
+ ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused",
".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon[aria-expanded=\"true\"]",
".spectrum-Table-head",
".spectrum-Table-head [role=\"row\"]",
".spectrum-Table-headCell",
".spectrum-Table-headCell .spectrum-Table-menuIcon",
".spectrum-Table-headCell .spectrum-Table-sortedIcon",
+ ".spectrum-Table-headCell:focus-visible",
".spectrum-Table-headCell.is-focused",
".spectrum-Table-headCell.is-sortable",
- ".spectrum-Table-headCell.is-sortable.is-keyboardFocused",
".spectrum-Table-headCell.is-sortable:active",
".spectrum-Table-headCell.is-sortable:focus",
".spectrum-Table-headCell.is-sortable:focus-visible",
".spectrum-Table-headCell.is-sortable:focus:hover",
".spectrum-Table-headCell.is-sortable:hover",
+ ".spectrum-Table-headCell.is-sortable.is-keyboardFocused",
".spectrum-Table-headCell.is-sorted-asc .spectrum-Table-sortedIcon",
".spectrum-Table-headCell.is-sorted-desc .spectrum-Table-sortedIcon",
- ".spectrum-Table-headCell:focus-visible",
".spectrum-Table-main",
".spectrum-Table-menuIcon",
".spectrum-Table-row",
@@ -87,16 +87,6 @@
".spectrum-Table-row--thumbnail .spectrum-Table-cell",
".spectrum-Table-row--thumbnail .spectrum-Table-cell--thumbnail",
".spectrum-Table-row--thumbnail.spectrum-Table-row--collapsible",
- ".spectrum-Table-row.is-drop-target",
- ".spectrum-Table-row.is-drop-target .spectrum-Table-cell",
- ".spectrum-Table-row.is-drop-target .spectrum-Table-checkbox .spectrum-Checkbox-box:before",
- ".spectrum-Table-row.is-focused",
- ".spectrum-Table-row.is-focused .spectrum-Table-checkbox .spectrum-Checkbox-box:before",
- ".spectrum-Table-row.is-selected",
- ".spectrum-Table-row.is-selected .spectrum-Table-checkbox .spectrum-Checkbox-box:before",
- ".spectrum-Table-row.is-selected.is-focused",
- ".spectrum-Table-row.is-selected:focus-visible",
- ".spectrum-Table-row.is-selected:hover",
".spectrum-Table-row:active",
".spectrum-Table-row:first-child",
".spectrum-Table-row:first-child .spectrum-Table-cell:first-child",
@@ -109,6 +99,16 @@
".spectrum-Table-row:last-child",
".spectrum-Table-row:last-child .spectrum-Table-cell:first-child",
".spectrum-Table-row:last-child .spectrum-Table-cell:last-child",
+ ".spectrum-Table-row.is-drop-target",
+ ".spectrum-Table-row.is-drop-target .spectrum-Table-cell",
+ ".spectrum-Table-row.is-drop-target .spectrum-Table-checkbox .spectrum-Checkbox-box:before",
+ ".spectrum-Table-row.is-focused",
+ ".spectrum-Table-row.is-focused .spectrum-Table-checkbox .spectrum-Checkbox-box:before",
+ ".spectrum-Table-row.is-selected",
+ ".spectrum-Table-row.is-selected .spectrum-Table-checkbox .spectrum-Checkbox-box:before",
+ ".spectrum-Table-row.is-selected:focus-visible",
+ ".spectrum-Table-row.is-selected:hover",
+ ".spectrum-Table-row.is-selected.is-focused",
".spectrum-Table-scroller",
".spectrum-Table-scroller .spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child",
".spectrum-Table-scroller .spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child",
@@ -125,347 +125,1893 @@
".spectrum-Table:not(.spectrum-Table-scroller)",
"[dir=\"rtl\"] .spectrum-Table"
],
- "modifiers": [
- "--mod-table-border-color",
- "--mod-table-border-radius",
- "--mod-table-border-radius--quiet",
- "--mod-table-border-width",
- "--mod-table-cell-inline-space",
- "--mod-table-checkbox-to-text",
- "--mod-table-collapsible-disclosure-inline-spacing",
- "--mod-table-collapsible-icon-animation-duration",
- "--mod-table-current-header-height",
- "--mod-table-cursor-header-default",
- "--mod-table-cursor-header-sortable",
- "--mod-table-cursor-row-default",
- "--mod-table-cursor-section-header",
- "--mod-table-default-vertical-align",
- "--mod-table-disclosure-icon-size",
- "--mod-table-divider-color",
- "--mod-table-drop-zone-background-color",
- "--mod-table-drop-zone-outline-color",
- "--mod-table-edge-to-content",
- "--mod-table-focus-indicator-color",
- "--mod-table-focus-indicator-thickness",
- "--mod-table-header-background-color",
- "--mod-table-header-background-color--quiet",
- "--mod-table-header-background-color-scrollable",
- "--mod-table-header-bottom-to-text",
- "--mod-table-header-checkbox-block-spacing",
- "--mod-table-header-font-family",
- "--mod-table-header-font-size",
- "--mod-table-header-font-weight",
- "--mod-table-header-line-height",
- "--mod-table-header-text-color",
- "--mod-table-header-text-transform",
- "--mod-table-header-top-to-text",
- "--mod-table-header-vertical-align",
- "--mod-table-icon-color-active",
- "--mod-table-icon-color-default",
- "--mod-table-icon-color-focus",
- "--mod-table-icon-color-focus-hover",
- "--mod-table-icon-color-hover",
- "--mod-table-icon-color-key-focus",
- "--mod-table-icon-to-text",
- "--mod-table-min-header-height",
- "--mod-table-min-row-height",
- "--mod-table-min-row-height--compact",
- "--mod-table-min-row-height--spacious",
- "--mod-table-outer-border-inline-width",
- "--mod-table-outer-border-inline-width--quiet",
- "--mod-table-row-active-color",
- "--mod-table-row-background-color",
- "--mod-table-row-background-color--quiet",
- "--mod-table-row-background-color-hover",
- "--mod-table-row-bottom-to-text",
- "--mod-table-row-bottom-to-text--compact",
- "--mod-table-row-bottom-to-text--spacious",
- "--mod-table-row-checkbox-block-spacing",
- "--mod-table-row-checkbox-block-spacing--compact",
- "--mod-table-row-checkbox-block-spacing--spacious",
- "--mod-table-row-font-size",
- "--mod-table-row-font-weight",
- "--mod-table-row-line-height",
- "--mod-table-row-text-color",
- "--mod-table-row-top-to-text",
- "--mod-table-row-top-to-text--compact",
- "--mod-table-row-top-to-text--spacious",
- "--mod-table-section-header-background-color",
- "--mod-table-section-header-block-end-spacing",
- "--mod-table-section-header-block-start-spacing",
- "--mod-table-section-header-font-family",
- "--mod-table-section-header-font-size",
- "--mod-table-section-header-font-style",
- "--mod-table-section-header-font-weight",
- "--mod-table-section-header-line-height",
- "--mod-table-section-header-min-height",
- "--mod-table-section-header-text-color",
- "--mod-table-selected-row-background-color",
- "--mod-table-selected-row-background-color-focus",
- "--mod-table-selected-row-background-color-non-emphasized",
- "--mod-table-selected-row-background-color-non-emphasized-focus",
- "--mod-table-sort-icon-inline-end-spacing",
- "--mod-table-sort-icon-inline-start-spacing",
- "--mod-table-summary-row-background-color",
- "--mod-table-summary-row-font-family",
- "--mod-table-summary-row-font-size",
- "--mod-table-summary-row-font-style",
- "--mod-table-summary-row-font-weight",
- "--mod-table-summary-row-line-height",
- "--mod-table-summary-row-text-color",
- "--mod-table-thumbnail-block-spacing",
- "--mod-table-thumbnail-block-spacing-compact",
- "--mod-table-thumbnail-block-spacing-spacious",
- "--mod-table-thumbnail-size",
- "--mod-table-thumbnail-size-compact",
- "--mod-table-thumbnail-size-spacious",
- "--mod-table-thumbnail-to-text",
- "--mod-table-transition-duration"
- ],
- "component": [
- "--spectrum-table-border-color",
- "--spectrum-table-border-divider-width",
- "--spectrum-table-border-radius",
- "--spectrum-table-border-width",
- "--spectrum-table-cell-background-color",
- "--spectrum-table-cell-inline-space",
- "--spectrum-table-checkbox-to-text",
- "--spectrum-table-collapsible-disclosure-inline-spacing",
- "--spectrum-table-collapsible-icon-animation-duration",
- "--spectrum-table-collapsible-tier-indent",
- "--spectrum-table-column-header-row-bottom-to-text-extra-large",
- "--spectrum-table-column-header-row-bottom-to-text-large",
- "--spectrum-table-column-header-row-bottom-to-text-medium",
- "--spectrum-table-column-header-row-bottom-to-text-small",
- "--spectrum-table-column-header-row-top-to-text-extra-large",
- "--spectrum-table-column-header-row-top-to-text-large",
- "--spectrum-table-column-header-row-top-to-text-medium",
- "--spectrum-table-column-header-row-top-to-text-small",
- "--spectrum-table-default-vertical-align",
- "--spectrum-table-disclosure-icon-size",
- "--spectrum-table-divider-color",
- "--spectrum-table-drop-zone-background-color",
- "--spectrum-table-drop-zone-outline-color",
- "--spectrum-table-edge-to-content",
- "--spectrum-table-focus-indicator-color",
- "--spectrum-table-focus-indicator-thickness",
- "--spectrum-table-header-background-color",
- "--spectrum-table-header-bottom-to-text",
- "--spectrum-table-header-checkbox-block-spacing",
- "--spectrum-table-header-font-weight",
- "--spectrum-table-header-row-checkbox-to-top-extra-large",
- "--spectrum-table-header-row-checkbox-to-top-large",
- "--spectrum-table-header-row-checkbox-to-top-medium",
- "--spectrum-table-header-row-checkbox-to-top-small",
- "--spectrum-table-header-text-color",
- "--spectrum-table-header-top-to-text",
- "--spectrum-table-header-vertical-align",
- "--spectrum-table-icon-color",
- "--spectrum-table-icon-color-active",
- "--spectrum-table-icon-color-default",
- "--spectrum-table-icon-color-focus",
- "--spectrum-table-icon-color-focus-hover",
- "--spectrum-table-icon-color-hover",
- "--spectrum-table-icon-color-key-focus",
- "--spectrum-table-icon-to-text",
- "--spectrum-table-min-header-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-hover",
- "--spectrum-table-row-bottom-to-text",
- "--spectrum-table-row-bottom-to-text-extra-large-compact",
- "--spectrum-table-row-bottom-to-text-extra-large-regular",
- "--spectrum-table-row-bottom-to-text-extra-large-spacious",
- "--spectrum-table-row-bottom-to-text-large-compact",
- "--spectrum-table-row-bottom-to-text-large-regular",
- "--spectrum-table-row-bottom-to-text-large-spacious",
- "--spectrum-table-row-bottom-to-text-medium-compact",
- "--spectrum-table-row-bottom-to-text-medium-regular",
- "--spectrum-table-row-bottom-to-text-medium-spacious",
- "--spectrum-table-row-bottom-to-text-small-compact",
- "--spectrum-table-row-bottom-to-text-small-regular",
- "--spectrum-table-row-bottom-to-text-small-spacious",
- "--spectrum-table-row-checkbox-block-spacing",
- "--spectrum-table-row-checkbox-to-top-extra-large-compact",
- "--spectrum-table-row-checkbox-to-top-extra-large-regular",
- "--spectrum-table-row-checkbox-to-top-extra-large-spacious",
- "--spectrum-table-row-checkbox-to-top-large-compact",
- "--spectrum-table-row-checkbox-to-top-large-regular",
- "--spectrum-table-row-checkbox-to-top-large-spacious",
- "--spectrum-table-row-checkbox-to-top-medium-compact",
- "--spectrum-table-row-checkbox-to-top-medium-regular",
- "--spectrum-table-row-checkbox-to-top-medium-spacious",
- "--spectrum-table-row-checkbox-to-top-small-compact",
- "--spectrum-table-row-checkbox-to-top-small-regular",
- "--spectrum-table-row-checkbox-to-top-small-spacious",
- "--spectrum-table-row-down-opacity",
- "--spectrum-table-row-font-family",
- "--spectrum-table-row-font-size",
- "--spectrum-table-row-font-style",
- "--spectrum-table-row-font-weight",
- "--spectrum-table-row-height-extra-large-compact",
- "--spectrum-table-row-height-extra-large-regular",
- "--spectrum-table-row-height-extra-large-spacious",
- "--spectrum-table-row-height-large-compact",
- "--spectrum-table-row-height-large-regular",
- "--spectrum-table-row-height-large-spacious",
- "--spectrum-table-row-height-medium-compact",
- "--spectrum-table-row-height-medium-regular",
- "--spectrum-table-row-height-medium-spacious",
- "--spectrum-table-row-height-small-compact",
- "--spectrum-table-row-height-small-regular",
- "--spectrum-table-row-height-small-spacious",
- "--spectrum-table-row-hover-opacity",
- "--spectrum-table-row-line-height",
- "--spectrum-table-row-text-color",
- "--spectrum-table-row-tier",
- "--spectrum-table-row-top-to-text",
- "--spectrum-table-row-top-to-text-extra-large-compact",
- "--spectrum-table-row-top-to-text-extra-large-regular",
- "--spectrum-table-row-top-to-text-extra-large-spacious",
- "--spectrum-table-row-top-to-text-large-compact",
- "--spectrum-table-row-top-to-text-large-regular",
- "--spectrum-table-row-top-to-text-large-spacious",
- "--spectrum-table-row-top-to-text-medium-compact",
- "--spectrum-table-row-top-to-text-medium-regular",
- "--spectrum-table-row-top-to-text-medium-spacious",
- "--spectrum-table-row-top-to-text-small-compact",
- "--spectrum-table-row-top-to-text-small-regular",
- "--spectrum-table-row-top-to-text-small-spacious",
- "--spectrum-table-section-header-background-color",
- "--spectrum-table-section-header-block-end-spacing",
- "--spectrum-table-section-header-block-start-spacing",
- "--spectrum-table-section-header-font-weight",
- "--spectrum-table-section-header-min-height",
- "--spectrum-table-section-header-row-height-extra-large",
- "--spectrum-table-section-header-row-height-large",
- "--spectrum-table-section-header-row-height-medium",
- "--spectrum-table-section-header-row-height-small",
- "--spectrum-table-selected-cell-background-color",
- "--spectrum-table-selected-cell-background-color-focus",
- "--spectrum-table-selected-row-background-color",
- "--spectrum-table-selected-row-background-color-focus",
- "--spectrum-table-selected-row-background-color-non-emphasized",
- "--spectrum-table-selected-row-background-color-non-emphasized-focus",
- "--spectrum-table-selected-row-background-opacity",
- "--spectrum-table-selected-row-background-opacity-hover",
- "--spectrum-table-selected-row-background-opacity-non-emphasized",
- "--spectrum-table-selected-row-background-opacity-non-emphasized-hover",
- "--spectrum-table-summary-row-background-color",
- "--spectrum-table-summary-row-font-weight",
- "--spectrum-table-thumbnail-block-spacing",
- "--spectrum-table-thumbnail-cell-block-spacing",
- "--spectrum-table-thumbnail-inner-content-block-spacing",
- "--spectrum-table-thumbnail-inner-minimum-block-spacing",
- "--spectrum-table-thumbnail-size",
- "--spectrum-table-thumbnail-to-text",
- "--spectrum-table-thumbnail-to-top-minimum-extra-large-compact",
- "--spectrum-table-thumbnail-to-top-minimum-extra-large-regular",
- "--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious",
- "--spectrum-table-thumbnail-to-top-minimum-large-compact",
- "--spectrum-table-thumbnail-to-top-minimum-large-regular",
- "--spectrum-table-thumbnail-to-top-minimum-large-spacious",
- "--spectrum-table-thumbnail-to-top-minimum-medium-compact",
- "--spectrum-table-thumbnail-to-top-minimum-medium-regular",
- "--spectrum-table-thumbnail-to-top-minimum-medium-spacious",
- "--spectrum-table-thumbnail-to-top-minimum-small-compact",
- "--spectrum-table-thumbnail-to-top-minimum-small-regular",
- "--spectrum-table-thumbnail-to-top-minimum-small-spacious",
- "--spectrum-table-transition-duration"
- ],
- "global": [
- "--spectrum-accent-visual-color",
- "--spectrum-animation-duration-100",
- "--spectrum-background-layer-1-color",
- "--spectrum-blue-900-rgb",
- "--spectrum-body-color",
- "--spectrum-bold-font-weight",
- "--spectrum-checkbox-control-size-small",
- "--spectrum-component-bottom-to-text-100",
- "--spectrum-component-bottom-to-text-200",
- "--spectrum-component-bottom-to-text-300",
- "--spectrum-component-bottom-to-text-75",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-75",
- "--spectrum-component-top-to-text-100",
- "--spectrum-component-top-to-text-200",
- "--spectrum-component-top-to-text-300",
- "--spectrum-component-top-to-text-75",
- "--spectrum-corner-radius-100",
- "--spectrum-default-font-style",
- "--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-font-size-200",
- "--spectrum-font-size-300",
- "--spectrum-font-size-75",
- "--spectrum-gray-100",
- "--spectrum-gray-200",
- "--spectrum-gray-25",
- "--spectrum-gray-300",
- "--spectrum-gray-50",
- "--spectrum-gray-700-rgb",
- "--spectrum-gray-75",
- "--spectrum-gray-900-rgb",
- "--spectrum-line-height-100",
- "--spectrum-logical-rotation",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-subdued-content-color-default",
- "--spectrum-neutral-subdued-content-color-down",
- "--spectrum-neutral-subdued-content-color-hover",
- "--spectrum-neutral-subdued-content-color-key-focus",
- "--spectrum-regular-font-weight",
- "--spectrum-sans-font-family-stack",
- "--spectrum-spacing-300",
- "--spectrum-text-to-visual-100",
- "--spectrum-text-to-visual-200",
- "--spectrum-text-to-visual-300",
- "--spectrum-thumbnail-size-200",
- "--spectrum-thumbnail-size-300",
- "--spectrum-thumbnail-size-50",
- "--spectrum-thumbnail-size-500",
- "--spectrum-thumbnail-size-700",
- "--spectrum-thumbnail-size-800",
- "--spectrum-transparent-white-100",
- "--spectrum-transparent-white-25"
- ],
- "system-theme": [
- "--system-table-border-color",
- "--system-table-divider-color",
- "--system-table-header-background-color",
- "--system-table-icon-color-focus",
- "--system-table-icon-color-focus-hover",
- "--system-table-quiet-header-background-color",
- "--system-table-quiet-row-background-color",
- "--system-table-row-background-color",
- "--system-table-section-header-background-color",
- "--system-table-summary-row-background-color"
- ],
- "passthroughs": ["--mod-checkbox-spacing", "--mod-thumbnail-size"],
- "high-contrast": [
- "--highcontrast-table-border-color",
- "--highcontrast-table-cell-focus-extra-offset",
- "--highcontrast-table-cell-focus-indicator-color",
- "--highcontrast-table-divider-color",
- "--highcontrast-table-focus-indicator-color",
- "--highcontrast-table-icon-color",
- "--highcontrast-table-icon-color-focus",
- "--highcontrast-table-row-background-color",
- "--highcontrast-table-row-background-color-hover",
- "--highcontrast-table-row-text-color",
- "--highcontrast-table-row-text-color-hover",
- "--highcontrast-table-section-header-background-color",
- "--highcontrast-table-section-header-text-color",
- "--highcontrast-table-selected-row-background-color",
- "--highcontrast-table-selected-row-background-color-focus",
- "--highcontrast-table-selected-row-text-color",
- "--highcontrast-table-selected-row-text-color-focus",
- "--highcontrast-table-transition-duration"
- ]
+ "modifiers": {
+ "mod-table-row-background-color": {
+ "value": "var(--spectrum-table-row-background-color)",
+ "description": "Defined in `.spectrum-Table--quiet`.
Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--spectrum-table-row-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-selected-row-background-color-non-emphasized": {
+ "value": "var(--spectrum-neutral-background-color-selected-default)",
+ "description": "Used by `--spectrum-table-selected-cell-background-color`.
Defaults to `var(--spectrum-table-selected-row-background-color-non-emphasized)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-selected-row-background-color-non-emphasized-focus": {
+ "value": "var(--spectrum-table-selected-row-background-color-non-emphasized-focus)",
+ "description": "Used by `--spectrum-table-selected-cell-background-color-focus`.
Defaults to `var(--spectrum-table-selected-row-background-color-non-emphasized-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-thumbnail-size": {
+ "value": "var(--spectrum-table-thumbnail-size)",
+ "description": "Defined in `.spectrum-Table--compact`, `.spectrum-Table--compact.spectrum-Table--sizeS`, `.spectrum-Table--compact.spectrum-Table--sizeL`, `.spectrum-Table--compact.spectrum-Table--sizeXL`, `.spectrum-Table--spacious`, `.spectrum-Table--spacious.spectrum-Table--sizeS`, `.spectrum-Table--spacious.spectrum-Table--sizeL`, `.spectrum-Table--spacious.spectrum-Table--sizeXL`.
Used by `--mod-thumbnail-size`, `--spectrum-table-thumbnail-inner-content-block-spacing`, `--spectrum-table-thumbnail-inner-minimum-block-spacing`.
Defaults to `var(--spectrum-table-thumbnail-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-min-row-height": {
+ "value": "var(--spectrum-table-min-row-height)",
+ "description": "Defined in `.spectrum-Table--compact`, `.spectrum-Table--compact.spectrum-Table--sizeS`, `.spectrum-Table--compact.spectrum-Table--sizeL`, `.spectrum-Table--compact.spectrum-Table--sizeXL`, `.spectrum-Table--spacious`, `.spectrum-Table--spacious.spectrum-Table--sizeS`, `.spectrum-Table--spacious.spectrum-Table--sizeL`, `.spectrum-Table--spacious.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon`.
Defaults to `var(--spectrum-table-min-row-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-min-row-height--compact": {
+ "value": "var(--spectrum-component-height-300)",
+ "description": "Used by `--mod-table-min-row-height`.
Defaults to `var(--spectrum-table-row-height-extra-large-compact)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-row-top-to-text": {
+ "value": "var(--spectrum-table-row-top-to-text)",
+ "description": "Defined in `.spectrum-Table--compact`, `.spectrum-Table--compact.spectrum-Table--sizeS`, `.spectrum-Table--compact.spectrum-Table--sizeL`, `.spectrum-Table--compact.spectrum-Table--sizeXL`, `.spectrum-Table--spacious`, `.spectrum-Table--spacious.spectrum-Table--sizeS`, `.spectrum-Table--spacious.spectrum-Table--sizeL`, `.spectrum-Table--spacious.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-collapseInner .spectrum-Table-collapseContent`.
Defaults to `var(--spectrum-table-row-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-row-top-to-text--compact": {
+ "value": "var(--spectrum-component-top-to-text-300)",
+ "description": "Used by `--mod-table-row-top-to-text`.
Defaults to `var(--spectrum-table-row-top-to-text-extra-large-compact)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-row-bottom-to-text": {
+ "value": "var(--spectrum-table-row-bottom-to-text)",
+ "description": "Defined in `.spectrum-Table--compact`, `.spectrum-Table--compact.spectrum-Table--sizeS`, `.spectrum-Table--compact.spectrum-Table--sizeL`, `.spectrum-Table--compact.spectrum-Table--sizeXL`, `.spectrum-Table--spacious`, `.spectrum-Table--spacious.spectrum-Table--sizeS`, `.spectrum-Table--spacious.spectrum-Table--sizeL`, `.spectrum-Table--spacious.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-collapseInner .spectrum-Table-collapseContent`.
Defaults to `var(--spectrum-table-row-bottom-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-row-bottom-to-text--compact": {
+ "value": "var(--spectrum-component-bottom-to-text-300)",
+ "description": "Used by `--mod-table-row-bottom-to-text`.
Defaults to `var(--spectrum-table-row-bottom-to-text-extra-large-compact)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-row-checkbox-block-spacing": {
+ "value": "var(--spectrum-table-row-checkbox-block-spacing)",
+ "description": "Defined in `.spectrum-Table--compact`, `.spectrum-Table--compact.spectrum-Table--sizeS`, `.spectrum-Table--compact.spectrum-Table--sizeL`, `.spectrum-Table--compact.spectrum-Table--sizeXL`, `.spectrum-Table--spacious`, `.spectrum-Table--spacious.spectrum-Table--sizeS`, `.spectrum-Table--spacious.spectrum-Table--sizeL`, `.spectrum-Table--spacious.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-checkboxCell.spectrum-Table-cell .spectrum-Table-checkbox`.
Defaults to `var(--spectrum-table-row-checkbox-block-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-row-checkbox-block-spacing--compact": {
+ "value": "15px",
+ "description": "Used by `--mod-table-row-checkbox-block-spacing`.
Defaults to `var(--spectrum-table-row-checkbox-to-top-extra-large-compact)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-thumbnail-block-spacing": {
+ "value": "var(--spectrum-table-thumbnail-block-spacing)",
+ "description": "Defined in `.spectrum-Table--compact`, `.spectrum-Table--compact.spectrum-Table--sizeS`, `.spectrum-Table--compact.spectrum-Table--sizeL`, `.spectrum-Table--compact.spectrum-Table--sizeXL`, `.spectrum-Table--spacious`, `.spectrum-Table--spacious.spectrum-Table--sizeS`, `.spectrum-Table--spacious.spectrum-Table--sizeL`, `.spectrum-Table--spacious.spectrum-Table--sizeXL`.
Used by `--spectrum-table-thumbnail-cell-block-spacing`.
Defaults to `var(--spectrum-table-thumbnail-block-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-thumbnail-block-spacing-compact": {
+ "value": "8px",
+ "description": "Used by `--mod-table-thumbnail-block-spacing`.
Defaults to `var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-thumbnail-size-compact": {
+ "value": "32px",
+ "description": "Used by `--mod-table-thumbnail-size`.
Defaults to `var(--spectrum-thumbnail-size-500)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-min-row-height--spacious": {
+ "value": "64px",
+ "description": "Used by `--mod-table-min-row-height`.
Defaults to `var(--spectrum-table-row-height-extra-large-spacious)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-row-top-to-text--spacious": {
+ "value": "21px",
+ "description": "Used by `--mod-table-row-top-to-text`.
Defaults to `var(--spectrum-table-row-top-to-text-extra-large-spacious)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-row-bottom-to-text--spacious": {
+ "value": "21px",
+ "description": "Used by `--mod-table-row-bottom-to-text`.
Defaults to `var(--spectrum-table-row-bottom-to-text-extra-large-spacious)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-row-checkbox-block-spacing--spacious": {
+ "value": "23px",
+ "description": "Used by `--mod-table-row-checkbox-block-spacing`.
Defaults to `var(--spectrum-table-row-checkbox-to-top-extra-large-spacious)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-thumbnail-block-spacing-spacious": {
+ "value": "10px",
+ "description": "Used by `--mod-table-thumbnail-block-spacing`.
Defaults to `var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-thumbnail-size-spacious": {
+ "value": "44px",
+ "description": "Used by `--mod-table-thumbnail-size`.
Defaults to `var(--spectrum-thumbnail-size-800)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-selected-row-background-color": {
+ "value": "var(--spectrum-informative-color-800)",
+ "description": "Used by `--spectrum-table-selected-cell-background-color`.
Defaults to `var(--spectrum-table-selected-row-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-selected-row-background-color-focus": {
+ "value": "var(--spectrum-table-selected-row-background-color-focus)",
+ "description": "Used by `--spectrum-table-selected-cell-background-color-focus`.
Defaults to `var(--spectrum-table-selected-row-background-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-border-radius": {
+ "value": "var(--spectrum-table-border-radius)",
+ "description": "Defined in `.spectrum-Table--quiet`.
Used by `.spectrum-Table-body`, `.spectrum-Table-row:first-child .spectrum-Table-cell:first-child`, `.spectrum-Table-row:first-child .spectrum-Table-cell:last-child`, `.spectrum-Table-row:last-child .spectrum-Table-cell:first-child`, `.spectrum-Table-row:last-child .spectrum-Table-cell:last-child`, `.spectrum-Table-row:first-child`, `.spectrum-Table-row:last-child`, `.spectrum-Table-scroller`.
Defaults to `var(--spectrum-table-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-border-radius--quiet": {
+ "description": "Used by `--mod-table-border-radius`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-outer-border-inline-width": {
+ "value": "var(--spectrum-table-outer-border-inline-width)",
+ "description": "Defined in `.spectrum-Table--quiet`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child`, `.spectrum-Table-scroller`.
Defaults to `var(--spectrum-table-outer-border-inline-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-outer-border-inline-width--quiet": {
+ "description": "Used by `--mod-table-outer-border-inline-width`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-background-color": {
+ "value": "var(--spectrum-table-header-background-color)",
+ "description": "Defined in `.spectrum-Table--quiet`.
Used by `.spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-header-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-header-background-color--quiet": {
+ "value": "light-dark(rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.11))",
+ "description": "Used by `--mod-table-header-background-color`.
Defaults to `var(--spectrum-transparent-white-100)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-row-background-color--quiet": {
+ "value": "light-dark(rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.11))",
+ "description": "Used by `--mod-table-row-background-color`.
Defaults to `var(--spectrum-transparent-white-100)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-sort-icon-inline-start-spacing": {
+ "description": "Used by `.spectrum-Table-sortedIcon`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-sort-icon-inline-end-spacing": {
+ "value": "var(--mod-table-icon-to-text, var(--spectrum-table-icon-to-text))",
+ "description": "Used by `.spectrum-Table-sortedIcon`.
Defaults to `var(--mod-table-icon-to-text, var(--spectrum-table-icon-to-text))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-icon-to-text": {
+ "value": "var(--spectrum-table-icon-to-text)",
+ "description": "Used by `.spectrum-Table-sortedIcon`, `.spectrum-Table-menuIcon`.
Defaults to `var(--spectrum-table-icon-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-transition-duration": {
+ "value": "var(--spectrum-table-transition-duration)",
+ "description": "Used by `.spectrum-Table-sortedIcon`, `.spectrum-Table-headCell`, `.spectrum-Table-row`.
Defaults to `var(--spectrum-table-transition-duration)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-icon-color-default": {
+ "value": "var(--spectrum-table-icon-color-default)",
+ "description": "Used by `--spectrum-table-icon-color`.
Defaults to `var(--spectrum-table-icon-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-header-vertical-align": {
+ "value": "var(--spectrum-table-header-vertical-align)",
+ "description": "Used by `.spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-header-vertical-align)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-font-family": {
+ "value": "var(--spectrum-table-row-font-family)",
+ "description": "Used by `.spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-row-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-font-size": {
+ "value": "var(--spectrum-table-row-font-size)",
+ "description": "Used by `.spectrum-Table-headCell`, `.spectrum-Table-scroller`, `--spectrum-table-thumbnail-inner-content-block-spacing`.
Defaults to `var(--spectrum-table-row-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-font-weight": {
+ "value": "var(--spectrum-table-header-font-weight)",
+ "description": "Used by `.spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-header-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-line-height": {
+ "value": "var(--spectrum-table-row-line-height)",
+ "description": "Used by `.spectrum-Table-headCell`, `.spectrum-Table-scroller`.
Defaults to `var(--spectrum-table-row-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-text-transform": {
+ "description": "Used by `.spectrum-Table-headCell`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-min-header-height": {
+ "value": "var(--spectrum-table-min-header-height)",
+ "description": "Used by `.spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-min-header-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-top-to-text": {
+ "value": "var(--spectrum-table-header-top-to-text)",
+ "description": "Used by `.spectrum-Table-headCell`, `.spectrum-Table-scroller`.
Defaults to `var(--spectrum-table-header-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-bottom-to-text": {
+ "value": "var(--spectrum-table-header-bottom-to-text)",
+ "description": "Used by `.spectrum-Table-headCell`, `.spectrum-Table-scroller`.
Defaults to `var(--spectrum-table-header-bottom-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-cell-inline-space": {
+ "value": "var(--spectrum-table-cell-inline-space)",
+ "description": "Used by `.spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-cell-inline-space)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-text-color": {
+ "value": "var(--spectrum-table-header-text-color)",
+ "description": "Used by `.spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-header-text-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-cursor-header-default": {
+ "description": "Used by `.spectrum-Table-headCell`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-cursor-header-sortable": {
+ "description": "Used by `.spectrum-Table-headCell.is-sortable`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-icon-color-active": {
+ "value": "var(--spectrum-table-icon-color-active)",
+ "description": "Used by `--spectrum-table-icon-color`.
Defaults to `var(--spectrum-table-icon-color-active)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-icon-color-focus": {
+ "value": "var(--spectrum-table-icon-color-focus)",
+ "description": "Used by `--spectrum-table-icon-color`.
Defaults to `var(--spectrum-table-icon-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-icon-color-key-focus": {
+ "value": "var(--spectrum-table-icon-color-key-focus)",
+ "description": "Used by `--spectrum-table-icon-color`.
Defaults to `var(--spectrum-table-icon-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-border-color": {
+ "value": "var(--spectrum-table-border-color)",
+ "description": "Defined in `.spectrum-Table-body.is-drop-target`, `.spectrum-Table-row.is-drop-target`.
Used by `.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child`, `.spectrum-Table-scroller`, `.spectrum-Table-scroller .spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-focus-indicator-thickness": {
+ "value": "var(--spectrum-table-focus-indicator-thickness)",
+ "description": "Used by `.spectrum-Table-body.is-drop-target`, `.spectrum-Table-row.is-drop-target`, `.spectrum-Table-cell.is-focused, .spectrum-Table-cell:focus-visible, .spectrum-Table-headCell.is-focused, .spectrum-Table-headCell:focus-visible`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused, .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible`.
Defaults to `var(--spectrum-table-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-drop-zone-outline-color": {
+ "value": "var(--spectrum-table-drop-zone-outline-color)",
+ "description": "Used by `.spectrum-Table-body.is-drop-target`, `.spectrum-Table-row.is-drop-target`, `.spectrum-Table-row.is-drop-target .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-drop-zone-outline-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-border-width": {
+ "value": "var(--spectrum-table-border-width)",
+ "description": "Used by `.spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell`, `.spectrum-Table-cell--divider`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `.spectrum-Table-checkboxCell.spectrum-Table-cell .spectrum-Table-checkbox`, `.spectrum-Table-checkboxCell.spectrum-Table-headCell .spectrum-Table-checkbox`, `.spectrum-Table-scroller`, `.spectrum-Table-scroller .spectrum-Table-headCell`, `.spectrum-Table-collapseInner .spectrum-Table-collapseContent`.
Defaults to `var(--spectrum-table-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-divider-color": {
+ "value": "var(--spectrum-table-divider-color)",
+ "description": "Used by `.spectrum-Table-cell`, `.spectrum-Table-cell--divider`.
Defaults to `var(--spectrum-table-divider-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-row-font-size": {
+ "value": "var(--spectrum-table-row-font-size)",
+ "description": "Used by `.spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-row-font-weight": {
+ "value": "var(--spectrum-table-row-font-weight)",
+ "description": "Used by `.spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-row-line-height": {
+ "value": "var(--spectrum-table-row-line-height)",
+ "description": "Used by `.spectrum-Table-cell`, `--spectrum-table-thumbnail-inner-content-block-spacing`, `.spectrum-Table-thumbnailInner .spectrum-Thumbnail`.
Defaults to `var(--spectrum-table-row-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-default-vertical-align": {
+ "value": "var(--spectrum-table-default-vertical-align)",
+ "description": "Used by `.spectrum-Table-cell`.
Defaults to `var(--spectrum-table-default-vertical-align)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-row-text-color": {
+ "value": "var(--spectrum-table-row-text-color)",
+ "description": "Used by `.spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-text-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-edge-to-content": {
+ "value": "16px",
+ "description": "Used by `.spectrum-Table-cell`, `.spectrum-Table-checkboxCell`.
Defaults to `var(--spectrum-table-edge-to-content)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-cursor-row-default": {
+ "description": "Used by `.spectrum-Table-row`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-row-background-color-hover": {
+ "value": "var(--spectrum-table-row-background-color-hover)",
+ "description": "Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--spectrum-table-row-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-row-active-color": {
+ "value": "var(--spectrum-table-row-active-color)",
+ "description": "Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--spectrum-table-row-active-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-drop-zone-background-color": {
+ "value": "var(--spectrum-table-drop-zone-background-color)",
+ "description": "Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--spectrum-table-drop-zone-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-focus-indicator-color": {
+ "value": "var(--spectrum-table-focus-indicator-color)",
+ "description": "Used by `.spectrum-Table-cell.is-focused, .spectrum-Table-cell:focus-visible, .spectrum-Table-headCell.is-focused, .spectrum-Table-headCell:focus-visible`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused, .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible`.
Defaults to `var(--spectrum-table-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-summary-row-background-color": {
+ "value": "var(--spectrum-table-summary-row-background-color)",
+ "description": "Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--spectrum-table-summary-row-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-summary-row-font-weight": {
+ "value": "var(--spectrum-table-summary-row-font-weight)",
+ "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-summary-row-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-summary-row-font-size": {
+ "value": "var(--spectrum-table-row-font-size)",
+ "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-summary-row-font-family": {
+ "value": "var(--spectrum-table-row-font-family)",
+ "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-summary-row-font-style": {
+ "value": "var(--spectrum-table-row-font-style)",
+ "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-summary-row-line-height": {
+ "value": "var(--spectrum-table-row-line-height)",
+ "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-summary-row-text-color": {
+ "value": "var(--spectrum-table-row-text-color)",
+ "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-text-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-section-header-background-color": {
+ "value": "var(--spectrum-table-section-header-background-color)",
+ "description": "Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--spectrum-table-section-header-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-cursor-section-header": {
+ "description": "Used by `.spectrum-Table-row--sectionHeader`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-section-header-font-weight": {
+ "value": "var(--spectrum-table-section-header-font-weight)",
+ "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-section-header-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-section-header-min-height": {
+ "value": "var(--spectrum-table-section-header-min-height)",
+ "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-section-header-min-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-section-header-block-start-spacing": {
+ "value": "var(--spectrum-table-section-header-block-start-spacing)",
+ "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-section-header-block-start-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-section-header-block-end-spacing": {
+ "value": "var(--spectrum-table-section-header-block-end-spacing)",
+ "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-section-header-block-end-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-section-header-font-size": {
+ "value": "var(--spectrum-table-row-font-size)",
+ "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-section-header-font-family": {
+ "value": "var(--spectrum-table-row-font-family)",
+ "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-section-header-font-style": {
+ "value": "var(--spectrum-table-row-font-style)",
+ "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-section-header-line-height": {
+ "value": "var(--spectrum-table-row-line-height)",
+ "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-section-header-text-color": {
+ "value": "var(--spectrum-table-row-text-color)",
+ "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-text-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-checkbox-to-text": {
+ "value": "24px",
+ "description": "Used by `.spectrum-Table-checkboxCell`.
Defaults to `var(--spectrum-table-checkbox-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-checkbox-block-spacing": {
+ "value": "var(--spectrum-table-header-checkbox-block-spacing)",
+ "description": "Used by `.spectrum-Table-checkboxCell.spectrum-Table-headCell .spectrum-Table-checkbox`.
Defaults to `var(--spectrum-table-header-checkbox-block-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-background-color-scrollable": {
+ "value": "var(--spectrum-background-layer-1-color, var(--spectrum-gray-75))",
+ "description": "Used by `--spectrum-table-header-background-color`.
Defaults to `var(--spectrum-background-layer-1-color, var(--spectrum-gray-75))`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-current-header-height": {
+ "value": "calc(var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size)) + var(--mod-table-header-top-to-text, var(--spectrum-table-header-top-to-text)) + var(--mod-table-header-bottom-to-text, var(--spectrum-table-header-bottom-to-text)) + var(--mod-table-border-width, var(--spectrum-table-border-width)))",
+ "description": "Used by `.spectrum-Table-scroller`.
Defaults to `calc(var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size)) + var(--mod-table-header-top-to-text, var(--spectrum-table-header-top-to-text)) + var(--mod-table-header-bottom-to-text, var(--spectrum-table-header-bottom-to-text)) + var(--mod-table-border-width, var(--spectrum-table-border-width)))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-disclosure-icon-size": {
+ "value": "var(--spectrum-table-disclosure-icon-size)",
+ "description": "Used by `.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible`, `.spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`, `--spectrum-table-thumbnail-inner-minimum-block-spacing`.
Defaults to `var(--spectrum-table-disclosure-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-collapsible-disclosure-inline-spacing": {
+ "value": "var(--spectrum-table-collapsible-disclosure-inline-spacing)",
+ "description": "Used by `.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible`, `.spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon`.
Defaults to `var(--spectrum-table-collapsible-disclosure-inline-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-collapsible-icon-animation-duration": {
+ "value": "var(--spectrum-table-collapsible-icon-animation-duration)",
+ "description": "Used by `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`.
Defaults to `var(--spectrum-table-collapsible-icon-animation-duration)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-icon-color-hover": {
+ "value": "var(--spectrum-table-icon-color-hover)",
+ "description": "Used by `--spectrum-table-icon-color`.
Defaults to `var(--spectrum-table-icon-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-icon-color-focus-hover": {
+ "value": "var(--spectrum-table-icon-color-focus-hover)",
+ "description": "Used by `--spectrum-table-icon-color`.
Defaults to `var(--spectrum-table-icon-color-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-thumbnail-to-text": {
+ "value": "var(--spectrum-table-thumbnail-to-text)",
+ "description": "Used by `.spectrum-Table-thumbnailInner .spectrum-Thumbnail`.
Defaults to `var(--spectrum-table-thumbnail-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-table-cell-inline-space": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headCell`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-edge-to-content": {
+ "value": "16px",
+ "description": "Used by `--spectrum-table-cell-inline-space`, `.spectrum-Table-cell`, `.spectrum-Table-checkboxCell`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-border-radius": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-body`, `.spectrum-Table-row:first-child .spectrum-Table-cell:first-child`, `.spectrum-Table-row:first-child .spectrum-Table-cell:last-child`, `.spectrum-Table-row:last-child .spectrum-Table-cell:first-child`, `.spectrum-Table-row:last-child .spectrum-Table-cell:last-child`, `.spectrum-Table-row:first-child`, `.spectrum-Table-row:last-child`, `.spectrum-Table-scroller`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-border-width": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell`, `.spectrum-Table-cell--divider`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `.spectrum-Table-checkboxCell.spectrum-Table-cell .spectrum-Table-checkbox`, `.spectrum-Table-checkboxCell.spectrum-Table-headCell .spectrum-Table-checkbox`, `.spectrum-Table-scroller`, `.spectrum-Table-scroller .spectrum-Table-headCell`, `.spectrum-Table-collapseInner .spectrum-Table-collapseContent`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-border-divider-width": {
+ "value": "1px",
+ "description": "Used by `--spectrum-table-border-width`, `--spectrum-table-outer-border-inline-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-outer-border-inline-width": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child`, `.spectrum-Table-scroller`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-default-vertical-align": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-cell`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-header-vertical-align": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headCell`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-header-font-weight": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headCell`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-font-family": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headCell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-font-weight": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-cell`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-font-style": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-line-height": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headCell`, `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `.spectrum-Table-scroller`, `--spectrum-table-thumbnail-inner-content-block-spacing`, `.spectrum-Table-thumbnailInner .spectrum-Thumbnail`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-border-color": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child`, `.spectrum-Table-scroller`, `.spectrum-Table-scroller .spectrum-Table-headCell`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-divider-color": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-cell--divider`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-header-background-color": {
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table-scroller`, `.spectrum-Table--quiet`.
Used by `.spectrum-Table-headCell`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-header-text-color": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headCell`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-row-background-color": {
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table--quiet`.
Used by `--spectrum-table-cell-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-row-text-color": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-selected-row-background-color": {
+ "value": "var(--spectrum-informative-color-800)",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-selected-cell-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-selected-row-background-opacity": {
+ "value": "0.1",
+ "description": "Used by `--spectrum-table-selected-row-background-color`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-selected-row-background-color-non-emphasized": {
+ "value": "var(--spectrum-neutral-background-color-selected-default)",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-selected-cell-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-selected-row-background-opacity-non-emphasized": {
+ "value": "0.1",
+ "description": "Used by `--spectrum-table-selected-row-background-color-non-emphasized`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-background-color-hover": {
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-row-hover-opacity": {
+ "value": "0.07",
+ "description": "Used by `--spectrum-table-row-background-color-hover`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-active-color": {
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-row-down-opacity": {
+ "value": "0.1",
+ "description": "Used by `--spectrum-table-row-active-color`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-selected-row-background-color-focus": {
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-selected-cell-background-color-focus`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-selected-row-background-opacity-hover": {
+ "value": "0.15",
+ "description": "Used by `--spectrum-table-selected-row-background-color-focus`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-selected-row-background-color-non-emphasized-focus": {
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-selected-cell-background-color-focus`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-selected-row-background-opacity-non-emphasized-hover": {
+ "value": "0.15",
+ "description": "Used by `--spectrum-table-selected-row-background-color-non-emphasized-focus`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-icon-color-default": {
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-icon-color-hover": {
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-icon-color-active": {
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-icon-color-focus": {
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-icon-color-focus-hover": {
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-icon-color-key-focus": {
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-focus-indicator-thickness": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-body.is-drop-target`, `.spectrum-Table-row.is-drop-target`, `.spectrum-Table-cell.is-focused, .spectrum-Table-cell:focus-visible, .spectrum-Table-headCell.is-focused, .spectrum-Table-headCell:focus-visible`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused, .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-focus-indicator-color": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-cell.is-focused, .spectrum-Table-cell:focus-visible, .spectrum-Table-headCell.is-focused, .spectrum-Table-headCell:focus-visible`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused, .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-drop-zone-background-color": {
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-drop-zone-outline-color": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-body.is-drop-target`, `.spectrum-Table-row.is-drop-target`, `.spectrum-Table-row.is-drop-target .spectrum-Table-cell`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-transition-duration": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-sortedIcon`, `.spectrum-Table-headCell`, `.spectrum-Table-row`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-summary-row-font-weight": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-row--summary .spectrum-Table-cell`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-summary-row-background-color": {
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-section-header-font-weight": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-section-header-background-color": {
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-collapsible-tier-indent": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible`, `.spectrum-Table-cell--collapsible`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-collapsible-disclosure-inline-spacing": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible`, `.spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-collapsible-icon-animation-duration": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-cell-background-color": {
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table-row.is-focused, .spectrum-Table-row:focus-visible`, `.spectrum-Table-row:active`, `.spectrum-Table-row.is-selected`, `.spectrum-Table-row.is-selected.is-focused, .spectrum-Table-row.is-selected:focus-visible`, `.spectrum-Table-body.is-drop-target .spectrum-Table-row, .spectrum-Table-row.is-drop-target`, `.spectrum-Table-row--summary`, `.spectrum-Table-row--sectionHeader`, `.spectrum-Table-row:hover`, `.spectrum-Table-row.is-selected:hover`, `.spectrum-Table-row--sectionHeader:hover`.
Used by `.spectrum-Table-cell`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-selected-cell-background-color": {
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table--emphasized`.
Used by `--spectrum-table-cell-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-selected-cell-background-color-focus": {
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table--emphasized`.
Used by `--spectrum-table-cell-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-thumbnail-size": {
+ "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `--mod-thumbnail-size`, `--spectrum-table-thumbnail-inner-content-block-spacing`, `--spectrum-table-thumbnail-inner-minimum-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-min-header-height": {
+ "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-headCell`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-header-top-to-text": {
+ "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-headCell`, `.spectrum-Table-scroller`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-column-header-row-top-to-text-medium": {
+ "value": "7px",
+ "description": "Used by `--spectrum-table-header-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-header-bottom-to-text": {
+ "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-headCell`, `.spectrum-Table-scroller`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-column-header-row-bottom-to-text-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-table-header-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-min-row-height": {
+ "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-height-medium-regular": {
+ "value": "40px",
+ "description": "Used by `--spectrum-table-min-row-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-top-to-text": {
+ "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-collapseInner .spectrum-Table-collapseContent`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-top-to-text-medium-regular": {
+ "value": "11px",
+ "description": "Used by `--spectrum-table-row-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-bottom-to-text": {
+ "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-collapseInner .spectrum-Table-collapseContent`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-bottom-to-text-medium-regular": {
+ "value": "12px",
+ "description": "Used by `--spectrum-table-row-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-icon-to-text": {
+ "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-sortedIcon`, `.spectrum-Table-menuIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-font-size": {
+ "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-headCell`, `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `.spectrum-Table-scroller`, `--spectrum-table-thumbnail-inner-content-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-header-checkbox-block-spacing": {
+ "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-checkboxCell.spectrum-Table-headCell .spectrum-Table-checkbox`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-header-row-checkbox-to-top-medium": {
+ "value": "9px",
+ "description": "Used by `--spectrum-table-header-checkbox-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-checkbox-block-spacing": {
+ "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-checkboxCell.spectrum-Table-cell .spectrum-Table-checkbox`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-checkbox-to-top-medium-regular": {
+ "value": "13px",
+ "description": "Used by `--spectrum-table-row-checkbox-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-section-header-min-height": {
+ "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-section-header-row-height-medium": {
+ "value": "32px",
+ "description": "Used by `--spectrum-table-section-header-min-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-section-header-block-start-spacing": {
+ "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-section-header-block-end-spacing": {
+ "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-disclosure-icon-size": {
+ "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible`, `.spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`, `--spectrum-table-thumbnail-inner-minimum-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-thumbnail-block-spacing": {
+ "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `--spectrum-table-thumbnail-cell-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-thumbnail-to-top-minimum-medium-regular": {
+ "value": "7px",
+ "description": "Used by `--spectrum-table-thumbnail-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-thumbnail-to-text": {
+ "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-thumbnailInner .spectrum-Thumbnail`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-column-header-row-top-to-text-small": {
+ "value": "8px",
+ "description": "Used by `--spectrum-table-header-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-column-header-row-bottom-to-text-small": {
+ "value": "9px",
+ "description": "Used by `--spectrum-table-header-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-height-small-regular": {
+ "value": "32px",
+ "description": "Used by `--spectrum-table-min-row-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-top-to-text-small-regular": {
+ "value": "8px",
+ "description": "Used by `--spectrum-table-row-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-bottom-to-text-small-regular": {
+ "value": "9px",
+ "description": "Used by `--spectrum-table-row-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-header-row-checkbox-to-top-small": {
+ "value": "10px",
+ "description": "Used by `--spectrum-table-header-checkbox-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-checkbox-to-top-small-regular": {
+ "value": "10px",
+ "description": "Used by `--spectrum-table-row-checkbox-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-section-header-row-height-small": {
+ "value": "24px",
+ "description": "Used by `--spectrum-table-section-header-min-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-thumbnail-to-top-minimum-small-regular": {
+ "value": "5px",
+ "description": "Used by `--spectrum-table-thumbnail-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-column-header-row-top-to-text-large": {
+ "value": "10px",
+ "description": "Used by `--spectrum-table-header-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-column-header-row-bottom-to-text-large": {
+ "value": "10px",
+ "description": "Used by `--spectrum-table-header-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-height-large-regular": {
+ "value": "48px",
+ "description": "Used by `--spectrum-table-min-row-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-top-to-text-large-regular": {
+ "value": "14px",
+ "description": "Used by `--spectrum-table-row-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-bottom-to-text-large-regular": {
+ "value": "14px",
+ "description": "Used by `--spectrum-table-row-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-header-row-checkbox-to-top-large": {
+ "value": "12px",
+ "description": "Used by `--spectrum-table-header-checkbox-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-checkbox-to-top-large-regular": {
+ "value": "16px",
+ "description": "Used by `--spectrum-table-row-checkbox-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-section-header-row-height-large": {
+ "value": "40px",
+ "description": "Used by `--spectrum-table-section-header-min-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-thumbnail-to-top-minimum-large-regular": {
+ "value": "8px",
+ "description": "Used by `--spectrum-table-thumbnail-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-column-header-row-top-to-text-extra-large": {
+ "value": "13px",
+ "description": "Used by `--spectrum-table-header-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-column-header-row-bottom-to-text-extra-large": {
+ "value": "13px",
+ "description": "Used by `--spectrum-table-header-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-height-extra-large-regular": {
+ "value": "56px",
+ "description": "Used by `--spectrum-table-min-row-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-top-to-text-extra-large-regular": {
+ "value": "17px",
+ "description": "Used by `--spectrum-table-row-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-bottom-to-text-extra-large-regular": {
+ "value": "17px",
+ "description": "Used by `--spectrum-table-row-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-header-row-checkbox-to-top-extra-large": {
+ "value": "15px",
+ "description": "Used by `--spectrum-table-header-checkbox-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-checkbox-to-top-extra-large-regular": {
+ "value": "19px",
+ "description": "Used by `--spectrum-table-row-checkbox-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-section-header-row-height-extra-large": {
+ "value": "48px",
+ "description": "Used by `--spectrum-table-section-header-min-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-thumbnail-to-top-minimum-extra-large-regular": {
+ "value": "8px",
+ "description": "Used by `--spectrum-table-thumbnail-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-height-medium-compact": {
+ "value": "var(--spectrum-component-height-100)",
+ "description": "Used by `--mod-table-min-row-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-top-to-text-medium-compact": {
+ "value": "var(--spectrum-component-top-to-text-100)",
+ "description": "Used by `--mod-table-row-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-bottom-to-text-medium-compact": {
+ "value": "var(--spectrum-component-bottom-to-text-100)",
+ "description": "Used by `--mod-table-row-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-checkbox-to-top-medium-compact": {
+ "value": "9px",
+ "description": "Used by `--mod-table-row-checkbox-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-thumbnail-to-top-minimum-medium-compact": {
+ "value": "5px",
+ "description": "Used by `--mod-table-thumbnail-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-height-small-compact": {
+ "value": "var(--spectrum-component-height-75)",
+ "description": "Used by `--mod-table-min-row-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-top-to-text-small-compact": {
+ "value": "var(--spectrum-component-top-to-text-75)",
+ "description": "Used by `--mod-table-row-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-bottom-to-text-small-compact": {
+ "value": "var(--spectrum-component-bottom-to-text-75)",
+ "description": "Used by `--mod-table-row-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-checkbox-to-top-small-compact": {
+ "value": "6px",
+ "description": "Used by `--mod-table-row-checkbox-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-thumbnail-to-top-minimum-small-compact": {
+ "value": "4px",
+ "description": "Used by `--mod-table-thumbnail-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-height-large-compact": {
+ "value": "var(--spectrum-component-height-200)",
+ "description": "Used by `--mod-table-min-row-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-top-to-text-large-compact": {
+ "value": "var(--spectrum-component-top-to-text-200)",
+ "description": "Used by `--mod-table-row-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-bottom-to-text-large-compact": {
+ "value": "var(--spectrum-component-bottom-to-text-200)",
+ "description": "Used by `--mod-table-row-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-checkbox-to-top-large-compact": {
+ "value": "12px",
+ "description": "Used by `--mod-table-row-checkbox-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-thumbnail-to-top-minimum-large-compact": {
+ "value": "7px",
+ "description": "Used by `--mod-table-thumbnail-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-height-extra-large-compact": {
+ "value": "var(--spectrum-component-height-300)",
+ "description": "Used by `--mod-table-min-row-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-top-to-text-extra-large-compact": {
+ "value": "var(--spectrum-component-top-to-text-300)",
+ "description": "Used by `--mod-table-row-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-bottom-to-text-extra-large-compact": {
+ "value": "var(--spectrum-component-bottom-to-text-300)",
+ "description": "Used by `--mod-table-row-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-checkbox-to-top-extra-large-compact": {
+ "value": "15px",
+ "description": "Used by `--mod-table-row-checkbox-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-thumbnail-to-top-minimum-extra-large-compact": {
+ "value": "8px",
+ "description": "Used by `--mod-table-thumbnail-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-height-medium-spacious": {
+ "value": "48px",
+ "description": "Used by `--mod-table-min-row-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-top-to-text-medium-spacious": {
+ "value": "15px",
+ "description": "Used by `--mod-table-row-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-bottom-to-text-medium-spacious": {
+ "value": "16px",
+ "description": "Used by `--mod-table-row-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-checkbox-to-top-medium-spacious": {
+ "value": "17px",
+ "description": "Used by `--mod-table-row-checkbox-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-thumbnail-to-top-minimum-medium-spacious": {
+ "value": "8px",
+ "description": "Used by `--mod-table-thumbnail-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-height-small-spacious": {
+ "value": "40px",
+ "description": "Used by `--mod-table-min-row-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-top-to-text-small-spacious": {
+ "value": "12px",
+ "description": "Used by `--mod-table-row-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-bottom-to-text-small-spacious": {
+ "value": "13px",
+ "description": "Used by `--mod-table-row-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-checkbox-to-top-small-spacious": {
+ "value": "14px",
+ "description": "Used by `--mod-table-row-checkbox-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-thumbnail-to-top-minimum-small-spacious": {
+ "value": "7px",
+ "description": "Used by `--mod-table-thumbnail-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-height-large-spacious": {
+ "value": "56px",
+ "description": "Used by `--mod-table-min-row-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-top-to-text-large-spacious": {
+ "value": "18px",
+ "description": "Used by `--mod-table-row-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-bottom-to-text-large-spacious": {
+ "value": "18px",
+ "description": "Used by `--mod-table-row-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-checkbox-to-top-large-spacious": {
+ "value": "20px",
+ "description": "Used by `--mod-table-row-checkbox-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-thumbnail-to-top-minimum-large-spacious": {
+ "value": "8px",
+ "description": "Used by `--mod-table-thumbnail-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-height-extra-large-spacious": {
+ "value": "64px",
+ "description": "Used by `--mod-table-min-row-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-top-to-text-extra-large-spacious": {
+ "value": "21px",
+ "description": "Used by `--mod-table-row-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-bottom-to-text-extra-large-spacious": {
+ "value": "21px",
+ "description": "Used by `--mod-table-row-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-checkbox-to-top-extra-large-spacious": {
+ "value": "23px",
+ "description": "Used by `--mod-table-row-checkbox-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-thumbnail-to-top-minimum-extra-large-spacious": {
+ "value": "10px",
+ "description": "Used by `--mod-table-thumbnail-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-icon-color": {
+ "description": "Defined in `.spectrum-Table-headCell`, `.spectrum-Table-headCell.is-sortable:active`, `.spectrum-Table-headCell.is-sortable:focus`, `.spectrum-Table-headCell.is-sortable.is-keyboardFocused, .spectrum-Table-headCell.is-sortable:focus-visible`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:active`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus`, `.spectrum-Table-headCell.is-sortable:hover`, `.spectrum-Table-headCell.is-sortable:focus:hover`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:hover`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus:hover`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused, .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible`.
Used by `.spectrum-Table-headCell .spectrum-Table-menuIcon, .spectrum-Table-headCell .spectrum-Table-sortedIcon`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-checkbox-to-text": {
+ "value": "24px",
+ "description": "Used by `.spectrum-Table-checkboxCell`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-tier": {
+ "description": "Defined in `.spectrum-Table-row--collapsible`, `.spectrum-Table-row--collapsible[data-tier=\"1\"]`, `.spectrum-Table-row--collapsible[data-tier=\"2\"]`, `.spectrum-Table-row--collapsible[data-tier=\"3\"]`, `.spectrum-Table-row--collapsible[data-tier=\"4\"]`, `.spectrum-Table-row--collapsible[data-tier=\"5\"]`, `.spectrum-Table-row--collapsible[data-tier=\"6\"]`.
Used by `.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible`, `.spectrum-Table-cell--collapsible`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-thumbnail-cell-block-spacing": {
+ "description": "Defined in `.spectrum-Table-row--thumbnail`, `.spectrum-Table-row--thumbnail.spectrum-Table-row--collapsible`.
Used by `.spectrum-Table-row--thumbnail .spectrum-Table-cell`, `.spectrum-Table-thumbnailInner`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-thumbnail-inner-content-block-spacing": {
+ "description": "Defined in `.spectrum-Table-row--thumbnail`.
Used by `.spectrum-Table-row--thumbnail .spectrum-Table-cell`, `.spectrum-Table-thumbnailInner .spectrum-Table-thumbnailContent`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-thumbnail-inner-minimum-block-spacing": {
+ "description": "Defined in `.spectrum-Table-row--thumbnail.spectrum-Table-row--collapsible`.
Used by `--spectrum-table-thumbnail-cell-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-transparent-white-25": {
+ "value": "light-dark(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0))",
+ "description": "Used by `--system-table-header-background-color`, `--system-table-quiet-header-background-color`, `--system-table-quiet-row-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--system-table-border-color`, `--system-table-divider-color`, `--spectrum-table-summary-row-background-color`, `--spectrum-table-section-header-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--system-table-row-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--system-table-summary-row-background-color`, `--system-table-section-header-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-key-focus": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--system-table-icon-color-focus`, `--spectrum-table-icon-color-focus`, `--spectrum-table-icon-color-focus-hover`, `--spectrum-table-icon-color-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-hover": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--system-table-icon-color-focus-hover`, `--spectrum-table-icon-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-table-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-bold-font-weight": {
+ "value": "700",
+ "description": "Used by `--spectrum-table-header-font-weight`, `--spectrum-table-summary-row-font-weight`, `--spectrum-table-section-header-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-table-row-font-family`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-table-row-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-table-row-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-table-row-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-300": {
+ "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+ "description": "Used by `--spectrum-table-border-color`, `--spectrum-table-divider-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-100": {
+ "value": "light-dark(rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.11))",
+ "description": "Used by `--spectrum-table-header-background-color`, `--mod-table-header-background-color`, `--mod-table-row-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-table-header-text-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-50": {
+ "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))",
+ "description": "Used by `--spectrum-table-row-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-table-row-text-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-blue-900-rgb": {
+ "description": "Used by `--spectrum-table-selected-row-background-color`, `--spectrum-table-selected-row-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-700-rgb": {
+ "description": "Used by `--spectrum-table-selected-row-background-color-non-emphasized`, `--spectrum-table-selected-row-background-color-non-emphasized-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-900-rgb": {
+ "description": "Used by `--spectrum-table-row-background-color-hover`, `--spectrum-table-row-active-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Used by `--spectrum-table-icon-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-down": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-table-icon-color-active`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-table-focus-indicator-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-table-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-drop-zone-background-color-rgb": {
+ "description": "Used by `--spectrum-table-drop-zone-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-drop-zone-background-color-opacity": {
+ "value": "0.1",
+ "description": "Used by `--spectrum-table-drop-zone-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-visual-color": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--spectrum-table-drop-zone-outline-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `--spectrum-table-transition-duration`, `--spectrum-table-collapsible-icon-animation-duration`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `--spectrum-table-collapsible-tier-indent`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-logical-rotation": {
+ "description": "Defined in `.spectrum-Table:dir(rtl), [dir=\"rtl\"] .spectrum-Table`.
Used by `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon[aria-expanded=\"true\"]`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-table-min-header-height`, `--spectrum-table-disclosure-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-table-icon-to-text`, `--spectrum-table-thumbnail-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-table-row-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-table-section-header-block-start-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-100": {
+ "value": "9px",
+ "description": "Used by `--spectrum-table-section-header-block-end-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-thumbnail-size-300": {
+ "value": "26px",
+ "description": "Used by `--spectrum-table-thumbnail-size`, `--mod-table-thumbnail-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-table-row-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-table-section-header-block-start-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-table-section-header-block-end-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-table-disclosure-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-thumbnail-size-200": {
+ "value": "22px",
+ "description": "Used by `--spectrum-table-thumbnail-size`, `--mod-table-thumbnail-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-table-min-header-height`, `--spectrum-table-disclosure-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-200": {
+ "value": "7px",
+ "description": "Used by `--spectrum-table-icon-to-text`, `--spectrum-table-thumbnail-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-table-row-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-table-section-header-block-start-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-200": {
+ "value": "11px",
+ "description": "Used by `--spectrum-table-section-header-block-end-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-thumbnail-size-500": {
+ "value": "32px",
+ "description": "Used by `--spectrum-table-thumbnail-size`, `--mod-table-thumbnail-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-table-min-header-height`, `--spectrum-table-disclosure-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-300": {
+ "value": "8px",
+ "description": "Used by `--spectrum-table-icon-to-text`, `--spectrum-table-thumbnail-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-table-row-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-300": {
+ "value": "12px",
+ "description": "Used by `--spectrum-table-section-header-block-start-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-table-section-header-block-end-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-thumbnail-size-700": {
+ "value": "40px",
+ "description": "Used by `--spectrum-table-thumbnail-size`, `--mod-table-thumbnail-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-thumbnail-size-50": {
+ "value": "16px",
+ "description": "Used by `--mod-table-thumbnail-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-thumbnail-size-800": {
+ "value": "44px",
+ "description": "Used by `--mod-table-thumbnail-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-checkbox-control-size-small": {
+ "value": "12px",
+ "description": "Used by `.spectrum-Table-checkboxCell`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-background-layer-1-color": {
+ "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+ "description": "Used by `--spectrum-table-header-background-color`.
Defaults to `var(--spectrum-gray-75)`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-75": {
+ "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+ "description": "Used by `--spectrum-table-header-background-color`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-table-header-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-table-header-background-color`.",
+ "control": "color"
+ },
+ "system-table-border-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-table-border-color`.",
+ "control": "color"
+ },
+ "system-table-divider-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-table-divider-color`.",
+ "control": "color"
+ },
+ "system-table-row-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-table-row-background-color`.",
+ "control": "color"
+ },
+ "system-table-summary-row-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-table-summary-row-background-color`.",
+ "control": "color"
+ },
+ "system-table-section-header-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-table-section-header-background-color`.",
+ "control": "color"
+ },
+ "system-table-icon-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-table-icon-color-focus`.",
+ "control": "color"
+ },
+ "system-table-icon-color-focus-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-table-icon-color-focus-hover`.",
+ "control": "color"
+ },
+ "system-table-quiet-header-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-table-header-background-color`.",
+ "control": "color"
+ },
+ "system-table-quiet-row-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-table-row-background-color`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {
+ "mod-thumbnail-size": {
+ "category": "Passthrough"
+ },
+ "mod-checkbox-spacing": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-table-row-background-color": {
+ "value": "var(--mod-table-summary-row-background-color, var(--spectrum-table-summary-row-background-color))",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--mod-table-summary-row-background-color, var(--spectrum-table-summary-row-background-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-table-row-text-color": {
+ "value": "var(--mod-table-summary-row-text-color, var(--spectrum-table-row-text-color))",
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table-row.is-focused, .spectrum-Table-row:focus-visible`, `.spectrum-Table-row:active`, `.spectrum-Table-row.is-selected`, `.spectrum-Table-row.is-selected.is-focused, .spectrum-Table-row.is-selected:focus-visible`, `.spectrum-Table-body.is-drop-target .spectrum-Table-row, .spectrum-Table-row.is-drop-target`, `.spectrum-Table-row:hover`, `.spectrum-Table-row.is-selected:hover`, `.spectrum-Table-row--sectionHeader:hover`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`.
Defaults to `var(--mod-table-summary-row-text-color, var(--spectrum-table-row-text-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-table-divider-color": {
+ "value": "var(--mod-table-divider-color, var(--spectrum-table-divider-color))",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-cell--divider`.
Defaults to `var(--mod-table-divider-color, var(--spectrum-table-divider-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-table-border-color": {
+ "value": "var(--mod-table-border-color, var(--spectrum-table-border-color))",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child`, `.spectrum-Table-scroller`, `.spectrum-Table-scroller .spectrum-Table-headCell`.
Defaults to `var(--mod-table-border-color, var(--spectrum-table-border-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-table-icon-color": {
+ "value": "var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus))",
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table-row.is-focused, .spectrum-Table-row:focus-visible`, `.spectrum-Table-row:active`, `.spectrum-Table-row.is-selected`, `.spectrum-Table-row.is-selected.is-focused, .spectrum-Table-row.is-selected:focus-visible`, `.spectrum-Table-body.is-drop-target .spectrum-Table-row, .spectrum-Table-row.is-drop-target`, `.spectrum-Table-row:hover`, `.spectrum-Table-row.is-selected:hover`.
Used by `--spectrum-table-icon-color`.
Defaults to `var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-table-icon-color-focus": {
+ "value": "var(--mod-table-icon-color-focus-hover, var(--spectrum-table-icon-color-focus-hover))",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`.
Defaults to `var(--mod-table-icon-color-focus-hover, var(--spectrum-table-icon-color-focus-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-table-selected-row-background-color": {
+ "value": "var(--mod-table-drop-zone-background-color, var(--spectrum-table-drop-zone-background-color))",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-selected-cell-background-color`, `--spectrum-table-cell-background-color`.
Defaults to `var(--mod-table-drop-zone-background-color, var(--spectrum-table-drop-zone-background-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-table-selected-row-text-color": {
+ "description": "Defined in `.spectrum-Table`.
Used by `--highcontrast-table-cell-focus-indicator-color`, `.spectrum-Table-body.is-drop-target .spectrum-Table-row .spectrum-Table-checkbox .spectrum-Checkbox-box:before, .spectrum-Table-row.is-drop-target .spectrum-Table-checkbox .spectrum-Checkbox-box:before, .spectrum-Table-row.is-selected .spectrum-Table-checkbox .spectrum-Checkbox-box:before`, `--highcontrast-table-row-text-color`, `--highcontrast-table-icon-color`.",
+ "control": "color"
+ },
+ "highcontrast-table-selected-row-background-color-focus": {
+ "value": "var(--spectrum-table-selected-cell-background-color-focus)",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-selected-cell-background-color-focus`, `--spectrum-table-cell-background-color`.
Defaults to `var(--spectrum-table-selected-cell-background-color-focus)`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-table-selected-row-text-color-focus": {
+ "description": "Defined in `.spectrum-Table`.
Used by `--highcontrast-table-row-text-color`, `--highcontrast-table-icon-color`.",
+ "control": "color"
+ },
+ "highcontrast-table-row-background-color-hover": {
+ "value": "var(--mod-table-row-background-color-hover, var(--spectrum-table-row-background-color-hover))",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--mod-table-row-background-color-hover, var(--spectrum-table-row-background-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-table-row-text-color-hover": {
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-row.is-focused .spectrum-Table-checkbox .spectrum-Checkbox-box:before, .spectrum-Table-row:focus-visible .spectrum-Table-checkbox .spectrum-Checkbox-box:before`, `.spectrum-Table-row:hover .spectrum-Table-checkbox .spectrum-Checkbox-box:before`, `--highcontrast-table-row-text-color`, `--highcontrast-table-icon-color`.",
+ "control": "color"
+ },
+ "highcontrast-table-section-header-text-color": {
+ "value": "var(--mod-table-section-header-text-color, var(--spectrum-table-row-text-color))",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `--highcontrast-table-row-text-color`.
Defaults to `var(--mod-table-section-header-text-color, var(--spectrum-table-row-text-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-table-section-header-background-color": {
+ "value": "var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color))",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-table-focus-indicator-color": {
+ "value": "var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color))",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-body.is-drop-target`, `--mod-table-border-color`, `.spectrum-Table-row.is-drop-target`, `.spectrum-Table-row.is-drop-target .spectrum-Table-cell`, `.spectrum-Table-cell.is-focused, .spectrum-Table-cell:focus-visible, .spectrum-Table-headCell.is-focused, .spectrum-Table-headCell:focus-visible`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused, .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible`.
Defaults to `var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-table-transition-duration": {
+ "value": "var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-sortedIcon`, `.spectrum-Table-headCell`, `.spectrum-Table-row`.
Defaults to `var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))`, if not set.",
+ "control": "text"
+ },
+ "highcontrast-table-cell-focus-indicator-color": {
+ "value": "var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)))",
+ "description": "Defined in `.spectrum-Table-body.is-drop-target .spectrum-Table-row, .spectrum-Table-row.is-drop-target, .spectrum-Table-row.is-selected`.
Used by `.spectrum-Table-cell.is-focused, .spectrum-Table-cell:focus-visible, .spectrum-Table-headCell.is-focused, .spectrum-Table-headCell:focus-visible`.
Defaults to `var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-table-cell-focus-extra-offset": {
+ "description": "Defined in `.spectrum-Table-body.is-drop-target .spectrum-Table-row, .spectrum-Table-row.is-drop-target, .spectrum-Table-row.is-selected`.
Used by `.spectrum-Table-cell.is-focused, .spectrum-Table-cell:focus-visible, .spectrum-Table-headCell.is-focused, .spectrum-Table-headCell:focus-visible`.",
+ "control": "text"
+ }
+ }
}
diff --git a/components/table/stories/table.stories.js b/components/table/stories/table.stories.js
index 834a90f4630..841498a3da4 100644
--- a/components/table/stories/table.stories.js
+++ b/components/table/stories/table.stories.js
@@ -1,11 +1,13 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isEmphasized, isQuiet, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { TableGroup } from "./table.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* A table is used to create a container for displaying information. It allows users to sort, compare, and take action on large amounts of data.
*/
@@ -117,6 +119,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/tabs/dist/metadata.json b/components/tabs/dist/metadata.json
index 544295ef045..39fa0b1dfdf 100644
--- a/components/tabs/dist/metadata.json
+++ b/components/tabs/dist/metadata.json
@@ -24,20 +24,20 @@
".spectrum-Tabs--vertical-right .spectrum-Tabs-item",
".spectrum-Tabs--vertical-right .spectrum-Tabs-item:before",
".spectrum-Tabs--vertical-right .spectrum-Tabs-selectionIndicator",
- ".spectrum-Tabs--vertical-right.spectrum-Tabs--quiet",
".spectrum-Tabs--vertical-right:dir(rtl)",
- ".spectrum-Tabs--vertical.spectrum-Tabs--quiet",
+ ".spectrum-Tabs--vertical-right.spectrum-Tabs--quiet",
".spectrum-Tabs--vertical:dir(rtl)",
+ ".spectrum-Tabs--vertical.spectrum-Tabs--quiet",
".spectrum-Tabs-item",
".spectrum-Tabs-item .spectrum-Icon",
".spectrum-Tabs-item .spectrum-Icon + .spectrum-Tabs-itemLabel",
- ".spectrum-Tabs-item.is-disabled",
- ".spectrum-Tabs-item.is-disabled .spectrum-Tabs-itemLabel",
- ".spectrum-Tabs-item.is-selected",
".spectrum-Tabs-item:before",
".spectrum-Tabs-item:focus-visible",
".spectrum-Tabs-item:focus-visible:before",
".spectrum-Tabs-item:hover",
+ ".spectrum-Tabs-item.is-disabled",
+ ".spectrum-Tabs-item.is-disabled .spectrum-Tabs-itemLabel",
+ ".spectrum-Tabs-item.is-selected",
".spectrum-Tabs-itemLabel",
".spectrum-Tabs-itemLabel:empty",
".spectrum-Tabs-selectionIndicator",
@@ -54,172 +54,907 @@
"[dir=\"rtl\"] .spectrum-Tabs--vertical",
"[dir=\"rtl\"] .spectrum-Tabs--vertical-right"
],
- "modifiers": [
- "--mod-tabs-animation-duration",
- "--mod-tabs-animation-ease",
- "--mod-tabs-bottom-to-text",
- "--mod-tabs-bottom-to-text-compact",
- "--mod-tabs-color",
- "--mod-tabs-color-disabled",
- "--mod-tabs-color-hover",
- "--mod-tabs-color-hover-emphasized",
- "--mod-tabs-color-key-focus",
- "--mod-tabs-color-key-focus-emphasized",
- "--mod-tabs-color-selected",
- "--mod-tabs-color-selected-emphasized",
- "--mod-tabs-divider-background-color",
- "--mod-tabs-divider-border-radius",
- "--mod-tabs-divider-size",
- "--mod-tabs-focus-indicator-border-radius",
- "--mod-tabs-focus-indicator-color",
- "--mod-tabs-focus-indicator-gap",
- "--mod-tabs-focus-indicator-width",
- "--mod-tabs-font-family",
- "--mod-tabs-font-size",
- "--mod-tabs-font-style",
- "--mod-tabs-font-weight",
- "--mod-tabs-icon-size",
- "--mod-tabs-icon-to-text",
- "--mod-tabs-item-height",
- "--mod-tabs-item-height-compact",
- "--mod-tabs-item-horizontal-spacing",
- "--mod-tabs-item-vertical-spacing",
- "--mod-tabs-line-height",
- "--mod-tabs-list-background-direction",
- "--mod-tabs-list-background-direction-vertical",
- "--mod-tabs-list-background-direction-vertical-right",
- "--mod-tabs-selection-indicator-color",
- "--mod-tabs-selection-indicator-color-emphasized",
- "--mod-tabs-start-to-edge",
- "--mod-tabs-start-to-item-quiet",
- "--mod-tabs-top-to-icon",
- "--mod-tabs-top-to-icon-compact",
- "--mod-tabs-top-to-text",
- "--mod-tabs-top-to-text-compact"
- ],
- "component": [
- "--spectrum-tabs-animation-duration",
- "--spectrum-tabs-animation-ease",
- "--spectrum-tabs-bottom-to-text",
- "--spectrum-tabs-color",
- "--spectrum-tabs-color-disabled",
- "--spectrum-tabs-color-hover",
- "--spectrum-tabs-color-key-focus",
- "--spectrum-tabs-color-selected",
- "--spectrum-tabs-divider-background-color",
- "--spectrum-tabs-divider-border-radius",
- "--spectrum-tabs-divider-size",
- "--spectrum-tabs-focus-indicator-border-radius",
- "--spectrum-tabs-focus-indicator-color",
- "--spectrum-tabs-focus-indicator-gap",
- "--spectrum-tabs-focus-indicator-width",
- "--spectrum-tabs-font-family",
- "--spectrum-tabs-font-size",
- "--spectrum-tabs-font-style",
- "--spectrum-tabs-font-weight",
- "--spectrum-tabs-icon-size",
- "--spectrum-tabs-icon-to-text",
- "--spectrum-tabs-item-height",
- "--spectrum-tabs-item-horizontal-spacing",
- "--spectrum-tabs-item-vertical-spacing",
- "--spectrum-tabs-line-height",
- "--spectrum-tabs-list-background-direction",
- "--spectrum-tabs-selection-indicator-color",
- "--spectrum-tabs-start-to-edge",
- "--spectrum-tabs-top-to-icon",
- "--spectrum-tabs-top-to-text"
- ],
- "global": [
- "--spectrum-accent-content-color-default",
- "--spectrum-accent-content-color-hover",
- "--spectrum-accent-content-color-key-focus",
- "--spectrum-animation-duration-100",
- "--spectrum-animation-ease-in-out",
- "--spectrum-border-width-200",
- "--spectrum-corner-radius-100",
- "--spectrum-default-font-style",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-300",
- "--spectrum-font-size-75",
- "--spectrum-gray-200",
- "--spectrum-gray-500",
- "--spectrum-line-height-100",
- "--spectrum-neutral-subdued-content-color-default",
- "--spectrum-neutral-subdued-content-color-down",
- "--spectrum-neutral-subdued-content-color-hover",
- "--spectrum-neutral-subdued-content-color-key-focus",
- "--spectrum-regular-font-weight",
- "--spectrum-sans-font-family-stack",
- "--spectrum-tab-item-bottom-to-text-extra-large",
- "--spectrum-tab-item-bottom-to-text-large",
- "--spectrum-tab-item-bottom-to-text-medium",
- "--spectrum-tab-item-bottom-to-text-small",
- "--spectrum-tab-item-compact-height-extra-large",
- "--spectrum-tab-item-compact-height-large",
- "--spectrum-tab-item-compact-height-medium",
- "--spectrum-tab-item-compact-height-small",
- "--spectrum-tab-item-focus-indicator-gap-extra-large",
- "--spectrum-tab-item-focus-indicator-gap-large",
- "--spectrum-tab-item-focus-indicator-gap-medium",
- "--spectrum-tab-item-focus-indicator-gap-small",
- "--spectrum-tab-item-height-extra-large",
- "--spectrum-tab-item-height-large",
- "--spectrum-tab-item-height-medium",
- "--spectrum-tab-item-height-small",
- "--spectrum-tab-item-start-to-edge-extra-large",
- "--spectrum-tab-item-start-to-edge-large",
- "--spectrum-tab-item-start-to-edge-medium",
- "--spectrum-tab-item-start-to-edge-small",
- "--spectrum-tab-item-to-tab-item-horizontal-extra-large",
- "--spectrum-tab-item-to-tab-item-horizontal-large",
- "--spectrum-tab-item-to-tab-item-horizontal-medium",
- "--spectrum-tab-item-to-tab-item-horizontal-small",
- "--spectrum-tab-item-to-tab-item-vertical-extra-large",
- "--spectrum-tab-item-to-tab-item-vertical-large",
- "--spectrum-tab-item-to-tab-item-vertical-medium",
- "--spectrum-tab-item-to-tab-item-vertical-small",
- "--spectrum-tab-item-top-to-text-compact-extra-large",
- "--spectrum-tab-item-top-to-text-compact-large",
- "--spectrum-tab-item-top-to-text-compact-medium",
- "--spectrum-tab-item-top-to-text-compact-small",
- "--spectrum-tab-item-top-to-text-extra-large",
- "--spectrum-tab-item-top-to-text-large",
- "--spectrum-tab-item-top-to-text-medium",
- "--spectrum-tab-item-top-to-text-small",
- "--spectrum-tab-item-top-to-workflow-icon-compact-extra-large",
- "--spectrum-tab-item-top-to-workflow-icon-compact-large",
- "--spectrum-tab-item-top-to-workflow-icon-compact-medium",
- "--spectrum-tab-item-top-to-workflow-icon-compact-small",
- "--spectrum-tab-item-top-to-workflow-icon-extra-large",
- "--spectrum-tab-item-top-to-workflow-icon-large",
- "--spectrum-tab-item-top-to-workflow-icon-medium",
- "--spectrum-tab-item-top-to-workflow-icon-small",
- "--spectrum-text-to-visual-100",
- "--spectrum-text-to-visual-200",
- "--spectrum-text-to-visual-300",
- "--spectrum-text-to-visual-75",
- "--spectrum-workflow-icon-size-100",
- "--spectrum-workflow-icon-size-200",
- "--spectrum-workflow-icon-size-50",
- "--spectrum-workflow-icon-size-75"
- ],
- "system-theme": [
- "--system-tabs-divider-background-color",
- "--system-tabs-font-weight"
- ],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-tabs-color",
- "--highcontrast-tabs-color-disabled",
- "--highcontrast-tabs-color-hover",
- "--highcontrast-tabs-color-key-focus",
- "--highcontrast-tabs-color-selected",
- "--highcontrast-tabs-divider-background-color",
- "--highcontrast-tabs-focus-indicator-background-color",
- "--highcontrast-tabs-focus-indicator-color",
- "--highcontrast-tabs-selection-indicator-color"
- ]
+ "modifiers": {
+ "mod-tabs-color-selected": {
+ "value": "var(--spectrum-tabs-color-selected)",
+ "description": "Defined in `.spectrum-Tabs.spectrum-Tabs--emphasized`.
Used by `.spectrum-Tabs-item.is-selected`.
Defaults to `var(--spectrum-tabs-color-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-color-selected-emphasized": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--mod-tabs-color-selected`.
Defaults to `var(--spectrum-accent-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-color-hover": {
+ "value": "var(--spectrum-tabs-color-hover)",
+ "description": "Defined in `.spectrum-Tabs.spectrum-Tabs--emphasized`.
Used by `.spectrum-Tabs-item:hover`.
Defaults to `var(--spectrum-tabs-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-color-hover-emphasized": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--mod-tabs-color-hover`.
Defaults to `var(--spectrum-accent-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-color-key-focus": {
+ "value": "var(--spectrum-tabs-color-key-focus)",
+ "description": "Defined in `.spectrum-Tabs.spectrum-Tabs--emphasized`.
Used by `.spectrum-Tabs-item:focus-visible`.
Defaults to `var(--spectrum-tabs-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-color-key-focus-emphasized": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--mod-tabs-color-key-focus`.
Defaults to `var(--spectrum-accent-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-selection-indicator-color": {
+ "value": "var(--spectrum-tabs-selection-indicator-color)",
+ "description": "Defined in `.spectrum-Tabs.spectrum-Tabs--emphasized`.
Used by `.spectrum-Tabs-selectionIndicator`.
Defaults to `var(--spectrum-tabs-selection-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-selection-indicator-color-emphasized": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--mod-tabs-selection-indicator-color`.
Defaults to `var(--spectrum-accent-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-list-background-direction": {
+ "value": "var(--spectrum-tabs-list-background-direction)",
+ "description": "Defined in `.spectrum-Tabs--vertical`, `.spectrum-Tabs--vertical-right`, `.spectrum-Tabs--vertical:dir(rtl), [dir=\"rtl\"] .spectrum-Tabs--vertical`, `.spectrum-Tabs--vertical-right:dir(rtl), [dir=\"rtl\"] .spectrum-Tabs--vertical-right`.
Used by `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--quiet`.
Defaults to `var(--spectrum-tabs-list-background-direction)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-list-background-direction-vertical": {
+ "description": "Used by `--mod-tabs-list-background-direction`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-list-background-direction-vertical-right": {
+ "description": "Used by `--mod-tabs-list-background-direction`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-item-height": {
+ "value": "var(--spectrum-tabs-item-height)",
+ "description": "Defined in `.spectrum-Tabs.spectrum-Tabs--compact`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-item`, `.spectrum-Tabs--vertical .spectrum-Tabs-item, .spectrum-Tabs--vertical-right .spectrum-Tabs-item`, `.spectrum-Tabs--vertical .spectrum-Icon, .spectrum-Tabs--vertical-right .spectrum-Icon`.
Defaults to `var(--spectrum-tabs-item-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-item-height-compact": {
+ "value": "var(--spectrum-component-height-300)",
+ "description": "Used by `--mod-tabs-item-height`.
Defaults to `var(--spectrum-tab-item-compact-height-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-top-to-text": {
+ "value": "var(--spectrum-tabs-top-to-text)",
+ "description": "Defined in `.spectrum-Tabs.spectrum-Tabs--compact`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-item:before`, `.spectrum-Tabs-itemLabel`.
Defaults to `var(--spectrum-tabs-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-top-to-text-compact": {
+ "value": "12px",
+ "description": "Used by `--mod-tabs-top-to-text`.
Defaults to `var(--spectrum-tab-item-top-to-text-compact-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-bottom-to-text": {
+ "value": "var(--spectrum-tabs-bottom-to-text)",
+ "description": "Defined in `.spectrum-Tabs.spectrum-Tabs--compact`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-itemLabel`.
Defaults to `var(--spectrum-tabs-bottom-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-bottom-to-text-compact": {
+ "value": "12px",
+ "description": "Used by `--mod-tabs-bottom-to-text`.
Defaults to `var(--spectrum-tab-item-top-to-text-compact-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-top-to-icon": {
+ "value": "var(--spectrum-tabs-top-to-icon)",
+ "description": "Defined in `.spectrum-Tabs.spectrum-Tabs--compact`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-item .spectrum-Icon`.
Defaults to `var(--spectrum-tabs-top-to-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-top-to-icon-compact": {
+ "value": "11px",
+ "description": "Used by `--mod-tabs-top-to-icon`.
Defaults to `var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-divider-background-color": {
+ "value": "var(--spectrum-tabs-divider-background-color)",
+ "description": "Used by `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--quiet`.
Defaults to `var(--spectrum-tabs-divider-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-divider-size": {
+ "value": "var(--spectrum-tabs-divider-size)",
+ "description": "Used by `.spectrum-Tabs`, `.spectrum-Tabs-item`, `.spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator`, `.spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator, .spectrum-Tabs--vertical-right .spectrum-Tabs-selectionIndicator`, `.spectrum-Tabs.spectrum-Tabs--quiet`.
Defaults to `var(--spectrum-tabs-divider-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-color": {
+ "value": "var(--spectrum-tabs-color)",
+ "description": "Used by `.spectrum-Tabs-item`.
Defaults to `var(--spectrum-tabs-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-animation-duration": {
+ "value": "var(--spectrum-tabs-animation-duration)",
+ "description": "Used by `.spectrum-Tabs-item`, `.spectrum-Tabs-selectionIndicator`.
Defaults to `var(--spectrum-tabs-animation-duration)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-icon-size": {
+ "value": "var(--spectrum-tabs-icon-size)",
+ "description": "Used by `.spectrum-Tabs-item .spectrum-Icon`.
Defaults to `var(--spectrum-tabs-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-icon-to-text": {
+ "value": "var(--spectrum-tabs-icon-to-text)",
+ "description": "Used by `.spectrum-Tabs-item .spectrum-Icon + .spectrum-Tabs-itemLabel`.
Defaults to `var(--spectrum-tabs-icon-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-focus-indicator-gap": {
+ "value": "var(--spectrum-tabs-focus-indicator-gap)",
+ "description": "Used by `.spectrum-Tabs-item:before`, `.spectrum-Tabs--vertical .spectrum-Tabs-item:before, .spectrum-Tabs--vertical-right .spectrum-Tabs-item:before`.
Defaults to `var(--spectrum-tabs-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-focus-indicator-width": {
+ "value": "var(--spectrum-tabs-focus-indicator-width)",
+ "description": "Used by `.spectrum-Tabs-item:before`.
Defaults to `var(--spectrum-tabs-focus-indicator-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-focus-indicator-border-radius": {
+ "value": "var(--spectrum-tabs-focus-indicator-border-radius)",
+ "description": "Used by `.spectrum-Tabs-item:before`.
Defaults to `var(--spectrum-tabs-focus-indicator-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-color-disabled": {
+ "value": "var(--spectrum-tabs-color-disabled)",
+ "description": "Used by `.spectrum-Tabs-item.is-disabled`.
Defaults to `var(--spectrum-tabs-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-focus-indicator-color": {
+ "value": "var(--spectrum-tabs-focus-indicator-color)",
+ "description": "Used by `.spectrum-Tabs-item:focus-visible:before`.
Defaults to `var(--spectrum-tabs-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-font-family": {
+ "value": "var(--spectrum-tabs-font-family)",
+ "description": "Used by `.spectrum-Tabs-itemLabel`.
Defaults to `var(--spectrum-tabs-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-font-style": {
+ "value": "var(--spectrum-tabs-font-style)",
+ "description": "Used by `.spectrum-Tabs-itemLabel`.
Defaults to `var(--spectrum-tabs-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-font-size": {
+ "value": "var(--spectrum-tabs-font-size)",
+ "description": "Used by `.spectrum-Tabs-itemLabel`.
Defaults to `var(--spectrum-tabs-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-font-weight": {
+ "value": "var(--spectrum-tabs-font-weight)",
+ "description": "Used by `.spectrum-Tabs-itemLabel`.
Defaults to `var(--spectrum-tabs-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-line-height": {
+ "value": "var(--spectrum-tabs-line-height)",
+ "description": "Used by `.spectrum-Tabs-itemLabel`.
Defaults to `var(--spectrum-tabs-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-animation-ease": {
+ "value": "var(--spectrum-tabs-animation-ease)",
+ "description": "Used by `.spectrum-Tabs-selectionIndicator`.
Defaults to `var(--spectrum-tabs-animation-ease)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-divider-border-radius": {
+ "value": "var(--spectrum-tabs-divider-border-radius)",
+ "description": "Used by `.spectrum-Tabs-selectionIndicator`.
Defaults to `var(--spectrum-tabs-divider-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-item-horizontal-spacing": {
+ "value": "var(--spectrum-tabs-item-horizontal-spacing)",
+ "description": "Used by `.spectrum-Tabs--horizontal .spectrum-Tabs-item + :not(.spectrum-Tabs-selectionIndicator)`.
Defaults to `var(--spectrum-tabs-item-horizontal-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-start-to-item-quiet": {
+ "description": "Used by `.spectrum-Tabs--quiet .spectrum-Tabs-selectionIndicator`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-item-vertical-spacing": {
+ "value": "var(--spectrum-tabs-item-vertical-spacing)",
+ "description": "Used by `.spectrum-Tabs--vertical .spectrum-Tabs-item, .spectrum-Tabs--vertical-right .spectrum-Tabs-item`.
Defaults to `var(--spectrum-tabs-item-vertical-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-start-to-edge": {
+ "value": "var(--spectrum-tabs-start-to-edge)",
+ "description": "Used by `.spectrum-Tabs--vertical .spectrum-Tabs-item, .spectrum-Tabs--vertical-right .spectrum-Tabs-item`.
Defaults to `var(--spectrum-tabs-start-to-edge)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-tabs-item-height": {
+ "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-item`, `.spectrum-Tabs--vertical .spectrum-Tabs-item, .spectrum-Tabs--vertical-right .spectrum-Tabs-item`, `.spectrum-Tabs--vertical .spectrum-Icon, .spectrum-Tabs--vertical-right .spectrum-Icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-item-horizontal-spacing": {
+ "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs--horizontal .spectrum-Tabs-item + :not(.spectrum-Tabs-selectionIndicator)`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-item-vertical-spacing": {
+ "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs--vertical .spectrum-Tabs-item, .spectrum-Tabs--vertical-right .spectrum-Tabs-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-start-to-edge": {
+ "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs--vertical .spectrum-Tabs-item, .spectrum-Tabs--vertical-right .spectrum-Tabs-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-top-to-text": {
+ "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-item:before`, `.spectrum-Tabs-itemLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-bottom-to-text": {
+ "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-itemLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-icon-size": {
+ "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-item .spectrum-Icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-icon-to-text": {
+ "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-item .spectrum-Icon + .spectrum-Tabs-itemLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-top-to-icon": {
+ "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-item .spectrum-Icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-color": {
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tabs-color-selected": {
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item.is-selected`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tabs-color-hover": {
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tabs-color-key-focus": {
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tabs-color-disabled": {
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item.is-disabled`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tabs-font-family": {
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-itemLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-font-style": {
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-itemLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-font-size": {
+ "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-itemLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-line-height": {
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-itemLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-focus-indicator-width": {
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-focus-indicator-border-radius": {
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-focus-indicator-gap": {
+ "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-item:before`, `.spectrum-Tabs--vertical .spectrum-Tabs-item:before, .spectrum-Tabs--vertical-right .spectrum-Tabs-item:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-focus-indicator-color": {
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:focus-visible:before`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tabs-selection-indicator-color": {
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-selectionIndicator`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tabs-list-background-direction": {
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--quiet`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-divider-size": {
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs`, `.spectrum-Tabs-item`, `.spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator`, `.spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator, .spectrum-Tabs--vertical-right .spectrum-Tabs-selectionIndicator`, `.spectrum-Tabs.spectrum-Tabs--quiet`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-divider-border-radius": {
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-selectionIndicator`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-animation-duration": {
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item`, `.spectrum-Tabs-selectionIndicator`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-animation-ease": {
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-selectionIndicator`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-divider-background-color": {
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--quiet`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tabs-font-weight": {
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-itemLabel`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--system-tabs-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--system-tabs-divider-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-height-medium": {
+ "value": "var(--spectrum-component-height-300)",
+ "description": "Used by `--spectrum-tabs-item-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-to-tab-item-horizontal-medium": {
+ "value": "24px",
+ "description": "Used by `--spectrum-tabs-item-horizontal-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-to-tab-item-vertical-medium": {
+ "value": "4px",
+ "description": "Used by `--spectrum-tabs-item-vertical-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-start-to-edge-medium": {
+ "value": "12px",
+ "description": "Used by `--spectrum-tabs-start-to-edge`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-top-to-text-medium": {
+ "value": "14px",
+ "description": "Used by `--spectrum-tabs-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-bottom-to-text-medium": {
+ "value": "14px",
+ "description": "Used by `--spectrum-tabs-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-75": {
+ "value": "16px",
+ "description": "Used by `--spectrum-tabs-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-tabs-icon-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-top-to-workflow-icon-medium": {
+ "value": "15px",
+ "description": "Used by `--spectrum-tabs-top-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Used by `--spectrum-tabs-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-down": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-tabs-color-selected`, `--spectrum-tabs-selection-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-hover": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-tabs-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-key-focus": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-tabs-color-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-500": {
+ "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+ "description": "Used by `--spectrum-tabs-color-disabled`, `--highcontrast-tabs-divider-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-tabs-font-family`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-tabs-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-tabs-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-tabs-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-tabs-focus-indicator-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-tabs-focus-indicator-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-focus-indicator-gap-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-tabs-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-tabs-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-tabs-divider-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `--spectrum-tabs-animation-duration`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-ease-in-out": {
+ "description": "Used by `--spectrum-tabs-animation-ease`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-height-small": {
+ "value": "var(--spectrum-component-height-200)",
+ "description": "Used by `--spectrum-tabs-item-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-to-tab-item-horizontal-small": {
+ "value": "21px",
+ "description": "Used by `--spectrum-tabs-item-horizontal-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-to-tab-item-vertical-small": {
+ "value": "4px",
+ "description": "Used by `--spectrum-tabs-item-vertical-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-start-to-edge-small": {
+ "value": "12px",
+ "description": "Used by `--spectrum-tabs-start-to-edge`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-top-to-text-small": {
+ "value": "11px",
+ "description": "Used by `--spectrum-tabs-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-bottom-to-text-small": {
+ "value": "12px",
+ "description": "Used by `--spectrum-tabs-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-50": {
+ "value": "14px",
+ "description": "Used by `--spectrum-tabs-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-tabs-icon-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-top-to-workflow-icon-small": {
+ "value": "13px",
+ "description": "Used by `--spectrum-tabs-top-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-focus-indicator-gap-small": {
+ "value": "7px",
+ "description": "Used by `--spectrum-tabs-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-tabs-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-height-large": {
+ "value": "var(--spectrum-component-height-400)",
+ "description": "Used by `--spectrum-tabs-item-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-to-tab-item-horizontal-large": {
+ "value": "27px",
+ "description": "Used by `--spectrum-tabs-item-horizontal-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-to-tab-item-vertical-large": {
+ "value": "5px",
+ "description": "Used by `--spectrum-tabs-item-vertical-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-start-to-edge-large": {
+ "value": "13px",
+ "description": "Used by `--spectrum-tabs-start-to-edge`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-top-to-text-large": {
+ "value": "16px",
+ "description": "Used by `--spectrum-tabs-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-bottom-to-text-large": {
+ "value": "18px",
+ "description": "Used by `--spectrum-tabs-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-tabs-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-200": {
+ "value": "7px",
+ "description": "Used by `--spectrum-tabs-icon-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-top-to-workflow-icon-large": {
+ "value": "17px",
+ "description": "Used by `--spectrum-tabs-top-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-focus-indicator-gap-large": {
+ "value": "9px",
+ "description": "Used by `--spectrum-tabs-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-tabs-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-height-extra-large": {
+ "value": "var(--spectrum-component-height-500)",
+ "description": "Used by `--spectrum-tabs-item-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-to-tab-item-horizontal-extra-large": {
+ "value": "30px",
+ "description": "Used by `--spectrum-tabs-item-horizontal-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-to-tab-item-vertical-extra-large": {
+ "value": "5px",
+ "description": "Used by `--spectrum-tabs-item-vertical-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-start-to-edge-extra-large": {
+ "value": "13px",
+ "description": "Used by `--spectrum-tabs-start-to-edge`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-top-to-text-extra-large": {
+ "value": "19px",
+ "description": "Used by `--spectrum-tabs-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-bottom-to-text-extra-large": {
+ "value": "20px",
+ "description": "Used by `--spectrum-tabs-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-200": {
+ "value": "22px",
+ "description": "Used by `--spectrum-tabs-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-300": {
+ "value": "8px",
+ "description": "Used by `--spectrum-tabs-icon-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-top-to-workflow-icon-extra-large": {
+ "value": "19px",
+ "description": "Used by `--spectrum-tabs-top-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-focus-indicator-gap-extra-large": {
+ "value": "10px",
+ "description": "Used by `--spectrum-tabs-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-tabs-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-default": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--mod-tabs-color-selected`, `--mod-tabs-selection-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-hover": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--mod-tabs-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-key-focus": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--mod-tabs-color-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-tab-item-compact-height-medium": {
+ "value": "var(--spectrum-component-height-100)",
+ "description": "Used by `--mod-tabs-item-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-top-to-text-compact-medium": {
+ "value": "6px",
+ "description": "Used by `--mod-tabs-top-to-text`, `--mod-tabs-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-top-to-workflow-icon-compact-medium": {
+ "value": "7px",
+ "description": "Used by `--mod-tabs-top-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-compact-height-small": {
+ "value": "var(--spectrum-component-height-75)",
+ "description": "Used by `--mod-tabs-item-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-top-to-text-compact-small": {
+ "value": "4px",
+ "description": "Used by `--mod-tabs-top-to-text`, `--mod-tabs-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-top-to-workflow-icon-compact-small": {
+ "value": "3px",
+ "description": "Used by `--mod-tabs-top-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-compact-height-large": {
+ "value": "var(--spectrum-component-height-200)",
+ "description": "Used by `--mod-tabs-item-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-top-to-text-compact-large": {
+ "value": "10px",
+ "description": "Used by `--mod-tabs-top-to-text`, `--mod-tabs-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-top-to-workflow-icon-compact-large": {
+ "value": "9px",
+ "description": "Used by `--mod-tabs-top-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-compact-height-extra-large": {
+ "value": "var(--spectrum-component-height-300)",
+ "description": "Used by `--mod-tabs-item-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-top-to-text-compact-extra-large": {
+ "value": "12px",
+ "description": "Used by `--mod-tabs-top-to-text`, `--mod-tabs-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-top-to-workflow-icon-compact-extra-large": {
+ "value": "11px",
+ "description": "Used by `--mod-tabs-top-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-tabs-font-weight": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tabs-font-weight`.",
+ "control": "text"
+ },
+ "system-tabs-divider-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tabs-divider-background-color`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-tabs-divider-background-color": {
+ "value": "var(--mod-tabs-divider-background-color, var(--spectrum-tabs-divider-background-color))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--quiet`.
Defaults to `var(--mod-tabs-divider-background-color, var(--spectrum-tabs-divider-background-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tabs-color": {
+ "value": "var(--mod-tabs-color, var(--spectrum-tabs-color))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item`.
Defaults to `var(--mod-tabs-color, var(--spectrum-tabs-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tabs-color-hover": {
+ "value": "var(--mod-tabs-color-hover, var(--spectrum-tabs-color-hover))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:hover`.
Defaults to `var(--mod-tabs-color-hover, var(--spectrum-tabs-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tabs-color-selected": {
+ "value": "var(--mod-tabs-color-selected, var(--spectrum-tabs-color-selected))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item.is-selected`, `.spectrum-Tabs .is-selected:focus, .spectrum-Tabs .is-selected:focus-visible`.
Defaults to `var(--mod-tabs-color-selected, var(--spectrum-tabs-color-selected))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tabs-color-disabled": {
+ "value": "var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item.is-disabled`.
Defaults to `var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tabs-color-key-focus": {
+ "value": "var(--mod-tabs-color-key-focus, var(--spectrum-tabs-color-key-focus))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:focus-visible`.
Defaults to `var(--mod-tabs-color-key-focus, var(--spectrum-tabs-color-key-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tabs-focus-indicator-color": {
+ "value": "var(--mod-tabs-focus-indicator-color, var(--spectrum-tabs-focus-indicator-color))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:focus-visible:before`.
Defaults to `var(--mod-tabs-focus-indicator-color, var(--spectrum-tabs-focus-indicator-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tabs-selection-indicator-color": {
+ "value": "var(--mod-tabs-selection-indicator-color, var(--spectrum-tabs-selection-indicator-color))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-selectionIndicator`.
Defaults to `var(--mod-tabs-selection-indicator-color, var(--spectrum-tabs-selection-indicator-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tabs-focus-indicator-background-color": {
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs .is-selected:before`.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/tabs/stories/tabs.stories.js b/components/tabs/stories/tabs.stories.js
index 1b26856e13f..c57a8f23a3e 100644
--- a/components/tabs/stories/tabs.stories.js
+++ b/components/tabs/stories/tabs.stories.js
@@ -1,11 +1,13 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isEmphasized, isQuiet, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { TabsGroups } from "./tabs.test.js";
import { CompactGroup, OverflowGroup, QuietGroup, Template, VerticalGroup } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit. Tabs can be either horizontal or vertical.
*
@@ -18,7 +20,6 @@ import { CompactGroup, OverflowGroup, QuietGroup, Template, VerticalGroup } from
* Only one tab item can be selected at any given time. The selected tab item is designated by the `is-selected` class. A selection indicator line is shown under or next to the selected tab item.
*
*/
-
export default {
title: "Tabs",
component: "Tabs",
@@ -119,6 +120,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json
index 10a87e4aa2c..a7f31152861 100644
--- a/components/tag/dist/metadata.json
+++ b/components/tag/dist/metadata.json
@@ -10,366 +10,1758 @@
".spectrum-Tag--sizeL",
".spectrum-Tag--sizeM",
".spectrum-Tag--sizeS",
+ ".spectrum-Tag:active",
+ ".spectrum-Tag:focus-visible",
+ ".spectrum-Tag:focus-visible:after",
+ ".spectrum-Tag:hover",
".spectrum-Tag.is-disabled",
".spectrum-Tag.is-disabled .spectrum-Avatar",
".spectrum-Tag.is-emphasized",
- ".spectrum-Tag.is-emphasized.is-focused",
".spectrum-Tag.is-emphasized:active",
".spectrum-Tag.is-emphasized:focus-visible",
".spectrum-Tag.is-emphasized:hover",
+ ".spectrum-Tag.is-emphasized.is-focused",
".spectrum-Tag.is-focused",
".spectrum-Tag.is-focused:after",
".spectrum-Tag.is-invalid",
+ ".spectrum-Tag.is-invalid:active",
+ ".spectrum-Tag.is-invalid:focus-visible",
+ ".spectrum-Tag.is-invalid:hover",
".spectrum-Tag.is-invalid.is-focused",
".spectrum-Tag.is-invalid.is-selected",
- ".spectrum-Tag.is-invalid.is-selected.is-focused",
".spectrum-Tag.is-invalid.is-selected:active",
".spectrum-Tag.is-invalid.is-selected:focus-visible",
".spectrum-Tag.is-invalid.is-selected:hover",
- ".spectrum-Tag.is-invalid:active",
- ".spectrum-Tag.is-invalid:focus-visible",
- ".spectrum-Tag.is-invalid:hover",
+ ".spectrum-Tag.is-invalid.is-selected.is-focused",
".spectrum-Tag.is-selected",
- ".spectrum-Tag.is-selected.is-focused",
".spectrum-Tag.is-selected:active",
".spectrum-Tag.is-selected:focus-visible",
".spectrum-Tag.is-selected:hover",
- ".spectrum-Tag:active",
- ".spectrum-Tag:focus-visible",
- ".spectrum-Tag:focus-visible:after",
- ".spectrum-Tag:hover"
- ],
- "modifiers": [
- "--mod-tag-animation-duration",
- "--mod-tag-avatar-spacing-block-end",
- "--mod-tag-avatar-spacing-block-start",
- "--mod-tag-avatar-spacing-inline-end",
- "--mod-tag-background-color",
- "--mod-tag-background-color-active",
- "--mod-tag-background-color-disabled",
- "--mod-tag-background-color-emphasized",
- "--mod-tag-background-color-emphasized-active",
- "--mod-tag-background-color-emphasized-focus",
- "--mod-tag-background-color-emphasized-hover",
- "--mod-tag-background-color-focus",
- "--mod-tag-background-color-hover",
- "--mod-tag-background-color-invalid-selected",
- "--mod-tag-background-color-invalid-selected-active",
- "--mod-tag-background-color-invalid-selected-focus",
- "--mod-tag-background-color-invalid-selected-hover",
- "--mod-tag-background-color-selected",
- "--mod-tag-background-color-selected-active",
- "--mod-tag-background-color-selected-focus",
- "--mod-tag-background-color-selected-hover",
- "--mod-tag-border-color",
- "--mod-tag-border-color-active",
- "--mod-tag-border-color-disabled",
- "--mod-tag-border-color-emphasized",
- "--mod-tag-border-color-emphasized-active",
- "--mod-tag-border-color-emphasized-focus",
- "--mod-tag-border-color-emphasized-hover",
- "--mod-tag-border-color-focus",
- "--mod-tag-border-color-hover",
- "--mod-tag-border-color-invalid",
- "--mod-tag-border-color-invalid-active",
- "--mod-tag-border-color-invalid-focus",
- "--mod-tag-border-color-invalid-hover",
- "--mod-tag-border-color-invalid-selected",
- "--mod-tag-border-color-invalid-selected-active",
- "--mod-tag-border-color-invalid-selected-focus",
- "--mod-tag-border-color-invalid-selected-hover",
- "--mod-tag-border-color-selected",
- "--mod-tag-border-color-selected-active",
- "--mod-tag-border-color-selected-focus",
- "--mod-tag-border-color-selected-hover",
- "--mod-tag-border-width",
- "--mod-tag-clear-button-spacing-block",
- "--mod-tag-clear-button-spacing-inline-end",
- "--mod-tag-clear-button-spacing-inline-start",
- "--mod-tag-content-color",
- "--mod-tag-content-color-active",
- "--mod-tag-content-color-disabled",
- "--mod-tag-content-color-emphasized",
- "--mod-tag-content-color-focus",
- "--mod-tag-content-color-hover",
- "--mod-tag-content-color-invalid",
- "--mod-tag-content-color-invalid-active",
- "--mod-tag-content-color-invalid-focus",
- "--mod-tag-content-color-invalid-hover",
- "--mod-tag-content-color-invalid-selected",
- "--mod-tag-content-color-selected",
- "--mod-tag-corner-radius",
- "--mod-tag-focus-ring-color",
- "--mod-tag-focus-ring-gap",
- "--mod-tag-focus-ring-thickness",
- "--mod-tag-font-size",
- "--mod-tag-height",
- "--mod-tag-icon-size",
- "--mod-tag-icon-spacing-block-end",
- "--mod-tag-icon-spacing-block-start",
- "--mod-tag-icon-spacing-inline-end",
- "--mod-tag-label-font-weight",
- "--mod-tag-label-line-height",
- "--mod-tag-label-spacing-block",
- "--mod-tag-label-spacing-inline-end",
- "--mod-tag-spacing-inline-start"
- ],
- "component": [
- "--spectrum-tag-animation-duration",
- "--spectrum-tag-avatar-spacing-block-end",
- "--spectrum-tag-avatar-spacing-block-start",
- "--spectrum-tag-avatar-spacing-inline-end",
- "--spectrum-tag-background-color",
- "--spectrum-tag-background-color-active",
- "--spectrum-tag-background-color-disabled",
- "--spectrum-tag-background-color-emphasized",
- "--spectrum-tag-background-color-emphasized-active",
- "--spectrum-tag-background-color-emphasized-focus",
- "--spectrum-tag-background-color-emphasized-hover",
- "--spectrum-tag-background-color-focus",
- "--spectrum-tag-background-color-hover",
- "--spectrum-tag-background-color-invalid-selected",
- "--spectrum-tag-background-color-invalid-selected-active",
- "--spectrum-tag-background-color-invalid-selected-focus",
- "--spectrum-tag-background-color-invalid-selected-hover",
- "--spectrum-tag-background-color-selected",
- "--spectrum-tag-background-color-selected-active",
- "--spectrum-tag-background-color-selected-focus",
- "--spectrum-tag-background-color-selected-hover",
- "--spectrum-tag-border-color",
- "--spectrum-tag-border-color-active",
- "--spectrum-tag-border-color-disabled",
- "--spectrum-tag-border-color-emphasized",
- "--spectrum-tag-border-color-emphasized-active",
- "--spectrum-tag-border-color-emphasized-focus",
- "--spectrum-tag-border-color-emphasized-hover",
- "--spectrum-tag-border-color-focus",
- "--spectrum-tag-border-color-hover",
- "--spectrum-tag-border-color-invalid",
- "--spectrum-tag-border-color-invalid-active",
- "--spectrum-tag-border-color-invalid-focus",
- "--spectrum-tag-border-color-invalid-hover",
- "--spectrum-tag-border-color-invalid-selected",
- "--spectrum-tag-border-color-invalid-selected-active",
- "--spectrum-tag-border-color-invalid-selected-focus",
- "--spectrum-tag-border-color-invalid-selected-hover",
- "--spectrum-tag-border-color-selected",
- "--spectrum-tag-border-color-selected-active",
- "--spectrum-tag-border-color-selected-focus",
- "--spectrum-tag-border-color-selected-hover",
- "--spectrum-tag-border-width",
- "--spectrum-tag-clear-button-spacing-block",
- "--spectrum-tag-clear-button-spacing-inline-end",
- "--spectrum-tag-clear-button-spacing-inline-start",
- "--spectrum-tag-content-color",
- "--spectrum-tag-content-color-active",
- "--spectrum-tag-content-color-disabled",
- "--spectrum-tag-content-color-emphasized",
- "--spectrum-tag-content-color-focus",
- "--spectrum-tag-content-color-hover",
- "--spectrum-tag-content-color-invalid",
- "--spectrum-tag-content-color-invalid-active",
- "--spectrum-tag-content-color-invalid-focus",
- "--spectrum-tag-content-color-invalid-hover",
- "--spectrum-tag-content-color-invalid-selected",
- "--spectrum-tag-content-color-selected",
- "--spectrum-tag-corner-radius",
- "--spectrum-tag-focus-ring-color",
- "--spectrum-tag-focus-ring-gap",
- "--spectrum-tag-focus-ring-thickness",
- "--spectrum-tag-font-size",
- "--spectrum-tag-height",
- "--spectrum-tag-icon-size",
- "--spectrum-tag-icon-spacing-block-end",
- "--spectrum-tag-icon-spacing-block-start",
- "--spectrum-tag-icon-spacing-inline-end",
- "--spectrum-tag-label-font-weight",
- "--spectrum-tag-label-line-height",
- "--spectrum-tag-label-spacing-block",
- "--spectrum-tag-label-spacing-inline-end",
- "--spectrum-tag-size-large-clear-button-spacing-inline-end",
- "--spectrum-tag-size-large-corner-radius",
- "--spectrum-tag-size-large-label-spacing-inline-end",
- "--spectrum-tag-size-large-spacing-inline-start",
- "--spectrum-tag-size-medium-clear-button-spacing-inline-end",
- "--spectrum-tag-size-medium-corner-radius",
- "--spectrum-tag-size-medium-label-spacing-inline-end",
- "--spectrum-tag-size-medium-spacing-inline-start",
- "--spectrum-tag-size-small-clear-button-spacing-inline-end",
- "--spectrum-tag-size-small-corner-radius",
- "--spectrum-tag-size-small-label-spacing-inline-end",
- "--spectrum-tag-size-small-spacing-inline-start",
- "--spectrum-tag-spacing-inline-start",
- "--spectrum-tag-top-to-avatar-large",
- "--spectrum-tag-top-to-avatar-medium",
- "--spectrum-tag-top-to-avatar-small",
- "--spectrum-tag-top-to-cross-icon-large",
- "--spectrum-tag-top-to-cross-icon-medium",
- "--spectrum-tag-top-to-cross-icon-small"
- ],
- "global": [
- "--spectrum-accent-background-color-default",
- "--spectrum-accent-background-color-down",
- "--spectrum-accent-background-color-hover",
- "--spectrum-accent-background-color-key-focus",
- "--spectrum-animation-duration-100",
- "--spectrum-avatar-opacity-disabled",
- "--spectrum-border-width-100",
- "--spectrum-clearbutton-fill-background-color",
- "--spectrum-clearbutton-fill-size",
- "--spectrum-component-edge-to-text-100",
- "--spectrum-component-edge-to-text-200",
- "--spectrum-component-edge-to-text-75",
- "--spectrum-component-edge-to-visual-100",
- "--spectrum-component-edge-to-visual-200",
- "--spectrum-component-edge-to-visual-75",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-75",
- "--spectrum-component-top-to-text-100",
- "--spectrum-component-top-to-text-200",
- "--spectrum-component-top-to-text-75",
- "--spectrum-component-top-to-workflow-icon-100",
- "--spectrum-component-top-to-workflow-icon-200",
- "--spectrum-component-top-to-workflow-icon-75",
- "--spectrum-corner-radius-100",
- "--spectrum-disabled-background-color",
- "--spectrum-disabled-content-color",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-75",
- "--spectrum-gray-100",
- "--spectrum-gray-25",
- "--spectrum-gray-50",
- "--spectrum-gray-700",
- "--spectrum-gray-800",
- "--spectrum-gray-900",
- "--spectrum-line-height-100",
- "--spectrum-negative-background-color-default",
- "--spectrum-negative-background-color-down",
- "--spectrum-negative-background-color-hover",
- "--spectrum-negative-background-color-key-focus",
- "--spectrum-negative-color-1000",
- "--spectrum-negative-color-1100",
- "--spectrum-negative-color-900",
- "--spectrum-negative-content-color-default",
- "--spectrum-negative-content-color-down",
- "--spectrum-negative-content-color-hover",
- "--spectrum-negative-content-color-key-focus",
- "--spectrum-neutral-background-color-selected-default",
- "--spectrum-neutral-background-color-selected-down",
- "--spectrum-neutral-background-color-selected-hover",
- "--spectrum-neutral-background-color-selected-key-focus",
- "--spectrum-neutral-subdued-background-color-default",
- "--spectrum-neutral-subdued-background-color-down",
- "--spectrum-neutral-subdued-background-color-hover",
- "--spectrum-neutral-subdued-background-color-key-focus",
- "--spectrum-neutral-subdued-content-color-default",
- "--spectrum-neutral-subdued-content-color-down",
- "--spectrum-neutral-subdued-content-color-hover",
- "--spectrum-neutral-subdued-content-color-key-focus",
- "--spectrum-regular-font-weight",
- "--spectrum-text-to-visual-100",
- "--spectrum-text-to-visual-200",
- "--spectrum-text-to-visual-75",
- "--spectrum-white",
- "--spectrum-workflow-icon-size-100",
- "--spectrum-workflow-icon-size-200",
- "--spectrum-workflow-icon-size-75"
- ],
- "system-theme": [
- "--system-tag-background-color",
- "--system-tag-background-color-active",
- "--system-tag-background-color-disabled",
- "--system-tag-background-color-focus",
- "--system-tag-background-color-hover",
- "--system-tag-border-color",
- "--system-tag-border-color-active",
- "--system-tag-border-color-disabled",
- "--system-tag-border-color-focus",
- "--system-tag-border-color-hover",
- "--system-tag-border-color-selected",
- "--system-tag-border-color-selected-active",
- "--system-tag-border-color-selected-focus",
- "--system-tag-border-color-selected-hover",
- "--system-tag-content-color",
- "--system-tag-content-color-active",
- "--system-tag-content-color-focus",
- "--system-tag-content-color-hover",
- "--system-tag-content-color-selected",
- "--system-tag-size-large-clear-button-spacing-inline-end",
- "--system-tag-size-large-corner-radius",
- "--system-tag-size-large-label-spacing-inline-end",
- "--system-tag-size-large-spacing-inline-start",
- "--system-tag-size-medium-clear-button-spacing-inline-end",
- "--system-tag-size-medium-corner-radius",
- "--system-tag-size-medium-label-spacing-inline-end",
- "--system-tag-size-medium-spacing-inline-start",
- "--system-tag-size-small-clear-button-spacing-inline-end",
- "--system-tag-size-small-corner-radius",
- "--system-tag-size-small-label-spacing-inline-end",
- "--system-tag-size-small-spacing-inline-start"
- ],
- "passthroughs": [
- "--mod-avatar-opacity-disabled",
- "--mod-clear-button-width",
- "--mod-clearbutton-fill-background-color",
- "--mod-clearbutton-fill-size"
+ ".spectrum-Tag.is-selected.is-focused"
],
- "high-contrast": [
- "--highcontrast-tag-background-color",
- "--highcontrast-tag-background-color-active",
- "--highcontrast-tag-background-color-disabled",
- "--highcontrast-tag-background-color-emphasized",
- "--highcontrast-tag-background-color-emphasized-active",
- "--highcontrast-tag-background-color-emphasized-focus",
- "--highcontrast-tag-background-color-emphasized-hover",
- "--highcontrast-tag-background-color-focus",
- "--highcontrast-tag-background-color-hover",
- "--highcontrast-tag-background-color-invalid-selected",
- "--highcontrast-tag-background-color-invalid-selected-active",
- "--highcontrast-tag-background-color-invalid-selected-focus",
- "--highcontrast-tag-background-color-invalid-selected-hover",
- "--highcontrast-tag-background-color-selected",
- "--highcontrast-tag-background-color-selected-active",
- "--highcontrast-tag-background-color-selected-focus",
- "--highcontrast-tag-background-color-selected-hover",
- "--highcontrast-tag-border-color",
- "--highcontrast-tag-border-color-active",
- "--highcontrast-tag-border-color-disabled",
- "--highcontrast-tag-border-color-emphasized",
- "--highcontrast-tag-border-color-emphasized-active",
- "--highcontrast-tag-border-color-emphasized-focus",
- "--highcontrast-tag-border-color-emphasized-hover",
- "--highcontrast-tag-border-color-focus",
- "--highcontrast-tag-border-color-hover",
- "--highcontrast-tag-border-color-invalid",
- "--highcontrast-tag-border-color-invalid-active",
- "--highcontrast-tag-border-color-invalid-focus",
- "--highcontrast-tag-border-color-invalid-hover",
- "--highcontrast-tag-border-color-invalid-selected",
- "--highcontrast-tag-border-color-invalid-selected-active",
- "--highcontrast-tag-border-color-invalid-selected-focus",
- "--highcontrast-tag-border-color-invalid-selected-hover",
- "--highcontrast-tag-border-color-selected",
- "--highcontrast-tag-border-color-selected-active",
- "--highcontrast-tag-border-color-selected-focus",
- "--highcontrast-tag-border-color-selected-hover",
- "--highcontrast-tag-content-color",
- "--highcontrast-tag-content-color-active",
- "--highcontrast-tag-content-color-disabled",
- "--highcontrast-tag-content-color-emphasized",
- "--highcontrast-tag-content-color-focus",
- "--highcontrast-tag-content-color-hover",
- "--highcontrast-tag-content-color-invalid",
- "--highcontrast-tag-content-color-invalid-active",
- "--highcontrast-tag-content-color-invalid-focus",
- "--highcontrast-tag-content-color-invalid-hover",
- "--highcontrast-tag-content-color-invalid-selected",
- "--highcontrast-tag-content-color-selected",
- "--highcontrast-tag-focus-ring-color"
- ]
+ "modifiers": {
+ "mod-tag-border-color": {
+ "value": "var(--spectrum-tag-border-color)",
+ "description": "Used by `.spectrum-Tag`.
Defaults to `var(--spectrum-tag-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color": {
+ "value": "var(--spectrum-tag-background-color)",
+ "description": "Used by `.spectrum-Tag`.
Defaults to `var(--spectrum-tag-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-content-color": {
+ "value": "var(--spectrum-tag-content-color)",
+ "description": "Used by `.spectrum-Tag`.
Defaults to `var(--spectrum-tag-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-corner-radius": {
+ "value": "var(--spectrum-tag-corner-radius)",
+ "description": "Used by `.spectrum-Tag`, `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.
Defaults to `var(--spectrum-tag-corner-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-border-width": {
+ "value": "var(--spectrum-tag-border-width)",
+ "description": "Used by `.spectrum-Tag`, `.spectrum-Tag .spectrum-Tag-itemIcon`, `.spectrum-Tag .spectrum-Avatar`, `.spectrum-Tag .spectrum-Tag-clearButton`, `.spectrum-Tag .spectrum-Tag-itemLabel`, `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.
Defaults to `var(--spectrum-tag-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-spacing-inline-start": {
+ "value": "var(--spectrum-tag-spacing-inline-start)",
+ "description": "Used by `.spectrum-Tag`.
Defaults to `var(--spectrum-tag-spacing-inline-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-height": {
+ "value": "var(--spectrum-tag-height)",
+ "description": "Used by `.spectrum-Tag`.
Defaults to `var(--spectrum-tag-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-animation-duration": {
+ "value": "var(--spectrum-tag-animation-duration)",
+ "description": "Used by `.spectrum-Tag`.
Defaults to `var(--spectrum-tag-animation-duration)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-icon-size": {
+ "value": "var(--spectrum-tag-icon-size)",
+ "description": "Used by `.spectrum-Tag .spectrum-Tag-itemIcon`.
Defaults to `var(--spectrum-tag-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-icon-spacing-block-start": {
+ "value": "var(--spectrum-tag-icon-spacing-block-start)",
+ "description": "Used by `.spectrum-Tag .spectrum-Tag-itemIcon`.
Defaults to `var(--spectrum-tag-icon-spacing-block-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-icon-spacing-block-end": {
+ "value": "var(--spectrum-tag-icon-spacing-block-end)",
+ "description": "Used by `.spectrum-Tag .spectrum-Tag-itemIcon`.
Defaults to `var(--spectrum-tag-icon-spacing-block-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-icon-spacing-inline-end": {
+ "value": "var(--spectrum-tag-icon-spacing-inline-end)",
+ "description": "Used by `.spectrum-Tag .spectrum-Tag-itemIcon`.
Defaults to `var(--spectrum-tag-icon-spacing-inline-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-avatar-spacing-block-start": {
+ "value": "var(--spectrum-tag-avatar-spacing-block-start)",
+ "description": "Used by `.spectrum-Tag .spectrum-Avatar`.
Defaults to `var(--spectrum-tag-avatar-spacing-block-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-avatar-spacing-block-end": {
+ "value": "var(--spectrum-tag-avatar-spacing-block-end)",
+ "description": "Used by `.spectrum-Tag .spectrum-Avatar`.
Defaults to `var(--spectrum-tag-avatar-spacing-block-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-avatar-spacing-inline-end": {
+ "value": "var(--spectrum-tag-avatar-spacing-inline-end)",
+ "description": "Used by `.spectrum-Tag .spectrum-Avatar`.
Defaults to `var(--spectrum-tag-avatar-spacing-inline-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-clear-button-spacing-block": {
+ "value": "var(--spectrum-tag-clear-button-spacing-block)",
+ "description": "Used by `.spectrum-Tag .spectrum-Tag-clearButton`.
Defaults to `var(--spectrum-tag-clear-button-spacing-block)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-clear-button-spacing-inline-start": {
+ "value": "var(--spectrum-tag-clear-button-spacing-inline-start)",
+ "description": "Used by `.spectrum-Tag .spectrum-Tag-clearButton`.
Defaults to `var(--spectrum-tag-clear-button-spacing-inline-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-label-spacing-inline-end": {
+ "value": "var(--spectrum-tag-label-spacing-inline-end)",
+ "description": "Used by `.spectrum-Tag .spectrum-Tag-clearButton`, `.spectrum-Tag .spectrum-Tag-itemLabel`.
Defaults to `var(--spectrum-tag-label-spacing-inline-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-clear-button-spacing-inline-end": {
+ "value": "var(--spectrum-tag-clear-button-spacing-inline-end)",
+ "description": "Used by `.spectrum-Tag .spectrum-Tag-clearButton`.
Defaults to `var(--spectrum-tag-clear-button-spacing-inline-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-label-line-height": {
+ "value": "var(--spectrum-tag-label-line-height)",
+ "description": "Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.
Defaults to `var(--spectrum-tag-label-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-label-font-weight": {
+ "value": "var(--spectrum-tag-label-font-weight)",
+ "description": "Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.
Defaults to `var(--spectrum-tag-label-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-font-size": {
+ "value": "var(--spectrum-tag-font-size)",
+ "description": "Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.
Defaults to `var(--spectrum-tag-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-label-spacing-block": {
+ "value": "var(--spectrum-tag-label-spacing-block)",
+ "description": "Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.
Defaults to `var(--spectrum-tag-label-spacing-block)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-active": {
+ "value": "var(--spectrum-tag-border-color-active)",
+ "description": "Used by `.spectrum-Tag:active`.
Defaults to `var(--spectrum-tag-border-color-active)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-active": {
+ "value": "var(--spectrum-tag-background-color-active)",
+ "description": "Used by `.spectrum-Tag:active`.
Defaults to `var(--spectrum-tag-background-color-active)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-content-color-active": {
+ "value": "var(--spectrum-tag-content-color-active)",
+ "description": "Used by `.spectrum-Tag:active`.
Defaults to `var(--spectrum-tag-content-color-active)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-focus": {
+ "value": "var(--spectrum-tag-border-color-focus)",
+ "description": "Used by `.spectrum-Tag.is-focused, .spectrum-Tag:focus-visible`.
Defaults to `var(--spectrum-tag-border-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-focus": {
+ "value": "var(--spectrum-tag-background-color-focus)",
+ "description": "Used by `.spectrum-Tag.is-focused, .spectrum-Tag:focus-visible`.
Defaults to `var(--spectrum-tag-background-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-content-color-focus": {
+ "value": "var(--spectrum-tag-content-color-focus)",
+ "description": "Used by `.spectrum-Tag.is-focused, .spectrum-Tag:focus-visible`.
Defaults to `var(--spectrum-tag-content-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-focus-ring-gap": {
+ "value": "var(--spectrum-tag-focus-ring-gap)",
+ "description": "Used by `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.
Defaults to `var(--spectrum-tag-focus-ring-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-focus-ring-thickness": {
+ "value": "var(--spectrum-tag-focus-ring-thickness)",
+ "description": "Used by `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.
Defaults to `var(--spectrum-tag-focus-ring-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-focus-ring-color": {
+ "value": "var(--spectrum-tag-focus-ring-color)",
+ "description": "Used by `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.
Defaults to `var(--spectrum-tag-focus-ring-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-selected": {
+ "value": "var(--spectrum-tag-border-color-selected)",
+ "description": "Used by `.spectrum-Tag.is-selected`.
Defaults to `var(--spectrum-tag-border-color-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-selected": {
+ "value": "var(--spectrum-tag-background-color-selected)",
+ "description": "Used by `.spectrum-Tag.is-selected`.
Defaults to `var(--spectrum-tag-background-color-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-content-color-selected": {
+ "value": "var(--spectrum-tag-content-color-selected)",
+ "description": "Used by `.spectrum-Tag.is-selected`, `.spectrum-Tag.is-selected:hover`.
Defaults to `var(--spectrum-tag-content-color-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-selected-active": {
+ "value": "var(--spectrum-tag-border-color-selected-active)",
+ "description": "Used by `.spectrum-Tag.is-selected:active`.
Defaults to `var(--spectrum-tag-border-color-selected-active)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-selected-active": {
+ "value": "var(--spectrum-tag-background-color-selected-active)",
+ "description": "Used by `.spectrum-Tag.is-selected:active`.
Defaults to `var(--spectrum-tag-background-color-selected-active)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-selected-focus": {
+ "value": "var(--spectrum-tag-border-color-selected-focus)",
+ "description": "Used by `.spectrum-Tag.is-selected.is-focused, .spectrum-Tag.is-selected:focus-visible`.
Defaults to `var(--spectrum-tag-border-color-selected-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-selected-focus": {
+ "value": "var(--spectrum-tag-background-color-selected-focus)",
+ "description": "Used by `.spectrum-Tag.is-selected.is-focused, .spectrum-Tag.is-selected:focus-visible`.
Defaults to `var(--spectrum-tag-background-color-selected-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-invalid": {
+ "value": "var(--spectrum-tag-border-color-invalid)",
+ "description": "Used by `.spectrum-Tag.is-invalid`.
Defaults to `var(--spectrum-tag-border-color-invalid)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-content-color-invalid": {
+ "value": "var(--spectrum-tag-content-color-invalid)",
+ "description": "Used by `.spectrum-Tag.is-invalid`.
Defaults to `var(--spectrum-tag-content-color-invalid)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-invalid-active": {
+ "value": "var(--spectrum-tag-border-color-invalid-active)",
+ "description": "Used by `.spectrum-Tag.is-invalid:active`.
Defaults to `var(--spectrum-tag-border-color-invalid-active)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-content-color-invalid-active": {
+ "value": "var(--spectrum-tag-content-color-invalid-active)",
+ "description": "Used by `.spectrum-Tag.is-invalid:active`.
Defaults to `var(--spectrum-tag-content-color-invalid-active)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-invalid-focus": {
+ "value": "var(--spectrum-tag-border-color-invalid-focus)",
+ "description": "Used by `.spectrum-Tag.is-invalid.is-focused, .spectrum-Tag.is-invalid:focus-visible`.
Defaults to `var(--spectrum-tag-border-color-invalid-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-content-color-invalid-focus": {
+ "value": "var(--spectrum-tag-content-color-invalid-focus)",
+ "description": "Used by `.spectrum-Tag.is-invalid.is-focused, .spectrum-Tag.is-invalid:focus-visible`.
Defaults to `var(--spectrum-tag-content-color-invalid-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-invalid-selected": {
+ "value": "var(--spectrum-tag-border-color-invalid-selected)",
+ "description": "Used by `.spectrum-Tag.is-invalid.is-selected`.
Defaults to `var(--spectrum-tag-border-color-invalid-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-invalid-selected": {
+ "value": "var(--spectrum-tag-background-color-invalid-selected)",
+ "description": "Used by `.spectrum-Tag.is-invalid.is-selected`.
Defaults to `var(--spectrum-tag-background-color-invalid-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-content-color-invalid-selected": {
+ "value": "var(--spectrum-tag-content-color-invalid-selected)",
+ "description": "Used by `.spectrum-Tag.is-invalid.is-selected`, `.spectrum-Tag.is-invalid.is-selected:hover`.
Defaults to `var(--spectrum-tag-content-color-invalid-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-invalid-selected-active": {
+ "value": "var(--spectrum-tag-border-color-invalid-selected-active)",
+ "description": "Used by `.spectrum-Tag.is-invalid.is-selected:active`.
Defaults to `var(--spectrum-tag-border-color-invalid-selected-active)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-invalid-selected-active": {
+ "value": "var(--spectrum-tag-background-color-invalid-selected-active)",
+ "description": "Used by `.spectrum-Tag.is-invalid.is-selected:active`.
Defaults to `var(--spectrum-tag-background-color-invalid-selected-active)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-invalid-selected-focus": {
+ "value": "var(--spectrum-tag-border-color-invalid-selected-focus)",
+ "description": "Used by `.spectrum-Tag.is-invalid.is-selected.is-focused, .spectrum-Tag.is-invalid.is-selected:focus-visible`.
Defaults to `var(--spectrum-tag-border-color-invalid-selected-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-invalid-selected-focus": {
+ "value": "var(--spectrum-tag-background-color-invalid-selected-focus)",
+ "description": "Used by `.spectrum-Tag.is-invalid.is-selected.is-focused, .spectrum-Tag.is-invalid.is-selected:focus-visible`.
Defaults to `var(--spectrum-tag-background-color-invalid-selected-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-emphasized": {
+ "value": "var(--spectrum-tag-border-color-emphasized)",
+ "description": "Used by `.spectrum-Tag.is-emphasized`.
Defaults to `var(--spectrum-tag-border-color-emphasized)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-emphasized": {
+ "value": "var(--spectrum-tag-background-color-emphasized)",
+ "description": "Used by `.spectrum-Tag.is-emphasized`.
Defaults to `var(--spectrum-tag-background-color-emphasized)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-content-color-emphasized": {
+ "value": "var(--spectrum-tag-content-color-emphasized)",
+ "description": "Used by `.spectrum-Tag.is-emphasized`, `.spectrum-Tag.is-emphasized:hover`.
Defaults to `var(--spectrum-tag-content-color-emphasized)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-hover": {
+ "value": "var(--spectrum-tag-border-color-hover)",
+ "description": "Used by `.spectrum-Tag:hover`.
Defaults to `var(--spectrum-tag-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-hover": {
+ "value": "var(--spectrum-tag-background-color-hover)",
+ "description": "Used by `.spectrum-Tag:hover`.
Defaults to `var(--spectrum-tag-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-content-color-hover": {
+ "value": "var(--spectrum-tag-content-color-hover)",
+ "description": "Used by `.spectrum-Tag:hover`.
Defaults to `var(--spectrum-tag-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-selected-hover": {
+ "value": "var(--spectrum-tag-border-color-selected-hover)",
+ "description": "Used by `.spectrum-Tag.is-selected:hover`.
Defaults to `var(--spectrum-tag-border-color-selected-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-selected-hover": {
+ "value": "var(--spectrum-tag-background-color-selected-hover)",
+ "description": "Used by `.spectrum-Tag.is-selected:hover`.
Defaults to `var(--spectrum-tag-background-color-selected-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-invalid-hover": {
+ "value": "var(--spectrum-tag-border-color-invalid-hover)",
+ "description": "Used by `.spectrum-Tag.is-invalid:hover`.
Defaults to `var(--spectrum-tag-border-color-invalid-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-content-color-invalid-hover": {
+ "value": "var(--spectrum-tag-content-color-invalid-hover)",
+ "description": "Used by `.spectrum-Tag.is-invalid:hover`.
Defaults to `var(--spectrum-tag-content-color-invalid-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-invalid-selected-hover": {
+ "value": "var(--spectrum-tag-border-color-invalid-selected-hover)",
+ "description": "Used by `.spectrum-Tag.is-invalid.is-selected:hover`.
Defaults to `var(--spectrum-tag-border-color-invalid-selected-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-invalid-selected-hover": {
+ "value": "var(--spectrum-tag-background-color-invalid-selected-hover)",
+ "description": "Used by `.spectrum-Tag.is-invalid.is-selected:hover`.
Defaults to `var(--spectrum-tag-background-color-invalid-selected-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-emphasized-hover": {
+ "value": "var(--spectrum-tag-border-color-emphasized-hover)",
+ "description": "Used by `.spectrum-Tag.is-emphasized:hover`.
Defaults to `var(--spectrum-tag-border-color-emphasized-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-emphasized-hover": {
+ "value": "var(--spectrum-tag-background-color-emphasized-hover)",
+ "description": "Used by `.spectrum-Tag.is-emphasized:hover`.
Defaults to `var(--spectrum-tag-background-color-emphasized-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-emphasized-active": {
+ "value": "var(--spectrum-tag-border-color-emphasized-active)",
+ "description": "Used by `.spectrum-Tag.is-emphasized:active`.
Defaults to `var(--spectrum-tag-border-color-emphasized-active)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-emphasized-active": {
+ "value": "var(--spectrum-tag-background-color-emphasized-active)",
+ "description": "Used by `.spectrum-Tag.is-emphasized:active`.
Defaults to `var(--spectrum-tag-background-color-emphasized-active)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-emphasized-focus": {
+ "value": "var(--spectrum-tag-border-color-emphasized-focus)",
+ "description": "Used by `.spectrum-Tag.is-emphasized.is-focused, .spectrum-Tag.is-emphasized:focus-visible`.
Defaults to `var(--spectrum-tag-border-color-emphasized-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-emphasized-focus": {
+ "value": "var(--spectrum-tag-background-color-emphasized-focus)",
+ "description": "Used by `.spectrum-Tag.is-emphasized.is-focused, .spectrum-Tag.is-emphasized:focus-visible`.
Defaults to `var(--spectrum-tag-background-color-emphasized-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-disabled": {
+ "value": "var(--spectrum-tag-border-color-disabled)",
+ "description": "Used by `.spectrum-Tag.is-disabled`.
Defaults to `var(--spectrum-tag-border-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-disabled": {
+ "value": "var(--spectrum-tag-background-color-disabled)",
+ "description": "Used by `.spectrum-Tag.is-disabled`.
Defaults to `var(--spectrum-tag-background-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-content-color-disabled": {
+ "value": "var(--spectrum-tag-content-color-disabled)",
+ "description": "Used by `.spectrum-Tag.is-disabled`.
Defaults to `var(--spectrum-tag-content-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-tag-animation-duration": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-border-width": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag`, `.spectrum-Tag .spectrum-Tag-itemIcon`, `.spectrum-Tag .spectrum-Avatar`, `.spectrum-Tag .spectrum-Tag-clearButton`, `.spectrum-Tag .spectrum-Tag-itemLabel`, `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-focus-ring-thickness": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-focus-ring-gap": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-focus-ring-color": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-label-line-height": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-label-font-weight": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-background-color-selected": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-selected`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-background-color-selected-hover": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-selected:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-background-color-selected-active": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-selected:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-background-color-selected-focus": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-selected.is-focused, .spectrum-Tag.is-selected:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-invalid": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-invalid-hover": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-invalid-active": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-invalid-focus": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-focused, .spectrum-Tag.is-invalid:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-content-color-invalid": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-content-color-invalid-hover": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-content-color-invalid-active": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-content-color-invalid-focus": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-focused, .spectrum-Tag.is-invalid:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-invalid-selected": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-selected`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-invalid-selected-hover": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-selected:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-invalid-selected-focus": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-selected.is-focused, .spectrum-Tag.is-invalid.is-selected:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-invalid-selected-active": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-selected:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-background-color-invalid-selected": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-selected`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-background-color-invalid-selected-hover": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-selected:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-background-color-invalid-selected-active": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-selected:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-background-color-invalid-selected-focus": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-selected.is-focused, .spectrum-Tag.is-invalid.is-selected:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-content-color-invalid-selected": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-selected`, `.spectrum-Tag.is-invalid.is-selected:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-emphasized": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-emphasized`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-emphasized-hover": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-emphasized:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-emphasized-active": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-emphasized:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-emphasized-focus": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-emphasized.is-focused, .spectrum-Tag.is-emphasized:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-background-color-emphasized": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-emphasized`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-background-color-emphasized-hover": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-emphasized:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-background-color-emphasized-active": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-emphasized:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-background-color-emphasized-focus": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-emphasized.is-focused, .spectrum-Tag.is-emphasized:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-content-color-emphasized": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-emphasized`, `.spectrum-Tag.is-emphasized:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-content-color-disabled": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-disabled`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-height": {
+ "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-font-size": {
+ "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-icon-size": {
+ "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-itemIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-clear-button-spacing-inline-start": {
+ "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-clearButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-clear-button-spacing-block": {
+ "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-clearButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-top-to-cross-icon-medium": {
+ "value": "12px",
+ "description": "Used by `--spectrum-tag-clear-button-spacing-block`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-icon-spacing-block-start": {
+ "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-itemIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-icon-spacing-block-end": {
+ "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-itemIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-icon-spacing-inline-end": {
+ "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-itemIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-avatar-spacing-block-start": {
+ "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Avatar`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-top-to-avatar-medium": {
+ "value": "6px",
+ "description": "Used by `--spectrum-tag-avatar-spacing-block-start`, `--spectrum-tag-avatar-spacing-block-end`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-avatar-spacing-block-end": {
+ "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Avatar`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-avatar-spacing-inline-end": {
+ "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Avatar`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-label-spacing-block": {
+ "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-corner-radius": {
+ "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag`, `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-size-medium-corner-radius": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-corner-radius`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-spacing-inline-start": {
+ "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-size-medium-spacing-inline-start": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-spacing-inline-start`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-label-spacing-inline-end": {
+ "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-clearButton`, `.spectrum-Tag .spectrum-Tag-itemLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-size-medium-label-spacing-inline-end": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-label-spacing-inline-end`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-clear-button-spacing-inline-end": {
+ "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-clearButton`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-size-medium-clear-button-spacing-inline-end": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-clear-button-spacing-inline-end`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-top-to-cross-icon-small": {
+ "value": "8px",
+ "description": "Used by `--spectrum-tag-clear-button-spacing-block`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-top-to-avatar-small": {
+ "value": "4px",
+ "description": "Used by `--spectrum-tag-avatar-spacing-block-start`, `--spectrum-tag-avatar-spacing-block-end`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-size-small-corner-radius": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-corner-radius`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-size-small-spacing-inline-start": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-spacing-inline-start`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-size-small-label-spacing-inline-end": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-label-spacing-inline-end`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-size-small-clear-button-spacing-inline-end": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-clear-button-spacing-inline-end`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-top-to-cross-icon-large": {
+ "value": "15px",
+ "description": "Used by `--spectrum-tag-clear-button-spacing-block`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-top-to-avatar-large": {
+ "value": "9px",
+ "description": "Used by `--spectrum-tag-avatar-spacing-block-start`, `--spectrum-tag-avatar-spacing-block-end`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-size-large-corner-radius": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-corner-radius`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-size-large-spacing-inline-start": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-spacing-inline-start`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-size-large-label-spacing-inline-end": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-label-spacing-inline-end`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-size-large-clear-button-spacing-inline-end": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-clear-button-spacing-inline-end`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-background-color": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-content-color": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-active": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-background-color-active": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-content-color-active": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-focus": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-focused, .spectrum-Tag:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-background-color-focus": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-focused, .spectrum-Tag:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-content-color-focus": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-focused, .spectrum-Tag:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-selected": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-selected`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-content-color-selected": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-selected`, `.spectrum-Tag.is-selected:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-selected-active": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-selected:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-selected-focus": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-selected.is-focused, .spectrum-Tag.is-selected:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-hover": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-background-color-hover": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-content-color-hover": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-selected-hover": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-selected:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-disabled": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-disabled`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-background-color-disabled": {
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-disabled`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-50": {
+ "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))",
+ "description": "Used by `--system-tag-background-color`, `--system-tag-background-color-hover`, `--system-tag-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--system-tag-background-color-active`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--system-tag-size-small-corner-radius`, `--system-tag-size-medium-corner-radius`, `--system-tag-size-large-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-700": {
+ "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+ "description": "Used by `--system-tag-border-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-800": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Used by `--system-tag-border-color-hover`, `--system-tag-border-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-900": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Used by `--system-tag-border-color-active`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Used by `--system-tag-content-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-hover": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--system-tag-content-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-down": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--system-tag-content-color-active`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-key-focus": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--system-tag-content-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--system-tag-content-color-selected`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-background-color-default": {
+ "value": "var(--spectrum-gray-500)",
+ "description": "Used by `--system-tag-border-color-selected`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-background-color-hover": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--system-tag-border-color-selected-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-background-color-down": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--system-tag-border-color-selected-active`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-background-color-key-focus": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--system-tag-border-color-selected-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-background-color": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--system-tag-background-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-75": {
+ "value": "8px",
+ "description": "Used by `--system-tag-size-small-spacing-inline-start`, `--system-tag-size-small-clear-button-spacing-inline-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-75": {
+ "value": "10px",
+ "description": "Used by `--system-tag-size-small-label-spacing-inline-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-100": {
+ "value": "10px",
+ "description": "Used by `--system-tag-size-medium-spacing-inline-start`, `--system-tag-size-medium-clear-button-spacing-inline-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-100": {
+ "value": "12px",
+ "description": "Used by `--system-tag-size-medium-label-spacing-inline-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-200": {
+ "value": "13px",
+ "description": "Used by `--system-tag-size-large-spacing-inline-start`, `--system-tag-size-large-clear-button-spacing-inline-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-200": {
+ "value": "15px",
+ "description": "Used by `--system-tag-size-large-label-spacing-inline-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-avatar-opacity-disabled": {
+ "value": "0.3",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-disabled .spectrum-Avatar`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `--spectrum-tag-animation-duration`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--spectrum-tag-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-tag-focus-ring-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-tag-focus-ring-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-tag-focus-ring-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-tag-label-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-tag-label-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-tag-background-color-selected`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-tag-background-color-selected-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-tag-background-color-selected-active`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-tag-background-color-selected-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-color-900": {
+ "value": "var(--spectrum-red-900)",
+ "description": "Used by `--spectrum-tag-border-color-invalid`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-color-1000": {
+ "value": "var(--spectrum-red-1000)",
+ "description": "Used by `--spectrum-tag-border-color-invalid-hover`, `--spectrum-tag-border-color-invalid-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-color-1100": {
+ "value": "var(--spectrum-red-1100)",
+ "description": "Used by `--spectrum-tag-border-color-invalid-active`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-content-color-default": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Used by `--spectrum-tag-content-color-invalid`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-content-color-hover": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--spectrum-tag-content-color-invalid-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-content-color-down": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--spectrum-tag-content-color-invalid-active`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-content-color-key-focus": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--spectrum-tag-content-color-invalid-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-background-color-default": {
+ "value": "var(--spectrum-negative-color-800)",
+ "description": "Used by `--spectrum-tag-border-color-invalid-selected`, `--spectrum-tag-background-color-invalid-selected`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-background-color-hover": {
+ "value": "var(--spectrum-negative-color-700)",
+ "description": "Used by `--spectrum-tag-border-color-invalid-selected-hover`, `--spectrum-tag-background-color-invalid-selected-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-background-color-down": {
+ "value": "var(--spectrum-negative-color-700)",
+ "description": "Used by `--spectrum-tag-border-color-invalid-selected-focus`, `--spectrum-tag-background-color-invalid-selected-active`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-background-color-key-focus": {
+ "value": "var(--spectrum-negative-color-700)",
+ "description": "Used by `--spectrum-tag-border-color-invalid-selected-active`, `--spectrum-tag-background-color-invalid-selected-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))",
+ "description": "Used by `--spectrum-tag-content-color-invalid-selected`, `--spectrum-tag-content-color-emphasized`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-default": {
+ "value": "var(--spectrum-accent-color-800)",
+ "description": "Used by `--spectrum-tag-border-color-emphasized`, `--spectrum-tag-background-color-emphasized`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-hover": {
+ "value": "var(--spectrum-accent-color-700)",
+ "description": "Used by `--spectrum-tag-border-color-emphasized-hover`, `--spectrum-tag-background-color-emphasized-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-down": {
+ "value": "var(--spectrum-accent-color-700)",
+ "description": "Used by `--spectrum-tag-border-color-emphasized-active`, `--spectrum-tag-background-color-emphasized-active`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-key-focus": {
+ "value": "var(--spectrum-accent-color-700)",
+ "description": "Used by `--spectrum-tag-border-color-emphasized-focus`, `--spectrum-tag-background-color-emphasized-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-tag-content-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-tag-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-tag-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-tag-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-tag-clear-button-spacing-inline-start`, `--spectrum-tag-icon-spacing-inline-end`, `--spectrum-tag-avatar-spacing-inline-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-tag-icon-spacing-block-start`, `--spectrum-tag-icon-spacing-block-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-tag-label-spacing-block`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-tag-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-tag-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-75": {
+ "value": "16px",
+ "description": "Used by `--spectrum-tag-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-tag-clear-button-spacing-inline-start`, `--spectrum-tag-icon-spacing-inline-end`, `--spectrum-tag-avatar-spacing-inline-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-tag-icon-spacing-block-start`, `--spectrum-tag-icon-spacing-block-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-tag-label-spacing-block`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-tag-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-tag-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-200": {
+ "value": "22px",
+ "description": "Used by `--spectrum-tag-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-200": {
+ "value": "7px",
+ "description": "Used by `--spectrum-tag-clear-button-spacing-inline-start`, `--spectrum-tag-icon-spacing-inline-end`, `--spectrum-tag-avatar-spacing-inline-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-tag-icon-spacing-block-start`, `--spectrum-tag-icon-spacing-block-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-tag-label-spacing-block`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-clearbutton-fill-size": {
+ "description": "Defined in `.spectrum-Tag .spectrum-Tag-clearButton`.
Used by `.spectrum-Tag .spectrum-Tag-clearButton .spectrum-ClearButton-fill`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-clearbutton-fill-background-color": {
+ "description": "Defined in `.spectrum-Tag .spectrum-Tag-clearButton`.
Used by `.spectrum-Tag .spectrum-Tag-clearButton .spectrum-ClearButton-fill`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-tag-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-background-color`.",
+ "control": "color"
+ },
+ "system-tag-background-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-background-color-hover`.",
+ "control": "color"
+ },
+ "system-tag-background-color-active": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-background-color-active`.",
+ "control": "color"
+ },
+ "system-tag-background-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-background-color-focus`.",
+ "control": "color"
+ },
+ "system-tag-size-small-corner-radius": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-small-corner-radius`.",
+ "control": "text"
+ },
+ "system-tag-size-medium-corner-radius": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-medium-corner-radius`.",
+ "control": "text"
+ },
+ "system-tag-size-large-corner-radius": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-large-corner-radius`.",
+ "control": "text"
+ },
+ "system-tag-border-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-border-color`.",
+ "control": "color"
+ },
+ "system-tag-border-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-border-color-hover`.",
+ "control": "color"
+ },
+ "system-tag-border-color-active": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-border-color-active`.",
+ "control": "color"
+ },
+ "system-tag-border-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-border-color-focus`.",
+ "control": "color"
+ },
+ "system-tag-content-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-content-color`.",
+ "control": "color"
+ },
+ "system-tag-content-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-content-color-hover`.",
+ "control": "color"
+ },
+ "system-tag-content-color-active": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-content-color-active`.",
+ "control": "color"
+ },
+ "system-tag-content-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-content-color-focus`.",
+ "control": "color"
+ },
+ "system-tag-content-color-selected": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-content-color-selected`.",
+ "control": "color"
+ },
+ "system-tag-border-color-selected": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-border-color-selected`.",
+ "control": "color"
+ },
+ "system-tag-border-color-selected-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-border-color-selected-hover`.",
+ "control": "color"
+ },
+ "system-tag-border-color-selected-active": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-border-color-selected-active`.",
+ "control": "color"
+ },
+ "system-tag-border-color-selected-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-border-color-selected-focus`.",
+ "control": "color"
+ },
+ "system-tag-border-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-border-color-disabled`.",
+ "control": "color"
+ },
+ "system-tag-background-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-background-color-disabled`.",
+ "control": "color"
+ },
+ "system-tag-size-small-spacing-inline-start": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-small-spacing-inline-start`.",
+ "control": "text"
+ },
+ "system-tag-size-small-label-spacing-inline-end": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-small-label-spacing-inline-end`.",
+ "control": "text"
+ },
+ "system-tag-size-small-clear-button-spacing-inline-end": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-small-clear-button-spacing-inline-end`.",
+ "control": "text"
+ },
+ "system-tag-size-medium-spacing-inline-start": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-medium-spacing-inline-start`.",
+ "control": "text"
+ },
+ "system-tag-size-medium-label-spacing-inline-end": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-medium-label-spacing-inline-end`.",
+ "control": "text"
+ },
+ "system-tag-size-medium-clear-button-spacing-inline-end": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-medium-clear-button-spacing-inline-end`.",
+ "control": "text"
+ },
+ "system-tag-size-large-spacing-inline-start": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-large-spacing-inline-start`.",
+ "control": "text"
+ },
+ "system-tag-size-large-label-spacing-inline-end": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-large-label-spacing-inline-end`.",
+ "control": "text"
+ },
+ "system-tag-size-large-clear-button-spacing-inline-end": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-large-clear-button-spacing-inline-end`.",
+ "control": "text"
+ }
+ },
+ "passthroughs": {
+ "mod-clear-button-width": {
+ "category": "Passthrough"
+ },
+ "mod-clearbutton-fill-background-color": {
+ "category": "Passthrough"
+ },
+ "mod-clearbutton-fill-size": {
+ "category": "Passthrough"
+ },
+ "mod-avatar-opacity-disabled": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-tag-border-color": {
+ "value": "var(--mod-tag-border-color, var(--spectrum-tag-border-color))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag`.
Defaults to `var(--mod-tag-border-color, var(--spectrum-tag-border-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color": {
+ "value": "var(--mod-tag-background-color, var(--spectrum-tag-background-color))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag`.
Defaults to `var(--mod-tag-background-color, var(--spectrum-tag-background-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-content-color": {
+ "value": "var(--mod-tag-content-color, var(--spectrum-tag-content-color))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag`.
Defaults to `var(--mod-tag-content-color, var(--spectrum-tag-content-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-active": {
+ "value": "var(--mod-tag-border-color-active, var(--spectrum-tag-border-color-active))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:active`.
Defaults to `var(--mod-tag-border-color-active, var(--spectrum-tag-border-color-active))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-active": {
+ "value": "var(--mod-tag-background-color-active, var(--spectrum-tag-background-color-active))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:active`.
Defaults to `var(--mod-tag-background-color-active, var(--spectrum-tag-background-color-active))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-content-color-active": {
+ "value": "var(--mod-tag-content-color-active, var(--spectrum-tag-content-color-active))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:active`.
Defaults to `var(--mod-tag-content-color-active, var(--spectrum-tag-content-color-active))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-focus": {
+ "value": "var(--mod-tag-border-color-focus, var(--spectrum-tag-border-color-focus))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-focused, .spectrum-Tag:focus-visible`.
Defaults to `var(--mod-tag-border-color-focus, var(--spectrum-tag-border-color-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-focus": {
+ "value": "var(--mod-tag-background-color-focus, var(--spectrum-tag-background-color-focus))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-focused, .spectrum-Tag:focus-visible`.
Defaults to `var(--mod-tag-background-color-focus, var(--spectrum-tag-background-color-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-content-color-focus": {
+ "value": "var(--mod-tag-content-color-focus, var(--spectrum-tag-content-color-focus))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-focused, .spectrum-Tag:focus-visible`.
Defaults to `var(--mod-tag-content-color-focus, var(--spectrum-tag-content-color-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-focus-ring-color": {
+ "value": "var(--mod-tag-focus-ring-color, var(--spectrum-tag-focus-ring-color))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.
Defaults to `var(--mod-tag-focus-ring-color, var(--spectrum-tag-focus-ring-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-selected": {
+ "value": "var(--mod-tag-border-color-selected, var(--spectrum-tag-border-color-selected))",
+ "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `.spectrum-Tag.is-selected`.
Defaults to `var(--mod-tag-border-color-selected, var(--spectrum-tag-border-color-selected))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-selected": {
+ "value": "var(--mod-tag-background-color-selected, var(--spectrum-tag-background-color-selected))",
+ "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `.spectrum-Tag.is-selected`.
Defaults to `var(--mod-tag-background-color-selected, var(--spectrum-tag-background-color-selected))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-content-color-selected": {
+ "value": "var(--mod-tag-content-color-selected, var(--spectrum-tag-content-color-selected))",
+ "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `.spectrum-Tag.is-selected`, `.spectrum-Tag.is-selected:hover`.
Defaults to `var(--mod-tag-content-color-selected, var(--spectrum-tag-content-color-selected))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-selected-active": {
+ "value": "var(--mod-tag-border-color-selected-active, var(--spectrum-tag-border-color-selected-active))",
+ "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `.spectrum-Tag.is-selected:active`.
Defaults to `var(--mod-tag-border-color-selected-active, var(--spectrum-tag-border-color-selected-active))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-selected-active": {
+ "value": "var(--mod-tag-background-color-selected-active, var(--spectrum-tag-background-color-selected-active))",
+ "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `.spectrum-Tag.is-selected:active`.
Defaults to `var(--mod-tag-background-color-selected-active, var(--spectrum-tag-background-color-selected-active))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-selected-focus": {
+ "value": "var(--mod-tag-border-color-selected-focus, var(--spectrum-tag-border-color-selected-focus))",
+ "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `.spectrum-Tag.is-selected.is-focused, .spectrum-Tag.is-selected:focus-visible`.
Defaults to `var(--mod-tag-border-color-selected-focus, var(--spectrum-tag-border-color-selected-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-selected-focus": {
+ "value": "var(--mod-tag-background-color-selected-focus, var(--spectrum-tag-background-color-selected-focus))",
+ "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `.spectrum-Tag.is-selected.is-focused, .spectrum-Tag.is-selected:focus-visible`.
Defaults to `var(--mod-tag-background-color-selected-focus, var(--spectrum-tag-background-color-selected-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-invalid": {
+ "value": "var(--mod-tag-border-color-invalid, var(--spectrum-tag-border-color-invalid))",
+ "description": "Defined in `.spectrum-Tag.is-invalid`.
Used by `.spectrum-Tag.is-invalid`.
Defaults to `var(--mod-tag-border-color-invalid, var(--spectrum-tag-border-color-invalid))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-content-color-invalid": {
+ "value": "var(--mod-tag-content-color-invalid, var(--spectrum-tag-content-color-invalid))",
+ "description": "Defined in `.spectrum-Tag.is-invalid`.
Used by `.spectrum-Tag.is-invalid`.
Defaults to `var(--mod-tag-content-color-invalid, var(--spectrum-tag-content-color-invalid))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-invalid-active": {
+ "value": "var(--mod-tag-border-color-invalid-active, var(--spectrum-tag-border-color-invalid-active))",
+ "description": "Defined in `.spectrum-Tag.is-invalid`.
Used by `.spectrum-Tag.is-invalid:active`.
Defaults to `var(--mod-tag-border-color-invalid-active, var(--spectrum-tag-border-color-invalid-active))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-content-color-invalid-active": {
+ "value": "var(--mod-tag-content-color-invalid-active, var(--spectrum-tag-content-color-invalid-active))",
+ "description": "Defined in `.spectrum-Tag.is-invalid`.
Used by `.spectrum-Tag.is-invalid:active`.
Defaults to `var(--mod-tag-content-color-invalid-active, var(--spectrum-tag-content-color-invalid-active))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-invalid-focus": {
+ "value": "var(--mod-tag-border-color-invalid-focus, var(--spectrum-tag-border-color-invalid-focus))",
+ "description": "Defined in `.spectrum-Tag.is-invalid`.
Used by `.spectrum-Tag.is-invalid.is-focused, .spectrum-Tag.is-invalid:focus-visible`.
Defaults to `var(--mod-tag-border-color-invalid-focus, var(--spectrum-tag-border-color-invalid-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-content-color-invalid-focus": {
+ "value": "var(--mod-tag-content-color-invalid-focus, var(--spectrum-tag-content-color-invalid-focus))",
+ "description": "Defined in `.spectrum-Tag.is-invalid`.
Used by `.spectrum-Tag.is-invalid.is-focused, .spectrum-Tag.is-invalid:focus-visible`.
Defaults to `var(--mod-tag-content-color-invalid-focus, var(--spectrum-tag-content-color-invalid-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-invalid-selected": {
+ "value": "var(--mod-tag-border-color-invalid-selected, var(--spectrum-tag-border-color-invalid-selected))",
+ "description": "Defined in `.spectrum-Tag.is-invalid.is-selected`.
Used by `.spectrum-Tag.is-invalid.is-selected`.
Defaults to `var(--mod-tag-border-color-invalid-selected, var(--spectrum-tag-border-color-invalid-selected))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-invalid-selected": {
+ "value": "var(--mod-tag-background-color-invalid-selected, var(--spectrum-tag-background-color-invalid-selected))",
+ "description": "Defined in `.spectrum-Tag.is-invalid.is-selected`.
Used by `.spectrum-Tag.is-invalid.is-selected`.
Defaults to `var(--mod-tag-background-color-invalid-selected, var(--spectrum-tag-background-color-invalid-selected))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-content-color-invalid-selected": {
+ "value": "var(--mod-tag-content-color-invalid-selected, var(--spectrum-tag-content-color-invalid-selected))",
+ "description": "Defined in `.spectrum-Tag.is-invalid.is-selected`.
Used by `.spectrum-Tag.is-invalid.is-selected`, `.spectrum-Tag.is-invalid.is-selected:hover`.
Defaults to `var(--mod-tag-content-color-invalid-selected, var(--spectrum-tag-content-color-invalid-selected))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-invalid-selected-active": {
+ "value": "var(--mod-tag-border-color-invalid-selected-active, var(--spectrum-tag-border-color-invalid-selected-active))",
+ "description": "Defined in `.spectrum-Tag.is-invalid.is-selected`.
Used by `.spectrum-Tag.is-invalid.is-selected:active`.
Defaults to `var(--mod-tag-border-color-invalid-selected-active, var(--spectrum-tag-border-color-invalid-selected-active))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-invalid-selected-active": {
+ "value": "var(--mod-tag-background-color-invalid-selected-active, var(--spectrum-tag-background-color-invalid-selected-active))",
+ "description": "Defined in `.spectrum-Tag.is-invalid.is-selected`.
Used by `.spectrum-Tag.is-invalid.is-selected:active`.
Defaults to `var(--mod-tag-background-color-invalid-selected-active, var(--spectrum-tag-background-color-invalid-selected-active))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-invalid-selected-focus": {
+ "value": "var(--mod-tag-border-color-invalid-selected-focus, var(--spectrum-tag-border-color-invalid-selected-focus))",
+ "description": "Defined in `.spectrum-Tag.is-invalid.is-selected`.
Used by `.spectrum-Tag.is-invalid.is-selected.is-focused, .spectrum-Tag.is-invalid.is-selected:focus-visible`.
Defaults to `var(--mod-tag-border-color-invalid-selected-focus, var(--spectrum-tag-border-color-invalid-selected-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-invalid-selected-focus": {
+ "value": "var(--mod-tag-background-color-invalid-selected-focus, var(--spectrum-tag-background-color-invalid-selected-focus))",
+ "description": "Defined in `.spectrum-Tag.is-invalid.is-selected`.
Used by `.spectrum-Tag.is-invalid.is-selected.is-focused, .spectrum-Tag.is-invalid.is-selected:focus-visible`.
Defaults to `var(--mod-tag-background-color-invalid-selected-focus, var(--spectrum-tag-background-color-invalid-selected-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-emphasized": {
+ "value": "var(--mod-tag-border-color-emphasized, var(--spectrum-tag-border-color-emphasized))",
+ "description": "Defined in `.spectrum-Tag.is-emphasized`.
Used by `.spectrum-Tag.is-emphasized`.
Defaults to `var(--mod-tag-border-color-emphasized, var(--spectrum-tag-border-color-emphasized))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-emphasized": {
+ "value": "var(--mod-tag-background-color-emphasized, var(--spectrum-tag-background-color-emphasized))",
+ "description": "Defined in `.spectrum-Tag.is-emphasized`.
Used by `.spectrum-Tag.is-emphasized`.
Defaults to `var(--mod-tag-background-color-emphasized, var(--spectrum-tag-background-color-emphasized))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-content-color-emphasized": {
+ "value": "var(--mod-tag-content-color-emphasized, var(--spectrum-tag-content-color-emphasized))",
+ "description": "Defined in `.spectrum-Tag.is-emphasized`.
Used by `.spectrum-Tag.is-emphasized`, `.spectrum-Tag.is-emphasized:hover`.
Defaults to `var(--mod-tag-content-color-emphasized, var(--spectrum-tag-content-color-emphasized))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-hover": {
+ "value": "var(--mod-tag-border-color-hover, var(--spectrum-tag-border-color-hover))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:hover`.
Defaults to `var(--mod-tag-border-color-hover, var(--spectrum-tag-border-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-hover": {
+ "value": "var(--mod-tag-background-color-hover, var(--spectrum-tag-background-color-hover))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:hover`.
Defaults to `var(--mod-tag-background-color-hover, var(--spectrum-tag-background-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-content-color-hover": {
+ "value": "var(--mod-tag-content-color-hover, var(--spectrum-tag-content-color-hover))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:hover`.
Defaults to `var(--mod-tag-content-color-hover, var(--spectrum-tag-content-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-selected-hover": {
+ "value": "var(--mod-tag-border-color-selected-hover, var(--spectrum-tag-border-color-selected-hover))",
+ "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `.spectrum-Tag.is-selected:hover`.
Defaults to `var(--mod-tag-border-color-selected-hover, var(--spectrum-tag-border-color-selected-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-selected-hover": {
+ "value": "var(--mod-tag-background-color-selected-hover, var(--spectrum-tag-background-color-selected-hover))",
+ "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `.spectrum-Tag.is-selected:hover`.
Defaults to `var(--mod-tag-background-color-selected-hover, var(--spectrum-tag-background-color-selected-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-invalid-hover": {
+ "value": "var(--mod-tag-border-color-invalid-hover, var(--spectrum-tag-border-color-invalid-hover))",
+ "description": "Defined in `.spectrum-Tag.is-invalid`.
Used by `.spectrum-Tag.is-invalid:hover`.
Defaults to `var(--mod-tag-border-color-invalid-hover, var(--spectrum-tag-border-color-invalid-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-content-color-invalid-hover": {
+ "value": "var(--mod-tag-content-color-invalid-hover, var(--spectrum-tag-content-color-invalid-hover))",
+ "description": "Defined in `.spectrum-Tag.is-invalid`.
Used by `.spectrum-Tag.is-invalid:hover`.
Defaults to `var(--mod-tag-content-color-invalid-hover, var(--spectrum-tag-content-color-invalid-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-invalid-selected-hover": {
+ "value": "var(--mod-tag-border-color-invalid-selected-hover, var(--spectrum-tag-border-color-invalid-selected-hover))",
+ "description": "Defined in `.spectrum-Tag.is-invalid.is-selected`.
Used by `.spectrum-Tag.is-invalid.is-selected:hover`.
Defaults to `var(--mod-tag-border-color-invalid-selected-hover, var(--spectrum-tag-border-color-invalid-selected-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-invalid-selected-hover": {
+ "value": "var(--mod-tag-background-color-invalid-selected-hover, var(--spectrum-tag-background-color-invalid-selected-hover))",
+ "description": "Defined in `.spectrum-Tag.is-invalid.is-selected`.
Used by `.spectrum-Tag.is-invalid.is-selected:hover`.
Defaults to `var(--mod-tag-background-color-invalid-selected-hover, var(--spectrum-tag-background-color-invalid-selected-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-emphasized-hover": {
+ "value": "var(--mod-tag-border-color-emphasized-hover, var(--spectrum-tag-border-color-emphasized-hover))",
+ "description": "Defined in `.spectrum-Tag.is-emphasized`.
Used by `.spectrum-Tag.is-emphasized:hover`.
Defaults to `var(--mod-tag-border-color-emphasized-hover, var(--spectrum-tag-border-color-emphasized-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-emphasized-hover": {
+ "value": "var(--mod-tag-background-color-emphasized-hover, var(--spectrum-tag-background-color-emphasized-hover))",
+ "description": "Defined in `.spectrum-Tag.is-emphasized`.
Used by `.spectrum-Tag.is-emphasized:hover`.
Defaults to `var(--mod-tag-background-color-emphasized-hover, var(--spectrum-tag-background-color-emphasized-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-emphasized-active": {
+ "value": "var(--mod-tag-border-color-emphasized-active, var(--spectrum-tag-border-color-emphasized-active))",
+ "description": "Defined in `.spectrum-Tag.is-emphasized`.
Used by `.spectrum-Tag.is-emphasized:active`.
Defaults to `var(--mod-tag-border-color-emphasized-active, var(--spectrum-tag-border-color-emphasized-active))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-emphasized-active": {
+ "value": "var(--mod-tag-background-color-emphasized-active, var(--spectrum-tag-background-color-emphasized-active))",
+ "description": "Defined in `.spectrum-Tag.is-emphasized`.
Used by `.spectrum-Tag.is-emphasized:active`.
Defaults to `var(--mod-tag-background-color-emphasized-active, var(--spectrum-tag-background-color-emphasized-active))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-emphasized-focus": {
+ "value": "var(--mod-tag-border-color-emphasized-focus, var(--spectrum-tag-border-color-emphasized-focus))",
+ "description": "Defined in `.spectrum-Tag.is-emphasized`.
Used by `.spectrum-Tag.is-emphasized.is-focused, .spectrum-Tag.is-emphasized:focus-visible`.
Defaults to `var(--mod-tag-border-color-emphasized-focus, var(--spectrum-tag-border-color-emphasized-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-emphasized-focus": {
+ "value": "var(--mod-tag-background-color-emphasized-focus, var(--spectrum-tag-background-color-emphasized-focus))",
+ "description": "Defined in `.spectrum-Tag.is-emphasized`.
Used by `.spectrum-Tag.is-emphasized.is-focused, .spectrum-Tag.is-emphasized:focus-visible`.
Defaults to `var(--mod-tag-background-color-emphasized-focus, var(--spectrum-tag-background-color-emphasized-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-disabled": {
+ "value": "var(--mod-tag-border-color-disabled, var(--spectrum-tag-border-color-disabled))",
+ "description": "Defined in `.spectrum-Tag.is-disabled`.
Used by `.spectrum-Tag.is-disabled`.
Defaults to `var(--mod-tag-border-color-disabled, var(--spectrum-tag-border-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-disabled": {
+ "value": "var(--mod-tag-background-color-disabled, var(--spectrum-tag-background-color-disabled))",
+ "description": "Defined in `.spectrum-Tag.is-disabled`.
Used by `.spectrum-Tag.is-disabled`.
Defaults to `var(--mod-tag-background-color-disabled, var(--spectrum-tag-background-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-content-color-disabled": {
+ "value": "var(--mod-tag-content-color-disabled, var(--spectrum-tag-content-color-disabled))",
+ "description": "Defined in `.spectrum-Tag.is-disabled`.
Used by `.spectrum-Tag.is-disabled`.
Defaults to `var(--mod-tag-content-color-disabled, var(--spectrum-tag-content-color-disabled))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/tag/stories/tag.stories.js b/components/tag/stories/tag.stories.js
index 6061c450e7d..bc2f8b4f44e 100644
--- a/components/tag/stories/tag.stories.js
+++ b/components/tag/stories/tag.stories.js
@@ -2,11 +2,13 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isEmphasized, isInvalid, isSelected, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { TagGroups } from "./tag.test.js";
import { SelectedTemplate, TagsDefaultOptions } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* A tag categorizes content. It can represent keywords or people, and are [grouped](?path=/docs/components-tag-group--docs) to describe an item or a search request.
*/
@@ -100,6 +102,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/taggroup/dist/metadata.json b/components/taggroup/dist/metadata.json
index 10ed81256ff..80b67475b79 100644
--- a/components/taggroup/dist/metadata.json
+++ b/components/taggroup/dist/metadata.json
@@ -1,16 +1,41 @@
{
"sourceFile": "index.css",
"selectors": [".spectrum-TagGroup", ".spectrum-TagGroup-item"],
- "modifiers": [
- "--mod-tag-group-item-margin-block",
- "--mod-tag-group-item-margin-inline"
- ],
- "component": [
- "--spectrum-tag-group-item-margin-block",
- "--spectrum-tag-group-item-margin-inline"
- ],
- "global": ["--spectrum-spacing-75"],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-tag-group-item-margin-block": {
+ "value": "var(--spectrum-tag-group-item-margin-block)",
+ "description": "Used by `.spectrum-TagGroup-item`.
Defaults to `var(--spectrum-tag-group-item-margin-block)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-group-item-margin-inline": {
+ "value": "var(--spectrum-tag-group-item-margin-inline)",
+ "description": "Used by `.spectrum-TagGroup-item`.
Defaults to `var(--spectrum-tag-group-item-margin-inline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-tag-group-item-margin-block": {
+ "description": "Defined in `.spectrum-TagGroup`.
Used by `.spectrum-TagGroup-item`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-group-item-margin-inline": {
+ "description": "Defined in `.spectrum-TagGroup`.
Used by `.spectrum-TagGroup-item`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-spacing-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-tag-group-item-margin-block`, `--spectrum-tag-group-item-margin-inline`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {},
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/taggroup/stories/taggroup.stories.js b/components/taggroup/stories/taggroup.stories.js
index 66ef23e885d..c12f4bd5d69 100644
--- a/components/taggroup/stories/taggroup.stories.js
+++ b/components/taggroup/stories/taggroup.stories.js
@@ -1,10 +1,12 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { default as TagStories } from "@spectrum-css/tag/stories/tag.stories.js";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { TagGroups } from "./taggroup.test.js";
import { Template } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
const ignoreProps = ["rootClass", "hasClearButton", "label"];
/**
@@ -61,6 +63,7 @@ export default {
},
packageJson,
metadata,
+ cssprops: metadata.modifiers,
},
};
diff --git a/components/textfield/dist/metadata.json b/components/textfield/dist/metadata.json
index 7e36cb740e0..189343ab273 100644
--- a/components/textfield/dist/metadata.json
+++ b/components/textfield/dist/metadata.json
@@ -10,12 +10,12 @@
".is-invalid .spectrum-Textfield-input:focus-visible",
".is-invalid .spectrum-Textfield-input:focus:hover",
".is-invalid .spectrum-Textfield-input:hover:not(.is-disabled)",
- ".is-invalid.is-focused .spectrum-Textfield-input",
- ".is-invalid.is-focused .spectrum-Textfield-input:hover",
- ".is-invalid.is-keyboardFocused .spectrum-Textfield-input",
".is-invalid:focus .spectrum-Textfield-input",
".is-invalid:focus .spectrum-Textfield-input:hover",
".is-invalid:hover:not(.is-disabled) .spectrum-Textfield-input",
+ ".is-invalid.is-focused .spectrum-Textfield-input",
+ ".is-invalid.is-focused .spectrum-Textfield-input:hover",
+ ".is-invalid.is-keyboardFocused .spectrum-Textfield-input",
".is-keyboardFocused .spectrum-Textfield-input",
".is-keyboardFocused .spectrum-Textfield-input::placeholder",
".is-valid .spectrum-Textfield-input",
@@ -33,6 +33,7 @@
".spectrum-Textfield--quiet .spectrum-Textfield-characterCount",
".spectrum-Textfield--quiet .spectrum-Textfield-input",
".spectrum-Textfield--quiet .spectrum-Textfield-validationIcon",
+ ".spectrum-Textfield--quiet:after",
".spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input",
".spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input::placeholder",
".spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input",
@@ -42,7 +43,6 @@
".spectrum-Textfield--quiet.is-keyboardFocused:after",
".spectrum-Textfield--quiet.is-valid .spectrum-Textfield-input",
".spectrum-Textfield--quiet.is-valid .spectrum-Textfield-validationIcon",
- ".spectrum-Textfield--quiet:after",
".spectrum-Textfield--sideLabel",
".spectrum-Textfield--sideLabel .spectrum-FieldLabel",
".spectrum-Textfield--sideLabel .spectrum-HelpText",
@@ -73,6 +73,8 @@
".spectrum-Textfield-input[type=\"number\"]",
".spectrum-Textfield-input[type=\"number\"]::-webkit-inner-spin-button",
".spectrum-Textfield-input[type=\"number\"]::-webkit-outer-spin-button",
+ ".spectrum-Textfield:hover .spectrum-Textfield-input",
+ ".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder",
".spectrum-Textfield.is-disabled .spectrum-FieldLabel",
".spectrum-Textfield.is-disabled .spectrum-Textfield-input",
".spectrum-Textfield.is-disabled .spectrum-Textfield-input::placeholder",
@@ -90,280 +92,1470 @@
".spectrum-Textfield.spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon",
".spectrum-Textfield.spectrum-Textfield--sizeL",
".spectrum-Textfield.spectrum-Textfield--sizeS",
- ".spectrum-Textfield.spectrum-Textfield--sizeXL",
- ".spectrum-Textfield:hover .spectrum-Textfield-input",
- ".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder"
- ],
- "modifiers": [
- "--mod-texfield-animation-duration",
- "--mod-text-area-min-block-size",
- "--mod-text-area-min-block-size-quiet",
- "--mod-text-area-min-inline-size",
- "--mod-textfield-background-color",
- "--mod-textfield-background-color-disabled",
- "--mod-textfield-border-color",
- "--mod-textfield-border-color-disabled",
- "--mod-textfield-border-color-focus",
- "--mod-textfield-border-color-focus-hover",
- "--mod-textfield-border-color-hover",
- "--mod-textfield-border-color-invalid-default",
- "--mod-textfield-border-color-invalid-focus",
- "--mod-textfield-border-color-invalid-focus-hover",
- "--mod-textfield-border-color-invalid-hover",
- "--mod-textfield-border-color-invalid-keyboard-focus",
- "--mod-textfield-border-color-keyboard-focus",
- "--mod-textfield-border-width",
- "--mod-textfield-character-count-font-family",
- "--mod-textfield-character-count-font-size",
- "--mod-textfield-character-count-font-weight",
- "--mod-textfield-character-count-spacing-block",
- "--mod-textfield-character-count-spacing-block-quiet",
- "--mod-textfield-character-count-spacing-block-side",
- "--mod-textfield-character-count-spacing-inline",
- "--mod-textfield-character-count-spacing-inline-side",
- "--mod-textfield-corner-radius",
- "--mod-textfield-focus-indicator-color",
- "--mod-textfield-focus-indicator-gap",
- "--mod-textfield-focus-indicator-width",
- "--mod-textfield-font-family",
- "--mod-textfield-font-weight",
- "--mod-textfield-height",
- "--mod-textfield-helptext-spacing-block",
- "--mod-textfield-icon-color-invalid",
- "--mod-textfield-icon-color-valid",
- "--mod-textfield-icon-size-invalid",
- "--mod-textfield-icon-size-valid",
- "--mod-textfield-icon-spacing-block-invalid",
- "--mod-textfield-icon-spacing-block-valid",
- "--mod-textfield-icon-spacing-inline-end-invalid",
- "--mod-textfield-icon-spacing-inline-end-quiet-invalid",
- "--mod-textfield-icon-spacing-inline-end-quiet-valid",
- "--mod-textfield-icon-spacing-inline-end-valid",
- "--mod-textfield-icon-spacing-inline-start-invalid",
- "--mod-textfield-icon-spacing-inline-start-valid",
- "--mod-textfield-label-spacing-block",
- "--mod-textfield-label-spacing-block-quiet",
- "--mod-textfield-label-spacing-inline-side-label",
- "--mod-textfield-min-width",
- "--mod-textfield-placeholder-font-size",
- "--mod-textfield-spacing-block-end",
- "--mod-textfield-spacing-block-quiet",
- "--mod-textfield-spacing-block-start",
- "--mod-textfield-spacing-inline",
- "--mod-textfield-spacing-inline-quiet",
- "--mod-textfield-text-color-default",
- "--mod-textfield-text-color-disabled",
- "--mod-textfield-text-color-focus",
- "--mod-textfield-text-color-focus-hover",
- "--mod-textfield-text-color-hover",
- "--mod-textfield-text-color-invalid",
- "--mod-textfield-text-color-keyboard-focus",
- "--mod-textfield-text-color-readonly",
- "--mod-textfield-text-color-valid",
- "--mod-textfield-width"
- ],
- "component": [
- "--spectrum-text-field-minimum-width-multiplier",
- "--spectrum-textfield-background-color",
- "--spectrum-textfield-background-color-disabled",
- "--spectrum-textfield-border-color",
- "--spectrum-textfield-border-color-disabled",
- "--spectrum-textfield-border-color-focus",
- "--spectrum-textfield-border-color-focus-hover",
- "--spectrum-textfield-border-color-hover",
- "--spectrum-textfield-border-color-invalid-default",
- "--spectrum-textfield-border-color-invalid-focus",
- "--spectrum-textfield-border-color-invalid-focus-hover",
- "--spectrum-textfield-border-color-invalid-hover",
- "--spectrum-textfield-border-color-invalid-keyboard-focus",
- "--spectrum-textfield-border-color-keyboard-focus",
- "--spectrum-textfield-border-width",
- "--spectrum-textfield-character-count-font-family",
- "--spectrum-textfield-character-count-font-size",
- "--spectrum-textfield-character-count-font-weight",
- "--spectrum-textfield-character-count-spacing-block",
- "--spectrum-textfield-character-count-spacing-block-quiet",
- "--spectrum-textfield-character-count-spacing-block-side",
- "--spectrum-textfield-character-count-spacing-inline",
- "--spectrum-textfield-character-count-spacing-inline-side",
- "--spectrum-textfield-corner-radius",
- "--spectrum-textfield-focus-indicator-color",
- "--spectrum-textfield-focus-indicator-gap",
- "--spectrum-textfield-focus-indicator-width",
- "--spectrum-textfield-font-family",
- "--spectrum-textfield-font-weight",
- "--spectrum-textfield-height",
- "--spectrum-textfield-helptext-spacing-block",
- "--spectrum-textfield-icon-color-invalid",
- "--spectrum-textfield-icon-color-valid",
- "--spectrum-textfield-icon-size-invalid",
- "--spectrum-textfield-icon-size-valid",
- "--spectrum-textfield-icon-spacing-block-invalid",
- "--spectrum-textfield-icon-spacing-block-valid",
- "--spectrum-textfield-icon-spacing-inline-end-invalid",
- "--spectrum-textfield-icon-spacing-inline-end-quiet-invalid",
- "--spectrum-textfield-icon-spacing-inline-end-quiet-valid",
- "--spectrum-textfield-icon-spacing-inline-end-valid",
- "--spectrum-textfield-icon-spacing-inline-start-invalid",
- "--spectrum-textfield-icon-spacing-inline-start-valid",
- "--spectrum-textfield-input-line-height",
- "--spectrum-textfield-label-spacing-block",
- "--spectrum-textfield-label-spacing-block-quiet",
- "--spectrum-textfield-label-spacing-inline-side-label",
- "--spectrum-textfield-min-width",
- "--spectrum-textfield-placeholder-font-size",
- "--spectrum-textfield-spacing-block-end",
- "--spectrum-textfield-spacing-block-quiet",
- "--spectrum-textfield-spacing-block-start",
- "--spectrum-textfield-spacing-inline",
- "--spectrum-textfield-spacing-inline-quiet",
- "--spectrum-textfield-text-color-default",
- "--spectrum-textfield-text-color-disabled",
- "--spectrum-textfield-text-color-focus",
- "--spectrum-textfield-text-color-focus-hover",
- "--spectrum-textfield-text-color-hover",
- "--spectrum-textfield-text-color-invalid",
- "--spectrum-textfield-text-color-keyboard-focus",
- "--spectrum-textfield-text-color-readonly",
- "--spectrum-textfield-text-color-valid",
- "--spectrum-textfield-width"
- ],
- "global": [
- "--spectrum-animation-duration-100",
- "--spectrum-border-width-100",
- "--spectrum-character-count-to-field-quiet-extra-large",
- "--spectrum-character-count-to-field-quiet-large",
- "--spectrum-character-count-to-field-quiet-medium",
- "--spectrum-character-count-to-field-quiet-small",
- "--spectrum-checkmark-icon-size-100",
- "--spectrum-checkmark-icon-size-200",
- "--spectrum-checkmark-icon-size-300",
- "--spectrum-checkmark-icon-size-75",
- "--spectrum-component-bottom-to-text-100",
- "--spectrum-component-bottom-to-text-200",
- "--spectrum-component-bottom-to-text-75",
- "--spectrum-component-edge-to-text-100",
- "--spectrum-component-edge-to-text-200",
- "--spectrum-component-edge-to-text-75",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-75",
- "--spectrum-component-top-to-text-100",
- "--spectrum-component-top-to-workflow-icon-100",
- "--spectrum-component-top-to-workflow-icon-200",
- "--spectrum-component-top-to-workflow-icon-300",
- "--spectrum-component-top-to-workflow-icon-75",
- "--spectrum-corner-radius-100",
- "--spectrum-disabled-content-color",
- "--spectrum-field-edge-to-alert-icon-extra-large",
- "--spectrum-field-edge-to-alert-icon-large",
- "--spectrum-field-edge-to-alert-icon-medium",
- "--spectrum-field-edge-to-alert-icon-quiet",
- "--spectrum-field-edge-to-alert-icon-small",
- "--spectrum-field-edge-to-border-quiet",
- "--spectrum-field-edge-to-text-quiet",
- "--spectrum-field-edge-to-validation-icon-extra-large",
- "--spectrum-field-edge-to-validation-icon-large",
- "--spectrum-field-edge-to-validation-icon-medium",
- "--spectrum-field-edge-to-validation-icon-quiet",
- "--spectrum-field-edge-to-validation-icon-small",
- "--spectrum-field-label-to-component",
- "--spectrum-field-label-to-component-quiet-extra-large",
- "--spectrum-field-label-to-component-quiet-large",
- "--spectrum-field-label-to-component-quiet-medium",
- "--spectrum-field-label-to-component-quiet-small",
- "--spectrum-field-text-to-alert-icon-extra-large",
- "--spectrum-field-text-to-alert-icon-large",
- "--spectrum-field-text-to-alert-icon-medium",
- "--spectrum-field-text-to-alert-icon-small",
- "--spectrum-field-text-to-validation-icon-extra-large",
- "--spectrum-field-text-to-validation-icon-large",
- "--spectrum-field-text-to-validation-icon-medium",
- "--spectrum-field-text-to-validation-icon-small",
- "--spectrum-field-top-to-validation-icon-extra-large",
- "--spectrum-field-top-to-validation-icon-large",
- "--spectrum-field-top-to-validation-icon-medium",
- "--spectrum-field-top-to-validation-icon-small",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-300",
- "--spectrum-font-size-75",
- "--spectrum-gray-25",
- "--spectrum-gray-300",
- "--spectrum-gray-500",
- "--spectrum-gray-600",
- "--spectrum-gray-800",
- "--spectrum-gray-900",
- "--spectrum-help-text-to-component",
- "--spectrum-negative-border-color-default",
- "--spectrum-negative-border-color-focus",
- "--spectrum-negative-border-color-focus-hover",
- "--spectrum-negative-border-color-hover",
- "--spectrum-negative-border-color-key-focus",
- "--spectrum-negative-visual-color",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-focus",
- "--spectrum-neutral-content-color-focus-hover",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-neutral-content-color-key-focus",
- "--spectrum-positive-visual-color",
- "--spectrum-regular-font-weight",
- "--spectrum-sans-font-family-stack",
- "--spectrum-side-label-character-count-to-field",
- "--spectrum-side-label-character-count-top-margin-extra-large",
- "--spectrum-side-label-character-count-top-margin-large",
- "--spectrum-side-label-character-count-top-margin-medium",
- "--spectrum-side-label-character-count-top-margin-small",
- "--spectrum-spacing-100",
- "--spectrum-spacing-200",
- "--spectrum-texfield-animation-duration",
- "--spectrum-text-area-min-block-size",
- "--spectrum-text-area-min-block-size-quiet",
- "--spectrum-text-area-min-inline-size",
- "--spectrum-text-area-minimum-height",
- "--spectrum-text-area-minimum-width",
- "--spectrum-workflow-icon-size-100",
- "--spectrum-workflow-icon-size-200",
- "--spectrum-workflow-icon-size-300",
- "--spectrum-workflow-icon-size-75"
- ],
- "system-theme": [
- "--system-textfield-background-color",
- "--system-textfield-background-color-disabled",
- "--system-textfield-border-color",
- "--system-textfield-border-color-disabled",
- "--system-textfield-border-color-focus",
- "--system-textfield-border-color-focus-hover",
- "--system-textfield-border-color-hover",
- "--system-textfield-border-color-keyboard-focus",
- "--system-textfield-border-width",
- "--system-textfield-icon-spacing-block-invalid",
- "--system-textfield-quiet-border-color-disabled",
- "--system-textfield-size-l-icon-spacing-block-invalid",
- "--system-textfield-size-s-icon-spacing-block-invalid",
- "--system-textfield-size-xl-icon-spacing-block-invalid"
+ ".spectrum-Textfield.spectrum-Textfield--sizeXL"
],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-textfield-border-color",
- "--highcontrast-textfield-border-color-focus",
- "--highcontrast-textfield-border-color-hover",
- "--highcontrast-textfield-border-color-invalid-default",
- "--highcontrast-textfield-border-color-invalid-focus",
- "--highcontrast-textfield-border-color-invalid-hover",
- "--highcontrast-textfield-border-color-invalid-keyboard-focus",
- "--highcontrast-textfield-border-color-keyboard-focus",
- "--highcontrast-textfield-focus-indicator-color",
- "--highcontrast-textfield-text-color-default",
- "--highcontrast-textfield-text-color-disabled",
- "--highcontrast-textfield-text-color-hover",
- "--highcontrast-textfield-text-color-invalid",
- "--highcontrast-textfield-text-color-keyboard-focus",
- "--highcontrast-textfield-text-color-readonly",
- "--highcontrast-textfield-text-color-valid"
- ]
+ "modifiers": {
+ "mod-textfield-width": {
+ "value": "var(--spectrum-textfield-width)",
+ "description": "Used by `.spectrum-Textfield`.
Defaults to `var(--spectrum-textfield-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-icon-spacing-block-valid": {
+ "value": "var(--spectrum-textfield-icon-spacing-block-valid)",
+ "description": "Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-textfield-icon-spacing-block-valid)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-icon-spacing-inline-end-valid": {
+ "value": "var(--spectrum-textfield-icon-spacing-inline-end-valid)",
+ "description": "Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`, `.is-valid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-icon-spacing-inline-end-valid)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-icon-color-valid": {
+ "value": "var(--spectrum-textfield-icon-color-valid)",
+ "description": "Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-textfield-icon-color-valid)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-icon-size-invalid": {
+ "value": "var(--spectrum-textfield-icon-size-invalid)",
+ "description": "Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`, `.is-invalid .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-icon-size-invalid)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-icon-spacing-block-invalid": {
+ "value": "var(--spectrum-textfield-icon-spacing-block-invalid)",
+ "description": "Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-textfield-icon-spacing-block-invalid)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-icon-spacing-inline-end-invalid": {
+ "value": "var(--spectrum-textfield-icon-spacing-inline-end-invalid)",
+ "description": "Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`, `.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-icon-spacing-inline-end-invalid)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-icon-color-invalid": {
+ "value": "var(--spectrum-textfield-icon-color-invalid)",
+ "description": "Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-textfield-icon-color-invalid)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-icon-spacing-inline-end-quiet-valid": {
+ "value": "var(--spectrum-textfield-icon-spacing-inline-end-quiet-valid)",
+ "description": "Used by `.spectrum-Textfield--quiet.is-valid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-textfield-icon-spacing-inline-end-quiet-valid)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-icon-spacing-inline-end-quiet-invalid": {
+ "value": "var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid)",
+ "description": "Used by `.spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-label-spacing-block": {
+ "value": "var(--spectrum-textfield-label-spacing-block)",
+ "description": "Used by `.spectrum-Textfield .spectrum-FieldLabel`.
Defaults to `var(--spectrum-textfield-label-spacing-block)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-label-spacing-block-quiet": {
+ "value": "var(--spectrum-textfield-label-spacing-block-quiet)",
+ "description": "Used by `.spectrum-Textfield--quiet .spectrum-FieldLabel`.
Defaults to `var(--spectrum-textfield-label-spacing-block-quiet)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-helptext-spacing-block": {
+ "value": "var(--spectrum-textfield-helptext-spacing-block)",
+ "description": "Used by `.spectrum-Textfield .spectrum-HelpText`.
Defaults to `var(--spectrum-textfield-helptext-spacing-block)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-character-count-spacing-block": {
+ "value": "var(--spectrum-textfield-character-count-spacing-block)",
+ "description": "Used by `.spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-textfield-character-count-spacing-block)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-character-count-spacing-inline": {
+ "value": "var(--spectrum-textfield-character-count-spacing-inline)",
+ "description": "Used by `.spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-textfield-character-count-spacing-inline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-character-count-font-size": {
+ "value": "var(--spectrum-textfield-character-count-font-size)",
+ "description": "Used by `.spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-textfield-character-count-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-character-count-font-family": {
+ "value": "var(--spectrum-textfield-character-count-font-family)",
+ "description": "Used by `.spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-textfield-character-count-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-character-count-font-weight": {
+ "value": "var(--spectrum-textfield-character-count-font-weight)",
+ "description": "Used by `.spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-textfield-character-count-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-corner-radius": {
+ "value": "var(--spectrum-textfield-corner-radius)",
+ "description": "Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-corner-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-character-count-spacing-block-quiet": {
+ "value": "var(--spectrum-textfield-character-count-spacing-block-quiet)",
+ "description": "Used by `.spectrum-Textfield--quiet .spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-textfield-character-count-spacing-block-quiet)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-min-width": {
+ "value": "var(--spectrum-textfield-min-width)",
+ "description": "Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-min-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-height": {
+ "value": "var(--spectrum-textfield-height)",
+ "description": "Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-spacing-block-start": {
+ "value": "var(--spectrum-textfield-spacing-block-start)",
+ "description": "Used by `.spectrum-Textfield-input`, `.spectrum-Textfield--quiet .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-spacing-block-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-border-width": {
+ "value": "var(--spectrum-textfield-border-width)",
+ "description": "Used by `.spectrum-Textfield-input`, `.is-valid .spectrum-Textfield-input`, `.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-spacing-block-end": {
+ "value": "var(--spectrum-textfield-spacing-block-end)",
+ "description": "Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-spacing-block-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-spacing-inline": {
+ "value": "var(--spectrum-textfield-spacing-inline)",
+ "description": "Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-spacing-inline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-background-color": {
+ "value": "var(--spectrum-textfield-background-color)",
+ "description": "Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-border-color": {
+ "value": "var(--spectrum-textfield-border-color)",
+ "description": "Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-texfield-animation-duration": {
+ "value": "var(--spectrum-texfield-animation-duration)",
+ "description": "Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-texfield-animation-duration)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-placeholder-font-size": {
+ "value": "var(--spectrum-textfield-placeholder-font-size)",
+ "description": "Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-placeholder-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-font-family": {
+ "value": "var(--spectrum-textfield-font-family)",
+ "description": "Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-font-weight": {
+ "value": "var(--spectrum-textfield-font-weight)",
+ "description": "Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-text-color-default": {
+ "value": "var(--spectrum-textfield-text-color-default)",
+ "description": "Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-text-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-border-color-focus": {
+ "value": "var(--spectrum-textfield-border-color-focus)",
+ "description": "Used by `.is-focused .spectrum-Textfield-input, .spectrum-Textfield-input:focus`.
Defaults to `var(--spectrum-textfield-border-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-text-color-focus": {
+ "value": "var(--spectrum-textfield-text-color-focus)",
+ "description": "Used by `.is-focused .spectrum-Textfield-input, .is-focused .spectrum-Textfield-input::placeholder, .spectrum-Textfield-input:focus, .spectrum-Textfield-input:focus::placeholder`.
Defaults to `var(--spectrum-textfield-text-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-border-color-keyboard-focus": {
+ "value": "var(--spectrum-textfield-border-color-keyboard-focus)",
+ "description": "Used by `.is-keyboardFocused .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-color-keyboard-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-focus-indicator-width": {
+ "value": "var(--spectrum-textfield-focus-indicator-width)",
+ "description": "Used by `.is-keyboardFocused .spectrum-Textfield-input`, `.spectrum-Textfield--quiet:after`.
Defaults to `var(--spectrum-textfield-focus-indicator-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-focus-indicator-color": {
+ "value": "var(--spectrum-textfield-focus-indicator-color)",
+ "description": "Used by `.is-keyboardFocused .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-keyboardFocused:after`.
Defaults to `var(--spectrum-textfield-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-focus-indicator-gap": {
+ "value": "var(--spectrum-textfield-focus-indicator-gap)",
+ "description": "Used by `.is-keyboardFocused .spectrum-Textfield-input`, `.spectrum-Textfield--quiet:after`.
Defaults to `var(--spectrum-textfield-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-text-color-keyboard-focus": {
+ "value": "var(--spectrum-textfield-text-color-keyboard-focus)",
+ "description": "Used by `.is-keyboardFocused .spectrum-Textfield-input, .is-keyboardFocused .spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-text-color-keyboard-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-icon-spacing-inline-start-valid": {
+ "value": "var(--spectrum-textfield-icon-spacing-inline-start-valid)",
+ "description": "Used by `.is-valid .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-valid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-icon-spacing-inline-start-valid)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-icon-size-valid": {
+ "value": "var(--spectrum-textfield-icon-size-valid)",
+ "description": "Used by `.is-valid .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-valid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-icon-size-valid)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-text-color-valid": {
+ "value": "var(--spectrum-textfield-text-color-valid)",
+ "description": "Used by `.is-valid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-text-color-valid)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-icon-spacing-inline-start-invalid": {
+ "value": "var(--spectrum-textfield-icon-spacing-inline-start-invalid)",
+ "description": "Used by `.is-invalid .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-icon-spacing-inline-start-invalid)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-text-color-invalid": {
+ "value": "var(--spectrum-textfield-text-color-invalid)",
+ "description": "Used by `.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-text-color-invalid)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-border-color-invalid-default": {
+ "value": "var(--spectrum-textfield-border-color-invalid-default)",
+ "description": "Used by `.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-color-invalid-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-border-color-invalid-focus": {
+ "value": "var(--spectrum-textfield-border-color-invalid-focus)",
+ "description": "Used by `.is-invalid .spectrum-Textfield-input:focus, .is-invalid.is-focused .spectrum-Textfield-input, .is-invalid:focus .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-color-invalid-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-border-color-invalid-keyboard-focus": {
+ "value": "var(--spectrum-textfield-border-color-invalid-keyboard-focus)",
+ "description": "Used by `.is-invalid .spectrum-Textfield-input:focus-visible, .is-invalid.is-keyboardFocused .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-color-invalid-keyboard-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-background-color-disabled": {
+ "value": "var(--spectrum-textfield-background-color-disabled)",
+ "description": "Used by `.spectrum-Textfield-input:disabled, .spectrum-Textfield.is-disabled .spectrum-Textfield-input`, `.spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-background-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-border-color-disabled": {
+ "value": "var(--spectrum-textfield-border-color-disabled)",
+ "description": "Used by `.spectrum-Textfield-input:disabled, .spectrum-Textfield.is-disabled .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input, .spectrum-Textfield-input:disabled`, `.spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-text-color-disabled": {
+ "value": "var(--spectrum-textfield-text-color-disabled)",
+ "description": "Used by `.spectrum-Textfield-input:disabled, .spectrum-Textfield-input:disabled::placeholder, .spectrum-Textfield.is-disabled .spectrum-Textfield-input, .spectrum-Textfield.is-disabled .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input, .spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input::placeholder, .spectrum-Textfield-input:disabled, .spectrum-Textfield-input:disabled::placeholder`, `.spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-text-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-spacing-block-quiet": {
+ "value": "var(--spectrum-textfield-spacing-block-quiet)",
+ "description": "Used by `.spectrum-Textfield--quiet .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-spacing-block-quiet)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-spacing-inline-quiet": {
+ "value": "var(--spectrum-textfield-spacing-inline-quiet)",
+ "description": "Used by `.spectrum-Textfield--quiet .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-spacing-inline-quiet)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-text-color-readonly": {
+ "value": "var(--spectrum-textfield-text-color-readonly)",
+ "description": "Used by `.spectrum-Textfield-input:read-only, .spectrum-Textfield.is-readOnly .spectrum-Textfield-input`, `.spectrum-Textfield-input:read-only::placeholder, .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input, .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-text-color-readonly)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-border-color-hover": {
+ "value": "var(--spectrum-textfield-border-color-hover)",
+ "description": "Used by `.spectrum-Textfield-input:hover, .spectrum-Textfield:hover .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-text-color-hover": {
+ "value": "var(--spectrum-textfield-text-color-hover)",
+ "description": "Used by `.spectrum-Textfield-input:hover, .spectrum-Textfield-input:hover::placeholder, .spectrum-Textfield:hover .spectrum-Textfield-input, .spectrum-Textfield:hover .spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-text-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-border-color-focus-hover": {
+ "value": "var(--spectrum-textfield-border-color-focus-hover)",
+ "description": "Used by `.is-focused .spectrum-Textfield-input:hover, .spectrum-Textfield-input:focus:hover`.
Defaults to `var(--spectrum-textfield-border-color-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-text-color-focus-hover": {
+ "value": "var(--spectrum-textfield-text-color-focus-hover)",
+ "description": "Used by `.is-focused .spectrum-Textfield-input:hover, .is-focused .spectrum-Textfield-input:hover::placeholder, .spectrum-Textfield-input:focus:hover, .spectrum-Textfield-input:focus:hover::placeholder`.
Defaults to `var(--spectrum-textfield-text-color-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-border-color-invalid-hover": {
+ "value": "var(--spectrum-textfield-border-color-invalid-hover)",
+ "description": "Used by `.is-invalid .spectrum-Textfield-input:hover:not(.is-disabled), .is-invalid:hover:not(.is-disabled) .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-color-invalid-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-border-color-invalid-focus-hover": {
+ "value": "var(--spectrum-textfield-border-color-invalid-focus-hover)",
+ "description": "Used by `.is-invalid .spectrum-Textfield-input:focus:hover, .is-invalid.is-focused .spectrum-Textfield-input:hover, .is-invalid:focus .spectrum-Textfield-input:hover`.
Defaults to `var(--spectrum-textfield-border-color-invalid-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-label-spacing-inline-side-label": {
+ "value": "var(--spectrum-textfield-label-spacing-inline-side-label)",
+ "description": "Used by `.spectrum-Textfield--sideLabel .spectrum-FieldLabel`.
Defaults to `var(--spectrum-textfield-label-spacing-inline-side-label)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-character-count-spacing-block-side": {
+ "value": "var(--spectrum-textfield-character-count-spacing-block-side)",
+ "description": "Used by `.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-textfield-character-count-spacing-block-side)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-character-count-spacing-inline-side": {
+ "value": "var(--spectrum-textfield-character-count-spacing-inline-side)",
+ "description": "Used by `.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-textfield-character-count-spacing-inline-side)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-text-area-min-inline-size": {
+ "value": "var(--spectrum-text-area-min-inline-size)",
+ "description": "Used by `.spectrum-Textfield--multiline .spectrum-Textfield-input`.
Defaults to `var(--spectrum-text-area-min-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-text-area-min-block-size": {
+ "value": "var(--spectrum-text-area-min-block-size)",
+ "description": "Used by `.spectrum-Textfield--multiline .spectrum-Textfield-input`.
Defaults to `var(--spectrum-text-area-min-block-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-text-area-min-block-size-quiet": {
+ "value": "var(--spectrum-text-area-min-block-size-quiet)",
+ "description": "Used by `.spectrum-Textfield--multiline.spectrum-Textfield--quiet .spectrum-Textfield-input`.
Defaults to `var(--spectrum-text-area-min-block-size-quiet)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-textfield-input-line-height": {
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--multiline`.
Used by `.spectrum-Textfield-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-height": {
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `--spectrum-textfield-input-line-height`, `.spectrum-Textfield-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-width": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-min-width": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-text-field-minimum-width-multiplier": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-textfield-min-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-corner-radius": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-spacing-inline-quiet": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield--quiet .spectrum-Textfield-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-spacing-block-start": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`, `.spectrum-Textfield--quiet .spectrum-Textfield-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-spacing-block-end": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-spacing-block-quiet": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield--quiet .spectrum-Textfield-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-label-spacing-block": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield .spectrum-FieldLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-helptext-spacing-block": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield .spectrum-HelpText`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-spacing-inline-end-quiet-invalid": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-validationIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-spacing-inline-end-quiet-valid": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield--quiet.is-valid .spectrum-Textfield-validationIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-font-family": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-font-weight": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-character-count-font-family": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-characterCount`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-character-count-font-weight": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-characterCount`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-character-count-spacing-inline": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-characterCount`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-character-count-spacing-inline-side": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-focus-indicator-width": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-keyboardFocused .spectrum-Textfield-input`, `.spectrum-Textfield--quiet:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-focus-indicator-gap": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-keyboardFocused .spectrum-Textfield-input`, `.spectrum-Textfield--quiet:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-text-color-default": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-text-color-hover": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input:hover, .spectrum-Textfield-input:hover::placeholder, .spectrum-Textfield:hover .spectrum-Textfield-input, .spectrum-Textfield:hover .spectrum-Textfield-input::placeholder`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-text-color-focus": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-focused .spectrum-Textfield-input, .is-focused .spectrum-Textfield-input::placeholder, .spectrum-Textfield-input:focus, .spectrum-Textfield-input:focus::placeholder`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-text-color-focus-hover": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-focused .spectrum-Textfield-input:hover, .is-focused .spectrum-Textfield-input:hover::placeholder, .spectrum-Textfield-input:focus:hover, .spectrum-Textfield-input:focus:hover::placeholder`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-text-color-keyboard-focus": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-keyboardFocused .spectrum-Textfield-input, .is-keyboardFocused .spectrum-Textfield-input::placeholder`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-text-color-readonly": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input:read-only, .spectrum-Textfield.is-readOnly .spectrum-Textfield-input`, `.spectrum-Textfield-input:read-only::placeholder, .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input, .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-text-color-disabled": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-disabled .spectrum-FieldLabel`, `.spectrum-Textfield-input:disabled, .spectrum-Textfield-input:disabled::placeholder, .spectrum-Textfield.is-disabled .spectrum-Textfield-input, .spectrum-Textfield.is-disabled .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input, .spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input::placeholder, .spectrum-Textfield-input:disabled, .spectrum-Textfield-input:disabled::placeholder`, `.spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input::placeholder`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color-invalid-default": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color-invalid-hover": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input:hover:not(.is-disabled), .is-invalid:hover:not(.is-disabled) .spectrum-Textfield-input`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color-invalid-focus": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input:focus, .is-invalid.is-focused .spectrum-Textfield-input, .is-invalid:focus .spectrum-Textfield-input`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color-invalid-focus-hover": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input:focus:hover, .is-invalid.is-focused .spectrum-Textfield-input:hover, .is-invalid:focus .spectrum-Textfield-input:hover`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color-invalid-keyboard-focus": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input:focus-visible, .is-invalid.is-keyboardFocused .spectrum-Textfield-input`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-color-invalid": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-text-color-invalid": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-text-color-valid": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-valid .spectrum-Textfield-input`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-color-valid": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-focus-indicator-color": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-keyboardFocused .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-keyboardFocused:after`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-label-spacing-block-quiet": {
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield--quiet .spectrum-FieldLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-label-spacing-inline-side-label": {
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield--sideLabel .spectrum-FieldLabel`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-placeholder-font-size": {
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-spacing-inline": {
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-size-invalid": {
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`, `.is-invalid .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-size-valid": {
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.is-valid .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-valid .spectrum-Textfield-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-spacing-inline-end-invalid": {
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`, `.is-invalid .spectrum-Textfield-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-spacing-inline-end-valid": {
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`, `.is-valid .spectrum-Textfield-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-spacing-block-valid": {
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-spacing-inline-start-invalid": {
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.is-invalid .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-spacing-inline-start-valid": {
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.is-valid .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-valid .spectrum-Textfield-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-character-count-font-size": {
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield-characterCount`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-character-count-spacing-block": {
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield-characterCount`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-character-count-spacing-block-quiet": {
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield--quiet .spectrum-Textfield-characterCount`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-character-count-spacing-block-side": {
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-spacing-block-invalid": {
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield.spectrum-Textfield--sizeS`, `.spectrum-Textfield.spectrum-Textfield--sizeL`, `.spectrum-Textfield.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-width": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`, `.is-valid .spectrum-Textfield-input`, `.is-invalid .spectrum-Textfield-input`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-background-color": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color-focus": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-focused .spectrum-Textfield-input, .spectrum-Textfield-input:focus`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color-keyboard-focus": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-keyboardFocused .spectrum-Textfield-input`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-background-color-disabled": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input:disabled, .spectrum-Textfield.is-disabled .spectrum-Textfield-input`, `.spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color-disabled": {
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield.spectrum-Textfield--quiet`.
Used by `.spectrum-Textfield-input:disabled, .spectrum-Textfield.is-disabled .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input, .spectrum-Textfield-input:disabled`, `.spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color-hover": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input:hover, .spectrum-Textfield:hover .spectrum-Textfield-input`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color-focus-hover": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-focused .spectrum-Textfield-input:hover, .spectrum-Textfield-input:focus:hover`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--system-textfield-background-color`, `--system-textfield-background-color-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-500": {
+ "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+ "description": "Used by `--system-textfield-border-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-600": {
+ "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+ "description": "Used by `--system-textfield-border-color-hover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-800": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Used by `--system-textfield-border-color-focus`, `--system-textfield-border-color-keyboard-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-900": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Used by `--system-textfield-border-color-focus-hover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-300": {
+ "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+ "description": "Used by `--system-textfield-border-color-disabled`, `--system-textfield-quiet-border-color-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--system-textfield-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-100": {
+ "value": "6px",
+ "description": "Used by `--system-textfield-icon-spacing-block-invalid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-75": {
+ "value": "4px",
+ "description": "Used by `--system-textfield-size-s-icon-spacing-block-invalid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-200": {
+ "value": "9px",
+ "description": "Used by `--system-textfield-size-l-icon-spacing-block-invalid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-300": {
+ "value": "11px",
+ "description": "Used by `--system-textfield-size-xl-icon-spacing-block-invalid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-texfield-animation-duration": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `--spectrum-texfield-animation-duration`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-textfield-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-text-quiet": {
+ "value": "0px",
+ "description": "Used by `--spectrum-textfield-spacing-inline-quiet`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-textfield-spacing-block-start`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-100": {
+ "value": "9px",
+ "description": "Used by `--spectrum-textfield-spacing-block-end`, `--spectrum-textfield-character-count-spacing-block`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-border-quiet": {
+ "value": "0px",
+ "description": "Used by `--spectrum-textfield-spacing-block-quiet`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-label-to-component": {
+ "value": "0px",
+ "description": "Used by `--spectrum-textfield-label-spacing-block`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-help-text-to-component": {
+ "value": "0px",
+ "description": "Used by `--spectrum-textfield-helptext-spacing-block`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-alert-icon-quiet": {
+ "value": "0px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-quiet-invalid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-validation-icon-quiet": {
+ "value": "0px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-quiet-valid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-textfield-font-family`, `--spectrum-textfield-character-count-font-family`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-textfield-font-weight`, `--spectrum-textfield-character-count-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-textfield-character-count-spacing-inline`, `--spectrum-textfield-label-spacing-inline-side-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-side-label-character-count-to-field": {
+ "value": "12px",
+ "description": "Used by `--spectrum-textfield-character-count-spacing-inline-side`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-textfield-focus-indicator-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-textfield-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-textfield-text-color-default`, `--spectrum-textfield-text-color-readonly`, `--spectrum-textfield-text-color-invalid`, `--spectrum-textfield-text-color-valid`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-textfield-text-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-focus": {
+ "value": "var(--spectrum-neutral-content-color-down)",
+ "description": "Used by `--spectrum-textfield-text-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-focus-hover": {
+ "value": "var(--spectrum-neutral-content-color-down)",
+ "description": "Used by `--spectrum-textfield-text-color-focus-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-textfield-text-color-keyboard-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-textfield-text-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-default": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Used by `--spectrum-textfield-border-color-invalid-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-hover": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--spectrum-textfield-border-color-invalid-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-focus": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--spectrum-textfield-border-color-invalid-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-focus-hover": {
+ "value": "var(--spectrum-negative-border-color-down)",
+ "description": "Used by `--spectrum-textfield-border-color-invalid-focus-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-key-focus": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--spectrum-textfield-border-color-invalid-keyboard-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-visual-color": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Used by `--spectrum-textfield-icon-color-invalid`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-positive-visual-color": {
+ "value": "var(--spectrum-positive-color-900)",
+ "description": "Used by `--spectrum-textfield-icon-color-valid`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-textfield-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-text-area-min-inline-size": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield--multiline .spectrum-Textfield-input`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-area-minimum-width": {
+ "value": "112px",
+ "description": "Used by `--spectrum-text-area-min-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-area-min-block-size": {
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield--multiline .spectrum-Textfield-input`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-area-minimum-height": {
+ "value": "56px",
+ "description": "Used by `--spectrum-text-area-min-block-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-textfield-height`, `--spectrum-text-area-min-block-size-quiet`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-label-to-component-quiet-medium": {
+ "value": "-8px",
+ "description": "Used by `--spectrum-textfield-label-spacing-block-quiet`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-textfield-placeholder-font-size`, `--spectrum-textfield-character-count-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-100": {
+ "value": "12px",
+ "description": "Used by `--spectrum-textfield-spacing-inline`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-textfield-icon-size-invalid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-checkmark-icon-size-100": {
+ "value": "10px",
+ "description": "Used by `--spectrum-textfield-icon-size-valid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-alert-icon-medium": {
+ "value": "12px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-invalid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-validation-icon-medium": {
+ "value": "12px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-valid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-validation-icon-medium": {
+ "value": "11px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-block-valid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-text-to-alert-icon-medium": {
+ "value": "12px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-invalid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-text-to-validation-icon-medium": {
+ "value": "12px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-valid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-textfield-character-count-font-size`, `--spectrum-textfield-placeholder-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-textfield-character-count-spacing-block`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-character-count-to-field-quiet-medium": {
+ "value": "-3px",
+ "description": "Used by `--spectrum-textfield-character-count-spacing-block-quiet`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-side-label-character-count-top-margin-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-textfield-character-count-spacing-block-side`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-area-min-block-size-quiet": {
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield--multiline.spectrum-Textfield--quiet .spectrum-Textfield-input`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-textfield-height`, `--spectrum-text-area-min-block-size-quiet`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-label-to-component-quiet-small": {
+ "value": "-8px",
+ "description": "Used by `--spectrum-textfield-label-spacing-block-quiet`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-textfield-label-spacing-inline-side-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-75": {
+ "value": "10px",
+ "description": "Used by `--spectrum-textfield-spacing-inline`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-75": {
+ "value": "16px",
+ "description": "Used by `--spectrum-textfield-icon-size-invalid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-checkmark-icon-size-75": {
+ "value": "10px",
+ "description": "Used by `--spectrum-textfield-icon-size-valid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-alert-icon-small": {
+ "value": "9px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-invalid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-validation-icon-small": {
+ "value": "9px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-valid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-validation-icon-small": {
+ "value": "7px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-block-valid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-text-to-alert-icon-small": {
+ "value": "8px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-invalid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-text-to-validation-icon-small": {
+ "value": "8px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-valid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-character-count-to-field-quiet-small": {
+ "value": "-3px",
+ "description": "Used by `--spectrum-textfield-character-count-spacing-block-quiet`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-side-label-character-count-top-margin-small": {
+ "value": "4px",
+ "description": "Used by `--spectrum-textfield-character-count-spacing-block-side`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-textfield-height`, `--spectrum-text-area-min-block-size-quiet`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-label-to-component-quiet-large": {
+ "value": "-12px",
+ "description": "Used by `--spectrum-textfield-label-spacing-block-quiet`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-textfield-placeholder-font-size`, `--spectrum-textfield-character-count-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-200": {
+ "value": "15px",
+ "description": "Used by `--spectrum-textfield-spacing-inline`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-200": {
+ "value": "22px",
+ "description": "Used by `--spectrum-textfield-icon-size-invalid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-checkmark-icon-size-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-textfield-icon-size-valid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-alert-icon-large": {
+ "value": "15px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-invalid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-validation-icon-large": {
+ "value": "15px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-valid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-validation-icon-large": {
+ "value": "14px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-block-valid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-text-to-alert-icon-large": {
+ "value": "15px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-invalid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-text-to-validation-icon-large": {
+ "value": "15px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-valid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-character-count-to-field-quiet-large": {
+ "value": "-3px",
+ "description": "Used by `--spectrum-textfield-character-count-spacing-block-quiet`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-side-label-character-count-top-margin-large": {
+ "value": "11px",
+ "description": "Used by `--spectrum-textfield-character-count-spacing-block-side`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-textfield-height`, `--spectrum-text-area-min-block-size-quiet`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-label-to-component-quiet-extra-large": {
+ "value": "-15px",
+ "description": "Used by `--spectrum-textfield-label-spacing-block-quiet`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-textfield-placeholder-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-300": {
+ "value": "26px",
+ "description": "Used by `--spectrum-textfield-icon-size-invalid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-checkmark-icon-size-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-textfield-icon-size-valid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-alert-icon-extra-large": {
+ "value": "18px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-invalid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-validation-icon-extra-large": {
+ "value": "18px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-valid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-validation-icon-extra-large": {
+ "value": "17px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-block-valid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-text-to-alert-icon-extra-large": {
+ "value": "18px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-invalid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-text-to-validation-icon-extra-large": {
+ "value": "18px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-valid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-200": {
+ "value": "11px",
+ "description": "Used by `--spectrum-textfield-character-count-spacing-block`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-character-count-to-field-quiet-extra-large": {
+ "value": "-4px",
+ "description": "Used by `--spectrum-textfield-character-count-spacing-block-quiet`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-side-label-character-count-top-margin-extra-large": {
+ "value": "14px",
+ "description": "Used by `--spectrum-textfield-character-count-spacing-block-side`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "system-theme": {
+ "system-textfield-background-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-background-color`.",
+ "control": "color"
+ },
+ "system-textfield-background-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-background-color-disabled`.",
+ "control": "color"
+ },
+ "system-textfield-border-color": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-border-color`.",
+ "control": "color"
+ },
+ "system-textfield-border-color-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-border-color-hover`.",
+ "control": "color"
+ },
+ "system-textfield-border-color-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-border-color-focus`.",
+ "control": "color"
+ },
+ "system-textfield-border-color-focus-hover": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-border-color-focus-hover`.",
+ "control": "color"
+ },
+ "system-textfield-border-color-keyboard-focus": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-border-color-keyboard-focus`.",
+ "control": "color"
+ },
+ "system-textfield-border-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-border-color-disabled`.",
+ "control": "color"
+ },
+ "system-textfield-border-width": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-border-width`.",
+ "control": "text"
+ },
+ "system-textfield-icon-spacing-block-invalid": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-icon-spacing-block-invalid`.",
+ "control": "text"
+ },
+ "system-textfield-size-s-icon-spacing-block-invalid": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-icon-spacing-block-invalid`.",
+ "control": "text"
+ },
+ "system-textfield-size-l-icon-spacing-block-invalid": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-icon-spacing-block-invalid`.",
+ "control": "text"
+ },
+ "system-textfield-size-xl-icon-spacing-block-invalid": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-icon-spacing-block-invalid`.",
+ "control": "text"
+ },
+ "system-textfield-quiet-border-color-disabled": {
+ "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-border-color-disabled`.",
+ "control": "color"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-textfield-border-color": {
+ "value": "var(--mod-textfield-border-color, var(--spectrum-textfield-border-color))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-border-color, var(--spectrum-textfield-border-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-text-color-default": {
+ "value": "var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default))",
+ "description": "Defined in `.spectrum-Textfield .spectrum-Textfield-input`, `.spectrum-Textfield .spectrum-Textfield-input::placeholder`.
Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-border-color-focus": {
+ "value": "var(--mod-textfield-border-color-focus, var(--spectrum-textfield-border-color-focus))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-focused .spectrum-Textfield-input, .spectrum-Textfield-input:focus`.
Defaults to `var(--mod-textfield-border-color-focus, var(--spectrum-textfield-border-color-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-border-color-keyboard-focus": {
+ "value": "var(--mod-textfield-border-color-keyboard-focus, var(--spectrum-textfield-border-color-keyboard-focus))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-keyboardFocused .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-border-color-keyboard-focus, var(--spectrum-textfield-border-color-keyboard-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-focus-indicator-color": {
+ "value": "var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-keyboardFocused .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-keyboardFocused:after`.
Defaults to `var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-text-color-keyboard-focus": {
+ "value": "var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus))",
+ "description": "Defined in `.spectrum-Textfield .spectrum-Textfield-input`, `.spectrum-Textfield .spectrum-Textfield-input::placeholder`.
Used by `.is-keyboardFocused .spectrum-Textfield-input, .is-keyboardFocused .spectrum-Textfield-input::placeholder`.
Defaults to `var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-text-color-valid": {
+ "value": "var(--mod-textfield-text-color-valid, var(--spectrum-textfield-text-color-valid))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-valid .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-text-color-valid, var(--spectrum-textfield-text-color-valid))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-text-color-invalid": {
+ "value": "var(--mod-textfield-text-color-invalid, var(--spectrum-textfield-text-color-invalid))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-text-color-invalid, var(--spectrum-textfield-text-color-invalid))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-border-color-invalid-default": {
+ "value": "var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-border-color-invalid-focus": {
+ "value": "var(--mod-textfield-border-color-invalid-focus, var(--spectrum-textfield-border-color-invalid-focus))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input:focus, .is-invalid.is-focused .spectrum-Textfield-input, .is-invalid:focus .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-border-color-invalid-focus, var(--spectrum-textfield-border-color-invalid-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-border-color-invalid-keyboard-focus": {
+ "value": "var(--mod-textfield-border-color-invalid-keyboard-focus, var(--spectrum-textfield-border-color-invalid-keyboard-focus))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input:focus-visible, .is-invalid.is-keyboardFocused .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-border-color-invalid-keyboard-focus, var(--spectrum-textfield-border-color-invalid-keyboard-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-text-color-disabled": {
+ "value": "var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))",
+ "description": "Defined in `.spectrum-Textfield .spectrum-Textfield-input`, `.spectrum-Textfield .spectrum-Textfield-input::placeholder`.
Used by `.spectrum-Textfield-input:disabled, .spectrum-Textfield-input:disabled::placeholder, .spectrum-Textfield.is-disabled .spectrum-Textfield-input, .spectrum-Textfield.is-disabled .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input, .spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input::placeholder, .spectrum-Textfield-input:disabled, .spectrum-Textfield-input:disabled::placeholder`, `.spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input::placeholder`.
Defaults to `var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-text-color-readonly": {
+ "value": "var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly))",
+ "description": "Defined in `.spectrum-Textfield .spectrum-Textfield-input`, `.spectrum-Textfield .spectrum-Textfield-input::placeholder`.
Used by `.spectrum-Textfield-input:read-only, .spectrum-Textfield.is-readOnly .spectrum-Textfield-input`, `.spectrum-Textfield-input:read-only::placeholder, .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input, .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder`.
Defaults to `var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-border-color-hover": {
+ "value": "var(--mod-textfield-border-color-hover, var(--spectrum-textfield-border-color-hover))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input:hover, .spectrum-Textfield:hover .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-border-color-hover, var(--spectrum-textfield-border-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-text-color-hover": {
+ "value": "var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover))",
+ "description": "Defined in `.spectrum-Textfield .spectrum-Textfield-input`, `.spectrum-Textfield .spectrum-Textfield-input::placeholder`.
Used by `.spectrum-Textfield-input:hover, .spectrum-Textfield-input:hover::placeholder, .spectrum-Textfield:hover .spectrum-Textfield-input, .spectrum-Textfield:hover .spectrum-Textfield-input::placeholder`.
Defaults to `var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-border-color-invalid-hover": {
+ "value": "var(--mod-textfield-border-color-invalid-hover, var(--spectrum-textfield-border-color-invalid-hover))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input:hover:not(.is-disabled), .is-invalid:hover:not(.is-disabled) .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-border-color-invalid-hover, var(--spectrum-textfield-border-color-invalid-hover))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/textfield/stories/template.js b/components/textfield/stories/template.js
index 5f20b0abb86..7798391b612 100644
--- a/components/textfield/stories/template.js
+++ b/components/textfield/stories/template.js
@@ -57,6 +57,7 @@ import "../themes/express.css";
*/
export const Template = ({
rootClass = "spectrum-Textfield",
+ id = getRandomId("text-field"),
size = "m",
customClasses = [],
customInputClasses = [],
@@ -83,7 +84,6 @@ export const Template = ({
placeholder,
name,
helpText = "",
- id = getRandomId("textfield"),
value = "",
type = "text",
autocomplete = true,
diff --git a/components/textfield/stories/textarea.stories.js b/components/textfield/stories/textarea.stories.js
index 340820af2db..8168bb6f1fc 100644
--- a/components/textfield/stories/textarea.stories.js
+++ b/components/textfield/stories/textarea.stories.js
@@ -1,11 +1,13 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { HelpTextOptionsTextArea, KeyboardFocusTemplate, Template, TextAreaOptions } from "./textarea.template.js";
import { TextAreaGroup } from "./textarea.test.js";
import { default as Textfield } from "./textfield.stories.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* A text area is multi-line text field using the `